/* ==========================================================================
   Casteler Biermanufactur — casteler biermanufactur.de
   Handgeschrieben. Keine Frameworks, keine externen Ressourcen.
   Farben aus dem Logo: Kupfer/Ocker #a86c0c, Grau #545454
   ========================================================================== */

:root{
  --gold:#a86c0c;
  --gold-hell:#c4801a;
  --gold-blass:#e8dcc4;
  --tinte:#2a2622;
  --grau:#545454;
  --grau-hell:#6f6862;
  --papier:#fbf9f5;
  --papier-warm:#f3eee5;
  --dunkel:#241f1b;
  --linie:#ddd4c6;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --breit:1140px;
  --schmal:680px;
  /* Eckenradius. An dieser einen Stelle ändern, dann zieht es überall. */
  --ecke:4px;
}

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

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-text-size-adjust:100%;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--gold);text-decoration:none}
a:hover,a:focus-visible{color:var(--gold-hell);text-decoration:underline}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

h1,h2,h3{font-family:var(--serif);font-weight:normal;line-height:1.22;margin:0}
h2{font-size:clamp(1.65rem,3.4vw,2.35rem);letter-spacing:-.01em}
h3{font-size:1.16rem;letter-spacing:.005em}

p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--breit);margin:0 auto;padding:0 24px}
.schmal{max-width:var(--schmal)}

