/* 4.17: Orts- und Branchenseiten („Revier“) – Seekarte, Kurswerte, Ortsteile, Branchen */
.brot{margin:0 0 26px}
.brot ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;font-size:14px;color:#A9BACF}
.brot li+li::before{content:"/";margin:0 10px;opacity:.5}
.brot a{text-decoration:none;color:#CFDDF2}
.brot a:hover{text-decoration:underline}

/* Kurs: Text links, Seekarte rechts */
.kurs{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center}
.kurs-text p{color:var(--mute);max-width:30em}
.kurs-werte{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 36px;margin:32px 0 26px}
.kurs-werte div{border-top:2px solid var(--akzent);padding-top:10px}
.kurs-werte dt{font-size:14px;color:var(--mute)}
.kurs-werte dd{margin:2px 0 0;font-stretch:125%;font-weight:650;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.03em;line-height:1.1}
.kurs-werte div:last-child dd{font-size:clamp(17px,1.6vw,20px);font-stretch:100%;letter-spacing:0;padding-top:.25em;max-width:11em}
.karte{margin:0;background:var(--card);border-radius:22px;padding:clamp(10px,1.6vw,20px);box-shadow:0 0 0 1px var(--line)}
.karte figcaption{font-size:13px;color:var(--mute);padding:10px 6px 2px}
.seekarte{width:100%;height:auto}
.seekarte .gr{stroke:var(--line);stroke-width:1}
.seekarte .grt{font:500 10.5px var(--mono);fill:var(--mute);opacity:.75}
.seekarte .ems{fill:none;stroke:var(--flieder);stroke-width:7;stroke-linecap:round;opacity:.9}
html.night .seekarte .ems{stroke:#264A78}
.seekarte .emst{font:20px var(--serif);fill:var(--akzent);opacity:.8}
.seekarte .ort circle{fill:var(--mute);opacity:.55}
.seekarte .ort text{font:600 14px var(--sans);fill:var(--fg)}
.seekarte .ort.mit circle{opacity:.9;fill:var(--fg)}
.seekarte .ort.ziel circle{fill:var(--akzent);opacity:1;stroke:var(--card);stroke-width:3}
.seekarte .ort.ziel text{font-size:17px;font-weight:700;fill:var(--akzent)}
.seekarte .heim circle{fill:var(--akzent)}
.seekarte .heim .ring{fill:none;stroke:var(--akzent);stroke-width:1.5;opacity:.5}
.seekarte .heim text{font:700 15px var(--sans);fill:var(--fg);text-anchor:end}
.seekarte .route{stroke:var(--akzent);stroke-width:2.5;stroke-dasharray:.02 .015;stroke-linecap:round}
/* einziger Bewegungsmoment: der Kurs wird beim Erscheinen gezogen */
html.js .karte.rv .route{stroke-dasharray:1;stroke-dashoffset:1}
html.js .karte.rv.da .route{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease) .4s}
@media (prefers-reduced-motion:reduce){html.js .karte.rv .route{stroke-dashoffset:0;transition:none}}
@media (max-width:860px){.kurs{grid-template-columns:1fr}.kurs-werte{gap:8px 22px}}
@media (max-width:420px){.kurs-werte{grid-template-columns:repeat(2,auto)}.kurs-werte div:last-child{grid-column:1/-1}}

.dienst .text p{max-width:38em}
.dienst .text p:first-child{font-size:19px}
.weiter{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:28px}

/* Zwei Spalten: Ortsteile und Branchen */
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);border-top:1px solid var(--line);padding-top:clamp(40px,5vw,72px)}
.d3{font-stretch:125%;font-size:clamp(26px,2.8vw,38px);letter-spacing:-.04em;line-height:1.05;margin:0 0 12px}
.mute{color:var(--mute)}
.nb{margin-top:18px;font-size:15px}
.chips{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-size:15px;line-height:1.2;padding:8px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.chips li:has(a){padding:0;box-shadow:inset 0 0 0 1.5px var(--akzent)}
.chips a{display:block;padding:8px 14px;text-decoration:none;color:var(--akzent);font-weight:600;border-radius:999px}
.chips a:hover{background:var(--akzent);color:#fff}
.b-karten{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.b-karten a{display:grid;gap:2px;padding:16px 36px 16px 0;border-bottom:1px solid var(--line);text-decoration:none;position:relative}
.b-karten a::after{content:"";position:absolute;right:4px;top:50%;width:10px;height:10px;border:solid var(--akzent);border-width:2px 2px 0 0;transform:translateY(-50%) rotate(45deg);transition:right .3s var(--ease)}
.b-karten a:hover::after{right:0}
.b-karten b{font-weight:650;font-size:18px}
.b-karten span{font-size:15px;color:var(--mute)}
@media (max-width:860px){.zwei{grid-template-columns:1fr}}

/* Entfernungstabelle */
.tabelle{overflow-x:auto;border-top:1px solid var(--line)}
.tabelle table{width:100%;border-collapse:collapse;font-size:16px;min-width:560px}
.tabelle th{text-align:left;font-weight:500;font-size:14px;color:var(--mute);padding:14px 16px 14px 0;border-bottom:1px solid var(--line)}
.tabelle td{padding:12px 16px 12px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.tabelle td:first-child{font-weight:600}
.tabelle td:nth-child(3),.tabelle td:nth-child(4),.tabelle th:nth-child(3),.tabelle th:nth-child(4){text-align:right;padding-right:28px}
.tabelle td:last-child{color:var(--mute)}

/* Branchen-Übersicht */
.b-zeilen{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.b-zeilen a{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto;gap:8px 40px;align-items:baseline;padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--line);text-decoration:none}
.bz-name{font-stretch:125%;font-weight:650;font-size:clamp(24px,2.8vw,40px);letter-spacing:-.04em;line-height:1.05;transition:color .3s}
.bz-was{color:var(--mute)}
.bz-los{font-weight:600;color:var(--akzent);font-size:15px}
.b-zeilen a:hover .bz-name{color:var(--akzent)}
.b-fehlt{margin:40px 0 0;font-size:19px;max-width:40em}
@media (max-width:760px){.b-zeilen a{grid-template-columns:1fr}.bz-los{display:none}}

/* Beispiele auf Branchenseiten: ein bis zwei Kacheln */
.revier-flotte .liegeplaetze.n1{grid-template-columns:minmax(0,1fr)}
.revier-flotte .liegeplaetze.n1 .liegeplatz{max-width:560px}
.revier-flotte .liegeplaetze.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fl-extra{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin:clamp(32px,4vw,56px) 0 0}
.fl-extra .lnk{color:#fff}


/* Seitenaufbau auf Branchenseiten */
.aufbau{margin:0;border-top:1px solid var(--line)}
.aufbau div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,5fr);gap:4px 28px;padding:16px 0;border-bottom:1px solid var(--line)}
.aufbau dt{font-weight:650}
.aufbau dd{margin:0;color:var(--mute)}
@media (max-width:560px){.aufbau div{grid-template-columns:1fr}}
/* Seekarte am Handy: Schrift größer, weil die Karte verkleinert wird */
@media (max-width:600px){.seekarte .ort text{font-size:21px}.seekarte .ort.ziel text{font-size:24px}.seekarte .heim text{font-size:22px}.seekarte .grt{font-size:15px}.seekarte .emst{font-size:30px}}
/* 4.19: Tabelle mit vier Spalten (Haren) */
.tabelle-4 table{min-width:440px}
.tabelle.tabelle-4 th:first-child{width:40%}
.tabelle.tabelle-4 td:nth-child(2),.tabelle.tabelle-4 th:nth-child(2),.tabelle.tabelle-4 td:nth-child(3),.tabelle.tabelle-4 th:nth-child(3){text-align:right;padding-right:28px}
.tabelle.tabelle-4 td:nth-child(4),.tabelle.tabelle-4 th:nth-child(4){text-align:left;padding-right:0;padding-left:28px}