/* KIVANDO Modulvorstellung – eigenständige Seite im KIVANDO-Stil.
   Dunkler Grund wie im Portal, Türkis als Akzent. Alle Farbpaare sind gegen
   ihren tatsächlichen Hintergrund gerechnet und erreichen mindestens 4,5:1 –
   die Seite ist öffentlich und soll auch bei Sonnenlicht lesbar sein. */

*,*::before,*::after{box-sizing:border-box}

.kivmv-body{
  --kivmv-grund:#0b2836;
  --kivmv-flaeche:#11384a;
  --kivmv-flaeche-hell:#16455a;
  --kivmv-linie:rgba(151,222,216,.20);
  --kivmv-tinte:#f2fbfb;
  --kivmv-leise:#b3ccd4;
  --kivmv-tuerkis:#5eead4;
  --kivmv-tuerkis-satt:#0d6d63;
  margin:0;padding:0;min-height:100vh;
  background:radial-gradient(1200px 600px at 12% -8%,#164257 0%,rgba(22,66,87,0) 60%),
             linear-gradient(180deg,#0d2f3f 0%,#0a2432 100%);
  background-attachment:fixed;
  color:var(--kivmv-tinte);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---- Kopf ---- */
/* Kopf und Verwaltungsleiste bilden zusammen einen Block, der sich vom
   Inhalt absetzt - sonst schwebt die Leiste ohne Bezug im Raum. */
.kivmv-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  max-width:none;margin:0;padding:18px clamp(20px,4vw,64px);
  background:rgba(255,255,255,.03);border-bottom:1px solid var(--kivmv-linie)}
.kivmv-marke-logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.kivmv-logo-zeichen{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;
  border-radius:14px;background:linear-gradient(160deg,#5eead4 0%,#22a196 100%);
  color:#06262b;font-weight:900;letter-spacing:.04em}
.kivmv-logo-text b{display:block;font-size:19px;font-weight:900;letter-spacing:.06em}
.kivmv-logo-text em{display:block;font-style:normal;font-size:12px;color:var(--kivmv-leise)}

/* ---- Grundgerüst ---- */
/* Volle Breite: Der Inhalt soll den Bildschirm nutzen, statt als schmale
   Spalte in der Mitte zu stehen. Nur der Fliesstext bleibt begrenzt - Zeilen
   ueber die ganze Breite eines grossen Bildschirms liest niemand gern. */
.kivmv-haupt{max-width:none;margin:0;padding:8px clamp(20px,4vw,64px) 56px}
.kivmv-app{max-width:none;margin:0;padding:0}
.kivmv-intro{margin:26px 0 30px}
.kivmv-intro h1{margin:0 0 8px;font-size:34px;line-height:1.2;font-weight:900;letter-spacing:-.01em}
.kivmv-intro p{margin:0;color:var(--kivmv-leise);max-width:62ch;font-size:17px}

/* ---- Suche ---- */
.kivmv-suche{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 30px}
.kivmv-suche input[type=search]{flex:1 1 300px;min-width:0;padding:13px 16px;
  border:1px solid var(--kivmv-linie);border-radius:14px;font-size:15px;
  background:rgba(255,255,255,.05);color:var(--kivmv-tinte)}
.kivmv-suche input[type=search]::placeholder{color:#9fbcc6}
.kivmv-suche input[type=search]:focus{outline:2px solid var(--kivmv-tuerkis);outline-offset:1px}

.kivmv-btn{display:inline-block;padding:11px 18px;border-radius:999px;
  border:1px solid var(--kivmv-linie);background:rgba(255,255,255,.06);
  color:var(--kivmv-tinte);font-weight:700;font-size:14px;text-decoration:none;cursor:pointer}
.kivmv-btn:hover{border-color:var(--kivmv-tuerkis);color:var(--kivmv-tuerkis)}
.kivmv-btn.is-primaer{background:var(--kivmv-tuerkis);border-color:var(--kivmv-tuerkis);color:#06262b}
.kivmv-btn.is-primaer:hover{background:#8ff3e2;color:#06262b}
.kivmv-btn.is-schlicht{background:none;border-color:transparent;color:var(--kivmv-leise)}

/* ---- Module ---- */
.kivmv-modul{margin:0 0 42px}
.kivmv-modul-titel{margin:0;font-size:25px;line-height:1.25;font-weight:900}
.kivmv-modul-text{margin:0 0 18px;color:var(--kivmv-leise);max-width:70ch}

.kivmv-karten{display:grid;gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
  align-items:stretch}

/* Karte: Deckbild oben, Text in der Mitte, Aktionen unten buendig.
   Das feste Seitenverhaeltnis haelt die Reihe ruhig - ohne es stehen Karten
   mit und ohne Bild unterschiedlich hoch nebeneinander. */
.kivmv-karte{display:flex;flex-direction:column;
  border:1px solid var(--kivmv-linie);border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  box-shadow:0 14px 34px rgba(3,18,26,.30);transition:border-color .15s,transform .15s}
.kivmv-karte:hover{border-color:rgba(94,234,212,.45);transform:translateY(-2px)}

.kivmv-karte-link{text-decoration:none;color:inherit;display:block}
.kivmv-cover{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  background:radial-gradient(120% 120% at 20% 0%,#1b4d61 0%,#0f3446 60%,#0c2b3a 100%)}
.kivmv-cover-bild{width:100%;height:100%;object-fit:cover;display:block}
.kivmv-cover-ersatz{position:absolute;inset:0;display:grid;place-items:center;
  font-size:64px;font-weight:900;color:rgba(94,234,212,.55);letter-spacing:.02em}
.kivmv-cover-marke{position:absolute;left:12px;bottom:12px;
  padding:5px 11px;border-radius:999px;background:rgba(6,38,43,.78);
  color:#bff5ea;font-size:12px;font-weight:800;backdrop-filter:blur(4px)}

.kivmv-karte-titel{display:block;padding:15px 16px 0;font-size:18px;
  line-height:1.32;font-weight:800;color:var(--kivmv-tinte)}
.kivmv-karte-text{margin:8px 16px 0;color:var(--kivmv-leise);font-size:14.5px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kivmv-karte-fuss{margin-top:auto;display:flex;align-items:center;gap:8px;
  flex-wrap:wrap;padding:16px}

.kivmv-marke{display:inline-block;padding:5px 12px;border-radius:999px;
  background:rgba(94,234,212,.14);color:#bff5ea;font-size:12.5px;font-weight:800}
.kivmv-marke.is-still{background:rgba(255,255,255,.08);color:var(--kivmv-leise)}
.kivmv-marken{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}

.kivmv-leer{padding:24px;border:1px dashed var(--kivmv-linie);border-radius:16px;
  background:rgba(255,255,255,.04);color:var(--kivmv-leise)}

/* ---- Einzelansicht ---- */
.kivmv-beschreibung{max-width:75ch;margin:0 0 22px;color:var(--kivmv-tinte)}
.kivmv-beschreibung p{margin:0 0 12px}

.kivmv-viewer{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}

.kivmv-hinweis{color:var(--kivmv-leise);font-size:14px;max-width:75ch}

.kivmv-folien{margin:0;padding:0;list-style:none;counter-reset:folie;
  display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.kivmv-folie{counter-increment:folie;border:1px solid var(--kivmv-linie);
  border-radius:15px;padding:14px 16px;background:rgba(255,255,255,.045)}
.kivmv-folie h3{margin:0 0 7px;font-size:15.5px;font-weight:800;line-height:1.35}
.kivmv-folie h3::before{content:counter(folie) ". ";color:var(--kivmv-tuerkis)}
.kivmv-folie ul{margin:0;padding-left:18px;color:var(--kivmv-leise);font-size:14px}
.kivmv-folie li{margin:3px 0}

/* ---- Fuß ---- */
.kivmv-fuss{max-width:none;margin:0;padding:22px clamp(20px,4vw,64px) 34px;
  display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  border-top:1px solid var(--kivmv-linie);color:var(--kivmv-leise);font-size:14px}
.kivmv-fuss a{color:var(--kivmv-tuerkis);text-decoration:none;font-weight:700}

.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

@media (max-width:640px){
  .kivmv-intro h1{font-size:27px}
  .kivmv-einzel-titel{font-size:24px}
  .kivmv-buehne{padding-top:74%}
  .kivmv-karten{grid-template-columns:1fr}
  .kivmv-kopf{padding:16px 16px 6px}
  .kivmv-haupt{padding:6px 16px 44px}
}


/* ---- Kopf rechts, Anmeldung ---- */
.kivmv-kopf-rechts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kivmv-wer{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:6px 8px 6px 14px;border-radius:999px;background:rgba(255,255,255,.06);
  border:1px solid var(--kivmv-linie);font-size:14px;max-width:44ch}
.kivmv-wer b{font-weight:800;color:var(--kivmv-tinte);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:24ch}
.kivmv-rolle{padding:3px 11px;border-radius:999px;background:rgba(94,234,212,.16);
  color:#bff5ea;font-size:12px;font-weight:800;letter-spacing:.02em;white-space:nowrap}

/* ---- Verwaltungsleiste ---- */
.kivmv-werkzeug{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  max-width:none;margin:0;padding:11px clamp(20px,4vw,64px);
  background:rgba(94,234,212,.07);border-bottom:1px solid var(--kivmv-linie)}
.kivmv-werkzeug-marke{font-size:12px;font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;color:#bff5ea;margin-right:2px}

/* ---- Leere Seite mit Einstieg ---- */
.kivmv-leer-start{max-width:70ch}
.kivmv-leer-start h2{margin:0 0 8px;font-size:20px;font-weight:900;color:var(--kivmv-tinte)}
.kivmv-leer-start p{margin:0 0 14px}

/* Fliesstext bleibt lesbar schmal, auch wenn die Seite breit ist. */
.kivmv-intro p,.kivmv-modul-text,.kivmv-beschreibung,.kivmv-hinweis{max-width:74ch}

.kivmv-werkzeug-hinweis{color:var(--kivmv-leise);font-size:13px;margin-left:4px}
@media (max-width:760px){ .kivmv-werkzeug-hinweis{flex:1 0 100%;margin-left:0} }

/* ---- Verwaltung auf der Seite ---- */
.kivmv-verw{max-width:none;margin:0;padding:22px clamp(20px,4vw,64px) 26px;
  background:rgba(255,255,255,.045);border-bottom:1px solid var(--kivmv-linie)}
.kivmv-verw[hidden]{display:none}
.kivmv-verw-kopf{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 18px}
.kivmv-verw-kopf h2{margin:0;font-size:22px;font-weight:900}

.kivmv-form{display:grid;gap:14px;max-width:760px}
.kivmv-feld{display:grid;gap:6px}
.kivmv-feld label{font-size:13.5px;font-weight:800;color:var(--kivmv-tinte)}
.kivmv-feld label small{font-weight:600;color:var(--kivmv-leise)}
.kivmv-feld input[type=text],
.kivmv-feld select,
.kivmv-feld textarea{width:100%;padding:11px 13px;border-radius:12px;
  border:1px solid var(--kivmv-linie);background:rgba(255,255,255,.06);
  color:var(--kivmv-tinte);font:inherit;font-size:15px}
.kivmv-feld textarea{resize:vertical;min-height:74px}
.kivmv-feld input[type=file]{font-size:14px;color:var(--kivmv-leise)}
.kivmv-feld input:focus,.kivmv-feld select:focus,.kivmv-feld textarea:focus{
  outline:2px solid var(--kivmv-tuerkis);outline-offset:1px}
.kivmv-feld select option{background:#0d2f3f;color:var(--kivmv-tinte)}
.kivmv-feld-hinweis{margin:0;font-size:12.5px;color:var(--kivmv-leise)}

.kivmv-form-fuss{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.kivmv-form-meldung{font-size:14px;color:var(--kivmv-leise)}
.kivmv-form-meldung.is-ok{color:#8ff3e2;font-weight:700}
.kivmv-form-meldung.is-fehler{color:#ffb4b4;font-weight:700}

.kivmv-verw-titel{margin:26px 0 10px;font-size:16px;font-weight:900;color:var(--kivmv-leise);
  text-transform:uppercase;letter-spacing:.06em}
.kivmv-verw-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:1000px}
.kivmv-verw-zeile{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:11px 14px;border:1px solid var(--kivmv-linie);border-radius:13px;
  background:rgba(255,255,255,.04)}
.kivmv-verw-name{font-weight:800;flex:1 1 260px;min-width:0}
.kivmv-verw-info{color:var(--kivmv-leise);font-size:13.5px}
.kivmv-verw-aktionen{display:flex;gap:6px;flex-wrap:wrap}

/* ---- Kennzahlen ---- */
.kivmv-zahlen{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 22px}
.kivmv-zahl{display:flex;align-items:baseline;gap:9px;padding:11px 18px;
  border:1px solid var(--kivmv-linie);border-radius:16px;background:rgba(255,255,255,.05)}
.kivmv-zahl b{font-size:24px;font-weight:900;line-height:1;color:var(--kivmv-tuerkis)}
.kivmv-zahl span{font-size:13.5px;color:var(--kivmv-leise);font-weight:700}

/* ---- Sprungmarken ---- */
.kivmv-marken-nav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 30px}
.kivmv-sprung{display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;border:1px solid var(--kivmv-linie);
  background:rgba(255,255,255,.05);color:var(--kivmv-tinte);
  text-decoration:none;font-size:13.5px;font-weight:800}
.kivmv-sprung:hover{border-color:var(--kivmv-tuerkis);color:var(--kivmv-tuerkis)}
.kivmv-sprung span{padding:1px 8px;border-radius:999px;
  background:rgba(94,234,212,.16);color:#bff5ea;font-size:12px}

/* ---- Modulkopf ---- */
.kivmv-modul{scroll-margin-top:24px}
.kivmv-modul-kopf{display:flex;align-items:center;gap:12px;margin:0 0 4px}
.kivmv-modul-zahl{padding:3px 11px;border-radius:999px;background:rgba(255,255,255,.08);
  color:var(--kivmv-leise);font-size:13px;font-weight:800}

/* ---- Einzelansicht: alles auf eine Bildschirmseite ----
   Die Praesentation ist der Grund, warum jemand hier ist. Deshalb bekommt sie
   die volle verbleibende Hoehe, und Kopf, Beschreibung und Gliederung nehmen
   nur so viel Platz, wie sie wirklich brauchen. */
.kivmv-einzel{display:flex;flex-direction:column;gap:12px;
  /* Was ausser der Buehne noch Platz braucht: Kopfleiste der Seite, die Zeile
     mit Titel und Knoepfen, der eingeklappte Aufklapper, der Hinweis darunter
     und die Fusszeile. Einmal ausgerechnet, damit die Buehne genau den Rest
     bekommt - und nicht mehr, sonst wandert die Fusszeile aus dem Bild. */
  --kivmv-belegt:330px;
  min-height:calc(100dvh - var(--kivmv-belegt))}

.kivmv-einzel-kopf{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:4px 0 2px}
.kivmv-einzel-mitte{flex:1 1 320px;min-width:0}
.kivmv-einzel-titel{margin:0;font-size:clamp(21px,2.2vw,29px);line-height:1.2;font-weight:900}
.kivmv-einzel-marken{display:flex;gap:7px;flex-wrap:wrap;margin:7px 0 0}
.kivmv-einzel-aktionen{display:flex;gap:8px;flex-wrap:wrap}

.kivmv-zurueck-btn{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:11px 17px;border-radius:999px;border:1px solid var(--kivmv-linie);
  background:rgba(255,255,255,.06);color:var(--kivmv-tinte);
  text-decoration:none;font-weight:800;font-size:14px}
.kivmv-zurueck-btn:hover{border-color:var(--kivmv-tuerkis);color:var(--kivmv-tuerkis)}
.kivmv-zurueck-btn span{font-size:17px;line-height:1}

/* Die Buehne fuellt den Rest. min-height:0 ist noetig, sonst waechst ein
   Flex-Kind ueber den verfuegbaren Platz hinaus statt zu schrumpfen. */
/* Folien sind im Breitformat. Ist die Buehne breiter als 16:9, fuellt der
   Betrachter den Rest mit schwarzen Balken - die Folie wird kleiner, obwohl
   mehr Platz da waere. Deshalb bekommt die Buehne genau die Breite, die zu
   ihrer Hoehe passt, und steht mittig. */
.kivmv-buehne{position:relative;flex:0 0 auto;
  height:calc(100dvh - var(--kivmv-belegt));
  min-height:min(340px,42dvh);
  width:min(100%, calc((100dvh - var(--kivmv-belegt)) * 16 / 9));
  margin:0 auto;
  border-radius:18px;overflow:hidden;border:1px solid var(--kivmv-linie);
  background:#08202c;box-shadow:0 22px 50px rgba(3,18,26,.4)}
.kivmv-viewer{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}

.kivmv-mehr{border:1px solid var(--kivmv-linie);border-radius:16px;
  background:rgba(255,255,255,.04);overflow:hidden}
.kivmv-mehr>summary{cursor:pointer;list-style:none;padding:13px 18px;
  font-weight:800;font-size:14.5px;display:flex;align-items:center;gap:10px}
.kivmv-mehr>summary::-webkit-details-marker{display:none}
.kivmv-mehr>summary::before{content:"▸";color:var(--kivmv-tuerkis);font-size:15px}
.kivmv-mehr[open]>summary::before{content:"▾"}
.kivmv-mehr>summary:hover{color:var(--kivmv-tuerkis)}
.kivmv-mehr-inhalt{padding:2px 18px 18px;max-height:52vh;overflow:auto}

.kivmv-folien{margin:0;padding:0;list-style:none;counter-reset:folie;
  display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.kivmv-folie{counter-increment:folie;border:1px solid var(--kivmv-linie);
  border-radius:14px;padding:13px 15px;background:rgba(255,255,255,.04)}
.kivmv-folie h3{margin:0 0 6px;font-size:15px;font-weight:800;line-height:1.35}
.kivmv-folie h3::before{content:counter(folie) ". ";color:var(--kivmv-tuerkis)}
.kivmv-folie ul{margin:0;padding-left:18px;color:var(--kivmv-leise);font-size:14px}

/* ---- Fußzeile wie im Portal ---- */
.kivmv-fuss{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.kivmv-fuss-marke{font-weight:900;letter-spacing:.06em;color:var(--kivmv-tinte)}
.kivmv-fuss-text{color:var(--kivmv-leise);font-size:13.5px}
.kivmv-fuss-links{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto}
.kivmv-fuss-links a{color:var(--kivmv-tuerkis);text-decoration:none;font-weight:700}
.kivmv-fuss-links a:hover{text-decoration:underline}
.kivmv-fuss-jahr{color:var(--kivmv-leise);font-size:13px}

@media (max-width:760px){
  .kivmv-einzel{min-height:auto;--kivmv-belegt:400px}
  .kivmv-buehne{width:100%;height:auto;aspect-ratio:16/9;min-height:0}
  .kivmv-einzel-aktionen{width:100%}
  .kivmv-fuss-links{margin-left:0;width:100%}
}

/* ---- Filter und Sortierung ---- */
.kivmv-filter{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 30px}
.kivmv-marken-nav{margin:0}
.kivmv-sprung.is-aktiv{background:var(--kivmv-tuerkis);border-color:var(--kivmv-tuerkis);color:#06262b}
.kivmv-sprung.is-aktiv span{background:rgba(6,38,43,.20);color:#06262b}

.kivmv-sortierung{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}
.kivmv-sort-label{font-size:12px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--kivmv-leise);margin-right:2px}
.kivmv-sort{padding:7px 13px;border-radius:999px;border:1px solid transparent;
  color:var(--kivmv-leise);text-decoration:none;font-size:13.5px;font-weight:700}
.kivmv-sort:hover{color:var(--kivmv-tinte);border-color:var(--kivmv-linie)}
.kivmv-sort.is-aktiv{color:var(--kivmv-tinte);border-color:var(--kivmv-linie);
  background:rgba(255,255,255,.07)}

.kivmv-link{color:var(--kivmv-tuerkis);font-weight:700}

@media (max-width:760px){
  .kivmv-sortierung{margin-left:0;width:100%}
}

/* ---- Module nebeneinander, wenn Platz da ist ----
   Bisher bekam jedes Modul eine eigene Zeile ueber die ganze Breite. Bei einem
   oder zwei Eintraegen je Modul stand dann eine Kachel links und rechts davon
   ein halber Bildschirm Leere. Jetzt teilen sich die Module den Platz, sobald
   er reicht - und ein Modul mit vielen Praesentationen behaelt trotzdem ein
   mehrspaltiges Raster in seiner Spalte. */
.kivmv-bereiche{display:grid;gap:34px 32px;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,560px),1fr))}
.kivmv-bereiche .kivmv-modul{margin:0}

/* In einer schmaleren Spalte duerfen die Kacheln kleiner werden, sonst
   entsteht dort wieder eine einzige Reihe mit Rand. */
.kivmv-bereiche .kivmv-karten{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:16px}