/* ═══════════════════════════════════════════════════════════════
   M4 DIGITAL — Design System
   Konzept: "Warmes Papier & klare Linie"
   Warmes, natürliches Papier-Weiß, ein dunkles Kapitel (QAIRO®),
   Brand-Petrol als einziger kalter Akzent, Ocker als Wärme.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* — Flächen — */
  --paper:      #FBF8F4;
  --paper-2:    #F4EFE8;
  --sand:       #EDE5DA;
  --clay:       #E2D6C6;

  /* — Schrift — */
  --ink:        #22272B;
  --ink-2:      #545454;
  --ink-3:      #6D6B65;   /* dunkler als der Entwurf: erst hier werden
                              4,5:1 auch auf --paper-2 erreicht (WCAG AA) */

  /* — Akzente — */
  --teal:       #1BACB0;
  --teal-deep:  #0E7C80;
  --teal-soft:  #D8EEEE;
  --gold:       #D2A24C;
  --gold-soft:  #EFDCBB;
  --terra:      #B9714E;

  /* — Dunkles Kapitel — */
  --night:      #191B1A;
  --night-2:    #232726;
  --night-txt:  #E9E4DA;

  /* — Maße — */
  --wrap:       1320px;
  --gut:        clamp(18px, 2.4vw, 34px);
  --pad:        clamp(20px, 5vw, 72px);
  --r:          14px;
  --nav-h:      81px;   /* Höhe der fixierten Leiste im gescrollten Zustand:
                           Bildmarke 57px + 2 × 12px Innenabstand. Ankerziele
                           halten diesen Abstand nach oben frei. */

  /* — Typo — */
  --f-display: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --f-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-io:   cubic-bezier(.65,.05,.36,1);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box}
/* overflow-x:clip statt hidden – hidden auf <body> würde daraus einen
   eigenen Scroll-Container machen und Sticky/Scroll-Effekte stören. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-sans);
  /* in rem, damit eine im Browser vergrößerte Standardschrift wirkt */
  font-size:clamp(0.97rem,1.02vw,1.09rem);
  line-height:1.62;
  font-weight:400;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
fieldset{border:0;margin:0;padding:0}
legend{padding:0}
::selection{background:var(--teal);color:#fff}

/* ── Tastaturbedienung ──
   Sichtbarer Fokusring für alle bedienbaren Elemente. :focus-visible
   zeigt ihn nur bei Tastatur, nicht bei Mausklick. */
:where(a,button,input,textarea,label.choice,summary):focus-visible{
  outline:2px solid var(--teal-deep);
  outline-offset:3px;
  border-radius:6px;
}
.dark :where(a,button):focus-visible,
.sec--qairo :where(a,button):focus-visible{outline-color:var(--gold)}

/* Kein blauer Aufblitzer beim Antippen auf Mobilgeräten */
a,button,label{-webkit-tap-highlight-color:transparent}

.skip{position:fixed;top:-100px;left:16px;z-index:999;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:8px}
.skip:focus,.skip:focus-visible{top:16px}
.skip:focus{outline:2px solid var(--gold);outline-offset:3px}
main:focus{outline:none}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Layout ── */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut) var(--gut)}
.col-1-4{grid-column:1/5}
.col-1-5{grid-column:1/6}
.col-1-6{grid-column:1/7}
.col-1-12{grid-column:1/13}
.col-5-12{grid-column:5/13}
.col-6-12{grid-column:7/13}
.col-7-12{grid-column:7/13}
.col-8-12{grid-column:8/13}

.sec{position:relative;padding-block:clamp(96px,12.5vw,196px)}
.sec__head{max-width:820px;margin-bottom:clamp(52px,6vw,92px)}

/* ═══════════ TYPO ═══════════ */
.eyebrow{
  font-family:var(--f-mono);
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:20px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--teal);display:inline-block}
.eyebrow--gold{color:var(--gold-soft)}
.eyebrow--gold .dot{background:var(--gold)}

.h2{
  font-family:var(--f-display);
  font-weight:300;
  font-size:clamp(31px,4.4vw,62px);
  line-height:1.08;
  letter-spacing:-.03em;
  max-width:16ch;
}
.sec--pillars .h2,.sec--about .h2{max-width:19ch}
.h2--light{color:var(--paper)}

