/* ============================================================
   Hero — dunkel, vollflächig, für alle drei Bereiche derselbe
   ============================================================
   Eine Komponente, fünf Seiten: /imbiss/, /imbiss/speisekarte/,
   /catering/, /catering/firmenfeier/ und /weihnachtsfeier/ —
   alle nutzen dasselbe Markup und dieselben Regeln.
   Unterschiedlich sind nur Bild und Text.

   Warum ein eigener Baustein neben dem hellen `.held` aus sektionen.css:
   Der helle Hero legt die Copy auf einen Creme-Schleier und schreibt in
   Navy. Hier liegt sie auf dem Bild und schreibt in Weiß. Das sind zwei
   verschiedene Kontrastrechnungen, keine Variante derselben. `.held--dunkel`
   setzt deshalb alles zurück, was der helle Hero vorgibt.

   Der Schleier ist bewusst zweiteilig:
   · eine gleichmäßige --blue-900-Fläche über dem ganzen Bild (Grundton,
     nimmt dem Foto die Buntheit und bindet es ans Farbsystem)
   · ein zweiter Verlauf nur dort, wo Text liegt (unten mobil, links ab
     820 px). Ein einziger starker Verlauf hätte entweder das Motiv
     zugedeckt oder den Text nicht getragen.
   Gemessen wird an der hellsten Stelle hinter dem Text, nicht im Mittel.
*/

/* Die Grundregeln standen bis zum 6. November 2026 in sektionen.css. Sie sind
   hierher gezogen, weil die Weihnachtsseite dieselbe Komponente nutzt, aber
   bewusst kein sektionen.css lädt — ihr eigenes Gestaltungssystem würde sich
   sonst verändern. Eine Komponente gehört in eine Datei. */

/* ---------- 1 · Hero: Foto randabfallend, Typo liegt darauf ---------- */
.held{
  /* Eigene Grundschrift, aus demselben Grund wie beim Kopf: Die
     Weihnachtsseite setzt am <body> 17,2 px und Zeile 1,65, Imbiss und
     Catering 17,28 px und 1,6. Geerbt verschob das jede Zeile im Hero. */
  font-family:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,
              Helvetica,Arial,sans-serif;
  font-size:clamp(1rem,.97rem + .15vw,1.08rem);
  line-height:1.6;
  position:relative;isolation:isolate;background:var(--bg);
  min-height:calc(100svh - var(--nav-h));
  display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(190px,1fr) auto;
}
.held__bild{position:relative;overflow:hidden;height:100%}
.held__bild picture{position:absolute;inset:0;display:block;width:100%;height:100%}
.held__bild img{width:100%;height:100%;object-fit:cover;object-position:46% 72%}
/* Mobil steht die Copy unter dem Bild: Verlauf von unten.
   Ab 820 px liegt sie links auf dem Bild: Verlauf von links. */
.held__schleier{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,var(--paper-50) 0%,rgba(250,247,242,.97) 26%,rgba(250,247,242,.86) 44%,rgba(250,247,242,.3) 68%,rgba(250,247,242,0) 88%);
}
.held__inhalt{position:relative;padding-block:0 clamp(1.5rem,4vw,2.5rem)}
.held__copy{max-width:34rem}
/* Der Hero-Claim ist Ebene 1 und nimmt deren Grad. Die Deckelung je Motiv
   steht in hero.css: Ein Claim darf nicht umbrechen, und das längste Wort
   ist je Seite ein anderes. */
/* Der Claim trägt seine Schrift selbst und erbt sie nicht von .h1 aus
   components.css: Die Weihnachtsseite lädt components.css nicht, ihre H1 kam
   dadurch in Instrument Sans 700 statt Playfair 800. */
