/* NIS Modern (ergänzend/überschreibend zum bestehenden CSS) */
:root{
  --bg:#ffffff;
  --text:#111;
  --muted:#555;
  --line:#e6e6e6;
  --card:#fafafa;
  --max:980px;
  --radius:18px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--text); font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
a{color:inherit; text-decoration-thickness: from-font; text-underline-offset: .18em;}
a:hover{text-decoration-thickness: .14em;}

.skip-link{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;}
.skip-link:focus{left:12px; top:12px; width:auto; height:auto; padding:10px 12px; background:#fff; border:2px solid #000; border-radius:12px; z-index:9999;}

.container{max-width:var(--max); margin:0 auto; padding:16px;}

.site-header{position:relative; border-bottom:1px solid var(--line);}
.hero{position:relative; border-radius:var(--radius); overflow:hidden; background:#000;}
.hero img{display:block; width:100%; height:auto;}
.hero .overlay{position:absolute; inset:0; display:flex; align-items:flex-end; padding:18px; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55));}
.hero .brand{color:#fff;}
.hero .brand h1{margin:0; font-size:clamp(1.25rem, 2.6vw, 2rem); letter-spacing:.2px;}
.hero .brand p{margin:.25rem 0 0; color:rgba(255,255,255,.9);}

.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0;}
.logo{display:flex; gap:10px; align-items:center;}
.logo .title{display:flex; flex-direction:column;}
.logo .title strong{font-size:1.05rem;}
.logo .title span{font-size:.92rem; color:var(--muted);}

/* Accessible responsive navigation */
.nav-desktop{display:none;}
.nav-desktop ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end;}
.nav-desktop a{display:block; padding:10px 12px; border-radius:14px; text-decoration:none; border:1px solid transparent;}
.nav-desktop a:focus,.nav-desktop a:hover{background:var(--card); border-color:var(--line); outline:none;}
.nav-desktop a[aria-current="page"]{background:var(--card); font-weight:700; border-color:var(--line);} 

main{padding:18px 0 8px;}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px;}
.card h2{margin:0 0 10px; font-size:1.25rem;}
.card h3{margin:18px 0 8px; font-size:1.05rem;}
.muted{color:var(--muted);}
.lead{font-size:1.06rem;}

.grid{display:grid; gap:16px;}
@media (min-width: 860px){
  .grid.two{grid-template-columns: 1.2fr .8fr; align-items:start;}
}

.kv{display:flex; flex-wrap:wrap; gap:10px 18px; margin:10px 0 0; padding:0; list-style:none;}
.kv li{display:flex; gap:10px; align-items:flex-start;}
.kv .label{min-width:120px; color:var(--muted);}

table{width:100%; border-collapse:collapse;}
th,td{padding:10px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top;}

.site-footer{border-top:1px solid var(--line); margin-top:26px; padding:18px 0 26px;}
.footer-inner{display:flex; flex-wrap:wrap; gap:14px 20px; align-items:flex-start; justify-content:space-between;}
.small{font-size:.92rem; color:var(--muted);} 
.to-top{display:inline-block; padding:10px 12px; border:1px solid var(--line); border-radius:14px; text-decoration:none;}
.to-top:focus,.to-top:hover{background:var(--card);} 

/* Make legacy centered content look good */
.center{text-align:center;}
img{max-width:100%; height:auto;}

/* Prose / content cleanup */
.prose p{margin:0 0 10px;}
.prose p:last-child{margin-bottom:0;}
.prose hr{border:0; border-top:1px solid var(--line); margin:14px 0;}
.prose h2{margin:0 0 10px; font-size:1.25rem;}
.prose h3{margin:16px 0 8px; font-size:1.05rem;}
.prose ul, .prose ol{margin:0 0 10px 1.1em; padding:0;}
.prose li{margin:0 0 6px;}

.float-right{float:right; margin:0 0 10px 12px; max-width:110px;}
.float-right + hr{clear:both;}
.prose:after{content:""; display:block; clear:both;}