.prose p{color:var(--ink-2);max-width:60ch;margin-top:22px;line-height:1.7}
.prose--light p,.prose--light{color:#B9B4AA}

.keys{
  margin-top:34px;font-family:var(--f-mono);font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
}
.keys i{color:var(--teal);font-style:normal;margin-inline:8px}
.keys--gold{color:#9C958A}
.keys--gold i{color:var(--gold)}

/* ═══════════ PRELOADER ═══════════ */
/* Ohne JS gibt es keinen Ladevorgang – dann darf der Preloader nichts verdecken. */
.preloader{display:none}
.js .preloader{
  position:fixed;inset:0;z-index:9999;background:var(--paper);
  display:grid;place-content:center;gap:26px;justify-items:center;
  transition:opacity .7s var(--ease),visibility .7s;
}
.js .preloader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.preloader__mark{width:96px;color:var(--ink-2)}
.preloader__mark svg{width:100%;height:auto}
.preloader__mark path{stroke-dasharray:200;stroke-dashoffset:200;animation:draw 1.1s var(--ease) forwards}
.pl-b{animation-delay:.13s !important}
.pl-c{animation-delay:.26s !important}
@keyframes draw{to{stroke-dashoffset:0}}
.preloader__bar{width:132px;height:1px;background:var(--clay);overflow:hidden}
.preloader__bar i{display:block;height:100%;width:0;background:var(--teal)}

/* ═══════════ CURSOR ═══════════ */
.cursor{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;mix-blend-mode:normal;opacity:0}
.cursor__dot,.cursor__ring{position:absolute;top:0;left:0;border-radius:50%;transform:translate(-50%,-50%)}
.cursor__dot{width:6px;height:6px;background:var(--teal)}
.cursor__ring{width:34px;height:34px;border:1px solid rgba(27,172,176,.42);transition:width .3s var(--ease),height .3s var(--ease),background .3s}
.cursor.is-link .cursor__ring{width:56px;height:56px;background:rgba(27,172,176,.09)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ═══════════ SCROLL PROGRESS ═══════════ */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:900;background:transparent;pointer-events:none}
.scroll-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--gold))}

/* ═══════════ NAV ═══════════ */
.nav{position:fixed;top:0;left:0;right:0;z-index:800;transition:transform .5s var(--ease),background .4s,box-shadow .4s,backdrop-filter .4s}
.nav__in{
  max-width:var(--wrap);margin-inline:auto;padding:20px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  transition:padding .4s var(--ease);
}
.nav.is-stuck{background:rgba(251,248,244,.82);backdrop-filter:saturate(160%) blur(14px);box-shadow:0 1px 0 rgba(34,39,43,.07)}
.nav.is-stuck .nav__in{padding-block:12px}

/* Die Leiste bleibt beim Scrollen durchgehend stehen. Sobald die Seite
   bewegt wird, legt sich eine leicht getrübte Papierfläche darunter,
   damit Logo und Menü über jedem Inhalt lesbar bleiben.
   Ankerziele halten deshalb --nav-h Abstand nach oben frei — das gilt
   auch für direkt aufgerufene Adressen wie /#kontakt und für Sprünge
   per Tastatur, die das Skript nicht abfängt. */
.hero[id],.sec[id],main[id]{scroll-margin-top:var(--nav-h)}
.hero[id]{scroll-margin-top:0}

/* Wort- und Bildmarke stammen beide aus der Logodatei – der Schriftzug
   wird nie mit einer Websatzschrift nachgebaut. */
/* flex:none — sonst staucht die Leiste das Logo, während die Wortmarke
   ihre Eigenbreite behält und rechts aus dem Kasten heraus unter das
   Menü läuft. */
.brand{display:flex;align-items:center;gap:13px;flex:none}
.brand__mark{
  width:56px;height:57px;object-fit:contain;flex:none;
  transition:transform .5s var(--ease);
}
.brand:hover .brand__mark{transform:rotate(-8deg) scale(1.06)}
.brand__word{height:19px;width:auto;object-fit:contain;flex:none}

