@import url('/fonts/fonts.css');

:root{
  --bg:#0A1628;
  --panel:#0F1F3D;
  --accent:#5BA4F5;
  --text:#FFFFFF;
  --muted:#B8C8E0;
  --dim:#8B9FC0;
  --line:rgba(91,164,245,.15);
  --line-strong:rgba(91,164,245,.3);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  line-height:1.7;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--accent)}

/* ---------- Navigation ---------- */
.gt-nav{
  position:sticky;top:0;z-index:100;padding:1.1rem 4rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:rgba(10,22,40,.97);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.gt-logo{font-family:'Syne',sans-serif;font-size:1.3rem;font-weight:800;color:#fff;text-decoration:none}
.gt-logo span{color:var(--accent)}
.gt-nav-links{display:flex;align-items:center;gap:1.6rem;list-style:none;flex-wrap:wrap}
.gt-nav-links a{color:var(--dim);text-decoration:none;font-size:.85rem;font-weight:500}
.gt-nav-links a:hover{color:#fff}
.gt-btn{
  display:inline-block;background:var(--accent);color:var(--bg);
  padding:.85rem 1.9rem;border-radius:8px;font-weight:700;font-size:.88rem;
  text-decoration:none;border:none;cursor:pointer;
}
.gt-btn:hover{opacity:.88}
.gt-btn-sm{padding:.55rem 1.4rem;font-size:.8rem}
.gt-btn-ghost{
  display:inline-block;border:1px solid var(--line-strong);color:#fff;
  padding:.85rem 1.9rem;border-radius:8px;font-weight:500;font-size:.88rem;text-decoration:none;
}

/* ---------- Bausteine ---------- */
.gt-wrap{max-width:960px;margin:0 auto;padding:0 4rem}
/* Rasterseiten wie die Standortübersicht laufen so breit wie die Startseite
   (dort 1072 px Inhalt). 960 lässt Lauftext gut lesbar, ist für Kacheln aber zu eng
   und bricht sichtbar mit der Navigation darüber. */
.gt-wrap.gt-breit{max-width:1200px}
.gt-narrow{max-width:760px}
.gt-label{
  font-size:.7rem;font-weight:700;color:var(--accent);letter-spacing:.15em;
  text-transform:uppercase;display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;
}
.gt-label::before{content:'';display:block;width:24px;height:2px;background:var(--accent)}
.gt-badge{
  display:inline-flex;align-items:center;gap:.5rem;background:rgba(91,164,245,.1);
  border:1px solid rgba(91,164,245,.2);padding:.4rem 1rem;border-radius:100px;
  font-size:.72rem;font-weight:700;color:var(--accent);letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:1.5rem;
}
h1,h2,h3{font-family:'Syne',sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.15}
h1{font-size:clamp(2rem,4.5vw,3.2rem);margin-bottom:1.2rem}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin:3rem 0 1rem}
h3{font-size:1.15rem;margin:2rem 0 .6rem}
h1 span,h2 span{color:var(--accent)}
/* Startseiten-Überschrift: erste Zeile trägt, zweite ordnet ein. Beide zentriert,
   damit die Zeilen unterschiedlicher Länge nicht am linken Rand ausfransen. */
.hero-h1{text-align:center;margin-left:auto;margin-right:auto}
/* Unterzeile und Knöpfe der Startseite werden im <style>-Block von index.html
   zentriert — dort steht !important, hier hätte es keine Wirkung. */

/* ---------- Eingebettetes Stellenformular auf der Startseite ---------- */
/* Kein style-Attribut am Rahmen: die alte Notbremse gegen Querscrollen zieht
   jedes div[style] auf volle Breite (siehe README). Deshalb alles hier. */
.stellen-embed{
  border:1px solid rgba(91,164,245,.28);border-radius:18px;overflow:hidden;
  background:var(--panel);max-width:880px;margin:0 auto;
}
.stellen-embed iframe{display:block;width:100%;height:1180px;border:0}
@media(max-width:720px){.stellen-embed iframe{height:1420px}}

/* ---------- Hinweisfenster „Stelle kostenlos veröffentlichen" ---------- */
/* Zurückhaltend: erst nach 15 Sekunden, danach 24 Stunden Ruhe. */
/* Links, nicht rechts: unten rechts klebt das ProvenExpert-Siegel (z-index 9999). */
.gt-hinweis{
  position:fixed;left:1.5rem;bottom:1.5rem;z-index:60;width:min(360px,calc(100vw - 3rem));
  background:var(--panel);border:1px solid rgba(91,164,245,.3);border-radius:16px;
  padding:1.4rem 1.5rem 1.3rem;box-shadow:0 24px 60px rgba(0,0,0,.45);
  opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease;
}
.gt-hinweis[hidden]{display:none}
.gt-hinweis.ist-da{opacity:1;transform:none}
.gt-hinweis h3{font-size:1.05rem;margin:0 0 .5rem;line-height:1.3}
.gt-hinweis p{font-size:.88rem;line-height:1.55;color:var(--dim);margin:0 0 1.1rem}
.gt-hinweis-cta{
  display:inline-block;background:var(--accent);color:#07162c;font-weight:800;
  text-decoration:none;padding:.7rem 1.15rem;border-radius:10px;font-size:.88rem;
}
.gt-hinweis-zu{
  position:absolute;top:.55rem;right:.7rem;background:none;border:0;cursor:pointer;
  color:var(--dim);font-size:1.35rem;line-height:1;padding:.2rem .4rem;
}
.gt-hinweis-zu:hover{color:#fff}
@media(max-width:520px){.gt-hinweis{right:.75rem;left:.75rem;bottom:.75rem;width:auto}}
.hero-h1-gross{display:block;font-size:clamp(2.3rem,5.6vw,4rem);line-height:1.08}
.hero-h1-klein{display:block;font-size:clamp(1.15rem,2.3vw,1.7rem);line-height:1.25;margin-top:.55rem;color:var(--dim)}
.hero-h1-klein .accent{color:var(--accent)}
.gt-sub{font-size:1.02rem;color:var(--muted);line-height:1.8}

.gt-stats{
  display:flex;gap:4rem;padding:3rem 0 0;border-top:1px solid var(--line);
  margin-top:3rem;flex-wrap:wrap;
}
.gt-stat-n{font-family:'Syne',sans-serif;font-size:2.2rem;font-weight:800;display:block}
.gt-stat-n span{color:var(--accent)}
.gt-stat-l{font-size:.75rem;color:var(--dim);display:block;margin-top:.2rem}

.gt-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:2.5rem;
}
.gt-card{background:var(--panel);padding:2rem;border-right:1px solid var(--line)}
.gt-card:last-child{border-right:none}
.gt-card-num{font-family:'Syne',sans-serif;font-size:2rem;font-weight:800;color:rgba(91,164,245,.15);line-height:1;margin-bottom:1rem}
.gt-card h3{font-size:1rem;font-weight:700;margin:0 0 .5rem}
.gt-card p{font-size:.85rem;color:var(--dim);line-height:1.65}

.gt-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:2rem;margin:2rem 0}
.gt-cta{
  background:rgba(91,164,245,.07);border:1px solid rgba(91,164,245,.2);
  border-radius:16px;padding:3rem;text-align:center;margin:3.5rem 0;
}
.gt-cta h3{font-size:1.8rem;margin:0 0 .75rem}
.gt-cta p{color:var(--muted);margin-bottom:2rem}

/* ---------- Artikel ---------- */
.gt-article{padding:3.5rem 0 4rem}
.gt-article p{color:var(--muted);margin:0 0 1.15rem}
.gt-article ul,.gt-article ol{color:var(--muted);margin:0 0 1.4rem 1.3rem}
.gt-article li{margin-bottom:.6rem}
.gt-article strong{color:#fff;font-weight:700}
.gt-article table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.9rem}
.gt-article th,.gt-article td{padding:.8rem 1rem;border:1px solid var(--line);text-align:left;color:var(--muted)}
.gt-article th{background:var(--panel);color:#fff;font-weight:700}
.gt-article blockquote{
  border-left:3px solid var(--accent);padding:.4rem 0 .4rem 1.4rem;
  margin:1.8rem 0;color:var(--muted);font-style:italic;
}
.gt-meta{font-size:.78rem;color:var(--dim);margin-bottom:2rem}
.gt-toc{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.5rem 1.8rem;margin:2rem 0}
.gt-toc strong{display:block;font-family:'Syne',sans-serif;font-size:.95rem;margin-bottom:.7rem}
.gt-toc ol{margin:0 0 0 1.1rem;color:var(--muted);font-size:.9rem}
.gt-toc a{color:var(--muted);text-decoration:none}
.gt-toc a:hover{color:var(--accent)}
.gt-takeaway{
  background:rgba(91,164,245,.07);border:1px solid rgba(91,164,245,.2);
  border-radius:12px;padding:1.5rem 1.8rem;margin:2rem 0;
}
.gt-takeaway strong{display:block;font-family:'Syne',sans-serif;margin-bottom:.5rem;color:var(--accent)}

/* ---------- FAQ ---------- */
.gt-faq{margin:2.5rem 0}
.gt-faq details{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:.8rem;overflow:hidden}
.gt-faq summary{
  padding:1.1rem 1.5rem;cursor:pointer;font-weight:700;font-size:.95rem;
  list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;
}
.gt-faq summary::-webkit-details-marker{display:none}
.gt-faq summary::after{content:'+';color:var(--accent);font-size:1.3rem;line-height:1;flex-shrink:0}
.gt-faq details[open] summary::after{content:'−'}
.gt-faq details > div{padding:0 1.5rem 1.3rem;color:var(--muted);font-size:.92rem;line-height:1.75}

/* ---------- Blog-Liste ---------- */
.gt-posts{display:grid;gap:1.2rem;margin:2.5rem 0}
.gt-post{
  display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:1.8rem 2rem;text-decoration:none;transition:border-color .2s;
}
.gt-post:hover{border-color:var(--line-strong)}
.gt-post h2{font-size:1.25rem;margin:0 0 .5rem;color:#fff}
.gt-post p{color:var(--dim);font-size:.9rem;margin:0}
.gt-post .gt-meta{margin:0 0 .6rem}

/* ---------- Footer ---------- */
.gt-footer{
  background:var(--panel);border-top:1px solid var(--line);padding:2.5rem 4rem;
  display:flex;justify-content:space-between;align-items:center;
  font-size:.78rem;color:var(--dim);flex-wrap:wrap;gap:1rem;margin-top:4rem;
}
.gt-footer a{color:var(--dim);text-decoration:none}
.gt-footer a:hover{color:var(--accent)}
.gt-footer-links{display:flex;gap:1.5rem;flex-wrap:wrap}

@media(max-width:768px){
  .gt-nav{padding:1rem 1.5rem}
  .gt-nav-links{display:none}
  .gt-wrap{padding:0 1.5rem}
  .gt-cards{grid-template-columns:1fr}
  .gt-card{border-right:none;border-bottom:1px solid var(--line)}
  .gt-stats{gap:2rem}
  .gt-cta{padding:2rem 1.5rem}
  .gt-footer{padding:2rem 1.5rem}
  .gt-article table{display:block;overflow-x:auto}
}

/* ══════════════════════════════════════════════════════════════════════════
   Bewegung, Tiefe, Karte, Einwilligung
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- Gestaffeltes Einblenden ---------- */
html.js-bewegung .gt-an{
  opacity:0;transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
html.js-bewegung .gt-an.ist-da{opacity:1;transform:none}
html.js-bewegung .gt-an-links{transform:translateX(-26px)}
html.js-bewegung .gt-an-rechts{transform:translateX(26px)}
html.js-bewegung .gt-an-zoom{transform:scale(.96)}

/* ---------- Tiefe ---------- */
.gt-glanz{position:relative;isolation:isolate}
.gt-glanz::before{
  content:'';position:absolute;inset:-20% -10% auto;height:70%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 100% at 70% 0%,rgba(91,164,245,.16),transparent 70%);
}
.gt-koerner::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.gt-glas{
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 24px 60px -30px rgba(0,0,0,.9);
  backdrop-filter:blur(6px);
  transition:transform .35s cubic-bezier(.22,.61,.36,1),border-color .35s ease;
}
.gt-glas:hover{border-color:rgba(91,164,245,.32)}

/* ---------- DACH-Karte ---------- */
.gt-karte-raster{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:4rem;align-items:center;
}
.gt-karte-halter{position:relative;display:flex;justify-content:center}
.gt-karte-halter.ist-leer{display:none}
/* Die Größe steuert ausschließlich .gt-karte-buehne. Das SVG füllt sie immer
   vollständig — sonst driften die Meldungen, die in Prozent der Bühne sitzen. */
.dach-karte{width:100%;max-width:none;height:auto;overflow:visible;display:block}

.dach-region{
  fill:#14294A;stroke:#2A4A7C;stroke-width:1.4;stroke-linejoin:round;
  fill-opacity:0;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:fill .25s ease;
}
.dach-at{fill:#153059}
.dach-ch{fill:#122442}
.dach-karte.ist-an .dach-region{
  animation:dachZeichnen .9s ease forwards calc(var(--i) * 26ms),
            dachFuellen  .7s ease forwards calc(var(--i) * 26ms + .35s);
}
@keyframes dachZeichnen{to{stroke-dashoffset:0}}
@keyframes dachFuellen{to{fill-opacity:1}}
.dach-region:hover{fill:#1E4478;cursor:default}

.dach-karte.ist-an .dach-karte.ist-an .dach-karte.ist-an .dach-sitz circle{animation:dachFuellen .6s ease forwards 2.4s;opacity:0}

.gt-karte-legende{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1.6rem;font-size:.8rem;color:var(--dim)}
.gt-karte-legende span{display:inline-flex;align-items:center;gap:.5rem}
.gt-karte-legende i{width:9px;height:9px;border-radius:50%;background:var(--accent);display:block}
.gt-karte-legende i.sitz{background:#fff}

/* ---------- Einwilligung ---------- */
.gt-consent{
  position:fixed;inset:auto 0 0;z-index:99999;padding:1rem;
  transform:translateY(120%);transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.gt-consent.is-offen{transform:none}
.gt-consent-box{
  max-width:1000px;margin:0 auto;display:flex;gap:1.8rem;align-items:center;flex-wrap:wrap;
  background:#0F1F3D;border:1px solid var(--line-strong);border-radius:16px;
  padding:1.4rem 1.7rem;box-shadow:0 24px 70px -20px rgba(0,0,0,.85);
}
.gt-consent-text{flex:1 1 380px}
.gt-consent-text strong{display:block;font-family:'Syne',sans-serif;font-size:1rem;margin-bottom:.4rem}
.gt-consent-text p{font-size:.82rem;color:var(--muted);line-height:1.65;margin:0}
.gt-consent-knoepfe{display:flex;gap:.7rem;flex-wrap:wrap}
/* Beide Schaltflächen gleich groß und gleich auffällig – alles andere wäre ein Dark Pattern. */
.gt-consent-knoepfe button{
  font:inherit;font-weight:700;font-size:.85rem;padding:.8rem 1.5rem;border-radius:8px;
  cursor:pointer;min-width:170px;border:1px solid var(--line-strong);
  background:transparent;color:#fff;transition:background .2s ease,color .2s ease;
}
.gt-consent-knoepfe button:hover{background:rgba(91,164,245,.14)}
.gt-consent-knoepfe [data-consent="ja"]{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.gt-consent-knoepfe [data-consent="ja"]:hover{opacity:.88;background:var(--accent)}

@media(max-width:900px){
  .gt-karte-raster{grid-template-columns:1fr;gap:2.5rem}
  .gt-consent-knoepfe{width:100%}
  .gt-consent-knoepfe button{flex:1 1 140px;min-width:0}
}

@media(prefers-reduced-motion:reduce){
  html.js-bewegung .gt-an{opacity:1;transform:none;transition:none}
  .dach-region{fill-opacity:1;stroke-dashoffset:0;animation:none!important}
      .dach-sitz circle{opacity:1;animation:none!important}
  .gt-consent{transition:none;transform:none}
}

/* ---------- Meldungen über der Karte ---------- */
.gt-karte-halter{position:relative}
.gt-orte{position:absolute;inset:0;pointer-events:none}
.gt-ort{position:absolute;transform:translate(-50%,-50%);opacity:0;transition:opacity .5s ease}
.gt-ort.ist-da{opacity:1}
.gt-ort-punkt{
  position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;background:var(--accent);display:block;
  box-shadow:0 0 0 0 rgba(91,164,245,.55);
}
.gt-ort.ist-da .gt-ort-punkt{animation:ortPuls 3.4s ease-out infinite}
@keyframes ortPuls{
  0%{box-shadow:0 0 0 0 rgba(91,164,245,.5)}
  70%,100%{box-shadow:0 0 0 16px rgba(91,164,245,0)}
}
.gt-ort-blase{
  position:absolute;left:50%;bottom:12px;transform:translate(-50%,6px) scale(.9);
  white-space:nowrap;background:#12294B;border:1px solid rgba(91,164,245,.45);
  border-radius:10px;padding:.42rem .7rem;font-size:.68rem;font-weight:700;color:#fff;
  line-height:1.25;opacity:0;pointer-events:none;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.9);
  transition:opacity .35s ease,transform .35s cubic-bezier(.34,1.56,.64,1);
}
.gt-ort-blase::after{
  content:'';position:absolute;left:50%;top:100%;margin-left:-5px;
  border:5px solid transparent;border-top-color:rgba(91,164,245,.45);
}
.gt-ort-blase em{display:block;font-style:normal;font-weight:500;font-size:.62rem;color:#8FB6E4}
.gt-ort.ist-sichtbar .gt-ort-blase{opacity:1;transform:translate(-50%,0) scale(1)}
.gt-ort.ist-sichtbar .gt-ort-punkt{background:#fff}

@media(max-width:640px){
  .gt-ort-blase{font-size:.6rem;padding:.32rem .5rem}
  .gt-ort-blase em{font-size:.55rem}
}
@media(prefers-reduced-motion:reduce){
  .gt-ort{opacity:1;transition:none}
  .gt-ort.ist-da .gt-ort-punkt{animation:none}
  .gt-ort-blase{opacity:1;transform:translate(-50%,0)}
}

/* ══════════════════════════════════════════════════════════════════════════
   Politur — angelehnt an nxtyou.de, aber ohne GSAP, Lenis oder Swiper.
   Alles hier ist CSS plus IntersectionObserver; keine zusätzliche Bibliothek.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- Lesefortschritt ---------- */
.gt-fortschritt{
  position:fixed;top:0;left:0;height:2px;z-index:99998;width:0;
  background:linear-gradient(90deg,rgba(91,164,245,.25),var(--accent));
  box-shadow:0 0 12px rgba(91,164,245,.6);
  transition:width .12s linear;pointer-events:none;
}

/* ---------- Überschriften wischen auf ---------- */
/* Wichtig: KEIN versteckter Ausgangszustand. Am 07.08.2026 blieben Überschriften
   unsichtbar, weil der Beobachter nicht auslöste und clip-path stehenblieb.
   Jetzt trägt die Animation den Anfangszustand — ohne Klasse ist alles sichtbar. */
.gt-wisch.ist-da{animation:wischAuf 1s cubic-bezier(.22,.61,.36,1) both}
@keyframes wischAuf{
  from{clip-path:inset(0 100% 0 0);opacity:.25}
  to{clip-path:inset(0 0 0 0);opacity:1}
}

/* ---------- Methode: aktiver Schritt ---------- */
.proc{
  transition:transform .5s cubic-bezier(.22,.61,.36,1),
             opacity .5s ease, border-color .5s ease;
}
.process-steps.gt-schritte .proc{opacity:.45}
.process-steps.gt-schritte .proc.ist-aktiv{opacity:1;transform:translateY(-6px)}
.process-steps.gt-schritte .proc.ist-aktiv .proc-num{color:var(--accent);opacity:1}
.proc-num{transition:color .5s ease,opacity .5s ease}

/* ---------- Referenzen heben sich an ---------- */
.tcard{
  transition:transform .45s cubic-bezier(.22,.61,.36,1),
             border-color .45s ease, box-shadow .45s ease;
  will-change:transform;
}
.tcard:hover{
  transform:translateY(-6px);
  border-color:rgba(91,164,245,.4);
  box-shadow:0 30px 60px -35px rgba(0,0,0,.95);
}

/* ---------- Schaltflächen bekommen einen Lichtstreif ---------- */
.gt-btn,.btn-teal,.calc-btn-primary{position:relative;overflow:hidden}
.gt-btn::after,.btn-teal::after,.calc-btn-primary::after{
  content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);transition:left .75s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.gt-btn:hover::after,.btn-teal:hover::after,.calc-btn-primary:hover::after{left:130%}

/* ---------- Laufband hält beim Zeigen an ---------- */
.marquee-section:hover .marquee-track{animation-play-state:paused}

/* ---------- Parallaxe der Lichtkegel ---------- */
.hero-glow-1,.hero-glow-2{will-change:transform}

@media(prefers-reduced-motion:reduce){
  .gt-fortschritt{display:none}
  .gt-wisch{clip-path:none;transition:none}
  .process-steps.gt-schritte .proc{opacity:1;transform:none}
  .gt-btn::after,.btn-teal::after,.calc-btn-primary::after{display:none}
  .tcard:hover{transform:none}
  .hero-glow-1,.hero-glow-2{transform:none!important}
}

/* Bühne für die Karte: exakt so groß wie das SVG, damit die Meldungen in Prozent
   auf der Karte landen und nicht daneben. */
.gt-karte-buehne{position:relative;width:100%;max-width:430px;margin:0 auto;aspect-ratio:1000/1264}
.gt-karte-buehne > svg{display:block;width:100%;height:auto;max-width:none}
.hero-karte .gt-karte-buehne{max-width:390px}
@media(max-width:1024px){.hero-karte .gt-karte-buehne{max-width:320px}}
@media(max-width:900px){.gt-karte-buehne{max-width:330px}}

/* ---------- Kennzahlen-Band (Hausfarben statt Weißschleier) ---------- */
.gt-kennband{
  /* repeat(4,1fr) hatte als Untergrenze die Inhaltsbreite: In der schmalen linken
     Spalte von .gt-karte-raster wurde das Raster breiter als sein Kasten und von
     overflow:hidden abgeschnitten — „3.000+" und die beiden Zellen danach waren weg.
     auto-fit mit minmax(0,…) darf schrumpfen und bricht stattdessen auf 2×2 um. */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:1px;
  /* Die Zellen tragen die Seitenfarbe, nicht --panel. Der Kasten hob sich sonst als
     eigener Blauton vom Hintergrund ab; sichtbar bleiben nur die feinen Trennlinien. */
  background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:0 0 2rem;
}
.gt-kennband-zelle{
  background:var(--bg);padding:1.6rem 1.5rem;
  display:flex;flex-direction:column;gap:.35rem;transition:background .4s ease;
}
.gt-kennband-zelle:hover{background:#0D1D34}
.gt-kennband-zahl{
  font-family:'Syne',sans-serif;font-size:2.1rem;font-weight:800;line-height:1;
  color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.gt-kennband-zahl span{color:var(--accent)}
.gt-kennband-text{font-size:.78rem;color:var(--dim);line-height:1.4}
@media(max-width:720px){
  .gt-kennband{grid-template-columns:repeat(2,1fr)}
  .gt-kennband-zelle{padding:1.2rem 1.1rem}
  .gt-kennband-zahl{font-size:1.7rem}
}


/* ── Zeilenmaske für den SplitText-Aufdecker der H1 (premium.js) ───────────── */
.pm-zeilen-huelle{display:block;overflow:hidden}
.pm-zeile{display:block;will-change:transform}
/* Ohne JavaScript oder bei abgeschalteter Bewegung darf nichts verdeckt bleiben. */
@media (prefers-reduced-motion: reduce){
  .pm-zeilen-huelle{overflow:visible}
  .pm-zeile{will-change:auto;transform:none!important;opacity:1!important}
}