/* =========================================================
   GEÜ-Look (aufgeräumt, größer, Hero-Bild stärker)
   ========================================================= */

/* ---------- Variables ---------- */
:root{
  --bg: #ffffff;
  --surface:#ffffff;
  --text:#1a1a1a;
  --muted:#5f6368;

  --brand:#b11217;     /* GEÜ-rot */
  --brand-2:#7d0d10;
  --accent:#f59e0b;

  --ok:#0f766e;
  --warn:#b45309;
  --danger:#b11217;

  --card:#ffffff;
  --line: rgba(0,0,0,.10);
  --ring: rgba(177,18,23,.22);

  --radius:16px;
  --shadow: 0 12px 26px rgba(0,0,0,.10);
  --shadow-soft: 0 8px 18px rgba(0,0,0,.08);

  --maxw: 1120px;

  --h1: clamp(2.4rem, 5vw, 3.8rem);
  --h2: clamp(1.6rem, 3.2vw, 2.2rem);
  --lead: 1.25rem;
}

/* Dark mode: optional, ruhig */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1115; --surface:#12151b; --text:#f4f5f7; --muted:#b3b8c2;
    --card:#12151b; --line: rgba(255,255,255,.12);
    --brand:#e23a3f; --brand-2:#b11217; --accent:#fbbf24;
    --shadow: 0 16px 32px rgba(0,0,0,.45);
    --shadow-soft: 0 12px 22px rgba(0,0,0,.40);
    --ring: rgba(226,58,63,.28);
  }
  img{opacity:.98}
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  line-height:1.65;

  background:
    radial-gradient(900px 320px at 10% -10%, rgba(177,18,23,.10), transparent),
    radial-gradient(700px 260px at 100% 0%, rgba(0,0,0,.04), transparent),
    #f6f7f9;
  background-attachment: fixed;
}

img{max-width:100%; height:auto; display:block}

a{
  color: var(--brand);
  text-decoration-thickness: .1em;
  text-underline-offset: .2em;
}
a:hover{color: var(--brand-2)}

.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}
.muted{color:var(--muted)}

.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:1rem; background:var(--brand); color:#fff; padding:.6rem .8rem; border-radius:.6rem; z-index:1000}

/* ---------- Header / Nav ---------- */
header{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark){
  header{background: rgba(18,21,27,.82)}
}

.nav{display:flex; align-items:center; justify-content:space-between; padding:.85rem 0; gap:1rem}

.brand{display:flex; gap:.6rem; align-items:center; font-weight:900; letter-spacing:.2px}
.brand .logo{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:12px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color:white;
  box-shadow: var(--shadow-soft);
}

nav ul{display:flex; gap:1rem; list-style:none; margin:0; padding:0; flex-wrap:wrap}
nav a{font-weight:800; color:var(--text); text-decoration:none}
nav a:hover{color:var(--brand)}
nav a[aria-current="page"]{color:var(--brand)}

/* ---------- Typography ---------- */
h1{font-size:var(--h1); line-height:1.05; margin:.5rem 0 1rem; letter-spacing:-.02em}
h2{font-size:var(--h2); line-height:1.15; margin:0 0 1rem; letter-spacing:-.01em}
h3{font-size:1.25rem; margin:.2rem 0 .6rem}
.lead{font-size:var(--lead); color:var(--muted); max-width: 48rem}

/* ---------- Sections ---------- */
section{padding: 2.8rem 0}

/* ---------- HERO (Bild stärker + nur oberer Bereich) ---------- */
.hero{
  position:relative;
  isolation:isolate;

  background-image:
    /* stärkeres Bild: weniger Weiß, aber Text bleibt lesbar */
    linear-gradient(
      to right,
      rgba(255,255,255,0.92) 0%,
      rgba(255,255,255,0.78) 42%,
      rgba(255,255,255,0.55) 70%,
      rgba(255,255,255,0.30) 100%
    ),
    url("images/geue-gebaeude.jpg");

  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
  padding: 5.2rem 0 4.2rem;
}

.hero .wrap{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:2rem;
  align-items:start;
}

.tag{
  display:inline-block;
  background: rgba(255,255,255,.78);
  padding:.35rem .7rem;
  border-radius:999px;
  border:1px solid var(--line);
}