.note-inline{font-size:.92rem; color:var(--muted);}

/* Tables (e.g., Sprechzeiten) */
.hours-table{width:100%;border-collapse:collapse;margin:0.75rem 0;}
.hours-table caption{text-align:left;font-weight:700;padding:0.25rem 0;}
.hours-table th,.hours-table td{padding:0.5rem 0.6rem;border-bottom:1px solid rgba(0,0,0,.12);vertical-align:top;}
.hours-table thead th{border-bottom:2px solid rgba(0,0,0,.18);}
@media (max-width:520px){
  .hours-table thead{display:none;}
  .hours-table tr{display:block;margin:0.5rem 0;border:1px solid rgba(0,0,0,.12);border-radius:14px;padding:0.25rem 0.5rem;}
  .hours-table th[scope="row"]{display:block;border:0;padding:0.5rem 0.6rem;font-weight:800;}
  .hours-table td{display:flex;gap:0.5rem;border:0;padding:0.25rem 0.6rem;}
  .hours-table td:nth-of-type(1)::before{content:"Vormittag";font-weight:700;min-width:7.5rem;}
  .hours-table td:nth-of-type(2)::before{content:"Nachmittag";font-weight:700;min-width:7.5rem;}
}

/* Tables (e.g., Sprechzeiten) */
.hours-table{width:100%;border-collapse:collapse;margin:0.75rem 0;}
.hours-table caption{text-align:left;font-weight:700;padding:0.25rem 0;}
.hours-table th,.hours-table td{padding:0.5rem 0.6rem;border-bottom:1px solid rgba(0,0,0,.12);vertical-align:top;}
.hours-table thead th{border-bottom:2px solid rgba(0,0,0,.18);}

/* Horizontales Hauptmenü */
.menu-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-horizontal > li {
  margin: 0;
}
.menu-horizontal a {
  text-decoration: none;
  padding: 0.4rem 0.6rem;
}

/* Aktiver Menüpunkt */
.menu-horizontal a[aria-current="page"],
.menu-horizontal a.is-active{
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}

/* Mobile Hamburger (barrierefrei via <details>/<summary>) */
.nav-toggle{
  margin: 0;
}

.nav-summary::-webkit-details-marker{ display:none; }

.nav-icon{
  width: 18px;
  height: 12px;
  display: inline-block;
  position: relative;
}
.nav-icon::before,
.nav-icon::after,
.nav-icon{
  background: transparent;
}
.nav-icon::before,
.nav-icon::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:2px;
  background: currentColor;
  border-radius: 2px;
}
.nav-icon::before{ top:0; }
.nav-icon::after{ bottom:0; }
.nav-icon{
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  box-sizing: border-box;
}

/* Desktop: Menü horizontal sichtbar, Summary verstecken */
@media (min-width: 861px){
  .nav-toggle{ display: block; }
  
  .menu-horizontal{ display:flex; flex-direction:row; }
}

/* Mobile: Summary sichtbar, Liste vertikal; geschlossen = Liste aus */
@media (max-width: 860px){
  
  .menu-horizontal{
    display:flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.75rem;
  }
  .nav-toggle:not([open]) .menu-horizontal{ display:none; }
  .menu-horizontal a{
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
  }
  .menu-horizontal a[aria-current="page"],
  .menu-horizontal a.is-active{
    border-bottom: none;
    outline: 2px solid currentColor;
    outline-offset: 0;
  }
}

.footer-dsgvo{
  margin-top: 1rem;
  font-size: 0.85rem;
  color: #555;
  max-width: 60ch;
}
.footer-dsgvo a{
  text-decoration: underline;
}

/* --- Fix: Hamburger nur mobil anzeigen (Desktop ausblenden) --- */
.nav-toggle > .nav-summary{ display:none !important; }

@media (max-width: 860px){
  .nav-toggle > .nav-summary{ display:inline-flex !important; }
}
/* --- /Fix --- */

