/* Ergänzungen der Ladenseite zum Stylesheet der Wein-Reise.
   Das Grundgerüst (assets/stil.css) wird unverändert übernommen. Hier stehen
   nur die Bausteine, die es dort nicht gibt: die Wortmarke im Kopf (statt des
   Bartke-Logos), die Materialliste je Etappe und ein paar Kleinigkeiten. */

/* Wortmarke im Kopf */
.wortmarke{display:block; font:800 21px/1.05 'Bitter',Georgia,serif; color:var(--graublau);
  letter-spacing:-.01em;}
.wortmarke small{display:block; font:400 11.5px/1.4 'Source Sans 3',sans-serif;
  letter-spacing:.14em; text-transform:uppercase; color:var(--wein); margin-top:3px;}
.logo-link{text-decoration:none;}

.plan-status{font-size:14px; color:var(--sek); align-self:center;}
.planzeile.vorausgewaehlt{outline:2px solid var(--wein); outline-offset:3px;}
a:focus-visible, button:focus-visible{outline:2px solid var(--preisblau); outline-offset:3px;}

/* Materialliste je Etappe, nach Aufgabe gruppiert.
   Je Karte trägt genau ein gefüllter Knopf den Normalfall; die Nebenwege sind
   Textlinks. Vorher standen bis zu vier rote Knöpfe je Karte — bei acht Karten
   ergab das eine Wand aus Rot, in der keine Reihenfolge mehr erkennbar war. */
.matgruppe{margin-top:30px;}
.matgruppe:first-of-type{margin-top:20px;}
.mg-titel{font-size:19px;color:var(--graublau);}
.mg-titel::before{content:"";display:inline-block;width:20px;height:3px;border-radius:2px;
  background:var(--wein);vertical-align:middle;margin-right:10px;transform:translateY(-2px);}
.mg-text{font-size:15px;color:var(--sek);margin-top:4px;line-height:1.5;}
.allesdl{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--papier);border:1px solid var(--rand);border-radius:9px;
  padding:16px 18px;margin-top:18px;}
.allesdl b{display:block;font-family:'Bitter',Georgia,serif;font-size:17px;color:var(--graublau);}
.allesdl small{display:block;font-size:14px;color:var(--sek);margin-top:3px;line-height:1.45;}
.nebenwege{display:block;font-size:14px;line-height:1.6;color:var(--sek);margin-top:2px;}
.nebenwege a{color:var(--preisblau);}

/* Materialliste je Etappe: was der Laden herunterladen kann */
.matgrid{display:grid; gap:14px; margin-top:18px;}
.matkarte{background:var(--papier); border:1px solid var(--rand); border-radius:9px;
  padding:16px 18px; display:flex; flex-direction:column; gap:10px;}
.matkarte .mk{display:flex; align-items:baseline; justify-content:space-between; gap:12px;}
.matkarte h3{font-size:17px; line-height:1.25;}
.matkarte .format{font-size:12.5px; color:var(--sek); white-space:nowrap;}
.matkarte p{font-size:14.5px; line-height:1.5; color:var(--text);}
/* „Wohin gehört das?" ist die erste Frage im Laden — deshalb steht sie direkt
   unter dem Titel und nicht im Fließtext. Der Punkt davor ist grün, weil Grün
   im Laden als „passt, kann losgehen" gelesen wird. Der Text bleibt graublau:
   Salbei ist im System Bio/kbA vorbehalten, ein 7-px-Punkt ist die kleinste
   Dosis, die den Signalzweck erfüllt. */
.matkarte .wohin{display:flex; align-items:baseline; gap:8px; font-size:14px;
  font-weight:600; color:var(--graublau); line-height:1.4;}
.matkarte .wo-marke{flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--salbei); transform:translateY(-2px);}
.matkarte .mkhinweis{font-size:13.5px; color:var(--sek); line-height:1.45;}
.matkarte .knoepfe{margin-top:auto; display:flex; flex-direction:column;
  align-items:flex-start; gap:7px;}
.matkarte .btn{font-size:13.5px; padding:7px 13px;}
/* Das Verkostungsplakat sah als einziges Stück anders aus — gestrichelt und
   in Ocker. Dass es optional ist, steht ohnehin in der Formatzeile und im
   ersten Halbsatz seiner Beschreibung; die Sonderbehandlung machte die Reihe
   nur unruhig. */

/* Aufbau-Hinweis auf der Hauptseite */
.aufbau{display:grid; gap:16px; margin-top:18px;}
.aufbaukarte{background:var(--papier); border:1px solid var(--rand); border-radius:9px;
  padding:18px 20px;}