.nav__links{display:flex;align-items:center;gap:4px}
.nav__links a{
  position:relative;padding:9px 14px;border-radius:999px;
  font-size:13.5px;color:var(--ink-2);transition:color .3s;
}
.nav__links a span{position:relative;z-index:1}
.nav__links a::before{
  content:"";position:absolute;inset:0;border-radius:999px;background:var(--sand);
  transform:scale(.7);opacity:0;transition:transform .4s var(--ease),opacity .3s;
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::before{transform:scale(1);opacity:1}
.nav__links a.is-active{color:var(--ink)}
.nav__links a.is-active::after{
  content:"";position:absolute;left:50%;bottom:1px;width:14px;height:1.5px;
  background:var(--teal);transform:translateX(-50%);
}
.nav__links a.is-cta{background:var(--ink);color:var(--paper);margin-left:8px}
.nav__links a.is-cta::before{background:var(--teal-deep)}
.nav__links a.is-cta:hover{color:#fff}

.burger{display:none;width:44px;height:44px;position:relative;border-radius:10px}
.burger i{position:absolute;left:12px;width:20px;height:1.5px;background:var(--ink);transition:transform .4s var(--ease),opacity .3s}
.burger i:nth-child(1){top:19px}
.burger i:nth-child(2){top:25px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* ═══════════ BUTTONS ═══════════ */
.btn{
  --bg:var(--ink);--fg:var(--paper);
  position:relative;display:inline-flex;align-items:center;gap:11px;
  padding:16px 30px;border-radius:999px;overflow:hidden;
  font-size:14px;font-weight:500;letter-spacing:.004em;
  color:var(--fg);background:var(--bg);isolation:isolate;
  transition:color .35s var(--ease),transform .35s var(--ease);
}
.btn svg{width:17px;height:17px;transition:transform .4s var(--ease)}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--teal-deep);transform:translateY(101%);
  transition:transform .5s var(--ease);
}
.btn:hover::before{transform:translateY(0)}
.btn:hover svg{transform:translateX(5px)}
.btn:active{transform:scale(.98)}
.btn--ghost{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1px rgba(34,39,43,.13)}
.btn--ghost:hover{color:var(--paper)}
.btn--ghost::before{background:var(--ink)}
.btn--gold{--bg:transparent;--fg:var(--night-txt);box-shadow:inset 0 0 0 1px rgba(210,162,76,.5)}
.btn--gold::before{background:var(--gold)}
.btn--gold:hover{color:#1B1A17}
.btn--quiet{--bg:transparent;--fg:#B9B4AA;box-shadow:inset 0 0 0 1px rgba(233,228,218,.20)}
.btn--quiet::before{background:rgba(233,228,218,.10)}
.btn--quiet:hover{color:var(--paper)}
.btn--quiet svg{width:15px;height:15px}
.btn--quiet:hover svg{transform:translate(3px,-3px)}
.btn__reg{font-size:.62em;line-height:0;vertical-align:baseline;position:relative;top:-.5em;margin-left:.06em}
.btn--wide{width:100%;justify-content:center;margin-top:8px}

/* ═══════════ MITLAUFENDER HANDLUNGSAUFRUF ═══════════
   Erscheint, sobald der Hero-Button aus dem Blick ist, und zieht sich
   zurück, sobald das Kontaktformular erreicht ist – dort wäre er doppelt. */
.cta-float{
  position:fixed;
  right:clamp(16px,2.6vw,34px);
  bottom:clamp(16px,2.6vw,34px);
  z-index:850;
  box-shadow:0 18px 44px -20px rgba(34,39,43,.6);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(14px) scale(.96);
  transition:opacity .45s var(--ease),transform .55s var(--ease),visibility .45s;
}
.cta-float.is-on{opacity:1;visibility:visible;pointer-events:auto;transform:none}
/* Bei offenem Menü tritt er zurück */
body.menu-open .cta-float{opacity:0;visibility:hidden;pointer-events:none}

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-block:clamp(130px,15vh,190px) clamp(80px,10vh,120px);
  overflow:hidden;
  background:
    radial-gradient(115% 85% at 80% 20%, rgba(216,238,238,.34) 0%, rgba(251,248,244,0) 60%),
    radial-gradient(85% 75% at 8% 92%, rgba(239,220,187,.26) 0%, rgba(251,248,244,0) 62%),
    var(--paper);
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero__grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.26;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.hero__in{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.hero__h1{
  font-family:var(--f-display);font-weight:200;
  font-size:clamp(44px,8.4vw,132px);
  line-height:1;letter-spacing:-.042em;
  margin:6px 0 clamp(26px,3vw,38px);
}
/* Die Maske für die Wort-Animation braucht Platz für Unterlängen –
   bei line-height:1 ragt das „g" sonst aus dem Kasten und wird
   von overflow:hidden abgeschnitten. Der negative Außenabstand
   nimmt den zusätzlichen Innenabstand wieder aus dem Layout. */
.hero__h1 .line{display:block;overflow:hidden;padding-bottom:.26em;margin-bottom:-.20em}
.hero__h1 .w{display:inline-block;will-change:transform}
/* Betonung über Gewicht und Farbe statt über Kursivschnitt */
.hero__h1 em{
  font-style:normal;font-weight:400;position:relative;color:var(--teal-deep);
  padding-inline:.01em;
}
.hero__h1 em::after{
  content:"";position:absolute;left:.06em;right:.16em;bottom:.045em;height:.018em;
  background:var(--gold);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  animation:uline 1s var(--ease) 1.55s forwards;
}
@keyframes uline{to{transform:scaleX(1)}}

.hero__lead{font-size:clamp(16px,1.22vw,19px);line-height:1.7;color:var(--ink-2);max-width:46ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(30px,3.4vw,44px)}

.hero__meta{
  position:absolute;left:0;right:0;bottom:26px;z-index:2;
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
  display:flex;justify-content:space-between;align-items:flex-end;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);
}
.hero__scroll{display:flex;align-items:center;gap:10px}
.hero__scroll i{display:block;width:1px;height:34px;background:linear-gradient(var(--clay),var(--teal));position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--gold);animation:scrollDot 2.2s var(--ease-io) infinite}
@keyframes scrollDot{0%{top:-100%}60%,100%{top:100%}}

/* ═══════════ TICKER ═══════════ */
.ticker{
  border-block:1px solid rgba(34,39,43,.07);
  background:var(--paper-2);overflow:hidden;padding-block:20px;
}
.ticker__track{
  display:flex;align-items:center;gap:0;white-space:nowrap;width:max-content;
  will-change:transform;
}
.ticker span{
  font-family:var(--f-display);font-size:clamp(17px,1.7vw,25px);
  font-weight:300;letter-spacing:-.012em;color:var(--ink-3);padding-inline:30px;
}
.ticker i{display:block;width:4px;height:4px;border-radius:50%;background:var(--teal);opacity:.65;flex:none}
.ticker i:nth-child(8n+4){background:var(--gold)}

/* ═══════════ ABOUT ═══════════ */
.sec--about{background:var(--paper)}
.sec--about .grid-12{align-items:start}
.about__media{position:relative}

/* Überschrift links, Text rechts. Die Überschrift bekommt keine eigene
   Spaltenbreite verordnet – .sec--about .h2 begrenzt sie bereits auf
   19 Zeichen, und der Rest der Spalte bleibt bewusst Luft.
   Der Text setzt eine Spur tiefer an als die Versalhöhe der
   Überschrift; das liest sich ruhiger als eine harte Oberkante. */
.about__body{padding-top:.5em}

@media (max-width:1024px){
  /* Untereinander: Dann ist die Pause zwischen Überschrift und Text
     eine Frage des Abstands, nicht der Ausrichtung. */
  .about__body{padding-top:0;margin-top:clamp(18px,3vw,30px)}
}
/* ═══════════ BILDRAHMEN ═══════════
   Ein einziger Baustein für alle Bilder der Seite: gleiches Format (4:5),
   gleiche Rundung, gleiche Innenkante, gleiche Bildstimmung, gleicher
   Auftritt beim Scrollen. Unterschiedlich ist nur der Bildausschnitt
   (--pos), damit das Motiv jeweils richtig sitzt.                        */
.frame{
  position:relative;overflow:hidden;border-radius:var(--r);
  aspect-ratio:4/5;
  background:var(--sand);
  box-shadow:inset 0 0 0 1px rgba(34,39,43,.06);
}
.frame img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:var(--pos,50% 50%);
  /* einheitliche Bildstimmung – bindet die sehr unterschiedlichen
     Aufnahmen zu einer Familie zusammen */
  filter:saturate(.94) contrast(1.03);
  transform:scale(1);transition:transform 1.5s var(--ease);
}
.frame:hover img{transform:scale(1.045)}
.frame::after{
  content:"";position:absolute;inset:0;background:var(--paper);
  transform:scaleY(0);transform-origin:bottom;pointer-events:none;
  transition:transform 1.15s var(--ease-io);
}
.js .frame::after{transform:scaleY(1)}
.js .frame.is-shown::after{transform:scaleY(0)}
.js .frame img{transform:scale(1.09)}
.js .frame.is-shown img{transform:scale(1)}
.js .frame.is-shown:hover img{transform:scale(1.045)}

.frame--dark{background:var(--night-2);box-shadow:inset 0 0 0 1px rgba(233,228,218,.10)}
.frame--dark::after{background:var(--night)}

.qmarks{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:36px;
}
.qmarks li{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.02em;
  padding:9px 15px;border-radius:999px;
  background:transparent;border:1px solid rgba(34,39,43,.11);color:var(--ink-2);
  transition:transform .4s var(--ease),background .4s,border-color .4s;
}
.qmarks li:hover{transform:translateY(-3px);background:var(--teal-soft);border-color:rgba(27,172,176,.35)}

/* ═══════════ SÄULEN ═══════════ */
.sec--pillars{background:linear-gradient(var(--paper) 0%, var(--paper-2) 100%)}
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gut)}
.pillar{
  position:relative;padding:clamp(28px,2.6vw,40px);
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid rgba(34,39,43,.07);
  border-radius:var(--r);overflow:hidden;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .5s;
}
.pillar__link{position:absolute;inset:0;z-index:3}
.pillar::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--teal),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);
}
.pillar:hover{transform:translateY(-6px);box-shadow:0 30px 60px -44px rgba(34,39,43,.32);border-color:rgba(27,172,176,.24)}
.pillar:hover::before{transform:scaleX(1)}
.pillar__num{
  position:absolute;top:18px;right:22px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--clay);
}
.pillar__ico{width:52px;height:52px;color:var(--teal-deep);margin-bottom:26px}
.pillar__ico svg{width:100%;height:100%;transition:transform .6s var(--ease)}
.pillar:hover .pillar__ico svg{transform:rotate(-6deg) scale(1.06)}
.pillar__t{font-family:var(--f-display);font-weight:500;font-size:clamp(21px,1.9vw,27px);letter-spacing:-.022em;line-height:1.24}
.pillar__p{margin-top:14px;color:var(--ink-2);font-size:15.2px;line-height:1.66}
.pillar__more{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:30px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);transition:color .3s,gap .35s var(--ease);
}
.pillar__more::after{content:"→";font-family:var(--f-sans)}
.pillar:hover .pillar__more{color:var(--teal-deep);gap:13px}

