/* Farben und Schrift wie CampAppSolution */
:root {
  --cream: #f6f2ea; --beige: #e8dfcf; --marine: #11212d; --night: #06141b; --slate: #253745;
  --steel: #4a5c6a; --fog: #9ba8ab; --silver: #ccd0cf; --gold: #8f7230; --goldl: #d4b365; --red: #c1121c;
  --nav-h: 64px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Lato, -apple-system, system-ui, sans-serif; background: var(--cream); color: var(--marine);
       padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
a { color: var(--gold); }
h1, h2, h3 { margin: 0; }

/* Navigation: Handy unten, PC links */
#nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; background: var(--marine);
       padding-bottom: env(safe-area-inset-bottom); }
#nav .brand { display: none; }
#nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
         height: var(--nav-h); color: var(--fog); text-decoration: none; font-size: 11px; font-weight: 700; }
#nav a.on { color: var(--goldl); }
#nav a.aus { opacity: .35; pointer-events: none; }
#nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 900px) {
  body { padding: 0 0 0 220px; }
  #nav { top: 0; right: auto; width: 220px; flex-direction: column; padding: 20px 12px; gap: 4px; }
  #nav .brand { display: block; padding: 6px 12px 22px; }
  #nav .brand img { display: block; width: 150px; height: auto; }
  #nav a { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; height: 44px; padding: 0 12px;
           border-radius: 10px; font-size: 15px; }
  #nav a.on { background: rgba(212,179,101,.14); }
}

/* Kopfbereich wie das Cockpit in CampAppSolution */
.hero { background: linear-gradient(155deg, var(--slate) 0%, var(--marine) 70%); color: #fff;
        padding: calc(22px + env(safe-area-inset-top)) 18px 20px; border-radius: 0 0 28px 28px; }
.hero h1 { font-size: 28px; font-weight: 900; letter-spacing: -.02em; }
.hero p { margin: 4px 0 0; opacity: .75; font-size: 14px; }
.chips { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.chip { flex: 1; min-width: 90px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16);
        border-radius: 14px; padding: 8px 10px; }
.chip small { display: block; font-size: 11px; opacity: .7; }
.chip b { font-size: 18px; }
.chip.key { background: rgba(212,179,101,.18); border-color: rgba(212,179,101,.45); }
.chip.key small { color: var(--goldl); opacity: 1; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 18px; }
.card { background: #fff; border-radius: 18px; padding: 16px 18px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(17,33,45,.08); }
.card h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 900; color: var(--gold); margin-bottom: 10px; }
.card p { margin: 0 0 10px; line-height: 1.45; color: var(--slate); }
.muted { color: var(--steel); font-size: 14px; }
.empty { text-align: center; color: var(--steel); padding: 40px 20px; }

label { display: block; font-size: 13px; font-weight: 700; color: var(--steel); margin-bottom: 10px; }
input, textarea, select { display: block; width: 100%; margin-top: 4px; font: inherit; font-size: 16px; color: var(--marine);
        padding: 10px 12px; border: 1px solid var(--silver); border-radius: 10px; background: #fff; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--goldl); border-color: transparent; }
code { background: var(--cream); padding: 2px 6px; border-radius: 6px; overflow-wrap: anywhere; }

.btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
       padding: 10px 16px; border-radius: 999px; border: 1px solid var(--marine); background: var(--marine); color: #fff; text-decoration: none; }
.btn.gold { background: var(--gold); border-color: var(--gold); }
.btn.ghost { background: transparent; color: var(--marine); }
.btn.danger { background: transparent; color: var(--red); border-color: var(--red); }
.btn:disabled { opacity: .5; cursor: default; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

#toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); transform: translateX(-50%);
         background: var(--night); color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 14px; max-width: 90vw;
         opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 2000; }
#toast.show { opacity: 1; }
#toast.err { background: var(--red); }
@media (min-width: 900px) { #toast { bottom: 24px; margin-left: 110px; } }

/* Formulare und Listen */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 12px; }
.grid > * { grid-column: span var(--p, 12); min-width: 0; }
@media (min-width: 600px) { .grid > * { grid-column: span var(--m, 6); } }
@media (min-width: 1150px) { .grid > * { grid-column: span var(--d, 4); } }
.grid > h4.sec { grid-column: 1 / -1; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 900;
                 color: var(--gold); margin: 10px 0 8px; padding-top: 12px; border-top: 1px solid var(--beige); }
.grid > h4.sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.toolbar { margin-bottom: 14px; flex-wrap: nowrap; }
.toolbar input { margin: 0; flex: 1; }
.toolbar .btn { white-space: nowrap; }
a.item { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--marine); margin-bottom: 8px; }
a.item:hover { outline: 2px solid var(--goldl); }
.push { margin-left: auto; }