.aufbaukarte .nr{font:800 15px 'Bitter',serif; color:var(--weiss); background:var(--wein);
  width:28px; height:28px; border-radius:50%; display:flex; align-items:center;
  justify-content:center;}
.aufbaukarte h3{font-size:17.5px; margin:10px 0 5px;}
.aufbaukarte p{font-size:15px; line-height:1.55;}
.aufbaukarte .karteweiter{margin-top:10px; font-size:14.5px;}

/* Ablaufkarten mit Vorschaubild — dasselbe Muster wie „So funktioniert die
   Wein-Reise" auf der Genussreisen-Seite. Die Ziffer sitzt auf der Bildkante,
   und eine gepunktete Linie auf derselben Höhe verbindet die vier Schritte zu
   einem Ablauf. Die Linie liegt hinter den Karten und ist deshalb nur in den
   Lücken zu sehen — sie verbindet, ohne durch das Bild zu laufen. */
.aufbaukarte.mitbild{padding:0; overflow:hidden; display:flex; flex-direction:column;
  position:relative; z-index:1;}
.aufbaukarte.mitbild .kbild{background:var(--panel); border-bottom:1px solid var(--rand);}
.aufbaukarte.mitbild .kbild img{width:100%; height:190px; object-fit:cover; display:block;}
.aufbaukarte.mitbild .kinhalt{padding:16px 20px 20px;}
.aufbaukarte.mitbild .nr{margin-bottom:9px;}

/* Reisekarte auf der Hauptseite */
.reisekarte{display:flex; gap:22px; align-items:center; background:var(--papier);
  border:1px solid var(--rand); border-radius:11px; padding:20px 22px; margin-top:18px;
  text-decoration:none; color:inherit;}
.reisekarte img{flex:none; width:190px; border-radius:8px;}
.reisekarte h3{font-size:22px; margin-bottom:5px;}
.reisekarte .hand{display:block; margin-bottom:8px;}
.reisekarte p{font-size:15.5px; line-height:1.55;}
.reisekarte .weiter{margin-top:10px; font-weight:600; color:var(--wein);}

@media (min-width:760px){
  .matgrid{grid-template-columns:1fr 1fr;}
  .aufbau{grid-template-columns:repeat(3, 1fr);}
  .aufbau.vier{grid-template-columns:repeat(2, 1fr);}
}
@media (min-width:1040px){
  .aufbau.vier{grid-template-columns:repeat(4, 1fr);}
  /* Erst bei vier Spalten nebeneinander ergibt eine waagerechte Linie einen
     Ablauf; darunter stehen die Karten unter- oder nebeneinander und die Linie
     würde ins Leere zeigen. */
  .aufbau.verbunden{position:relative;}
  .aufbau.verbunden::before{content:""; position:absolute; left:0; right:0; top:190px;
    border-top:2px dotted var(--rand); z-index:0;}
  .aufbau.verbunden .aufbaukarte.mitbild .nr{position:absolute; top:190px; left:20px;
    transform:translateY(-50%); box-shadow:0 0 0 3px var(--papier);}
  .aufbau.verbunden .aufbaukarte.mitbild .kinhalt{padding-top:24px;}
  /* Drei Spalten: Jede Gruppe steht damit in einer Reihe, statt dass die
     dritte Karte allein in der zweiten hängt. */
  .matgrid{grid-template-columns:repeat(3, 1fr);}
}
@media (max-width:640px){
  .matkarte .mk{align-items:flex-start; flex-direction:column; gap:4px;}
  .matkarte .format{white-space:normal;}
  .reisekarte{flex-direction:column; align-items:flex-start;}
  .reisekarte img{width:100%;}
}


/* ---- Vorschau der Entdecken-Seite ----
   Das Bildschirmfoto entsteht im Bauskript aus der wirklich gebauten Seite.
   Der Rahmen ist bewusst schlicht: Er soll sagen „das ist ein Telefon", nicht
   ein Gerät nachbilden. */
.entdeckengrid{display:grid; gap:26px; margin-top:18px; align-items:start;}
/* Das Bild bekommt seine Rundung selbst. Verlässt man sich allein auf
   overflow:hidden am Rahmen, blitzen in Chrome beim Neuzeichnen immer wieder
   eckige Ecken durch — der Zuschnitt hängt dort an der Kompositionsebene und
   greift nicht zuverlässig. Innenradius = Außenradius minus Rahmenbreite. */
.telefon{justify-self:center; width:250px; border:9px solid var(--graublau);
  border-radius:26px; overflow:hidden; background:var(--graublau);
  box-shadow:0 18px 36px -22px rgba(40,49,64,.55);}
