@font-face{font-family:'Bitter';font-weight:400;src:url(fonts/bitter-400.woff2) format('woff2');font-display:block;}
@font-face{font-family:'Bitter';font-weight:700;src:url(fonts/bitter-700.woff2) format('woff2');font-display:block;}
@font-face{font-family:'Bitter';font-weight:800;src:url(fonts/bitter-800.woff2) format('woff2');font-display:block;}
@font-face{font-family:'Caveat';font-weight:600;src:url(fonts/caveat-600.woff2) format('woff2');font-display:block;}
@font-face{font-family:'Source Sans 3';font-weight:400;src:url(fonts/sourcesans3-400.woff2) format('woff2');font-display:block;}
@font-face{font-family:'Source Sans 3';font-weight:500;src:url(fonts/sourcesans3-500.woff2) format('woff2');font-display:block;}
@font-face{font-family:'Source Sans 3';font-weight:600;src:url(fonts/sourcesans3-600.woff2) format('woff2');font-display:block;}
@font-face{font-family:'Source Sans 3';font-weight:700;src:url(fonts/sourcesans3-700.woff2) format('woff2');font-display:block;}
:root{
  --graublau:#424F5C; --wein:#C03C27; --weindunkel:#8E2B1B; --preisblau:#3F6491;
  --ocker:#9A5C00; --salbei:#5C6B51; --papier:#FCFAF5; --panel:#F7F3EB;
  --well:#F0EBE0; --rand:#EBE2CD; --text:#5a5246; --sek:#6A6360; --weiss:#FBFBF7;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
/* Seitengrund nach Styleguide 07: Korn über flachem Verlauf. Die Kachel wird
   übernommen, nicht nachgebaut (Deckung steckt in ihrem Alphakanal). */
body{font-family:'Source Sans 3',sans-serif;color:var(--text);line-height:1.55;
  background-color:#F7F3EB;
  background-image:url(putz-korn-256-16.png),
    linear-gradient(90deg,#F9F6EF 0%,#F7F3EB 46%,#F5F1E8 74%,#F3EFE6 100%);
  background-size:256px 256px,auto; background-repeat:repeat,no-repeat;}
img{max-width:100%;display:block;}
a{color:var(--preisblau);}
.wrap{max-width:1240px;margin:0 auto;padding:0 22px;}
/* Klassen, die zusätzlich .wrap tragen (.topbar, .hbi), setzen ihren Abstand nur oben
   und unten. Ein volles padding-Kurzformat würde den seitlichen Rand von .wrap löschen
   — es steht später und hat dieselbe Spezifität; der Text klebte dann am Fensterrand. */
h1,h2,h3{font-family:'Bitter',Georgia,serif;color:var(--graublau);letter-spacing:-.01em;}
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--wein);}
.hand{font:600 22px 'Caveat',cursive;color:var(--wein);}
.btn{display:inline-block;background:var(--wein);color:var(--weiss);text-decoration:none;font-weight:600;
  font-size:14.5px;padding:9px 16px;border-radius:5px;border:1.5px solid var(--wein);cursor:pointer;}