/* Reisen */
.seg { display: inline-flex; background: #fff; border-radius: 999px; padding: 3px; box-shadow: 0 1px 3px rgba(17,33,45,.08); }
.seg a { padding: 7px 14px; border-radius: 999px; text-decoration: none; color: var(--steel); font-weight: 700; font-size: 14px; }
.seg a.on { background: var(--marine); color: #fff; }
.pill { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px;
        background: var(--beige); color: var(--slate); }
.pill.s-geplant { background: rgba(212,179,101,.3); color: var(--gold); }
.pill.s-abgeschlossen { background: var(--silver); }
.map { height: 280px; border-radius: 18px; margin-bottom: 14px; background: var(--beige); z-index: 0; }
@media (min-width: 900px) { .map { height: 380px; } }
.pin { background: var(--gold); color: #fff; border: 2px solid #fff; border-radius: 50%; font-weight: 900; font-size: 13px;
       display: flex !important; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.stations { margin-bottom: 14px; }
.station { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; }
.station .num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--marine); color: var(--goldl);
                font-weight: 900; display: flex; align-items: center; justify-content: center; }
.station .body { flex: 1; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--marine); min-width: 0; }
.station .tools { display: flex; flex-direction: column; gap: 4px; }
.icon { width: 34px; height: 30px; border: 1px solid var(--silver); background: #fff; border-radius: 8px; cursor: pointer; font-size: 15px; }
.icon:disabled { opacity: .3; cursor: default; }
.leg { display: flex; align-items: center; gap: 8px; margin: 0 0 0 28px; padding: 8px 14px; border-left: 3px dotted var(--fog);
       font-size: 13px; font-weight: 700; color: var(--steel); }
.leg svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.search { align-items: flex-end; flex-wrap: nowrap; }
.search label { flex: 1; }
#qhits:not(:empty) { margin-bottom: 12px; }
.search + #qhits + .grid > h4.sec:first-child { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--beige); }
.search .btn { margin-bottom: 10px; white-space: nowrap; }
.hits { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.hit { text-align: left; font: inherit; font-size: 14px; padding: 8px 12px; border: 1px solid var(--silver); border-radius: 10px; background: var(--cream); cursor: pointer; }
.hit:hover { border-color: var(--gold); }
.hero .chips .chip b { font-size: 16px; }

/* Mehrfachauswahl */
fieldset.checks { border: 1px solid var(--silver); border-radius: 10px; padding: 8px 12px 4px; margin: 0 0 10px; }
fieldset.checks legend { font-size: 13px; font-weight: 700; color: var(--steel); padding: 0 4px; }
label.check { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 400; color: var(--marine); margin: 0; padding: 8px 0; }
label.check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--gold); }
/* Eingabefelder einer Zeile bündig, auch wenn eine Beschriftung umbricht */
.grid > label { display: flex; flex-direction: column; }
.grid > label > input, .grid > label > select, .grid > label > textarea { margin-top: auto; }
.grid > label { gap: 4px; }

/* Fahrzeugkarten */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 14px; }
.cards > .card { margin: 0; }
.vcard { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--marine); transition: box-shadow .15s; }
.vcard:hover { box-shadow: 0 0 0 2px var(--goldl); }
.vtop { display: flex; gap: 14px; align-items: flex-start; }
.vicon { flex: none; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(155deg, var(--slate), var(--marine));
         display: flex; align-items: center; justify-content: center; color: var(--goldl); }
