/* Genuss Atelier Voehringen — desktop.css
   Besitzer: kleim-desktop (Manni). Nur Breitenabfragen ab 1200px.
   - Satzspiegel prozentual ueber --wrapw (stil.css nutzt es in .wrap und
     .held-in), vw-Anteil sinkt erst ab 2400 -> keine schmale Insel.
   - Grundschrift waechst ueber html{font-size}, weil stil.css fast alles
     in rem setzt; px-Deckel der Display-Groessen ab 1600 neu.
   - Bildspalten wachsen mit, statt bei 400px stehen zu bleiben.
   - Randlose Haelften (Anfragen, Haltung): Text an die Satzspiegelkante.
   - Galerie: sechs Spuren auf allen Breiten ab 1200 (Auswahl 18 Zellen,
     Aufklapper 24), Begruendung am Block. */

/* ---------- 1200+ ---------- */
@media (min-width:1200px){
  :root{
    --wrapw:92vw;
    --rand:max(var(--sp),calc(50vw - var(--wrapw)/2)); /* Abstand Fensterkante -> Satzspiegel */
  }
  html{font-size:clamp(16px,calc(.55vw + 9.6px),22px)}  /* Tim 01.10.: Text bisschen groesser */
  body{font-size:1.0625rem}

  /* Kopfleiste: Navigation steht voll, das Menueblatt ist hier doppelt */
  .kopf-menue{display:none}

  /* Held: Einleitung waechst mit (Tim: ab breit mind. ~24px) */
  .held-unter{font-size:clamp(1.28rem,1.45vw,1.8rem)}
  .held-knoepfe .knopf{font-size:1.06rem;padding:14px 26px}

  /* Bildspalten wachsen mit dem Satzspiegel */
  .shop-bild{flex:0 1 clamp(400px,29vw,780px)}
  .pasta-bild{flex:0 1 clamp(300px,22vw,560px)}
  .seitenkopf-bild{flex:0 1 clamp(420px,32vw,760px)}
  .gutschein-karte{flex:0 1 clamp(400px,30vw,720px)}

  /* Randlose Haelften: Textkante = Satzspiegelkante, Inhalt fuellt die Spalte */
  .anfragen-text{padding-left:clamp(48px,5vw,120px);padding-right:var(--rand)}
  .haltung-text{padding-left:var(--rand);padding-right:clamp(48px,5vw,120px)}
  .anfragen-wege,.haltung-liste{max-width:none}

  /* Galerie: sechs Spuren ab 1200. Auswahl = 15 Fotos, jedes 7. hoch
     (1, 8, 15) = 18 Zellen = 6x3. Das 15. sass sonst allein in Zeile 3/4
     und liess rechts unten eine Zelle leer -> fest in Spalte 6, Zeile 2-3.
     Aufklapper (24 Fotos): ohne Hochkacheln, 24 = 6x4 geht glatt auf. */
  .gal-raster{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:dense;gap:14px}
  .gal-raster:not(.gal-mehr *) > .gal-item:nth-child(15){grid-column:6;grid-row:2 / span 2}
  .gal-mehr .gal-item:nth-child(7n+1){grid-row:auto}
  .gal-mehr .gal-item:nth-child(7n+1) .gal-foto,.gal-mehr .gal-item:nth-child(7n+1) .gal-foto img{height:auto}

  /* Catering-Buchung: Foto fuellt die Kopfspalte bis zur Formularkante
     (vorher 420px-Deckel, rechts daneben und darunter leer); Felder auf
     sechs Spuren, damit Name + Kontakt die Zeile schliessen statt eine
     Drittelzelle leer zu lassen. */
  .buchung-in{flex-wrap:nowrap;align-items:stretch}
  .buchung-kopf{display:flex;flex-direction:column}
  .buchung-foto{flex:1 1 auto;position:relative;min-height:260px;margin-top:28px}
  .buchung-foto img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;margin-top:0}
  .buchung-form .felder{grid-template-columns:repeat(6,minmax(0,1fr))}
  .buchung-form .feld{grid-column:span 2}
  .buchung-form .feld-breit{grid-column:1 / -1}
  .buchung-form .feld:nth-last-child(-n+2):not(.feld-breit){grid-column:span 3}

  /* Lesetext neben grossen Ueberschriften: groesser, Tim "lieber zu gross" */
  .lead,.saison-satz,.pasta-satz,.anfragen-text > p:not(.kicker),.anfrage-kopf > p:not(.kicker){font-size:clamp(1.2rem,1.3vw,1.65rem)}

  /* Saisonband (Tim 02.10.: Kreis weg, "verschoben"): 4:5-Bild auf der
     Satzspiegelkante, schmaler als zuvor (34vw machte es 816px hoch bei 1920,
     fast ein ganzer Schirm), Textspalte mittig daneben ohne Umbruch der Zeile */
  .saison-in{flex-wrap:nowrap;align-items:center}
  .saison-bild{flex:0 0 clamp(380px,26vw,720px)}
  .saison-text{flex:1 1 0}
  .saison-satz{max-width:50ch}

  /* Verschenken (Tim 02.10.: Schrift dicker, mittig zum Korbfoto) */
  .shop-in{flex-wrap:nowrap;align-items:center}
  .shop-text{flex:1 1 0}
  .shop-gutschein{font-size:clamp(1.2rem,1.3vw,1.65rem);max-width:46ch;margin:26px 0 32px}
  .preis-leiste small{font-size:1.05rem}
  .sek-saison .h2{font-size:clamp(58px,5vw,150px)}
  .saison-tafel li{font-size:1.06rem;padding:14px 24px}

  /* Pastakurs-Karten: Foto bestimmt die Zeilenhoehe nicht mehr,
     sonst standen beide Karten halb leer neben dem 4:5-Foto */
  .kurs-bild{position:relative;min-height:320px}
  .kurs-foto{position:absolute;inset:0}
  .kurs-foto img{min-height:0;height:100%}

  /* Anfrage (Kurse) und Bewerbung (Karriere): drei Spalten Text | Foto | Formular.
     Vorher Text + 380px-Foto links, kuerzeres Formular rechts: Loch rechts
     neben dem Foto und unter dem Formular. */
  .anfrage-in,.bewerbung-in{flex-wrap:nowrap;align-items:stretch}
  .anfrage-kopf,.bewerbung-text{flex:1.75 1 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.75fr);
    grid-template-rows:auto auto auto 1fr;column-gap:clamp(28px,3vw,64px);align-content:start}
  .anfrage-kopf > *,.bewerbung-text > *{grid-column:1}
  .anfrage-foto,.bewerbung-foto{grid-column:2;grid-row:1 / -1;position:relative;min-height:420px}
  .anfrage-foto img,.bewerbung-foto img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;margin-top:0}
  .anfrage-in > form,.bewerbung-in > form{flex:1.35 1 0}

  /* Ueber mich, Werdegang: Achse quer in drei Spuren statt einer
     56ch-Spalte, rechts davon stand ein Drittel der Sektion leer */
  .weg-in{display:grid;grid-template-columns:minmax(0,clamp(300px,22vw,560px)) minmax(0,1fr);align-items:center}
  .weg-achse{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,72px);padding:44px 0 0}
  .weg-achse::before{left:0;right:0;top:8px;bottom:auto;width:auto;height:2px}
  .weg-achse::after{left:0;top:8px;width:100%;height:2px;transform-origin:0 50%;transform:scaleX(var(--weg,1))}
  html.on .weg-achse::after{animation-name:weg-quer}
  .weg-punkt{padding-bottom:0}
  .weg-punkt::before{left:0;top:-45px}
  .weg-punkt p:not(.weg-jahr){max-width:none}
}
@keyframes weg-quer{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Kopfleiste mit Luft (Tim 01.10.: "nicht so gequetscht"): fuenf Punkte direkt,
   Galerie, Ueber mich, Kontakt ueber den Menue-Knopf */
@media (min-width:1200px){
  .kopf-in{gap:clamp(32px,2.6vw,56px)}
  .nav{gap:clamp(24px,2vw,40px)}
  .kopf-akt{gap:12px;align-items:stretch}  /* Menue-Knopf war 9px hoeher als die Knoepfe daneben */
  .kopf-menue{display:inline-flex}
}
@media (min-width:1200px) and (max-width:1439.98px){
  .marke-name small{display:none}
}
/* Unter 1366 reicht die Breite nicht fuer beide Kopfknoepfe mit Luft:
   Vorbestellen steht im Startbildschirm und oben im Menue */
@media (min-width:1200px) and (max-width:1365.98px){
  .kopf-vorbestellen{display:none}
}

/* ---------- 1440+ ---------- */
@media (min-width:1440px){
  :root{--wrapw:90vw}
}

/* ---------- 1600+: Display-Groessen ueber die alten px-Deckel ---------- */
@media (min-width:1600px){
  :root{--sek:clamp(100px,5.4vw,160px)}  /* --wrapw bleibt 90vw: 88vw liess 6 % Rand (satzspiegelrand) */
  .marke-bild img{height:56px}
  .h1{font-size:clamp(92px,5.8vw,156px)}
  .h2{font-size:clamp(58px,3.5vw,104px)}
  .held-signet{width:clamp(138px,7.4vw,210px)}
  .drei-text b{font-size:clamp(42px,2.4vw,72px)}
  .preis-leiste b{font-size:clamp(52px,2.9vw,84px)}
  .stufe-preis{font-size:clamp(48px,2.7vw,78px)}
  .gs-karte .gk-wert{font-size:clamp(64px,3.4vw,104px)}
  .weg-zeile{font-size:clamp(28px,1.6vw,44px)}
  .karriere-band b,.galerie-band b,.anfahrt-adr{font-size:clamp(32px,1.8vw,50px)}
  .korb-preis b{font-size:clamp(64px,3.6vw,104px)}
  .gk-wert{font-size:clamp(84px,4.6vw,132px)}
  .summe b{font-size:clamp(46px,2.6vw,72px)}
  .kurs-preis b{font-size:clamp(72px,4vw,116px)}
  .weg-jahr{font-size:clamp(42px,2.4vw,68px)}
  .eckdatum b{font-size:clamp(48px,2.7vw,78px)}
  .form-titel{font-size:2rem}
}

/* ---------- 2400+: Ultrawide, vw-Anteil sinkt ---------- */
/* Runde 3: 84vw liess bei 2560 8 % Rand (ausrichtung.js satzspiegelrand),
   3440 stand bei 12 %. Erst ab 32:9 bremst der Deckel bewusst. */
@media (min-width:2400px){
  :root{--wrapw:89vw}
}
@media (min-width:3000px){
  :root{--wrapw:min(86vw,3200px)}
}
@media (min-width:4200px){
  :root{--wrapw:min(70vw,3400px)}
}

/* Unterseiten-H1 zwischen 1200 und 1380: Mindestgroesse 92px brach "zusammen essen." (Pastakurse) in zwei Zeilen */
@media (min-width:1200px) and (max-width:1379.98px){
  .seitenkopf .h1{font-size:68px}
}

/* Bilder enden auf der Satzspiegelkante, nicht am Fensterrand
   (Tim 01.10.: "kleinen rand abstand … das es mehr matching aussieht") */
@media (min-width:1200px){
  .held-bild{margin-right:0}
  .hc-a,.hc-b{border-radius:var(--rad)}
  .anfragen-bild{margin:clamp(48px,4vw,96px) 0 clamp(48px,4vw,96px) var(--rand);border-radius:var(--rad);overflow:hidden}
  .haltung-bild{margin:clamp(48px,4vw,96px) var(--rand) clamp(48px,4vw,96px) 0;border-radius:var(--rad);overflow:hidden}
}

/* Display-Groessen, die stil.css mit eigener Spezifitaet deckelt */
@media (min-width:1600px){
  .pasta-kopf .h2{font-size:clamp(46px,3vw,104px)}
  .abend span{font-size:clamp(28px,1.6vw,46px)}
  .angebot-text h3{font-size:clamp(40px,2.3vw,66px)}
}

/* ---------- 2400+: Ultrawide, Schrift eine Stufe groesser ----------
   Bei 3440/5120 stand die Grundschrift auf dem 22px-Deckel neben
   2600-3000px breiten Bildflaechen (Tim: "Text auf dem Desktop eher eine
   Stufe groesser"). Waechst mit der Breite. Ein vh-Deckel liess bei
   3840x900 die Schrift auf 22px neben 3200px Satzspiegel (leerflaeche 57 %). */
@media (min-width:2400px){
  :root{--kopfh:88px}
  html{font-size:clamp(22px,calc(.42vw + 12px),34px)}
  .marke-bild img{height:66px}
  .h1{font-size:clamp(156px,4.6vw,230px)}
  .h2{font-size:clamp(104px,3.1vw,150px)}
  .pasta-kopf .h2{font-size:clamp(96px,2.8vw,136px)}
}

/* Ultrawide-Loecher (matrix.js leerflaeche, 01.10. Runde 3) */
@media (min-width:2400px){

  /* Kontakt, Zeiten | Anfahrt: das 3:2-Foto unter der Anfahrt machte die
     rechte Spalte doppelt so hoch wie die Wochentafel (25 %). Foto neben
     den Anfahrtstext, Hoehe aus dem Text. */
  #anfahrt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:clamp(36px,2.4vw,80px);align-content:start}
  #anfahrt > *{grid-column:1}
  #anfahrt > .anfahrt-foto{grid-column:2;grid-row:1 / span 6;position:relative;min-height:100%}
  #anfahrt > .anfahrt-foto img{position:absolute;inset:0;height:100%;aspect-ratio:auto;margin-top:0}

  /* Ueber mich, Werdegang: Kopfspalte 560px trug die 150px-H2 in fuenf
     Zeilen (723px), die Achse daneben 390px hoch. Kopfspalte waechst mit. */
  .weg-in{grid-template-columns:minmax(0,clamp(560px,27vw,1000px)) minmax(0,1fr)}
}


/* Ab 3000 (Satzspiegel 3200px): Stimmen-Zeile war 190px hoch neben einer
   500px hohen 260px-Notenspalte (leerflaeche 57 %, Kicker lief 11px aus);
   Wochentafel auf /kontakt/: 130px-Tagspalte zu schmal fuer "Donnerstag". */
@media (min-width:2400px){
  .zitat p{font-size:clamp(1.02rem,.5vw,1.45rem)}
  .zeiten-tafel div{grid-template-columns:minmax(0,7.5em) minmax(0,1fr)}
}

/* ---------- Startseite neu geordnet (02.10.2026, Young Serif statt Gloock) ----------
   Young Serif laeuft breiter: "Suess, salzig," braucht 5,71 x Schriftgroesse.
   Die Textspalte im Held bekommt deshalb ihre Breite aus der H1-Groesse
   (vorher 503px bei 1440 fuer 525px Zeile, bei 2560 858 fuer 890). */
@media (min-width:1200px){
  :root{--h1:clamp(44px,6.6vw,92px)}
  .held .h1{font-size:var(--h1)}
  .held-text{flex:0 0 calc(var(--h1) * 5.9)}

  /* Tisch reservieren: Textspalte endete bei 672px, Foto 420px breit am
     rechten Rand, dazwischen 276px leer. Foto nimmt 44 % und fuellt die
     Zeilenhoehe, die Zeitentafel die Textspalte. */
  .besuch-text{flex:1 1 0}
  .besuch-bild{flex:0 0 44%;position:relative;min-height:clamp(420px,30vw,900px)}
  .besuch-foto{position:absolute;inset:0}
  .besuch-foto img{height:100%;aspect-ratio:auto}
  .besuch-zeiten{max-width:none}

  /* Zeilen, die mit Young Serif nicht mehr in ihre Spalte passen
     (gemessen: Zeilenbreite / Schriftgroesse x Spaltenanteil am Fenster) */
  .sek-essen .h2{font-size:min(58px,3.85vw)}                   /* "Nicht schnell gemacht." 1280 */
  .pasta-kopf .h2{font-size:min(3vw,136px)}                   /* "Pasta selbst machen," 1280/2560 */
  .anfrage-kopf .h2{font-size:min(58px,3.9vw)}                /* "Ihre Gruppe" Spalte 24 vw */
  .bewerbung-text .h2{font-size:min(104px,2.75vw)}            /* "Was Sie erwartet" 8,63 em */
  .regal-kopf .h2{font-size:min(150px,3.3vw)}                 /* "Gepackt im Atelier" 9,11 em */

  /* Speisekarte (Seite): Fotos neben dem Kartenblatt etwas breiter,
     Hoehe kommt weiter aus dem Blatt (cover, sizes in px) */
  .karte-zeile-bild{flex:0 0 clamp(380px,30vw,900px)}
  /* Startseite: Kartenauszug immer zweispaltig, bei 1280 stand er einspaltig
     784px hoch neben 567px Kopf */
  .sek-karte .karte-blatt{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1380px) and (max-width:1599.98px){
  .seitenkopf .h1{font-size:min(92px,5.9vw)}                  /* "zusammen essen." 8,7 em in 53 vw */
}
@media (min-width:1600px){
  :root{--h1:clamp(92px,5.8vw,156px)}
}
@media (min-width:2400px){
  :root{--h1:clamp(156px,4.6vw,230px)}
  .zeiten-block .h2{font-size:min(104px,2.05vw)}              /* "Parken vor der Tuer" Spalte 19 vw */
}

/* Tim 02.10.2026: "aussieht als ob 50% der landingpage leer sind" — gemessen 120px Leerband je
   Abschnitt, Stimmen 37 %, Gutscheine 31 % Fuellgrad. Abstaende enger, Gutscheine dreispaltig. */
@media (min-width:1200px) and (max-width:1599.98px){
  :root{--sek:clamp(76px,5.6vw,92px)} /* ab 1600 gilt der Wert oben im 1600er-Block */
}
@media (min-width:1200px){
  .sek-stimmen{padding-block:clamp(44px,3.2vw,72px)}
  .gs-in{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr) minmax(0,.9fr);gap:clamp(36px,4vw,80px);align-items:center}
  .gs-karte{width:100%}
  .gs-schritte{flex-direction:column;align-items:flex-start;gap:20px;margin:0;padding-left:clamp(28px,3vw,56px);border-left:1px solid var(--linie)}
}

/* Pizza Giro: Foto unter dem Preis fuellt die Kopfspalte (fuellgrad 33 %, Tim 06.10.2026) */
@media (min-width:1200px){
  .giro-bild{display:block}
}

/* Fruehstueck und Getraenke: drei Spalten statt einer langen Liste (riesensektion 2547px, 09.10.2026) */
@media (min-width:1200px){
  #fruehstueck .karte-blatt-breit,#getraenke .karte-blatt-breit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,3vw,48px) clamp(36px,3.4vw,56px)}
  #fruehstueck .karte-blatt-breit .karte-gruppe + .karte-gruppe,#getraenke .karte-blatt-breit .karte-gruppe + .karte-gruppe{margin-top:0}
  #fruehstueck .karte-blatt-breit .karte-liste,#getraenke .karte-blatt-breit .karte-liste{columns:1}
  #fruehstueck .karte-legende{margin-top:18px;max-width:none}
}

/* Kartenbild mit vier Karten (Frühstück, Menü 1+2, Getränke): eine Reihe unter dem Text */
@media (min-width:1200px){
  .kartenbild-fotos{flex-basis:100%;grid-template-columns:repeat(4,minmax(0,1fr))}
  .ki-bild .ki-label{height:28px}
}