:root{
  --grund:#f6f5f0; --flaeche:#ffffff; --tinte:#22261f; --leise:#5f675a; --linie:#dcdcd2;
  --gruen:#3f6f2f; --gruen-hell:#e7f0e1; --gruen-dunkel:#2e5422;
  --warn:#9a5a00; --warn-hell:#fdf1dc; --rot:#a23b2a; --rot-hell:#fbe7e3;
  --blau:#2d5d86; --blau-hell:#e3edf6;
  --radius:12px; --schatten:0 1px 2px rgba(0,0,0,.05),0 2px 8px rgba(0,0,0,.04);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--tinte);font:17px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--gruen-dunkel)}
h1{font-size:1.6rem;line-height:1.2;margin:.2em 0 .4em}
h2{font-size:1.25rem;margin:1.2em 0 .5em}
h3{font-size:1.05rem;margin:1em 0 .4em}
.leise{color:var(--leise)} .klein,small{font-size:.86rem}
code{background:#eceae2;padding:1px 5px;border-radius:4px;font-size:.9em;word-break:break-all}

/* Kopf */
.kopf{background:var(--flaeche);border-bottom:1px solid var(--linie);padding:10px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.marke{font-weight:700;text-decoration:none;color:var(--gruen-dunkel);font-size:1.1rem;white-space:nowrap}
.marke small{font-weight:400;color:var(--leise);margin-left:4px}
.blatt{color:var(--gruen)}
.hauptnav{display:flex;flex-wrap:wrap;gap:4px;order:3;width:100%}
.hauptnav a{padding:10px 14px;border-radius:999px;text-decoration:none;color:var(--tinte);white-space:nowrap;font-weight:500}
.hauptnav a[aria-current]{background:var(--gruen-hell);color:var(--gruen-dunkel)}
.abmelden{margin-left:auto;display:flex;align-items:center;gap:8px}
.wer{color:var(--leise);font-size:.9rem}
@media(min-width:900px){.hauptnav{order:0;width:auto}}

.inhalt{max-width:1240px;margin:0 auto;padding:16px 16px 80px}
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);padding:16px;box-shadow:var(--schatten);margin:0 0 14px}
.karte>h2:first-child,.karte>h3:first-child{margin-top:0}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:10px 18px;border-radius:10px;border:1px solid var(--gruen);
  background:var(--gruen);color:#fff;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;text-align:center}
