/* entdecken.geraldbartke.de — Endkundenebene der Wein-Reise.
   Bewusst klein: ein Stylesheet, keine Bilder außer den Flaschen, kein Skript.
   Farben und Schriftrollen sind dieselben wie auf der Wein-Reise; nur die
   Händlerteile fehlen. Zuerst für das Telefon gebaut, ab 720 px zweispaltig. */

@font-face{font-family:'Bitter';font-weight:400;src:url(fonts/bitter-400.woff2) format('woff2');font-display:swap;}
@font-face{font-family:'Bitter';font-weight:700;src:url(fonts/bitter-700.woff2) format('woff2');font-display:swap;}
@font-face{font-family:'Bitter';font-weight:800;src:url(fonts/bitter-800.woff2) format('woff2');font-display:swap;}
@font-face{font-family:'Caveat';font-weight:600;src:url(fonts/caveat-600.woff2) format('woff2');font-display:swap;}
@font-face{font-family:'Source Sans 3';font-weight:400;src:url(fonts/sourcesans3-400.woff2) format('woff2');font-display:swap;}
@font-face{font-family:'Source Sans 3';font-weight:600;src:url(fonts/sourcesans3-600.woff2) format('woff2');font-display:swap;}
@font-face{font-family:'Source Sans 3';font-weight:700;src:url(fonts/sourcesans3-700.woff2) format('woff2');font-display:swap;}

:root{
  --graublau:#424F5C; --wein:#C03C27; --weindunkel:#8E2B1B; --preisblau:#3F6491;
  --salbei-dunkel:#5C6B51; --papier:#FCFAF5; --panel:#F7F3EB; --rand:#EBE2CD;
  --text:#5a5246; --sek:#6A6360; --weiss:#FBFBF7;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%;}
body{font-family:'Source Sans 3',sans-serif; color:var(--text); line-height:1.6;
  background:var(--panel); font-size:17px;}
img{max-width:100%; display:block;}
a{color:var(--preisblau);}
h1,h2,h3{font-family:'Bitter',Georgia,serif; color:var(--graublau); letter-spacing:-.01em;}
.wrap{max-width:760px; margin:0 auto; padding:0 20px;}
.eyebrow{font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--wein);}
.hand{font:600 21px 'Caveat',cursive; color:var(--wein);}

/* Kopf: nur Wortmarke und Rückweg, kein Menü */
header{background:var(--papier); border-bottom:1px solid var(--rand); padding:14px 0;}
header .zeile{display:flex; align-items:baseline; justify-content:space-between; gap:14px;}
header .marke{font:800 17px 'Bitter',Georgia,serif; color:var(--graublau); text-decoration:none;}
header .marke span{display:block; font:400 11.5px 'Source Sans 3',sans-serif;
  letter-spacing:.14em; text-transform:uppercase; color:var(--wein); margin-top:1px;}
header .zurueck{font-size:14px; text-decoration:none; white-space:nowrap;}

/* Kopfbereich der Etappe */
.hero{background:var(--papier); padding:26px 0 30px;}
.hero h1{font-size:29px; line-height:1.14; margin-top:8px; text-wrap:balance;}
.hero .hand{margin-top:8px;}
.hero p{margin-top:14px;}

section{padding:26px 0;}
section.hell{background:var(--papier);}
section h2{font-size:21px; line-height:1.2; margin-bottom:6px;}
section h2 .vor{color:var(--wein);}
section > .wrap > p{margin-top:10px;}

/* Die beiden Weine */
.weine{display:grid; gap:16px; margin-top:16px;}
.wein{background:var(--papier); border:1px solid var(--rand); border-radius:10px;
  padding:18px 18px 16px; display:flex; gap:16px;}
.wein .bild{flex:none; width:58px; display:flex; align-items:flex-start; justify-content:center;}
.wein .bild img{max-height:190px; width:auto;}
.wein h3{font-size:18px; line-height:1.25;}
.wein .sub{font-size:14px; color:var(--sek); margin-top:3px;}
.wein .zeile{font-size:15.5px; margin-top:9px; line-height:1.5;}
.wein .zeile b{color:var(--graublau);}
/* Die drei Angaben brechen nur an den Trennpunkten um, nie innerhalb — sonst
   rutschte schon mal das „°C" allein in die nächste Zeile. */
