/* ============================================================================
   Hausverwaltung Clauser · base.css — Variante 1a „Blaupause" (hell)
   Tokens 1:1 aus DESIGN.md · Fonts lokal (DSGVO) · Blueprint-Ästhetik
   ========================================================================== */

/* ---- Fonts lokal (DSGVO, kein Google-CDN) -------------------------------- */
@font-face{ font-family:"Bebas Neue"; src:url("../../fonts/bebas-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Hanken Grotesk"; src:url("../../fonts/hanken.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face{ font-family:"Newsreader"; src:url("../../fonts/news.woff2") format("woff2"); font-weight:200 700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Newsreader"; src:url("../../fonts/news-italic.woff2") format("woff2"); font-weight:200 700; font-style:italic; font-display:swap; }
@font-face{ font-family:"Space Mono"; src:url("../../fonts/mono-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Space Mono"; src:url("../../fonts/mono-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

:root{
  /* Hell ist die Grundfläche der Seite. Ohne diese Angabe zeichnet Chrome die
     Autofill-Füllung der dunklen Formularfelder in der Hell-Variante. */
  color-scheme:light;

  /* Farben (= DESIGN.md colors.*) */
  --paper:#F1EDE4;      /* Seitenfläche */
  --canvas:#E7E1D4;     /* Body-Rahmen um die Seite */
  --surface:#E9E4D8;    /* Platzhalter/erhöhte Flächen */
  --ink:#17130D;        /* Headlines, dunkle Blöcke */
  --text:#57503f;       /* Fließtext (warmes Grau) */
  --accent:#E2751F;     /* Orange */
  --accent-bright:#F3A83C;
  --accent-deep:#C23A16;
  --line:#d8d1c1;       /* Hairlines hell */
  --line-2:#cfc7b6;
  --on-dark:#F1EDE4;    /* Text auf dunklen Blöcken */
  --dark-mute:#b8ad97;  /* Sekundärtext auf dunkel */

  /* Fonts */
  --font-display:"Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --font-serif:"Newsreader", Georgia, serif;
  --font-body:"Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:"Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Skala */
  --fs-hero:clamp(56px, 11vw, 104px);
  --fs-h2:clamp(30px, 4.6vw, 44px);
  --fs-h3:clamp(26px, 3.4vw, 38px);
  --maxw:1120px;
  --nav-h:78px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---- Reset ---------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  /* Die Sticky-Nav ist --nav-h hoch. Ohne diesen Versatz landet jedes direkt
     aufgerufene Sprungziel (auch der eigene Redirect /#kontakt) unter der Nav. */
  scroll-padding-top:calc(var(--nav-h) + 12px);
  -webkit-tap-highlight-color:transparent;
}
body{
  margin:0; background:var(--canvas); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
/* --accent erreicht auf Papier nur 2,64:1 und taugt deshalb nicht als Textfarbe.
   Hover, Fokus und farbiger Text laufen über --accent-deep (4,60:1).
   Auf den dunklen Blöcken kehrt sich das um: dort ist --accent-deep nur 3,44:1,
   --accent-bright dagegen 9,23:1 (Überschreibungen weiter unten). */
a:hover{ color:var(--accent-deep); }
h1,h2,h3,h4{ margin:0; color:var(--ink); text-wrap:balance; }
p{ margin:0; }
::selection{ background:var(--accent-deep); color:#fff; }
:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:3px; }

/* Interaktives braucht kein 300-ms-Warten auf den Doppeltipp, und ein sichtbarer
   Druckzustand fehlte im ganzen Theme. */
a,button,input,textarea,label,summary{ touch-action:manipulation; }
.btn:active{ transform:scale(.98); }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--paper); }
::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:999px; }
::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

/* Überschrift, die für die Struktur da ist, aber nicht ins Bild gehört.
   Ein aria-label auf der Sektion ersetzt keine Überschrift: es taucht in
   keiner Überschriften-Liste auf, mit der Screenreader navigiert wird. */
.vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

.skip-link{ position:absolute; left:-999px; top:0; z-index:200; background:var(--ink); color:var(--paper); padding:12px 18px; font-weight:700; }
.skip-link:focus{ left:12px; top:12px; }

/* Die ganze Seite ist ein „Blaupause"-Blatt auf dem Canvas */
.sheet{
  position:relative; max-width:var(--maxw); margin:0 auto; background:var(--paper); color:var(--ink);
  /* clip statt hidden: beschneidet identisch, erzeugt aber KEINEN Scrollport.
     Mit overflow:hidden wurde .sheet zum nächsten scrollbaren Vorfahren und die
     darin liegende position:sticky-Nav klebte nie (Oberkante bei -1500px). */
  overflow:clip;
}
/* feines Blueprint-Raster über dem Blatt */
.sheet::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(#00000008 1px,transparent 1px),linear-gradient(90deg,#00000008 1px,transparent 1px);
  background-size:44px 44px;
}
.sheet > *{ position:relative; z-index:1; }

.wrap{ padding-inline:clamp(20px,5vw,48px); }

/* ---- gemeinsame Typo-Bausteine ------------------------------------------ */
.eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-deep); }
.mono{ font-family:var(--font-mono); }
.serif{ font-family:var(--font-serif); }

.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer; border:none;
  font-weight:700; font-size:15px; padding:15px 26px; border-radius:999px;
  position:relative; isolation:isolate; overflow:hidden;
  transition:box-shadow .3s var(--ease);
  --btn-x:50%; --btn-y:50%; --btn-r:0%;
}
/* Registrierung macht --btn-r animierbar; ohne sie ist eine Custom Property für
   den Browser nur Text und der Radius springt statt zu wachsen. Fehlt die
   Unterstützung, erscheint die Füllung sofort, ruhiger Rückfall. */