/* Sprungmarke fuer Tastatur */
.skip{position:absolute;left:-9999px;top:0;background:var(--dunkel);color:#fff;padding:12px 18px;z-index:100}
.skip:focus{left:8px;top:8px}

/* --- Kopf ---------------------------------------------------------------- */
.kopf{
  position:sticky;top:0;z-index:50;
  background:rgba(251,249,245,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linie);
}
.kopf-innen{
  max-width:var(--breit);margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.kopf-logo img{width:min(258px,54vw)}
.kopf nav{display:flex;gap:22px;flex-wrap:wrap}
.kopf nav a{
  color:var(--grau);font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;
  text-decoration:none;padding:4px 0;border-bottom:1px solid transparent;
}
.kopf nav a:hover,.kopf nav a:focus-visible{color:var(--gold);border-bottom-color:var(--gold);text-decoration:none}

/* --- Hero ---------------------------------------------------------------- */
.hero{position:relative;background:var(--dunkel);overflow:hidden}
.hero-bild{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.62;
}
.hero-innen{
  position:relative;max-width:var(--breit);margin:0 auto;
  padding:clamp(72px,13vw,148px) 24px clamp(60px,10vw,116px);
  color:#f7f2e9;
  text-shadow:0 1px 24px rgba(0,0,0,.55);
}
.hero h1{
  font-size:clamp(1.9rem,4.6vw,3.1rem);
  max-width:19em;margin:0 0 .5em;color:#fff;
}
.hero .unter{
  font-size:clamp(1rem,1.5vw,1.13rem);
  max-width:34em;color:#eadfcd;margin-bottom:1.9em;
}
.hero .jubi{
  display:inline-block;margin-bottom:1.5em;
  font-family:var(--serif);font-style:italic;font-size:1rem;
  color:var(--gold-blass);border-left:2px solid var(--gold);padding-left:12px;
  text-shadow:none;
}
.knopfreihe{display:flex;gap:14px;flex-wrap:wrap}
.knopf{
  display:inline-block;padding:13px 26px;font-size:.95rem;letter-spacing:.02em;
  border:1px solid var(--gold);background:var(--gold);color:#fff;
  text-decoration:none;transition:background .15s,color .15s;
}
.knopf:hover,.knopf:focus-visible{background:var(--gold-hell);border-color:var(--gold-hell);color:#fff;text-decoration:none}
.knopf.leer{background:transparent;color:#f3e8d6;border-color:rgba(243,232,214,.55)}
.knopf.leer:hover,.knopf.leer:focus-visible{background:rgba(255,255,255,.1);border-color:#f3e8d6;color:#fff}

/* --- Abschnitte ---------------------------------------------------------- */
section{padding:clamp(56px,8vw,96px) 0}
section.warm{background:var(--papier-warm)}
section.dunkel{background:var(--dunkel);color:#ece4d8}
section.dunkel h2,section.dunkel h3{color:#fff}
section.dunkel p{color:#d8cec0}

.auge{
  display:block;margin-bottom:14px;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
}
section.dunkel .auge{color:var(--gold-hell)}

.vorspann{font-size:1.1rem;color:var(--grau-hell);max-width:34em;margin-top:1.1em}
section.dunkel .vorspann{color:#cabfb0}

/* zwei Spalten: Text | Bild */
.duo{display:grid;gap:clamp(28px,4vw,52px);align-items:center;margin-top:clamp(32px,4vw,48px)}
@media (min-width:820px){
  .duo{grid-template-columns:1fr 1fr}
  .duo.bild-links > .bild{order:-1}
}
.bild figcaption{
  margin-top:9px;font-size:.82rem;color:var(--grau-hell);font-style:italic;
}
section.dunkel .bild figcaption{color:#a99e90}

/* Karten */
.karten{display:grid;gap:22px;margin-top:clamp(30px,4vw,44px)}
@media (min-width:640px){.karten{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.karten.drei{grid-template-columns:repeat(3,1fr)}}
.karte{
  background:#fff;border:1px solid var(--linie);padding:24px 24px 26px;
}
section.warm .karte{background:#fbf9f5}
.karte h3{margin-bottom:6px}
.karte .werte{
  font-size:.85rem;color:var(--gold);letter-spacing:.03em;margin-bottom:10px;
  font-variant-numeric:tabular-nums;
}
.karte p{font-size:.96rem;color:var(--grau-hell);margin:0}
.karte .fussnote{display:block;margin-top:10px;font-size:.84rem;color:var(--grau-hell);font-style:italic}

/* Aktuell-im-Sud-Kasten */
.sud{
  margin-top:clamp(30px,4vw,42px);padding:26px 28px;
  background:#fff;border:1px solid var(--gold);border-left-width:3px;
}
section.warm .sud{background:#fbf9f5}
.sud .auge{margin-bottom:8px}
.sud h3{font-size:1.35rem;margin-bottom:6px}
.sud p{margin:0;color:var(--grau-hell)}
.sud .zeit{display:block;margin-top:9px;font-size:.86rem;color:var(--gold)}

/* Liste mit Kupferstrichen */
.strichliste{list-style:none;margin:1.4em 0 0;padding:0}
.strichliste li{
  padding:12px 0 12px 22px;border-top:1px solid var(--linie);position:relative;
}
.strichliste li:last-child{border-bottom:1px solid var(--linie)}
.strichliste li::before{
  content:"";position:absolute;left:0;top:21px;width:10px;height:1px;background:var(--gold);
}
.strichliste b{font-weight:600}
section.dunkel .strichliste li{border-color:#3b342d}

/* Bildband als Trenner */
.band{position:relative;height:clamp(190px,26vw,330px);overflow:hidden;background:var(--dunkel)}
.band img{width:100%;height:100%;object-fit:cover}

/* Detail-Dreier */
.details{display:grid;gap:18px;margin-top:clamp(30px,4vw,44px)}
@media (min-width:700px){.details{grid-template-columns:repeat(3,1fr)}}
.details img{aspect-ratio:4/5;object-fit:cover;width:100%}

/* Kontakt */
.kontaktreihe{display:grid;gap:26px;margin-top:36px}
@media (min-width:760px){.kontaktreihe{grid-template-columns:repeat(3,1fr)}}
.kontaktreihe .titel{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hell);
  margin-bottom:7px;
}
.kontaktreihe a,.kontaktreihe .wert{font-size:1.12rem;color:#fff;font-family:var(--serif)}
.kontaktreihe a:hover{color:var(--gold-hell)}
.kontaktreihe .wert{display:block;line-height:1.4}

/* --- Fuss ---------------------------------------------------------------- */
.fuss{background:#1b1815;color:#8f857a;font-size:.87rem;padding:44px 0 40px}
.fuss a{color:#c9bdaa}
.fuss a:hover{color:var(--gold-hell)}
.fuss-oben{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
.fuss-links{display:flex;gap:20px;flex-wrap:wrap}
.fuss .hinweis{margin-top:26px;padding-top:20px;border-top:1px solid #302a24;line-height:1.6}
.fuss .wachstum{font-style:italic;color:#7d7367}

/* --- Unterseiten (Impressum, Datenschutz) -------------------------------- */
.doku{padding:clamp(48px,7vw,84px) 0}
.doku h1{font-size:clamp(1.8rem,4vw,2.5rem);margin-bottom:.6em}
.doku h2{font-size:1.28rem;margin:2em 0 .5em}
.doku h3{font-size:1.02rem;margin:1.5em 0 .3em}
.doku p,.doku li{color:#3c3630}
.doku ul{padding-left:1.1em;margin:0 0 1.1em}
.doku li{margin-bottom:.35em}
.doku .adresse{font-style:normal;line-height:1.8}
.doku .zurueck{display:inline-block;margin-bottom:2em;font-size:.9rem}
.doku .stand{margin-top:3em;font-size:.85rem;color:var(--grau-hell)}

/* Druck */
@media print{
  .kopf,.fuss,.hero-bild,.band,.knopfreihe{display:none}
  body{background:#fff;font-size:11pt}
}

/* ==========================================================================
   Änderungsrunde 28.07.2026 — Markenband, stille Zeichen, Abschlussband
   ========================================================================== */

/* Markenband über allem: Logo groß auf Papier, Originalfarben */
.markenband{
  background:var(--papier);
  padding:clamp(28px,4.5vw,52px) 0 clamp(24px,4vw,44px);
  border-bottom:1px solid var(--linie);
  text-align:center;
}
.markenband img{ width:clamp(240px,62vw,460px); margin:0 auto; }

/* Schmale Hinweiszeile (Fernsehtermin) — nach der Sendung entfernen */
.tvband{
  background:var(--dunkel); color:#e9dfd0;
  font-size:.92rem; text-align:center;
  padding:9px 24px; line-height:1.45;
}
.tvband b{ color:#fff; font-weight:600; }

/* Laufband in der Hinweiszeile.
   Zwei gleiche Textteile hintereinander; die Spur wandert um genau die Hälfte
   ihrer Breite und springt dann zurück — dadurch ist der Übergang unsichtbar.
   Ohne JavaScript. */
.tvband.laufband{ padding-left:0; padding-right:0; overflow:hidden; }
.laufband-spur{
  display:flex; width:max-content;
  animation:laufband 26s linear infinite;
}
.laufband:hover .laufband-spur,
.laufband:focus-within .laufband-spur{ animation-play-state:paused; }
.laufband-teil{ white-space:nowrap; padding-right:5vw; }
/* Trenner zwischen den beiden Textteilen: das Kesselzeichen aus dem Logo.
   Dekorativ und im CSS, deshalb von Vorleseprogrammen übersprungen. */
.laufband-teil::after{
  content:"";
  display:inline-block;
  width:1.75em; height:1.75em;
  margin-left:5vw;
  vertical-align:-.5em;
  background:url("bilder/icon-180.png") no-repeat center/contain;
  /* Die Strichzeichnung ist zart und ging auf dem dunklen Band unter.
     Deshalb größer und aufgehellt, damit der Kessel als Trenner
     überhaupt zu erkennen ist. */
  filter:brightness(1.55) saturate(1.15);
  opacity:.95;
}
@keyframes laufband{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

/* Bewegung reduziert: stehender, umbrechender Text wie vorher */
@media (prefers-reduced-motion:reduce){
  .tvband.laufband{ padding-left:24px; padding-right:24px; overflow:visible; }
  .laufband-spur{ animation:none; width:auto; display:block; }
  .laufband-teil{ white-space:normal; padding-right:0; }
  .laufband-teil::after{ content:none; }
  .laufband-teil + .laufband-teil{ display:none; }
}

/* Laufende Kopfzeile: nur Kessel und dezenter Namenszug */
.kopf-mini{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.kopf-mini img{ width:29px; height:auto; }
.kopf-mini span{
  font-family:var(--serif); font-size:.95rem; letter-spacing:.06em;
  color:var(--tinte); white-space:nowrap;
}
.kopf-mini:hover{ text-decoration:none; }
.kopf-mini:hover span{ color:var(--gold); }

/* Video im Kopfbereich — verhält sich wie das Bild */
.hero video.hero-bild{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.62; }

/* Stilles Zeichen als Abschnittstrenner */
.zeichen{
  display:flex; align-items:center; gap:20px;
  margin:clamp(38px,5.5vw,60px) 0 clamp(6px,1vw,12px);
}
.zeichen::before,.zeichen::after{ content:""; flex:1; height:1px; background:var(--linie); }
section.dunkel .zeichen::before, section.dunkel .zeichen::after{ background:#3b342d; }
.zeichen img{ width:30px; height:auto; opacity:.9; }

/* Benannte Unterblöcke innerhalb eines Abschnitts */
.block{ margin:0 0 1.9em; }
.block:last-child{ margin-bottom:0; }
.block h3{ margin-bottom:.4em; }
.tel-gross{
  display:inline-block; margin-top:.5em;
  font-family:var(--serif); font-size:1.28rem; letter-spacing:.01em;
  /* Die E-Mail-Adresse hat keine Trennstelle. Auf sehr schmalen Geräten
     würde sie sonst überstehen. */
  overflow-wrap:anywhere;
}

/* Abschlussband: Logo groß, heller Grund, direkt über dem Fuß */
.abschluss{
  background:var(--papier-warm);
  border-top:1px solid var(--linie);
  padding:clamp(44px,6vw,74px) 0 clamp(38px,5vw,60px);
  text-align:center;
}
.abschluss img{ width:clamp(210px,54vw,400px); margin:0 auto clamp(16px,2.4vw,26px); }
.abschluss p{ font-family:var(--serif); font-size:1rem; color:var(--grau-hell); margin:0; }
.abschluss a{ color:var(--grau-hell); }
.abschluss a:hover{ color:var(--gold); }

/* ==========================================================================
   Wirte-Seite und zweiter Handlungsweg (E-Mail) — 28.07.2026
   ========================================================================== */

/* Umriss-Knopf für hellen Grund. ".leer" bleibt für dunklen Grund. */
.knopf.rand{ background:transparent; color:var(--gold); border-color:var(--gold); }
.knopf.rand:hover,.knopf.rand:focus-visible{ background:var(--gold); border-color:var(--gold); color:#fff; }

/* Knopfpaar: Telefon führt, E-Mail steht daneben */
.knopfreihe .knopf{ flex:0 0 auto; }
@media (max-width:420px){ .knopfreihe .knopf{ flex:1 1 100%; text-align:center; } }

/* Kopfbereich der Unterseiten: gleiches Prinzip, weniger Höhe */
.hero.klein .hero-innen{
  padding-top:clamp(52px,8vw,92px);
  padding-bottom:clamp(44px,7vw,78px);
}
.hero.klein h1{ font-size:clamp(1.7rem,3.8vw,2.5rem); max-width:24em; }

/* Musterzeile für die Getränkekarte */
.karteneintrag{
  margin:1.2em 0 1.4em; padding:20px 24px;
  background:#fff; border:1px solid var(--linie); border-left:3px solid var(--gold);
  font-family:var(--serif); line-height:1.9;
}
section.warm .karteneintrag{ background:#fbf9f5; }
.karteneintrag .marke{
  display:block; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  font-family:var(--sans); color:var(--gold); margin-bottom:8px;
}
.karteneintrag .sorte{ display:block; }
.karteneintrag .sorte i{ color:var(--grau-hell); font-size:.94rem; font-style:italic; }

/* ==========================================================================
   Bewegtbild im Fließtext — verhält sich wie ein Bild
   ========================================================================== */
.bild video{ width:100%; height:auto; display:block; background:var(--dunkel); }
.bild .standbild{ display:none; }

/* Wer im System "Bewegung reduzieren" eingestellt hat, bekommt das Standbild.
   saison.js entfernt zusätzlich das Video, damit es gar nicht erst lädt. */
@media (prefers-reduced-motion:reduce){
  .bild video{ display:none; }
  .bild .standbild{ display:block; }
}

/* Fehlerseite */
.fehler{ text-align:center; padding:clamp(60px,10vw,120px) 0; }
.fehler img{ width:clamp(200px,50vw,340px); margin:0 auto clamp(24px,4vw,40px); }
.fehler h1{ font-size:clamp(1.5rem,3.4vw,2.1rem); margin-bottom:.6em; }
.fehler p{ color:var(--grau-hell); max-width:30em; margin:0 auto 1.6em; }

/* ==========================================================================
   Die vier Stationen des Brauablaufs
   --------------------------------------------------------------------------
   Bewusst HTML und keine Grafik: der Text bleibt echter Text — auffindbar,
   vorlesbar, in Sekunden zu ändern. Auf schmalen Bildschirmen stapeln sich
   die Kästen von selbst untereinander, ohne zweite Fassung.
   ========================================================================== */
.stationen-titel{ margin-top:clamp(34px,5vw,52px); }
.stationen{
  list-style:none; margin:1.2em 0 0; padding:0;
  display:grid; gap:14px;
}
@media (min-width:600px){ .stationen{grid-template-columns:repeat(2,1fr)} }
@media (min-width:980px){ .stationen{grid-template-columns:repeat(4,1fr)} }

.station{
  background:#fff; border:1px solid var(--linie); border-top:3px solid var(--gold);
  padding:16px 18px 18px;
}
section.warm .station{ background:#fbf9f5; }
section.dunkel .station{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.18); }

.station-nr{
  display:block; font-family:var(--sans); font-size:.76rem; letter-spacing:.14em;
  color:var(--gold); margin-bottom:8px;
}
.station h4{
  font-family:var(--serif); font-size:1.12rem; font-weight:600;
  margin:0 0 4px; line-height:1.3;
}
.station p{ margin:0 0 10px; font-size:.94rem; color:var(--grau-hell); }
/* Seit dem 01.08. steht in den Kästen keine Wertzeile mehr. Ohne diese Regel
   bliebe unter dem letzten Absatz ein überzähliger Abstand stehen. */
.station p:last-child{ margin-bottom:0; }
.station-wert{
  display:block; font-size:.82rem; color:var(--tinte);
  padding-top:9px; border-top:1px solid var(--linie);
}
section.dunkel .station-wert{ color:#ece4d8; border-top-color:rgba(255,255,255,.18); }

/* Rohstoffzeile unter den Stationen */
.rohstoffe{
  margin-top:clamp(26px,4vw,38px); max-width:40em;
  font-family:var(--serif); font-size:1.04rem; color:var(--tinte);
  padding-left:16px; border-left:3px solid var(--gold-blass);
}

/* Textblock ohne Bild — für Stationen, deren Aufnahme noch fehlt */
.einzel{ margin-top:clamp(32px,4vw,48px); max-width:38em; }

/* ==========================================================================
   Kesselzeichen vor den Abschnittsüberschriften der Startseite
   --------------------------------------------------------------------------
   Nur dort, wo die Überschrift die Klasse "marke" trägt — die Unterseiten
   bleiben ruhig. Rein dekorativ: das Zeichen steht im CSS und nicht im Text,
   Vorleseprogramme überspringen es deshalb von selbst.
   Die Zeichnung ist transparent und in Kupfer gehalten, sie trägt auf hellem
   wie auf dunklem Grund.
   ========================================================================== */
h2.marke::before{
  content:"";
  display:inline-block;
  width:1.5em; height:1.5em;
  margin-right:.45em;
  vertical-align:-.28em;
  background:url("bilder/icon-180.png") no-repeat center/contain;
}
@media (max-width:520px){
  h2.marke::before{ width:1.25em; height:1.25em; margin-right:.35em }
}

/* ==========================================================================
   Änderungsrunde 31.07.2026
   ========================================================================== */

/* --- 1) Gebrochene Ecken --------------------------------------------------
   Vier Pixel. Genug, dass die Kante nicht mehr hart wirkt, zu wenig, als
   dass die Seite nach Software-Oberfläche aussähe. Bilder, Markenband,
   Kopf und Laufband bleiben eckig — sie laufen über die volle Breite.
   -------------------------------------------------------------------------- */
.knopf,
.station,
.karte,
.sud{ border-radius:var(--ecke); }

/* Nur rechts: links sitzt die durchgehende goldene Kante, und eine runde
   Ecke an einer einseitigen Farbkante sieht falsch aus. */
.karteneintrag{ border-radius:0 var(--ecke) var(--ecke) 0; }
.sud{ border-radius:0 var(--ecke) var(--ecke) 0; }

/* --- 2) Knopf hebt sich beim Darüberfahren --------------------------------
   Nur bei echtem Mauszeiger — sonst bleibt der Zustand auf dem Handy nach
   dem Antippen kleben. Und nur für Knöpfe: ein Kasten, der auf Berührung
   reagiert, aber nirgendwo hinführt, ist ein falsches Versprechen.
   -------------------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  .knopf{ transition:background .15s, color .15s, transform .15s, box-shadow .15s; }
  .knopf:hover,
  .knopf:focus-visible{
    transform:translateY(-1px);
    box-shadow:0 3px 8px rgba(42,38,34,.16);
  }
  section.dunkel .knopf:hover,
  section.dunkel .knopf:focus-visible{ box-shadow:0 3px 10px rgba(0,0,0,.4); }
}
/* Wer Bewegung reduziert hat, bekommt nur den Farbwechsel. */
@media (prefers-reduced-motion:reduce){
  .knopf{ transition:background .15s, color .15s; }
  .knopf:hover,.knopf:focus-visible{ transform:none; box-shadow:none; }
}

/* --- 3) Kopfbereich: wo es das Bier gibt ---------------------------------- */
.hero .wo{
  max-width:34em; margin:-.9em 0 1.9em;
  font-size:1rem; color:#e3d7c4;
}
.hero .wo a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.hero .wo a:hover{ color:var(--gold-blass); }

/* --- 4) Verweis in die ausführliche Fassung ------------------------------- */
.weiterlesen{ margin-top:1.3em; font-size:.95rem; }

/* Kleine Beischrift unter einer Zwischenüberschrift */
.beiheft{ margin:.4em 0 0; font-size:.95rem; color:var(--grau-hell); }

/* Anschrift mit Kartenverweis. Nur ein Link — es wird nichts geladen,
   solange niemand darauf klickt. Eine eingebettete Karte bräuchte
   ein Einwilligungsbanner. */
.anschrift{ margin-top:.7em; font-size:.95rem; }

/* --- 5) Bierwagen und Bieranhänger ----------------------------------------
   Hochformat 3:4. Ohne Deckelung würde ein solches Bild auf dem großen
   Bildschirm die halbe Seite füllen. Der Text steht daneben, weil die
   Tafel auf dem Foto in dieser Größe nicht lesbar ist.
   -------------------------------------------------------------------------- */
.fahrzeug{ align-items:center; }
/* width:100% ist zwingend. Ohne diese Zeile überschreibt die Deckelung die
   globale Regel img{max-width:100%} — das Bild besteht dann auch auf einem
   340 Pixel breiten Handy auf seinen 520 Pixeln und schiebt sich über den
   Rand hinaus. */
.fahrzeug .bild img{ width:100%; max-width:520px; margin-inline:auto; }
.fahrzeug h3{ margin-bottom:.5em; }

.ausstattung{ list-style:none; margin:1.1em 0 0; padding:0; }
.ausstattung li{
  position:relative; padding:5px 0 5px 20px; font-size:.97rem;
}
.ausstattung li::before{
  content:""; position:absolute; left:0; top:.95em;
  width:9px; height:1px; background:var(--gold);
}
section.dunkel .ausstattung li{ color:#d8cec0; }
section.dunkel .ausstattung li::before{ background:var(--gold-hell); }

/* --- 6) Saisonlogik: Markierung und Ausblick ------------------------------ */
.karte .jetzt{ margin-bottom:7px; }
.sud .ausblick{
  display:block; margin-top:10px; padding-top:9px;
  border-top:1px solid var(--linie);
  font-size:.88rem; color:var(--grau-hell);
}

/* Beiname hinter dem Sortennamen, etwa „Castel Weihnachtsbock — Castelator" */
.karte h3 i{ font-style:italic; color:var(--grau-hell); font-size:.92em; }