/* =====================================================
   DESIGN-D-SCHRITTE.CSS — Testdesign D2 „Reisebuch“, Schritte 1 bis 3

   Zuständig: Paket 3 (Schritt 1 und 2, Schritt 3 mit Liste, Karte, Karussell
   und Fußleiste).
   Geladen: index.html, Design-Schalter (nur html[data-design="d"]), nach
   css/design-d.css und design-d-start.css, vor design-d-ergebnis.css.
   Ohne den Schalter lädt diese Datei nicht.

   Markup-Ergänzungen kommen aus js/map.js (_initD, _renderCardD, Marker) und
   js/mustsee-sheet.js (Titel-Pille), jeweils nur unter ?design=d.
   Farben, Schrift, Abstände und Radien nur über die Tokens aus design-d.css.
   Rollen: Laub nur Handlung, Wegmarke nur Strecke, Tinte für Ringe und Text.
   ===================================================== */

/* =========================================================
   SCHRITTE 1 BIS 3: Kopf
   Der Kicker („Schritt 1, Basics“) entfällt, die Schrittleiste sagt es.
   Frage in der Kapitel-Stufe, Einleitung 17/1,5, Auswahlzeile in Klein.
   ========================================================= */
html[data-design="d"] .step-header .sh-kicker { display: none !important; }
html[data-design="d"] #step-1 .step-header,
html[data-design="d"] #step-2 .step-header,
html[data-design="d"] #step-3 .step-header { margin: 0 0 40px; padding: 0; }
html[data-design="d"] #step-1 .step-header h2,
html[data-design="d"] #step-2 .step-header h2,
html[data-design="d"] #step-3 .step-header h2 {
  margin: 0;
  font-size: var(--d-fs-kapitel);
  line-height: var(--d-lh-kapitel);
  font-weight: var(--d-fw-kapitel);
  letter-spacing: var(--d-track-kapitel);
  color: var(--d-tinte);
  text-wrap: balance;
}
html[data-design="d"] #step-1 .step-header > p:not(.d2s-auswahl),
html[data-design="d"] #step-2 .step-header > p:not(.d2s-auswahl),
html[data-design="d"] #step-3 .step-header > p:not(.d2s-auswahl) {
  margin: 12px 0 0;
  max-width: 60ch;
  font-size: 17px;
  line-height: 1.5;
  color: var(--d-tinte);
}
html[data-design="d"] #step-1 .step-header strong,
html[data-design="d"] #step-3 .step-header strong { font-weight: inherit; }
/* Auswahlzeile: „Japan, 14 Tage im Frühling, allein, Zug bevorzugt. Ändern“ */
html[data-design="d"] .d2s-auswahl {
  margin: 8px 0 0;
  font-size: var(--d-fs-klein);
  line-height: var(--d-lh-klein);
  font-weight: var(--d-fw-klein);
  color: var(--d-tinte-hell);
}
html[data-design="d"] .d2s-auswahl .d2-textknopf { font-size: inherit; line-height: inherit; text-underline-offset: 3px; }

/* Seitenleiste „Deine Route“: unsichtbar, aber weiter gepflegt (sie speist die
   Auswahlzeile). Am Handy stand sie als „Deine Auswahl“ über der Frage und
   wiederholte, was die Auswahlzeile und das Formular darunter zeigen. */
html[data-design="d"] #step-1 .step-sidebar,
html[data-design="d"] #step-2 .step-sidebar,
html[data-design="d"] #step-3 .step-sidebar { display: none !important; }

/* =========================================================
   SCHRITT 1 UND 2: ruhiges Formular, mittig, höchstens 880 px
   ========================================================= */
html[data-design="d"] #step-1, html[data-design="d"] #step-2, html[data-design="d"] #step-3 { background: var(--d-grund); }
html[data-design="d"] #step-1 > .container.step-stage,
html[data-design="d"] #step-2 > .container.step-stage {
  display: block;
  max-width: calc(880px + 2 * var(--d-seite));
  margin: 0 auto;
  padding: 48px var(--d-seite) 96px;
  background: transparent; box-shadow: none; border-radius: 0;
}
html[data-design="d"] #step-1.step, html[data-design="d"] #step-2.step { padding-top: 0; padding-bottom: 0; }

/* Abschnittsfragen („Wo kommst du an?“) als Zwischenzeile statt Versal-Label */
html[data-design="d"] .step-form .form-label,
html[data-design="d"] .pref-section-label {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
  margin: 0 0 14px;
  font-size: 17px; line-height: 1.35; font-weight: 620;
  letter-spacing: 0; text-transform: none;
  color: var(--d-tinte);
}
html[data-design="d"] .step-form .form-label::after,
html[data-design="d"] .pref-section-label::after { display: none; content: none; }
html[data-design="d"] .pref-section-hint { font-size: var(--d-fs-klein); font-weight: 450; letter-spacing: 0; color: var(--d-tinte-hell); }
html[data-design="d"] #step-1 .form-group { margin-bottom: 36px; }
html[data-design="d"] #step-1 .form-group.full-width > .form-label ~ .form-label { margin-top: 24px; }

/* Auswahlkacheln: Kalk, 1 px Linie, Radius 10, ohne Schatten, mindestens 88 px.
   Gewählt: Laub blass, 1,5 px Laub (1 px Rand + 0,5 px innen, damit nichts
   springt) und ein 18-px-Haken in Laub oben rechts. */
html[data-design="d"] .step-form .radio-card,
html[data-design="d"] .step-form .pace-card,
html[data-design="d"] .mode-block-v2 .mode-card {
  position: relative;
  min-height: 88px;
  background: var(--d-flaeche);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-ui);
  box-shadow: none;
  transform: none;
  transition: background-color .15s ease, border-color .15s ease;
}
html[data-design="d"] .step-form .radio-card:hover,
html[data-design="d"] .step-form .pace-card:hover,
html[data-design="d"] .mode-block-v2 .mode-card:hover {
  background: var(--d-flaeche-2);
  border-color: var(--d-line-stark);
  box-shadow: none;
  transform: none;
}
html[data-design="d"] .step-form .radio-card:active,
html[data-design="d"] .step-form .pace-card:active { transform: none; }
html[data-design="d"] .step-form .radio-card.active,
html[data-design="d"] .step-form .radio-card.selected,
html[data-design="d"] .step-form .radio-card:has(input:checked),
html[data-design="d"] .step-form .pace-card.active,
html[data-design="d"] .mode-block-v2 .mode-card.active,
html[data-design="d"] .mode-block-v2 .mode-card[aria-pressed="true"] {
  background: var(--d-laub-blass) !important;
  border-color: var(--d-laub) !important;
  box-shadow: inset 0 0 0 .5px var(--d-laub);
}
html[data-design="d"] .step-form .radio-card.active::after,
html[data-design="d"] .step-form .pace-card.active::after,
html[data-design="d"] .mode-block-v2 .mode-card.active::after {
  content: "";
  display: block;
  position: absolute; top: 8px; right: 8px;
  width: 18px; height: 18px;
  border-radius: 0;
  background: var(--d-laub);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.6l3.6 3.6L14.6 5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.6l3.6 3.6L14.6 5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
html[data-design="d"] .step-form .radio-card .radio-card-label,
html[data-design="d"] .mode-block-v2 .mode-card-title,
html[data-design="d"] .step-form .pace-card .pace-card-title {
  font-size: 15.5px; font-weight: 620; letter-spacing: 0; line-height: 1.3; color: var(--d-tinte);
}
html[data-design="d"] .step-form .radio-card .radio-card-desc,
html[data-design="d"] .mode-block-v2 .mode-card-desc,
html[data-design="d"] .step-form .pace-card .pace-card-desc { font-size: 13px; line-height: 1.4; letter-spacing: 0; color: var(--d-tinte-hell); }
/* Symbole in den Kacheln: Tinte auf Kiesel, gewählt Tinte ohne Fläche */
html[data-design="d"] .rc-svg .radio-card-icon,
html[data-design="d"] .pace-group-v2 .pace-card-icon { background: var(--d-kiesel); color: var(--d-tinte); }
html[data-design="d"] .rc-svg .radio-card.active .radio-card-icon,
html[data-design="d"] .pace-group-v2 .pace-card.active .pace-card-icon { background: rgba(var(--d-flaeche-rgb), .7); color: var(--d-tinte); }
html[data-design="d"] .mode-card-svg,
html[data-design="d"] .mode-block-v2 .mode-card.active .mode-card-svg { color: var(--d-tinte); }
html[data-design="d"] .rc-svg .rc-icon-badge { background: var(--d-flaeche); }
html[data-design="d"] .radio-card.rc-auto .radio-card-icon,
html[data-design="d"] .radio-card.rc-auto.active .radio-card-icon { color: var(--d-tinte); }
/* Flughafenkacheln: sechs passen in eine Reihe (880 px) */
html[data-design="d"] .step-form .radio-cards { gap: 12px; }
html[data-design="d"] .step-form .airport-cards,
html[data-design="d"] .step-form .return-toggle-cards { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
/* „Anderer Ankunftsort“: Feld ohne eigenen Kasten */
html[data-design="d"] .step-form .custom-airport-wrap { background: none; border: 0; padding: 0; margin-top: 16px; }
html[data-design="d"] .step-form .custom-airport-label { font-size: var(--d-fs-klein); color: var(--d-tinte-hell); }
html[data-design="d"] .step-form .custom-airport-hint { font-size: 13px; color: var(--d-tinte-hell); }
html[data-design="d"] .step-form .custom-airport-wrap input.form-input { border: 1.5px solid var(--d-feldrand); background: var(--d-flaeche); border-radius: var(--d-r-ui); }
/* Ablauf-Punkte unter „Wie soll die Route entstehen?“: Tinte statt Akzentfarbe */
html[data-design="d"] .mode-flow-dot { background: var(--d-kiesel-tief); }
html[data-design="d"] .mode-flow-dot.is-on { background: var(--d-tinte); opacity: 1; }
html[data-design="d"] .mode-flow-dot.is-skip { background: transparent; border-color: var(--d-tinte-hell); }
html[data-design="d"] .mode-card-flow, html[data-design="d"] .mode-flow-text { font-size: 12.5px; letter-spacing: 0; color: var(--d-tinte-hell); }

/* Schritt 2: Interessen als Kalk-Kacheln, Stufen als Segment 36 px (aktiv Tinte) */
html[data-design="d"] .pref-int {
  background: var(--d-flaeche);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-ui);
  box-shadow: none;
}
html[data-design="d"] .pref-int:hover { border-color: var(--d-line-stark); }
html[data-design="d"] .pref-int.is-high { background: var(--d-flaeche); border-color: var(--d-line-stark); }
html[data-design="d"] .pref-int-head svg,
html[data-design="d"] .pref-int.is-high .pref-int-head svg { color: var(--d-tinte); }
html[data-design="d"] .pref-int-title { font-size: 16.5px; font-weight: 620; letter-spacing: 0; line-height: 1.25; }
html[data-design="d"] .pref-int-sub { font-size: 13px; color: var(--d-tinte-hell); }
/* Die Stufe zeigt das Segment; das Zeichen oben rechts („✦“ bei Hoch, sonst „–“) entfällt */
html[data-design="d"] .pref-int-val { display: none; }
html[data-design="d"] .pref-seg {
  display: flex; gap: 2px;
  padding: 2px;
  background: var(--d-flaeche);
  border-radius: var(--d-r-rund);
  box-shadow: inset 0 0 0 1.5px var(--d-line-stark);
}
html[data-design="d"] .pref-seg button {
  min-height: 32px;
  padding: 0 8px;
  border-radius: var(--d-r-rund);
  font-size: 13.5px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--d-tinte-hell);
  background: transparent;
  box-shadow: none;
}
html[data-design="d"] .pref-seg button:hover { color: var(--d-tinte); background: var(--d-flaeche-2); }
html[data-design="d"] .pref-seg button.on,
html[data-design="d"] .pref-int.is-high .pref-seg button.on {
  background: var(--d-tinte);
  color: var(--d-flaeche);
  font-weight: 600;
  box-shadow: none;
}
html[data-design="d"] .pref-int.is-high .pref-seg { background: var(--d-flaeche); }
/* Handy: Segment 44 px hoch (Trefferfläche) */
@media (max-width: 768px) {
  html[data-design="d"] .pref-seg button { min-height: 40px; }
}