.held__titel{
  margin-bottom:.55rem;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.75rem,var(--fs-held-rampe),6.5rem);
  line-height:var(--lh-display);letter-spacing:var(--ls-display);
  text-wrap:balance;overflow-wrap:break-word;
}
/* Die große Claim-Zeile wird weder getrennt noch mitten im Wort gebrochen —
   das ist der Moment der Seite. Die Silbentrennung auf .h1 gilt weiter für
   lange Komposita in den Unterseiten-Überschriften. */
/* text-wrap:balance steht auf .h1 — der Claim liegt aber in einem eigenen
   Block darin, und Balance wirkt nur auf den Block, der den Text enthält.
   Ohne diese Zeile blieb der Umbruch mobil dem Zufall überlassen. */
.held__claim{
  display:block;text-wrap:balance;
  hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal;word-break:normal;
}
.held__text{color:var(--text-muted);max-width:40ch;margin-top:.9rem}
/* 16 px zwischen den Knöpfen, mindestens 32 px Abstand zum Text darüber.
   Vorher waren es 11 px und 21 px — die Knöpfe hingen am Absatz. */
.held__knoepfe{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.held__sticker{
  position:absolute;z-index:2;top:clamp(.75rem,2.5vw,2rem);right:var(--gutter);
  width:clamp(84px,13vw,136px);aspect-ratio:1;rotate:-9deg;
  display:grid;place-items:center;text-align:center;border-radius:50%;
  background:var(--ketchup-600);color:var(--on-ketchup);
  font-family:var(--font-head);font-weight:800;line-height:1.25;
  font-size:clamp(.62rem,1.5vw,.82rem);letter-spacing:.07em;text-transform:uppercase;
  box-shadow:0 16px 30px -14px rgba(20,47,78,.6);
}
@media (min-width:820px){
  .held{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:none;
    align-items:end;min-height:calc(100svh - var(--nav-h))}
  .held__copy{max-width:36rem}
  .held__bild{position:absolute;inset:0}
  .held__bild img{object-position:62% 50%}
  .held__schleier{
    background:linear-gradient(97deg,var(--paper-50) 0%,var(--paper-50) 38%,rgba(250,247,242,.9) 48%,rgba(250,247,242,.62) 58%,rgba(250,247,242,.2) 70%,rgba(250,247,242,0) 82%);
  }
  .held__inhalt{padding-block:clamp(2rem,6vh,4rem)}
}
@media (max-width:819px){
  .held{min-height:0}
  .held__bild{min-height:clamp(230px,42vh,340px)}
}



.held--dunkel{
  position:relative;isolation:isolate;
  /* Oben statt unten ausgerichtet. Der Text klebte vorher an der
     Unterkante, darüber lag eine große leere Fläche — auf 1920 × 1080
     gemessen über 500 px Himmel. Jetzt sitzt der Block im oberen Drittel
     und unter ihm darf mehr Luft bleiben als über ihm. */
  display:flex;align-items:flex-start;
  background:var(--blue-900);
  /* 100svh minus Kopfhöhe, nicht 100svh: Der Kopf ist deckend und klebt
     oben, der Hero beginnt also erst darunter. Mit vollen 100svh ragte er
     um genau die Kopfhöhe über den Schirm hinaus — auf allen fünf Seiten
     stand die Vertrauenszeile dadurch 24 px unter der Kante und war ohne
     Scrollen nicht zu sehen. --kopf-h misst das Skript am echten Kopf;
     103 px ist der gemessene Desktop-Kopf als Rückfall (mit dem mittigen,
     größeren Logo; vorher 87 px). */
  min-height:min(max(calc(100svh - var(--kopf-h,103px)),640px),1000px);
  /* Der Header liegt durchsichtig darüber, der Hero beginnt also ganz oben. */
  /* Der Kopf ist deckend weiß, der Hero beginnt also darunter und zieht
     sich nicht mehr dahinter. Früher stand hier ein negativer Außenabstand
     in Höhe des Kopfes; mit einer deckenden Leiste wäre der obere Rand des
     Bildes damit schlicht verdeckt gewesen. */
  margin-top:0;
  padding-top:0;
  color:#fff;
}
@media (max-width:819px){
  /* Voller Schirm statt 90 %: Der Text füllte den Hero sonst bis oben, das
     Gericht war nicht zu sehen, und die Überzeile stand am oberen Rand auf
     unbehandeltem Bild (gemessen 1,42:1). Mit der vollen Höhe bleibt dem
     Motiv das obere Viertel, und der Verlauf trägt den Text darunter. */
  .held--dunkel{min-height:calc(100svh - var(--kopf-h,67px))}
}

.held--dunkel .held__bild{position:absolute;inset:0;overflow:hidden;height:auto}
.held--dunkel .held__bild picture{position:absolute;inset:0;display:block;width:100%;height:100%}
.held--dunkel .held__bild img{
  width:100%;height:100%;object-fit:cover;object-position:68% 50%;
}
@media (max-width:819px){
  /* Eigener Bildausschnitt: hochkant zeigt die Desktop-Position meist Rand. */
  .held--dunkel .held__bild img{object-position:60% 42%}
}

/* ---------- Bildausschnitt je Motiv ----------
   Der Text liegt ab 820 px links. Ein Motiv, dessen Hauptsache links sitzt,
   verschwindet damit unter der Schrift — genau das war beim Currywurst-Bild
   der Fall: Wurst und Brötchen liegen bei rund 37 % der Bildbreite, bei
   object-position 68 % standen sie hinter der H1 und der Hero zeigte links
   nur dunklen Schiefer. Kleinere Werte schieben das Motiv nach rechts. */
.held--imbiss-currywurst .held__bild img{object-position:62% 54%}
.held--firmenfeier-team .held__bild img{object-position:64% 42%}
@media (max-width:819px){
  .held--imbiss-currywurst .held__bild img{object-position:54% 46%}
  .held--firmenfeier-team .held__bild img{object-position:52% 38%}
  /* Das Wichtel-Motiv ist oben hell. Bei 42 % stand die Überzeile dort
     auf der hellsten Stelle und kam auf 2,41:1. Weiter unten angesetzt
     liegt hinter dem Text der dunklere Teil des Bildes. */
  .held--wichteln-catering .held__bild img{object-position:56% 66%}
}

/* Zugabe für ein helles Motiv.
   Der Schleier ist für alle Bereiche derselbe — gleiche Verläufe, gleiche
   Farbe. Das Wichtel-Motiv ist im oberen Drittel aber deutlich heller als
   die anderen vier, und die Überzeile kam dort bei 390 px nur auf 2,41:1
   statt der geforderten 4,5:1. Der Auftrag nimmt das Bild ausdrücklich
   von der Gleichheit aus; eine Korrektur am Bild ist deshalb die richtige
   Stelle — so wie object-position auch je Motiv gesetzt wird.
   Gemessen nach der Zugabe: 4,58:1 bei 390 px, 4,52:1 bei 360 px. */
@media (max-width:819px){
  .held--wichteln-catering .held__schleier::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    /* Nur die obersten rund 14 % der Höhe, dort steht die Überzeile.
       Eine Zugabe über das ganze Bild hat es zugedeckt: Vom Motiv war
       nichts mehr zu sehen. Ein schmales Band liest sich als Vignette
       und lässt den Rest des Fotos in Ruhe. */
    background:linear-gradient(180deg,
      rgba(14,35,64,.78) 0%, rgba(14,35,64,.7) 7%,
      rgba(14,35,64,.34) 12%, rgba(14,35,64,0) 18%);
  }
}