.telefon img{display:block; width:100%; border-radius:17px;}
/* Der Code, sein Satz und der Knopf zum Selbstansehen gehören zusammen. Vorher
   war der Kasten eine breite, flache Leiste mit einem kleinen Code links und
   viel Luft rechts, und der Knopf hing darunter ohne Bezug. Jetzt eine Karte in
   Lesebreite: Code groß genug zum Scannen vom Bildschirm, Text und Knopf
   daneben. */
.qrblock{display:flex; gap:20px; align-items:flex-start; margin-top:22px; max-width:560px;
  background:var(--papier); border:1px solid var(--rand); border-radius:9px; padding:20px 22px;}
.qrblock img{flex:none; width:104px; height:104px;}
.qrblock .btn{margin-top:12px;}
.qrblock b{display:block; font-family:'Bitter',Georgia,serif; font-size:16px; color:var(--graublau);}
.qrblock span{display:block; font-size:14px; line-height:1.5; color:var(--sek); margin-top:4px;}
.entdeckengrid .cta{margin-top:20px;}

@media (min-width:820px){
  /* Mittig ausgerichtet: Der Text ist kürzer als das hohe Telefonbild — oben
     bündig bliebe rechts eine große leere Fläche stehen. */
  .entdeckengrid{grid-template-columns:250px 1fr; gap:38px; align-items:center;}
  .telefon{justify-self:start;}
}

/* Das Logo im Kopf statt einer Wortmarke — die Ladenseite ist die Seite, auf
   der bestellt wird, hier gehört der Absender hin. */
.topbar img.logo{width:180px;height:auto;}

/* Zwei Absätze hintereinander brauchen Luft. Die Regel steht hier und nicht in
   stil.css: Die ist eine Kopie aus dem Kistenbereich und darf sich nicht
   auseinanderentwickeln. */
p.lauftext + p.lauftext{margin-top:14px;}

/* Die Einzelheiten zum Drucken stehen nicht mehr im ersten Absatz: Wer Material
   sucht, will erst sehen, was es gibt. Wer druckt, klappt sie auf. */
.druckhilfe{margin-top:26px; border-top:1px solid var(--rand); padding-top:14px;}
.druckhilfe summary{font-weight:600; color:var(--graublau); cursor:pointer;
  font-size:15.5px; list-style:none;}
.druckhilfe summary::-webkit-details-marker{display:none;}
.druckhilfe summary::before{content:"+ "; color:var(--wein); font-weight:700;}
.druckhilfe[open] summary::before{content:"– ";}
.druckhilfe ul{margin:12px 0 0 0; padding-left:20px; max-width:760px;}
.druckhilfe li{font-size:14.5px; line-height:1.55; margin-bottom:7px; color:var(--text);}

/* Abbild der Druckseite in der Materialkarte. Gezeigt wird die ganze Seite,
   nicht ein einzelnes Stück: So ist zu sehen, dass acht Regalkarten auf einen
   Bogen gehen und wie groß eine davon ausfällt. Hoch- und Querformate stehen
   im selben Kasten, deshalb „contain" und eine feste Höhe — sonst begännen die
   Überschriften der Karten auf verschiedenen Höhen. */
.matkarte .mvbild{height:132px; margin:-16px -18px 4px; background:var(--well);
  border-bottom:1px solid var(--rand); border-radius:8px 8px 0 0; display:flex;
  align-items:center; justify-content:center; padding:11px;}
.matkarte .mvbild img{max-width:100%; max-height:100%; width:auto; height:auto;
  display:block; box-shadow:0 4px 10px -4px rgba(66,79,92,.5);}
/* Die Karte selbst hat Innenabstand; der Vorschaustreifen liegt bündig an ihren
   Kanten und braucht deshalb einen negativen Rand. */
.matkarte{overflow:hidden;}

/* Hochformatige Winzerporträts größer zeigen: Eingepasst in den flachen
   Standardkasten blieben sie sehr klein — bei Etappe 4 ist das Bild aber das
   historische Porträt der Namensgeberin und trägt die Geschichte. */
.winzerfoto.hoch img{height:340px;}

/* Die Downloadliste ist ein Raster aus zwei Spalten. Steht dort nur ein
   Eintrag — auf der Übersicht das Paket je Etappe —, klebte er in der linken
   Spalte, und die sieben Etappenknöpfe brachen um, obwohl rechts die halbe
   Breite frei blieb. Ein einzelner Eintrag nimmt jetzt beide Spalten. */
.dlliste > .dl:only-child{grid-column:1 / -1;}