/* „Wie soll die Route entstehen?“: eigener Abschnitt mit Linie oben statt Kasten,
   ohne Versal-Trenner „Und zum Schluss“ */
html[data-design="d"] .route-mode-choice.mode-block-v2 {
  margin: 48px 0 0;
  padding: 36px 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--d-line);
  border-radius: 0;
  box-shadow: none;
}
html[data-design="d"] .mode-block-v2 .mode-divider { display: none; }
html[data-design="d"] .mode-block-title {
  margin: 0 0 6px;
  font-size: var(--d-fs-zwischen); line-height: var(--d-lh-zwischen);
  font-weight: var(--d-fw-zwischen); letter-spacing: var(--d-track-zwischen);
  color: var(--d-tinte);
}
html[data-design="d"] .mode-block-lede { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--d-tinte-hell); }
html[data-design="d"] .mode-block-v2 .mode-cards { gap: 12px; }
html[data-design="d"] .mode-block-v2 .mode-card { padding: 16px 40px 16px 18px; }

/* Navigation unten: „Zurück“ (Zweitknopf) links, Hauptknopf rechts, Linie oben */
html[data-design="d"] #step-1 .step-nav,
html[data-design="d"] #step-2 .step-nav {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--d-line);
}
html[data-design="d"] .step-nav .btn-primary { padding: 0 24px; }
html[data-design="d"] .step-nav .btn-outline { padding: 0 20px; }

/* =========================================================
   SCHRITT 3 AB 769 PX: Panel links, Karte rechts bis zur Fensterkante
   Panel 560 px (≥ 1100) bzw. 420 px (769 bis 1099). .mustsee-layout wird
   display: contents, Kartenspalte und Liste sind damit Zellen des Rasters
   der .step-form. Die Karte klebt zwischen Schrittleiste und Fußleiste.
   ========================================================= */
html[data-design="d"] #step-3 {
  --d2s-panel: 560px;
  --d2s-panel-r: 40px;
  --d2s-foto-w: 176px;
  --d2s-foto-h: 132px;
  --d2s-leiste: 49px;      /* Schrittleiste */
  --d2s-fuss: 76px;        /* Fußleiste */
}
@media (min-width: 769px) and (max-width: 1099px) {
  html[data-design="d"] #step-3 { --d2s-panel: 420px; --d2s-panel-r: 24px; --d2s-foto-w: 132px; --d2s-foto-h: 99px; }
}
@media (min-width: 769px) {
  /* In Schritt 3 bleibt die Schrittleiste stehen: die Karte dockt darunter an. Den Schritt
     setzt App.showStep als data-planschritt an <html> (statt body:has(), siehe design-d.css) */
  html[data-design="d"][data-planschritt="3"] .routaris-stepper.is-tucked { transform: none; opacity: 1; pointer-events: auto; }

  html[data-design="d"] #step-3.step { padding: 0; }
  html[data-design="d"] #step-3 > .container.step-stage {
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent; box-shadow: none; border-radius: 0;
  }
  html[data-design="d"] #step-3 .step-form {
    display: grid;
    grid-template-columns: var(--d2s-panel) minmax(0, 1fr);
    align-items: start;
    min-width: 0;
  }
  html[data-design="d"] #step-3 .mustsee-layout { display: contents; }
  html[data-design="d"] #step-3 .step-form > .step-header,
  html[data-design="d"] #step-3 .vmk-cards-col,
  html[data-design="d"] #step-3 .step-form > .mustsee-order-toggle,
  html[data-design="d"] #step-3 .step-form > .mustsee-nights-counter,
  html[data-design="d"] #step-3 .step-form > .vmk-notes-disclosure {
    grid-column: 1;
    min-width: 0;
    padding-left: var(--d-seite);
    padding-right: var(--d2s-panel-r);
  }
  html[data-design="d"] #step-3 .step-form > .step-header { margin: 0; padding-top: 20px; padding-bottom: 16px; }
  html[data-design="d"] #step-3 .step-header .d2s-auswahl { margin-top: 6px; }
  html[data-design="d"] #step-3 .step-header > p:not(.d2s-auswahl) { max-width: none; margin-top: 8px; }
  html[data-design="d"] #step-3 .vmk-cards-col { padding-bottom: calc(var(--d2s-fuss) + 32px); }
  /* Kartenspalte: klebt, füllt die Höhe zwischen Schrittleiste und Fußleiste */
  html[data-design="d"] #step-3 .mustsee-map-wrap {
    grid-column: 2;
    grid-row: 1 / span 12;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h, 72px) + var(--d2s-leiste));
    height: calc(100vh - var(--header-h, 72px) - var(--d2s-leiste) - var(--d2s-fuss));
    min-height: 360px;
    margin: 0;
    border-radius: 0;
    border-left: 1px solid var(--d-line);
    box-shadow: none;
    overflow: hidden;
  }
  html[data-design="d"] #step-3 #mustsee-map { height: 100%; width: 100%; border-radius: 0; }
  /* Fokus und Sprünge in der Liste halten Abstand zu Schrittleiste und Fußleiste (WCAG 2.4.11) */
  html[data-design="d"] #step-3 .vmk-cards-col,
  html[data-design="d"] #step-3 .vmk-cards-col * {
    scroll-margin-top: calc(var(--header-h, 72px) + var(--d2s-leiste) + 12px);
    scroll-margin-bottom: calc(var(--d2s-fuss) + 12px);
  }
  /* Die Schritt-Navigation im Formular entfällt: Zurück und Route erstellen stehen in der Fußleiste */
  html[data-design="d"] #step-3 .step-nav { display: none; }
}

/* Auswahlzeile in Schritt 3 ab 1100 px rechts in der Schrittleiste statt unter der
   Frage: das Panel gewinnt eine Zeile, damit drei Listenzeilen über der Fußleiste
   stehen (Abnahme 1440 × 900). Schritt 2 und schmalere Fenster behalten sie unter
   der Frage. */
html[data-design="d"] .d2s-auswahl--leiste { display: none; }
@media (min-width: 1100px) {
  html[data-design="d"][data-planschritt="3"] .d2s-auswahl--leiste {
    display: flex; align-items: baseline; gap: 6px;
    position: absolute; top: 50%; right: var(--d-seite);
    transform: translateY(-50%);
    max-width: calc(100% - 660px);
    margin: 0;
    white-space: nowrap;
  }
  html[data-design="d"] .d2s-auswahl--leiste .d2s-auswahl-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  html[data-design="d"] .d2s-auswahl--leiste .d2s-auswahl-aendern { flex: none; }
  html[data-design="d"] #step-3 .step-header .d2s-auswahl { display: none; }
}
/* Niedrige Desktop-Fenster: Frage in der Handy-Stufe der Kapitel (28), damit sie
   einzeilig bleibt; unter 800 px Höhe noch etwas enger (zwei Zeilen bei 1280 × 720) */
@media (min-width: 1100px) and (max-height: 960px) {
  html[data-design="d"] #step-3 .step-header h2 { font-size: 28px; line-height: 1.12; }
}


