/* ==========================================================================
   directions.css — Seitenstile fuer die Anfahrt (views/directions.php)
   Alles hier traegt das Praefix "directions". Gemeinsame Bausteine
   (.card, .note, .stepper, .ctaBand, .mapSketch) kommen aus dem Kontrakt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Einstieg
   -------------------------------------------------------------------------- */
.directionsIntro{
  overflow:hidden;
}

.directionsIntro > .wrap{
  position:relative;
  z-index:1;
}

.directionsIntro__actions{
  margin-top:var(--s5);
}


/* --------------------------------------------------------------------------
   2. Lageskizze
   Die Skizze ist eine eigene Zeichnung: keine Fremdkarte, kein Kacheldienst.
   Alle Farben stammen aus den Tokens, alle Masse aus dem viewBox-Raster
   760 x 600. Die Schriftgroessen wachsen auf schmalen Geraeten mit, weil
   das SVG dort stark verkleinert dargestellt wird.
   -------------------------------------------------------------------------- */
.directionsMap{
  display:block;
  width:100%;
  height:auto;
}

.mapSketch .directionsMap__sheet{
  fill:var(--paper);
  stroke:var(--line);
  stroke-width:1.6;
  stroke-dasharray:12 9;
  stroke-linecap:round;
}

/* Das Baugebiet: weiche Flaeche mit gestricheltem Rand. */
.mapSketch .directionsMap__area{
  fill:var(--stone-100);
  stroke:var(--stone-300);
  stroke-width:1.8;
  stroke-dasharray:10 8;
  stroke-linecap:round;
}

