/* ==========================================================================
   Servus Gelting — Basis

   Zwei Schichten, genau wie im Canvas:

   1. Grundschicht aus dem Design System (_ds/styles.css) — Reset,
      Grundelemente, 4px an Formularfeldern.
   2. Bausteine, die alle Seiten teilen. Deren Werte stehen im Canvas
      inline in variant-h.jsx (VariantH_parts) und gewinnen dort über
      die DS-Tokens. Hier ist es genauso.

   Setzt assets/css/tokens.css voraus.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Grundschicht — aus _ds/styles.css
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Sprungziele (#kontakt, Rechtsseiten-Inhalt) nicht unter die
     klebende Kopfzeile schieben. 96px ist ihre Höhe. */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ecken sind leicht gerundet (--radius) */
button, input, select, textarea {
  border-radius: var(--radius);
  font-family: inherit;
}

::selection { background: var(--world, var(--amber)); color: var(--cream); }

/* Kein Bestandteil des Design Systems, aber nötig, sobald aus den
   Entwurfsflächen echtes HTML wird. */
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { border: none; background: none; color: inherit; font: inherit; cursor: pointer; }
table { border-collapse: collapse; }


/* --------------------------------------------------------------------------
   2. Seitenpalette der Vorlage
   variant-h.jsx setzt eigene Flächenwerte, die von den DS-Tokens
   abweichen. Der Canvas rendert diese hier — also gelten sie.
   -------------------------------------------------------------------------- */

:root {
  /* Seitlicher Rand der Kopfzeilen und des Heros. 4.861vw trifft bei
     1440px exakt die 70px der Vorlage und wächst darüber mit. Steht
     hier, weil ihn beide Kopfzeilen brauchen. */
  --hero-rand: clamp(20px, 4.861vw, 140px);

  /* Der Hero hat einen 26px breiten Rahmen; die Kopfzeile darüber sitzt
     innerhalb davon. Kopfzeilen ohne diesen Rahmen — Unterseiten und die
     schwebende Leiste — rechnen ihn dazu, damit alle drei auf derselben
     Kante stehen. */
  --kopf-rand: calc(var(--hero-rand) + 26px);

  --flaeche:       #F1E8D6;             /* T.bg   — Seitenfläche */
  --flaeche-karte: #F9F2E4;             /* T.card — ruhige Zweitfläche */
  --linie:         rgba(30, 22, 16, .18); /* T.line */
}

/* Nur für Screenreader — etwa Formularlabels, die im Entwurf über den
   Platzhaltertext im Feld gelöst sind. Ein placeholder allein ist kein
   Label. */
.visuell-versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Seitenfläche. Steht bewusst hier und nicht in einer Seiten-CSS —
   jede Seite der Vorlage läuft auf T.bg, nicht auf dem DS-Cream. */
.seite {
  background: var(--flaeche);
  color: var(--espresso);
  font-family: var(--font-body);
}


/* --------------------------------------------------------------------------
   3. Seitenraster
   -------------------------------------------------------------------------- */

/* Inhaltscontainer.

   Das Artboard ist 1440px breit mit 96px Außenabstand — und kann nicht
   ausdrücken, was auf breiteren Schirmen passieren soll. Deshalb hier
   die Begrenzung auf die Entwurfsbreite (--maxw-page): bei 1440px
   pixelgleich zum Artboard, darüber bleibt das Layout in Proportion
   und nur die Fläche läuft randlos weiter.

   6.667vw trifft bei 1440px exakt 96px. */
.abschnitt {
  max-width: var(--maxw-page);
  margin-inline: auto;
  padding-inline: clamp(20px, 6.667vw, 96px);
}

.abschnitt__kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.abschnitt__kopf .eyebrow { display: block; margin-bottom: 12px; }


/* --------------------------------------------------------------------------
   4. Typografie-Bausteine
   -------------------------------------------------------------------------- */

/* Kleines Versal-Label über Überschriften */
.eyebrow {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--amber);
}

.eyebrow--hell { color: var(--tan); }

/* Abschnittsüberschrift — Cabinet Grotesk, Versalien */
.h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.02;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: var(--espresso);
}

.fliesstext {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted-brown);
}

/* Mono-Auszeichnung — Labels, Zahlen, Pfadangaben. Steht bewusst hier
   und vor den Bausteinen: Seitenregeln laden später und gewinnen damit,
   wenn sie eine eigene Größe setzen. */
.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: .02em;
  line-height: 1.9;
}