/* ═══════════ QAIRO® (dunkel) ═══════════ */
.dark{background:var(--night);color:var(--night-txt)}
.sec--qairo{overflow:hidden;padding-block:clamp(96px,12vw,180px)}
.sec--qairo .grid-12{align-items:center}
.qairo__bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 55% at 20% 18%, rgba(210,162,76,.16) 0%, rgba(25,27,26,0) 62%),
    radial-gradient(60% 60% at 92% 82%, rgba(27,172,176,.13) 0%, rgba(25,27,26,0) 60%);
}
.qairo__body{position:relative;z-index:2}
.qairo__media{position:relative;z-index:1}
.brandmark{color:var(--gold);font-weight:400;letter-spacing:-.01em}
/* Das ® gehört zur Marke – es muss lesbar bleiben, nicht verschwinden. */
.brandmark sup{
  font-size:.44em;line-height:0;vertical-align:baseline;
  position:relative;top:-.72em;margin-left:.08em;
  font-weight:400;letter-spacing:0;
}

/* Einleitung, die den Nutzen benennt, bevor die Stichpunkte folgen */
.qairo__lead{padding-top:8px}
.qairo__lead p{max-width:52ch}
.eyebrow--gold sup{font-size:.7em;line-height:0;vertical-align:baseline;position:relative;top:-.45em}

