:root{
  --bg:  #ffffff;
  --text: #1a1a1a;
  --muted: #5b5b5b;
  --brand: #155e75;        /* petrol */
  --brand-2: #0ea5a4;      /* türkis */
  --accent: #f59e0b;       /* warmes Gelb */
  --ok: #059669;           /* grün */
  --warn: #b45309;         /* orange/braun */
  --danger: #b91c1c;       /* rot */
  --card: #f7fafc;
  --ring: rgba(14,165,164,.4);
  --radius: 16px;
  --shadow: 0 10px 24px rgba(0,0,0,.09);
  --maxw: 1100px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220; --text:#eef2ff; --muted:#a0a8c0;
    --card:#0f172a; --brand:#22d3ee; --brand-2:#38bdf8; --accent:#fbbf24;
    --shadow: 0 10px 24px rgba(0,0,0,.45);
  }
  img{opacity:.98}
}
html{scroll-behavior:smooth}
body{margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:var(--bg); color:var(--text); line-height:1.6}
a{color:var(--brand-2); text-decoration-thickness: .1em; text-underline-offset: .2em}
.wrap{max-width:var(--maxw); margin:auto; padding: 0 1rem}
.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}

/* ------------------------------
   Header & Navigation
   ------------------------------ */
header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.85); backdrop-filter: blur(8px); border-bottom:1px solid rgba(0,0,0,.06)}
@media (prefers-color-scheme: dark){ header{background: rgba(15,23,42,.75); border-color: rgba(255,255,255,.08)} }
.nav{display:flex; align-items:center; justify-content:space-between; padding: .8rem 0}
.brand{display:flex; gap:.6rem; align-items:center; font-weight:800}
.brand .logo{display:grid; place-items:center; width:36px; height:36px; border-radius:9px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:white; box-shadow: var(--shadow)}
nav ul{display:flex; gap:1rem; list-style:none; margin:0; padding:0}
nav a{font-weight:600; color:var(--text)}
nav a:hover{color:var(--brand-2)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:1rem; background:var(--brand); color:white; padding:.6rem .8rem; border-radius:.6rem}

/* ------------------------------
   Hero
   ------------------------------ */
.hero{isolation:isolate; background: radial-gradient(1200px 400px at 10% -10%, rgba(14,165,164,.18), transparent),
                      radial-gradient(1000px 300px at 100% 0%, rgba(245,158,11,.18), transparent)}
.hero .wrap{display:grid; grid-template-columns: 1.2fr .8fr; gap:2rem; align-items:center; padding: 3rem 1rem}
.tag{display:inline-block; background:var(--card); padding:.3rem .6rem; border-radius:999px; border:1px solid rgba(0,0,0,.06)}
h1{font-size:clamp(1.8rem, 4vw, 3rem); line-height:1.1; margin:.5rem 0 1rem}
.lead{font-size:1.1rem; color:var(--muted)}
.hero aside{background:var(--card); border:1px solid rgba(0,0,0,.06); padding:1rem; border-radius:var(--radius); box-shadow:var(--shadow)}
.badge{font-weight:700; color:var(--brand);}

/* ------------------------------
   Sektionen & Komponenten
   ------------------------------ */
section{padding: 2.8rem 0}
h2{font-size:clamp(1.4rem,3.2vw,2rem); margin:0 0 1rem}
.grid{display:grid; gap:1rem}
.grid.cards{grid-template-columns: repeat(auto-fit, minmax(250px,1fr))}
.card{background:var(--card); border: 1px solid rgba(0,0,0,.06); border-radius: var(--radius); padding:1rem; box-shadow: var(--shadow)}
.card h3{margin-top:0}
.list-check{padding-left:1.2rem}
.list-check li{margin:.4rem 0}

.timeline{position:relative;}
.timeline::before{content:""; position:absolute; left:8px; top:0; bottom:0; width:2px; background: linear-gradient(var(--brand),var(--brand-2))}
.step{position:relative; padding-left:2.2rem; margin:1rem 0}
.step::marker{content:""}
.dot{position:absolute; left:0; top:0.2rem; width:18px; height:18px; border-radius:999px; background:linear-gradient(var(--brand),var(--brand-2)); box-shadow:0 0 0 4px rgba(14,165,164,.15)}
/* Einheitlicher Seitenabstand für Unterseiten */
#massnahmen,
#sanktionsverfahren {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1rem;
}
/* Tabelle */
table{width:100%; border-collapse:collapse; font-size:.95rem}
th, td{border-bottom:1px solid rgba(0,0,0,.08); padding:.6rem .4rem; text-align:left}
th{font-weight:700}
caption{caption-side:bottom; color:var(--muted); padding-top:.5rem}