/* Unterlage aller Strassen — gibt den Linien Koerper. */
.mapSketch .directionsMap__casing{
  fill:none;
  stroke:var(--sand-3);
  stroke-width:15;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mapSketch .directionsMap__road{
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mapSketch .directionsMap__road--main{
  stroke:var(--clay-600);
  stroke-width:3.6;
}

.mapSketch .directionsMap__road--side{
  stroke:var(--stone-600);
}

/* Die zweite, versetzte Linie laesst die Hauptstrecke handgezeichnet wirken. */
.mapSketch .directionsMap__echo path{
  fill:none;
  stroke:var(--clay-300);
  stroke-width:1.2;
  stroke-linecap:round;
  opacity:.55;
}

/* Bruecke ueber der Strasse = Unterfuehrung. */
.mapSketch .directionsMap__bridge path{
  fill:none;
  stroke:var(--ink-faint);
  stroke-width:3.4;
  stroke-linecap:round;
}

.mapSketch .directionsMap__buildingBody{
  fill:var(--sand-2);
  stroke:var(--ink-faint);
  stroke-width:1.8;
  stroke-linejoin:round;
}

.mapSketch .directionsMap__buildingRoof{
  fill:none;
  stroke:var(--clay-500);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mapSketch .directionsMap__buildingDoor{
  fill:none;
  stroke:var(--ink-faint);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mapSketch .directionsMap__arrow path{
  fill:var(--stone-700);
  stroke:none;
}

/* Wegnummern 1 und 2 — die Legende darunter nennt sie im Klartext. */
.mapSketch .directionsMap__key{
  transform-box:fill-box;
  transform-origin:center;
}

.mapSketch .directionsMap__key circle{
  fill:var(--paper);
  stroke:var(--stone-600);
  stroke-width:2;
}

.mapSketch .directionsMap__keyNum{
  font-family:var(--font-sans);
  font-size:17px;
  font-weight:700;
  fill:var(--stone-800);
  letter-spacing:0;
}

.mapSketch .directionsMap__pinHalo{
  fill:var(--clay-100);
  opacity:.75;
}

.mapSketch .directionsMap__pin{
  fill:var(--clay-600);
  stroke:var(--clay-800);
  stroke-width:1.4;
  stroke-linejoin:round;
}

.mapSketch .directionsMap__pinDot{
  fill:var(--sand);
}

/* Beschriftung: die Grundgroesse gilt ab Tablet, darunter waechst sie mit. */
.mapSketch .directionsMap__label{
  font-family:var(--font-sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.01em;
  fill:var(--ink-soft);
}

.mapSketch .directionsMap__label--street{
  fill:var(--clay-800);
}

.mapSketch .directionsMap__label--pin{
  fill:var(--clay-800);
  font-weight:700;
}

.mapSketch .directionsMap__label--soft{
  fill:var(--stone-700);
  font-weight:600;
}

.mapSketch .directionsMap__place{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  letter-spacing:.09em;
  fill:var(--ink-mute);
}

@media (max-width:860px){
  .mapSketch .directionsMap__label{font-size:14px;}
  .mapSketch .directionsMap__place{font-size:23px;}
  .mapSketch .directionsMap__key{transform:scale(1.25);}
}

@media (max-width:560px){
  .mapSketch .directionsMap__label{font-size:19px;}
  .mapSketch .directionsMap__place{font-size:30px;}
  .mapSketch .directionsMap__key{transform:scale(1.6);}
  .mapSketch .directionsMap__casing{stroke-width:18;}
  .mapSketch .directionsMap__road{stroke-width:4;}
  .mapSketch .directionsMap__road--main{stroke-width:4.6;}
}

@media (max-width:420px){
  .mapSketch .directionsMap__label{font-size:27px;}
  .mapSketch .directionsMap__place{font-size:40px;}
  .mapSketch .directionsMap__key{transform:scale(2);}
  .mapSketch .directionsMap__casing{stroke-width:21;}
  .mapSketch .directionsMap__road{stroke-width:5;}
  .mapSketch .directionsMap__road--main{stroke-width:5.6;}
  .mapSketch .directionsMap__bridge path{stroke-width:4.6;}
}

/* Legende zur Skizze: die beiden Anfahrtswege im Klartext. */
.directionsMap__legend{
  list-style:none;
  margin:var(--s4) 0 0;
  padding:0;
  display:grid;
  gap:var(--s2);
}

.directionsMap__legend > li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:.7rem;
  margin:0;
  font-size:var(--fs-sm);
  line-height:var(--lh-normal);
  color:var(--ink-soft);
}

.directionsMap__legendKey{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  border:1.5px solid var(--stone-400);
  background-color:var(--paper);
  font-family:var(--font-sans);
  font-size:var(--fs-xs);
  font-weight:700;
  line-height:1;
  color:var(--stone-800);
  font-variant-numeric:lining-nums;
}


/* --------------------------------------------------------------------------
   3. Externe Kartendienste — reine Aussenlinks, nichts wird eingebettet
   -------------------------------------------------------------------------- */
.directionsExternal{
  margin-top:clamp(2rem,4vw,3rem);
  max-width:74ch;
  display:grid;
  gap:var(--s4);
  justify-items:start;
  padding:clamp(1.25rem,3vw,1.75rem) clamp(1.25rem,3vw,2rem);
  border:1px dashed var(--line);
  border-radius:var(--r-md);
  background-color:var(--paper);
}

.directionsExternal__text{
  margin:0;
  max-width:66ch;
  font-size:var(--fs-sm);
  line-height:var(--lh-normal);
  color:var(--ink-soft);
}

.directionsExternal__hint{
  margin:0;
  font-size:var(--fs-xs);
  line-height:var(--lh-normal);
  color:var(--ink-mute);
}


/* --------------------------------------------------------------------------
   4. Die beiden Wegbeschreibungen
   -------------------------------------------------------------------------- */
.directionsRoute__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:var(--s3);
  counter-reset:directionsStep;
}

.directionsRoute__list > li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:.8rem;
  margin:0;
  counter-increment:directionsStep;
  font-size:var(--fs-sm);
  line-height:var(--lh-normal);
  color:var(--ink-soft);
}

.directionsRoute__list > li::before{
  content:counter(directionsStep);
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background-color:var(--clay-50);
  color:var(--clay-800);
  font-family:var(--font-sans);
  font-size:var(--fs-2xs);
  font-weight:700;
  line-height:1;
  font-variant-numeric:lining-nums;
}

.directionsRoutes .note{
  margin-top:clamp(1.75rem,4vw,2.5rem);
}


/* --------------------------------------------------------------------------
   5. Ankunft und Zugang
   -------------------------------------------------------------------------- */
/* Drei statt vier Schritte: der Bogen laeuft hier hinter den grossen Ziffern
   entlang, nicht quer durch die Zwischentitel. */
.directionsArrival .stepper__track{
  top:.6rem;
  height:2.6rem;
}

.directionsAccess{
  margin-top:clamp(2.25rem,5vw,3.5rem);
  max-width:64ch;
}

.directionsAccess .card__text{
  max-width:60ch;
}

.directionsAccess .card__foot{
  margin-top:var(--s2);
}


/* --------------------------------------------------------------------------
   6. Abschlussband
   Die Welle traegt die Farbe der Sektion davor (--sand-2) und laeuft
   dadurch organisch in das Terrakotta-Band hinein.
   -------------------------------------------------------------------------- */
.directionsCta .waveTop{
  color:var(--sand-2);
}

.directionsCta__body{
  padding-block:clamp(2.5rem,7vw,5rem) clamp(3.5rem,8vw,6rem);
}

.directionsCta .stack{
  max-width:62ch;
}