.bullets{margin-top:30px;display:grid;gap:0}
.bullets li{
  padding:15px 0;border-top:1px solid rgba(233,228,218,.14);
  font-size:clamp(17px,1.6vw,22px);font-family:var(--f-display);font-weight:300;
  letter-spacing:-.02em;color:var(--night-txt);
  display:flex;align-items:center;gap:16px;
  transition:padding-left .45s var(--ease),color .3s;
}
.bullets li::before{
  content:"";width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--gold);transition:transform .45s var(--ease);
}
.bullets li:last-child{border-bottom:1px solid rgba(233,228,218,.14);margin-bottom:14px}
.bullets li:hover{padding-left:10px}
.bullets li:hover::before{transform:scale(1.5)}
.bullets b{font-weight:300}
.qairo__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

/* ═══════════ TRANSFORMATION ═══════════ */
.sec--trans{background:var(--paper)}
.trans__head{margin-bottom:clamp(34px,4vw,58px)}
/* Das Sinnbild schliesst die linke Spalte ab, statt sie leer auslaufen zu lassen */
.trans__media{margin-top:clamp(34px,4vw,56px)}

/* ── Sinnbild „Aus vielen Wegen wird eine Struktur" ──
   Oben ungeordnet, unten gleichmässig; die drei Phasen sind im Bild
   benannt. Beim Scrollen ordnet sich der Verlauf von unten herauf. */