/* Formular */
form{display:grid; gap:.8rem}
label{font-weight:600}
input, textarea, select{border:1px solid rgba(0,0,0,.15); background:transparent; padding:.7rem .8rem; border-radius:.6rem; color:var(--text)}
input:focus, textarea:focus, select:focus{outline:none; box-shadow:0 0 0 4px var(--ring); border-color: var(--brand-2)}
.row{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
button{appearance:none; border:0; padding:.8rem 1rem; border-radius:.8rem; font-weight:700; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:white; box-shadow:var(--shadow); cursor:pointer}
button:hover{transform: translateY(-1px)}

/* Footer */
footer{padding:2rem 0; color:var(--muted); border-top:1px solid rgba(0,0,0,.06)}

/* Responsive */
@media (max-width: 900px){
  .hero .wrap{grid-template-columns: 1fr}
  .row{grid-template-columns:1fr}
}

/* Druck */
@media print{
  header, .hero aside, .skip, .cta {display:none}
  body{background:white; color:black}
  a{color:black; text-decoration:none}
}
/* Kartenlayout */
.grid.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.card {
  background: var(--surface, #fff);
  border-radius: 16px;
  box-shadow: var(--shadow, 0 4px 12px rgba(0,0,0,0.1));
  padding: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.card h2 {
  margin-top: 0;
}

.card .button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5em 1em;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
}
body{
  background:
    radial-gradient(1200px 400px at 10% -10%, rgba(14,165,164,.18), transparent),
    radial-gradient(1000px 300px at 100% 0%, rgba(245,158,11,.18), transparent),
    var(--bg); /* Basisfarbe (#fff) bleibt als dritte Ebene */
  background-attachment: fixed;
  background-size: auto, auto, cover;
}
/* ------------------------------
   Interaktives Sanktionsverfahren (dezente Farben)
   ------------------------------ */
#sanktionsverfahren {
  padding: 2rem 1rem;
  max-width: var(--maxw);
  margin: auto;
}

#sanktionsverfahren .intro {
  text-align: center;
  color: var(--muted);
  max-width: 800px;
  margin: 0 auto 1.5rem;
}

.stufen {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Grundlayout */
.stufe {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background: var(--card);
}

.stufe summary {
  font-weight: 700;
  font-size: 1.1rem;
  padding: 1rem 1.2rem;
  color: var(--text);
  cursor: pointer;
}

.stufe p {
  padding: 1rem 1.2rem;
  margin: 0;
  background: #fff;
  color: var(--text);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Hover / Öffnen */
.stufe:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.stufe[open] {
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(250,250,250,0.95));
}

/* Dezente Farbakzente je Stufe */
.stufe1 summary {
  background: linear-gradient(135deg, rgba(21,94,117,0.12), rgba(14,165,164,0.10));
  border-left: 4px solid var(--brand);
}

.stufe2 summary {
  background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(254,240,138,0.10));
  border-left: 4px solid var(--accent);
}

.stufe3 summary {
  background: linear-gradient(135deg, rgba(185,28,28,0.12), rgba(239,68,68,0.10));
  border-left: 4px solid var(--danger);
}

.stufe4 summary {
  background: linear-gradient(135deg, rgba(14,165,164,0.12), rgba(125,211,252,0.10));
  border-left: 4px solid var(--brand-2);
}

/* Entfernt Standard-Pfeil */
.stufe summary::marker {
  display: none;
}

/* Dunkles Farbschema */
@media (prefers-color-scheme: dark) {
  .stufe summary {
    color: var(--text);
    background: rgba(255,255,255,0.04);
    border-left-color: var(--brand-2);
  }
  .stufe p {
    background: var(--card);
    color: var(--text);
  }
}
/* Impressum & Datenschutz */
#impressum, #datenschutz {
  max-width: var(--maxw);
  margin: 0 auto 3rem;
  padding: 2rem 1rem;
  background: var(--card);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

#impressum h2, #datenschutz h2 {
  text-align: center;
  margin-bottom: 1rem;
}

.impressum-box p, .datenschutz-box p {
  margin-bottom: 1rem;
  color: var(--text);
}

#impressum a, #datenschutz a {
  color: var(--brand-2);
  text-decoration: none;
}
#impressum a:hover, #datenschutz a:hover {
  text-decoration: underline;
}
/* Footer global einrücken, auch ohne .wrap */
footer > * {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1rem;
}
/* Einheitlicher Rand für Kontaktseite */
#kontakt {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1rem;
}
/* Hervorhebung des Meldeformular-Bereichs im Kontaktformular */
#kontakt form {
  background: linear-gradient(145deg, rgba(14,165,164,0.07), rgba(245,158,11,0.04));
  border: 1px solid rgba(14,165,164,0.25);
  border-left: 6px solid var(--brand-2);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  margin-top: 2rem;
  transition: box-shadow 0.3s ease;
}

#kontakt form:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}

/* Einheitliches Layout im Formular */
#kontakt label {
  font-weight: 600;
  color: var(--brand);
}

#kontakt .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

#kontakt textarea,
#kontakt select {
  width: 100%;
  box-sizing: border-box;
  border-radius: .6rem;
  border: 1px solid rgba(0,0,0,0.15);
  padding: .7rem .8rem;
  background: #fff;
}

#kontakt textarea:focus,
#kontakt select:focus {
  outline: none;
  border-color: var(--brand-2);
  box-shadow: 0 0 0 4px var(--ring);
}

#kontakt button {
  margin-top: 1rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: .8rem;
  padding: .8rem 1.2rem;
  box-shadow: var(--shadow);
  cursor: pointer;
}

#kontakt button:hover {
  transform: translateY(-1px);
}
/* Info-Box (Anonyme Meldung) */
.info-box {
  background: #e8f3ff;
  border-left: 4px solid #2c6fca;
  padding: 1rem 1.2rem;
  margin-bottom: 1.5rem;
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.info-box strong {
  color: #2c6fca;
}