/* --- Werkzeuge: Suche 44 px, Reiter 36 px, Sortierhinweis als eine Zeile --- */
html[data-design="d"] #step-3 .vmk-cards-col { display: flex; flex-direction: column; }
html[data-design="d"] .vmk-addstop { margin: 0; }
html[data-design="d"] .vmk-addstop-field {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  background: var(--d-flaeche);
  border: 1.5px solid var(--d-feldrand);
  border-radius: var(--d-r-ui);
  box-shadow: none;
}
html[data-design="d"] .vmk-addstop-field:focus-within { border-color: var(--d-laub); box-shadow: none; }
html[data-design="d"] .vmk-addstop-search { color: var(--d-tinte-hell); flex: none; }
html[data-design="d"] .vmk-addstop-field input,
html[data-design="d"] .vmk-addstop-input {
  flex: 1; min-width: 0;
  min-height: 40px;
  padding: 0;
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  font-size: 15px; color: var(--d-tinte);
}
html[data-design="d"] .vmk-addstop-input:focus { outline: none; }
html[data-design="d"] .vmk-addstop-field:has(.vmk-addstop-input:focus-visible) { outline: 2.5px solid var(--d-tinte); outline-offset: 3px; }
html[data-design="d"] .vmk-addstop-action { margin-top: 10px; }
html[data-design="d"] .vmk-addstop-empty { font-size: var(--d-fs-klein); color: var(--d-tinte-hell); margin: 0 0 8px; }
html[data-design="d"] .vmk-addstop-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  background: transparent; color: var(--d-tinte);
  border: 1.5px solid var(--d-rand); border-radius: var(--d-r-ui);
  font-size: 15px; font-weight: 560; cursor: pointer;
}
html[data-design="d"] .vmk-addstop-btn:hover { background: var(--d-kiesel); }
html[data-design="d"] .vmk-addstop-plus { display: none; }
html[data-design="d"] .vmk-addstop-status { font-size: var(--d-fs-klein); color: var(--d-tinte-hell); }
html[data-design="d"] .vmk-addstop-status.error { color: var(--d-fehler); }

html[data-design="d"] .vmk-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
}
html[data-design="d"] .vmk-tab {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 36px;
  padding: 0 10px;
  font-size: 13.5px; font-weight: 520;
  letter-spacing: 0; text-transform: none;
  border: 1.5px solid var(--d-line-stark);
  border-radius: var(--d-r-rund);
  background: transparent;
  color: var(--d-tinte);
  white-space: nowrap;
}
html[data-design="d"] .vmk-tab:hover { background: var(--d-flaeche-2); }
html[data-design="d"] .vmk-tab:focus-visible { outline: 2.5px solid var(--d-tinte); outline-offset: 3px; }
/* Desktop: Reiter brechen um statt zu scrollen; ohne overflow schneidet der
   Container den Fokusring nicht mehr ab */
@media (min-width: 769px) {
  html[data-design="d"] #step-3 .vmk-tabs { overflow: visible; }
}
html[data-design="d"] .vmk-tab.active { background: var(--d-tinte); border-color: var(--d-tinte); color: var(--d-flaeche); font-weight: 600; }
html[data-design="d"] .vmk-tab .dest-tab-count {
  background: none; border: 0; padding: 0; min-width: 0;
  font-size: 13px; font-weight: 450;
  color: var(--d-tinte-hell);
  font-variant-numeric: tabular-nums;
}
/* Sortierhinweis: eine Zeile Klein, „Anpassen“ als Textknopf (ohne Funkel und Pfeil) */
html[data-design="d"] .vmk-pref-context,
html[data-design="d"] .vmk-pref-context.is-empty {
  display: block;
  margin: 6px 0 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: var(--d-fs-klein);
  line-height: var(--d-lh-klein);
  color: var(--d-tinte-hell);
}
html[data-design="d"] .vmk-pref-context:empty { display: none; }
html[data-design="d"] .vmk-pref-text { color: var(--d-tinte-hell); }
html[data-design="d"] .vmk-pref-edit {
  background: none !important; border: 0 !important; border-radius: 0; box-shadow: none; padding: 0;
  font-size: inherit; color: var(--d-laub); font-weight: 560;
  text-decoration: underline; text-decoration-thickness: 1.5px;
  text-underline-offset: 3px; text-decoration-color: rgba(var(--d-laub-rgb), .45);
  cursor: pointer;
}
html[data-design="d"] .vmk-pref-edit:hover { color: var(--d-laub-tief); text-decoration-color: currentColor; }
html[data-design="d"] .vmk-pref-edit svg { display: none; }
/* Sprunglink (Tastatur): unsichtbar, bis er den Fokus hat */
html[data-design="d"] .d2s-sprung {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
html[data-design="d"] .d2s-sprung:focus {
  position: static; width: auto; height: auto; overflow: visible; clip-path: none;
  align-self: flex-start;
  margin-top: 8px; padding: 6px 10px;
  background: var(--d-flaeche); border-radius: var(--d-r-ui);
  color: var(--d-laub); font-size: var(--d-fs-klein); font-weight: 560;
  text-decoration: underline; text-underline-offset: 3px;
}
html[data-design="d"] .msheet .d2s-sprung { display: none; }

/* Hinweis bei zu vielen Pins oder langen Strecken: Kalk mit Tinte-Leiste */
html[data-design="d"] .pin-density-warning.is-warn,
html[data-design="d"] .pin-density-warning.is-info {
  margin: 14px 0 0;
  padding: 10px 14px 10px 12px;
  background: var(--d-flaeche);
  border: 1px solid var(--d-line);
  border-left: 3px solid var(--d-tinte);
  border-radius: var(--d-r-ui);
  color: var(--d-tinte);
  font-size: var(--d-fs-klein); line-height: var(--d-lh-klein);
}
html[data-design="d"] .pin-density-warning .pdw-icon,
html[data-design="d"] .pin-density-warning .pdw-title { color: var(--d-tinte); }
html[data-design="d"] .pin-density-warning .pdw-text { color: var(--d-tinte); font-size: var(--d-fs-klein); }

/* --- Liste: Zeilen 176 | 1fr statt Kachelraster --- */
html[data-design="d"] #step-3 .mustsee-grid { display: block; margin-top: 8px; }
html[data-design="d"] .d2s-zeile.dest-card {
  display: grid;
  grid-template-columns: var(--d2s-foto-w) minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
  position: relative;
  margin: 0;
  padding: 12px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--d-line);
  border-radius: 0;
  box-shadow: none;
  transform: none;
  overflow: visible;
  cursor: default;
  transition: background-color .15s ease, box-shadow .15s ease;
}
html[data-design="d"] .d2s-zeile.dest-card::before { display: none; content: none; }
html[data-design="d"] .d2s-zeile.dest-card:active { transform: none; }
/* Hover, Fokus und Kopplung von der Karte: Kalk 2 als Fläche (seitlich 12 px über die Spalte) */
html[data-design="d"] .d2s-zeile.dest-card:hover,
html[data-design="d"] .d2s-zeile.dest-card:focus-within,
html[data-design="d"] .d2s-zeile.dest-card.is-karte {
  background: var(--d-flaeche-2);
  box-shadow: -12px 0 0 var(--d-flaeche-2), 12px 0 0 var(--d-flaeche-2);
  border-color: var(--d-line);
  transform: none;
}
html[data-design="d"] .d2s-zeile.dest-card:focus-visible { outline: 2.5px solid var(--d-tinte); outline-offset: 2px; }
html[data-design="d"] .d2s-zeile.pinned.dest-card { background: transparent; border-color: var(--d-line); box-shadow: none; }
html[data-design="d"] .d2s-zeile.pinned.dest-card:hover,
html[data-design="d"] .d2s-zeile.pinned.dest-card:focus-within,
html[data-design="d"] .d2s-zeile.pinned.dest-card.is-karte {
  background: var(--d-flaeche-2);
  box-shadow: -12px 0 0 var(--d-flaeche-2), 12px 0 0 var(--d-flaeche-2);
}
/* Foto 176 × 132 (Tablet 132 × 99), Radius 4, Quelle unten links */
html[data-design="d"] .d2s-zeile .vmk-card-photo.d2s-foto {
  position: relative;
  margin: 0;
  width: var(--d2s-foto-w);
  height: var(--d2s-foto-h);
  border-radius: var(--d-r-foto);
  overflow: hidden;
  background: var(--d-kiesel) !important;
}
html[data-design="d"] .d2s-zeile .d2s-foto .dest-card-img { object-fit: cover; }
html[data-design="d"] .d2s-zeile .img-wiki-credit,
html[data-design="d"] .d2s-zeile .img-wiki-credit.img-credit-sm {
  left: 6px; right: auto; bottom: 6px;
  max-width: calc(100% - 12px);
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(var(--d-flaeche-rgb), .9);
  color: var(--d-tinte);
  text-shadow: none;
  font-size: 11.5px; line-height: 1.3; font-weight: 460; letter-spacing: 0;
  text-align: left;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-design="d"] .d2s-zeile .img-wiki-credit a { color: inherit; text-decoration: none; }