.trans-viz{display:block;width:100%;height:100%}
.tv-label{
  font-family:var(--f-mono);font-size:20px;letter-spacing:.19em;
  fill:var(--ink-3);
}
.tv-num{fill:var(--teal-deep)}
.tv-phase{opacity:1}
.js .tv-phase{opacity:0}
.js .tv-dot{opacity:0}
.tv-strand{will-change:d}
.steps{display:grid;gap:0;counter-reset:s}
.step{
  display:flex;gap:clamp(18px,2.2vw,32px);align-items:flex-start;
  padding:clamp(26px,2.8vw,38px) 0;border-top:1px solid rgba(34,39,43,.085);
  transition:padding-left .5s var(--ease);
}
.step:last-child{border-bottom:1px solid rgba(34,39,43,.085)}
.step:hover{padding-left:12px}
.step__n{
  flex:none;width:44px;height:44px;border-radius:50%;
  display:grid;place-content:center;
  font-family:var(--f-mono);font-size:13px;
  background:transparent;color:var(--teal-deep);
  border:1px solid rgba(27,172,176,.22);
  transition:background .45s var(--ease),color .45s,transform .45s var(--ease);
}
.step:hover .step__n{background:var(--teal-deep);color:#fff;transform:rotate(-8deg)}
.step h3{font-family:var(--f-display);font-weight:500;font-size:clamp(19px,1.85vw,26px);letter-spacing:-.022em;line-height:1.28}
.step p{margin-top:9px;color:var(--ink-2);font-size:15.2px;max-width:52ch}

/* ═══════════ EVENT ═══════════
   Spiegelbild des QAIRO®-Kapitels: dort Text links, hier Bild links.
   Gleicher Bildrahmen, gleiches Format – nur die Leserichtung kehrt sich um. */
.sec--event{position:relative;overflow:hidden;padding-block:clamp(96px,12vw,180px)}
.sec--event .grid-12{align-items:center}
.event__bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(65% 55% at 82% 16%, rgba(210,162,76,.15) 0%, rgba(25,27,26,0) 62%),
    radial-gradient(60% 60% at 10% 84%, rgba(27,172,176,.12) 0%, rgba(25,27,26,0) 60%);
}
.event__media{position:relative;z-index:1}
.event__body{position:relative;z-index:2;color:var(--night-txt)}
.sec--event .eyebrow{color:#A9A296}
.sec--event .eyebrow .dot{background:var(--gold)}
.sec--event .h2{color:var(--paper)}
.sec--event .prose p{color:#C2BCB1}
.sec--event .keys{color:#9C958A}
.sec--event .keys i{color:var(--gold)}

.feats{margin-top:36px;display:grid;gap:0}
.feats li{
  padding:16px 0;border-top:1px solid rgba(233,228,218,.16);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
}
.feats li:last-child{border-bottom:1px solid rgba(233,228,218,.16)}
.feats b{font-weight:500;color:var(--paper);font-size:16.5px}
.feats span{color:#A9A296;font-size:15.5px}
.event__claim{
  margin-top:34px;font-family:var(--f-display);font-weight:300;
  font-size:clamp(20px,2.3vw,31px);line-height:1.24;letter-spacing:-.026em;color:var(--gold-soft);
}

/* ═══════════ ZITAT ═══════════ */
.sec--quote{background:linear-gradient(var(--paper-2),var(--paper))}
.sec--quote .grid-12{align-items:center}
.quote__body{position:relative;padding-left:clamp(0px,2.6vw,44px)}
.quote__mark{
  position:absolute;left:0;top:-.06em;
  font-family:var(--f-display);font-size:clamp(64px,7vw,104px);
  line-height:.8;color:var(--clay);pointer-events:none;user-select:none;
}
.quote__txt{
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(20px,2.15vw,31px);line-height:1.32;letter-spacing:-.028em;
  color:var(--ink);max-width:33ch;
}
.quote__sig{
  margin-top:34px;font-family:var(--f-mono);font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
.quote__sig i{color:var(--teal);font-style:normal;margin-inline:6px}

/* ═══════════ HÄUFIGE FRAGEN ═══════════
   Aufklappbar über <details>/<summary> – ohne JavaScript, mit Tastatur
   bedienbar. Die Antworten stehen vollständig im ausgelieferten HTML und
   sind damit auch zugeklappt für Suchmaschinen und KI-Systeme lesbar. */
.sec--faq{background:var(--paper-2)}
.faq{max-width:900px;border-top:1px solid rgba(34,39,43,.11)}

.faq__item{border-bottom:1px solid rgba(34,39,43,.11)}

.faq__q{
  display:flex;align-items:flex-start;gap:20px;
  padding:clamp(20px,2.1vw,26px) 0;
  cursor:pointer;list-style:none;
  transition:padding-left .45s var(--ease);
}
.faq__q::-webkit-details-marker{display:none}
.faq__q h3{
  flex:1;
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(17px,1.65vw,22px);letter-spacing:-.022em;line-height:1.34;
  color:var(--ink);transition:color .3s;
}
.faq__q:hover{padding-left:8px}
.faq__q:hover h3{color:var(--teal-deep)}

/* Plus, das sich beim Öffnen zum Minus dreht */
.faq__icon{
  flex:none;position:relative;width:18px;height:18px;margin-top:.28em;
  transition:transform .45s var(--ease);
}
.faq__icon::before,.faq__icon::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--teal-deep);
  transform:translate(-50%,-50%);
}
.faq__icon::before{width:15px;height:1.5px}
.faq__icon::after{width:1.5px;height:15px;transition:transform .45s var(--ease),opacity .3s}
.faq__item[open] .faq__icon{transform:rotate(180deg)}
.faq__item[open] .faq__icon::after{transform:translate(-50%,-50%) scaleY(0);opacity:0}

.faq__a{padding:0 0 clamp(22px,2.2vw,30px);max-width:68ch}
.faq__a p{color:var(--ink-2);font-size:15.6px;line-height:1.75}
.faq__item[open] .faq__a{animation:faqAuf .45s var(--ease) both}
@keyframes faqAuf{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.faq__q sup,.faq__a sup{
  font-size:.55em;line-height:0;vertical-align:baseline;
  position:relative;top:-.6em;margin-left:.05em;
}

@media (prefers-reduced-motion:reduce){
  .faq__item[open] .faq__a{animation:none}
}

/* ═══════════ KONTAKT ═══════════ */
.sec--contact{background:var(--paper);position:relative}
.sec--contact::before{
  content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);height:1px;
  background:rgba(34,39,43,.085);
}
.contact__facts{margin-top:44px;display:grid;gap:0;border-top:1px solid rgba(34,39,43,.085)}
.contact__facts>div{
  display:flex;gap:18px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid rgba(34,39,43,.085);
}
.contact__facts dt{
  flex:none;width:86px;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);
}
.contact__facts dd{font-size:15.4px;color:var(--ink)}
.contact__facts a{position:relative}
.contact__facts a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--teal);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);
}
.contact__facts a:hover::after{transform:scaleX(1);transform-origin:left}

/* ── Formular ── */
.form{
  background:var(--paper-2);border:1px solid rgba(34,39,43,.07);
  border-radius:var(--r);padding:clamp(26px,3.2vw,48px);
  display:grid;gap:18px;
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.field{position:relative}
.field input,.field textarea{
  width:100%;padding:24px 16px 10px;border-radius:10px;
  background:var(--paper);border:1px solid rgba(34,39,43,.11);
  font:inherit;font-size:15.2px;color:var(--ink);
  transition:border-color .3s,box-shadow .3s,background .3s;
  resize:vertical;
}
.field textarea{padding-top:26px;line-height:1.6}
.field label{
  position:absolute;left:16px;top:16px;
  font-size:15px;color:var(--ink-3);pointer-events:none;
  transform-origin:left top;
  transition:transform .28s var(--ease),color .28s;
}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(27,172,176,.14);
}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{
  transform:translateY(-9px) scale(.74);color:var(--teal-deep);
}
.field.is-error input,.field.is-error textarea{border-color:var(--terra);box-shadow:0 0 0 3px rgba(185,113,78,.13)}