.knopf:hover{background:var(--gruen-dunkel)}
.knopf.leise{background:var(--flaeche);color:var(--gruen-dunkel)} .knopf.leise:hover{background:var(--gruen-hell)}
.knopf.gross{min-height:54px;font-size:1.05rem;padding:12px 22px}
.knopf.klein{min-height:38px;padding:6px 12px;font-size:.92rem}
.knopf.voll{width:100%}
.knopf.ok{background:var(--gruen-dunkel)}
.knopf.gesperrt{background:#9aa394;border-color:#9aa394}
.knopf:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible{outline:3px solid #f0b429;outline-offset:2px}
.knopfreihe{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}

/* Formulare */
.formular label,.wissenwahl label{display:block;font-weight:600;margin:0 0 16px}
input,select,textarea{display:block;width:100%;margin-top:6px;font:inherit;font-weight:400;padding:12px;border:1px solid #bfc2b6;border-radius:10px;background:#fff;color:var(--tinte)}
textarea{resize:vertical}
textarea.code{font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace}
textarea[readonly]{background:#fafaf7}
textarea[readonly]:not(.code){field-sizing:content;min-height:3em}
label small{display:block;font-weight:400;color:var(--leise);margin-top:4px}
.pflicht::after{content:""}
.ankreuzen{display:flex !important;gap:12px;align-items:flex-start;font-weight:400 !important;background:var(--gruen-hell);padding:12px;border-radius:10px}
.ankreuzen input{width:24px;height:24px;margin:2px 0 0;flex:none}
.login{max-width:420px;margin:8vh auto}
.fehler{background:var(--rot-hell);color:var(--rot);padding:10px 14px;border-radius:10px;font-weight:600}
.meldung{background:var(--gruen-hell);border:1px solid #bcd3ad;color:var(--gruen-dunkel);padding:12px 16px;border-radius:10px;margin-bottom:14px;font-weight:500}
.zurueck{text-decoration:none;font-weight:500}

/* Status */
.pille{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.85rem;font-weight:600;background:#eceae2;color:var(--tinte);white-space:nowrap}
.pille.gross{font-size:1rem;padding:6px 14px}
.pille.klein{font-size:.78rem;padding:2px 8px}
.pille.entwurf{background:var(--warn-hell);color:var(--warn)}
.pille.pruefung{background:var(--blau-hell);color:var(--blau)}
.pille.freigegeben{background:var(--gruen-hell);color:var(--gruen-dunkel)}
.zaehler{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 16px}

/* Liste */
.zeile-titel{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.produktliste{list-style:none;padding:0;margin:0}
.produkt{padding:0}
.produkt .flaeche{display:flex;flex-direction:column;gap:6px;padding:16px;text-decoration:none;color:inherit;border-radius:var(--radius)}
.produkt .flaeche .pille{align-self:flex-start}
.produkt .flaeche:hover{background:#fbfbf8}
.pname{font-size:1.15rem}
.naechster{color:var(--gruen-dunkel);font-weight:600;margin-top:4px}

/* Produktkopf und Schritte */
.produktkopf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:flex-start}
.produktkopf h1{margin-bottom:.1em}
.statusbox{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.statusbox form{display:flex;gap:8px;flex-wrap:wrap}
.schritte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:16px 0}
@media(min-width:700px){.schritte{grid-template-columns:repeat(4,minmax(0,1fr))}}
.schritte a{display:flex;align-items:center;gap:8px;padding:12px;border-radius:10px;background:var(--flaeche);border:1px solid var(--linie);text-decoration:none;color:var(--tinte);font-weight:600;min-height:54px}
.schritte a b{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#eceae2;flex:none}
.schritte a[aria-current]{border-color:var(--gruen);background:var(--gruen-hell)}
.schritte a[aria-current] b{background:var(--gruen);color:#fff}
.zahl{margin-left:auto;white-space:nowrap;font-size:.8rem;font-weight:600;padding:2px 8px;border-radius:999px;background:#eceae2}
.zahl.warn{background:var(--warn-hell);color:var(--warn)} .zahl.gut{background:var(--gruen-hell);color:var(--gruen-dunkel)}

.hinweisbox{background:var(--blau-hell);border-left:4px solid var(--blau);padding:12px 16px;border-radius:8px;margin:0 0 16px}
.hinweisbox.warn{background:var(--warn-hell);border-color:var(--warn)}
.hinweisbox.gut{background:var(--gruen-hell);border-color:var(--gruen)}

.zweispaltig{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
@media(min-width:980px){.zweispaltig{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.zweispaltig.breit-links{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .zweispaltig.breit-links>div:first-child{position:sticky;top:12px}}

/* Fakten */
.fakten{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 16px;margin:0}
@media(min-width:600px){.fakten{grid-template-columns:minmax(120px,max-content) minmax(0,1fr)}}
.fakten dt{font-weight:600}.fakten dd{margin:0 0 8px}
.fakt{border-top:1px solid var(--linie);padding:12px 0}
.fakt>label{margin:0 !important}
.fakt input{margin:6px 0 4px}
.fakt small{display:block;color:var(--leise)}
.fakt.erledigt label{color:var(--gruen-dunkel)}
.haken{color:var(--gruen)}
.vorschlag{margin:6px 0;font-size:.95rem;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.vorschlag q{background:var(--warn-hell);padding:2px 6px;border-radius:4px}
.klebeleiste{position:sticky;bottom:0;background:var(--flaeche);border-top:1px solid var(--linie);padding:12px 0 8px;margin-top:8px}
.eingefuegt{white-space:pre-wrap;background:#fafaf7;padding:10px;border-radius:8px;font-size:.9rem}
.links{padding-left:18px;word-break:break-all}

/* Bilder */
.bildliste{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media(min-width:700px){.bildliste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.bildliste{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bild{display:flex;gap:12px;align-items:flex-start;margin:0;padding:10px}
.bild img{width:96px;height:96px;object-fit:contain;background:#f1f0ea;border-radius:8px;flex:none}
.bild>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.datei{word-break:break-all;font-size:.92rem}
.schalter{font:inherit;font-size:.88rem;padding:8px 10px;border-radius:8px;border:1px dashed #b7b9ad;background:#fff;cursor:pointer;text-align:left;min-height:40px}
.schalter.an{border-style:solid;border-color:var(--gruen);background:var(--gruen-hell);color:var(--gruen-dunkel);font-weight:600}
.laeuft{display:none;padding:10px;color:var(--leise)} .laeuft.htmx-request{display:block}
.linkpruefung ul{list-style:none;padding:0;margin:0}
.linkpruefung li{display:flex;flex-direction:column;padding:8px 0;border-top:1px solid var(--linie);word-break:break-all}
.linkpruefung li.gut span{color:var(--gruen-dunkel)} .linkpruefung li.warn span{color:var(--rot);font-weight:600}

/* Ergebnisfelder */
.feldkopf{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.feldkopf h3{margin:0}
.zaehlung{font-size:.85rem;font-weight:600;padding:2px 8px;border-radius:999px}
.zaehlung.gut{background:var(--gruen-hell);color:var(--gruen-dunkel)} .zaehlung.warn{background:var(--rot-hell);color:var(--rot)}
.snippet{display:flex;flex-direction:column;gap:2px;font-family:Arial,sans-serif;padding:4px 0}
.s-url{font-size:.82rem;color:#4d5156}.s-titel{color:#1a0dab;font-size:1.15rem;line-height:1.3}.s-text{color:#4d5156;font-size:.92rem}

.vorschau .vorschaukopf{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.vorschau h2{margin:0}
.umschalter{display:inline-flex;border:1px solid var(--linie);border-radius:10px;overflow:hidden}
.umschalter button{font:inherit;padding:8px 14px;border:0;background:#fff;cursor:pointer;min-height:42px}
.umschalter button.an{background:var(--gruen);color:#fff}
.rahmen{background:#e9e8e2;border-radius:var(--radius);padding:8px;margin-top:10px;overflow:hidden}
.rahmen iframe{display:block;margin:0 auto;width:100%;max-width:100%;height:min(1000px,80vh);border:0;background:#fff;border-radius:6px;transition:width .2s}

.abstand{margin-top:32px}
.aplusraster{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media(min-width:800px){.aplusraster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1150px){.aplusraster{grid-template-columns:repeat(3,minmax(0,1fr))}}
.aplus img{width:100%;height:auto;border-radius:6px;display:block}
.aplusfeld{margin-top:8px}.aplusfeld .klein{font-weight:600}

/* Wissen, Personas, Tabellen */
.suche{max-width:420px;margin-bottom:14px}
.wissen{list-style:none;padding:0;margin:0}
.wissen p{margin:6px 0}
.inline{display:inline-block;margin-left:8px}
.raster3{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media(min-width:900px){.raster3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.persona .pille{white-space:normal}
.persona ul{padding-left:20px;margin:.2em 0}
.verlauf{padding-left:18px}
.tabelle{overflow-x:auto}
table{border-collapse:collapse;width:100%;background:var(--flaeche)}
th,td{text-align:left;padding:10px;border-bottom:1px solid var(--linie)}
.zahl .breit{display:none}
@media(min-width:900px){.zahl .breit{display:inline}}