html[data-design="d"] .d2s-zeile .img-wiki-credit a:hover { text-decoration: underline; }
/* Stempel: „Ankunft“ Kiesel-Pille, „Passt zu dir“ und „Geheimtipp“ Kalk-Pille */
html[data-design="d"] .d2s-stempel {
  position: absolute; left: 6px; top: 6px; z-index: 2;
  padding: 3px 9px;
  border-radius: var(--d-r-rund);
  background: var(--d-flaeche);
  color: var(--d-tinte);
  font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: 0;
}
html[data-design="d"] .d2s-stempel--ankunft { background: var(--d-kiesel); }
/* Eigener Ort ohne Foto (Bildrechte): Kiesel mit Ortszeichen */
html[data-design="d"] .d2s-foto--eigen { display: grid; place-items: center; }
html[data-design="d"] .d2s-eigen-zeichen { fill: none; stroke: var(--d-tinte-hell); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Text der Zeile */
html[data-design="d"] .d2s-zeile .dest-card-body {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
  padding: 0;
}
html[data-design="d"] .d2s-zeile .dest-card-name {
  margin: 0;
  font-size: 18px; line-height: 1.2; font-weight: 640; letter-spacing: 0;
  color: var(--d-tinte);
}
html[data-design="d"] .d2s-moment,
html[data-design="d"] .d2s-ausflug,
html[data-design="d"] .d2s-strecke {
  margin: 0;
  font-size: 13.5px; line-height: 1.35; font-weight: 450;
  color: var(--d-tinte-hell);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Ausflug: eine Zeile (voller Text im title); dann kürzt die Beschreibung auf eine */
html[data-design="d"] .d2s-ausflug { font-size: 13px; }
html[data-design="d"] .d2s-zeile:has(.d2s-ausflug) .dest-card-desc { -webkit-line-clamp: 1; }
html[data-design="d"] .d2s-strecke { display: flex; align-items: center; gap: 7px; }
html[data-design="d"] .d2s-zeile .dest-card-desc {
  margin: 2px 0 0;
  font-size: 14.5px; line-height: 1.45;
  color: var(--d-tinte);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html[data-design="d"] .d2s-familie { margin-top: 4px; }
html[data-design="d"] .d2s-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 6px;
}
html[data-design="d"] .d2s-fuss .vmk-card-meta {
  min-width: 0; font-size: 13.5px; line-height: 1.35; color: var(--d-tinte-hell);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Anpinnen: 36-px-Pille mit Laub-Rand; gepinnt Laub blass mit Haken */
html[data-design="d"] .d2s-anpinnen {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px;
  padding: 0 15px;
  border: 1.5px solid var(--d-laub);
  border-radius: var(--d-r-rund);
  background: transparent;
  color: var(--d-laub);
  font-size: 14px; font-weight: 600; line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease;
}
html[data-design="d"] .d2s-anpinnen:hover { background: var(--d-laub-blass); }
html[data-design="d"] .d2s-anpinnen.is-an { background: var(--d-laub-blass); padding-left: 11px; }
html[data-design="d"] .d2s-anpinnen.is-an:hover { background: var(--d-flaeche); }
html[data-design="d"] .d2s-haken { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
html[data-design="d"] .d2s-anpinnen.d2s-entfernen { border-color: var(--d-rand); color: var(--d-tinte); background: transparent; padding-left: 15px; }
html[data-design="d"] .d2s-anpinnen.d2s-entfernen:hover { background: var(--d-kiesel); }
/* Nächte-Stepper unter „Gepinnt“: 36-px-Pille, Richtwert steht schon in der Fußzeile */
html[data-design="d"] .d2s-zeile .vmk-card-nights {
  margin-top: 8px; padding: 0; gap: 0;
  background: none; border: 0; border-radius: 0;
}
html[data-design="d"] .d2s-zeile .vmk-card-nights-row {
  display: inline-flex; align-items: center; gap: 2px;
  align-self: flex-start;
  height: 36px;
  padding: 0 3px 0 14px;
  border: 1.5px solid var(--d-line-stark);
  border-radius: var(--d-r-rund);
  background: var(--d-flaeche);
}
html[data-design="d"] .d2s-zeile .vmk-card-nights-label {
  flex: none; margin-right: 6px;
  font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--d-tinte-hell);
}
html[data-design="d"] .d2s-zeile .vmk-card-nights-btn {
  width: 30px; height: 30px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--d-tinte);
  font-size: 17px; font-weight: 500;
  transform: none;
}
html[data-design="d"] .d2s-zeile .vmk-card-nights-btn:hover:not(:disabled) { background: var(--d-kiesel); color: var(--d-tinte); transform: none; }
/* Trefferfläche 44 × 44 um die sichtbaren 30-px-Knöpfe (Nächte und Reihenfolge) */
html[data-design="d"] .d2s-zeile .vmk-card-nights-btn,
html[data-design="d"] .d2s-zeile .vmk-card-order-btn { position: relative; }
html[data-design="d"] .d2s-zeile .vmk-card-nights-btn::before,
html[data-design="d"] .d2s-zeile .vmk-card-order-btn::before {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
}
html[data-design="d"] .d2s-zeile .vmk-card-nights-btn:disabled { opacity: .35; }
html[data-design="d"] .d2s-zeile .vmk-card-nights-value,
html[data-design="d"] .d2s-zeile .vmk-card-nights-value.is-auto {
  min-width: 70px; text-align: center;
  font-size: 14px; font-weight: 560; color: var(--d-tinte);
  font-variant-numeric: tabular-nums;
}
html[data-design="d"] .d2s-zeile .vmk-card-nights-hint { display: none; }
html[data-design="d"] .d2s-zeile.pinned .dest-card-desc,
html[data-design="d"] .d2s-zeile.pinned .d2s-ausflug { display: none; }
/* Reihenfolge-Stepper (nur mit „Reihenfolge selbst festlegen“) */
html[data-design="d"] .d2s-zeile .vmk-card-order {
  display: inline-flex; align-items: center; gap: 2px;
  align-self: flex-start;
  margin-top: 8px; height: 36px; padding: 0 3px 0 14px;
  border: 1.5px solid var(--d-line-stark); border-radius: var(--d-r-rund);
  background: var(--d-flaeche);
}
html[data-design="d"] .d2s-zeile .vmk-card-order-label { margin-right: 6px; font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--d-tinte-hell); }
html[data-design="d"] .d2s-zeile .vmk-card-order-btn { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--d-tinte); }
html[data-design="d"] .d2s-zeile .vmk-card-order-btn:hover:not(:disabled) { background: var(--d-kiesel); }
html[data-design="d"] .d2s-zeile .vmk-card-order-value { min-width: 40px; text-align: center; font-size: 14px; font-weight: 560; font-variant-numeric: tabular-nums; }
/* Strecken-Linie vor „Garden Route“: das Zeichen der Strecke in Wegmarke */
html[data-design="d"] .vmk-route-line { background: var(--d-weg); }
html[data-design="d"] .vmk-route-line::before,
html[data-design="d"] .vmk-route-line::after { background: var(--d-weg); }
/* Leere Auswahl („Gepinnt“ ohne Pins) */
html[data-design="d"] .d2s-leer {
  margin: 0; padding: 20px 0;
  border-top: 1px solid var(--d-line);
  font-size: 15px; line-height: 1.5; color: var(--d-tinte-hell);
}

/* Strecken-Hinweis als Einschub zwischen den Zeilen */
html[data-design="d"] #step-3 .mustsee-grid > .vmk-routehint {
  margin: 0 0 16px;
  padding: 16px;
  background: var(--d-flaeche);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-flaeche);
  box-shadow: none;
}
html[data-design="d"] .vmk-routehint-head { font-size: 15px; color: var(--d-tinte); }
html[data-design="d"] .vmk-routehint-tx { font-size: var(--d-fs-klein); color: var(--d-tinte-hell); }
html[data-design="d"] .vmk-routehint-chip { border-radius: var(--d-r-ui); }
html[data-design="d"] .vmk-routehint-btn { min-height: 40px; border-radius: var(--d-r-ui); }
html[data-design="d"] .vmk-routehint-btn--primary { background: var(--d-laub); border-color: var(--d-laub); color: #fff; }

/* Fenster unter 800 px Höhe (z. B. 1280 × 720): Kopf und Werkzeuge enger,
   steht hinter den Grundregeln, damit es gewinnt */
@media (min-width: 1100px) and (max-height: 800px) {
  html[data-design="d"] #step-3 .step-form > .step-header { padding-top: 12px; padding-bottom: 12px; }
  html[data-design="d"] #step-3 .step-header h2 { font-size: 26px; }
  html[data-design="d"] #step-3 .step-header > p:not(.d2s-auswahl) { margin-top: 6px; }
  html[data-design="d"] #step-3 .mustsee-grid { margin-top: 4px; }
  html[data-design="d"] #step-3 .vmk-pref-context { margin-top: 4px; }
}

/* „Mehr Optionen“ am Listenende: Chevron vorn, Inhalt darunter */
html[data-design="d"] .d2s-optionen {
  margin-top: 8px;
  border-top: 1px solid var(--d-line);
  border-bottom: 1px solid var(--d-line);
}
html[data-design="d"] .d2s-optionen-kopf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-height: 52px; padding: 8px 0;
  list-style: none;
  cursor: pointer;
  font-size: 16px; font-weight: 620; color: var(--d-tinte);
}
html[data-design="d"] .d2s-optionen-kopf::-webkit-details-marker { display: none; }
html[data-design="d"] .d2s-optionen-hinweis { font-size: var(--d-fs-klein); font-weight: 450; color: var(--d-tinte-hell); }
html[data-design="d"] .d2s-chevron { flex: none; fill: none; stroke: var(--d-tinte); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
html[data-design="d"] .d2s-optionen[open] > .d2s-optionen-kopf .d2s-chevron { transform: rotate(90deg); }
html[data-design="d"] .d2s-optionen-inhalt { display: grid; gap: 16px; padding: 4px 0 20px; }
/* Reihenfolge-Schalter als ruhige Zeile mit Zustand */
html[data-design="d"] .mustsee-order-toggle {
  display: inline-flex; align-items: center; gap: 10px; justify-self: start;
  min-height: 44px; margin: 0; padding: 0 16px;
  background: transparent;
  border: 1.5px solid var(--d-rand);
  border-radius: var(--d-r-ui);
  color: var(--d-tinte);
  font-size: 15px; font-weight: 560;
  box-shadow: none;
}
html[data-design="d"] .mustsee-order-toggle:hover { background: var(--d-kiesel); }
html[data-design="d"] .mustsee-order-toggle .mot-state {
  padding: 2px 8px; border-radius: var(--d-r-rund);
  background: var(--d-kiesel); color: var(--d-tinte);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
}
html[data-design="d"] .mustsee-order-toggle[aria-pressed="true"] { background: var(--d-laub-blass); border-color: var(--d-laub); }
html[data-design="d"] .mustsee-order-toggle[aria-pressed="true"] .mot-state { background: var(--d-laub); color: #fff; }
/* Nächte-Zähler */
html[data-design="d"] .mustsee-nights-counter {
  margin: 0; padding: 12px 14px;
  background: var(--d-flaeche);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-ui);
  box-shadow: none;
}
html[data-design="d"] .mustsee-nights-counter .mnc-row { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 4px 12px; }
html[data-design="d"] .mustsee-nights-counter .mnc-sep { display: none; }
html[data-design="d"] .mustsee-nights-counter .mnc-block { display: flex; flex-direction: column; gap: 0; }
html[data-design="d"] .mustsee-nights-counter .mnc-label { font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--d-tinte-hell); }
html[data-design="d"] .mustsee-nights-counter .mnc-value { font-size: 18px; font-weight: 640; }
html[data-design="d"] .mustsee-nights-counter .mnc-value { color: var(--d-tinte); font-variant-numeric: tabular-nums; }
html[data-design="d"] .mustsee-nights-counter .mnc-hint { font-size: 13.5px; color: var(--d-tinte-hell); border-top-color: var(--d-line); }
html[data-design="d"] .mustsee-nights-counter.over { border-left: 3px solid var(--d-fehler); }
html[data-design="d"] .mustsee-nights-counter.over .mnc-hint { color: var(--d-fehler); }
/* Hinweis für die KI: Plus vorn statt Pfeil hinten */
html[data-design="d"] .vmk-notes-disclosure {
  margin: 0;
  background: var(--d-flaeche);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-ui);
  box-shadow: none;
}
html[data-design="d"] .vmk-notes-disclosure > summary { min-height: 48px; padding: 10px 14px; flex-wrap: wrap; gap: 2px 10px; font-size: 15px; color: var(--d-tinte); }
html[data-design="d"] .vmk-notes-disclosure .vmk-notes-label { font-weight: 560; }
html[data-design="d"] .vmk-notes-disclosure .vmk-notes-hint { flex-basis: 100%; padding-left: 26px; }
html[data-design="d"] .vmk-notes-chev { display: none !important; }
html[data-design="d"] .vmk-notes-plus { color: var(--d-tinte); }
html[data-design="d"] .vmk-notes-hint { color: var(--d-tinte-hell); font-size: 13.5px; }
html[data-design="d"] .additional-notes-hint { font-size: 13px; color: var(--d-tinte-hell); }
html[data-design="d"] .additional-notes-counter { color: var(--d-tinte-hell); font-variant-numeric: tabular-nums; }