/* --------------------------------------------------------------------------
   5. Buttons — BtnH aus variant-h.jsx
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: none;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.btn--ink   { background: var(--espresso); color: #F6EEDF; }
.btn--ink:hover { background: #33241a; }

.btn--brass { background: var(--amber); color: #FCF6EA; }
.btn--brass:hover { background: #b87c3c; }

.btn--cream { background: #F6EEDF; color: var(--espresso); }
.btn--cream:hover { background: #fff; }

/* Akzent = aktive Sortenwelt */
.btn--accent { background: var(--world); color: #FFF4E8; }

.btn--ghost {
  background: none;
  border: 2px solid var(--espresso);
  color: var(--espresso);
}
.btn--ghost:hover { background: var(--espresso); color: #F6EEDF; }

/* Ghost auf dunklem Grund */
.btn--ghost-hell {
  background: none;
  border: 2px solid rgba(246, 238, 223, .6);
  color: #F6EEDF;
}
.btn--ghost-hell:hover { background: #F6EEDF; color: var(--espresso); }

/* Pillenform mit dünner Kontur — Sorten-Bühne, „Luigi entdecken" */
.btn--pille {
  background: var(--off-white);
  border: 1.5px solid rgba(30, 22, 16, .7);
  border-radius: 999px;
  color: var(--espresso);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  padding: 16px 30px;
  gap: 12px;
}
.btn--pille:hover { background: var(--espresso); color: #F6EEDF; }
.btn--pille:hover svg { stroke: #F6EEDF; }


/* --------------------------------------------------------------------------
   6. Kopfzeile — HeroH, liegt über dem Hero-Video
   -------------------------------------------------------------------------- */

/* Eine Leiste, zwei Zustände — kein Austausch, keine zweite Leiste.

   Über dem Hero steht sie durchsichtig und großzügig, danach wird sie
   zur Espresso-Leiste. Beide Zustände liegen auf demselben Element,
   der Weg dazwischen ist ein Übergang.

   Der seitliche Rand ändert sich dabei nicht: --kopf-rand gilt in
   beiden Zuständen. Die Fläche wächst also unter dem Inhalt hervor,
   während Logo und Navigation stehen bleiben — nichts springt seitlich.
   Das ist die Antwort auf den 26px-Rahmen des Heros: er verschwindet
   nicht, der Inhalt hat ihn nie verlassen.

   Der Höhenunterschied steckt allein im Innenabstand: oben 52px im
   Hero, 16px kompakt. Damit bleibt transform frei fürs Wegziehen und
   translateY(-100%) räumt die Leiste in beiden Zuständen vollständig
   aus dem Bild — sie ist oben so hoch, wie sie gerade ist. */
.kopfzeile {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  /* 52px oben: der Hero hat 26px Rahmen, die Leiste darin noch einmal
     26px eigenen Abstand. Zusammen sitzt das Logo wie in der Vorlage. */
  padding: 52px var(--kopf-rand) 26px;
  color: #F6EEDF;
  background: rgba(30, 22, 16, 0);
  transition: background-color var(--dur-wandel) var(--ease-out),
              padding var(--dur-wandel) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

/* Zustand nach dem Hero */
.kopfzeile.ist-kompakt {
  padding-block: 16px;
  background: rgba(30, 22, 16, 1);
}

/* Beim Runterscrollen weg, beim Hochscrollen zurück — in beiden
   Zuständen, auch über dem Hero. */
.kopfzeile.ist-versteckt { transform: translateY(-100%); }

.kopfzeile__nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .95;
}

.kopfzeile__nav--rechts { justify-content: flex-end; }

@media (prefers-reduced-motion: reduce) {
  .kopfzeile { transition: none; }
}

.kopfzeile__nav a {
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.kopfzeile__nav a:hover { border-bottom-color: currentColor; }

/* Das Logo führt zurück auf die Startseite. Der Verweis ist das
   Rasterfeld in der Mitte — display: block, damit er kein Zeilenmaß
   mitbringt und die Kopfzeile ihre Höhe behält. */
.kopfzeile__logolink { display: block; }

.kopfzeile__logo {
  height: 78px;
  width: auto;
  transition: height var(--dur-wandel) var(--ease-out);
}

.kopfzeile.ist-kompakt .kopfzeile__logo { height: 64px; }


/* --------------------------------------------------------------------------
   7. Bild- und Videoplatzhalter — SGPh
   -------------------------------------------------------------------------- */

.platzhalter {
  position: relative;
  overflow: hidden;
  background: #241B14;
}

.platzhalter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, .035) 0px,
    rgba(255, 255, 255, .035) 2px,
    transparent 2px,
    transparent 16px
  );
}

.platzhalter::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(255, 255, 255, .16);
  border-radius: 8px;
  pointer-events: none;
}

.platzhalter__text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  text-align: center;
  color: rgba(255, 250, 240, .6);
  font-family: "Instrument Sans", var(--font-body);
}

/* --------------------------------------------------------------------------
   Ein echtes Foto im Platzhalter
   Sobald eines drin liegt, verschwinden Schraffur, gestrichelter Rahmen und
   Beschriftung von selbst — die Beschriftung bleibt aber im Markup stehen.
   Sie hält fest, was das Bild zeigen soll, und nimmt man das Foto wieder
   heraus, ist der Platzhalter unverändert zurück.

   `--fokus` entscheidet, welcher Teil des Bildes beim Beschneiden erhalten
   bleibt. Das ist hier keine Feinheit, sondern nötig: Die Rahmen wechseln
   zwischen Desktop und Mobil das Format, teils von hochkant auf quer.
   -------------------------------------------------------------------------- */

.platzhalter__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fokus, 50% 50%);
}