/* Optional: rechter Kasten im Hero (Kontaktkarte) */
.hero aside{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  padding: 1.2rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
@media (prefers-color-scheme: dark){
  .hero aside{background: rgba(18,21,27,.86)}
}
.badge{font-weight:900; color:var(--brand)}

/* ---------- “Auf einen Blick” soll unter Hero kommen ---------- */
#ueberblick{padding-top: 2.2rem}
#ueberblick h2{margin-bottom:1.2rem}

/* ---------- Grid / Cards (größer) ---------- */
.grid{display:grid; gap:1.2rem}
.grid.cards{grid-template-columns: repeat(auto-fit, minmax(300px,1fr))}

.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(177,18,23,.18);
}

/* Klickbare Karten */
.card-link{
  text-decoration:none;
  color:inherit;
  display:block;
}
.card-link .mehr{
  display:inline-block;
  margin-top:1rem;
  font-weight:900;
  color: var(--brand);
}

/* Listen */
.list-check{padding-left:1.2rem}
.list-check li{margin:.45rem 0}

/* ---------- Buttons / Links ---------- */
.button,
button{
  appearance:none;
  border:0;
  padding:.9rem 1.2rem;
  border-radius: .95rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color:white;
  box-shadow: 0 12px 20px rgba(177,18,23,.22);
  cursor:pointer;
  transition: transform .15s ease, filter .15s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  text-decoration:none;
}
.button:hover,
button:hover{transform: translateY(-1px); filter: brightness(1.02)}
.button:active,
button:active{transform: translateY(0)}

.button.secondary{
  background: rgba(255,255,255,.9);
  color: var(--text);
  border:1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

/* ---------- Timeline ---------- */
.timeline{position:relative; padding-left:0; margin:0; list-style:none}
.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.4rem;
  margin:1.1rem 0;
}
.dot{
  position:absolute; left:0; top:0.25rem;
  width:18px; height:18px; border-radius:999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 0 0 4px rgba(177,18,23,.14);
}

/* ---------- Tables ---------- */
table{
  width:100%;
  border-collapse:collapse;
  font-size: .98rem;
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
}
th, td{border-bottom:1px solid var(--line); padding:.75rem .65rem; text-align:left}
th{font-weight:900; background: rgba(0,0,0,.03)}
caption{caption-side:bottom; color:var(--muted); padding-top:.6rem}

/* ---------- Forms ---------- */
form{display:grid; gap:1rem}
label{font-weight:800}
input, textarea, select{
  border:1px solid rgba(0,0,0,.16);
  background: rgba(255,255,255,.92);
  padding:.9rem 1rem;
  border-radius: .9rem;
  color: var(--text);
  font-size:1rem;
}
@media (prefers-color-scheme: dark){
  input, textarea, select{background: rgba(255,255,255,.03); border-color: var(--line)}
}
input:focus, textarea:focus, select:focus{
  outline:none;
  box-shadow:0 0 0 4px var(--ring);
  border-color: var(--brand);
}
textarea{resize: vertical}

.row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}

/* Nur Nachrichtenfeld groß */
#beschreibung{min-height: 240px}

/* ---------- Meldungskasten (Formular-Karte) ---------- */
.meldung-card{
  border-left: 6px solid var(--brand);
  background: linear-gradient(145deg, rgba(177,18,23,.06), rgba(0,0,0,.02));
}

/* Success/Error Boxen */
.message{
  display:none; /* per JS einblenden */
  padding: .95rem 1rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  border: 1px solid var(--line);
  font-weight: 700;
}
.message-success{
  background: rgba(15,118,110,.10);
  border-color: rgba(15,118,110,.25);
}
.message-error{
  background: rgba(177,18,23,.08);
  border-color: rgba(177,18,23,.20);
}
.message.show{
  display:block;
}

/* ---------- Info Box ---------- */
.info-box{
  background: rgba(177,18,23,.06);
  border-left: 4px solid var(--brand);
  padding: 1rem 1.2rem;
  margin: 0;
  border-radius: 12px;
  font-size: 1rem;
  line-height: 1.55;
}
.info-box strong{color: var(--brand)}

/* ---------- Kontaktkarte / Icons ---------- */
.hero-quick{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem}
.pill{
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .8rem;
  border-radius:999px;
  background: rgba(255,255,255,.78);
  border:1px solid var(--line);
}
.dot-mini{width:10px; height:10px; border-radius:999px; background: var(--brand); box-shadow: 0 0 0 4px rgba(177,18,23,.12)}