/* =========================================================
   SCHRITT 3: Karte. Marker in drei Ringgewichten (ohne Grün), aktiv mit
   Doppelring, gepinnt als Foto-Pin am Ort. Namen (d2s-kname) setzt js/map.js
   per Kollisionsdurchgang auf eine freie Seite oder blendet sie aus.
   --d2s-r ist der Radius, an dem die Namen ansetzen (liest auch der Durchgang).
   ========================================================= */
html[data-design="d"] #mustsee-map.d-skizze .leaflet-bordersPane-pane { display: none; }
/* Fokus auf der Karte selbst (Tastatur-Verschieben): Ring innen, die Kartenspalte schneidet sonst ab */
html[data-design="d"] #step-3 #mustsee-map:focus-visible { outline: 2.5px solid var(--d-tinte); outline-offset: -4px; }
html[data-design="d"] #mustsee-map.d-skizze { background: var(--d-meer); }

html[data-design="d"] .leaflet-marker-icon.d2s-mk { background: none; border: 0; overflow: visible; --d2s-r: 6px; }
/* Getroffen wird nur die runde Trefferfläche (höchstens 32 px; js/map.js begrenzt
   sie auf den Abstand zum Nachbarn) und das Foto, nie die leere Icon-Box */
html[data-design="d"] .leaflet-marker-icon.d2s-mk.leaflet-interactive { pointer-events: none; cursor: default; }
html[data-design="d"] .d2s-mk-kern { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
html[data-design="d"] .d2s-treffer {
  position: absolute;
  left: calc(var(--d2s-hit, 32px) / -2); top: calc(var(--d2s-hit, 32px) / -2);
  width: var(--d2s-hit, 32px); height: var(--d2s-hit, 32px);
  border-radius: 50%;
  pointer-events: auto; cursor: pointer;
}
html[data-design="d"] .d2s-ring {
  position: absolute;
  left: calc(var(--d2s-g) / -2); top: calc(var(--d2s-g) / -2);
  width: var(--d2s-g); height: var(--d2s-g);
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--d-flaeche);
  border: var(--d2s-b) solid var(--d2s-c, var(--d-tinte));
}
html[data-design="d"] .d2s-mk--moment { --d2s-g: 14px; --d2s-b: 2.5px; --d2s-r: 7px; }
html[data-design="d"] .d2s-mk--ort    { --d2s-g: 10px; --d2s-b: 2px;   --d2s-r: 5px; }
html[data-design="d"] .d2s-mk--tipp   { --d2s-g: 8px;  --d2s-b: 2px;   --d2s-r: 4px; --d2s-c: var(--d-tinte-hell); }
/* Strecken-Ziele (multiStop): zusätzlicher 2-px-Ring in Wegmarke */
html[data-design="d"] .d2s-mk.is-strecke .d2s-ring { box-shadow: 0 0 0 1px var(--d-flaeche), 0 0 0 3px var(--d-weg); }
html[data-design="d"] .d2s-mk.is-strecke { --d2s-r: calc(var(--d2s-g) / 2 + 3px); }
html[data-design="d"] .leaflet-marker-icon.vmk-route-emph .d2s-ring { box-shadow: 0 0 0 1px var(--d-flaeche), 0 0 0 4px var(--d-weg); }
/* Aktiv (Hover, Fokus in der Liste, mittige Karussellkarte): 20-px-Ring 3 px Tinte und
   zweiter Ring 1,5 px Tinte mit 4 px Abstand */
html[data-design="d"] .d2s-mk.is-aktiv:not(.d2s-mk--pin) { --d2s-g: 20px; --d2s-b: 3px; --d2s-c: var(--d-tinte); --d2s-r: 16px; }
html[data-design="d"] .d2s-mk.is-aktiv:not(.d2s-mk--pin) .d2s-ring { box-shadow: 0 0 0 4px rgba(var(--d-flaeche-rgb), .92), 0 0 0 5.5px var(--d-tinte); }
html[data-design="d"] .d2s-mk.is-aktiv.is-strecke:not(.d2s-mk--pin) .d2s-ring { box-shadow: 0 0 0 4px rgba(var(--d-flaeche-rgb), .92), 0 0 0 5.5px var(--d-tinte), 0 0 0 8px var(--d-weg); }
/* Gepinnt: Foto-Pin (52 px Desktop, 44 px Handy, eng 40 bzw. 36), Kalk- und
   Tinte-Ring. Das Foto sitzt im Kopf (.d2s-kopf) am Ort; ist dort kein Platz,
   rückt js/map.js den Kopf weg (--d2s-dx/-dy) und ein Stiel aus Tinte führt
   zum Ortsring (12 px Kalk, 2,5 px Tinte). */
html[data-design="d"] .d2s-mk--pin .d2s-ring { --d2s-g: 12px; --d2s-b: 2.5px; display: none; }
html[data-design="d"] .d2s-mk--pin.is-versetzt .d2s-ring { display: block; }
html[data-design="d"] .d2s-stiel {
  display: none;
  position: absolute; left: 0; top: -0.75px;
  width: var(--d2s-sl, 0px); height: 1.5px;
  background: var(--d-tinte);
  transform-origin: 0 50%;
  transform: rotate(var(--d2s-sw, 0deg));
  pointer-events: none;
}
html[data-design="d"] .d2s-mk--pin.is-versetzt .d2s-stiel { display: block; }
html[data-design="d"] .d2s-kopf {
  position: absolute;
  left: var(--d2s-dx, 0px); top: var(--d2s-dy, 0px);
  width: 0; height: 0;
  --d2s-r: calc(var(--d2s-s) / 2);
}
html[data-design="d"] .d2s-pinfoto {
  position: absolute;
  left: calc(var(--d2s-s) / -2); top: calc(var(--d2s-s) / -2);
  width: var(--d2s-s); height: var(--d2s-s);
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid var(--d-tinte);
  background: var(--d-flaeche);
  overflow: hidden;
  pointer-events: auto; cursor: pointer;
}
html[data-design="d"] .d2s-pinfoto img {
  display: block; width: 100%; height: 100%;
  box-sizing: border-box;
  border: 2.5px solid var(--d-flaeche);
  border-radius: 50%;
  object-fit: cover;
  background: var(--d-kiesel);
}
html[data-design="d"] .d2s-pinfoto--leer { background: var(--d-kiesel); box-shadow: inset 0 0 0 2.5px var(--d-flaeche); }
html[data-design="d"] .d2s-mk--pin.is-aktiv .d2s-pinfoto { box-shadow: 0 0 0 3px rgba(var(--d-flaeche-rgb), .92), 0 0 0 4.5px var(--d-tinte); }
html[data-design="d"] .d2s-mk--pin.is-aktiv .d2s-kopf { --d2s-r: calc(var(--d2s-s) / 2 + 5px); }
html[data-design="d"] .d2s-mk--pin.is-strecke .d2s-pinfoto { box-shadow: 0 0 0 2px var(--d-weg); }
/* Namen: 13/600 Tinte mit Kalk-Hof; aktiv 14/680. Desktop: Große Momente dauerhaft,
   dazu gepinnte und aktive Orte; Handy nur aktiv und gepinnt (Media-Query unten). */