/* Logos statt Fotos — seit dem 14.09.2026 auf den Partnerkarten. Ein Logo
   wird nicht beschnitten: ganz sichtbar, mittig auf Weiß, mit Rand. Den Rand
   setzt _bilder.json je Logo („rand“, in Prozent der Breite), damit ein
   quadratisches und ein breites Zeichen optisch gleich groß wirken. */
.platzhalter__foto--logo {
  box-sizing: border-box;
  padding: var(--logo-rand, 16% 18%);
  object-fit: contain;
  object-position: 50% 50%;
  background: #FFFFFF;
}

.platzhalter:has(.platzhalter__foto)::before,
.platzhalter:has(.platzhalter__foto)::after { content: none; }

.platzhalter:has(.platzhalter__foto) .platzhalter__text { display: none; }


/* Im Hero sitzt die Beschriftung oben rechts */
.platzhalter__text--ecke {
  inset: auto 26px auto auto;
  top: 112px;
  align-items: flex-end;
  text-align: right;
  padding: 0;
}

.platzhalter__art {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: 6px;
}

.platzhalter__was {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.8;
}


/* --------------------------------------------------------------------------
   8. Kleinteile
   -------------------------------------------------------------------------- */

/* RowH — Zeile mit Icon */
.icon-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 13px;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--espresso);
}

.icon-zeile svg { flex: 0 0 auto; }

/* Gefülltes Pillen-Label, z. B. „Hauptverkaufsstelle" */
.marke {
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--amber);
  color: #FCF6EA;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* Umrandetes Pillen-Label, z. B. „Im Regal" */
.marke--kontur {
  background: none;
  border: 1px solid var(--linie);
  color: var(--muted-brown);
  letter-spacing: .16em;
  padding: 5px 12px;
}


/* --------------------------------------------------------------------------
   Fehlender Text
   Das Gegenstück zum Foto-Platzhalter. Wo der Kunde noch liefern muss,
   soll eine Lücke zu sehen sein und nicht ein Absatz, der einfach fehlt —
   sonst wirkt die Seite fertig und niemand merkt es. Die Marke nennt das
   Feld beim Namen, damit sie sich der Liste in `_sorten-offen.md`
   zuordnen lässt.

   Verschwindet mitsamt der Klasse, sobald alle Felder gefüllt sind.
   -------------------------------------------------------------------------- */

.fehlt {
  display: inline-block;
  padding: 5px 12px;
  border: 1px dashed var(--amber);
  border-radius: 999px;
  background: rgba(160, 106, 47, .07);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .12em;
  text-transform: uppercase;
  vertical-align: baseline;

  /* Kein nowrap: „Dosis, Bezug, Zeit und Wassertemperatur folgen" lief
     bei 390px acht Pixel über den Rand und schob die ganze Seite mit.
     Eine Marke, die umbricht, ist harmloser als eine, die den
     Bruchpunkt sprengt. */
  max-width: 100%;
}

/* Auf dunklem Grund trägt das Amber zu wenig. */
.band--dunkel .fehlt {
  border-color: rgba(217, 166, 120, .55);
  background: rgba(217, 166, 120, .08);
  color: var(--tan);
}