/* ADHS Highlight auf Startseite */
.adhs-highlight{
  border-left: 4px solid currentColor;
  background: #f7f9fb;
}
.adhs-highlight .lead{
  font-size: 1.05rem;
}

/* Button */
.btn{
  display: inline-block;
  padding: 0.55rem 0.9rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
}
.btn:hover,
.btn:focus{
  text-decoration: none;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.adhs-actions{ margin-top: 0.75rem; }

/* Titelseite: Logo-Grafik */
.site-header .logo{
  display:flex;
  align-items:center;
  gap: 0.75rem;
}
.site-logo{
  height: 44px;
  width: auto;
  display:block;
}
@media (max-width: 860px){
  .site-logo{ height: 36px; }
}

/* Hero Logo Overlay (zentriert) */
.hero{
  position: relative;
}
.hero-logo{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.hero-logo img{
  max-width: min(70%, 520px);
  height: auto;
}
@media (max-width: 860px){
  .hero-logo img{
    max-width: 85%;
  }
}

/* Hero Caption links unten */



/* =========================================
   Design-Feinschliff (Typo, Abstaende, UI)
   ========================================= */

/* Grundtypografie */
body{
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}
.prose p, .prose li{
  max-width: 75ch;
}
.prose h1, .prose h2, .prose h3{
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.prose h1{ margin-top: 0; }

/* Karten konsistenter */
.card{
  padding: 1.25rem;
}
@media (max-width: 860px){
  .card{ padding: 1rem; }
}

/* Links & Fokus */
a{
  text-underline-offset: 0.18em;
}
a:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 8px;
}

/* Buttons einheitlich (falls vorhanden) */
.btn{
  transition: transform 120ms ease;
}
.btn:active{
  transform: translateY(1px);
}

/* Hero: Lesbarkeit links unten verbessern (dezent) */
.hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 45%;
  background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0));
  pointer-events:none;
}


/* Seiten-Overlay (Seitentitel) */
.page-hero{
  position: relative;
  margin-bottom: 2rem;
  padding: 3rem 1.25rem 1.75rem;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.25)
  );
  color: #fff;
  border-radius: 12px;
}
.page-hero h1{
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.2;
}
@media (max-width: 860px){
  .page-hero{
    padding: 2rem 1rem 1.25rem;
    border-radius: 10px;
  }
}

/* Unterseiten: Overlay nur mit Seitentitel (ohne Keyvisual) */
.page-hero-simple{
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.25));
}

/* Primary Button */
.btn-primary{
  display:inline-block;
  padding:0.7em 1.2em;
  background:#1f4e79;
  color:#fff;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
}
.btn-primary:hover,
.btn-primary:focus{
  background:#163a59;
}

/* =========================
   Footer (Keyvisual-Hintergrund)
   ========================= */
