/* T&R in der Region. Nutzt die Farben, Schrift und Bausteine der übrigen Unterseiten (dunkles T&R-Design). */
:root{
  --ink:#1E3442; --paper:#142030; --deep:#0F1926;
  --orange:#DA29C6; --orange-btn:#C520B3; --orange-text:#E85CDA;
  --grey-mid:#B3A3AC; --grey-line:rgba(167,121,142,.22); --white:#1E3442;
}
body{ font-family:'Inter',sans-serif; color:#F5F3F1; background:var(--paper); line-height:1.6; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.breadcrumb{ max-width:1240px; margin:0 auto; padding:16px 24px 0; font-size:13px; color:var(--grey-mid); }
.breadcrumb a{ color:var(--grey-mid); text-decoration:none; }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb a{ display:inline-block; padding:12px 4px; margin:-12px -4px; }
.breadcrumb b{ color:#fff; }
:focus-visible{ outline:2px solid var(--orange-text); outline-offset:3px; }

/* Titel über der Karte */
.r-hero{ max-width:980px; margin:0 auto; padding:34px 24px 22px; text-align:center; }
.r-tag{ display:inline-block; font-size:12.5px; text-transform:uppercase; letter-spacing:.07em; color:#fff; font-weight:700; margin-bottom:12px; border:1px solid var(--orange); padding:6px 14px; border-radius:20px; }
.r-hero h1{ font-size:clamp(28px,4.6vw,48px); font-weight:700; letter-spacing:.02em; line-height:1.15; text-wrap:balance; }
.r-hero h1 span{ color:var(--orange-text); }

/* Karte */
.map-wrap{ max-width:1560px; margin:0 auto; padding:0 16px; }
.filters-row{ display:flex; justify-content:center; margin:0 0 16px; }
.filters{ display:inline-grid; grid-auto-flow:column; gap:6px; padding:6px; border-radius:99px; background:var(--ink); border:1px solid var(--grey-line); }
.filter-btn{ font:600 15px/1.2 'Inter',sans-serif; padding:13px 24px; min-height:48px; border-radius:99px; border:0; background:transparent; color:var(--grey-mid); cursor:pointer; transition:background .3s ease,color .3s ease; white-space:nowrap; }
.filter-btn:hover{ color:#fff; }
.filter-btn.is-on{ background:var(--orange-btn); color:#fff; }
.map-stage{ position:relative; aspect-ratio:var(--map-ar,2/1); border-radius:28px; border:1px solid var(--grey-line); overflow:hidden;
  background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(106,47,143,.22),transparent 70%),linear-gradient(180deg,#16263a,#101b29); box-shadow:0 30px 70px rgba(0,0,0,.35); }
.map-stage svg{ display:block; width:100%; height:100%; }
.map-stage[data-layout="tall"]{ max-width:720px; margin-inline:auto; }
.map-demo{ position:absolute; left:16px; top:14px; z-index:4; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:rgba(15,25,38,.82); border:1px dashed #ffb35c; padding:6px 12px; border-radius:99px; }
.map-demo[hidden]{ display:none; }
.map-note{ max-width:900px; margin:14px auto 0; padding:0 8px; text-align:center; font-size:14px; color:var(--grey-mid); }
.map-note b{ color:#fff; font-weight:600; }

/* Bühne: ruhiges Einblenden */
.l-back,.l-world .hill,.l-world .lm,.l-world .tr-building,.l-lmlabels,.t-place,.l-halo{ opacity:0; transition:opacity 1.1s ease; }
.s1 .l-back,.s1 .l-world .hill,.s1 .l-halo{ opacity:1; }
.s2 .tr-building{ opacity:1; }
.s3 .lm,.s3 .l-lmlabels{ opacity:1; }
.s4 .t-place{ opacity:1; }
.dot,.sh{ opacity:0; transition:opacity .8s ease; }
.s4 .loc.zero .dot{ opacity:1; }
.s5 .loc:not(.zero) .sh{ opacity:1; }
.arc{ stroke:#e85cda; stroke-opacity:.6; stroke-width:2.4; stroke-dasharray:1 9; stroke-linecap:round; opacity:0; transition:opacity .6s ease; }
.s5 .arc.on{ opacity:1; }
.mk,.mk-h{ transform-box:fill-box; transform-origin:50% 100%; }
.mk{ opacity:0; transform:scale(.9); transition:opacity .38s ease,transform .38s ease; }
.mk.show{ opacity:1; transform:scale(1); }
.mk.out{ opacity:0; transform:scale(.9); transition-duration:.22s; }
.mk-h{ transition:transform .25s ease; }
@media (hover:hover) and (pointer:fine){ .loc:not(.zero):hover .mk-h{ transform:scale(1.05); } }
.lab-g{ transition:transform .4s ease; }
.t-place{ fill:#fff; font-family:'Inter',sans-serif; font-weight:600; paint-order:stroke; stroke:#0f1926; stroke-width:5px; stroke-linejoin:round; }
.loc.zero .t-place{ fill:#cfc7cd; font-weight:500; }
.t-lm{ fill:#b9c6d4; font-family:'Inter',sans-serif; font-weight:600; paint-order:stroke; stroke:#0f1926; stroke-width:4px; stroke-linejoin:round; }
.num{ fill:#fff; font-family:'Inter',sans-serif; font-weight:800; pointer-events:none; }
.loc{ outline:none; }
.loc:not(.zero) .hit{ cursor:pointer; }
.loc.zero{ pointer-events:none; }
.loc:focus-visible .ball,.loc.is-open .ball{ stroke:#fff; stroke-width:3; }
.ripple{ transform-box:fill-box; transform-origin:center; opacity:0; }
.s2 .ripple{ animation:ripple 6s ease-out infinite; }
.s2 .ripple.r2{ animation-delay:3s; }
@keyframes ripple{ 0%{ opacity:0; transform:scale(.55); } 18%{ opacity:.45; } 100%{ opacity:0; transform:scale(1.7); } }

.map-tip{ position:absolute; z-index:6; transform:translate(-50%,-100%); min-width:140px; padding:10px 18px 12px; text-align:center; background:rgba(15,25,38,.96); border:1px solid rgba(232,92,218,.5); border-radius:16px; box-shadow:0 18px 40px rgba(0,0,0,.5); pointer-events:auto; }
.map-tip[hidden]{ display:none; }
.map-tip b{ display:block; font-size:15px; font-weight:700; }
.map-tip span{ display:block; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--grey-mid); margin-top:2px; }
.map-tip em{ display:block; font-style:normal; font-size:12.5px; color:var(--grey-mid); }
.map-legend{ text-align:center; font-size:14px; color:var(--grey-mid); margin:-4px 0 14px; }
.map-tip strong{ display:block; font-size:30px; line-height:1.15; font-weight:800; color:var(--orange-text); }

/* Abschnitte */
.r-sec{ max-width:1240px; margin:0 auto; padding:70px 24px 10px; }
.r-head{ max-width:760px; margin:0 auto 32px; text-align:center; }
.r-head h2{ font-size:clamp(24px,3vw,32px); font-weight:700; line-height:1.2; text-wrap:balance; }
.r-head p{ color:var(--grey-mid); font-size:15.5px; margin-top:10px; }

/* Kennzahlen */
.kpis{ list-style:none; display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.kpi{ grid-column:span 2; background:var(--white); border:1px solid var(--grey-line); border-radius:20px; padding:26px 22px 24px; display:flex; flex-direction:column; gap:8px; position:relative; overflow:hidden; }
.kpi:nth-child(-n+2){ grid-column:span 3; }
.kpi::after{ content:""; position:absolute; right:-40px; top:-40px; width:140px; height:140px; border-radius:50%; background:radial-gradient(circle,rgba(218,41,198,.18),transparent 70%); pointer-events:none; }
.kpi-num{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 8px; font-weight:800; line-height:1; letter-spacing:-.01em; }
.kpi-num .a{ font-size:22px; color:var(--orange-text); font-weight:700; }
.kpi-num .n{ font-size:clamp(40px,4.4vw,60px); font-variant-numeric:tabular-nums; }
.kpi-num .u{ font-size:18px; font-weight:700; color:#fff; }
.kpi-label{ font-size:15.5px; color:#fff; font-weight:600; line-height:1.35; }
.kpi-sub{ font-size:13.5px; color:var(--grey-mid); line-height:1.45; }
.kpi-tag{ align-self:flex-start; margin-top:auto; font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#F29BE8; border:1px solid rgba(232,92,218,.45); padding:3px 10px; border-radius:99px; }
.kpi.feature .n{ font-size:clamp(52px,6vw,84px); }

/* Aufklapper: So rechnen wir, FAQ */
.fold{ background:var(--white); border:1px solid var(--grey-line); border-radius:18px; margin-top:16px; overflow:hidden; }
.fold summary{ list-style:none; cursor:pointer; padding:20px 24px; font-weight:700; font-size:16.5px; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; }
.fold summary::-webkit-details-marker{ display:none; }
.fold summary::after{ content:"+"; flex:none; width:32px; height:32px; border-radius:50%; border:1px solid var(--grey-line); display:grid; place-items:center; font-size:20px; font-weight:500; color:var(--orange-text); transition:transform .35s ease; }
.fold[open] summary::after{ transform:rotate(45deg); }
.fold summary:hover{ color:var(--orange-text); }
.fold-body{ padding:0 24px 24px; color:var(--grey-mid); font-size:15px; max-width:880px; }
.fold[open] .fold-body{ animation:foldIn .5s ease both; }
@keyframes foldIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.fold-body p{ margin:0 0 12px; }
.fold-body b{ color:#fff; }
.calc{ width:100%; border-collapse:collapse; margin:10px 0 16px; font-size:14.5px; }
.calc th,.calc td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--grey-line); vertical-align:top; }
.calc th{ color:#fff; font-weight:600; width:34%; }
.calc td{ font-variant-numeric:tabular-nums; }
.calc-wrap{ overflow-x:auto; }
.fold-note{ border-left:3px solid var(--orange); padding:4px 0 4px 14px; color:#fff; }

/* Text und Leistungen */
.r-two{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:start; }
.r-two h2{ font-size:clamp(24px,3vw,32px); font-weight:700; line-height:1.2; margin-bottom:14px; text-wrap:balance; }
.r-two p{ color:var(--grey-mid); font-size:16px; margin-bottom:12px; }
.r-motto{ font-size:clamp(20px,2.2vw,26px); font-weight:700; color:#fff; line-height:1.3; margin-top:18px; }
.r-motto span{ color:var(--orange-text); }
.chips{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.chips a{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-height:56px; padding:12px 16px; border-radius:16px; background:var(--white); border:1px solid var(--grey-line); color:#fff; font-weight:600; font-size:15.5px; text-decoration:none; transition:border-color .25s ease,transform .25s ease; }
.chips a:hover{ border-color:var(--orange); transform:translateY(-2px); }
.chips small{ display:block; font-size:12.5px; font-weight:500; color:var(--grey-mid); }

/* CTA */
.r-cta{ max-width:1240px; margin:0 auto; padding:70px 24px 60px; }
.r-cta-card{ text-align:center; background:linear-gradient(135deg,rgba(218,41,198,.2),rgba(30,52,66,.9) 60%); border:1px solid var(--grey-line); border-radius:24px; padding:48px 24px; }
.r-cta-card h2{ font-size:clamp(26px,3.4vw,38px); font-weight:700; margin-bottom:20px; text-wrap:balance; }
.rbtn{ display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 30px; border-radius:99px; background:var(--orange-btn); color:#fff; font-weight:600; font-size:16px; text-decoration:none; transition:background .2s ease,transform .2s ease; }
.rbtn:hover{ background:var(--orange); transform:translateY(-2px); }

/* Fußzeile wie auf den anderen Seiten */
footer{ background:var(--ink); color:#a9a3a7; text-align:center; padding:24px; font-size:12.5px; border-top:1px solid #333; }
footer a{ color:#b3a3ac; text-decoration:none; }
footer a:hover{ color:#fff; }

@media (max-width:1100px){
  .kpis{ grid-template-columns:repeat(2,1fr); }
  .kpi,.kpi:nth-child(-n+2){ grid-column:span 1; }
  .kpi:nth-child(2){ grid-column:span 1; }
  .kpi:last-child{ grid-column:1/-1; }
  .r-two{ grid-template-columns:1fr; gap:24px; }
}
@media (max-width:640px){
  .l-lmlabels{ display:none; }
  .r-hero{ padding:24px 16px 16px; }
  .filters-row{ display:block; }
  .filters{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-flow:row; border-radius:22px; width:100%; }
  .filter-btn{ padding:10px 6px; font-size:13.5px; min-height:52px; white-space:normal; border-radius:16px; }
  .map-stage{ border-radius:20px; }
  .map-demo{ left:10px; top:10px; }
  .kpis{ grid-template-columns:1fr; }
  .kpi:last-child{ grid-column:auto; }
  .r-sec{ padding:48px 16px 6px; }
  .chips{ grid-template-columns:1fr; }
  .fold summary{ padding:16px 18px; }
  .fold-body{ padding:0 18px 20px; }
  .calc th{ width:auto; display:block; border-bottom:0; padding-bottom:0; }
  .calc td{ display:block; padding-top:2px; }
  .calc tr{ display:block; }
  .map-note{ font-size:13.5px; }
}
@media (prefers-reduced-motion:reduce){
  .l-back,.l-world .hill,.l-world .lm,.l-world .tr-building,.l-lmlabels,.t-place,.l-halo,.dot,.sh,.arc,.mk,.mk-h,.lab-g,.fold summary::after,.filter-btn,.chips a,.rbtn{ transition:none !important; }
  .s2 .ripple{ animation:none; opacity:0; }
  .fold[open] .fold-body{ animation:none; }
}
.lnk{ color:#F29BE8; }

/* Einsatzorte-Tabelle */
.orte-wrap{ overflow-x:auto; background:var(--white); border:1px solid var(--grey-line); border-radius:18px; }
.orte{ width:100%; border-collapse:collapse; font-size:15px; font-variant-numeric:tabular-nums; }
.orte caption{ text-align:left; padding:16px 20px; font-size:13.5px; color:var(--grey-mid); caption-side:top; }
.orte th,.orte td{ padding:11px 20px; text-align:right; border-top:1px solid var(--grey-line); white-space:nowrap; }
.orte th[scope="row"], .orte thead th:first-child, .orte td:last-child, .orte thead th:last-child{ text-align:left; }
.orte thead th{ color:#fff; font-weight:600; font-size:13.5px; }
.orte tbody th{ font-weight:600; color:#fff; }
.orte td:last-child{ color:var(--grey-mid); font-size:14px; }
.orte tfoot th,.orte tfoot td{ font-weight:700; color:#fff; border-top:2px solid var(--grey-line); }
@media (max-width:640px){ .orte th,.orte td{ padding:10px 12px; font-size:14px; } .orte td:last-child,.orte thead th:last-child{ display:none; } }
.orte th,.orte td{ padding:11px 14px; }
.orte thead th{ white-space:normal; line-height:1.3; vertical-align:bottom; }
.orte td:last-child{ white-space:normal; }
.orte th[scope="row"]{ white-space:normal; }
@media (max-width:640px){ .orte th,.orte td{ padding:10px 8px; font-size:13.5px; } .orte thead th{ font-size:12.5px; } }
.orte .k{ display:none; }
@media (max-width:640px){
  .orte{ table-layout:fixed; }
  .orte caption{ font-size:12.5px; padding:12px; }
  .orte thead th .l{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .orte thead th .k{ display:block; hyphens:manual; }
  .orte th[scope="row"]{ width:37%; word-break:normal; overflow-wrap:normal; }
  .orte th,.orte td{ padding:10px 6px; }
}

/* Orts-Tabelle: für Menschen unsichtbar, für Screenreader, Suchmaschinen und KI als Text lesbar */
.r-sec.sr-only{ padding:0; margin:-1px; }