/* --------------------------------------------------------------------------
   Entwurfstext
   Von uns geschrieben, vom Kunden noch nicht bestätigt. Im Normalfall
   sieht man nichts — die Seite soll in der Präsentation wie fertig
   aussehen. Für eine Korrekturrunde reicht

       document.documentElement.classList.add('entwuerfe-zeigen')

   in der Konsole, dann sind alle Entwürfe hervorgehoben. Welche das
   sind, steht in `_sorten-offen.md`, Teil 2.
   -------------------------------------------------------------------------- */

.entwuerfe-zeigen [data-entwurf] {
  border-radius: 3px;
  background: rgba(160, 106, 47, .12);
  box-shadow: 0 0 0 1px rgba(160, 106, 47, .32);
}

.entwuerfe-zeigen .band--dunkel [data-entwurf] {
  background: rgba(217, 166, 120, .14);
  box-shadow: 0 0 0 1px rgba(217, 166, 120, .34);
}

/* SGDots — Röstgradskala. Größe, Abstand und Farbe kommen je
   Einsatzort, deshalb über Variablen. */
.roestgrad {
  display: flex;
  align-items: center;
  gap: var(--punkt-abstand, 7px);
}

.roestgrad span {
  width: var(--punkt-groesse, 9px);
  height: var(--punkt-groesse, 9px);
  border-radius: 50%;
  border: 1.5px solid var(--punkt-farbe, var(--amber));
  opacity: .4;
}

.roestgrad span.ist-voll {
  background: var(--punkt-farbe, var(--amber));
  opacity: 1;
}


/* --------------------------------------------------------------------------
   9. Unterseiten-Kopf — SubHeader aus unterseiten-shared.jsx

   Espresso-Balken über allen Seiten außer der Startseite. Dort liegt
   die Navigation stattdessen über dem Hero-Video.
   -------------------------------------------------------------------------- */

.unterseiten-kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 96px;
  background: var(--espresso);
  color: #F6EEDF;
  transition: transform var(--dur-base) var(--ease-out);
}

/* Beim Runterscrollen zieht sich die Leiste nach oben weg, beim
   Hochscrollen kommt sie zurück. Gesteuert von assets/js/kopfzeile.js. */
.unterseiten-kopf.ist-versteckt { transform: translateY(-100%); }

/* Nicht auf --maxw-page begrenzt: Die Kopfzeile soll so breit laufen
   wie die auf der Startseite, sonst sitzen Logo und Navigation auf
   breiten Schirmen unterschiedlich weit außen. */
.unterseiten-kopf .container {
  max-width: none;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding-inline: var(--kopf-rand);
}

@media (prefers-reduced-motion: reduce) {
  .unterseiten-kopf { transition: none; }
}

.unterseiten-kopf nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .95;
}

.unterseiten-kopf nav:last-of-type { justify-content: flex-end; }

