/* ============================================================
   site.css — public-site SHARED SPINE
   Common to every page: fonts, base type, horse motif, nav,
   language toggle, buttons, contact form, footer, animations,
   responsive breakpoints. Brand values come from theme.css.
   Page-specific CSS stays scoped inside each content fragment.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Jost:wght@300;400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
      background: var(--white);
      color: var(--black);
      font-family: var(--font-sans);
      font-weight: 300;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
::selection { background: var(--black); color: var(--white); }
/* ============ REUSABLE HORSE MOTIF ============ */
    /* Dot-stipple field: the mark dissolving into particles. Use as a quiet
       background-image on any dark or light ground. Reuse on Manifesto/Services
       by adding class="stipple" (light) or "stipple-dark" to a section. */
    .stipple, .stipple-dark { position: relative; }
.stipple::before, .stipple-dark::before {
      content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
      background-image: radial-gradient(currentColor 1px, transparent 1.4px);
      background-size: 22px 22px;
      opacity: 0.05;
      -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent);
              mask-image: linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent);
    }
.stipple { color: var(--black); }
.stipple-dark { color: #fafaf8; }
.stipple > *, .stipple-dark > * { position: relative; z-index: 1; }
/* Stride-line divider: one fine galloping-stride hairline, running right->left,
       echoing the gait of the mark. Reuse via <div class="stride" aria-hidden="true">…svg…</div>. */
    .stride { width: 100%; line-height: 0; color: var(--hair); }
.stride svg { width: 100%; height: auto; display: block; }
.stride .gallop {
      stroke: currentColor; stroke-width: 1; fill: none;
      stroke-dasharray: 1600; stroke-dashoffset: 1600;
    }
.stride.in-view .gallop { animation: draw 2.4s cubic-bezier(0.16,1,0.3,1) forwards; }
.stride .tick { stroke: currentColor; stroke-width: 1; opacity: 0.5; }
@keyframes draw { to { stroke-dashoffset: 0; } }
/* NAV */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      padding: 1.5rem 3rem;
      display: flex; align-items: center; justify-content: space-between;
      background: rgba(250,250,248,0.82);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-bottom: 1px solid transparent;
      transition: border-color 0.3s, padding 0.3s;
      opacity: 0; animation: fadeIn 0.8s ease 0.2s forwards;
    }
nav.scrolled { border-bottom-color: var(--light); padding: 1.05rem 3rem; }
.nav-logo { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; }
.nav-logo img { width: 36px; height: auto; transition: transform 0.4s; }
.nav-logo:hover img { transform: translateX(-4px); }
.nav-wordmark {
      font-family: var(--font-sans); font-weight: 400; font-size:0.78rem;
      letter-spacing: 0.18em; text-transform: uppercase; color: var(--black);
    }
.nav-links { display: flex; gap: 2.5rem; list-style: none; }
.nav-links a {
      font-family: var(--font-sans); font-weight: 400; font-size:0.8rem;
      letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray);
      text-decoration: none; transition: color 0.25s; position: relative;
    }
.nav-links a::after {
      content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 1px;
      background: var(--black); transition: width 0.28s ease;
    }
.nav-links a:hover { color: var(--black); }
.nav-links a:hover::after { width: 100%; }
/* LANGUAGE TOGGLE */
    .lang-toggle {
      display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
      font-family: var(--font-sans); font-weight: 400; font-size:0.76rem;
      letter-spacing: 0.14em; text-transform: uppercase;
    }
.lang-toggle a { color: var(--gray); text-decoration: none; transition: color 0.25s; }
.lang-toggle a:hover { color: var(--black); }
.lang-toggle a[aria-current="true"] { color: var(--black); }
.lang-toggle .lang-sep { color: #ccc; }
@media (max-width: 900px) {
      .lang-toggle { font-size:0.8rem; letter-spacing: 0.12em; }
    }
.btn-primary {
      display: inline-block; font-family: var(--font-sans); font-weight: 400;
      font-size:0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--white); background: var(--black); text-decoration: none;
      padding: 1rem 2.2rem; transition: background 0.25s;
    }
