/* Adminbereich – ruhig, dicht, gut lesbar. */
:root{
  --tief:#0B1233;
  --tief-2:#18225A;
  --blau:#243282;
  --blau-hell:#AEBBE6;
  --dunst:#E9ECF4;
  --papier:#F5F6F9;
  --windsack:#3CA433;
  --windsack-hell:#5CC152;
  --gruen:#2A7D24;
  --rot:#B3261E;
  --linie:rgba(21,28,69,.14);
  --schrift-display:"Big Shoulders Display","Oswald","Arial Narrow",Impact,sans-serif;
  --schrift-text:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --schrift-daten:"IBM Plex Mono",ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--tief);font-family:var(--schrift-text);font-size:15px;line-height:1.6}
h1,h2,h3{font-family:var(--schrift-display);text-transform:uppercase;line-height:.98;margin:0}
h1{font-size:2.2rem}
h2{font-size:1.4rem;margin-bottom:1rem}
h3{font-size:1.15rem}
a{color:var(--blau)}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--windsack);outline-offset:2px}

.rahmenwerk{display:flex;min-height:100vh}
.seitenleiste{
  width:240px;flex:none;background:var(--tief);color:#D5DBEF;
  display:flex;flex-direction:column;padding:1.4rem 0;position:sticky;top:0;height:100vh;
}
.admin-marke{display:block;padding:0 1.4rem 1.4rem;color:#fff;text-decoration:none;font-family:var(--schrift-display);font-size:1.3rem;text-transform:uppercase;line-height:1}
.admin-marke span{display:block;font-family:var(--schrift-daten);font-size:.62rem;letter-spacing:.18em;color:var(--blau-hell);margin-top:.4rem}
.admin-marke img{width:72px;height:auto;margin-bottom:.7rem}
.seitenleiste nav{display:flex;flex-direction:column}
.seitenleiste nav a{
  display:flex;align-items:center;gap:.7rem;padding:.65rem 1.4rem;
  color:#D5DBEF;text-decoration:none;border-left:3px solid transparent;font-size:.95rem;
}
.seitenleiste nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.seitenleiste nav a.aktiv{background:rgba(92,193,82,.16);border-left-color:var(--windsack);color:#fff}
.seitenleiste-fuss{margin-top:auto;padding:1.4rem;display:grid;gap:.4rem;border-top:1px solid rgba(207,224,234,.15)}
.seitenleiste-fuss a{color:var(--blau-hell);text-decoration:none;font-size:.85rem}
.seitenleiste-fuss a:hover{color:#fff}
.seitenleiste-fuss form{margin:0}
.link-knopf{background:none;border:0;padding:0;font:inherit;color:var(--blau-hell);cursor:pointer;text-align:left}
.link-knopf:hover{color:#fff}
.seitenleiste-fuss .klein{font-size:.78rem}
.seitenleiste-fuss p{margin:.4rem 0 0;color:#fff}

.inhalt{flex:1;padding:2rem clamp(1rem,3vw,2.5rem) 5rem;max-width:1100px}
.kopfzeile{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.6rem;flex-wrap:wrap}
.kopfzeile-knoepfe{display:flex;gap:.6rem}
.abstand{margin-top:2.5rem}

.karte{background:#fff;border:1px solid var(--linie);padding:1.4rem;margin-bottom:1.2rem}
.karte.schmal{max-width:620px}
.leer{color:#4B5478;font-style:italic}
.klein{font-size:.8rem;color:#4B5478;font-weight:400}
.hilfe{display:block;font-size:.8rem;color:#4B5478;margin-top:.35rem}
.rechts{text-align:right}
.einzug{color:var(--blau-hell)}

.knopf{display:inline-flex;align-items:center;gap:.5rem;background:var(--windsack);color:var(--tief);border:0;
  padding:.65rem 1.2rem;font-family:var(--schrift-text);font-size:.92rem;font-weight:600;cursor:pointer;
  text-decoration:none;border-radius:2px}
.knopf:hover{background:var(--windsack-hell)}
.knopf--linie{background:transparent;border:1px solid var(--linie);color:var(--tief)}
.knopf--linie:hover{background:var(--dunst)}
.klein-knopf{background:none;border:1px solid var(--linie);color:var(--tief);padding:.3rem .7rem;font-size:.8rem;cursor:pointer;border-radius:2px;font-family:var(--schrift-text)}
.klein-knopf:hover{background:var(--dunst)}
.klein-knopf--rot{color:var(--rot);border-color:rgba(179,38,30,.4)}
.klein-knopf--rot:hover{background:rgba(179,38,30,.08)}

.feld{margin-bottom:1rem}
.feld label{display:block;font-family:var(--schrift-daten);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blau);margin-bottom:.35rem}
.feld input,.feld select,.feld textarea{
  width:100%;padding:.6rem .7rem;border:1px solid var(--linie);background:#fff;
  font-family:var(--schrift-text);font-size:.95rem;color:var(--tief);border-radius:2px;
}
.feld textarea{line-height:1.5;resize:vertical}
.feld textarea.liste{font-family:var(--schrift-daten);font-size:.85rem}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--blau);box-shadow:0 0 0 3px rgba(42,110,155,.15)}
.feldreihe{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.feld--knopf{display:flex;align-items:flex-end}
@media (max-width:760px){.feldreihe{grid-template-columns:1fr}}
.schalter{display:flex;flex-wrap:wrap;gap:1.2rem;margin:.6rem 0 1.2rem;font-size:.92rem}
.schalter input{margin-right:.4rem}

.tabelle{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--linie)}
.tabelle th{text-align:left;font-family:var(--schrift-daten);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blau);padding:.7rem .9rem;border-bottom:1px solid var(--linie)}
.tabelle td{padding:.7rem .9rem;border-bottom:1px solid var(--linie);vertical-align:middle}
.tabelle tr:last-child td{border-bottom:0}
.tabelle .daten{font-family:var(--schrift-daten);font-size:.82rem;color:#4B5478}
.tabelle a{text-decoration:none;font-weight:600}

.marke{display:inline-block;font-family:var(--schrift-daten);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;padding:.15rem .5rem;border-radius:2px}
.marke--live{background:rgba(46,125,91,.14);color:var(--gruen)}
.marke--entwurf{background:rgba(21,28,69,.08);color:#4B5478}
.marke--intern{background:rgba(60,164,51,.14);color:var(--gruen)}

.meldung{padding:.8rem 1rem;margin-bottom:1rem;border-left:4px solid var(--blau);background:#fff;border-radius:2px}
.meldung--erfolg{border-left-color:var(--gruen)}
.meldung--fehler{border-left-color:var(--rot)}
.meldung--hinweis{border-left-color:var(--blau)}

/* Blöcke */
.block{background:#fff;border:1px solid var(--linie);margin-bottom:.7rem}
.block--aus{opacity:.6}
.block summary{padding:.9rem 1.2rem;cursor:pointer;display:flex;align-items:center;gap:.7rem;font-weight:600}
.block summary::-webkit-details-marker{display:none}
.block[open] summary{border-bottom:1px solid var(--linie);background:var(--dunst)}
.block-zeichen{font-size:1.2rem}
.block-name{font-family:var(--schrift-display);font-size:1.15rem;text-transform:uppercase}
.block-werkzeuge{display:flex;flex-wrap:wrap;gap:.5rem;padding:.9rem 1.2rem 0}
.block-werkzeuge form{display:flex;gap:.4rem}
.block > form:last-child{padding:1.2rem}
.typliste{margin:1.2rem 0 0;padding-left:1.1rem;font-size:.85rem;color:#4B5478}
.typliste li{margin-bottom:.3rem}
.gefahr{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--linie)}

/* Bildwahl */
.bildwahl{margin-top:.5rem}
.bildwahl summary{cursor:pointer;font-size:.82rem;color:var(--blau)}
.bildwahl-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.5rem;margin-top:.6rem;max-height:260px;overflow:auto;padding:.3rem}
.bildwahl-knopf{border:1px solid var(--linie);background:#fff;padding:0;cursor:pointer;position:relative}
.bildwahl-knopf img{aspect-ratio:4/3;object-fit:cover;width:100%}
.bildwahl-knopf span{display:block;font-family:var(--schrift-daten);font-size:.66rem;padding:.2rem}
.bildwahl-knopf:hover{border-color:var(--windsack)}
.bildvorschau{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.6rem}
.bildvorschau[hidden]{display:none}
.bildvorschau figure{position:relative;margin:0;width:110px}
.bildvorschau img,.bildvorschau-leer{display:block;width:110px;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--linie);border-radius:3px;background:#fff}
.bildvorschau-leer{display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#a33;text-align:center}
.bildvorschau figcaption{font-family:var(--schrift-daten);font-size:.66rem;margin-top:.2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bildvorschau-weg{position:absolute;top:4px;right:4px;width:1.5rem;height:1.5rem;border:0;border-radius:50%;background:rgba(21,28,69,.75);color:#fff;font-size:.7rem;line-height:1;cursor:pointer}
.bildvorschau-weg:hover{background:#a33}
.bildwahl-knopf.gewaehlt{border-color:var(--windsack);outline:2px solid var(--windsack)}

/* Medien */
.medienraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
/* minmax(0,1fr): sonst richtet sich die Spalte nach dem breitesten Inhalt (Dateifeld, Maße) und alles ragt über den Kartenrand */
.medium{background:#fff;border:1px solid var(--linie);padding:.6rem;display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;min-width:0}
.medium img{aspect-ratio:4/3;object-fit:cover;width:100%;background:var(--dunst)}
.medium-daten{display:flex;flex-wrap:wrap;gap:.2rem .6rem;justify-content:space-between;font-family:var(--schrift-daten);font-size:.72rem;color:#4B5478}
.medium form{display:flex;gap:.4rem}
.medium input{flex:1;min-width:0;padding:.35rem .5rem;border:1px solid var(--linie);font-size:.8rem;font-family:var(--schrift-text)}

/* Checkliste und Kennzahlen */
.checkliste{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.checkliste li{display:flex;gap:.8rem;align-items:flex-start}
.checkliste b{width:1.4rem;height:1.4rem;flex:none;display:grid;place-items:center;border-radius:50%;font-size:.8rem;color:#fff}
.checkliste .ok b{background:var(--gruen)}
.checkliste .offen b{background:var(--windsack)}
.checkliste em{display:block;font-style:normal;font-size:.82rem;color:#4B5478}
.kennzahlen{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.5rem;margin:0;font-size:.9rem}
.kennzahlen dt{font-family:var(--schrift-daten);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blau);align-self:center}
.kennzahlen dd{margin:0;font-weight:600}

/* Anmeldung */
.anmeldeseite{display:grid;place-items:center;min-height:100vh;background:linear-gradient(178deg,#070B22,#18225A 70%,#243282)}
.anmeldebox{width:min(420px,92vw)}
.anmeldekarte{background:#fff;padding:2rem;border-radius:3px}
.anmeldekarte h1{font-size:1.8rem;margin-bottom:.2rem}
.anmeldekarte .knopf{width:100%;justify-content:center;margin-top:.6rem}
.anmeldekarte p.klein{margin-top:1.2rem}

@media (max-width:820px){
  .rahmenwerk{flex-direction:column}
  .seitenleiste{width:auto;height:auto;position:static;padding-bottom:.6rem}
  .seitenleiste nav{flex-direction:row;flex-wrap:wrap;padding:0 1rem}
  .seitenleiste nav a{border-left:0;border-bottom:3px solid transparent;padding:.5rem .8rem}
  .seitenleiste nav a.aktiv{border-left:0;border-bottom-color:var(--windsack)}
  .seitenleiste-fuss{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
}

/* 0.8.4 */
.suchform{display:flex;gap:.5rem;margin-left:auto}
.suchform input[name=q]{padding:.5rem .7rem;border:1px solid var(--linie);border-radius:2px;font-family:var(--schrift-text);font-size:.9rem;min-width:220px}
.inline-form{display:inline-flex;gap:.3rem}
.medium-verwendung summary{cursor:pointer;font-family:var(--schrift-daten);font-size:.72rem;color:var(--gruen)}
.medium-verwendung ul{margin:.4rem 0 0;padding-left:1rem;font-size:.78rem;color:#4B5478}
.medium-frei{font-family:var(--schrift-daten);font-size:.72rem;color:#8b9aa6}
.medium-tausch summary{cursor:pointer;font-family:var(--schrift-daten);font-size:.72rem;color:var(--blau)}
.medium-tausch form{display:grid;gap:.4rem;margin-top:.4rem}
.medium-tausch input[type=file]{font-size:.75rem;max-width:100%}

/* 0.8.9: Einstellungen mit Reitern */
.reiter-leiste{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.4rem;border-bottom:1px solid var(--linie);padding-bottom:.8rem}
.reiter{border:1px solid var(--linie);background:#fff;padding:.5rem .95rem;border-radius:2px;cursor:pointer;
  font-family:var(--schrift-daten);font-size:.78rem;letter-spacing:.06em;color:#4B5478}
.reiter.aktiv{background:var(--tief);border-color:var(--tief);color:#fff}
.js .reiter-inhalt{display:none;border:0;padding:0;margin:0}
.js .reiter-inhalt.aktiv{display:block}
.reiter-inhalt{border:0;padding:0;margin:0 0 1rem}
.js .nur-ohne-js{display:none}
.nur-ohne-js{font-family:var(--schrift-titel);text-transform:uppercase;font-size:1.1rem;margin-bottom:.6rem}

/* 0.9.1: Logo, Passwort-Strecke, Einstellungen „geheim“ */
.anmelde-logo{width:200px;height:auto;margin:0 auto 1.4rem}
.abstand-klein{margin-top:1rem}
.schalter-inline{display:flex;gap:.5rem;align-items:center;margin-top:.5rem;font-size:.85rem;font-weight:400}
.checkliste .offen b{background:#B3362B;color:#fff}

/* 0.11.0: Protokoll */
.abstand-unten{margin-bottom:1rem}
.filterleiste{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.filterleiste select{width:auto}
.protokoll td{vertical-align:top}
.marke--angelegt{background:rgba(46,125,91,.14);color:var(--gruen)}
.marke--geloescht,.marke--anmeldung_fehlgeschlagen{background:rgba(179,38,30,.1);color:var(--rot)}
.marke--geaendert,.marke--verschoben{background:rgba(36,50,130,.1);color:var(--blau)}
.marke--anmeldung,.marke--abmeldung,.marke--passwort_link,.marke--sicherung,.marke--testmail{background:rgba(21,28,69,.08);color:#4B5478}
.aenderungen{margin-top:.35rem;font-size:.82rem}
.aenderungen summary{cursor:pointer;color:var(--blau)}
.aenderungen dl{display:grid;grid-template-columns:max-content 1fr;gap:.25rem .8rem;margin:.5rem 0 0}
.aenderungen dt{font-family:var(--schrift-daten);font-size:.72rem;color:#4B5478}
.aenderungen dd{margin:0;overflow-wrap:anywhere}
.aenderungen del{color:var(--rot);text-decoration:line-through;margin-right:.4rem}
.aenderungen ins{color:var(--gruen);text-decoration:none}
.blaettern{display:flex;gap:.6rem;justify-content:space-between;margin-top:1rem}
.admin-marke .live-seit{margin-top:.2rem;letter-spacing:.08em;text-transform:none;opacity:.8}

/* 0.11.0: Statistik */
.kacheln-statistik{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1.2rem}
.kacheln-statistik .karte{margin:0}
.kachel-name{display:block;font-family:var(--schrift-daten);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:#4B5478;margin-bottom:.4rem}
.kachel b{font-family:var(--schrift-display);font-size:1.9rem;line-height:1;color:var(--tief)}
.verlauf{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem}
.linie{display:block;width:100%;height:70px;overflow:visible}
.linie path{fill:none;stroke:var(--blau);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.linie--zwei path{stroke:var(--gruen)}
.raster-statistik{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem}
.raster-statistik .karte{margin:0}
.balken{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.balken li{position:relative;display:flex;justify-content:space-between;gap:1rem;padding:.35rem .5rem;font-size:.85rem}
.balken li::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--anteil,0);background:rgba(36,50,130,.08);z-index:0}
.balken li>*{position:relative;z-index:1;overflow-wrap:anywhere}
.balken b{font-family:var(--schrift-daten);font-weight:500}

/* 0.11.0: SEO & Teilen */
.seo-raster{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.2rem;align-items:start}
@media (max-width:900px){.seo-raster{grid-template-columns:1fr}}
.serp{font-family:Arial,sans-serif;max-width:600px}
.serp span{display:block}
.serp-adresse{font-size:.8rem;color:#4d5156}
.serp-titel{font-size:1.15rem;color:#1a0dab;margin:.2rem 0;line-height:1.3}
.serp-text{font-size:.85rem;color:#4d5156;line-height:1.5}
.teilen-karte{border:1px solid var(--linie);max-width:420px;background:#f6f7f9}
.teilen-karte img{display:block;width:100%;aspect-ratio:1.91/1;object-fit:cover;background:var(--tief)}
.teilen-karte div{padding:.6rem .8rem}
.teilen-karte b{display:block;margin-top:.15rem}
.favicon-vorschau{display:flex;gap:1rem;align-items:end}
.favicon-vorschau img{border:1px solid var(--linie);background:#fff}
.marke--seo-gut{background:rgba(46,125,91,.14);color:var(--gruen)}
.marke--seo-fehlt,.marke--seo-zu-lang{background:rgba(179,38,30,.1);color:var(--rot)}
.marke--seo-kurz{background:rgba(36,50,130,.1);color:var(--blau)}