.unterseiten-kopf nav a {
  padding-bottom: 6px;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.unterseiten-kopf nav a:hover { border-bottom-color: rgba(217, 166, 120, .5); }

/* Aktive Seite */
.unterseiten-kopf nav a[aria-current="page"] {
  color: var(--tan);
  border-bottom-color: var(--tan);
}

.unterseiten-kopf__logo { height: 64px; width: auto; }

/* „Shop kommt bald“ bricht nie um — zweizeilig sprengte die Pille die
   Leiste, bei 335px sogar dreizeilig (Launch-Checkliste, 14.09.2026).

   Und sie ist kleiner als ein Seiten-Knopf: 12px statt 13.5, Polster
   14/20 statt 16/28, also 173 × 47 statt 205 × 53px. Der längere Text
   ist doppelt so breit wie „Shop“ im Entwurf (205 gegen 97px) und nahm
   der Navigation den Platz: „Über Servus Gelting“ brach auf der
   Startseite bis 1440px dreizeilig um — auf jedem MacBook zu sehen
   (Kunde, 16.09.2026, siehe den Bruchpunkt weiter unten). In einer
   96px-Leiste hatte die Pille ohnehin das Maß eines Seiten-CTA; die
   schmale Leiste führt sie seit jeher kleiner. */
.kopfzeile__nav .btn,
.unterseiten-kopf nav .btn {
  white-space: nowrap;
  font-size: 12px;
  padding: 14px 20px;
}


/* --------------------------------------------------------------------------
   9a. Mobiles Menü — MenueM1 „Editorial Index" aus mobile-menue.jsx

   Vollflächiges Overlay, nur auf dem Telefon. Öffnet aus dem
   Menüzeichen links in der Kopfzeile und fährt von rechts herein —
   280ms, --ease-out, so die Notiz am Artboard. Aufgebaut wird es von
   assets/js/kopfzeile.js; ohne JavaScript gibt es kein Menü.

   Maße aus dem Artboard „12 · Mobile-Menü — Mobile 390"
   (_referenz/mobile-menue-mobile.html). Die Leiste verteilt Schließen,
   Logo und Shop mit space-between; das Logo steht dadurch 18px links
   der Mitte, anders als in der Kopfzeile darunter. So gezeichnet.

   Eine Abweichung, vom Kunden gewünscht (11.09.2026): Aktive Seite und
   Wasserzeichen stehen nicht fest in Luigi-Orange wie im Entwurf,
   sondern in einer der fünf Farbwelten — auf Sortenseiten in deren
   eigener, sonst einmal je Besuch gezogen (kopfzeile.js setzt
   data-welt). Jeder Ton ist auf Espresso als Text lesbar, mindestens
   4,5 : 1.

   Was das Artboard nicht sagen kann: Es ist 844px hoch, Telefone sind
   es nicht. Leiste und Wasserzeichen bleiben stehen, der Inhalt rollt,
   wenn der Schirm kürzer ist. Ist er länger, sitzt der untere Block am
   unteren Rand, wie gezeichnet.
   -------------------------------------------------------------------------- */

/* Solange das Menü offen ist, rollt die Seite darunter nicht. Nur am
   Wurzelelement: Ein overflow am body machte ihn zum Rollbereich, und
   die klebende Kopfzeile spränge aus dem Bild. */
html.menue-offen { overflow: hidden; }

.menue {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--espresso);
  color: #F6EEDF;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;

  /* Geschlossen wartet es rechts neben dem Schirm — unsichtbar und
     damit auch für Tastatur und Screenreader nicht erreichbar. */
  visibility: hidden;
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
}

.menue.ist-offen {
  visibility: visible;
  transform: none;
  transition: transform var(--dur-base) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .menue, .menue.ist-offen { transition: none; }
}

/* Das Menü gehört zur schmalen Kopfzeile — bis 1339px, siehe dort. */
@media (min-width: 1340px) {
  .menue { display: none; }
}

/* Farbwelt: aktive Seite und Wasserzeichen. In Klammern der Kontrast
   auf Espresso — Text braucht mindestens 4,5 : 1. Renatos und Resis
   eigene Töne kämen nur auf 2,5 und 1,7 : 1. Für Renato reicht der
   helle Ton aus den Tokens, für Resi nicht (4,2 : 1): Sein Ton ist
   derselbe Blauton, etwas heller. Ohne data-welt bleibt es beim
   Entwurf. */
.menue                     { --menue-akzent: var(--luigi); }        /* 6,2 : 1  */
.menue[data-welt="andrea"] { --menue-akzent: var(--andrea); }       /* 14,3 : 1 */
.menue[data-welt="maxim"]  { --menue-akzent: var(--maxim); }        /* 11,4 : 1 */
.menue[data-welt="renato"] { --menue-akzent: var(--renato-hell); }  /* 6,6 : 1  */
.menue[data-welt="resi"]   { --menue-akzent: #4B89C4; }             /* 4,8 : 1  */

.menue__marke {
  position: absolute;
  right: -24px;
  bottom: -14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 120px;
  line-height: .8;
  letter-spacing: -.01em;
  color: var(--menue-akzent);
  opacity: .11;
  pointer-events: none;
  user-select: none;
}

/* Leiste: Schließen · Logo · Shop */
.menue__leiste {
  flex-shrink: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid rgba(246, 238, 223, .16);
}

.menue__zu {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 0;
}
.menue__zu span {
  position: absolute;
  left: 1px;
  top: 11px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #F6EEDF;
  transform: rotate(45deg);
}
.menue__zu span + span { transform: rotate(-45deg); }
/* Trefferfläche 44 × 44px, das Kreuz bleibt 24 × 24 */
.menue__zu::before {
  content: "";
  position: absolute;
  inset: -10px;
}

.menue__logolink { display: block; }
.menue__logo { height: 44px; width: auto; }

.menue__shop {
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #F6EEDF;
  color: var(--espresso);
  padding: 8px 14px;
  border-radius: 999px;
}

.menue__inhalt {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menue__ey {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 16px;
}

/* Sechs Zeilen: Nummer, Name mit Unterzeile, Pfeil */
.menue__liste { border-top: 1px solid rgba(246, 238, 223, .16); }

.menue__punkt {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid rgba(246, 238, 223, .16);
}

.menue__nr {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10.5px;
  line-height: 1.9;
  letter-spacing: .14em;
  color: rgba(246, 238, 223, .62);
  padding-top: 6px;
  min-width: 20px;
}

.menue__text { flex: 1; }

.menue__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 27px;
  line-height: 1.02;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.menue__unter {
  display: block;
  font-size: 12px;
  color: rgba(246, 238, 223, .5);
  margin-top: 3px;
}

.menue__punkt[aria-current="page"] .menue__nr,
.menue__punkt[aria-current="page"] .menue__name { color: var(--menue-akzent); }

/* Unterer Block: Suche, Anschrift, drei Verweise */
.menue__fuss {
  margin-top: auto;
  padding-bottom: 22px;
}

.menue__suche {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid rgba(246, 238, 223, .16);
  border-radius: 8px;
  margin-bottom: 18px;
}
.menue__suche svg { flex-shrink: 0; }
.menue__suche:focus-within { border-color: rgba(246, 238, 223, .45); }

/* Der Platzhalter trägt Farbe und Grad des Entwurfs, der getippte
   Begriff steht in Cream. */
.menue__suche input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  font-size: 14px;
  line-height: 1.55;
  color: #F6EEDF;
}
.menue__suche input::placeholder { color: rgba(246, 238, 223, .6); opacity: 1; }
.menue__suche input:focus { outline: none; }
.menue__suche input::-webkit-search-cancel-button { -webkit-appearance: none; }

.menue__adresse {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10.5px;
  line-height: 1.8;
  letter-spacing: .04em;
  color: rgba(246, 238, 223, .55);
}

.menue__links {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  align-items: center;
}
.menue__links a {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tan);
}