.choices{margin-top:4px}
.choices legend{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;
}
.choice{display:flex;align-items:center;gap:11px;padding:11px 15px;margin-bottom:8px;
  background:var(--paper);border:1px solid rgba(34,39,43,.12);border-radius:10px;
  cursor:pointer;font-size:14.6px;color:var(--ink-2);
  transition:border-color .3s,background .3s,color .3s;
}
.choice:hover{border-color:rgba(27,172,176,.45)}
.choice input{
  appearance:none;-webkit-appearance:none;flex:none;
  width:18px;height:18px;border-radius:5px;border:1.5px solid rgba(34,39,43,.28);
  display:grid;place-content:center;transition:background .25s,border-color .25s;
}
.choice input::after{
  content:"";width:9px;height:9px;border-radius:2px;background:var(--paper);
  transform:scale(0);transition:transform .25s var(--ease);
}
.choice input:checked{background:var(--teal-deep);border-color:var(--teal-deep)}
.choice input:checked::after{transform:scale(1)}
.choice:has(input:checked){background:var(--teal-soft);border-color:var(--teal);color:var(--ink)}

.consent{display:flex;gap:12px;align-items:flex-start;font-size:13.6px;color:var(--ink-2);line-height:1.55;cursor:pointer}
.consent input{
  appearance:none;-webkit-appearance:none;flex:none;margin-top:2px;
  width:18px;height:18px;border-radius:5px;border:1.5px solid rgba(34,39,43,.28);
  display:grid;place-content:center;transition:background .25s,border-color .25s;
}
.consent input::after{content:"";width:9px;height:9px;border-radius:2px;background:var(--paper);transform:scale(0);transition:transform .25s var(--ease)}
.consent input:checked{background:var(--teal-deep);border-color:var(--teal-deep)}
.consent input:checked::after{transform:scale(1)}
.consent a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px}
.consent.is-error{color:var(--terra)}
.consent.is-error input{border-color:var(--terra)}

.form__note{
  min-height:20px;font-family:var(--f-mono);font-size:11.5px;
  letter-spacing:.05em;color:var(--ink-3);
}
.form__note.is-ok{color:var(--teal-deep)}
.form__note.is-bad{color:var(--terra)}

/* ═══════════ FOOTER ═══════════ */
.foot{background:var(--night);color:#A9A296;padding-top:clamp(64px,7vw,100px);padding-bottom:26px}
.foot__top{display:grid;grid-template-columns:1.1fr 2fr;gap:clamp(32px,5vw,70px);padding-bottom:clamp(44px,5vw,70px)}
.foot__logo{width:min(212px,60%);height:auto;object-fit:contain}
.foot__claim{
  margin-top:26px;font-family:var(--f-display);font-weight:300;
  font-size:clamp(23px,2.5vw,34px);line-height:1.18;letter-spacing:-.03em;color:var(--paper);
}
.foot__claim em{font-style:normal;font-weight:400;color:var(--gold)}
.foot__nav{display:grid;grid-template-columns:1fr 1.3fr .8fr;gap:var(--gut)}
.foot__nav h3{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.19em;
  text-transform:uppercase;color:#8C8579;margin-bottom:16px;font-weight:400;
}
.foot__nav a,.foot__nav span{display:block;padding:6px 0;font-size:14.6px;color:#BDB7AC;transition:color .3s,transform .35s var(--ease)}
.foot__nav a:hover{color:var(--gold);transform:translateX(4px)}
.foot__bar{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding-top:22px;border-top:1px solid rgba(233,228,218,.13);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8C8579;
}
.foot__up{display:inline-flex;align-items:center;gap:9px;color:#BDB7AC;transition:color .3s}
.foot__up svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.foot__up:hover{color:var(--gold)}
.foot__up:hover svg{transform:translateY(-4px)}

/* ═══════════ LEGAL PAGES ═══════════ */
.legal{padding-block:clamp(130px,15vh,190px) clamp(70px,8vw,120px)}
.legal .h1{
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(34px,5vw,68px);line-height:1.06;letter-spacing:-.034em;margin-bottom:14px;
}
.legal__grid{margin-top:44px;display:grid;gap:0;max-width:820px;border-top:1px solid rgba(34,39,43,.11)}
.legal__grid>div{display:flex;gap:24px;flex-wrap:wrap;padding:15px 0;border-bottom:1px solid rgba(34,39,43,.11)}
.legal__grid dt{flex:none;width:260px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);padding-top:4px}
.legal__grid dd{font-size:15.6px;color:var(--ink)}
.legal h2{
  font-family:var(--f-display);font-weight:500;font-size:clamp(22px,2.4vw,32px);
  letter-spacing:-.026em;margin:52px 0 14px;
}
.legal h3{font-size:16.5px;font-weight:600;margin:30px 0 8px}
.legal p,.legal li{color:var(--ink-2);max-width:74ch;margin-top:12px;line-height:1.72}
.legal ul{margin-top:12px}
.legal li{position:relative;padding-left:20px}
.legal li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.legal a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px}
.legal__back{
  display:inline-flex;align-items:center;gap:10px;margin-top:56px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);
  transition:color .3s,gap .35s var(--ease);
}
.legal__back:hover{color:var(--teal-deep);gap:15px}