.vicon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vtitle { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.vtitle b { font-size: 18px; font-weight: 900; }
.plate { align-self: flex-start; margin: 4px 0; display: inline-flex; align-items: stretch; border: 2px solid var(--marine); border-radius: 6px; overflow: hidden;
         font-family: "DIN Alternate", "Arial Narrow", Arial, sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .04em;
         background: #fff; white-space: nowrap; }
.plate i { font-style: normal; background: #1a3e9c; color: #fff; font-size: 10px; padding: 0 4px; display: flex; align-items: flex-end; padding-bottom: 2px; }
.plate { padding-right: 8px; gap: 6px; line-height: 26px; }
.specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.spec { background: var(--cream); border-radius: 12px; padding: 8px 10px; }
.spec small { display: block; font-size: 11px; font-weight: 700; color: var(--steel); text-transform: uppercase; letter-spacing: .05em; }
.spec b { font-size: 15px; white-space: nowrap; }

/* Teilnehmende Crews in der Reise */
.tn { display: grid; grid-template-columns: 1fr 150px 190px 34px; gap: 10px; align-items: end; padding: 10px 0 10px 12px;
      border-bottom: 1px solid var(--beige); border-left: 4px solid var(--silver); margin-bottom: 6px; }
.tn.s-zugesagt { border-left-color: #3a7d44; }
.tn.s-vielleicht { border-left-color: var(--goldl); }
.tn.s-abgesagt { border-left-color: var(--red); opacity: .7; }
.tn-name { display: flex; flex-direction: column; gap: 2px; align-self: center; min-width: 0; }
.tn-sel { margin: 0; font-size: 11px; }
.tn-sel select { padding: 6px 8px; font-size: 14px; }
.tn .icon { margin-bottom: 4px; }
@media (max-width: 700px) {
  .tn { grid-template-columns: 1fr 1fr 34px; }
  .tn-name { grid-column: 1 / -1; }
}

/* Routen-Varianten */
.vars { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; }
.var { flex: none; display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; border-radius: 14px; border: 1px solid var(--silver);
       background: var(--cream); color: var(--marine); text-decoration: none; font: inherit; cursor: pointer; text-align: left; }
.var small { font-size: 12px; color: var(--steel); }
.var.on { background: var(--marine); border-color: var(--marine); color: #fff; }
.var.on small { color: var(--fog); }
.var.add { border-style: dashed; justify-content: center; color: var(--gold); font-weight: 700; }

/* Ferienanalyse */
.ctrys { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ctry { font: inherit; font-size: 14px; font-weight: 700; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--silver);
        background: #fff; color: var(--steel); cursor: pointer; }
.ctry.on { background: var(--marine); border-color: var(--marine); color: #fff; }
.win { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--beige); }
.wnum { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #3a7d44; color: #fff; font-weight: 900;
        display: flex; align-items: center; justify-content: center; }
.wtxt { flex: 1; display: flex; flex-direction: column; }
.heat { display: flex; flex-direction: column; gap: 4px; overflow-x: auto; margin-bottom: 10px; }
.hm { display: flex; align-items: center; gap: 8px; }
.hml { flex: none; width: 52px; font-size: 12px; font-weight: 700; color: var(--steel); }
.hmd { display: grid; grid-template-columns: repeat(31, 18px); gap: 2px; }
.hmd i { height: 18px; border-radius: 3px; font-style: normal; font-size: 10px; font-weight: 900; color: #fff;
         display: flex; align-items: center; justify-content: center; }
.hmd i.gap { background: transparent; }
.l0 { background: #e3eee0; } .l1 { background: #c8d9a8; } .l2 { background: #e6c46a; } .l3 { background: #d98b3a; } .l4 { background: #b23a2a; }
.nd { background: repeating-linear-gradient(45deg, var(--beige), var(--beige) 3px, #fff 3px, #fff 6px); }
.hmd i.best { outline: 2px solid #3a7d44; outline-offset: -1px; }
.hmd i.l0.best, .hmd i.l1.best { color: #3a7d44; }
.legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lv { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.card.warn { background: #fff6df; border-left: 4px solid var(--goldl); color: var(--slate); }

output.calc { display: block; margin-top: auto; padding: 10px 12px; border-radius: 10px; background: var(--cream); font-size: 16px; font-weight: 900; color: var(--marine); }

/* Destinationen */
.filters { justify-content: space-between; margin-bottom: 14px; align-items: flex-start; }
.filters .ctrys { margin: 0; flex: 1; }
.stamps { margin: 12px 0 0; font-size: 13px; }
.rub { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--beige); flex-wrap: wrap; }
.rub b { flex: 1; min-width: 140px; }
.rub .muted { min-width: 90px; }
.rub .btn { padding: 6px 12px; font-size: 14px; }
.geo { align-items: center; margin-bottom: 10px; }
#nav a span { white-space: nowrap; }
/* Handy: nur Symbole; der Text bleibt für Screenreader lesbar */
@media (max-width: 899px) {
  :root { --nav-h: 56px; }
  #nav a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #nav svg { width: 26px; height: 26px; }
  #nav a.on { box-shadow: inset 0 3px 0 var(--goldl); }
  .filters .ctrys { flex-basis: 100%; }
}

/* Zurück auf Unterseiten */
.hero .back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 8px; color: var(--goldl); font-weight: 700;
              font-size: 14px; text-decoration: none; padding: 4px 0; }
.hero .back:hover { text-decoration: underline; }

/* Eigener Kalender für Ankunft und Abreise */
.dp-btn { display: block; width: 100%; margin-top: 4px; font: inherit; font-size: 16px; text-align: left; color: var(--marine);
          padding: 10px 12px; border: 1px solid var(--silver); border-radius: 10px; background: #fff; cursor: pointer; }
.dp-btn.empty { color: var(--fog); }
.dp-btn:focus { outline: 2px solid var(--goldl); border-color: transparent; }
label:has(.dp) { position: relative; }
.dp { position: absolute; z-index: 1500; top: 100%; left: 0; margin-top: 6px; width: 300px; max-width: calc(100vw - 36px);
      background: #fff; border-radius: 16px; padding: 12px; box-shadow: 0 10px 30px rgba(17,33,45,.25); font-weight: 400; }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: var(--marine); }
.dp-nav { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--cream); font-size: 20px; cursor: pointer; color: var(--marine); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dp-wd { text-align: center; font-size: 11px; font-weight: 700; color: var(--steel); padding: 2px 0; }
.dp-day { aspect-ratio: 1; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 14px; color: var(--marine); cursor: pointer; }
.dp-day:hover { background: var(--cream); }
.dp-day.trip { background: rgba(212,179,101,.35); font-weight: 700; }
.dp-day.range { box-shadow: inset 0 0 0 2px #3a7d44; }
.dp-day.sel { background: var(--marine); color: #fff; }
.dp-foot { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 10px; font-size: 12px; color: var(--steel); }
.dp-leg { display: inline-flex; align-items: center; gap: 5px; }
.dp-leg i { width: 14px; height: 14px; border-radius: 4px; }
.dp-leg i.trip { background: rgba(212,179,101,.6); }
.dp-leg i.range { box-shadow: inset 0 0 0 2px #3a7d44; }
.dp-clear { margin-left: auto; font: inherit; font-size: 12px; border: 0; background: none; color: var(--red); cursor: pointer; }
@media (max-width: 600px) {
  .dp { position: fixed; top: auto; left: 50% !important; right: auto !important; bottom: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom));
        transform: translateX(-50%); width: min(340px, calc(100vw - 24px)); max-width: none; }
}

.named { align-items: center; background: var(--cream); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; flex-wrap: nowrap; }
.named > div { display: flex; flex-direction: column; min-width: 0; }
.named small { font-size: 11px; font-weight: 700; color: var(--steel); text-transform: uppercase; letter-spacing: .05em; }
.named b { font-size: 18px; }
.search[hidden], .named[hidden] { display: none; }

/* Rückfrage-Dialog */
dialog.ask { border: 0; border-radius: 18px; padding: 20px; max-width: min(440px, calc(100vw - 32px)); box-shadow: 0 20px 50px rgba(17,33,45,.3); color: var(--marine); }
dialog.ask::backdrop { background: rgba(6,20,27,.45); }
dialog.ask h3 { font-size: 18px; font-weight: 900; margin-bottom: 6px; }
dialog.ask p { margin: 0 0 12px; color: var(--slate); line-height: 1.4; }
dialog.ask .row { margin-top: 6px; }

/* Filterzeilen und Gruppen */
.frows { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.flabel { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--steel); align-self: center; margin-right: 4px; min-width: 52px; }
h4.grp { margin: 18px 0 8px; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); display: flex; gap: 8px; align-items: center; }
h4.grp:first-child { margin-top: 0; }
h4.grp span { background: var(--beige); color: var(--slate); border-radius: 999px; padding: 0 8px; font-size: 11px; }
#n8hint { display: block; font-size: 12px; font-weight: 400; margin-top: 4px; min-height: 0; }
#n8hint:empty { display: none; }

/* Online ergänzen */
.enrich { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--beige); }
.props { display: flex; flex-direction: column; margin-bottom: 8px; }
.props label.check span { display: flex; flex-direction: column; font-size: 15px; word-break: break-word; }
.props label.check small { font-size: 11px; font-weight: 700; color: var(--steel); text-transform: uppercase; letter-spacing: .05em; }

/* Feld mit Knopf daneben (Website öffnen) */
.grid > label.withbtn { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: end; }
.grid > label.withbtn > input { grid-column: 1; grid-row: 2; margin-top: 0; }
.grid > label.withbtn > .btn { grid-column: 2; grid-row: 2; white-space: nowrap; }
textarea.autogrow { resize: none; overflow: hidden; min-height: 0; overflow-wrap: anywhere; line-height: 1.35; }
.grid > label.withbtn > textarea { grid-column: 1; grid-row: 2; margin-top: 0; }
/* Knopf neben Eingabefeldern (z. B. „Koordinaten aus der Adresse suchen“): an der Unterkante der Felder ausrichten, gleich hoch */
.grid > .geo { align-self: end; margin-bottom: 10px; flex-wrap: wrap; }
.grid > .geo .btn { padding-top: 11px; padding-bottom: 11px; white-space: nowrap; }
.grid > label.withbtn > .btn { padding-top: 11px; padding-bottom: 11px; }

/* Höchstgeschwindigkeiten beim Fahrzeug */
.tempo-wrap { overflow-x: auto; margin-bottom: 8px; }
table.tempo { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tempo th, table.tempo td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--beige); vertical-align: top; }
table.tempo thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--steel); }
table.tempo tbody th { font-weight: 700; white-space: nowrap; }
table.tempo tr.unsure td, table.tempo tr.unsure th { color: var(--steel); font-style: italic; }
p.small { font-size: 12px; }
.tempo-line { font-size: 12px; }

/* Start und Ende je Crew */
.tn-way { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--slate); }
.tn-way a { font-weight: 700; }
.pin.crewpin { background: var(--marine); color: var(--goldl); font-size: 11px; }
h4.sec-free { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 900; color: var(--gold); margin: 14px 0 8px; }
h4.sec-free:first-child { margin-top: 0; }
label.check.same { margin: 6px 0 14px; font-weight: 700; }
#endBlock[hidden] { display: none; }

/* Auswahl der Mitglieder-Anschrift */
.adrpick { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; margin-bottom: 12px; padding: 10px 12px; background: var(--cream); border-radius: 12px; }
.adrpick > span { flex-basis: 100%; font-size: 13px; font-weight: 700; color: var(--slate); }
.adrpick .ctry { display: flex; flex-direction: column; align-items: flex-start; border-radius: 12px; text-align: left; }
.adrpick .ctry small { font-weight: 400; font-size: 12px; }
.adrpick .ctry.on small { color: var(--fog); }
.station.start .num { background: var(--gold); color: #fff; }
.station.start { background: #fffaf0; }
.ziel-tags { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.pill.warn { background: #fde7e7; color: var(--red); }

/* Kennzahlen je Crew */
.tn-kpi { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.kpi { display: flex; flex-direction: column; background: var(--cream); border-radius: 10px; padding: 5px 10px; min-width: 90px; }
.kpi small { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--steel); }
.kpi b { font-size: 14px; white-space: nowrap; }
.kpi.key { background: rgba(212,179,101,.25); }
.station.start.host .num { background: var(--slate); }
.abf-hint { align-self: end; margin-bottom: 14px; }

/* Löschen in der Liste */
.station .icon.del { flex: none; align-self: center; color: var(--steel); }
.station .icon.del:hover { color: var(--red); border-color: var(--red); }
.station.start .icon.del { margin-left: auto; }


/* Sonderzeichen-Leiste */
#zeichen { position: fixed; right: 12px; bottom: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom)); z-index: 1800;
           display: flex; flex-wrap: wrap; gap: 4px; align-items: center; max-width: calc(100vw - 24px); }
#zeichen[hidden] { display: none; }
#zeichen.open { left: 12px; background: #fff; border-radius: 14px; padding: 8px; box-shadow: 0 6px 24px rgba(17,33,45,.25); }
#zeichen button { font: inherit; font-size: 17px; min-width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--silver);
                  background: #fff; color: var(--marine); cursor: pointer; padding: 0 6px; }
#zeichen .z-toggle { background: var(--marine); color: var(--goldl); font-weight: 900; font-size: 14px; border-color: var(--marine);
                     box-shadow: 0 2px 8px rgba(17,33,45,.3); }
#zeichen .z-shift.on { background: var(--gold); color: #fff; border-color: var(--gold); }
#zeichen .z-grp { display: inline-flex; flex-wrap: wrap; gap: 4px; padding-right: 8px; margin-right: 4px; border-right: 1px solid var(--beige); }
#zeichen .z-grp:last-child { border-right: 0; }
#zeichen .z-ch:hover { border-color: var(--gold); background: var(--cream); }
@media (min-width: 900px) { #zeichen { bottom: 16px; } #zeichen.open { left: 236px; } }

/* Fähren auf der Route */
.leg-add { margin-left: auto; flex: none; font: inherit; font-size: 12px; padding: 2px 10px; border: 1px dashed var(--silver); border-radius: 999px;
           background: none; color: var(--steel); cursor: pointer; }
.leg-add:hover { border-color: var(--gold); color: var(--marine); }
.station.faehre { background: #eef5fb; }
.station.faehre .num { background: #1a6fb3; color: #fff; }

.station.faehre.zug { background: #f1eefb; }
.station.faehre.zug .num { background: #6b4fa0; }
.leg-warn { display: block; color: var(--red); font-weight: 700; }
.toolbar.umbruch { flex-wrap: wrap; }

/* Reise drucken oder über den Druckdialog als PDF speichern */
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #nav, #zeichen, #toast, .toast, .toolbar, .icon, .tools, .leg-add, .leg-warn, .hero .back, .tn-sel, .tn-way a, .tn-name .muted,
  .leaflet-control-zoom, .card.warn, .card > .row, .card:has(.var), .btn { display: none !important; }
  html, body, #view { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  .wrap { max-width: none !important; margin: 0 !important; padding: 0 !important; }
  .hero { background: none !important; color: var(--marine) !important; padding: 0 0 8px !important; border-radius: 0 !important; }
  .chip { background: none !important; border: 1px solid var(--silver) !important; }
  .card { box-shadow: none !important; border: 1px solid #e3e3e3; break-inside: avoid; }
  .tn { display: block !important; break-inside: avoid; }
  .map { break-inside: avoid; }
  .station .body { color: var(--marine); }
}

.belege { list-style: none; padding: 0; margin: 0 0 8px; }
.belege li { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.belege .link { flex: 1; background: none; border: 0; padding: 0; font: inherit; color: var(--marine); text-decoration: underline; cursor: pointer; text-align: left; overflow-wrap: anywhere; }

.rub .rub-name { flex: 1; min-width: 140px; width: auto; margin: 0; }
.rub select { width: 68px; margin: 0; padding: 6px 4px; font-size: 16px; }
.rub input[type=color] { width: 40px; height: 34px; padding: 2px; margin: 0; flex: none; cursor: pointer; }

/* Reisezeitraum in der Feriendichte: kräftig blauer Rahmen um die Tage, die Kästchen schließen zu einem Band zusammen */
.hmd i.reise { box-shadow: 0 0 0 3px #1a6fb3; position: relative; z-index: 1; }
.lv.reise { background: #fff; box-shadow: inset 0 0 0 3px #1a6fb3; }
.reise-info { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.heat { padding: 4px; }

/* Destinationen in die Route ziehen */
.route-box { margin-bottom: 14px; }
.route-box.mit-panel { display: grid; gap: 14px; }
@media (min-width: 1000px) { .route-box.mit-panel { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .dest-panel { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; } }
.dest-panel input { margin-bottom: 8px; }
.dest-zeile { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 4px; border: 1px solid var(--silver); border-left: 4px solid var(--silver); border-radius: 8px; background: #fff; cursor: grab; }
.dest-zeile:active { cursor: grabbing; }
.dest-text { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; font-size: 14px; }
.drop-zone { display: none; }
.route-box.ziehen .drop-zone { display: block; margin: 6px 0 6px 28px; padding: 10px; border: 2px dashed var(--gold); border-radius: 10px; color: var(--gold); font-size: 13px; font-weight: 700; text-align: center; }
.route-box.ziehen .drop-zone.ueber { background: var(--goldl); color: var(--marine); border-style: solid; }
@media print { .dest-panel, .drop-zone { display: none !important; } .route-box.mit-panel { display: block; } }

/* Karte der Destinationen */
.dest-pin span { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 3px solid var(--gold); font-size: 16px; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.dest-pin { background: none; border: 0; }
#kindMap { margin-bottom: 6px; }
.dest-filter { display: flex; gap: 6px; }
.dest-filter select { flex: 1; min-width: 0; margin: 0 0 8px; padding: 6px; font-size: 14px; }
.route-box.ziehen .drop-zone.ende-fix { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1200; margin: 0; padding: 16px 28px; background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.3); max-width: 90vw; }
.route-box.ziehen .drop-zone.ende-fix.ueber { background: var(--goldl); }
@media (max-width: 899px) { .route-box.ziehen .drop-zone.ende-fix { bottom: calc(var(--nav-h) + 12px); } }

/* Übernachtungen direkt in der Stationskarte */
.naechte { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.naechte small { font-size: 11px; color: var(--steel); }
.naechte-reihe { display: flex; align-items: center; gap: 4px; }
.naechte-reihe .icon { width: 30px; }
.naechte input { width: 46px; height: 30px; margin: 0; padding: 0 2px; text-align: center; font-weight: 700; -moz-appearance: textfield; appearance: textfield; }
.naechte input::-webkit-outer-spin-button, .naechte input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 599px) { .station { flex-wrap: wrap; } .station .naechte { order: 5; width: 100%; flex-direction: row; justify-content: flex-end; gap: 8px; } }
@media print { .naechte { display: none !important; } }

/* Ausstattung als Piktogramme: aktiv farbig, sonst ausgegraut */
.pictos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.picto { display: inline-flex; color: #cdd2d6; }
.picto.an { color: var(--farbe); }
.picto svg, .picto-set svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
fieldset.picto-set { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 10px; }
fieldset.picto-set label { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 104px; min-height: 68px; margin: 0; padding: 8px 4px;
  border: 2px solid var(--silver); border-radius: 10px; color: #b4bbc0; font-size: 12px; font-weight: 700; text-align: center; cursor: pointer; background: #fafafa; }
fieldset.picto-set svg { width: 28px; height: 28px; }
fieldset.picto-set input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
fieldset.picto-set label:has(input:checked) { color: var(--farbe); border-color: var(--farbe); background: #fff; }
fieldset.picto-set label:has(input:focus-visible) { outline: 2px solid var(--marine); outline-offset: 2px; }

/* Status eines Ziels in der Route */
.zielstatus { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; margin: 0; }
.zielstatus small { font-size: 11px; color: var(--steel); }
.zielstatus select { width: 200px; height: 30px; margin: 0; padding: 0 4px; font-size: 13px; font-weight: 700; color: var(--farbe); border: 2px solid var(--farbe); border-radius: 8px; background-color: #fff; }
@media (max-width: 599px) { .station .zielstatus { order: 4; width: 100%; flex-direction: row; justify-content: flex-end; gap: 8px; } }
@media print { .zielstatus { display: none !important; } }

/* E-Mail-Vorlagen: Platzhalter nach Rubriken */
.ph-box { display: flex; flex-direction: column; gap: 6px; max-height: 480px; overflow-y: auto; }
.ph-box details { border-top: 1px solid var(--silver); padding: 6px 0; }
.ph-box summary { cursor: pointer; font-weight: 700; }
.ph-liste { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; }
.ph { padding: 4px 10px; border: 1px solid var(--gold); border-radius: 999px; background: #fffaf0; color: var(--marine); font-size: 13px; font-weight: 700; cursor: grab; user-select: none; }
.ph:hover { background: rgba(212,179,101,.3); }
.ph:focus-visible { outline: 2px solid var(--marine); outline-offset: 2px; }

/* Buchungsunterlagen: Ablage und Anzeige in der Route */
.ablage { margin-bottom: 12px; }
.ablage-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ablage-feld { position: relative; display: block; margin: 0; padding: 6px 12px; border: 2px dashed var(--silver); border-radius: 10px; color: var(--steel); font-size: 13px; font-weight: 700; text-align: center; cursor: pointer; }
.ablage.ueber .ablage-feld, .ablage-feld:hover { border-color: var(--gold); background: #fffaf0; }
.ablage-feld input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.ablage-feld:has(input:focus-visible) { outline: 2px solid var(--marine); outline-offset: 2px; }
.status-zeile { display: flex; align-items: flex-end; gap: 8px; flex: none; }
.doks { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 98px; }
@media (max-width: 599px) { .station .status-zeile { order: 4; width: 100%; align-items: center; justify-content: flex-end; } .station .status-zeile .zielstatus { width: auto; } }
.doks .dok { display: inline-flex; padding: 3px; border: 1px solid var(--silver); border-radius: 8px; background: #fff; color: var(--marine); cursor: pointer; }
.doks .dok:hover { border-color: var(--gold); color: var(--gold); }
.doks .dok svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media print { .doks { display: none !important; } }

/* Fähren haben kein Nächte-Feld (114px + Abstand), ohne Pfeile auch keine Spalte dafür: Status trotzdem bündig mit den Stationen */
@media (min-width: 600px) {
  .station.faehre .zielstatus { margin-right: 126px; }
  .station.faehre:not(:has(.tools)) .zielstatus { margin-right: calc(126px + 46px); }
}

/* Buchung je Crew an einer Station */
.zielstatus select:disabled { opacity: 1; background: #f6f6f6; cursor: default; }
fieldset[data-block][hidden] { display: none; }

/* Reihenfolge der Crews */
.tn-griff { display: inline-block; margin-right: 8px; color: var(--steel); cursor: grab; user-select: none; }
.tn-griff:focus-visible { outline: 2px solid var(--marine); outline-offset: 2px; }
.tn-pfeil { display: none; margin: 0 4px 0 0 !important; }
.tn.davor { box-shadow: inset 0 3px 0 var(--gold); }
.tn.danach { box-shadow: inset 0 -3px 0 var(--gold); }
@media (pointer: coarse) { .tn-griff { display: none; } .tn-pfeil { display: inline-block; } }
@media print { .tn-griff, .tn-pfeil { display: none !important; } }

/* Druckansicht: je Route Übersicht und ganzseitige Karte; Maße fest, damit die Karte schon am Bildschirm in Papiergröße berechnet wird */
.druck :is(select, input, a[href^="#/reisen"], .tn-griff, .dok) { pointer-events: none; }
.druck .toolbar a { pointer-events: auto; }
.druck-karte { position: relative; width: 186mm; margin: 12px auto; }
.druck-karte .map { width: 186mm; height: 268mm; margin: 0; border-radius: 0; }
.druck-name { position: absolute; top: 4mm; left: 4mm; z-index: 1000; padding: 3px 10px; border-radius: 6px; background: #fff; color: var(--marine); font-weight: 900; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
@media print {
  @page { size: A4; margin: 12mm 12mm 14mm; @bottom-center { content: "Seite " counter(page) " von " counter(pages); font-size: 9pt; color: #555; } }
  .druck-route { break-before: page; }
  .druck-route:first-of-type { break-before: auto; }
  .druck-karte { break-before: page; break-inside: avoid; margin: 0; }
}

/* QR-Code zur Website des Ziels, ganz rechts im Kasten. Der weiße Kasten ist die nötige Ruhezone. */
.ziel-qr { flex: none; width: 20mm; height: 20mm; margin-left: auto; image-rendering: pixelated; }

/* Erfassung fürs E-Mail-PDF: Breite wie die bedruckbare A4-Fläche */
html.pdf-bau #view { width: 186mm !important; }
html.pdf-bau .druck-route { break-before: auto; }

/* Reiseliste: Suche, Filter und Gruppen nach Status */
.reise-filter { flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.reise-filter input { flex: 1 1 240px; width: auto; margin: 0; }
.reise-filter select { flex: 0 1 170px; width: auto; margin: 0; }
.reise-filter .btn { flex: none; }
.reise-gruppe { margin: 18px 0 8px; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.reise-gruppe span { margin-left: 4px; color: var(--steel); }

/* Unterer Bereich des linken Menues: nur am PC, am Handy stehen die Links in den Einstellungen */
.nav-fuss { display: none; }
@media (min-width: 900px) {
  #nav { overflow-y: auto; }
  #nav a[data-r="einstellungen"] { margin-top: auto; }   /* unten, direkt über dem Strich */
  .nav-fuss { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 8px; padding: 14px 12px 4px; border-top: 1px solid rgba(255,255,255,.12); }
  .nav-fuss button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin-bottom: 6px; padding: 8px 10px; border: 1px solid var(--gold); border-radius: 10px; background: rgba(212,179,101,.14); color: var(--goldl); font: inherit; font-size: 13px; font-weight: 700; line-height: 1.25; text-align: left; cursor: pointer; }
  .nav-fuss button:hover { background: var(--gold); color: #fff; }
  .nav-fuss svg { flex: none; }
  #nav .nav-fuss a { height: auto; padding: 0; border-radius: 0; font-size: 13px; font-weight: 400; }
  #nav .nav-fuss a:hover { color: #fff; }
}

/* Reise: Aktionen als runde Symbole mit Kurzwort */
.aktionen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 6px; margin-bottom: 14px; }
.aktion { width: 72px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--slate); font: inherit; font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; }
.aktion span { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(212,179,101,.3); color: var(--gold); transition: background .15s, color .15s; }
.aktion svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aktion:hover span, .aktion:focus-visible span { background: var(--gold); color: #fff; }
.aktion:focus-visible { outline: 2px solid var(--goldl); outline-offset: 3px; border-radius: 10px; }
.aktion:disabled { opacity: .5; cursor: default; }
@media (max-width: 599px) { .aktionen { justify-content: center; } }
.nav-fuss small { color: var(--fog); font-size: 12px; margin-bottom: 2px; }
.nav-recht { display: flex; gap: 14px; }

/* Abmelden oben rechts über dem Kopfbereich */
#abmelden { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 16px; z-index: 5; display: inline-flex; align-items: center; gap: 6px;
            padding: 6px 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(255,255,255,.08);
            color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; }
#abmelden:hover { background: var(--gold); border-color: var(--gold); }
#abmelden svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#abmelden[hidden] { display: none; }
/* Hinweis kurz vor Ablauf des Zugangs; rechts bleibt Platz für „Abmelden“ */
#zugang, #umzugBand { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 10px 140px 10px 16px; background: var(--goldl); color: var(--marine); font-size: 14px; font-weight: 700; text-align: center; }
#zugang .btn, #umzugBand .btn { padding: 6px 14px; font-size: 13px; }
#zugang[hidden] { display: none; }
body:not(.ist-admin) .nur-admin { display: none; }
@media (max-width: 599px) { #zugang, #umzugBand { padding-right: 16px; padding-top: 58px; } }
@media print { #zugang, #umzugBand { display: none !important; } }
body:has(#abmelden:not([hidden])) .hero h1 { padding-right: 120px; }
@media print { #abmelden { display: none !important; } }

/* Video Tutorials */
.tutorial video { display: block; width: 100%; max-width: 960px; margin-top: 12px; border-radius: 12px; background: #000; }
/* Video Tutorials: Einstieg, Themen mit Kacheln, Video im Fenster */
.start-hier { display: flex; gap: 20px; align-items: center; }
.start-hier h3 { margin-bottom: 4px; }
.start-hier .row { margin-top: 10px; flex-wrap: wrap; }
.lulu-rund { flex: none; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--goldl); }
.thema { margin: 26px 4px 12px; font-size: 18px; font-weight: 900; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.kachel { display: flex; flex-direction: column; gap: 6px; padding: 0 0 14px; border: 0; border-radius: 16px; background: #fff; color: inherit; text-align: left; font: inherit; cursor: pointer; overflow: hidden; box-shadow: 0 1px 3px rgba(17,33,45,.08); }
.kachel b, .kachel .muted { padding: 0 14px; }
.kachel .muted { font-size: 14px; line-height: 1.4; }
.kachel .bild { position: relative; display: block; aspect-ratio: 16 / 9; margin-bottom: 4px; background: var(--marine); }
.kachel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kachel .play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: rgba(17,33,45,.75); transition: background .2s; }
.kachel .play::after { content: ''; position: absolute; left: 22px; top: 17px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
.kachel .dauer { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(17,33,45,.85); color: #fff; font-size: 12px; font-weight: 700; }
.kachel:hover .play { background: var(--gold); }
.kachel:focus-visible { outline: 3px solid var(--goldl); outline-offset: 2px; }
#tutorialFenster { width: min(1000px, 94vw); padding: 0; border: 0; border-radius: 16px; background: var(--marine); }
#tutorialFenster::backdrop { background: rgba(6,20,27,.75); }
#tutorialFenster .kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; color: #fff; }
#tutorialFenster .kopf .btn { color: #fff; border-color: rgba(255,255,255,.4); }
#tutorialFenster video { display: block; width: 100%; background: #000; }
@media (max-width: 560px) { .start-hier { flex-direction: column; text-align: center; } .start-hier .row { justify-content: center; } }

/* Manual */
.hb-kopf input[type=search] { width: 100%; }
.hb-inhalt { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; }
.hb-inhalt a { padding: 6px 12px; border-radius: 999px; background: var(--cream); color: var(--marine); font-size: 14px; font-weight: 700; text-decoration: none; }
.hb-inhalt a:hover { background: var(--goldl); }
.hb-kapitel { scroll-margin-top: 16px; }
.hb-abschnitt { padding: 0; }
.hb-abschnitt summary { padding: 14px 18px; font-weight: 900; color: var(--marine); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.hb-abschnitt summary::-webkit-details-marker { display: none; }
.hb-abschnitt summary::after { content: '+'; color: var(--gold); font-size: 20px; line-height: 1; }
.hb-abschnitt[open] summary::after { content: '–'; }
.hb-text { padding: 0 18px 14px; line-height: 1.6; color: var(--slate); }
.hb-text p { margin: 0 0 10px; }
.hb-text ul { margin: 0 0 10px; padding-left: 20px; }
.hb-text a { color: var(--gold); font-weight: 700; }
.hb-kapitel[hidden], .hb-abschnitt[hidden] { display: none; }

/* Destinationen: Reservierbarkeit als Etikett neben den Ausstattungs-Symbolen */
.dest-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.dest-extra .pictos { margin-top: 0; }
.res { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; letter-spacing: .02em; white-space: nowrap; }
.res-ja { background: #e3f1e5; color: #2e7d32; }
.res-nein { background: #fde7e7; color: var(--red); }

/* Angesehene Tutorials: grüne Leiste unten am Bild und Haken an der Dauer, wie bei Streaming-Diensten */
.kachel .haken { display: none; }
.kachel.gesehen .haken { display: inline; }
.kachel.gesehen .dauer { background: #2e7d32; }
.kachel .bild::after { content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: #2e7d32; transition: width .6s ease-out; }
.kachel.gesehen .bild::after { width: 100%; }
.start-knopf .zeichen::before { content: '▶'; margin-right: 6px; }
.start-knopf.gesehen { background: #2e7d32; border-color: #2e7d32; }
.start-knopf.gesehen .zeichen::before { content: '✓'; }
/* Dropbox oder OneDrive: zwei Knöpfe als ein Schritt */
.speicher-wahl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 6px; border: 1.5px dashed var(--goldl); border-radius: 999px; }
.speicher-wahl .oder { font-size: 13px; font-weight: 700; color: var(--steel); }