html[data-design="d"] .d2s-kname {
  display: none;
  position: absolute;
  left: calc(var(--d2s-r) + 3px); top: 0;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 13px; line-height: 1.2; font-weight: 600; letter-spacing: 0;
  color: var(--d-tinte);
  text-shadow: 0 0 1px var(--d-flaeche), 0 0 2px var(--d-flaeche), 0 0 4px var(--d-flaeche), 0 0 7px rgba(var(--d-flaeche-rgb), .9);
  pointer-events: none;
}
html[data-design="d"] .d2s-mk--moment .d2s-kname,
html[data-design="d"] .d2s-mk--pin .d2s-kname,
html[data-design="d"] .d2s-mk.is-aktiv .d2s-kname { display: block; }
html[data-design="d"] .d2s-mk.is-aktiv .d2s-kname { font-size: 14px; font-weight: 680; }
html[data-design="d"] .d2s-kname.is-l { left: auto; right: calc(var(--d2s-r) + 3px); }
html[data-design="d"] .d2s-kname.is-u { left: 0; top: calc(var(--d2s-r) + 1px); transform: translateX(-50%); }
html[data-design="d"] .d2s-kname.is-o { left: 0; top: auto; bottom: calc(var(--d2s-r) + 1px); transform: translateX(-50%); }
html[data-design="d"] .d2s-kname.is-weg { visibility: hidden; }
/* Fokus auf einem Marker (Tastatur) */
html[data-design="d"] .leaflet-marker-icon.d2s-mk:focus-visible { outline: none; }
html[data-design="d"] .leaflet-marker-icon.d2s-mk:focus-visible .d2s-ring,
html[data-design="d"] .leaflet-marker-icon.d2s-mk:focus-visible .d2s-pinfoto { outline: 2.5px solid var(--d-tinte); outline-offset: 4px; }
/* Bestätigung beim Anpinnen: Ring in Tinte statt Akzentfarbe */
html[data-design="d"] .leaflet-marker-icon.d2s-mk.marker-pin-pulse::after { border-color: var(--d-tinte); }

/* Legende unten links: Kalk 92 %, dieselben Zeichen */
html[data-design="d"] .mustsee-map-wrap .vmk-legend {
  left: 12px; bottom: 12px;
  gap: 4px 16px;
  max-width: calc(100% - 180px);
  padding: 8px 14px;
  background: rgba(var(--d-flaeche-rgb), .92);
  border: 0;
  border-radius: var(--d-r-flaeche);
  box-shadow: var(--d-schweben);
  font-size: 13px; font-weight: 450; letter-spacing: 0;
  color: var(--d-tinte);
}
html[data-design="d"] .vmk-legend .vmk-lg { gap: 7px; }
@media (max-width: 1099px) {
  html[data-design="d"] .mustsee-map-wrap .vmk-legend { gap: 4px 12px; padding: 7px 12px; font-size: 12.5px; max-width: calc(100% - 236px); }
}
html[data-design="d"] .d2s-lg { display: inline-block; box-sizing: border-box; border-radius: 50%; background: var(--d-flaeche); }
html[data-design="d"] .d2s-lg--moment { width: 14px; height: 14px; border: 2.5px solid var(--d-tinte); }
html[data-design="d"] .d2s-lg--ort { width: 10px; height: 10px; border: 2px solid var(--d-tinte); }
html[data-design="d"] .d2s-lg--tipp { width: 8px; height: 8px; border: 2px solid var(--d-tinte-hell); }
html[data-design="d"] .d2s-lg--pin { width: 16px; height: 16px; background: var(--d-kiesel); box-shadow: inset 0 0 0 2px var(--d-flaeche), 0 0 0 1.5px var(--d-tinte); }

/* =========================================================
   SCHRITT 3: Fußleiste (Desktop): Fotochips, Satz, Zurück, Route erstellen
   ========================================================= */
html[data-design="d"] .step3-sticky-cta {
  min-height: 76px;
  display: flex; align-items: center;
  padding: 12px var(--d-seite);
  box-sizing: border-box;
  background: var(--d-flaeche);
  border-top: 1px solid var(--d-line);
  box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-design="d"] .step3-sticky-inner { flex: 1; min-width: 0; max-width: none; gap: 16px; }
html[data-design="d"] .step3-sticky-meta { display: none; }
html[data-design="d"] .d2s-fuss-links { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
html[data-design="d"] .d2s-chips { display: flex; align-items: center; flex: none; padding-left: 6px; }
html[data-design="d"] .d2s-chips[hidden] { display: none; }
html[data-design="d"] .d2s-chip {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  margin-left: -6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--d-kiesel);
  box-shadow: 0 0 0 2px var(--d-flaeche);
  overflow: hidden;
  cursor: pointer;
  color: var(--d-tinte);
  font-size: 12.5px; font-weight: 640;
  font-variant-numeric: tabular-nums;
}
html[data-design="d"] .d2s-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
html[data-design="d"] .d2s-chip:focus-visible { outline-offset: 2px; position: relative; z-index: 1; }
html[data-design="d"] .d2s-chip--mehr { cursor: default; }
html[data-design="d"] .d2s-fuss-text { margin: 0; min-width: 0; font-size: 15px; line-height: 1.35; color: var(--d-tinte); }
html[data-design="d"] .d2s-fuss-text b { font-weight: 640; }
html[data-design="d"] .d2s-fuss-kurz { display: none; }
html[data-design="d"] .d2s-fuss-zurueck.btn { flex: none; padding: 0 20px; }
html[data-design="d"] .step3-sticky-btn.btn-primary { flex: none; min-height: 48px; padding: 0 26px; font-size: 16px; font-weight: 620; }
/* Summe der festgelegten Nächte (07.10.2026): nur, sobald Nächte festgelegt sind; Satz über
   einem schmalen Balken, zu viel in Fehlerrot. Am Handy steht die Summe in der zweiten Zeile. */
html[data-design="d"] .d2s-naechte { flex: none; display: grid; gap: 5px; min-width: 150px; margin-left: 8px; }
html[data-design="d"] .d2s-naechte[hidden] { display: none; }
html[data-design="d"] .d2s-naechte-text { font-size: 13.5px; line-height: 1.3; color: var(--d-tinte); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
html[data-design="d"] .d2s-naechte-text b { font-weight: 700; }
html[data-design="d"] .d2s-naechte-balken { display: block; height: 6px; border-radius: 3px; background: var(--d-kiesel); overflow: hidden; }
html[data-design="d"] .d2s-naechte-balken i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--d-tinte); }
html[data-design="d"] .d2s-naechte.is-zuviel .d2s-naechte-text { color: var(--d-fehler); }
html[data-design="d"] .d2s-naechte.is-zuviel .d2s-naechte-balken i { background: var(--d-fehler); }
html[data-design="d"] .d2s-fuss-namen.is-zuviel { color: var(--d-fehler); font-weight: 600; }
@media (max-width: 768px) {
  html[data-design="d"] .d2s-naechte { display: none; }
}

/* =========================================================
   RÜCKFRAGE NACH „ROUTE ERSTELLEN“ (Markup: js/app.js, #pin-confirm-modal)
   Gehört zum Ablauf von Schritt 3 und steht deshalb hier. Ruhig wie die
   Schritte: kein Kicker, kein Funkel, Zahlen und Ortsnamen in Tinte (Laub ist
   nur Handlung), gewählte Kachel wie in Schritt 1 mit Laub-Rand und Haken.
   Das Reisetempo erscheint erst, wenn die KI ergänzen soll.
   ========================================================= */
