/* Regionsseiten weniger textlastig (Fabian 19.10.2026: „langweilig und textlastig, Bilder, Animationen, Grafiken,
   Partikel, Interaktives kommt besser an“). Prototyp auf der Kärnten-Seite DE/EN, Bausteine aus dem Animations-Chat
   (Liquid morph, Hand-drawn) in eigener Datei, styles.css bleibt unverändert. Alles mit Präfix rv-.
   1) Kopfbereich mit Licht und Glas (seit 19.10.2026 statt Partikel, Fabian: „Partikel zu generisch, eher Porsche-Webseite,
      Spiegelungen und Glanz wie iOS Liquid Glass“)
   2) Handskizze der Region, zeichnet sich beim Hinscrollen
   3) Kennzahlen als schlanke Balken mit Lackglanz, Zahlen zählen hoch
   4) KI-Empfehlung zum Anklicken: Microsoft 365 oder sensible Daten
   5) Vorgehen: Linie verbindet die vier Schritte
   Bei reduzierter Bewegung steht überall das fertige Bild. */
/* 1) Kopfbereich: weiche Lichtflächen wie Spiegelungen im Autolack, davor drei Glaskacheln. Ein Glanzstreifen fährt
   ruhig über das Glas, das Glanzlicht folgt der Maus (--rv-gx/--rv-gy aus regional-visuell-v1.js), darunter eine Bodenspiegelung. */
.regional-hero.rv-hero{position:relative;overflow:hidden;isolation:isolate}
.rv-hero>.shell{position:relative;z-index:1}
.rv-licht{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.rv-licht i{position:absolute;display:block;border-radius:50%;will-change:transform}
.rv-licht i:nth-child(1){right:-8%;top:2%;width:54vw;height:36vw;max-width:860px;max-height:560px;background:radial-gradient(closest-side,rgba(41,151,255,.5),rgba(41,151,255,0));animation:rv-gleiten 24s ease-in-out infinite alternate}
.rv-licht i:nth-child(2){right:24%;bottom:-16%;width:36vw;height:26vw;max-width:560px;max-height:400px;background:radial-gradient(closest-side,rgba(56,214,232,.28),rgba(56,214,232,0));animation:rv-gleiten 30s ease-in-out -11s infinite alternate-reverse}
.rv-licht i:nth-child(3){left:-10%;right:-10%;top:60%;height:150px;border-radius:0;background:linear-gradient(90deg,transparent,rgba(160,210,255,.06) 28%,rgba(225,242,255,.13) 50%,rgba(160,210,255,.06) 72%,transparent);filter:blur(24px);transform:rotate(-7deg);animation:rv-kante 16s ease-in-out infinite alternate}
@keyframes rv-gleiten{from{transform:translate(0,0) scale(1)}to{transform:translate(-9%,7%) scale(1.12)}}
@keyframes rv-kante{from{transform:translateY(-34px) rotate(-7deg)}to{transform:translateY(44px) rotate(-5deg)}}
.rv-hero .regional-proof article{--rv-gx:22%;--rv-gy:-12%;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-m);
  background:linear-gradient(155deg,rgba(255,255,255,.13),rgba(255,255,255,.035) 42%,rgba(255,255,255,.07));
  -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(255,255,255,.08),inset 1px 0 0 rgba(255,255,255,.08),0 24px 60px rgba(0,0,0,.35)}
/* Bodenspiegelung nur nebeneinander (Desktop); „none“ nimmt Chrome für box-reflect nicht an, daher per Breite */
@media (min-width:901px){.rv-hero .regional-proof article{-webkit-box-reflect:below 8px linear-gradient(transparent 62%,rgba(255,255,255,.16))}}
.rv-hero .regional-proof article>*{position:relative;z-index:1}
.rv-hero .regional-proof span{color:rgba(255,255,255,.62)}
.rv-hero .regional-proof article:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(260px circle at var(--rv-gx) var(--rv-gy),rgba(255,255,255,.2),rgba(255,255,255,0) 62%)}
.rv-hero .regional-proof article:after{content:"";position:absolute;top:-40%;bottom:-40%;left:0;width:45%;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.08) 40%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.08) 60%,transparent);
  transform:translateX(-120%) skewX(-16deg);animation:rv-glanz 9s cubic-bezier(.45,0,.25,1) 1.2s infinite}