.btn-primary:hover { background: #333; }
.btn-ghost {
      font-family: var(--font-sans); font-weight: 400; font-size:0.78rem;
      letter-spacing: 0.14em; text-transform: uppercase; color: var(--black);
      text-decoration: none; border-bottom: 1px solid currentColor;
      padding-bottom: 2px; transition: color 0.25s;
    }
.btn-ghost:hover { color: var(--gray); }
/* ============ FOOTER ============ */
    footer { border-top: 1px solid var(--light); padding: 2.5rem 3rem; }
.footer-inner {
      max-width: 1200px; margin: 0 auto; display: flex;
      align-items: center; justify-content: space-between;
    }
.footer-left { display: flex; align-items: center; gap: 0.8rem; }
.footer-left img { width: 22px; height: auto; opacity: 0.3; }
.footer-copy {
      font-family: var(--font-sans); font-weight: 300; font-size:0.76rem;
      letter-spacing: 0.1em; color: #aaa; text-transform: uppercase;
    }
.footer-links { display: flex; gap: 2rem; }
.footer-links a {
      font-family: var(--font-sans); font-weight: 300; font-size:0.76rem;
      letter-spacing: 0.1em; text-transform: uppercase; color: #aaa;
      text-decoration: none; transition: color 0.2s;
    }
.footer-links a:hover { color: var(--black); }
/* footer-only legal links (Impressum / Datenschutz) — quieter, below the main footer row */
    .footer-legal {
      max-width: 1200px; margin: 1.4rem auto 0; display: flex; gap: 1.6rem;
      flex-wrap: wrap;
    }
.footer-legal a {
      font-family: var(--font-sans); font-weight: 300; font-size:0.7rem;
      letter-spacing: 0.1em; text-transform: uppercase; color: #bbb;
      text-decoration: none; transition: color 0.2s;
    }
.footer-legal a:hover { color: var(--black); }
/* ============ ANIMATIONS ============ */
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lineUp { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16,1,0.3,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.email-submit {
      font-family: var(--font-sans); font-weight: 400; font-size:0.76rem;
      letter-spacing: 0.16em; text-transform: uppercase; color: var(--white);
      background: var(--black); border: 1px solid var(--black); padding: 0.9rem 1.8rem;
      cursor: pointer; transition: background 0.25s;
    }
.email-submit:hover { background: #333; border-color: #333; }
/* footer social icons (monochrome; inherit footer colour, darken on hover) */
    .footer-social{ display:flex; justify-content:center; gap:1.5rem; padding:2.2rem 3rem 0; }
.footer-social .soc{ color:var(--gray); display:inline-flex; transition:color .2s; }
.footer-social .soc:hover{ color:var(--black); }
.footer-social .soc svg{ width:18px; height:18px; fill:currentColor; display:block; }
/* newsletter subscribe band (general before-footer + landing Signal-Files placement) */
    .nl-band{ border-top:1px solid var(--hair); background:var(--white); padding:6.5rem 3rem; }
.nl-inner{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1.05fr 0.95fr;
      gap:4.5rem; align-items:center; }
.nl-eyebrow{ font-family:var(--font-sans); font-weight:400; font-size:0.76rem; letter-spacing:0.22em;
      text-transform:uppercase; color:var(--gray); }
.nl-title{ font-family:var(--font-serif); font-weight:300; font-size:clamp(2rem,3.4vw,3.2rem);
      line-height:1.04; letter-spacing:-0.01em; color:var(--black); margin-top:1.2rem; }
.nl-title em{ font-style:italic; }
.nl-sub{ font-family:var(--font-sans); font-weight:300; font-size:1.04rem; line-height:1.8;
      color:var(--gray); margin-top:1.4rem; max-width:44ch; }
.nl-form{ display:flex; flex-direction:column; gap:0.85rem; }
.nl-row{ display:flex; gap:0.6rem; }
.nl-input{ flex:1; min-width:0; font-family:var(--font-sans); font-weight:300; font-size:0.98rem;
      letter-spacing:0.02em; color:var(--black); background:transparent; border:1px solid #cfcfca;
      padding:1rem 1.15rem; outline:none; transition:border-color .2s; }
.nl-input:focus{ border-color:var(--black); }
.nl-input::placeholder{ color:#aaa; }
.nl-submit{ white-space:nowrap; }
.nl-fine{ font-family:var(--font-sans); font-weight:300; font-size:0.8rem; letter-spacing:0.04em; color:#aaa; }
@media (max-width: 860px){ .nl-band{ padding:4rem 1.5rem; } .nl-inner{ grid-template-columns:1fr; gap:2rem; }
      .nl-row{ flex-direction:column; } .nl-submit{ width:100%; } }
/* contact form (verbatim spec from home.html) */
    .cf-form{display:flex;flex-direction:column;gap:0.6rem;max-width:440px;}
.cf-input{font-family:var(--font-sans);font-weight:300;font-size:0.9rem;letter-spacing:0.04em;color:var(--black);background:transparent;border:1px solid #ccc;padding:0.8rem 1.1rem;outline:none;transition:border-color .2s;width:100%;box-sizing:border-box;}
.cf-input:focus{border-color:var(--black);}
.cf-input::placeholder{color:#aaa;}
.cf-textarea{resize:vertical;min-height:4.6rem;line-height:1.6;}
.cf-submit{margin-top:0.3rem;align-self:flex-start;}
@media (max-width: 900px) {
      nav, nav.scrolled { padding: 1.2rem 1.5rem; }
      .nav-links { display: none; }
      footer { padding: 2rem 1.5rem; }
      .footer-inner { flex-direction: column; gap: 1.2rem; align-items: flex-start; }
    }

/* ============================================================
   .gword — gradient accent word. Same Spectrum sweep as the hero
   mark (theme.css --grad). Wrap ONE key word per page, maximum:
   <span class="gword">word</span>. Reduced-motion safe.
   ============================================================ */
.gword{
  background: var(--grad); background-size: 220% 220%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  animation: gwordsweep 9s ease-in-out infinite;
}
@keyframes gwordsweep{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
@media (prefers-reduced-motion: reduce){ .gword{ animation: none; background-position: 0% 50%; } }