html[data-design="d"] .pin-confirm-modal { max-width: 560px; padding: 32px 32px 26px !important; text-align: left; }
html[data-design="d"] .pin-confirm-header { margin-bottom: 20px; }
html[data-design="d"] .pin-confirm-kicker { display: none; }
html[data-design="d"] .pin-confirm-title {
  margin: 0 0 10px;
  font-family: inherit; font-size: 28px; line-height: 1.12;
  font-weight: var(--d-fw-kapitel); letter-spacing: var(--d-track-kapitel);
  color: var(--d-tinte);
}
html[data-design="d"] .pin-confirm-text { max-width: none; margin: 0 !important; font-size: 16px; line-height: 1.5; color: var(--d-tinte); }
html[data-design="d"] .pin-confirm-text strong,
html[data-design="d"] .pin-confirm-text em { font-style: normal; font-weight: 640; color: var(--d-tinte); }
html[data-design="d"] .pin-confirm-distance {
  margin: 6px 0 0 !important; text-align: left;
  font-family: inherit; font-style: normal; font-size: var(--d-fs-klein); letter-spacing: 0;
  color: var(--d-tinte-hell); font-variant-numeric: tabular-nums;
}
html[data-design="d"] .pin-confirm-distance strong { font-family: inherit; font-size: inherit; font-weight: 640; color: var(--d-tinte); }
html[data-design="d"] .pin-confirm-warn {
  background: var(--d-flaeche); border: 1px solid var(--d-line); border-left: 3px solid var(--d-tinte);
  border-radius: var(--d-r-ui); color: var(--d-tinte); font-size: var(--d-fs-klein);
}
html[data-design="d"] .pin-confirm-warn strong { color: var(--d-tinte); font-weight: 640; }
html[data-design="d"] .pin-confirm-warn-tip { color: var(--d-tinte); font-weight: 560; }
/* Zwei Wege als Kacheln: Symbol links, Titel und Satz rechts */
html[data-design="d"] .pin-confirm-options { gap: 12px; margin: 0; }
html[data-design="d"] .pin-confirm-btn {
  position: relative;
  display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; row-gap: 2px;
  align-items: start; align-content: start;
  min-height: 88px;
  padding: 14px 36px 14px 14px;
  background: var(--d-flaeche);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-ui);
  box-shadow: none; transform: none;
  transition: background-color .15s ease, border-color .15s ease;
}
html[data-design="d"] .pin-confirm-btn-icon { grid-row: 1 / span 2; margin: 0; background: var(--d-kiesel); color: var(--d-tinte); }
html[data-design="d"] .pin-confirm-btn-title { font-size: 16px; font-weight: 620; letter-spacing: 0; color: var(--d-tinte); }
html[data-design="d"] .pin-confirm-btn-desc { font-size: 13.5px; line-height: 1.4; color: var(--d-tinte-hell); }
html[data-design="d"] .pin-confirm-btn:hover:not(:disabled):not(.is-disabled) { background: var(--d-flaeche-2); border-color: var(--d-line-stark); box-shadow: none; transform: none; }
html[data-design="d"] .pin-confirm-btn.active,
html[data-design="d"] .pin-confirm-btn.active:hover:not(:disabled) { background: var(--d-laub-blass); border-color: var(--d-laub); box-shadow: inset 0 0 0 .5px var(--d-laub); }
html[data-design="d"] .pin-confirm-btn.active .pin-confirm-btn-icon { background: rgba(var(--d-flaeche-rgb), .7); }
html[data-design="d"] .pin-confirm-btn.active::after,
html[data-design="d"] .pace-card-mini.active::after {
  content: "";
  position: absolute; top: 8px; right: 8px;
  width: 18px; height: 18px;
  background: var(--d-laub);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.6l3.6 3.6L14.6 5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.6l3.6 3.6L14.6 5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
/* „KI soll ergänzen“: Ort mit Plus statt Funkel */
html[data-design="d"] .pin-confirm-fill .pin-confirm-btn-icon svg { display: none; }
html[data-design="d"] .pin-confirm-fill .pin-confirm-btn-icon::before {
  content: ""; width: 22px; height: 22px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-7.6 8-13a8 8 0 1 0-16 0c0 5.4 8 13 8 13z'/%3E%3Cpath d='M12 5.6v6.8M8.6 9h6.8'/%3E%3C/g%3E%3C/svg%3E") center / 22px 22px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-7.6 8-13a8 8 0 1 0-16 0c0 5.4 8 13 8 13z'/%3E%3Cpath d='M12 5.6v6.8M8.6 9h6.8'/%3E%3C/g%3E%3C/svg%3E") center / 22px 22px no-repeat;
}
/* Reisetempo: nur, wenn die KI ergänzt */
html[data-design="d"] .pin-confirm-pace { margin: 18px 0 0; text-align: left; }
html[data-design="d"] .pin-confirm-pace.is-disabled { display: none; }
html[data-design="d"] .pin-confirm-pace-label {
  margin: 0 0 10px;
  font-size: 15.5px; font-weight: 620; letter-spacing: 0; text-transform: none;
  color: var(--d-tinte);
}
html[data-design="d"] .pin-confirm-pace-hint { margin-left: 4px; font-size: 13.5px; font-weight: 450; letter-spacing: 0; color: var(--d-tinte-hell); }
html[data-design="d"] .pin-confirm-pace-cards { gap: 10px; margin: 0; }
html[data-design="d"] .pace-card-mini {
  position: relative;
  padding: 12px 30px 12px 12px;
  background: var(--d-flaeche);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-ui);
  box-shadow: none; transform: none;
}
html[data-design="d"] .pace-card-mini:hover { background: var(--d-flaeche-2); border-color: var(--d-line-stark); transform: none; }
html[data-design="d"] .pace-card-mini.active { background: var(--d-laub-blass); border-color: var(--d-laub); box-shadow: inset 0 0 0 .5px var(--d-laub); }
html[data-design="d"] .pace-card-mini-title { font-family: inherit; font-size: 15px; font-weight: 620; letter-spacing: 0; color: var(--d-tinte); }
html[data-design="d"] .pace-card-mini-desc { font-size: 13px; line-height: 1.35; color: var(--d-tinte-hell); }
/* Knöpfe: „Zurück zur Karte“ als Zweitknopf links, „Route erstellen“ als Hauptknopf rechts */
html[data-design="d"] .pin-confirm-actions { margin-top: 24px; gap: 12px; }
html[data-design="d"] .pin-confirm-cancel {
  min-height: 44px; margin: 0; padding: 0 18px;
  border: 1.5px solid var(--d-rand); border-radius: var(--d-r-ui);
  background: transparent; color: var(--d-tinte);
  font-family: inherit; font-style: normal; font-size: 15px; font-weight: 560;
  white-space: nowrap;
}
html[data-design="d"] .pin-confirm-cancel:hover { background: var(--d-kiesel); color: var(--d-tinte); }
html[data-design="d"] .pin-confirm-actions .pin-confirm-go { width: auto; margin: 0 0 0 auto; padding: 0 26px; }
@media (max-width: 768px) {
  html[data-design="d"] .pin-confirm-modal { padding: 24px 20px 20px !important; }
  html[data-design="d"] .pin-confirm-title { font-size: 24px !important; }
  html[data-design="d"] .pin-confirm-btn { min-height: 0; }
  html[data-design="d"] .pin-confirm-actions { flex-direction: column-reverse; align-items: stretch; margin-top: 20px; gap: 10px; }
  html[data-design="d"] .pin-confirm-actions .pin-confirm-go { width: 100%; margin: 0; min-height: 50px; }
  html[data-design="d"] .pin-confirm-cancel { width: 100%; }
}

/* =========================================================
   SCHRITT 3 AM HANDY (≤ 768): Vollbildkarte, Karussell, Suche und Reiter
   darunter (User-Entscheid 22.07.), Fußleiste in der Daumenzone
   ========================================================= */