.rv-hero .regional-proof article:nth-child(2):after{animation-delay:1.55s}
.rv-hero .regional-proof article:nth-child(3):after{animation-delay:1.9s}
@keyframes rv-glanz{0%,70%{transform:translateX(-120%) skewX(-16deg)}100%{transform:translateX(330%) skewX(-16deg)}}

/* 2) Handskizze */
.rv-skizze{margin:34px 0 34px;padding:24px 22px 16px;border:1px solid #dce4e9;border-radius:var(--radius-m);background:#fff}
.rv-karte{display:block;width:100%;height:auto;overflow:visible}
.rv-karte path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.rv-umriss{stroke:#1f6fae;stroke-width:2.4}
.rv-umriss--2{stroke:#62b9ff;stroke-width:1.2;opacity:.7}
.rv-fluss{stroke:#a8d8f5;stroke-width:2.2}
.rv-see{stroke:#2997ff;stroke-width:1.8;fill:rgba(98,185,255,.18)!important}
.rv-wasser{font:italic 600 12px Montserrat,-apple-system,BlinkMacSystemFont,sans-serif;fill:#4b8fc4;opacity:0}
.rv-weg{stroke:#2997ff;stroke-width:1.7;stroke-dasharray:5 7!important;stroke-dashoffset:0!important;opacity:.8}
.rv-maske{stroke:#fff;stroke-width:9}
.rv-ort{fill:#0d2239;opacity:0;transform-box:fill-box;transform-origin:center}
.rv-ort--buero{fill:#2997ff}
.rv-puls{fill:none;stroke:#2997ff;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.rv-kreis{stroke:#2997ff;stroke-width:2.6}
.rv-name{font:650 14px Montserrat,-apple-system,BlinkMacSystemFont,sans-serif;fill:#0d2239;opacity:0;paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
.rv-name--buero{font-size:19px;font-weight:750}
.rv-name--klein{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;fill:#2476ad}
.rv-kurz{display:none}
.rv-name--neben{font-size:15px;font-weight:700}
/* Variante für dunkle Abschnitte und breite Skizze über die ganze Spalte */
.rv-skizze--breit{max-width:880px;margin:0 auto 44px}
.rv-skizze--dunkel{border-color:rgba(145,211,242,.2);background:rgba(7,24,39,.72)}
.rv-skizze--dunkel .rv-umriss{stroke:#62b9ff}
.rv-skizze--dunkel .rv-umriss--2{stroke:#9fd0ff;opacity:.45}
.rv-skizze--dunkel .rv-name{fill:#f5f5f7;stroke:#081a2b}
.rv-skizze--dunkel .rv-name--klein{fill:#9fd0ff}
.rv-skizze--dunkel .rv-weg{stroke:#62b9ff}
.rv-skizze--dunkel figcaption{color:rgba(255,255,255,.42)}
.rv-skizze figcaption{margin-top:8px;color:#7b8691;font-size:12px;text-align:right}

.visible .rv-umriss{animation:rv-zeichnen 2.2s cubic-bezier(.45,0,.25,1) forwards}
.visible .rv-umriss--2{animation-delay:.4s}
.visible .rv-fluss{animation:rv-zeichnen 1.6s cubic-bezier(.45,0,.25,1) 1s forwards}
.visible .rv-see{animation:rv-zeichnen 1s ease-out 1.6s forwards}
.visible .rv-wasser{animation:rv-auf .6s ease-out 2.2s forwards}
.visible .rv-ort--buero{animation:rv-tupfen .5s cubic-bezier(.3,1.6,.5,1) 2s forwards}
.visible .rv-kreis{animation:rv-zeichnen .8s cubic-bezier(.45,0,.25,1) 2.3s forwards}
.visible .rv-name--buero{animation:rv-schreiben .6s ease-out 2.5s forwards}
.visible .rv-maske{animation:rv-zeichnen .9s cubic-bezier(.45,0,.25,1) calc(2.8s + var(--i) * .28s) forwards}
.visible .rv-ort:not(.rv-ort--buero){animation:rv-tupfen .45s cubic-bezier(.3,1.6,.5,1) calc(3.5s + var(--i) * .28s) forwards}
.visible .rv-name:not(.rv-name--buero):not(.rv-name--klein){animation:rv-schreiben .5s ease-out calc(3.6s + var(--i) * .28s) forwards}
.visible .rv-puls{animation:rv-puls 2.6s ease-out 4.6s infinite}
@keyframes rv-zeichnen{to{stroke-dashoffset:0}}
@keyframes rv-tupfen{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes rv-schreiben{0%{opacity:0;clip-path:inset(0 100% 0 0)}100%{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes rv-auf{to{opacity:1}}
@keyframes rv-puls{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}

/* 3) KI-Nutzung als Pegel */
.rv-pegel{margin:0 0 34px;padding:30px 32px 22px;border:1px solid #dfe3e6;border-radius:var(--radius-m);background:#fff}
.rv-pegel h3{margin:0 0 20px;font-size:17px;letter-spacing:-.01em}
.rv-zeile{display:grid;grid-template-columns:var(--rv-spalte,150px) 1fr 92px;gap:18px;align-items:center;margin:0 0 14px}
.rv-zeile>span{color:#3b4650;font-size:13px;font-weight:650}
.rv-bahn{position:relative;height:14px;overflow:hidden;border-radius:var(--radius-pill);background:#e8eef3;box-shadow:inset 0 1px 2px rgba(13,34,57,.08)}
.rv-bahn i{position:absolute;inset:0 auto 0 0;width:calc(var(--rv-wert) / var(--rv-max,32) * 100%);border-radius:var(--radius-pill);transform:scaleX(0);transform-origin:left;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 60%),linear-gradient(90deg,#9fd0ff,#62b9ff);transition:transform 1.8s cubic-bezier(.22,1,.36,1) calc(.25s + var(--rv-n) * .25s)}
.rv-zeile--stark .rv-bahn i{background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 60%),linear-gradient(90deg,#1f6fe0,#2997ff 70%,#38d6e8)}
.rv-zeile--stark>span{color:#0d2239;font-weight:750}
.visible .rv-bahn i{transform:scaleX(1)}
.rv-zeile b{white-space:nowrap;color:#0d2239;font-size:30px;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums;text-align:right}
.rv-zeile--stark b{color:#1f6fe0}
.rv-pegel figcaption{margin-top:8px;color:#6d777f;font-size:12px}
.rv-pegel figcaption a{color:#2476ad;font-weight:650}

/* 4) KI-Empfehlung zum Anklicken */
.rv-empfehlung{position:relative;isolation:isolate;overflow:hidden}
.rv-empfehlung:before{content:"";position:absolute;z-index:-1;right:-12%;top:0;bottom:0;width:66vw;max-width:980px;pointer-events:none;
  background:radial-gradient(ellipse 50% 45% at 58% 50%,rgba(41,151,255,.2),rgba(41,151,255,.05) 55%,transparent 72%)}
.rv-empf-raster{display:grid;grid-template-columns:.92fr 1.08fr;gap:64px;align-items:center}
.rv-empf-text h2{margin:0 0 22px;font-size:clamp(38px,4.2vw,58px);line-height:1}
.rv-empf-text>p{margin:0;color:rgba(255,255,255,.62);font-size:16px;line-height:1.75}
.rv-wahl{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 22px}
.rv-knopf{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:10px 18px;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-pill);color:#e8f3fa;font:600 14px/1.25 Montserrat,-apple-system,sans-serif;text-align:left;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03));-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 24px rgba(0,0,0,.25);transition:background .3s,border-color .3s,box-shadow .3s,transform .15s}
.rv-knopf svg{width:16px;height:16px;flex:none}
.rv-knopf:hover{border-color:rgba(255,255,255,.3);background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.05))}
.rv-knopf[aria-pressed="true"]{color:#fff;border-color:rgba(98,185,255,.7);background:linear-gradient(180deg,rgba(98,185,255,.55),rgba(41,151,255,.26));box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 30px rgba(41,151,255,.22)}
.rv-knopf:active{transform:scale(.96)}
.rv-knopf:focus-visible{outline:2px solid #62b9ff;outline-offset:3px}
.rv-antwort{min-height:150px;padding:20px 22px;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-m);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.rv-antwort h3{margin:0 0 8px;font-size:18px}
.rv-antwort p{margin:0;color:rgba(255,255,255,.66);font-size:14.5px;line-height:1.7}
.rv-antwort a{color:#9fd0ff;font-weight:650}
.rv-antwort[hidden]{display:none}
.rv-antwort:not([hidden]){animation:rv-rein .45s cubic-bezier(.3,1.2,.5,1)}
@keyframes rv-rein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rv-buehne{position:relative;padding:22px;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-l);background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 50%,rgba(255,255,255,.04));
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:0 40px 110px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.22)}
.rv-fluss-svg{display:block;width:100%;height:auto;overflow:visible}
.rv-fluss-svg text{font-family:Montserrat,-apple-system,BlinkMacSystemFont,sans-serif}
.rv-haus{fill:rgba(41,151,255,.05);stroke:rgba(98,185,255,.45);stroke-width:1.5;stroke-dasharray:6 7;transition:fill .5s,stroke .5s}
.rv-haus-text{fill:rgba(165,214,240,.6);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.rv-knoten rect{fill:#071a2b;stroke:rgba(145,211,242,.35);stroke-width:1.4;transition:stroke .45s,fill .45s,opacity .45s}
.rv-knoten text{fill:#f5f5f7;font-size:15px;font-weight:700}
.rv-knoten .rv-unter{fill:rgba(190,215,230,.72);font-size:12.5px;font-weight:600}
.rv-knoten .rv-icon{fill:none;stroke:#62b9ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rv-bahnweg{fill:none;stroke:rgba(145,211,242,.22);stroke-width:2;stroke-dasharray:4 8;transition:stroke .45s,opacity .45s}
.rv-tor rect{fill:#0b2440;stroke:#38d6e8;stroke-width:1.4;transition:opacity .45s}
.rv-tor text{fill:#9ee9f3;font-size:11px;font-weight:750;letter-spacing:.06em}
.rv-tropfen{fill:#62b9ff;filter:drop-shadow(0 0 3px rgba(98,185,255,.6))}
.rv-tropfen--ok{fill:#3ddc97;filter:drop-shadow(0 0 3px rgba(61,220,151,.55))}
[data-rv-zustand="cloud"] .rv-pfad-cloud .rv-bahnweg,[data-rv-zustand="lokal"] .rv-pfad-lokal .rv-bahnweg{stroke:#2997ff;stroke-dasharray:none;opacity:1}
[data-rv-zustand="cloud"] .rv-pfad-lokal,[data-rv-zustand="lokal"] .rv-pfad-cloud,[data-rv-zustand="lokal"] .rv-tor{opacity:.28}
[data-rv-zustand="cloud"] .rv-ziel-cloud rect,[data-rv-zustand="lokal"] .rv-ziel-lokal rect{stroke:#62b9ff;fill:#0b2a48}
[data-rv-zustand="cloud"] .rv-ziel-lokal,[data-rv-zustand="lokal"] .rv-ziel-cloud{opacity:.4}
[data-rv-zustand="lokal"] .rv-haus{fill:rgba(61,220,151,.07);stroke:rgba(61,220,151,.7)}
.rv-pfad-cloud,.rv-pfad-lokal,.rv-ziel-cloud,.rv-ziel-lokal,.rv-tor{transition:opacity .45s}

/* 5) Vorgehen: Linie durch die vier Schritte */
.rv-schritte.regional-process{position:relative;overflow:visible}
.rv-schritte article{position:relative}
.rv-schritte span{display:inline-grid;place-items:center;width:36px;height:36px;margin-bottom:14px;border:1px solid #c9d6df;border-radius:50%;color:#2476ad;font-size:12px!important;background:#fff;transition:border-color .6s,color .6s,box-shadow .6s}
.rv-schritte article:after{content:"";position:absolute;left:64px;right:-1px;top:46px;height:1px;background:linear-gradient(90deg,#2997ff,rgba(41,151,255,.25));transform:scaleX(0);transform-origin:left;transition:transform .8s ease-out}
.rv-schritte article:last-child:after{display:none}
.visible .rv-schritte span,.rv-schritte.visible span{color:#1f6fe0;border-color:#2997ff;box-shadow:0 0 0 5px rgba(41,151,255,.08)}
.visible .rv-schritte article:after,.rv-schritte.visible article:after{transform:scaleX(1)}
.rv-schritte article:nth-child(1) span{transition-delay:.3s}
.rv-schritte article:nth-child(1):after{transition-delay:.8s}
.rv-schritte article:nth-child(2) span{transition-delay:1.3s}
.rv-schritte article:nth-child(2):after{transition-delay:1.8s}
.rv-schritte article:nth-child(3) span{transition-delay:2.3s}
.rv-schritte article:nth-child(3):after{transition-delay:2.8s}
.rv-schritte article:nth-child(4) span{transition-delay:3.3s}

@media (max-width:900px){
  .rv-empf-raster{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .rv-empf-text{display:contents}
  .rv-empf-text>.eyebrow,.rv-empf-text>h2,.rv-empf-text>p{order:0}
  .rv-wahl{order:1;margin:24px 0 18px}.rv-buehne{order:2;width:100%;max-width:540px;margin:0 auto}.rv-antwort{order:3;margin-top:18px}
  .rv-zeile{grid-template-columns:1fr auto;gap:6px 12px}
  .rv-zeile>span{grid-column:1/-1}
  .rv-zeile b{font-size:22px}
  .rv-bahn{height:12px}
  .rv-pegel{padding:22px 18px 16px}
  .rv-schritte article:after{display:none}
}
@media (max-width:700px){
  .rv-skizze{margin:26px 0;padding:14px 8px 10px;border-radius:var(--radius-m)}
  .rv-name{font-size:22px}.rv-name--buero{font-size:28px}.rv-name--neben{font-size:22px}.rv-name--klein{font-size:15px}.rv-wasser{font-size:17px}.rv-lang{display:none}.rv-kurz{display:inline}
  .rv-ort{r:7px}.rv-ort--buero{r:9px}
  .rv-buehne{padding:12px;border-radius:var(--radius-m)}
  .rv-knoten .rv-unter{font-size:13.5px}
  .rv-knopf{width:100%}
  .rv-antwort{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .rv-karte path{stroke-dashoffset:0;animation:none!important}
  .rv-ort,.rv-name,.rv-wasser{opacity:1;animation:none!important}
  .rv-puls{animation:none!important}
  .rv-bahn i{transition:none}
  .rv-licht i{animation:none}
  .rv-hero .regional-proof article:after{display:none}
  .rv-schritte span,.rv-schritte article:after{transition:none}
  .rv-antwort:not([hidden]){animation:none}
}