/* ==========================================================================
   Innuvis — Basis-CSS: Design-Tokens, Fonts, Grundlayout, Header/Footer/Buttons
   ========================================================================== */

@font-face{font-family:'Outfit';src:url('fonts/Outfit-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Outfit';src:url('fonts/Outfit-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Outfit';src:url('fonts/Outfit-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --in-bg:#0A0118; --in-surface:#0F0520; --in-surface-2:#18023A;
  --in-blue:#2D7ABE; --in-blue-bright:#5EA8E8; --in-blue-deep:#25659E;
  --in-text:#FFFFFF; --in-text-dim:#9B96B0; --in-border:rgba(255,255,255,.10);
}

/* ==========================================================================
   Schriftgroessen — eine Skala, keine Sammlung
   ==========================================================================

   Vorher lagen 24 verschiedene Groessen im Umlauf, viele davon einen
   einzigen Pixel auseinander (13/14/15/16, 18/19/20/21). Solche Stufen
   sieht niemand als Stufe; sie erzeugen Unruhe statt Hierarchie.

   Jetzt: zehn Werte, zwischen benachbarten liegt mindestens Faktor 1,25 —
   der Abstand, ab dem ein Groessenunterschied als Absicht gelesen wird.

     12 → 16 → 20 → 25 → 32 → 40 → 50 → 63 → 80 → 100
     1,33  1,25  1,25  1,28  1,25  1,25  1,26  1,27  1,25

   12 px ist die Untergrenze und bleibt es (Regel aus dem Design-Durchgang
   von rawe-hermetics: kein Text darunter).

   WOFUER WELCHE STUFE
     --in-t-xs   12   Kennzeichen, Bildunterschrift, Meta-Zeile, dt
     --in-t-s    16   Standardtext: Karten, Listen, FAQ-Antworten, Knoepfe
     --in-t-m    20   Fliesstext, Hero-Unterzeile, h3
     --in-t-l    25   h2 in Kaesten, grosse Kartenueberschriften
     --in-t-xl   32   h2 einer Sektion
     --in-t-2xl  40   h1 einer Unterseite (Untergrenze der Hero-Clamps)
     --in-t-3xl  50   Preiszahl, Obergrenze schmaler Hero-Clamps
     --in-t-4xl  63   h1 der Startseite
     --in-t-5xl  80   Reserve fuer sehr grosse Displays
     --in-t-6xl  100  Schaugroesse (Preis im Hero, Fehlercode)

   Hero-Ueberschriften bleiben clamp(): sie sollen mit dem Viewport
   wachsen. Ihre Endpunkte liegen aber auf der Skala.
   ========================================================================== */

:root{
  --in-t-xs:12px;  --in-t-s:16px;   --in-t-m:20px;   --in-t-l:25px;
  --in-t-xl:32px;  --in-t-2xl:40px; --in-t-3xl:50px; --in-t-4xl:63px;
  --in-t-5xl:80px; --in-t-6xl:100px;
}

*{box-sizing:border-box}
html{scroll-padding-top:92px}
body{margin:0;background:var(--in-bg);color:var(--in-text);
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif;line-height:1.6}
h1,h2,h3{font-family:'Outfit',sans-serif;letter-spacing:-.02em}
.in-container{max-width:1100px;margin:0 auto;padding:0 24px}

/* Skip-Link — erstes fokussierbares Element, optisch versteckt bis Fokus */
.in-skip{
  position:absolute; left:8px; top:-60px; z-index:1000;
  background:var(--in-blue); color:#fff;
  font-family:'Inter',sans-serif; font-weight:600; font-size:var(--in-t-s);
  padding:12px 20px; border-radius:6px; text-decoration:none;
  transition:top .15s ease;
}
.in-skip:focus-visible{top:8px}

/* Visuell versteckt, aber für Screenreader und Text-Extraktion (GEO) im DOM */
.in-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;
}

/* ==========================================================================
   Header — sticky, Grundfarbe --in-bg, Trennlinie unten, Logo links / Nav rechts
   ==========================================================================

   Erwartete HTML-Struktur (fuer Task 4, wörtlich zu übernehmen):

   <header class="in-header">
     <div class="in-header-inner in-container">
       <a href="/" class="in-logo"><img src="..." alt="Innuvis" height="34"></a>

       <input type="checkbox" id="in-nav-toggle" class="in-nav-toggle-input">
       <label for="in-nav-toggle" class="in-nav-toggle" aria-label="Menü öffnen">
         <span></span><span></span><span></span>
       </label>

       <nav class="in-nav">
         <a href="/leistungen/">Leistungen</a>
         <a href="/preise/">Preise</a>
         <a href="/ueber-uns/">Über uns</a>
         <a href="/kontakt/" class="in-btn">Kontakt</a>
       </nav>
     </div>
   </header>

   Mechanik ohne JS ("Checkbox-Hack"): die unsichtbare Checkbox
   #in-nav-toggle steuert per :checked-Selektor die Sichtbarkeit von .in-nav;
   das <label for="in-nav-toggle"> ist der sichtbare Burger-Button. Diese
   Struktur ist für Task 4 verbindlich — die Selektoren unten (`.in-nav-
   toggle-input:checked ~ .in-nav`) basieren auf :checked und funktionieren
   NICHT mit einer <details>/<summary>-Alternative.
   ========================================================================== */

.in-header{
  position:sticky; top:0; z-index:100;
  background:var(--in-bg);
  border-bottom:1px solid var(--in-border);
}
.in-header-inner{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; height:76px;
}
.in-logo{display:flex; align-items:center; line-height:0;
  /* Das Bild ist 34px hoch; der Innenabstand bringt das Tippziel auf 50px,
     ohne das Logo selbst zu vergroessern. Der Kopf ist 76px hoch. */
  padding:8px 0}
.in-logo img{height:34px; width:auto; display:block}

.in-nav{display:flex; align-items:center; gap:32px}
.in-nav a{
  color:var(--in-text); text-decoration:none; font-size:var(--in-t-s); font-weight:600;
  white-space:nowrap;
}
.in-nav a:hover{color:var(--in-blue-bright)}
.in-nav a[aria-current="page"]{color:var(--in-blue-bright)}

/* Burger-Button: per Default versteckt, erst unter 720px sichtbar */
.in-nav-toggle-input{position:absolute; opacity:0; pointer-events:none}
.in-nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; cursor:pointer;
}
.in-nav-toggle span{
  display:block; width:100%; height:2px; background:var(--in-text);
  border-radius:2px;
}

/* ==========================================================================
   Footer — Trennlinie oben, zweispaltig: Marke / Rechtliches
   ==========================================================================

   Erwartete HTML-Struktur:

   <footer class="in-footer">
     <div class="in-footer-inner in-container">
       <div class="in-footer-col in-footer-brand">
         <img src="..." alt="Innuvis" height="28">
         <p>Kurztext zur Marke.</p>
       </div>
       <div class="in-footer-col">
         <h3>Rechtliches</h3>
         <a href="/impressum/">Impressum</a>
         <a href="/datenschutz/">Datenschutz</a>
       </div>
     </div>
   </footer>
   ========================================================================== */

.in-footer{
  border-top:1px solid var(--in-border);
  color:var(--in-text-dim);
  padding:64px 0 40px;
}
.in-footer-inner{
  display:grid; grid-template-columns:2fr 1fr; gap:48px;
}
.in-footer-col h3{
  color:var(--in-text); font-size:var(--in-t-s); font-weight:600; margin:0 0 16px;
  text-transform:uppercase; letter-spacing:.04em;
}
.in-footer-col a{
  /* Tippziel: Der Text ist 22px hoch. min-height plus Flexbox bringt die
     Trefferflaeche auf 44px, ohne die Zeilen optisch auseinanderzuziehen —
     der sichtbare Abstand bleibt derselbe wie mit margin-bottom:10px. */
  display:flex; align-items:center; min-height:44px;
  color:var(--in-text-dim); text-decoration:none;
  font-size:var(--in-t-s); margin-bottom:0;
}
.in-footer-col a:hover{color:var(--in-blue-bright)}
.in-footer-brand p{font-size:var(--in-t-s); margin:16px 0 0; max-width:32ch}

/* ==========================================================================
   Buttons
   ========================================================================== */

.in-btn{
  display:inline-block;
  background:var(--in-blue); color:#fff;
  font-family:'Inter',sans-serif; font-weight:600; font-size:var(--in-t-s);
  padding:14px 24px; border-radius:6px;
  text-decoration:none; border:1px solid transparent;
  transition:background .15s ease, transform .15s ease;
}
/* Hover verdunkelt statt aufzuhellen: weiß auf --in-blue-bright waere
   WCAG-AA-Fail (~2,55:1). Weiß auf --in-blue-deep (#25659E) ~5,4:1. */
.in-btn:hover{background:var(--in-blue-deep);transform:translateY(-1px)}

.in-btn-ghost{
  display:inline-block;
  background:transparent; color:var(--in-text);
  font-family:'Inter',sans-serif; font-weight:600; font-size:var(--in-t-s);
  padding:14px 24px; border-radius:6px;
  text-decoration:none; border:1px solid var(--in-border);
  transition:border-color .15s ease;
}
.in-btn-ghost:hover{border-color:var(--in-blue)}

/* Fokus-Zustaende — Tastaturbedienung sichtbar machen */
.in-btn:focus-visible,
.in-btn-ghost:focus-visible,
.in-nav a:focus-visible,
.in-footer-col a:focus-visible{
  outline:2px solid var(--in-blue-bright);
  outline-offset:2px;
}
.in-nav-toggle-input:focus-visible ~ .in-nav-toggle{
  outline:2px solid var(--in-blue-bright);
  outline-offset:2px;
}

/* ==========================================================================
   Mobile-Navigation — unter 720px: Burger sichtbar, Nav als aufklappbares Menü
   ========================================================================== */

@media (max-width:720px){
  .in-nav-toggle{display:flex}

  .in-nav{
    display:flex; flex-direction:column; align-items:flex-start; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:var(--in-surface);
    border-bottom:1px solid var(--in-border);
    /* Auf-/Zuklappen ohne Layout-Animation: das Menü liegt absolut über dem
       Inhalt, daher reichen opacity + transform (performant, kein Reflow). */
    opacity:0; transform:translateY(-8px); visibility:hidden;
    transition:opacity .15s ease, transform .15s ease, visibility 0s .15s;
  }
  .in-nav a{
    width:100%; padding:16px 24px; border-top:1px solid var(--in-border);
  }
  .in-nav a:first-child{border-top:none}
  /* Login-Ghost-Button im Menue: soll wie ein normaler Menuepunkt wirken */
  .in-nav a.in-btn-ghost{border:none; border-radius:0}

  .in-nav-toggle-input:checked ~ .in-nav{
    opacity:1; transform:none; visibility:visible;
    box-shadow:0 24px 48px rgba(0,0,0,.6);
    transition:opacity .15s ease, transform .15s ease, visibility 0s;
  }

  .in-footer-inner{
    grid-template-columns:1fr; gap:32px;
  }
}

/* ==========================================================================
   Motion — Scroll-Reveal & Hero-Entrance (Fundament für alle Seiten)
   ==========================================================================

   Startzustand (opacity 0 / verschoben) gilt NUR, solange die Klasse
   .in-js-motion auf <html> sitzt. Diese Klasse wird synchron per kleinem
   Inline-Snippet im <head> der jeweiligen Seite gesetzt (nicht per
   externem Skript, um Flackern zu vermeiden) und nur dann, wenn
   prefers-reduced-motion nicht aktiv ist. Ohne JS bleibt .in-js-motion
   also weg — .in-reveal/.in-hero-anim wirken dann nicht, der Inhalt ist
   sofort sichtbar (kein Content-Cloaking für Crawler/No-JS).

   Das eigentliche Ein-/Ausblenden (Klasse .in-reveal-visible /
   .in-hero-anim-visible) setzt assets/in-motion.js per
   IntersectionObserver bzw. beim Laden für den Hero.

   Nach Abschluss der Reveal-Transition entfernt assets/in-motion.js
   .in-reveal/.in-reveal-visible wieder (Klassen-Swap auf .in-revealed,
   reiner Marker ohne eigene Regeln hier). Grund: .in-reveal traegt eine
   eigene transition-Shorthand, die sonst dauerhaft mit dem eigenen
   Hover-Uebergang von Komponenten wie .in-module-card kollidieren wuerde
   (z. B. Box-Shadow-Sprung statt weichem Uebergang beim Hover). Damit
   verschwindet auch will-change automatisch wieder, sobald nicht mehr
   gebraucht.
   ========================================================================== */

html.in-js-motion .in-reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),
             transform .5s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
html.in-js-motion .in-reveal.in-reveal-visible{
  opacity:1;
  transform:translateY(0);
}

/* Verstaerkte Reveal-Variante — z.B. Modul-Karten: deutlich spuerbarerer
   Versatz (translateY 48px statt 24px) plus leichtes Scale-In. Fallback-
   und Cleanup-Logik (kein JS / reduced-motion / Klassen-Swap nach Abschluss)
   sind identisch zu .in-reveal, siehe assets/in-motion.js. */
html.in-js-motion .in-reveal-strong{
  opacity:0;
  transform:translateY(48px) scale(.96);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),
             transform .6s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
html.in-js-motion .in-reveal-strong.in-reveal-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

html.in-js-motion .in-hero-anim{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),
             transform .5s cubic-bezier(.16,1,.3,1);
}
html.in-js-motion .in-hero-anim.in-hero-anim-visible{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion:reduce){
  html.in-js-motion .in-reveal,
  html.in-js-motion .in-reveal-strong,
  html.in-js-motion .in-hero-anim{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}