.wein .fakten{font-size:13.5px; color:var(--sek); margin-top:11px;
  border-top:1px solid var(--rand); padding-top:8px;}
.wein .fakten span{white-space:nowrap;}

/* Verkostungsschritte */
.schritte{margin-top:14px; display:flex; flex-direction:column; gap:12px;}
.schritt{display:flex; gap:12px; align-items:flex-start;}
.schritt .n{flex:none; width:26px; height:26px; border-radius:50%; background:var(--wein);
  color:var(--weiss); font:700 14px 'Bitter',serif; display:flex; align-items:center;
  justify-content:center; margin-top:1px;}
.schritt b{color:var(--graublau);}

.kasten{background:var(--panel); border-radius:10px; padding:18px; margin-top:16px;}
section.hell .kasten{background:var(--panel);}
.speisen{margin-top:16px; font-size:16px;}
.speisen b{color:var(--weindunkel);}

/* Video vom Weingut — Zwei-Klick, das Standbild liegt lokal.
   Der Block steht bewusst außerhalb des Winzer-Rasters, über die volle
   Textbreite: In der schmalen rechten Spalte wurde das Bild flach gequetscht,
   während links unter dem Winzerfoto eine Lücke blieb.
   Standbild und Player teilen dasselbe Seitenverhältnis (16:9), damit beim
   Klick nichts springt — auch wenn ein Standbild einmal anders zugeschnitten
   ist, deckt object-fit den Rahmen. */
.videoblock{margin:22px 0 0;}
.videostart{display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:none;
  cursor:pointer;position:relative;border-radius:10px;overflow:hidden;line-height:0;}
.videostart img{width:100%;height:100%;object-fit:cover;}
.videostart .play{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;
  border-radius:50%;background:rgba(192,60,39,.92);display:flex;align-items:center;justify-content:center;}
.videostart .play::after{content:"";border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #FBFBF7;margin-left:4px;}
.videostart:focus-visible{outline:3px solid var(--preisblau);outline-offset:3px;}
.videorahmen{width:100%;aspect-ratio:16/9;border:0;border-radius:10px;display:block;}
.videoblock figcaption{font-size:14px;line-height:1.5;color:var(--sek);margin-top:8px;}

/* Winzer */
.winzer{display:grid; gap:16px; margin-top:14px;}
.winzer img{border-radius:10px; width:100%; height:190px; object-fit:cover;}
/* Hochformatige Porträts ganz zeigen statt zuschneiden: Bei einem stehenden
   Bild schnitte „cover" oben und unten das Wesentliche weg. */
.winzer img.hoch{height:auto; max-height:330px; width:auto; max-width:100%;
  object-fit:contain; margin:0 auto;}
.winzer .weiter{margin-top:12px; font-size:16px;}

/* Übersicht */
.etappenliste{display:grid; gap:14px; margin-top:18px;}
.etappenkarte{display:flex; gap:14px; align-items:center; background:var(--papier);
  border:1px solid var(--rand); border-radius:10px; padding:14px 16px;
  text-decoration:none; color:inherit;}
.etappenkarte .flaschen{flex:none; display:flex; gap:6px; align-items:flex-end; height:74px;}
.etappenkarte .flaschen img{max-height:74px; width:auto;}
.etappenkarte .nr{font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--wein);}
.etappenkarte h2{font-size:18px; line-height:1.25; margin:3px 0 0;}
.etappenkarte .hand{font-size:17px; margin-top:2px;}

/* Fuß */
.kba{background:var(--salbei-dunkel); color:var(--panel); text-align:center;
  font-size:13px; padding:10px 16px;}
footer{background:var(--graublau); color:#D7DEE6; padding:22px 0 26px; font-size:14px;}
footer a{color:#EAF0F6;}
footer .fzeile{margin-top:10px; font-size:12.5px; color:#B9C4CF; line-height:1.6;}

@media (min-width:720px){
  body{font-size:18px;}
  .hero{padding:38px 0 42px;}
  .hero h1{font-size:38px;}
  section{padding:34px 0;}
  section h2{font-size:24px;}
  .weine{grid-template-columns:1fr 1fr;}
  .wein .bild{width:68px;}
  .winzer{grid-template-columns:210px 1fr; align-items:start;}
  .winzer img{height:150px;}
  .winzer img.hoch{height:auto; max-height:300px;}
}