/* Catering Service — Designstudie
   Nur globale Regeln, die inline nicht möglich sind: Schriften, Keyframes,
   Resets, Hover-/Focus-Zustände. Layout und Farben stehen inline im HTML. */

/* ---------- Schriften (lokal, keine externen Requests) ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ⚠ NACHTRAG VON SOLVIQ: Die Display-Schrift ist von Bodoni Moda auf
   Newsreader gewechselt (Stefans Wahl, 16. August).

   Bodoni ist eine Didone -- der Unterschied zwischen dicken und duennen
   Strichen ist extrem. Heller Text auf dunklem Grund blueht optisch ueber
   seine Kante, und weg sind genau die Haarstriche. Ein hoeheres Gewicht
   daempft das, stellt es aber nicht ab: Die dicken Striche wachsen mit, der
   Kontrast bleibt. Entschieden wurde an einer Vergleichsseite mit sechs
   Schriften in den echten Handygroessen.

   Newsreader: SIL OFL, variabel 400..700, mit Kursive fuer das Zitat.
   ⚠ Alle vier Dateien liegen LOKAL -- keine Anfrage an fremde Domains. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/newsreader-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/newsreader-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Basis ---------- */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #0E1410;
  font-weight: 450;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}
h1, h2, h3 { font-weight: 500; }
input, button { font-weight: 500; }
a { color: #C8963E; text-decoration: none; }
a:hover { color: #E4B765; }
::selection { background: #C8963E; color: #0E1410; }
input::placeholder { color: rgba(245,241,232,.62); }
input[type="date"] { color-scheme: dark; }
img { max-width: 100%; }
[id] { scroll-margin-top: 84px; }

:focus-visible { outline: 2px solid #E0B368; outline-offset: 2px; }

/* ---------- Hover-Zustände ---------- */
.nav-link:hover { color: #C8963E; }
.btn-lift:hover { transform: translateY(-2px); }
.tile:hover { transform: translateY(-3px); }
.zoom:hover { transform: scale(1.05); }
.ghost:hover { border-color: #C8963E; }
.link-ink:hover { color: #7A5518; }
.link-legal:hover { color: #12190F; }

/* ---------- Motion Graphics ---------- */
@keyframes lineDrift {
  0%   { transform: translateX(-2%); }
  50%  { transform: translateX(2%); }
  100% { transform: translateX(-2%); }
}
@keyframes sprigSway {
  0%   { transform: rotate(-3deg) translateY(0); }
  50%  { transform: rotate(3deg) translateY(-8px); }
  100% { transform: rotate(-3deg) translateY(0); }
}
@keyframes dashFlow { to { stroke-dashoffset: -400; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   ⚠ NACHTRAG VON SOLVIQ, nicht Teil des Exports. Bei einem neuen Export aus
   Claude Design geht dieser Block verloren und muss wieder hinein.

   Drei Dinge, die man erst auf dem Geraet merkt. Sie haengen am
   ZEIGEGERAET und nicht an der Fensterbreite -- ein iPad im Querformat ist
   1180px breit und hat trotzdem jedes davon.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {

  /* ⚠ Unter 16px zoomt iOS beim Fokus in das Feld hinein; die Seite steht
     danach vergroessert und seitlich verschoben da. Die Studie traegt ihre
     Groessen INLINE -- ein Stylesheet schlaegt das nur mit !important.
     Genau dafuer ist es da und fuer nichts anderes in dieser Datei. */
  #datumInput,
  #ortInput,
  #nameInput,
  #emailInput { font-size: 16px !important; }

  /* ⚠ Der Regler ist 16px hoch. Sein Griff ist groesser GEZEICHNET, aber
     getroffen wird nur die Box des Elements -- wer den sichtbaren Griff am
     Rand antippt, bewegt nichts. Die Box ist jetzt 36px, das sichtbare Band
     bleibt duenn und mittig (nativer Regler, kein appearance:none). */
  input[type="range"] { height: 36px; }

  /* ⚠ Trefferflaechen ueber ::after mit negativem inset, NICHT ueber
     Polster: Polster blaeht die Zeilenbox auf und verschiebt die Zeilen.
     Die Werte sind gegen die Nachbarn gerechnet -- Navigation 30px
     waagerecht und 12px senkrecht, Kontaktzeilen 8px, Rechtslinks 26px.
     ⚠ Die Zeilen sind 13,5px hoch, nicht 14: mit 5px je Seite kaeme man auf
     23,5 und damit einen halben Pixel zu kurz. Deshalb 6. */
  .nav-link,
  .link-ink,
  .link-legal { position: relative; }
  .nav-link::after   { content: ''; position: absolute; inset: -6px -8px; }
  .link-ink::after   { content: ''; position: absolute; inset: -4px 0; }
  .link-legal::after { content: ''; position: absolute; inset: -6px -8px; }
}

/* ⚠ NACHTRAG VON SOLVIQ: die Leiste auf dem Handy.

   Sie ist `position: fixed` und wurde auf 393px Breite 169px hoch -- ein
   FUENFTEL des Schirms, dauerhaft. Der Grund sind die vier Anker-Links: sie
   brechen unter rund 900px in eine zweite Zeile um und schieben den
   Auftrag-Knopf in eine dritte.

   Auf einem Einseiter sind sie Bequemlichkeit, kein Weg -- gescrollt wird
   ohnehin. Unter 700px fallen sie deshalb weg; Marke und Knopf bleiben.
   ⚠ Der Hero rechnet sein Polster aus der gemessenen Leistenhoehe (main.js),
   er zieht also von selbst nach. */
@media (max-width: 700px) {
  .nav-links { display: none !important; }
}

/* ⚠ NACHTRAG VON SOLVIQ: die schmalsten Geraete (bis 380px).

   Zwei Dinge kippen dort, und beide sind gemessen:

   1. Die Wortmarke „CATERING SERVICE" ist bei 21px und 0,2em Laufweite
      217px breit. Mit „KÖLN" daneben passt das nicht in die 264px, die bei
      320px Fensterbreite zwischen den Leistenpolstern bleiben -- sie brach
      um, und die Leiste wurde dadurch 148 statt 110px hoch.
   2. Die Ueberschrift braucht fuer ihre zweite Zeile („einziger
      Kompromiss.") rund das 9,1-fache ihrer Schriftgroesse. Bei 240px
      Spalte waeren das 26px; die 31px von oben ergaben vier Zeilen mit zwei
      Einzelwoertern.

   ⚠ Die Formel haengt an der SCHRIFT und ist zweimal nachgerechnet worden.
   Sie stand bei 6,5vw + 5, ging mit Bodoni auf Gewicht 700 zurueck auf
   6,3vw + 4 (fetter heisst breiter) und steht seit dem Wechsel auf
   Newsreader bei 6,8vw + 3. Wer die Schrift oder das Gewicht anfasst, misst
   diese Zeile neu.

   ⚠ Und der Umbruch selbst ist FEST: Im Markup steht ein <br /> nach „kein".
   Es sind dadurch auf jeder Breite genau zwei Zeilen -- mit Bodoni wurden
   bei 320px trotzdem drei daraus, weil Zeile 2 nicht mehr passte und ein
   zweites Mal brach. Mit Newsreader bleiben bei 320px 14px Reserve.

   ⚠ !important, weil die Studie ihre Groessen inline traegt. */
@media (max-width: 380px) {
  nav > a > span:first-child { font-size: 17px !important; letter-spacing: .14em !important; }
  h1[data-reveal] { font-size: calc(6.8vw + 3px) !important; }
}

/* ==========================================================================
   ⚠ NACHTRAG VON SOLVIQ: Stefans Befunde vom 15. August, am iPhone gesehen.
   ========================================================================== */

/* ⚠ (1) „Die Schrift in Kombination mit dem Hintergrund ist sehr
   unvorteilhaft, man kann sie fast nicht lesen."

   ERST wurde das ueber das Gewicht bekaempft (700 auf dunklem, 600 auf
   hellem Grund). Das hat gedaempft und nicht behoben -- Stefan zwei Tage
   spaeter: „ist die Schriftart vielleicht dann einfach unvorteilhaft?"

   ⚠ Ja, und das ist die eigentliche Antwort: Bei einer Didone waechst mit
   dem Gewicht auch der DICKE Strich, der Kontrast zwischen beiden bleibt
   also. Behoben ist es erst mit einer Schrift, die diesen Kontrast gar
   nicht hat -- Newsreader, ausgewaehlt an einer Vergleichsseite mit sechs
   Kandidaten in den echten Handygroessen und auf dem echten Grund.

   ⚠ Damit faellt die Hell/Dunkel-Trennung WEG. Sie war die Krücke gegen
   die Haarstriche; Newsreader steht auf beiden Gruenden gleich gut. Ein
   einziger Wert, und zwar der, den Stefan gesehen hat: 600.

   ⚠ DER SELEKTOR DARF NICHT AN EINER INLINE-DEKLARATION MIT DOPPELPUNKT
   HAENGEN. Ein frueherer Anlauf benutzte [style*="background:#0E1410"] und
   griff ins Leere: Sobald ein Skript `element.style` anfasst (initReveal
   tut das), schreibt der Browser das ganze Attribut neu -- aus
   `background:#0E1410` wird `background: rgb(14, 20, 16)`. Das blosse Wort
   „Newsreader" ueberlebt die Normalisierung, ein Doppelpunkt-Paar nicht. */
[style*="Newsreader"] { font-weight: 600 !important; }

/* ⚠ NEBENBEFUND beim Nachmessen des Schriftwechsels: Die Beschriftungen
   ALLER Knoepfe standen in der Browser-Standardschrift, nicht in Archivo.

   Formularelemente erben `font-family` nicht -- das UA-Stylesheet setzt
   ihnen eine eigene (auf dem Mac Helvetica/Arial). Die Studie deklariert
   darueber nur `input, button { font-weight: 500 }`, also das Gewicht ohne
   die Familie. Betroffen waren die vier Anlass-Kacheln, die Schritt-Knoepfe
   des Konfigurators und der Absender.

   ⚠ Es faellt kaum auf, weil der Ersatz eine aehnliche Grotesk ist -- und
   genau deshalb stand es seit dem Export drin. Gemessen ist der Unterschied
   klein und geht in die andere Richtung, als man denkt: „Gartenparty" war
   in der Ersatzschrift 77px breit, in Archivo sind es 75px. Es geht hier
   also nicht um Platz, sondern darum, dass die Studie eine Schrift hat. */
button, input, select, textarea { font-family: inherit; }

@media (max-width: 700px) {

  /* ⚠ (2) Die Kopfzeile brach als „CATERING-MANUFAKTUR · KÖLN" / „&
     RHEINLAND" um. Sie ist mit 0,3em Laufweite rund 350px breit und passt
     damit in keine Handyspalte. Statt sie kleiner zu quetschen, bricht sie
     jetzt AUSGEWOGEN -- zwei Haelften statt eines haengenden Restes. */
  .sq-eyebrow { display: inline-block; text-wrap: balance; letter-spacing: .2em !important; }

  /* ⚠ (3) Das Datumsfeld war deutlich hoeher als das Feld darunter: iOS
     rendert ein leeres input[type=date] mit eigener Innenhoehe. Eine feste
     Hoehe stellt beide gleich. */
  /* ⚠ Die Hoehe allein reicht auf iOS NICHT -- solange das Feld sein
     natives Aussehen behaelt, setzt Safari seine eigene Innenhoehe durch.
     Erst appearance:none macht daraus ein normales Feld; der Tipp oeffnet
     weiterhin den Datumswaehler. */
  #datumInput { -webkit-appearance: none; appearance: none; }
  /* ⚠ Gemessen in WebKit: appearance:none allein laesst das Datumsfeld bei
     45px, das Textfeld daneben steht bei 41. Eine gemeinsame Hoehe fuer alle
     vier Felder ist die einzige, die auch dann noch stimmt, wenn eine Engine
     ihre Innenmasse anders rechnet. */
  #datumInput, #ortInput, #nameInput, #emailInput { height: 44px !important; }

  /* ⚠ „Mitternachtssuppe" ist bei 32px rund 295px breit, die Karte bietet
     innen 249px -- das Wort stand also 46px ueber dem rechten Innenrand.
     Das war Stefans „links rechts abstand passt nicht": nicht die Karte war
     schief, das Wort war zu breit. */
  .sq-dunkel h3 { font-size: 26px !important; }

  /* ⚠ (4) Der Preis stand 20px AUSSERHALB seines Kastens: Beschriftung und
     Betrag lagen in einer Flex-Zeile, der Betrag mit white-space:nowrap bei
     26px -- zusammen 280px in einer 215px breiten Zeile. Untereinander
     passt beides, und die Beschriftung braucht dann keine drei Zeilen. */
  .sq-preiszeile { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }

  /* ⚠ Der Knopf „Angebot anfordern" brach in zwei Zeilen, weil er sich die
     Restbreite neben „Zurueck" teilen musste. min-width:max-content laesst
     ihn seine Textbreite fordern -- passt sie nicht, rutscht er in eine
     eigene Zeile und wird dort voll breit. „Weiter" bleibt daneben. */
  #quizNav { flex-wrap: wrap; }
  #nextBtn { min-width: max-content; }

  /* ⚠ (5) Die Zitatkarte haengt am Desktop absichtlich 34px aus dem Bild;
     auf dem Handy ist der Seitenrand selbst 40px, sie stand also fast auf
     der Bildschirmkante. Jetzt buendig unter dem Bild. */
  .sq-zitatkarte { left: 0 !important; right: 0 !important; bottom: -18px !important; max-width: none !important; }

  /* ⚠ (6) Ueberschrift und Beitext lagen in einer Flex-Zeile. Auf 313px
     bekam die Ueberschrift dadurch rund 150px und brach in sechs Zeilen mit
     je einem Wort. Untereinander liest sie sich wieder als Satz. */
  .sq-kopfreihe { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; margin-bottom: 44px !important; }
  .sq-kopfreihe > h2 { max-width: none !important; }

  /* ⚠ (7) Die dritte Tafel ist am Desktop bewusst eingerueckt
     (max-width:86%, margin-left:auto). Auf dem Handy liest sich das nicht
     als Rhythmus, sondern als Fehler. */
  .sq-figur-versetzt { max-width: 100% !important; margin: 36px 0 0 !important; }

  /* ⚠ (8b) Dieselbe Wortmarke wie in der Leiste, hier im Fuss: 26px mit
     0,2em Laufweite sind rund 312px und brachen damit in zwei Zeilen um. */
  .sq-fuss-marke { font-size: 21px !important; letter-spacing: .16em !important; }

  /* ⚠ (7b) In zwei der drei Bildunterschriften stehen Text und Preis in
     einer Flex-Zeile. Auf dem Handy schwebt der Preis dadurch oben rechts
     neben einer zweizeiligen Ueberschrift. Untereinander steht er da, wo er
     in der dritten Bildunterschrift ohnehin steht -- unter dem Text. */
  .sq-bildunterschrift { flex-direction: column !important; gap: 10px !important; }

  /* ⚠ (8) Fuenf Piktogramme zu 72px brauchen mit ihren Abstaenden 504px --
     auf 313px wurden daraus drei plus zwei mit grossen Luecken. Bei 44px
     passen alle fuenf in eine Reihe (220 + 4 x 12 = 268). */
  .sq-piktogramme { gap: 12px !important; justify-content: space-between !important; }
  .sq-piktogramme svg { width: 44px !important; height: 44px !important; }
}

/* ⚠ NACHTRAG VON SOLVIQ: die schmalsten Geraete, zweite Stufe.

   ⚠ Dieser Block steht am ENDE der Datei, und das ist kein Zufall: Der
   380px-Block weiter oben stand VOR dem 700px-Block und wurde von ihm
   ueberschrieben (gleiche Spezifitaet, spaeter gewinnt). Die Werte hier
   sahen dadurch wirkungslos aus.

   Bei 240px Spalte brach die Wortmarke im Fuss wieder um (21px mit 0,16em
   sind rund 248px), und die fuenf Piktogramme brauchten bei 44px zusammen
   268px. */
@media (max-width: 380px) {
  /* ⚠ „Mitternachtssuppe" passt auch bei 26px nicht mehr: Die Karte bietet
     bei 320px Fensterbreite innen nur 176px, das Wort braucht 234. Also
     schmaleres Polster UND kleinere Schrift -- und `hyphens` als Netz, damit
     ein noch laengeres Wort trennt statt herauszuragen. Die Studie traegt
     lang="de", die Trennung ist damit deutschsprachig. */
  .sq-dunkel { padding-left: 22px !important; padding-right: 22px !important; }
  .sq-dunkel h3 { font-size: 22px !important; hyphens: auto; }

  .sq-fuss-marke { font-size: 18px !important; letter-spacing: .13em !important; }
  .sq-piktogramme { gap: 8px !important; }
  .sq-piktogramme svg { width: 36px !important; height: 36px !important; }

  /* ⚠ ALTBEFUND aus dem Export, beim Nachmessen des Schriftwechsels
     gefunden: Die Beschriftungen der vier Anlass-Kacheln wurden auf 320px
     ABGESCHNITTEN -- „Gartenparty" 21px, „Firmenfeier / Gala" 17px,
     „Business-Lunch" 8px. Die Kachel ist dort 84px breit, ihr Text sitzt
     mit je 12px Abstand darin, also in 58px.

     ⚠ Es war NICHT sichtbar als Ueberlauf: Die Kachel hat overflow:hidden,
     der Text endete einfach mitten im Wort. Ein Pruefskript, das nur die
     Dokumentbreite misst, meldet dazu nichts -- gefunden hat es erst der
     Vergleich „laengstes Wort gegen verfuegbare Breite".

     Drei Werte zusammen loesen es, keiner allein: schmaleres Polster (10
     statt 12), kleinere Schrift (12 statt 13,5) und `hyphens` fuer die
     Woerter ohne eigene Trennstelle. */
  .tile > span:last-of-type {
    left: 10px !important; right: 10px !important;
    font-size: 12px !important; hyphens: auto;
  }
}