/* ============================================================
   NGenAro Web — Base (reset + Schriften + Typografie + a11y)
   Изисква tokens.css (заредено преди този файл).
   ============================================================ */

/* ---- Self-hosted variable Schriften (WOFF2) ---- */
@font-face{
  font-family:"Bricolage Grotesque Variable";
  src:url("../fonts/bricolage-grotesque-wght.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:"Inter Variable";
  src:url("../fonts/inter-wght.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212;
}

/* ---- Reset ---- */
*,*::before,*::after{ box-sizing:border-box; margin:0; }
/* overflow-x:clip statt hidden, und zusätzlich auf dem html-Element: nur auf
   body gesetzt hielt Safari auf dem iPhone das seitliche Ziehen nicht auf —
   die Seite liess sich schieben und daneben stand ein schwarzer Streifen.
   clip erzeugt im Gegensatz zu hidden keinen Scroll-Container, deshalb bleibt
   der klebende Kopfbereich (position:sticky) weiterhin funktionsfähig. */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  min-height:100svh;
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  max-width:100%;
}
img,picture,svg,video,canvas{ display:block; max-width:100%; height:auto; }
input,button,textarea,select{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul[role="list"],ol[role="list"]{ list-style:none; padding:0; }
:where(a){ color:inherit; text-decoration:none; }
p,li{ text-wrap:pretty; }

/* ---- Typografie ---- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:var(--lh-tight);
  letter-spacing:var(--track-tight);
  text-wrap:balance;
}
h1{ font-size:var(--step-5); font-weight:700; }
h2{ font-size:var(--step-4); }
h3{ font-size:var(--step-2); line-height:var(--lh-snug); }
h4{ font-size:var(--step-1); line-height:var(--lh-snug); }
.eyebrow{
  font-family:var(--font-body); font-weight:600;
  font-size:var(--step--1); letter-spacing:var(--track-wide);
  text-transform:uppercase; color:var(--lime);
}

/* ---- Layout-Helfer ---- */
/* Volle Breite: der Inhalt nutzt den ganzen Bildschirm, gehalten nur durch
   einen mitwachsenden Seitenabstand. Lesbarkeit bleibt erhalten, weil
   Fliesstext weiterhin über .measure bzw. .legal__in begrenzt wird. */
/* --pad-x steht als Variable zur Verfügung, damit einzelne Blöcke (z. B. der
   Buchungsrahmen auf dem Handy) sauber aus dem Innenabstand ausbrechen können,
   ohne den Wert ein zweites Mal zu raten. */
.container{ --pad-x:clamp(1.25rem,4vw,5rem); width:100%; max-width:none; margin-inline:auto; padding-inline:var(--pad-x); }
.container--wide{ max-width:none; }
/* Knapper Rhythmus — die dunklen Verlaufsflächen der Sektionshintergründe
   lasen bei zu viel Leerraum wie durchgehende schwarze Balken. */
.section{ padding-block:clamp(1.6rem,3.2vw,2.8rem); }
.measure{ max-width:var(--measure); }

/* ---- Fokus / Zugänglichkeit (WCAG 2.1 AA) ---- */
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:var(--r-sm); }
.skip-link{
  position:absolute; left:.75rem; top:-3.5rem; z-index:999;
  background:var(--accent); color:var(--on-accent); font-weight:600;
  padding:.7rem 1.1rem; border-radius:var(--r-sm);
  transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{ top:.75rem; }
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
::selection{ background:var(--accent); color:var(--on-accent); }

/* ---- Reduced motion: спира всичко ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
}