.contact-card .contact-head{display:flex; gap:.9rem; align-items:center; margin-bottom:1rem}
.avatar{
  width:56px; height:56px; border-radius:16px;
  display:grid; place-items:center;
  font-weight:900; color:white;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: var(--shadow-soft);
}
.contact-actions{display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin:1rem 0}
.icon-link{
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1rem;
  border-radius: .95rem;
  text-decoration:none;
  font-weight:900;
  border:1px solid var(--line);
  background: rgba(255,255,255,.92);
  color: var(--text);
}
.icon-link:hover{border-color: rgba(177,18,23,.35); box-shadow: 0 0 0 4px var(--ring)}
.icon{width:20px; height:20px}
.contact-note{
  padding: .9rem 1rem;
  border-radius: .95rem;
  background: rgba(177,18,23,.06);
  border: 1px solid rgba(177,18,23,.18);
}

/* ---------- Termin Buttons (Ja/Nein) ---------- */
.termin-buttons{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:.4rem}
.termin-btn{
  padding:.7rem 1.1rem;
  border-radius: 12px;
  border:0;
  font-weight:900;
  cursor:pointer;
}
.termin-btn-outline{
  background: rgba(255,255,255,.92);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.termin-btn.active{box-shadow:0 0 0 4px var(--ring)}

/* ---------- Footer ---------- */
footer{
  padding:2.2rem 0;
  color:var(--muted);
  border-top:1px solid var(--line);
}
footer > *{max-width: var(--maxw); margin: 0 auto; padding: 0 1rem}

/* ---------- Page containers (Unterseiten) ---------- */
#massnahmen,
#sanktionsverfahren,
#kontakt,
#impressum,
#datenschutz,
#sofortmeldung{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .hero .wrap{grid-template-columns: 1fr}
  .row{grid-template-columns: 1fr}
  .contact-actions{grid-template-columns:1fr}
  section{padding: 2.2rem 0}
  .lead{font-size: 1.15rem}
}

/* ---------- Print ---------- */
@media print{
  header, .skip {display:none}
  body{background:#fff; color:#000}
  a{color:#000; text-decoration:none}
}
/* =========================
   Modernere Navigation (ohne HTML-Änderung)
   ========================= */

/* Abstand & Ausrichtung bleibt über .nav */
nav ul{
  display:flex;
  gap:.5rem;
  list-style:none;
  margin:0;
  padding:0;
  flex-wrap:wrap;
  align-items:center;
}

/* Pill-Links */
nav a{
  display:inline-flex;
  align-items:center;
  padding:.55rem .9rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  color:var(--text);
  border:1px solid transparent;
  background: transparent;
  transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

/* Hover */
nav a:hover{
  background: rgba(177,18,23,.08);
  border-color: rgba(177,18,23,.18);
  color: var(--text);
  transform: translateY(-1px);
}

/* Aktive Seite */
nav a[aria-current="page"]{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 18px rgba(177,18,23,.22);
}

/* Optional: Fokus sichtbar (Tastatur) */
nav a:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px var(--ring);
  border-color: rgba(177,18,23,.25);
}

/* Mobile: etwas größere Klickflächen */
@media (max-width: 820px){
  nav a{
    padding:.7rem 1rem;
  }
}
/* =========================
   Moderne Navigation (Desktop + Mobile)
   ========================= */
.topnav{display:flex; align-items:center; gap:.75rem; position:relative}

.nav-toggle{
  display:none;
  width:44px; height:44px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-soft);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--text);
  cursor:pointer;
}
@media (prefers-color-scheme: dark){
  .nav-toggle{background: rgba(18,21,27,.86)}
}

.nav-list{
  display:flex;
  gap:.5rem;
  list-style:none;
  margin:0;
  padding:0;
  align-items:center;
  flex-wrap:wrap;
}

/* Pill-Links */
.nav-list a{
  display:inline-flex;
  align-items:center;
  padding:.55rem .9rem;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 900;
  color: var(--text);
  border:1px solid transparent;
  background: transparent;
  transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.nav-list a:hover{
  background: rgba(177,18,23,.08);
  border-color: rgba(177,18,23,.18);
  transform: translateY(-1px);
}

.nav-list a:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px var(--ring);
  border-color: rgba(177,18,23,.25);
}

/* Active Page */
.nav-list a[aria-current="page"]{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: white;
  border-color: transparent;
  box-shadow: 0 10px 18px rgba(177,18,23,.22);
}