/* --------------------------------------------------------------------------
   10. Container für randlose Bänder

   Kopf- und Fußzeile laufen in der Fläche randlos durch, ihr Inhalt
   bleibt aber auf der Entwurfsbreite — sonst driftet er auf großen
   Schirmen an die Ränder, während die Abschnitte dazwischen zentriert
   stehen.
   -------------------------------------------------------------------------- */

.container {
  max-width: var(--maxw-page);
  margin-inline: auto;
  width: 100%;
}


/* --------------------------------------------------------------------------
   11. Beitrags-Auszeichnungen

   Kategorie und Metazeile sehen auf der Übersicht und im Artikel gleich
   aus — deshalb hier und nicht doppelt in beiden Seiten-CSS.
   -------------------------------------------------------------------------- */

/* Kategorie mit hinterlegter Fläche — Aufmacher und Artikelkopf */
.katmarke {
  padding: 7px 10px;
  border-radius: 4px;
  background: rgba(194, 84, 15, .1);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  color: #C2540F;
}

/* Kategorie ohne Fläche — in den Beitragskarten */
.katkennung {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  color: #C2540F;
}

.beitragsmeta {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .1em;
  line-height: 1;
  color: var(--muted-brown);
}


/* --------------------------------------------------------------------------
   12. Newsletter-Band

   Derselbe Baustein auf Aktuelles und Blog-Artikel
   (QParts.Newsletter mit variant="band").
   -------------------------------------------------------------------------- */