/* ═══════════ REVEAL (JS-Startzustand) ═══════════ */
.js .reveal-up{opacity:0;transform:translateY(26px)}
.js .hero__h1 .w{transform:translateY(105%)}
.js .pillar,.js .step,.js .feats li,.js .bullets li{opacity:0;transform:translateY(24px)}
.js .split{opacity:0}

/* Wortweise Enthüllung */
.sw-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.26em;margin-bottom:-.26em}
.sw{display:inline-block;will-change:transform}

@media (prefers-reduced-motion:reduce){
  .js .reveal-up,.js .hero__h1 .w,.js .pillar,.js .step,.js .feats li,.js .bullets li,.js .split{opacity:1 !important;transform:none !important}
  .js .frame::after{transform:scaleY(0)}
  .hero__h1 em::after{animation:none;transform:scaleX(1)}
  .ticker__track{transform:none !important}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ═══════════ RESPONSIVE ═══════════ */
/* ── Tablet quer und kleine Notebooks (≤1024px) ── */
@media (max-width:1024px){
  .pillars{grid-template-columns:1fr}
}

/* ── Große Bildschirme (≥1440px) ──
   Mehr Weite, aber die Textspalten bleiben lesbar schmal. */
@media (min-width:1440px){
  :root{--wrap:1400px}
  .hero__lead{max-width:44ch}
  .prose p{max-width:58ch}
}

@media (min-width:1800px){
  :root{--wrap:1520px}
}

@media (max-width:1024px){
  .col-1-4,.col-1-5,.col-1-6{grid-column:1/13}
  .col-5-12,.col-6-12,.col-7-12,.col-8-12{grid-column:1/13}
  .pillars{grid-template-columns:1fr;gap:16px}
  .foot__top{grid-template-columns:1fr}
  .about__media,.quote__media,.qairo__media,.event__media{max-width:520px}
  .quote__mark{position:static;display:block;font-size:70px;margin-bottom:-.34em}
}

/* Ab hier wird das ausgeschriebene Menü eingeklappt.
   Die Grenze liegt bewusst bei 900px und nicht erst bei 768px: Logo
   (217px) und Menü (526px) brauchen samt Seitenrand rund 860px — darunter
   schiebt sich die Wortmarke unter den ersten Menüpunkt. */
@media (max-width:900px){
  .nav__links{
    position:fixed;inset:0;z-index:-1;
    flex-direction:column;justify-content:center;gap:6px;
    background:var(--paper);
    opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
  }
  .nav__links.is-open{opacity:1;visibility:visible;z-index:1}
  .nav__links a{font-size:23px;font-family:var(--f-display);font-weight:400;letter-spacing:-.02em;padding:12px 26px}
  .nav__links a.is-cta{margin-top:14px;font-size:16px;font-family:var(--f-sans)}
  .burger{display:block;z-index:2;position:relative}

  /* backdrop-filter muss hier weichen: ein Element mit Filter wird zum
     Bezugsrahmen für position:fixed in seinem Inneren. Bliebe der Filter
     stehen, spannte sich das geöffnete Menü nicht über den Bildschirm,
     sondern nur über die 69px hohe Leiste. */
  .nav.is-open{background:var(--paper);backdrop-filter:none;box-shadow:none}
}

@media (max-width:768px){
  .brand{gap:10px}
  .brand__mark{width:44px;height:45px}
  .brand__word{height:15px}
  :root{--nav-h:69px}   /* kleinere Bildmarke → niedrigere Leiste */
  .hero__meta-l{display:none}
  .eyebrow{letter-spacing:.15em;font-size:10.5px;gap:9px}
  .f-row{grid-template-columns:1fr}
  .legal__grid dt{width:100%}
  .legal__grid>div{gap:2px;flex-direction:column}
  .step{gap:16px}
  .foot__nav{grid-template-columns:1fr;gap:28px}
}

/* ── Touch-Bedienung ──
   Größere Trefferflächen; Hover-Effekte sind überall nur Beiwerk,
   jede Funktion ist per Antippen erreichbar. */
@media (hover:none),(pointer:coarse){
  .choice{padding:14px 16px}
  .consent{padding-block:4px}
  .nav__links a{padding:12px 16px}
  .foot__nav a{padding:10px 0}
  .frame:hover img,.js .frame.is-shown:hover img{transform:scale(1)}
}

@media (max-width:480px){
  .hero__h1{font-size:clamp(38px,12.4vw,60px)}
  .btn{width:100%;justify-content:center}
  .cta-float{width:auto;padding:14px 22px;font-size:13.5px;
             right:14px;bottom:14px;
             bottom:max(14px, env(safe-area-inset-bottom))}
  .hero__cta{gap:10px}
  .form{padding:20px}
  .contact__facts>div{flex-direction:column;gap:3px}
  .contact__facts dt{width:auto}
}