/* Mobile Dropdown */
@media (max-width: 820px){
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center}

  .nav-list{
    position:absolute;
    right: 0;
    top: 52px;
    width: min(340px, calc(100vw - 2rem));
    flex-direction:column;
    align-items:stretch;
    padding: .75rem;
    border-radius: 16px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.96);
    box-shadow: var(--shadow);
    display:none;
  }
  @media (prefers-color-scheme: dark){
    .nav-list{background: rgba(18,21,27,.92)}
  }

  .nav-list a{
    border-radius: 14px;
    padding: .75rem .9rem;
  }

  .topnav.open .nav-list{display:flex}
}
/* =========================
   SafeSpace Haupttitel (Hero)
   ========================= */
.hero h1{
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: .6rem;
}

.hero .lead{
  font-size: 1.35rem;
  max-width: 720px;
}

/* Optional: SafeSpace farblich betonen */
.hero h1 span{
  color: var(--brand);
}
/* =========================
   Auf einen Blick Sektion
   ========================= */
#ueberblick{
  padding-top: 2rem;
  padding-bottom: 3rem;
}

#ueberblick h2{
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 1.5rem;
  font-weight: 900;
}

/* Karten größer und schöner */
#ueberblick .card{
  padding: 2rem;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}

#ueberblick .card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
}

/* Überschrift in Karten */
#ueberblick .card h2,
#ueberblick .card h3{
  font-size: 1.4rem;
  margin-bottom: .6rem;
}
.hero{
  padding: 6rem 0 5rem;
}

#ueberblick{
  margin-top: -1rem;
}
/* =========================
   MELDEKASTEN FIX
   ========================= */

.meldung-card{
  padding: 2rem;
  border-left: 6px solid var(--brand);
  background: linear-gradient(145deg, rgba(177,18,23,.05), rgba(0,0,0,.02));
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

/* Formular-Layout */
#kontakt-form{
  display: grid;
  gap: 1.2rem;
}

#kontakt-form input,
#kontakt-form select,
#kontakt-form textarea{
  width: 100%;
  box-sizing: border-box;
}

/* Nur Haupt-Nachrichtenfeld groß */
#beschreibung{
  min-height: 240px;
}

/* Hinweisbox */
.termin-hinweis{
  margin-top: .8rem;
  padding: .8rem 1rem;
  border-radius: 12px;
  font-weight: 600;
  display: none;
}

.termin-hinweis.ja{
  background: rgba(177,18,23,.08);
  border-left: 4px solid var(--brand);
}

.termin-hinweis.nein{
  background: rgba(0,0,0,.05);
  border-left: 4px solid #444;
}

/* =========================
   SUCHLEISTE FIX
   ========================= */

.search-box{
  display:flex;
  align-items:center;
  gap:.5rem;
}

.search-box input{
  border-radius: 999px;
  padding:.6rem 1rem;
  border:1px solid var(--line);
}

.search-box button{
  padding:.6rem 1rem;
  border-radius:999px;
}


/* ===== SafeSpace final unified overrides ===== */
:root{
  --subhero-h: clamp(220px, 34vw, 330px);
}

header .nav-list a{
  border-radius: 10px;
  padding: .35rem .55rem;
}
header .nav-list a:hover,
header .nav-list a[aria-current="page"]{
  background: rgba(177,18,23,.08);
}

footer{
  margin-top: 2rem;
  padding: 1.2rem 0;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.88);
}
@media (prefers-color-scheme: dark){
  footer{background: rgba(18,21,27,.85)}
}

main section .wrap > h1,
main section .wrap > h2{
  margin-bottom: 1rem;
}

.grid.cards{
  align-items: stretch;
}
.grid.cards > .card,
.grid.cards > article.card,
.grid.cards > a.card-link{
  height: 100%;
}

.card,
details.stufe,
.info-box{
  overflow: hidden;
}