.site-footer{
  position: relative;
  margin-top: 3rem;
  padding: 2.5rem 0 1.25rem;
  color: rgba(255,255,255,0.92);
  background: url("/designs/design1005/color5/images/keyvisual.jpg") center/cover no-repeat;
  background-image: image-set(
    url("/designs/design1005/color5/images/keyvisual.avif") type("image/avif"),
    url("/designs/design1005/color5/images/keyvisual.webp") type("image/webp"),
    url("/designs/design1005/color5/images/keyvisual.jpg") type("image/jpeg")
  );
}
.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.68);
  pointer-events:none;
}
.site-footer *{
  position: relative;
}
.site-footer a{
  color: rgba(255,255,255,0.95);
  text-decoration: none;
}
.site-footer a:hover,
.site-footer a:focus{
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.site-footer .container{
  width: min(1100px, calc(100% - 2rem));
  margin: 0 auto;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: start;
}
.footer-title{
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 0.6rem;
  color: #fff;
}
.footer-text{
  margin: 0 0 0.85rem;
  color: rgba(255,255,255,0.88);
}
.footer-links{
  margin: 0;
  color: rgba(255,255,255,0.92);
}
.footer-right{
  text-align: right;
}
.footer-small{
  font-size: 0.95rem;
  color: rgba(255,255,255,0.82);
}
.footer-bottom{
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.22);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.to-top{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 10px;
}
.to-top:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 3px;
}
@media (max-width: 860px){
  .footer-grid{
    grid-template-columns: 1fr;
  }
  .footer-right{
    text-align: left;
  }
  .footer-bottom{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Mobile Fix: Untertitel nicht über dem Keyvisual */
@media (max-width: 860px){
  .hero .hero-subtitle,
  .hero .subtitle,
  .hero .tagline{
    position: static;
    display: block;
    margin-top: 0.75rem;
    background: rgba(0,0,0,0.55);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
  }
}


/* =========================
   Navigation (bereinigt & responsiv)
   ========================= */

/* Desktop-Navigation (Standard) */
.nav-wrap{ display:flex; align-items:center; gap:0.75rem; }
#site-nav.nav-desktop{ display:block; }
#site-nav .nav-list{
  list-style:none;
  display:flex;
  gap: 1rem;
  margin:0;
  padding:0;
  align-items:center;
  flex-wrap: wrap;
}
#site-nav .nav-list a{
  display:inline-block;
  padding: 0.55rem 0.8rem;
  text-decoration:none;
  border-radius: 10px;
}
#site-nav .nav-list a.is-active{
  font-weight:700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Mobile-Menü über Hamburger (JS: body.nav-open) */
.nav-toggle{
  display:none;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 10px;
  padding: 0.55rem 0.6rem;
  line-height: 0;
}
.nav-toggle:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.nav-toggle-bar{
  display:block;
  width: 22px;
  height: 2px;
  background: currentColor;
  margin: 4px 0;
}

/* Details-Menü (legacy) nicht verwenden, um Doppel-Menüs zu vermeiden */
.nav-mobile{ display:none !important; }

/* Breakpoints */
@media (min-width: 900px){
  .nav-toggle{ display:none !important; }
  #site-nav.nav-desktop{ display:block !important; }
}

@media (max-width: 899px){
  .nav-toggle{ display:inline-flex !important; align-items:center; justify-content:center; }
  /* Desktop-Navigation wird zum ausklappbaren Panel */
  #site-nav.nav-desktop{
    display:none;
    width:100%;
    margin-top: 0.75rem;
  }
  body.nav-open #site-nav.nav-desktop{ display:block; }

  #site-nav .nav-list{
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  #site-nav .nav-list a{
    width: 100%;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    background: rgba(0,0,0,0.04);
  }
}

/* Entfernt ovale Umrandung/Look bei Nav-Links */
#site-nav .nav-list a{
  box-shadow: none;
}



/* =========================
   Team (Startseite)
   ========================= */
.team-intro{
  margin-top: 0.25rem;
  margin-bottom: 1rem;
}
.team-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}
.team-member{
  padding: 0.9rem 1rem;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  background: rgba(0,0,0,0.02);
}
.team-name{
  margin: 0 0 0.25rem;
  font-weight: 700;
}
.team-role{
  margin: 0;
  color: rgba(0,0,0,0.75);
}
@media (max-width: 860px){
  .team-grid{
    grid-template-columns: 1fr;
  }
  .team-member{
    padding: 0.85rem 0.95rem;
  }
}


/* === Hero Subtitle: optimiert & "safer" auf sehr kleinen Screens === */
/* Desktop/normal: Badge unten rechts im Bild */

/* Untertitel unter dem Bild (standardmäßig aus) */
/* Mobile: etwas kleiner */


/* "Safer": auf sehr kleinen Geräten Untertitel unter das Bild verschieben */
@media (max-width: 380px){
.hero-caption-below{
    display: block;
    margin: .6rem 1rem 0;
    text-align: right;
  }
}

/* === Hero Subtitle: ohne Hintergrund & kleinere Schrift (Override) === */
/* Mobile: noch etwas kleiner */