.newsletter {
  padding-block: 88px 92px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.newsletter .eyebrow { display: block; margin-bottom: 14px; color: var(--tan); }
.newsletter .h2 { font-size: 52px; color: var(--cream); }

.newsletter__text {
  max-width: 440px;
  margin-bottom: 24px;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(246, 238, 223, .75);
}

.newsletter__feld {
  display: flex;
  gap: 12px;
}

.newsletter__feld input {
  flex: 1;
  height: 52px;
  padding: 0 16px;
  border: 1.5px solid rgba(246, 238, 223, .3);
  border-radius: 4px;
  background: transparent;
  color: var(--cream);
  font-size: 16px;
}

.newsletter__feld input::placeholder { color: rgba(246, 238, 223, .45); }
.newsletter__feld input:focus { outline: none; border-color: var(--tan); }

/* Bis nach dem Launch gesperrt (15.09.2026): Das Feld tritt zurück, der
   Knopf bleibt lesbar wie „Shop kommt bald“, reagiert aber auf nichts —
   auch nicht mit dem Hover der Cream-Knöpfe. */
.newsletter__feld input:disabled { opacity: .6; cursor: not-allowed; }
.newsletter__feld .btn:disabled { cursor: default; pointer-events: none; }

.newsletter__hinweis {
  margin-top: 14px;
  font-size: 11.5px;
  color: rgba(246, 238, 223, .55);
}

/* Danke-Ansicht nach dem Absenden */
.newsletter__danke {
  padding-top: 16px;
  border-top: 2px solid var(--tan);
}

.newsletter__danke[hidden],
.newsletter__form[hidden] { display: none; }

.newsletter__dankekopf {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  text-transform: uppercase;
  color: var(--cream);
}

.newsletter__dankenote {
  margin-top: 8px;
  font-size: 11.5px;
  color: rgba(246, 238, 223, .6);
}


/* --------------------------------------------------------------------------
   13. Fußzeile — DS.SiteFooter, auf allen Seiten identisch
   -------------------------------------------------------------------------- */

.fusszeile {
  background: var(--espresso);
  color: var(--cream);
  padding: 72px clamp(20px, 5vw, 72px) 36px;
}

.fusszeile > .container {
  display: flex;
  flex-direction: column;
}

.fusszeile__kopf {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 52px;
}

.fusszeile__logo { flex: 0 0 auto; width: 128px; height: auto; }

.fusszeile__ort {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 12px;
}

.fusszeile__claim {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 5vw, 60px);
  line-height: .95;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--cream);
}

.fusszeile__spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 40px;
}

.fusszeile__titel {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 14px;
}

.fusszeile p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--cream);
  opacity: .82;
}

.fusszeile__zeiten {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  opacity: .82;
}

.fusszeile__spalten a {
  display: block;
  margin-bottom: 9px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--cream);
  opacity: .82;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.fusszeile__spalten a:hover { opacity: 1; }

.fusszeile__recht {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: space-between;
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid rgba(246, 238, 223, .16);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cream);
  opacity: .6;
}

.fusszeile__recht nav { display: flex; gap: 18px; }
.fusszeile__recht a:hover { text-decoration: underline; }


/* --------------------------------------------------------------------------
   14. Ausgangszustände der Bewegung

   Greift nur, solange <html> die Klasse „anim" trägt. Die setzt ein
   Einzeiler im Kopf jeder Seite, und assets/js/animationen.js nimmt sie
   wieder weg, sobald feststeht, dass nicht animiert wird — ohne
   JavaScript, ohne GSAP oder bei abbestellter Bewegung. Ohne diese
   Rückfalltür wäre eine Seite mit stummem Skript leer.

   Nur Deckkraft, kein transform: Wasserzeichen tragen eigene
   Verschiebungen, die hier überschrieben würden. Der Versatz von 24px
   kommt deshalb aus GSAP.
   -------------------------------------------------------------------------- */

.anim [data-laden],
.anim [data-reveal],
.anim [data-reveal-gruppe] > * {
  opacity: 0;
}


/* --------------------------------------------------------------------------
   15. Mobil — geteilte Bausteine
   Vorlage: canvas/roesterei/variant-h-mobile.jsx, Artboard 390px.

   Bruchpunkt 767px statt der bisherigen 700px: Die Vorlage ist auf 390px
   gezeichnet, und zwischen 700 und 767 stand bisher die umgebrochene
   Desktop-Fassung — auf Geräten, die eindeutig Telefone sind. Ein
   Bruchpunkt für das Telefon, nicht zwei.
   -------------------------------------------------------------------------- */

/* Das Menüzeichen der Mobil-Vorlage. Auf dem Desktop gibt es die
   Navigation ausgeschrieben, dort bleibt es aus. */
.kopfzeile__menue {
  display: none;
  flex-direction: column;
  gap: 5px;
}

.kopfzeile__menue span {
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: #F6EEDF;
}

/* Mit JavaScript wird aus dem Zeichen ein Knopf, siehe Abschnitt 9a.
   Seine Trefferfläche wächst unsichtbar auf 44 × 44px — das Zeichen
   selbst bleibt 24 × 16, wie gezeichnet. */
button.kopfzeile__menue {
  position: relative;
  padding: 0;
  border-radius: 0;
}
button.kopfzeile__menue::before {
  content: "";
  position: absolute;
  inset: -14px -10px;
}