.card p,
.card li,
.card a,
.info-box,
.contact-note,
details.stufe p,
details.stufe summary{
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.card h2,
.card h3{
  line-height: 1.25;
}

.subpage-hero{
  position: relative;
  isolation: isolate;
  background-image:
    linear-gradient(
      to right,
      rgba(255,255,255,0.94) 0%,
      rgba(255,255,255,0.82) 48%,
      rgba(255,255,255,0.62) 100%
    ),
    url("images/geue-gebaeude.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: var(--subhero-h);
  padding: 2.4rem 0 2rem;
}
.subpage-hero .wrap{
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(260px,.85fr);
  gap: 1.3rem;
  align-items: center;
}
.subpage-hero .hero-panel{
  background: rgba(255,255,255,.88);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.1rem 1.15rem;
}
.subpage-hero.compact .wrap{
  grid-template-columns: 1fr;
}
@media (prefers-color-scheme: dark){
  .subpage-hero{
    background-image:
      linear-gradient(
        to right,
        rgba(15,17,21,0.92) 0%,
        rgba(15,17,21,0.78) 48%,
        rgba(15,17,21,0.56) 100%
      ),
      url("images/geue-gebaeude.jpg");
  }
  .subpage-hero .hero-panel{background: rgba(18,21,27,.82)}
}
.page-block{
  padding: 2.2rem 0;
}
.page-block:first-of-type{
  padding-top: 1.4rem;
}

.contact-card,
.hero-panel,
.card,
.info-box,
details.stufe{
  backdrop-filter: blur(2px);
}

.stufen{
  display: grid;
  gap: 1rem;
}
details.stufe{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1rem 1.1rem;
}
details.stufe summary{
  cursor: pointer;
  font-weight: 900;
}
details.stufe[open]{
  box-shadow: var(--shadow);
}

.topnav.open .nav-list{
  display: grid;
}
@media (max-width: 860px){
  .subpage-hero .wrap,
  .hero .wrap{
    grid-template-columns: 1fr;
  }
  .topnav .nav-list{
    display: none;
    width: 100%;
    margin-top: .8rem;
  }
  .topnav.open .nav-list{
    display: grid;
  }
  .nav{
    align-items: flex-start;
  }
}

.hero-quick,
.contact-actions{
  display: grid;
  gap: .75rem;
}
.hero-quick .pill{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: rgba(255,255,255,.85);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .55rem .85rem;
  margin: .35rem .45rem .35rem 0;
}
.contact-head{
  display: flex;
  gap: .9rem;
  align-items: center;
}
.avatar{
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}
.contact-actions .icon-link{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  font-weight: 800;
}
.contact-note{
  margin-top: 1rem;
}

.content-stack{
  display: grid;
  gap: 1rem;
}

body .wrap table,
body .wrap .card,
body .wrap details.stufe{
  max-width: 100%;
}


/* Runde 2 Korrekturen */
.grid.cards{
  gap: 1.6rem !important;
}
section .grid.cards{
  margin-top: 1rem;
}
.wrap .content-stack{
  gap: 1.4rem !important;
}
.subpage-hero{
  min-height: clamp(220px, 30vw, 300px) !important;
}
.subpage-hero .wrap{
  align-items: end;
}
.subpage-hero h1{
  margin-bottom: .6rem;
}
.subpage-hero .hero-panel,
.subpage-hero .card.contact-card{
  max-width: 420px;
  justify-self: end;
}
@media (max-width: 860px){
  .subpage-hero .hero-panel,
  .subpage-hero .card.contact-card{
    max-width: none;
    justify-self: stretch;
  }
}
.card,
.info-box,
details.stufe{
  padding: 1.2rem 1.25rem !important;
}
.card h2,.card h3{
  margin-bottom: .65rem;
}
.card p:last-child,
.card ul:last-child{
  margin-bottom: 0;
}
.contact-card{
  background: rgba(255,255,255,.92) !important;
}
@media (prefers-color-scheme: dark){
  .contact-card{
    background: rgba(18,21,27,.88) !important;
  }
}


.vertraulich-box{
  border-left: 6px solid var(--brand);
  background: linear-gradient(145deg, rgba(177,18,23,.08), rgba(255,255,255,.9));
}

.vertrauenshinweis{
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(177,18,23,.05);
  line-height: 1.6;
  font-weight: 600;
}


/* =========================
   Beratungsteam – offizieller Listenstil
   ========================= */
.team-overview{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}

.team-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
  padding:1.1rem 1.25rem;
  border-bottom:1px solid rgba(15,23,42,.08);
}

.team-row:last-child{
  border-bottom:none;
}

.team-name h3{
  margin:0 0 .2rem;
  font-size:1.05rem;
}

.team-name p{
  margin:0;
  color:#475569;
}

.team-action{
  flex-shrink:0;
}

.button-secondary{
  background:transparent;
  color:inherit;
  border:1px solid rgba(15,23,42,.18);
}

.button-secondary:hover{
  transform:none;
  box-shadow:none;
}

@media (max-width: 760px){
  .team-row{
    flex-direction:column;
    align-items:flex-start;
  }

  .team-action{
    width:100%;
  }

  .team-action .button{
    display:inline-flex;
    width:100%;
    justify-content:center;
  }
}