/* Sehr kleine Geräte: Subtitle unter dem Bild statt über dem Bild */
@media (max-width: 380px){
.hero-caption-below{
    display: block !important;
    font-size: 0.8rem !important;
    margin-top: .5rem !important;
    text-align: center !important;
    color: #444 !important;
    text-shadow: none !important;
  }
}


/* === Mobile Override: Hero-Subtitle ohne Hintergrund & kleiner === */


/* Untertitel unter dem Bild (safer) ebenfalls ohne Hintergrund */
@media (max-width: 380px){
.hero-caption-below .hero-subtitle{
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
}



/* === FINAL FIX: Hero Subtitle Mobile (force clean) === */
@media (max-width: 900px){
  .hero .hero-caption,
}

/* Ultra small: move below image */
@media (max-width: 380px){
.hero-caption-below{
    display:block !important;
    background:none !important;
    font-size:0.75rem !important;
    color:#444 !important;
    text-shadow:none !important;
    text-align:center;
    margin-top:.4rem;
  }
}




/* ===============================
   HERO SUBTITLE – DESKTOP IN IMAGE, MOBILE BELOW
   =============================== */

/* Desktop & Tablet: subtitle inside hero image */
@media (min-width: 901px){
  .hero-caption{
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
    left: auto;
    z-index: 3;

    display: block;

    background: transparent;
    padding: 0;
    box-shadow: none;
    backdrop-filter: none;

    font-size: 0.95rem;
    line-height: 1.2;
    text-align: right;

    color: #f5f5f5;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
  }

  .hero-caption-below{
    display: none;
  }
}

/* Mobile: subtitle below image ONLY */
@media (max-width: 900px){
  .hero-caption{
    display: none;
  }

  .hero-caption-below{
    display: block;
    margin-top: .5rem;
    text-align: center;

    background: transparent;
    padding: 0;

    font-size: 0.8rem;
    line-height: 1.2;
    color: #444;
    text-shadow: none;
  }
}


/* Header fix: prevent location text from wrapping */
.nowrap {
  white-space: nowrap;
}

header, .header, .site-header {
  align-items: center;
}


/* Header fix v2: keep address in one line on desktop */
@media (min-width: 768px){
  .site-address, .brand-address, .header-address {
    white-space: nowrap;
  }
}


/* Header fix v3: keep address (incl. Mannheim) on one line on desktop */
@media (min-width: 900px){
  .site-header .logo .muted{
    white-space: nowrap;
  }
}

/* === Footer contrast overrides (WAVE fix) ===
   Ziel: WCAG 2.1 AA Kontrast für Footer-Text/Links inkl. Hover/Fokus sicherstellen.
*/
footer,
footer p,
footer li,
footer small,
footer span,
footer .footer-links,
footer .footer-right,
footer .footer-left {
  color: #f2f2f2 !important;
}

footer a,
footer a:visited {
  color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

footer a:hover,
footer a:focus,
footer a:focus-visible,
footer a:active {
  color: #ffffff !important;
  text-decoration: underline;
}

/* Separatoren (z.B. "|") lesbar halten */
footer .separator,
footer .sep,
footer .divider {
  color: #f2f2f2 !important;
}

/* === Footer background + title contrast fix ===
   Fix: WAVE reports low contrast on footer title because effective background is white.
   We set a dark footer background so light footer text meets WCAG contrast.
*/
footer {
  background-color: #2b2b2b !important;
}
/* Ensure footer title remains high-contrast */
footer .footer-title {
  color: #ffffff !important;
}

/* === Footer inner background reset (WAVE fix) ===
   Some footer elements have an explicit white background (even inline).
   Reset inner backgrounds to transparent so the dark footer background applies everywhere.
*/
footer *,
footer p,
footer ul,
footer li,
footer .footer-title,
footer .footer-links,
footer .footer-left,
footer .footer-right {
  background-color: transparent !important;
}