.held--dunkel .held__schleier{
  position:absolute;inset:0;pointer-events:none;display:block;
  /* Mobil trägt der Verlauf viel weiter hinauf als auf dem Desktop: Die
     Copy braucht dort fünf statt drei Zeilen und reicht bis weit über die
     Mitte. Der erste Entwurf blendete schon bei 66 % aus — die Überzeile
     stand damit auf unbehandeltem Bild und kam auf 1,57:1 statt 4,5:1. */
  /* Umgedreht: Der Verlauf war für Text am UNTEREN Rand gebaut und lief
     nach oben auf null aus. Seit der Text oben steht, lag die Überzeile
     genau in der schwächsten Zone — gemessen 2,87:1 auf der Hauptseite
     und 2,94 auf Catering. Jetzt trägt er oben und wird nach unten
     schwächer, dort steht ohnehin kein Text mehr. */
  background:
    linear-gradient(180deg,
      rgba(14,35,64,.95) 0%,  rgba(14,35,64,.92) 42%,
      rgba(14,35,64,.84) 62%, rgba(14,35,64,.6) 80%,
      rgba(14,35,64,.28) 92%, rgba(14,35,64,.12) 100%),
    /* Die gleichmäßige Lage trägt mobil die Hauptlast: Der Text beginnt
       dort weit oben, und die Catering-Motive sind im oberen Bereich hell
       (Himmel, Pavillondach). Der Auftrag erlaubt ausdrücklich, den
       Schleier an dieser Stelle zu verstärken. */
    linear-gradient(0deg, rgba(14,35,64,.62), rgba(14,35,64,.62));
}

