/* Qualitätsdialog: Grundlayout im CI des Hochsauerlandkreises
   Grün #008532 für Text und Buttons, Orange nur für Flächen und Symbole. */
:root{
  --gruen:#008532;
  --gruen-dunkel:#006426;
  --gruen-hell:#e5f3ea;
  --orange:#f29f05;
  --text:#333333;
  --grau:#5a5a5a;
  --grau-hell:#f3f3f3;
  --linie:#e4e4e4;
  --rahmen:#767676;
  --fehler:#a32d2d;
  --radius:5px;
  --schatten:0 0 30px -15px #333;
}
*{margin:0;padding:0;box-sizing:border-box}
html{color-scheme:light}
body{font-family:'Barlow',sans-serif;color:var(--text);background:var(--grau-hell);font-size:16px;line-height:1.5;min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3,h4{font-weight:700;line-height:1.2}
a{color:var(--gruen-dunkel)}
img{max-width:100%;height:auto}

/* Sichtbarer Fokus für Tastaturbedienung (WCAG 2.4.7, 2.4.11) */
:focus-visible{outline:3px solid var(--gruen-dunkel);outline-offset:2px}

.sprunglink{position:absolute;left:-9999px;top:0;background:#fff;padding:10px 16px;z-index:100}
.sprunglink:focus{left:16px;top:16px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Kopf */
.kopf{background:#fff;border-bottom:1px solid var(--linie);padding:10px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.logo img{height:44px;width:auto;display:block}
.logo-sub{font-family:'Barlow Condensed',sans-serif;font-weight:500;font-size:15px;color:var(--grau);letter-spacing:.5px;border-left:1px solid var(--linie);padding-left:14px;line-height:1.35}

/* Inhalt */
main{flex:1;width:100%;display:flex;flex-direction:column}
main>*{flex:none}
main>.login-bg{flex:1}
.inhalt{max-width:1240px;margin:26px auto;padding:0 26px}
.karte{background:#fff;border-radius:10px;box-shadow:var(--schatten);padding:34px 40px;margin-bottom:22px}
.karte h1{font-size:25px;margin-bottom:8px}
.karte h2{font-size:23px;margin-bottom:6px}
.karte p{margin-bottom:12px}
.hinweis{font-size:14px;color:var(--grau)}

/* Anmeldeseite */
.login-bg{display:flex;align-items:center;justify-content:center;padding:40px 16px 120px;position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,var(--grau-hell) 100%)}
.login-welle{position:absolute;bottom:-2px;left:0;width:100%;height:170px;z-index:0}
.login-card{background:#fff;border-radius:10px;box-shadow:var(--schatten);padding:44px 46px 38px;width:100%;max-width:460px;position:relative;z-index:1}
.login-card .login-logo{display:flex;justify-content:center}
.login-card .login-logo img{width:300px}
.login-card h1{font-size:25px;text-align:center;margin:18px 0 4px}
.login-card p.sub{text-align:center;color:var(--grau);font-size:15px;margin-bottom:26px}
.login-info{margin-top:18px;background:var(--gruen-hell);border-radius:var(--radius);padding:12px 14px;font-size:14px;color:var(--gruen-dunkel)}

/* Formulare */
.feld{margin-bottom:16px}
label{font-weight:600;font-size:15px;display:block;margin-bottom:6px}
input,select,textarea{font-family:'Barlow',sans-serif;font-size:16px;color:var(--text);border:1px solid var(--rahmen);border-radius:var(--radius);padding:10px 12px;background:#fff;width:100%;min-height:44px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--gruen-dunkel);outline-offset:0;border-color:var(--gruen)}
.feld-fehler{color:var(--fehler);font-size:14px;margin-top:4px}
[aria-invalid="true"]{border-color:var(--fehler)}

/* Buttons (Zielgröße mindestens 24 px, hier 44 px) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:50px;padding:12px 30px;min-height:44px;font-family:'Barlow',sans-serif;font-size:16px;font-weight:600;cursor:pointer;text-decoration:none;transition:background-color .15s}
.btn-gruen{background:var(--gruen);color:#fff}
.btn-gruen:hover{background:var(--gruen-dunkel)}
.btn-ghost{background:#fff;color:var(--text);border:1px solid var(--rahmen)}
.btn-ghost:hover{border-color:var(--gruen);color:var(--gruen-dunkel)}
.btn-block{width:100%}

/* Meldungen: Status nie nur über Farbe, immer mit Text */
.meldung{border-radius:var(--radius);padding:12px 16px;margin-bottom:16px;border-left:5px solid}
.meldung-erfolg{background:var(--gruen-hell);border-color:var(--gruen);color:var(--gruen-dunkel)}
.meldung-fehler{background:#fdeaea;border-color:var(--fehler);color:var(--fehler)}
pre.ausgabe{background:var(--grau-hell);border:1px solid var(--linie);border-radius:var(--radius);padding:14px;font-size:14px;overflow-x:auto;white-space:pre-wrap;word-break:break-word}

/* Fuß */
.fuss{background:#fff;border-top:1px solid var(--linie);padding:16px 26px;font-size:14px;color:var(--grau);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fuss a{color:var(--grau)}
.fuss-akzent{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--orange);margin-right:8px;vertical-align:middle}

/* Schmale Bildschirme bis 320 px ohne seitliches Scrollen */
@media (max-width:600px){
  .kopf{padding:10px 16px}
  .inhalt{padding:0 16px}
  .karte{padding:24px 20px}
  .login-card{padding:30px 20px 26px}
  .login-card .login-logo img{width:220px}
  .fuss{padding:14px 16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Stufe 2: Anmeldung und Bereich */
.kopf-rechts{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.nutzer{font-size:15px}
.btn-klein{padding:8px 18px;min-height:40px;font-size:15px}
.rechts{text-align:right;margin:-6px 0 18px;font-size:15px}
.abstand-oben{margin-top:14px}
.meldung ul{margin:6px 0 0 18px}
.feld-check{display:flex;gap:10px;align-items:flex-start}
.feld-check input{width:24px;height:24px;min-height:24px;flex:none;margin-top:2px;accent-color:var(--gruen)}
.feld-check label{font-weight:400;margin:0}
.schmal{max-width:720px}
.auswahl-liste{border:none;margin:16px 0 22px}
.auswahl-eintrag{display:flex;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--linie);border-radius:var(--radius);margin-bottom:8px}
.auswahl-eintrag input{width:24px;height:24px;min-height:24px;flex:none;accent-color:var(--gruen)}
.auswahl-eintrag label{margin:0;font-weight:600}
.kachel-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.kachel{display:flex;flex-direction:column;gap:8px;background:#fff;border-radius:10px;box-shadow:var(--schatten);padding:26px 28px;text-decoration:none;color:var(--text);border-top:5px solid var(--gruen)}
.kachel:hover{border-top-color:var(--orange)}
.kachel-titel{font-size:21px;font-weight:700;color:var(--gruen-dunkel)}
.kachel-text{color:var(--grau);font-size:15px}
.status-chip{align-self:flex-start;font-size:14px;border-radius:50px;padding:4px 14px;background:var(--gruen-hell);color:var(--gruen-dunkel);font-weight:600}
.fuss-links{display:flex;gap:16px;flex-wrap:wrap}
.fuss-links a{min-height:24px;display:inline-block}
.text-seite{max-width:860px}
.text-seite h2{margin-top:22px}
.text-seite ul{margin-left:20px}