@property --btn-r{ syntax:'<percentage>'; inherits:false; initial-value:0%; }
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:radial-gradient(circle at var(--btn-x) var(--btn-y), var(--btn-fill) var(--btn-r), transparent var(--btn-r));
  transition:--btn-r .5s cubic-bezier(.16,1,.3,1);
}
.btn:hover{ --btn-r:150%; }
.btn-primary{ background:linear-gradient(155deg,var(--accent-bright),var(--accent-deep)); color:#fff; box-shadow:0 12px 30px -10px rgba(194,58,22,.55); --btn-fill:#C23A16; }
.btn-primary:hover{ color:#fff; box-shadow:0 16px 38px -10px rgba(194,58,22,.7); }
.btn-ink{ background:var(--ink); color:var(--paper); font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.04em; padding:12px 20px; --btn-fill:rgba(227,178,105,.22); }
.btn-still{ background:transparent; color:var(--ink); border:1px solid var(--ink); --btn-fill:var(--ink); }
.btn-still:hover{ color:var(--paper); }
.btn .arrow{ transition:transform .25s var(--ease); }
.btn:hover .arrow{ transform:translateX(3px); }
.link-underline{ font-family:var(--font-mono); font-size:13px; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:2px; }
.link-underline:hover{ color:var(--accent-deep); border-color:var(--accent-deep); }

/* ---- Dunkle Blöcke: die Kontrastlage kehrt sich um ----------------------- */
/* Auf --ink misst --accent-deep nur 3,44:1, --accent-bright dagegen 9,23:1.
   Deshalb gilt dort der helle Ton für Hover und Fokus. */
.contact, .site-footer{ color-scheme:dark; }
.contact a:hover, .site-footer a:hover{ color:var(--accent-bright); }
.contact :focus-visible, .site-footer :focus-visible{ outline-color:var(--accent-bright); }

/* Reveal-Grundzustand (JS setzt motion-ready) */
[data-reveal]{ opacity:1; transform:none; }
html.motion .sheet [data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
html.motion .sheet [data-reveal].shown{ opacity:1; transform:none; }

/* SVG-Blueprint-Zeichnung — dasharray/offset setzt theme.js aus getTotalLength() */
html.motion [data-draw] .drawLine{ transition:stroke-dashoffset 1.4s cubic-bezier(.6,.05,.2,1); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  html.motion .sheet [data-reveal]{ opacity:1 !important; transform:none !important; }
  /* Das Theme hat kein einziges @keyframes — die gesamte Bewegung steckt in
     Transitions. `animation:none` allein hat hier also nichts abgeschaltet. */
  *,*::before,*::after{
    animation:none !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}