/* Zwei Fragen, zwei Bruchpunkte. Welche Navigation: ausgeschrieben oder
   als Menü — bis 1339px das Menü. Welche Maße: die der Vorlage für den
   Desktop oder die fürs Telefon — bis 1023px die kleinen. Dazwischen,
   auf Laptops, steht also die volle Leiste mit Menüzeichen: 96px hoch,
   Logo 64px, Rand wie überall.

   Bis zum 14.09.2026 wechselte beides erst unter 768px. Dann war die
   Desktop-Leiste mit sieben Verweisen und Pille zwischen 768 und 1023
   zu eng — schon mit „Shop“ quetschte sie das Logo (768px: unsichtbar,
   860px: 47 statt 64px), mit „Shop kommt bald“ lief die Seite 69px über.
   Seit dem 16.09.2026 weicht die Navigation schon unterhalb von 1340px
   dem Menü. Die Leiste ist ein symmetrisches Raster — beide Seitenspalten
   gleich breit, damit das Logo mittig steht. Rechts stehen vier Dinge
   (drei Verweise und die Pille), links drei, und bei 1440px braucht die
   rechte Spalte 623px bei 560 verfügbaren. Also brach „Über Servus Gelting“ um
   — auf der Startseite bis 1440px dreizeilig, dem Kunden auf dem MacBook
   aufgefallen —, und wo gar nichts mehr ging, schob die Spalte das Logo
   aus der Mitte (1024px: 121px). Mit kleinerer Pille und „Über uns“ steht
   sie ab 1300px einzeilig; 1340 gibt ihr 17px Luft statt 2. */
@media (max-width: 1339px) {
  .kopfzeile__nav a { display: none; }
  .unterseiten-kopf nav a { display: none; }
  .kopfzeile__menue { display: flex; }
}

/* Bis 1023px zusätzlich die Maße der Mobil-Vorlage (02 · Kaffeesorten —
   Mobile 390): 64px hohe Leiste, 20px Rand, Logo 44px, Shop als kleine
   Pille. Bis zum 14.09.2026 lief hier die 96px-Leiste mit allen sieben
   Verweisen nebeneinander und schob die Seite rund 310px über den Rand.
   Alles außerhalb der Kopfzeile behält seinen Bruchpunkt bei 767px. */
@media (max-width: 1023px) {
  /* Kopfzeile: Höhe 102px offen, 88px kompakt; der Unterschied steckt
     wie auf dem Desktop allein im oberen Innenabstand. */
  .kopfzeile { padding: 32px var(--kopf-rand) 18px; }
  .kopfzeile.ist-kompakt { padding-block: 18px; }
  .kopfzeile__logo,
  .kopfzeile.ist-kompakt .kopfzeile__logo { height: 52px; }

  .unterseiten-kopf { height: 64px; }
  .unterseiten-kopf .container { padding-inline: 20px; }
  .unterseiten-kopf__logo { height: 44px; }

  /* Der kompakte Zustand der Startseite trägt dieselben Maße — eine
     Leiste, ein Aussehen. */
  .kopfzeile.ist-kompakt { padding-block: 10px; }
  .kopfzeile.ist-kompakt .kopfzeile__logo { height: 44px; }

  /* Shop als Pille, wie im Artboard */
  .kopfzeile__nav--rechts .btn,
  .unterseiten-kopf nav .btn {
    padding: 8px 14px;
    font-size: 11px;
    letter-spacing: .08em;
    border-radius: 999px;
  }
}

@media (max-width: 767px) {
  /* Der Hero hat auf dem Telefon einen 14px-Rahmen statt 26, die
     Kopfzeile darin 20px eigenen Abstand. Zusammen 34. */
  :root { --kopf-rand: 34px; }


  /* Fußzeile: Spalten untereinander, Logo größer, Rechtszeile gestapelt.
     Inhalt bleibt der der Desktop-Fußzeile — die Mobil-Vorlage zeigt nur
     drei Spalten und kennt „Cookie-Einstellungen" nicht. Der Widerruf
     der Einwilligung muss aber auf jedem Gerät erreichbar sein. */
  .fusszeile { padding: 40px 24px 28px; }
  .fusszeile .container { padding-inline: 0; }
  .fusszeile__kopf { display: block; }
  /* Ohne width:auto bleibt die Breite von 128px aus der Grundregel
     stehen und das nahezu quadratische Logo wird auf halbe Höhe
     gequetscht. */
  .fusszeile__logo { width: auto; height: 64px; margin-bottom: 14px; }
  .fusszeile__spalten { grid-template-columns: 1fr; gap: 24px; }
  .fusszeile__recht {
    display: block;
    margin-top: 8px;
    padding-top: 18px;
    line-height: 1.7;
  }
  .fusszeile__recht nav { display: block; margin-top: 4px; }
}