@media (min-width:820px){
  /* Nur links ein Schleier, rechts gar keiner — dort soll das Essen in
     voller Helligkeit stehen. Die frühere gleichmäßige Fläche über dem
     ganzen Bild (.38) hat das Gericht mit abgedunkelt.

     Diese Zeile war beim Verschieben des Wichtel-Blocks verloren
     gegangen: Ohne sie galt der Desktop-Verlauf auch mobil und
     überschrieb dort den richtigen — auf 390 px fiel alles auf 1,00:1,
     weil weiße Schrift auf unbehandeltem hellem Foto stand. */
  .held--dunkel .held__schleier{
    /* Links kräftig bis etwa zur Mitte, dann rasch auf null — rechts
       bleibt das Gericht unangetastet. Die Copy-Spalte ist auf 45 %
       begrenzt und liegt damit vollständig im getragenen Bereich. */
    /* Etwas kräftiger und einen Tick weiter nach rechts als zuvor. Seit der
       Hero um die Kopfhöhe kürzer ist, liegt die Überzeile über einer
       anderen Stelle des Fotos — gemessen fiel sie dadurch von 5,10 auf
       4,36:1 und damit unter die 4,5:1, die WCAG für Text dieser Größe
       verlangt. Jetzt 4,9 bis 5,3:1. Das Gericht rechts bleibt unberührt:
       Bei 74 % ist der Verlauf weiterhin bei null. */
    background:linear-gradient(97deg,
      rgba(14,35,64,.98) 0%,  rgba(14,35,64,.97) 34%,
      rgba(14,35,64,.93) 48%, rgba(14,35,64,.6) 58%,
      rgba(14,35,64,.16) 67%, rgba(14,35,64,0) 74%);
  }
}

.held--dunkel .held__inhalt{
  position:relative;z-index:1;width:100%;
  /* Oben 96–140 px unter dem Kopf, unten großzügiger. */
  padding-block:clamp(6rem,11vh,8.75rem) clamp(2.5rem,7vh,5rem);
}