.btn:hover{background:var(--weindunkel);border-color:var(--weindunkel);}
.btn.ghost{background:transparent;color:var(--weindunkel);}
.btn.ghost:hover{background:var(--panel);}
.btn.blau{background:var(--preisblau);border-color:var(--preisblau);}
.cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:4px;}
.fl{width:20px;height:13px;border-radius:2px;box-shadow:0 0 0 1px rgba(90,82,70,.25);}
/* Kopf */
.b2b-band{background:#4E5A66;color:#DCE6F0;text-align:center;font-size:12px;padding:9px 12px;}
.b2b-band strong{color:#FCFAF5;font-weight:600;}
header{background:var(--papier);border-bottom:1px solid var(--rand);}
.topbar{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px;gap:16px;flex-wrap:wrap;}
.topbar img.logo{width:180px;height:auto;}
.topbar nav{display:flex;gap:20px;flex-wrap:wrap;align-items:center;}
.nav-menue{display:none;font:600 14px/1 'Source Sans 3',sans-serif;color:var(--graublau);
  background:var(--papier);border:1.5px solid var(--rand);border-radius:5px;padding:10px 14px;cursor:pointer;}
.nav-menue:focus-visible{outline:3px solid rgba(63,100,145,.28);outline-offset:2px;}
.btn-mini{font:600 13.5px/1 'Source Sans 3',sans-serif;color:var(--weiss);background:var(--wein);
  border:1.5px solid var(--wein);border-radius:5px;padding:9px 15px;text-decoration:none;
  white-space:nowrap;transition:background .12s ease,border-color .12s ease;}
.btn-mini:hover{background:var(--weindunkel);border-color:var(--weindunkel);}
@media (max-width:700px){.btn-mini{display:none;}}
.topbar nav a{font:500 13.5px/1 'Source Sans 3',sans-serif;color:var(--graublau);text-decoration:none;}
.topbar nav a:hover{color:var(--wein);}
.topbar nav a.btn-mini,
.topbar nav a.btn-mini:hover{color:var(--papier);}   /* Knopfschrift bleibt hell, auch im Hover */
/* Hero */
.herozone{background:var(--papier);}
.heroC{background:url(hero-c.jpg?v=8) right center/auto 100% no-repeat;background-color:var(--papier);
  /* Auf sehr breiten Schirmen wächst der Kopf nicht endlos mit: Text und Bild
     bleiben als Block zusammen und stehen mittig, statt auseinanderzulaufen. */
  max-width:1240px;margin:0 auto;
  border-bottom:1px solid var(--rand);}
.hbi{min-height:520px;display:flex;align-items:center;padding-top:34px;padding-bottom:34px;}
/* Zahlenleiste zwischen Kopf und Konzept: ruhige, rein typografische Zeile,
   die die beiden bildstarken Blöcke voneinander trennt. */
.faktenband{background:var(--papier);border-top:1px solid var(--rand);border-bottom:1px solid var(--rand);}
.faktenband .fakten{padding:24px 0;justify-content:space-between;gap:18px;}
.hero-fakten b{font-size:23px;}
/* Der Kopf bricht bei 1120 px um, nicht erst bei 920: Das Hintergrundfoto skaliert
   auf die Höhe des Kopfes und ist dabei rund 1040 px breit. Darunter wanderten die
   Flaschen unter den Text — bei 1000 px lag die Zeile schon auf der ersten Flasche.
   Die übrigen Raster brechen weiterhin bei 920 px. */
@media (max-width:1120px){.heroC{background:none;background-color:var(--papier);}}
.hb-text{max-width:600px;}
.hb-text h1{font-size:48px;line-height:1.05;margin:10px 0 4px;}
.hb-text .claim{font-size:18px;margin:14px 0 22px;max-width:50ch;}
.hb-mobil{display:none;width:100%;height:auto;}
@media (max-width:1120px){
  .herobanner{background-image:none;}
  .hb-mobil{display:block;border-radius:10px;margin-top:18px;}
  /* Unter dieser Breite fällt das Hero-Foto aus dem Hintergrund — dann darf auch
     nichts mehr dafür reserviert bleiben: Die Mindesthöhe von 520 px hielt den Kopf
     künstlich auf, und die Textbreite von 600 px ließ rechts eine leere Fläche
     stehen. Diese Regeln stehen bewusst hier unten, hinter .hb-text: gleiche
     Spezifität, die spätere gewinnt (CLAUDE.md, „Mobilregeln hinter die
     Desktopregeln"). */
  .hbi{min-height:0;}
  .hb-text{max-width:none;}
  .hb-text .claim{max-width:64ch;}
}
.fakten{display:flex;gap:26px;flex-wrap:wrap;padding:24px 0 6px;}
.fakt b{display:block;font:800 26px 'Bitter',serif;color:var(--graublau);}
.fakt span{font-size:13.5px;color:var(--sek);}
/* Sektionen */
section{padding:44px 0;}
section.hell{background:var(--papier);}   /* helle Fläche auf dem Grund, nie Grundfarbe */
h2{font-size:30px;margin-bottom:8px;}
.sublede{max-width:78ch;margin-bottom:44px;font-size:16.5px;}
/* Konzept */
.prinzip{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:30px;}
.pkarte{background:none;border:none;padding:0;}
/* Die drei Vorschauen kommen aus verschiedenen Quellen: das Etappenblatt und
   der Textausschnitt sind Bildschirmfotos (1,41:1 und 1,44:1), das
   Flaschentrio ist eine gebaute Fläche. Eine feste Bildhöhe machte daraus je
   nach Fensterbreite einen anderen Ausschnitt — am Telefon blieb vom Blatt
   nur ein Streifen. Jetzt steht das Verhältnis des Rahmens fest und wächst
   mit der Kartenbreite mit; die drei Karten bleiben gleich hoch. Die beiden
   Bildschirmfotos füllen ihn von oben, sie laufen unten ohnehin ins Offene.
   Das Flaschentrio wird in 16:10 gebaut und darf nichts verlieren — .ganz
   hält es vollständig im Rahmen, auch wenn sich sein Format einmal ändert. */
.pbild{border:1px solid var(--rand);border-radius:10px;overflow:hidden;background:var(--panel);margin-bottom:14px;
  box-shadow:0 12px 28px -24px rgba(40,49,64,.55);}
.pbild img{width:100%;height:auto;aspect-ratio:16 / 10;object-fit:cover;object-position:center top;display:block;}
.pbild img.ganz{object-fit:contain;}
.pkarte h3{font-size:18px;margin:0 0 8px;}
.pkarte p{font-size:14.5px;line-height:1.6;color:var(--sek);max-width:52ch;}
.hinweisbox{margin-top:22px;max-width:104ch;background:var(--papier);border-left:4px solid var(--wein);border-radius:0 8px 8px 0;
  padding:14px 18px;font-size:15px;}
/* Etappen */
.etappe{display:grid;grid-template-columns:480px 1fr;gap:40px;background:transparent;
  border:none;border-radius:14px;padding:40px;margin-bottom:40px;align-items:center;}
.etappe:nth-of-type(odd){background:var(--papier);}
.ebild{border-radius:8px;overflow:hidden;background:#FCFAF5;border:none;box-shadow:0 14px 30px -22px rgba(40,49,64,.45);}
.ebild img{width:100%;height:auto;display:block;}   /* nie beschneiden — Flaschen müssen ganz zu sehen sein */
.einhalt{padding:6px 6px 6px 0;}
.emeta{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--sek);font-weight:600;}
.emeta .saison{background:var(--panel);border:1px solid var(--rand);border-radius:99px;padding:2px 12px;color:var(--ocker);}
.etappe h3{font-size:26px;margin-top:10px;}
.ehand{font:600 22px 'Caveat',cursive;color:var(--wein);margin:4px 0 10px;}  /* 07.09.2026: von 27 auf 22 px — dieselbe Zeile steht auf der Etappenseite in 22 px */
.etappe p{font-size:15.5px;line-height:1.6;}
/* Muss nach .etappe p stehen und Klasse+Element schlagen: Sonst gewinnt die
   Absatzregel darüber (CLAUDE.md, „.footer p schlägt .footer__klasse") und die
   Handschrift landete bei 15,5 px statt bei den 22 px der Ladenseite. */
.etappe p.ehand{font:600 22px 'Caveat',cursive;}
.weinliste{margin-top:18px;display:grid;gap:9px;}
.wz{display:grid;grid-template-columns:52px 1fr auto;gap:10px;font-size:14.5px;align-items:baseline;
  border-bottom:1px dashed var(--rand);padding-bottom:5px;}
.wart{color:var(--sek);font-variant-numeric:tabular-nums;}
.wname{font-weight:600;color:var(--graublau);}
.wek{font-weight:700;color:var(--preisblau);white-space:nowrap;}
.setek{margin-top:12px;font-size:14px;color:var(--sek);}
.setek b{color:var(--preisblau);}
.eaktionen{margin-top:22px;display:flex;gap:12px;row-gap:12px;flex-wrap:wrap;}
.eaktionen .btn{font-size:13.5px;padding:7px 13px;}
/* Planer */
.planer{background:var(--papier);border:1px solid var(--rand);border-radius:10px;padding:24px;}
.planzeile{display:grid;grid-template-columns:1fr 250px 150px 210px;gap:16px;align-items:center;
  padding:13px 14px;border-radius:8px;border:1px solid transparent;font-size:15px;transition:background .15s;}
.planzeile + .planzeile{margin-top:4px;}
.planzeile:nth-of-type(even){background:rgba(240,235,224,.5);}
.planzeile.aktiv{background:#EEF2F7;border-color:#C9D6E5;}
.pl-titel b{display:block;color:var(--graublau);font-size:14px;}
.pl-titel span{font-size:14.5px;color:var(--text);}
/* Eingabefelder nach Styleguide 06: Rand #D5CDBB, Grund #FEFCF8, 12/13 px Innenabstand,
   Mindesthöhe 44 px, Tastaturring als Doppelring in Preis-Blau. */
.pl-kw,.pl-menge,.pl-feld input{font:400 15px/1.4 'Source Sans 3',sans-serif;color:var(--graublau);
  border:1px solid #D5CDBB;border-radius:4px;padding:12px 13px;background:#FEFCF8;width:100%;
  min-height:44px;transition:border-color .12s ease,box-shadow .12s ease;}
.pl-kw:hover,.pl-menge:hover,.pl-feld input:hover{border-color:#B8B1A4;}
.pl-kw:focus-visible,.pl-menge:focus-visible,.pl-feld input:focus-visible{
  outline:none;border-color:var(--preisblau);box-shadow:0 0 0 2px #FCFAF5,0 0 0 4px var(--preisblau);}
.pl-feld input::placeholder{color:#B8B1A4;}
.pl-mengenfeld{display:flex;align-items:center;gap:8px;}
.pl-mengenfeld .pl-menge{width:74px;text-align:center;font:700 17px/1.4 'Source Sans 3',sans-serif;padding:12px 6px;}
.pl-einheit{font-size:12px;line-height:1.25;color:var(--sek);white-space:nowrap;}
.pl-rechnung{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-height:34px;justify-content:center;}
.pl-mengen{font-size:13px;color:var(--sek);white-space:nowrap;}
.pl-preis{background:var(--preisblau);color:#fff;font:700 14px 'Source Sans 3',sans-serif;
  padding:3px 12px;border-radius:99px;white-space:nowrap;}
.planinfo{background:var(--panel);border-left:4px solid var(--wein);border-radius:0 8px 8px 0;
  padding:12px 16px;font-size:14.5px;line-height:1.55;margin-bottom:18px;}
.plansumme{margin-top:20px;border-top:1px solid var(--rand);padding-top:18px;}
.ps-leer{font-size:14.5px;color:var(--sek);}
.ps-inhalt[hidden]{display:none;}
.ps-inhalt{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
.ps-zahlen{display:flex;gap:30px;flex-wrap:wrap;}
.ps-z b{display:block;font:800 26px 'Bitter',serif;color:var(--graublau);line-height:1.1;}
.ps-z span{font-size:12.5px;color:var(--sek);}
.ps-preis{background:var(--preisblau);color:#fff;border-radius:10px;padding:14px 24px;text-align:right;}
.ps-preis span{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;}
.ps-preis b{display:block;font:800 27px 'Bitter',serif;line-height:1.2;}
.ps-preis small{font-size:11.5px;opacity:.85;}
.plan-felder{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin:26px 0 6px;}
.plan-felder.vier{grid-template-columns:repeat(4,1fr);}
.pl-notiz{margin-top:16px;}
.pl-notiz textarea{font:400 15px/1.5 'Source Sans 3',sans-serif;color:var(--graublau);
  border:1px solid #D5CDBB;border-radius:4px;padding:12px 13px;background:#FEFCF8;
  width:100%;resize:vertical;min-height:76px;
  transition:border-color .12s ease,box-shadow .12s ease;}
.pl-notiz textarea:hover{border-color:#B8B1A4;}
.pl-notiz textarea:focus-visible{outline:none;border-color:var(--preisblau);
  box-shadow:0 0 0 2px #FCFAF5,0 0 0 4px var(--preisblau);}
.pl-notiz textarea::placeholder{color:#B8B1A4;}
.pl-feld label{font:600 11.5px/1 'Source Sans 3',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ocker);display:block;margin-bottom:7px;}
.pl-feld label .opt{letter-spacing:.06em;text-transform:none;font-weight:400;color:var(--sek);}
.plan-aktionen{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;align-items:center;}
.kleingedruckt{font-size:13.5px;color:var(--sek);margin-top:14px;line-height:1.6;}
/* Shop */
.wege{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.weg{background:var(--papier);border:1px solid var(--rand);border-radius:8px;padding:18px 20px;font-size:14.5px;}
.weg h3{font-size:16.5px;margin-bottom:6px;}
.weg .nr{display:inline-flex;width:26px;height:26px;border-radius:50%;background:var(--wein);color:var(--weiss);
  align-items:center;justify-content:center;font:700 14px 'Bitter',serif;margin-bottom:8px;}
table.ean{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:14px;background:var(--papier);}
table.ean th,table.ean td{border:1px solid var(--rand);padding:6px 10px;text-align:left;}
table.ean th{background:var(--panel);color:var(--graublau);}
details.eanbox{margin-top:16px;}
details.eanbox summary{cursor:pointer;font-weight:600;color:var(--preisblau);}
/* Downloads */
.dlliste{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.dl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;background:var(--papier);border:1px solid var(--rand);border-radius:8px;padding:15px 18px;font-size:15px;}
/* Variante 1 (Beschluss 02.09.): Text links, Knöpfe rechts auf einer Höhe. Der Text behält mindestens
   260 px; reicht die Breite für die Knöpfe daneben nicht (Etappenseiten mit vier Knöpfen), rücken sie
   als eigene Zeile darunter, rechtsbündig. Die Knopfgruppe selbst darf umbrechen. */
.dl > div{flex:1 1 260px;min-width:0;}
.dl > a.btn{flex:none;margin-left:auto;}
.dl > span{display:flex;flex:0 1 auto;min-width:0;max-width:100%;margin-left:auto;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end;}
@media (max-width:640px){.dl > a.btn, .dl > span{margin-left:0;} .dl > span{justify-content:flex-start;}}
.dl b{color:var(--graublau);}
.dl small{display:block;color:var(--sek);}
/* Fuß */
.kba-band{background:var(--salbei); padding:11px 24px; text-align:center;
  font:600 12px/1.4 'Source Sans 3',sans-serif; color:#F7F3EB; letter-spacing:.03em;}
footer{background:#4E5A66;padding:36px 0 34px;font-size:14px;color:#DCE6F0;}
.cols{display:grid;grid-template-columns:auto auto auto;justify-content:space-between;
  gap:30px 60px;align-items:start;}
@media (max-width:920px){.cols{grid-template-columns:1fr;justify-content:start;}}
.marke{display:flex;gap:14px;}
.fspalte .fkopf{font:600 11.5px 'Source Sans 3',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:#DCE6F0;margin-bottom:8px;}
footer a{color:#DCE6F0;}
.fspalte div, .fspalte a{line-height:1.7;}
.pflicht{border-top:1px solid rgba(220,230,240,.28);margin-top:26px;padding-top:14px;font-size:12.5px;
  color:#B4C4D3;line-height:1.6;}
.ruecken{width:5px;flex:none;align-self:stretch;border-radius:1px;
  background:linear-gradient(to bottom,#EEA842 0 20%,#D7432C 20% 40%,#A93148 40% 60%,#6A5476 60% 80%,#5389B9 80% 100%);}
.marke .mname{font:700 16px 'Bitter',serif;color:#FCFAF5;}
.marke .msub{font:600 12.5px 'Source Sans 3',sans-serif;letter-spacing:.06em;color:#9DB0C2;margin:1px 0 6px;}
@media (max-width:920px){
  .etappe{grid-template-columns:1fr;}
  .prinzip,.wege{grid-template-columns:1fr;}
  .planzeile{grid-template-columns:1fr;gap:10px;}
  .pl-rechnung{align-items:flex-start;}
  .plan-felder.vier{grid-template-columns:1fr;}
  .plan-felder{grid-template-columns:1fr;}
  .dlliste{grid-template-columns:1fr;}
}

/* ---- Etappen-Unterseiten ---- */
.ehero{background:var(--papier);border-bottom:1px solid var(--rand);padding:26px 0 40px;}
.zurueck{display:inline-block;font-size:14px;font-weight:600;text-decoration:none;margin-bottom:18px;}
.ehero-grid{display:grid;grid-template-columns:1fr 520px;gap:34px;align-items:center;}
.ehero h1{font-size:38px;line-height:1.08;margin:8px 0 2px;}
.ehero .claim{font-size:17px;margin:12px 0 20px;max-width:52ch;}
.ehero-bild{border-radius:10px;overflow:hidden;border:1px solid var(--rand);background:var(--papier);}
.ehero-bild img{width:100%;height:auto;display:block;}
.wgrid{display:grid;grid-template-columns:1fr 1fr;column-gap:22px;row-gap:9px;
  grid-template-rows:auto auto auto auto 1fr auto auto;}
.wkarte{background:var(--papier);border:1px solid var(--rand);border-radius:10px;padding:20px;
  display:grid;grid-template-rows:subgrid;grid-row:span 7;row-gap:9px;}
.wplatz{min-height:2px;}
.wkarte .wkopf{display:grid;grid-template-columns:66px 1fr;gap:18px;align-items:center;}
.wkarte .wkopf img{width:auto;height:120px;max-width:66px;object-fit:contain;display:block;margin:0 auto;}
.wkarte h3{font-size:19px;line-height:1.2;}
.wkarte .wsub{font-size:13.5px;color:var(--sek);margin-top:3px;}
.wkarte .wzeile{font-size:14.5px;line-height:1.5;}
.wkarte .wzeile b{color:var(--graublau);}
.wkarte .wclou{font-size:14.5px;line-height:1.5;background:var(--panel);
  border-left:4px solid var(--wein);border-radius:0 6px 6px 0;padding:10px 14px;align-self:start;}
.wkarte .wfuss{align-self:end;border-top:1px solid var(--rand);padding-top:10px;display:flex;
  justify-content:space-between;gap:12px;font-size:13.5px;color:var(--sek);flex-wrap:wrap;}
.wkarte .wpreis{font-weight:700;color:var(--preisblau);white-space:nowrap;}
.zweispalt{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:start;}
.zweispalt > div > .eyebrow:first-child{margin-top:0;}
.zweispalt h2{margin-top:6px;}
.lauftext{font-size:16.5px;line-height:1.65;}
.probierbox{background:var(--papier);border:1px solid var(--rand);border-radius:10px;padding:22px;}
.probierbox h3{font-size:17px;margin-bottom:14px;}
.pschritt{display:flex;gap:13px;align-items:flex-start;margin-bottom:13px;font-size:15px;line-height:1.5;}
.pschritt .n{width:26px;height:26px;flex:none;border-radius:50%;background:var(--wein);color:var(--weiss);
  font:700 13px 'Bitter',serif;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.pschritt b{color:var(--graublau);}
.winzergrid{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start;}
.winzerfoto{border-radius:10px;overflow:hidden;border:1px solid var(--rand);}
.winzerfoto{background:var(--panel);border-radius:8px;}
.winzerfoto img{width:100%;height:250px;object-fit:contain;display:block;}
.qrzeile{margin-top:16px;font-size:14.5px;}
.textgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;}
.textbox{background:var(--papier);border:1px solid var(--rand);border-radius:10px;padding:20px;
  display:flex;flex-direction:column;}
.textbox-kopf{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:12px;}
.textbox-kopf h3{font-size:16.5px;}
.textbox-kopf small{font-weight:400;color:var(--sek);font-family:'Source Sans 3',sans-serif;font-size:13px;}
.btn.klein{font-size:13px;padding:6px 12px;}
.textinhalt{font-size:14.5px;line-height:1.6;white-space:pre-wrap;background:var(--panel);
  border-radius:6px;padding:14px 16px;max-height:360px;overflow:auto;}
.dllink{display:inline-block;margin-top:auto;padding-top:12px;font-size:14px;align-self:flex-start;}
.nachbarn{border-top:1px solid var(--rand);}
.nbgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:26px 0;}
.nb{display:block;text-decoration:none;color:inherit;background:var(--papier);border:1px solid var(--rand);
  border-radius:10px;padding:16px 20px;}
.nb:hover{border-color:var(--wein);}
.nb .nbl{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--wein);}
.nb .nbt{font:700 18px 'Bitter',serif;color:var(--graublau);margin-top:4px;}
.nb.rechts{text-align:right;}
.etappe h3 a{color:inherit;text-decoration:none;}
.etappe h3 a:hover{color:var(--wein);}
@media (max-width:920px){
  .ehero-grid,.wgrid,.zweispalt,.winzergrid,.textgrid,.nbgrid{grid-template-columns:1fr;}
  .nb.rechts{text-align:left;}
}
/* Der Kopf der Etappenseite hat eine feste Bildspalte von 520 px. Knapp über dem
   Umbruch blieben dem Text nur rund 320 px, und die beiden Knöpfe standen
   untereinander. Er bricht deshalb früher um — sobald der Textspalte weniger als
   etwa 380 px bleiben. */
@media (max-width:1000px){
  .ehero-grid{grid-template-columns:1fr;}
}

/* Rückweg zur Genussreisen-Startseite: eine Stufe nach oben, deshalb leicht
   abgesetzt vom Rest der Navigation. */
.nav-zurueck{opacity:.72; padding-right:12px; margin-right:4px; border-right:1px solid rgba(0,0,0,.14);}
.nav-zurueck:hover{opacity:1;}

@media (max-width:700px){
  .wrap{padding-left:26px;padding-right:26px;}
  .topbar{gap:12px;}
  .topbar img.logo{width:164px;}
  .nav-menue{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;}
  .topbar nav{display:none;order:3;width:100%;flex-direction:column;align-items:stretch;gap:0;
    padding:4px 0 8px;}
  .topbar[data-offen="1"] nav{display:flex;}
  .topbar nav a{padding:12px 2px;border-top:1px solid var(--rand);line-height:1.25;}
  .topbar nav a.nav-zurueck{margin:0;padding-right:2px;border-right:0;}
}

/* Die EAN-Liste ist breiter als ein schmales Fenster — sie scrollt jetzt in
   ihrem Kasten, statt die Seite aufzuschieben. */
/* Als Block gesetzt, damit sie auf schmalen Fenstern scrollt; width:max-content, damit
   rechts kein leerer weißer Rest steht — die Tabelle ist nur so breit wie ihr Inhalt. */
.eanbox table.ean{display:block; overflow-x:auto; max-width:100%; width:max-content; background:transparent;}
.logo-link{display:inline-flex; line-height:0;}


/* ---------- Kontaktzeile am Seitenende (Vorbild Käse-Reise) ----------
   Ersetzt die Knopfreihe: Telefon und Mail als anklickbare Karten. Die Glyphen kommen
   aus dem Icon-System v4 des Systemhandbuchs und tragen Service-Hellblau #5389B9 —
   Service & Handel ist gruppenunabhängig, deshalb auch auf der Wein-Seite nicht rot. */
.iglyphe{width:24px;height:24px;flex:none;color:#5389B9;}
.kontaktzeile{display:grid;grid-template-columns:1.3fr 1fr;gap:30px 48px;align-items:center;
  background:var(--panel);border:1px solid var(--rand);border-radius:12px;padding:30px 36px;}
.kontaktzeile h2{font-size:24px;margin-bottom:.35em;}
.kontaktzeile p{margin:0;font-size:15px;color:var(--text);max-width:60ch;}
.kontaktzeile__wege{display:grid;gap:12px;}
.kontaktzeile__wege a{display:flex;align-items:center;gap:14px;text-decoration:none;background:var(--papier);
  border:1px solid var(--rand);border-radius:8px;padding:12px 16px;}
.kontaktzeile__wege a:hover{border-color:#5389B9;}
.kontaktzeile__wege b{display:block;font-family:'Bitter',Georgia,serif;font-size:17px;color:var(--preisblau);line-height:1.2;}
.kontaktzeile__wege small{display:block;font-size:12.5px;color:var(--sek);margin-top:3px;}
@media (max-width:820px){
  .kontaktzeile{grid-template-columns:1fr;padding:24px 22px;}
  /* Die Mailadresse zwang den Knopf auf 300 px Mindestbreite, während der Kasten
     innen weniger Platz hat — er schob die Seite auf. Rasterkinder schrumpfen nicht
     unter ihre Inhaltsbreite, solange min-width auf auto steht. */
  .kontaktzeile__wege a{min-width:0;}
  .kontaktzeile__wege a span{min-width:0;}
  .kontaktzeile__wege b{font-size:15px;overflow-wrap:anywhere;}
}