@media (max-width: 768px) {
  /* Namen auf der Handykarte: nur aktiv und gepinnt */
  html[data-design="d"] .d2s-mk--moment:not(.is-aktiv) .d2s-kname { display: none; }
  html[data-design="d"] .d2s-kname { font-size: 12.5px; }
  html[data-design="d"] .d2s-mk.is-aktiv .d2s-kname { font-size: 13.5px; }

  /* Seiten-Ansicht (Not-Aus ?sheet=0): Zeilen schmaler */
  html[data-design="d"] #step-3 { --d2s-foto-w: 112px; --d2s-foto-h: 84px; }
  html[data-design="d"] #step-3 .mustsee-layout:not(.msheet) .d2s-zeile.dest-card { column-gap: 14px; }
  /* Karte steht im DOM hinter der Liste (Tastaturfolge), in dieser Ansicht bleibt sie oben */
  html[data-design="d"] #step-3 .mustsee-layout:not(.msheet) .mustsee-map-wrap { order: -1; }

  /* Oben: Zurück (44 px rund) und Titel-Pille */
  html[data-design="d"] body.msheet-fs .msheet-back {
    background: var(--d-flaeche);
    color: var(--d-tinte);
    border: 1px solid var(--d-line-stark);
    box-shadow: var(--d-schweben);
  }
  html[data-design="d"] .d2s-titelpille { display: none; }
  html[data-design="d"] body.msheet-fs .d2s-titelpille {
    display: flex; flex-direction: column; justify-content: center;
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    left: 66px; right: 12px;
    z-index: 40;
    height: 44px; box-sizing: border-box;
    padding: 0 16px;
    background: var(--d-flaeche);
    border: 1px solid var(--d-line-stark);
    border-radius: var(--d-r-rund);
    box-shadow: var(--d-schweben);
    line-height: 1.2;
    pointer-events: none;
  }
  html[data-design="d"] .d2s-titelpille b { font-size: 15px; font-weight: 650; color: var(--d-tinte); }
  html[data-design="d"] .d2s-titelpille span { font-size: 12px; color: var(--d-tinte-hell); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Zoomen per zwei Finger; die Knöpfe lägen unter der Titel-Pille */
  html[data-design="d"] .msheet .leaflet-control-zoom { display: none; }
  /* Meldungen unter die Titel-Zeile */
  html[data-design="d"] body.msheet-fs .routaris-toasts { top: calc(env(safe-area-inset-top, 0px) + 66px); left: 12px; }

  /* Dock: Karussell, darunter Suche und Reiter */
  html[data-design="d"] .msheet .vmk-cards-col { gap: 0; padding: 0; }
  html[data-design="d"] .msheet .d2s-optionen,
  html[data-design="d"] .msheet .vmk-pref-context { display: none; }
  html[data-design="d"] .msheet .msheet-scroll { padding: 2px 0 8px; }
  html[data-design="d"] #step-3 .msheet .mustsee-grid {
    display: flex; gap: 12px;
    margin: 0;
    padding: 0 calc((100vw - min(77vw, 320px)) / 2);
  }
  /* Karte: 300 px breit (bei 390), feste Höhe 300 (Reihenfolge 342), Radius 14,
     Kalk, Schwebeschatten; Foto 140 px mit Quelle */
  html[data-design="d"] .msheet .mustsee-grid .d2s-zeile.dest-card {
    flex: 0 0 min(77vw, 320px);
    max-width: none;
    display: flex; flex-direction: column;
    align-items: stretch;
    height: 300px;
    padding: 0;
    background: var(--d-flaeche);
    border: 0;
    border-radius: var(--d-r-karte);
    box-shadow: var(--d-schweben);
    overflow: hidden;
    scroll-snap-align: center;
  }
  html[data-design="d"] .msheet .mustsee-grid:has(.vmk-card-order) .d2s-zeile.dest-card { height: 342px; }
  html[data-design="d"] .msheet .d2s-zeile.dest-card:hover,
  html[data-design="d"] .msheet .d2s-zeile.dest-card:focus-within,
  html[data-design="d"] .msheet .d2s-zeile.dest-card.is-karte { background: var(--d-flaeche); box-shadow: var(--d-schweben); }
  html[data-design="d"] .msheet .d2s-zeile.dest-card.msheet-active { box-shadow: 0 0 0 2px var(--d-tinte), 0 8px 24px rgba(var(--d-tinte-rgb), .2); }
  html[data-design="d"] .msheet .d2s-zeile.dest-card:focus-visible { outline-offset: -3px; }
  html[data-design="d"] .msheet .d2s-zeile .vmk-card-photo.d2s-foto,
  html[data-design="d"] .msheet .d2s-zeile.pinned:has(.vmk-card-nights-hint) .vmk-card-photo.d2s-foto {
    width: 100%; height: var(--d2s-karussell-foto, 140px);
    margin: 0;
    flex: none;
    border-radius: 0;
  }
  /* Körper so breit wie die Karte: sonst wächst er auf die längste nowrap-Zeile
     und schiebt „Anpinnen“ aus der Karte (Befund 02.10.) */
  html[data-design="d"] .msheet .d2s-zeile .dest-card-body {
    flex: 1; min-height: 0;
    width: 100%; min-width: 0; box-sizing: border-box;
    display: flex; flex-direction: column; gap: 2px;
    padding: 11px 14px 12px;
    overflow: hidden;
  }
  html[data-design="d"] .msheet .d2s-zeile .dest-card-name {
    font-size: 19px; line-height: 1.2; font-weight: 660; letter-spacing: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none;
  }
  html[data-design="d"] .msheet .d2s-moment,
  html[data-design="d"] .msheet .d2s-ausflug,
  html[data-design="d"] .msheet .d2s-strecke { font-size: 13px; flex: none; }
  html[data-design="d"] .msheet .d2s-zeile .dest-card-desc { margin: 1px 0 0; font-size: 14px; line-height: 1.42; flex: none; }
  html[data-design="d"] .msheet .d2s-zeile:has(.d2s-ausflug) .dest-card-desc,
  html[data-design="d"] .msheet .d2s-zeile:has(.d2s-strecke) .dest-card-desc { -webkit-line-clamp: 1; }
  /* Strecke, Moment und Ausflug zusammen: die Beschreibung weicht, der Fuß bleibt in der Karte */
  html[data-design="d"] .msheet .d2s-zeile:has(.d2s-strecke):has(.d2s-ausflug) .dest-card-desc { display: none; }
  html[data-design="d"] .msheet .d2s-familie { display: none; }
  html[data-design="d"] .msheet .d2s-fuss { margin-top: auto; padding-top: 6px; flex: none; }
  html[data-design="d"] .msheet .d2s-fuss .vmk-card-meta { font-size: 12.5px; }
  html[data-design="d"] .msheet .d2s-anpinnen { min-height: 40px; padding: 0 16px; font-size: 14.5px; }
  html[data-design="d"] .msheet .d2s-anpinnen.is-an { padding-left: 12px; }
  /* Gepinnt: der Stepper ersetzt die Beschreibung */
  html[data-design="d"] .msheet .d2s-zeile.pinned .dest-card-desc,
  html[data-design="d"] .msheet .d2s-zeile.pinned .d2s-ausflug,
  html[data-design="d"] .msheet .d2s-zeile.pinned .d2s-strecke { display: none; }
  /* Stepper an der Stelle der Beschreibung, Fuß (Richtwert, Gepinnt) bleibt unten */
  html[data-design="d"] .msheet .d2s-zeile .vmk-card-nights { order: 1; margin-top: 6px; flex: none; }
  html[data-design="d"] .msheet .d2s-zeile .vmk-card-order { order: 1; margin-top: 4px; flex: none; }
  html[data-design="d"] .msheet .d2s-zeile .d2s-fuss { order: 2; }
  html[data-design="d"] .msheet .d2s-zeile .img-wiki-credit { font-size: 11.5px; }
  html[data-design="d"] .msheet .dest-card.msheet-flash { animation: d2Flash 1.6s ease; }
  @keyframes d2Flash { 0%, 55% { box-shadow: 0 0 0 3px var(--d-tinte), 0 8px 24px rgba(var(--d-tinte-rgb), .2); } 100% { box-shadow: var(--d-schweben); } }

  /* Suche und Reiter: bündig auf der Fußleiste, Kalk */
  html[data-design="d"] .msheet .vmk-addstop {
    margin: 0;
    padding: 6px 12px 0;
    gap: 8px;
    background: var(--d-flaeche);
    border-radius: var(--d-r-karte) var(--d-r-karte) 0 0;
    box-shadow: 0 -6px 18px rgba(var(--d-tinte-rgb), .10);
  }
  html[data-design="d"] .msheet .vmk-addstop-input { padding: 0; }
  html[data-design="d"] .msheet .vmk-tabs {
    flex-wrap: nowrap;
    margin: 0;
    padding: 6px 12px 7px;
    gap: 6px;
    background: var(--d-flaeche);
    overflow-x: auto;
    scrollbar-width: none;
  }
  html[data-design="d"] .msheet .vmk-tabs::-webkit-scrollbar { display: none; }
  html[data-design="d"] .msheet .vmk-addstop + .vmk-tabs { margin-top: 0; }
  html[data-design="d"] .msheet .vmk-tab { flex: none; }
  html[data-design="d"] .msheet-more {
    flex: none;
    width: 44px; height: 44px;
    border: 1.5px solid var(--d-rand);
    border-radius: var(--d-r-ui);
    background: transparent;
    color: var(--d-tinte);
  }
  html[data-design="d"] .msheet-extras {
    background: var(--d-flaeche);
    border-radius: var(--d-r-flaeche);
    box-shadow: var(--shadow-lg);
  }
  html[data-design="d"] .msheet .msheet-hint .vmk-routehint { background: var(--d-flaeche); border-radius: var(--d-r-flaeche); box-shadow: var(--shadow-lg); }
  html[data-design="d"] .msheet .msheet-hint .vmk-routehint-actions { background: var(--d-flaeche); border-top-color: var(--d-line); }
  html[data-design="d"] .msheet .pin-density-warning { background: var(--d-flaeche); border-radius: var(--d-r-ui); box-shadow: var(--d-schweben); }

  /* Fußleiste: „3 Orte gewählt“ und Namen, „Route erstellen“ 50 px */
  html[data-design="d"] .step3-sticky-cta { min-height: 0; padding: 10px var(--d-seite) calc(10px + env(safe-area-inset-bottom, 0px)); }
  html[data-design="d"] .d2s-chips,
  html[data-design="d"] .d2s-fuss-text,
  html[data-design="d"] .d2s-fuss-zurueck { display: none !important; }
  html[data-design="d"] .d2s-fuss-kurz {
    display: flex; flex-direction: column;
    margin: 0; min-width: 0;
    line-height: 1.3;
  }
  html[data-design="d"] .d2s-fuss-zahl { font-size: 15px; font-weight: 640; color: var(--d-tinte); }
  html[data-design="d"] .d2s-fuss-namen { font-size: 13px; color: var(--d-tinte-hell); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-design="d"] .step3-sticky-btn.btn-primary { min-height: 50px; padding: 0 20px; font-size: 16px; }
}
/* Niedrige Handys: Foto im Karussell 128 px, damit genug Karte frei bleibt */
@media (max-width: 768px) and (max-height: 860px) {
  html[data-design="d"] .msheet { --d2s-karussell-foto: 128px; }
  html[data-design="d"] .msheet .mustsee-grid .d2s-zeile.dest-card { height: 288px; }
  html[data-design="d"] .msheet .mustsee-grid:has(.vmk-card-order) .d2s-zeile.dest-card { height: 330px; }
}
/* Sehr niedrige Handys (z. B. 360 × 740): Foto 104 px, Karte 264 px hoch */
@media (max-width: 768px) and (max-height: 760px) {
  html[data-design="d"] .msheet { --d2s-karussell-foto: 104px; }
  html[data-design="d"] .msheet .mustsee-grid .d2s-zeile.dest-card { height: 264px; }
  html[data-design="d"] .msheet .mustsee-grid:has(.vmk-card-order) .d2s-zeile.dest-card { height: 306px; }
}

/* =========================================================
   INTEGRATION (02.10.): Dialog „Deine gemerkten Highlights“ (js/app.js,
   showHighlightWishDialog) und der Hinweis in Schritt 3. Ohne Stern: Die Chips
   zeigen den Zustand wie die Auswahlkacheln, gewählt Laub blass mit Laub-Rand und
   Haken, abgewählt Kalk mit leerem Kreis (nicht nur über die Farbe).
   ========================================================= */
html[data-design="d"] .hl-wish-chip .hl-wish-chip-star { display: none; }
html[data-design="d"] .hl-wish-chip {
  min-height: 44px; gap: 10px;
  background: var(--d-flaeche); border: 1.5px solid var(--d-line-stark); border-radius: var(--d-r-ui);
  color: var(--d-tinte); font-size: 15px; font-weight: 560;
}
html[data-design="d"] .hl-wish-chip::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--d-tinte-hell);
}
html[data-design="d"] .hl-wish-chip.active { background: var(--d-laub-blass); border-color: var(--d-laub); color: var(--d-tinte); }
html[data-design="d"] .hl-wish-chip.active::before {
  border-radius: 0; box-shadow: none; background: var(--d-laub);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.6l3.6 3.6L14.6 5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.6l3.6 3.6L14.6 5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
html[data-design="d"] .hl-wish-chip small { color: var(--d-tinte-hell); font-size: 13px; }
html[data-design="d"] .hl-wish-chip:focus-visible { outline: 2.5px solid var(--d-tinte); outline-offset: 3px; }
html[data-design="d"] .hl-wish-chips { padding-left: 0; padding-right: 0; }
html[data-design="d"] .hl-wish-note { background: var(--d-flaeche); border: 1px solid var(--d-line); border-radius: var(--d-r-ui); color: var(--d-tinte); }
html[data-design="d"] .hl-wish-note b { color: var(--d-tinte); font-weight: 640; }