/* ============================================================
   VISINO
   Farben und Bildsprache aus 240529_Website.ai
   Schrift: Almarena Display. Lege die Webfont-Dateien unter
   /fonts/ ab, dann greift der @font-face-Block unten.
   Bewusst keine Google Fonts, damit die Seite ohne Einbindung
   externer Dienste auskommt.
   ============================================================ */

/* Almarena Display, Ihre Hausschrift.
   Sobald die Webfont-Dateien unter /fonts/ liegen, greift dieser Block
   und ersetzt Poppins automatisch. Bis dahin wird er ignoriert. */
@font-face{
  font-family:"Almarena Display";
  src:url("fonts/AlmarenaDisplay-Regular.woff2") format("woff2"),
      url("fonts/AlmarenaDisplay-Regular.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}

/* Poppins, selbst gehostet. Keine Verbindung zu Google, damit
   die Seite ohne Einbindung externer Dienste auskommt.
   Auf lateinische Zeichen reduziert, rund 8 KB je Schnitt. */
@font-face{
  font-family:"Poppins"; src:url("fonts/Poppins-300.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Poppins"; src:url("fonts/Poppins-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Poppins"; src:url("fonts/Poppins-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}

:root{
  --petrol:#00354D;
  --petrol-tief:#002638;
  --cyan:#17FBFA;
  --cyan-tief:#00BBC4;
  --koralle:#F1938E;
  --lila:#A69FCE;
  --gruen:#C4DB9B;
  --gelb:#FFF4A5;
  --indigo:#424293;
  --sand:#C4B4A4;
  --eis:#EAF6FB;
  --nebel:#7FA3B2;
  --linie:rgba(127,163,178,.22);
  --font:"Almarena Display","Poppins","Helvetica Neue",Helvetica,Arial,sans-serif;
  --max:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--petrol); color:var(--eis);
  font-family:var(--font); font-weight:300;
  font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 28px}
a{color:inherit}
::selection{background:var(--cyan); color:var(--petrol)}

/* ---------- NAV ---------- */
header{position:sticky; top:0; z-index:60;
  backdrop-filter:blur(14px); background:rgba(0,53,77,.86);
  border-bottom:1px solid var(--linie)}
.nav{display:flex; align-items:center; justify-content:space-between;
  padding:20px 28px; max-width:var(--max); margin:0 auto; position:relative}
.logo{display:block; color:var(--cyan); text-decoration:none; line-height:0}
.logo .logo-svg{height:26px; width:auto; display:block; transition:color .25s}
.logo:hover{color:#8FF7F6}
.flogo{color:var(--nebel); line-height:0}
.flogo .logo-svg{height:19px; width:auto; display:block}
.nav ul{display:flex; gap:30px; list-style:none}
.nav a{font-size:13.5px; letter-spacing:.11em; text-transform:uppercase;
  text-decoration:none; color:var(--eis); opacity:.85; transition:.2s}
.nav a:hover,.nav a.aktiv{opacity:1; color:var(--cyan)}
.burger{display:none; background:none; border:0; color:var(--cyan); font-size:23px; cursor:pointer}

/* ---------- ORB ---------- */
.orb{position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle at 50% 50%,
    #063d51 0%, #075a6c 26%, #0d97a4 50%, #14d6dc 72%, #17FBFA 86%,
    rgba(23,251,250,.35) 94%, rgba(23,251,250,0) 100%)}

/* ---------- HERO ---------- */
.hero{position:relative; overflow:hidden; padding:110px 0 96px}
.hero .orb{width:min(780px,92vw); height:min(780px,92vw); right:-13%; top:-8%; opacity:.92}
.hero .wrap{position:relative; z-index:2}
.hero.klein{padding:78px 0 56px}
.hero.klein .orb{width:min(560px,80vw); height:min(560px,80vw); right:-18%; top:-22%; opacity:.7}
.kicker{font-size:12.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:34px}
h1{font-size:clamp(42px,7vw,88px); line-height:1.05; font-weight:400;
  letter-spacing:-.015em; max-width:15ch}
h1 .aus{color:var(--cyan)}
.hero.klein h1{font-size:clamp(34px,5.2vw,60px)}
.lead{margin-top:34px; font-size:clamp(17px,2.1vw,21px); line-height:1.6;
  max-width:46ch; color:#CFE6F0}
.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:44px}
.btn{display:inline-block; background:var(--cyan); color:var(--petrol);
  padding:15px 32px; border-radius:40px; text-decoration:none;
  font-size:14.5px; font-weight:500; letter-spacing:.02em; transition:.22s; border:1px solid var(--cyan)}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 32px rgba(23,251,250,.3)}
.btn.ghost{background:transparent; color:var(--eis); border-color:var(--linie)}
.btn.ghost:hover{border-color:var(--cyan); color:var(--cyan); box-shadow:none}

/* ---------- ABSCHNITTE ---------- */
section{position:relative; padding:96px 0}
.slabel{font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--nebel); margin-bottom:20px}
h2{font-size:clamp(31px,4.4vw,50px); line-height:1.14; font-weight:400;
  letter-spacing:-.01em; max-width:20ch}
h2 .aus{color:var(--cyan)}
h3{font-weight:400}
.sub{margin-top:20px; max-width:58ch; color:#BCD8E4; font-size:17px}
.fliess{max-width:66ch; margin-top:22px; color:#C3DCE8}
.fliess p+p{margin-top:17px}

/* ---------- TERMINE ---------- */
#termine{background:linear-gradient(180deg,var(--petrol) 0%,var(--petrol-tief) 100%)}
.termine{margin-top:52px; display:flex; flex-direction:column; gap:18px}
.termin{display:grid; grid-template-columns:150px 1fr auto; gap:34px; align-items:center;
  border:1px solid var(--linie); border-radius:20px; padding:30px 34px;
  background:rgba(255,255,255,.028); transition:.25s}
.termin:hover{border-color:rgba(23,251,250,.45); background:rgba(23,251,250,.05)}
.termin.vorbei{opacity:.62}
.termin.vorbei:hover{border-color:var(--linie); background:rgba(255,255,255,.028)}
.tdat{border-right:1px solid var(--linie); padding-right:24px}
.tdat .tag{font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan)}
.termin.vorbei .tdat .tag{color:var(--nebel)}
.tdat .num{font-size:38px; line-height:1.05; margin-top:6px}
.tdat .mon{font-size:14px; color:var(--nebel)}
.tinfo h3{font-size:22px; margin-bottom:7px}
.tinfo .meta{font-size:14.5px; color:var(--nebel)}
.tinfo .beschr{font-size:15px; color:#B4D2E0; margin-top:11px; max-width:52ch}
.tinfo .ergebnis{display:flex; flex-wrap:wrap; gap:9px; margin-top:15px}
.tinfo .ergebnis span{font-size:12px; padding:5px 13px; border-radius:20px;
  background:rgba(23,251,250,.09); border:1px solid rgba(23,251,250,.22); color:#9EE9EA}
.tstatus{text-align:right; white-space:nowrap}
.badge{display:inline-block; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  padding:6px 15px; border-radius:20px; margin-bottom:14px}
.badge.offen{background:var(--cyan); color:var(--petrol); font-weight:500}
.badge.vorbei{background:transparent; border:1px solid var(--linie); color:var(--nebel)}
.badge.anfrage{background:var(--koralle); color:var(--petrol); font-weight:500}

/* ---------- ETAPPEN ---------- */
.etappen{margin-top:56px; display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.etappe{border-top:2px solid var(--lila); padding-top:22px}
.etappe:nth-child(2){border-color:var(--koralle)}
.etappe:nth-child(3){border-color:var(--gruen)}
.etappe:nth-child(4){border-color:var(--gelb)}
.etappe .nr{font-size:13px; letter-spacing:.14em; margin-bottom:11px; color:var(--lila)}
.etappe:nth-child(2) .nr{color:var(--koralle)}
.etappe:nth-child(3) .nr{color:var(--gruen)}
.etappe:nth-child(4) .nr{color:var(--gelb)}
.etappe h4{font-size:19px; font-weight:400; margin-bottom:9px}
.etappe p{font-size:14.5px; color:#A9C9D8; line-height:1.55}

/* ---------- KARTEN MIT VERLAUF ---------- */
.karten{margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.karte{position:relative; border-radius:18px; padding:36px 30px; min-height:250px;
  display:flex; flex-direction:column; justify-content:flex-end;
  color:var(--petrol); overflow:hidden; isolation:isolate}
.karte::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--cyan)}
.karte::after{content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(circle at 50% 42%, var(--blob) 0%, rgba(23,251,250,0) 68%)}
.k1{--blob:#A69FCE} .k2{--blob:#C4DB9B} .k3{--blob:#F1938E}
.k4{--blob:#FFF4A5} .k5{--blob:#424293} .k6{--blob:#7FC6E8}
.karte .knr{font-size:12.5px; letter-spacing:.16em; opacity:.62; margin-bottom:auto}
.karte h4{font-size:21px; font-weight:500; line-height:1.25; margin-bottom:10px}
.karte p{font-size:14.5px; line-height:1.5; opacity:.85}

/* ---------- PILLS ---------- */
.pills{display:flex; flex-wrap:wrap; gap:11px; margin-top:34px}
.pill{background:var(--koralle); color:var(--petrol); font-size:14.5px;
  padding:9px 21px; border-radius:30px}
.pill.sig{background:var(--cyan); font-weight:500}

/* ---------- ZAHLEN ---------- */
.zahlen{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:52px}
.zahl{border-left:1px solid var(--linie); padding-left:22px}
.zahl .z{font-size:42px; line-height:1.08; color:var(--cyan)}
.zahl:nth-child(2) .z{color:var(--gruen)}
.zahl:nth-child(3) .z{color:var(--koralle)}
.zahl:nth-child(4) .z{color:var(--gelb)}
.zahl:nth-child(2){border-left-color:rgba(196,219,155,.35)}
.zahl:nth-child(3){border-left-color:rgba(241,147,142,.35)}
.zahl:nth-child(4){border-left-color:rgba(255,244,165,.3)}
.zahl .t{font-size:14px; color:var(--nebel); margin-top:7px; line-height:1.45}
.quelle{margin-top:26px; font-size:13px; color:var(--nebel)}

/* ---------- STIMMEN ---------- */
.stimmen{margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.stimme{border:1px solid var(--linie); border-radius:18px; padding:28px 26px;
  background:rgba(255,255,255,.026); display:flex; flex-direction:column}
.stimme p{font-size:16px; line-height:1.55; color:var(--eis)}
.stimme{border-top-width:2px}
.stimme:nth-child(4n+1){border-top-color:var(--lila)}
.stimme:nth-child(4n+2){border-top-color:var(--gruen)}
.stimme:nth-child(4n+3){border-top-color:var(--gelb)}
.stimme:nth-child(4n+4){border-top-color:var(--koralle)}
.stimme cite{margin-top:auto; padding-top:18px; font-style:normal;
  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--nebel)}
.stimme.gross{grid-column:span 2}
.stimme.gross p{font-size:clamp(18px,2.3vw,23px); line-height:1.48}

/* ---------- GLOBUS ---------- */
.globus-block{position:relative; margin-top:52px;
  display:grid; grid-template-columns:1fr 380px; gap:44px; align-items:start}
.globus-huelle{position:relative; aspect-ratio:1/1; max-width:620px; margin:0 auto}
#globus{width:100%; height:100%; display:block; position:relative; z-index:2; cursor:grab}
#globus:active{cursor:grabbing}
.globus-huelle::before{content:""; position:absolute; inset:4%; border-radius:50%; z-index:1;
  background:radial-gradient(circle at 50% 50%,
    #05475c 0%, #06697c 34%, #0aa3ad 62%, #14d3d9 84%, rgba(23,251,250,.5) 95%,
    rgba(23,251,250,0) 100%)}
.filter{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px}
.fpill{background:transparent; border:1px solid var(--linie); color:var(--eis);
  font-family:inherit; font-size:14px; padding:8px 18px; border-radius:30px;
  cursor:pointer; transition:.2s}
.fpill:hover{border-color:var(--cyan)}
.fpill.an{background:var(--cyan); color:var(--petrol); border-color:var(--cyan)}
.fpill.an[data-w="wasser"]{background:var(--cyan); border-color:var(--cyan)}
.fpill.an[data-w="klima"]{background:var(--gelb); border-color:var(--gelb)}
.fpill.an[data-w="rebellin"]{background:var(--gruen); border-color:var(--gruen)}
.fpill.an[data-w="rebritter"]{background:var(--koralle); border-color:var(--koralle)}
.infokarte{border:1px solid var(--linie); border-radius:18px; padding:28px 26px;
  background:rgba(255,255,255,.03); min-height:300px}
.infokarte .ik-label{font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:12px}
.infokarte h4{font-size:21px; font-weight:400; line-height:1.3; margin-bottom:10px}
.infokarte .ik-meta{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.infokarte .ik-meta span{font-size:12px; padding:4px 12px; border-radius:20px;
  background:rgba(23,251,250,.1); border:1px solid rgba(23,251,250,.24); color:#9EE9EA}
.infokarte p{font-size:15px; line-height:1.58; color:#C3DCE8}
.infokarte .ik-leer{color:var(--nebel); font-size:15px}
.ortliste{margin-top:26px; display:flex; flex-direction:column; gap:2px; max-height:250px; overflow:auto}
.ortliste button{background:none; border:0; border-bottom:1px solid var(--linie);
  color:var(--eis); font-family:inherit; font-size:14px; text-align:left;
  padding:11px 4px; cursor:pointer; transition:.18s; opacity:.75}
.ortliste button:hover,.ortliste button.an{color:var(--cyan); opacity:1; padding-left:9px}

/* ---------- TEXTSEITEN ---------- */
.doc{max-width:74ch; padding:70px 0 96px}
.doc h2{font-size:clamp(27px,3.6vw,38px); margin-top:52px; margin-bottom:16px; max-width:none}
.doc h2:first-of-type{margin-top:0}
.doc h3{font-size:19px; margin-top:30px; margin-bottom:9px; color:var(--cyan)}
.doc p{color:#C3DCE8; margin-bottom:15px}
.doc ul{color:#C3DCE8; margin:0 0 15px 22px}
.doc li{margin-bottom:7px}
.doc a{color:var(--cyan)}
.platzhalter{background:rgba(241,140,144,.15); border:1px dashed var(--koralle);
  color:var(--koralle); padding:2px 9px; border-radius:6px; font-size:15px}
.hinweis{border-left:2px solid var(--koralle); padding:16px 0 16px 24px; margin:34px 0;
  color:#C3DCE8; font-size:15.5px}

/* ---------- KONTAKT ---------- */
#kontakt{position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--petrol-tief) 0%,var(--petrol) 100%)}
#kontakt .orb{width:min(620px,88vw); height:min(620px,88vw);
  left:-16%; bottom:-32%; opacity:.5}
#kontakt .wrap{position:relative; z-index:2}
.kbox{display:grid; grid-template-columns:1fr auto; gap:44px; align-items:end;
  margin-top:44px; padding-top:38px; border-top:1px solid var(--linie)}
.mail{font-size:clamp(23px,3.6vw,38px); color:var(--cyan); text-decoration:none;
  border-bottom:1px solid rgba(23,251,250,.32); padding-bottom:5px}
.mail:hover{border-color:var(--cyan)}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--linie); padding:38px 0 44px; font-size:13.5px; color:var(--nebel)}
.frow{display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:center}
.frow a{text-decoration:none}
.frow a:hover{color:var(--cyan)}
.claim{background:var(--koralle); color:var(--petrol); padding:13px 0; text-align:center;
  font-size:13px; font-weight:500; letter-spacing:.17em}

/* ---------- RESPONSIV ---------- */
@media(max-width:960px){
  .globus-block{grid-template-columns:1fr; gap:34px}
  .stimme.gross{grid-column:span 1}
}
@media(max-width:900px){
  .etappen,.karten,.zahlen,.stimmen{grid-template-columns:repeat(2,1fr)}
  .termin{grid-template-columns:110px 1fr; gap:22px}
  .tstatus{grid-column:1/-1; text-align:left; margin-top:8px}
  .badge{margin-bottom:10px}
  .kbox{grid-template-columns:1fr; align-items:start}
}
@media(max-width:620px){
  body{font-size:16px}
  section{padding:66px 0}
  .hero{padding:66px 0 60px}
  .nav ul{display:none}
  .nav ul.auf{display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--petrol);
    border-bottom:1px solid var(--linie); padding:8px 28px 20px}
  .nav ul.auf li{padding:13px 0; border-bottom:1px solid var(--linie)}
  .burger{display:block}
  .etappen,.karten,.zahlen,.stimmen{grid-template-columns:1fr}
  .termin{grid-template-columns:1fr; gap:16px}
  .tdat{border-right:0; border-bottom:1px solid var(--linie); padding:0 0 14px}
  .tdat .num{display:inline; font-size:31px}
  .tdat .mon{display:inline; margin-left:7px}
  .hero .orb{right:-40%; top:auto; bottom:-14%; opacity:.55}
}

/* ---------- FARBLEGENDE ---------- */
.legende{display:flex; flex-wrap:wrap; gap:20px; margin-top:34px; padding-top:26px;
  border-top:1px solid var(--linie)}
.legende div{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--nebel)}
.legende i{width:13px; height:13px; border-radius:50%; display:block}

/* ---------- HERKUNFTSMARKE ---------- */
.herkunft{display:inline-flex; align-items:center; gap:9px; margin-top:20px;
  font-size:12.5px; letter-spacing:.06em; color:var(--lila);
  background:rgba(166,159,206,.13); border:1px solid rgba(166,159,206,.34);
  padding:7px 16px; border-radius:24px}
.herkunft i{width:7px; height:7px; border-radius:50%; background:var(--lila); display:block}
.infokarte .herkunft{margin-top:18px}