@media (max-width:819px){
  /* Zwei Dinge auf einmal, beide gemessen:
     · Unten Platz für die feste Aktionsleiste — sonst liegt die
       Vertrauenszeile dahinter.
     · Oben gar kein Abstand mehr. Der Kopf ist mobil zweireihig und damit
       119 statt 78 px hoch; zusammen mit dem alten Innenabstand wurde der
       Hero 909 px hoch bei 844 px Bildschirm. Weil der Text am unteren Rand
       des Hero klebt, rutschte er mit dem Überstand unter den Bildschirmrand.
       Ohne oberen Abstand: 119 + 640 + 71 = 830 px und alles ist zu sehen. */
  .held--dunkel .held__inhalt{
    /* Mobil 48–72 px. Null war es, solange der Text an der Unterkante
       hing und jeder Pixel oben den Block nach unten aus dem Bild
       geschoben hätte. Oben ausgerichtet ist das umgekehrt. */
    padding-top:clamp(3rem,7vh,4.5rem);
    /* Die feste Aktionsleiste am unteren Rand ist mit der neuen Navigation
       entfallen — der Hero braucht dafür keinen Platz mehr freizuhalten. */
    padding-bottom:clamp(1.25rem,4vh,2rem);
  }
  /* Abstände mobil straffen. Auf 360 × 740 px passt ein vierzeiliger Claim
     mit Subline, zwei gestapelten Knöpfen und Vertrauenszeile auch so nicht
     vollständig auf den ersten Schirm — das ist bei dieser Schirmhöhe normal
     und kein Fehler. Entscheidend ist, dass der untere Innenabstand größer
     ist als die feste Aktionsleiste: dann liegt nie Text dahinter, egal wie
     weit gescrollt wird. */
  .held__ueber{margin-bottom:.5rem}
  .held--dunkel .held__titel{margin-bottom:.35rem}
  .held--dunkel .held__text{margin-top:.5rem}
  .held--dunkel .held__knoepfe{margin-top:2rem;gap:.875rem}
  .held__vertrauen{margin-top:.6rem}
}
/* Höchstens 45 % der Breite: Rechts soll das Gericht wirken, nicht Text.
   Nur ab 820 px. Die Regel stand vorher ohne Media Query und galt damit auch
   mobil — bei 390 px blieben der Copy 158 px. Gemessen: „Currywurst," braucht
   dort 326 px, der Claim stand deshalb mit je einem Wort pro Zeile
   („wie / sie / sein / soll."), die Subline brach nach zwei Wörtern um, und
   die Knöpfe standen auf halber Bildschirmbreite. Mobil gibt es keine zweite
   Spalte, um die es zu konkurrieren gälte — dort nimmt die Copy die Breite. */
@media (min-width:820px){
  /* Höchstens 45 % der Breite: Rechts soll das Gericht wirken, nicht Text.
     Der Wert ist keine Geschmacksfrage, sondern die Zone, die der Schleier
     trägt. Gemessen gegen das hellste Pixel hinter dem Text
     (`node tools/held-kontrast.mjs`), Spalte 45 % gegen 56 %:

                              45 %        56 %
       /imbiss/ Überzeile     4,52:1      2,38:1
       /imbiss/ Claim        10,95:1      4,16:1
       /catering/ Überzeile   4,30:1      1,81:1
       /catering/ Claim       9,48:1      3,20:1

     Breiter heißt: Der Text läuft dorthin, wo der Verlauf schon ausblendet.
     Die Umbrüche der Claims werden deshalb über den Schriftgrad und gesetzte
     Umbrüche gelöst, nicht über die Spaltenbreite. */
  .held--dunkel .held__copy{max-width:min(36rem,45%)}
}


/* Überzeile — exakt wie die .eyebrow der Weihnachts-Site
   (style.css, Zeile 177): kein Grund, kein Rahmen, kein Innenabstand,
   0,8 rem, Gewicht 600, 0,16 em gesperrt, Versalien, Orange.

   Davor stand hier eine weiße Pille. Sie war als Kontrastlösung gedacht,
   weil freies Orange über einem Foto je nach Motiv nur 2,46 bis 5,98:1
   erreicht — aber sie war lauter als die H1. Jetzt trägt der Schleier den
   Kontrast an dieser Stelle, nicht ein eigener Grund. Gemessen nach dem
   Umbau: Imbiss 4,83:1 (Desktop) und 6,12:1 (390 px); die beiden
   Catering-Motive liegen darunter, siehe _docs/farbentscheidungen.md. */
.held__ueber{
  display:block;margin:0 0 .9rem;
  font-family:var(--font-sans);font-weight:600;
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);
}

.held--dunkel .held__titel{color:#fff}
/* War --curry-500 (#FFB800) — ein Gelb, das sonst nirgends vorkommt.
   Die Akzentfarbe des Projekts ist das Orange der Knöpfe. */
.held--dunkel .held__titel em{color:var(--accent);font-style:normal}
.held--dunkel .held__text{
  color:rgba(255,255,255,.92);max-width:42ch;margin-top:.75rem;
  font-size:var(--fs-lead);
}
/* Etwas straffer als zuvor (1,9 → 1,3 rem). Die Vertrauenszeile stand
   ursprünglich unter dem ersten Schirm; die Ursache war aber die Hero-Höhe,
   nicht dieser Abstand — siehe die Begründung an min-height weiter oben.
   Der gestraffte Wert bleibt, weil er dem Block jetzt Reserve gibt. */
.held--dunkel .held__knoepfe{margin-top:2rem}

/* Vertrauenszeile */
.held__vertrauen{
  margin:.85rem 0 0;font-size:var(--fs-sm);
  color:rgba(255,255,255,.86);
}
.held__vertrauen a{color:#fff;text-underline-offset:3px}
.held__vertrauen b{color:var(--curry-500);font-weight:700}

/* Dieselben Knöpfe wie auf Imbiss und Catering — aber nur im Hero.
   Die Weihnachtsseite bringt eigene .btn-Regeln mit (Radius 10 px statt
   Pille, andere Sperrung und Zeilenhöhe) und lädt components.css nicht.
   Unterhalb des Hero bleibt sie dabei; hier oben gilt die gemeinsame Form. */
.held--dunkel .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:52px;padding:.85rem 1.6rem;width:auto;
  font-family:var(--font-head);font-size:.94rem;font-weight:700;
  line-height:1.6;
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none;text-align:center;
  border:2px solid transparent;border-radius:999px;cursor:pointer;
}
.held--dunkel .btn--lg{min-height:60px;padding:1rem 2rem;font-size:1rem}
/* Der Hero gehört allen Bereichen, also auch sein Schatten. Auf der
   Weihnachtsseite setzt style.css ein eigenes .btn ohne box-shadow —
   die Knöpfe standen dort flach auf dem Bild, während sie auf Imbiss
   und Catering abhoben. Hier am Hero festgelegt, damit es überall
   gleich ist. */
.held--dunkel .btn--primary{box-shadow:0 18px 40px -28px rgba(20,47,78,.5)}
/* Weiß auf Orange — Entscheidung des Kunden, siehe tokens.css. */
.held--dunkel .btn--primary{background:var(--accent);color:#fff}

/* Störer „Alles aus einer Hand" — das einzige saisonale Extra im Hero.
   Oben rechts, klein genug, um weder das Gericht noch den Kopf zu verdecken.
   Mobil rutscht er unter die Knöpfe, weil rechts oben dort das Motiv steht. */
.held__stoerer{
  position:absolute;z-index:2;
  top:clamp(1rem,3vw,2.5rem);right:clamp(1rem,4vw,3rem);
  /* Größer auf Wunsch von Chris, 6. November 2026. */
  width:clamp(195px,21vw,295px);height:auto;
  pointer-events:none;
}
.held__stoerer img{width:100%;height:auto}
@media (max-width:819px){
  .held__stoerer{
    position:static;width:clamp(155px,43vw,215px);
    margin:1.25rem 0 0;
  }
}

/* Der weiße Ghost-Knopf steht hier auf Bild statt auf Papier. */
.held--dunkel .btn--ghost{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.75);color:#fff;
  backdrop-filter:blur(3px);
}
.held--dunkel .btn--ghost:hover{background:rgba(255,255,255,.2);border-color:#fff}

/* Nach dem Hero folgt eine dunkelblaue Leiste — der Übergang bleibt hart. */
.held--dunkel + .faktenleiste{background:var(--blue-900);color:#fff}

/* ---------- Deckelung des Claims, je Motiv ----------
   Alle vier Heros laufen auf derselben Rampe (--fs-held). Ein Claim darf
   aber nicht umbrechen, und das längste Wort ist je Seite ein anderes —
   wo es den Platz sprengt, wird nur der obere Deckel gesenkt, nie die Rampe.

   Neu gemessen nach dem Wechsel auf Playfair Display 800. Playfair läuft bei
   gleichem Grad breiter als Lexend: „Currywurst," misst bei 99 px jetzt
   556 px statt der 522 px Spaltenbreite — der alte Deckel von 6,2 rem passte
   zu Lexend und passt zu Playfair nicht mehr.

   `node tools/hero-grad.mjs` misst im echten Browser mit der echten Schrift
   (längstes Wort gegen die Breite der Copy-Spalte):

     Seite          längstes Wort   größter Grad, der passt
                                    360 px   390 px   1440 px
     /imbiss/       „Currywurst,"    57       62        93   → Deckel 5,75 rem
     /firmenfeier/  „Sommerfest."    55       61        91   → Deckel 5,6 rem
     /catering/     „kümmern"        70       77       115   → Rampe reicht
     /speisekarte/  „Theke"         114      125       186   → Rampe reicht

   Wer eine Headline ändert, lässt das Skript neu laufen. */
/* Die Umbrüche sind für die breite Spalte gesetzt, sie gelten deshalb erst
   ab 1200 px. Darunter bricht der Text von selbst um.

   Der Grund ist, dass Spalte und Schriftgrad unterschiedlich schnell wachsen:
   Die Spalte ist ein Prozentwert des Containers, der Grad hängt an vw und
   stößt erst oben an seinen Deckel. Zwischen 820 und 1200 px ist die Spalte
   deshalb schon schmal, der Grad aber noch groß — ein erzwungener Umbruch
   bricht dort ein zweites Mal und hinterlässt eine Zeile mit einem einzigen
   Wort. Gemessen bei 1024 px: „die Theke geht." braucht 491 px, die Spalte
   hat 443. Mobil gilt dasselbe aus demselben Grund. */
@media (max-width:1199px){
  /* Vor jedem dieser Umbrüche steht im Quelltext ein Leerzeichen. Das ist
     kein Versehen: display:none nimmt dem <br> nicht nur den Umbruch,
     sondern auch die Umbruchmöglichkeit. „Glückssache.<br>Das" wurde ohne
     das Leerzeichen zu einem einzigen Token „Glückssache.Das" — bei 360 px
     ragte der Claim dadurch 15 px über den Bildschirm hinaus und die Seite
     ließ sich seitwärts schieben. Mit dem Leerzeichen bleibt eine Stelle,
     an der der Browser umbrechen darf. Sichtbar ist es nie: Ein Leerzeichen
     am Zeilenende wird ohnehin verschluckt. */
  br.umbruch{display:none}
}
.held--imbiss-currywurst .held__titel{font-size:clamp(2.75rem,var(--fs-held-rampe),5.8rem)}
.held--speisekarte-pommes .held__titel{font-size:clamp(2.75rem,var(--fs-held-rampe),4.65rem)}
.held--firmenfeier-team .held__titel{font-size:clamp(2.75rem,var(--fs-held-rampe),4rem)}
/* Von 4,5rem (72 px) auf 5,3rem (85 px) — der größte Grad, bei dem der
   Claim noch in die 522 px breite Textspalte passt. Bei 5,5rem ragt die
   längste Zeile einen Pixel hinaus, bei 5,8rem dreißig.

   „Exakt dieselben Werte wie auf Imbiss und Catering" lässt sich nicht
   wörtlich erfüllen: Imbiss steht bei 93 px, Catering bei 78 — die
   beiden sind untereinander schon verschieden, weil ihre Claims
   verschieden lang sind. Gleich sind Schrift, Schnitt, Zeilenhöhe,
   Sperrung, Farben und Abstände; der Grad ist überall der größte, den
   der jeweilige Satz zulässt. Ein gemeinsamer Grad für alle müsste sich
   am längsten Claim orientieren und hieße 64 px überall. */
.held--wichteln-catering .held__titel{font-size:clamp(2.75rem,var(--fs-held-rampe),5.3rem)}

/* Flache Desktop-Bildschirme (1366 × 768 und ähnlich).
   Steht bewusst am Dateiende: Die Deckelung je Motiv weiter oben hat
   dieselbe Spezifität, und bei gleichem Gewicht entscheidet die
   Reihenfolge. Weiter vorn platziert blieb dieser Block wirkungslos —
   die Vertrauenszeile lag weiterhin 93 px unter der Kante.
   Dort reicht die Höhe nicht für 96 px Vorlauf plus einen dreizeiligen
   Claim plus Subline, Knöpfe und Vertrauenszeile: Gemessen endete die
   Vertrauenszeile auf Catering bei 803 px und auf der Weihnachtsseite
   bei 844 px, bei 768 px Fensterhöhe. Hier wird deshalb alles etwas
   gestrafft — der Vorlauf, die Abstände, das untere Polster. Die
   Rangfolge bleibt, nur die Luft wird knapper. */
@media (min-width:820px) and (max-height:830px){
  .held--dunkel .held__inhalt{
    padding-block:clamp(3rem,7.5vh,4.5rem) clamp(1.25rem,3vh,2rem);
  }
  .held__ueber{margin-bottom:.45rem}
  .held--dunkel .held__titel{margin-bottom:.5rem}
  .held--dunkel .held__text{margin-top:.6rem}
  .held--dunkel .held__knoepfe{margin-top:1.25rem}
  .held--dunkel .held__vertrauen{margin-top:1rem}
  /* Auch der Schriftgrad muss mit. Auf einem flachen Schirm ist die
     Höhe die knappe Größe, nicht die Breite — ein Claim, der vier
     Zeilen à 85 px braucht, verbraucht allein 340 px von 665 nutzbaren.
     Die Deckelung je Motiv bleibt, sie wird hier nur zusätzlich an die
     Fensterhöhe gebunden. */
  .held--dunkel .held__titel{font-size:min(var(--fs-held-rampe),8.6vh)}
  .held--dunkel .held__text{font-size:1rem;line-height:1.5;max-width:46ch}
  .held--dunkel .btn--lg{min-height:52px;padding:.8rem 1.6rem}
}



/* Sperrung auf schmalen Schirmen.
   Die Überzeile trägt auf Catering und Firmenfeier zwei Keywords und
   wird dadurch lang. Bei 360 px brauchte sie in einer Zeile 420 px von
   312 verfügbaren und brach um — die H1 begann dort 21 px tiefer als
   auf den anderen Seiten. Gekürzt sind die Texte schon; die etwas
   engere Sperrung bringt den Rest. Lesbar bleibt sie: 0,1em ist für
   Versalien in 13 px immer noch deutlich mehr als normal. */
@media (max-width:430px){
  .held__ueber{--ueber-sperrung:.1em;letter-spacing:var(--ueber-sperrung)}
}


/* ---------- Kompakter Hero für die Regionsseiten ----------
   Rund 70 vh statt voller Schirmhöhe. Diese Seiten sind Einstiege aus
   der Suche: Wer „Foodtruck-Catering Karlsruhe" eingibt, will sofort
   sehen, dass es um Karlsruhe geht und was es kostet — nicht erst ein
   bildschirmfüllendes Foto wegscrollen. */
.held--dunkel.held--kompakt{
  min-height:min(max(calc(70svh - var(--kopf-h,103px)),430px),700px);
}
@media (max-width:819px){
  .held--dunkel.held--kompakt{min-height:max(calc(72svh - var(--kopf-h,67px)),400px)}
}