/* =============================================================================
   Praxisgemeinschaft Friesoythe — Prototyp (Rebranding 2026)
   Marke: Manta + Strömung · Navy/Cyan · Kumbh Sans + Inter
   Namespace-frei, self-hosted Fonts (DSGVO). Autor: MyBeeWeb.
   ============================================================================= */

/* ---------- FONTS (variable, self-hosted) ---------- */
@font-face{
  font-family:'Kumbh Sans';
  src:url('../fonts/KumbhSans.ttf') format('truetype-variations');
  font-weight:100 900; font-display:swap; font-style:normal;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/Inter.ttf') format('truetype-variations');
  font-weight:100 900; font-display:swap; font-style:normal;
}

/* ---------- TOKENS ---------- */
:root{
  --navy:#1C2B4E;
  --navy-deep:#141F38;
  --cyan:#09A9CD;
  --sea:#006C84;
  --accent:#00697F;          /* interaktiv, AA auf weiß (5.5:1) */
  --accent-hover:#00505f;
  --sky:#ECF5FC;
  --sky-soft:#F5FAFE;
  --white:#fff;

  --ink:#1C2B4E;             /* Überschriften */
  --body:#2B3A4C;            /* Fließtext (AA) */
  --muted:#5A6B7C;
  --on-dark:#EAF3FA;
  --on-dark-muted:#AFC6DA;
  --line:#DCEAF3;
  --line-strong:#C3D6E5;

  --kumbh:'Kumbh Sans', system-ui, sans-serif;
  --inter:'Inter', system-ui, sans-serif;

  --fs-display:clamp(2.6rem, 1.7rem + 4vw, 4.6rem);
  --fs-h2:clamp(1.85rem, 1.3rem + 2.2vw, 2.9rem);
  --fs-h3:clamp(1.25rem, 1.05rem + 0.8vw, 1.55rem);
  --fs-lead:clamp(1.06rem, 1rem + 0.35vw, 1.3rem);
  --fs-base:1.0625rem;
  --fs-sm:0.9rem;
  --fs-xs:0.78rem;

  --sp:1rem;
  --radius:14px;
  --radius-lg:24px;
  --radius-pill:999px;
  --wrap:1200px;

  --shadow-sm:0 2px 8px rgba(28,43,78,.06);
  --shadow-md:0 10px 30px rgba(28,43,78,.10);
  --shadow-lg:0 26px 60px rgba(28,43,78,.16);

  --ease:cubic-bezier(.22,.61,.36,1);
  --t:.35s var(--ease);
}

/* ---------- RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px}
body{
  margin:0;
  font-family:var(--inter);
  font-size:var(--fs-base);
  line-height:1.65;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--kumbh); color:var(--ink); line-height:1.1; margin:0; font-weight:700; letter-spacing:-.01em; text-wrap:balance}
p{margin:0}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-hover)}
img,svg{max-width:100%; display:block}
ul{margin:0; padding:0; list-style:none}

:where(a,button,input,textarea,[tabindex]):focus-visible{
  outline:2.5px solid var(--sea); outline-offset:3px; border-radius:6px;
}
.skip-link{position:absolute; left:-999px; top:0; z-index:200; background:var(--navy); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 10px 0}
.skip-link:focus{left:0; color:#fff}

/* ---------- LAYOUT ---------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2rem)}
.section{padding-block:clamp(3.5rem,7vw,7rem); position:relative}
.section--sky{background:var(--sky); }
.section--navy{background:var(--navy); color:var(--on-dark); overflow:hidden}
.section--navy h2{color:#fff}

.eyebrow{
  font-family:var(--inter); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  margin:0 0 .9rem; display:flex; align-items:center; gap:.6rem;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--cyan); border-radius:2px}
.eyebrow--light{color:var(--cyan)}
.eyebrow--light::before{background:var(--cyan)}

.section__head{max-width:60ch; margin-bottom:clamp(2rem,4vw,3.4rem)}
.section__head h2{font-size:var(--fs-h2)}
.lead{font-size:var(--fs-lead); color:var(--muted); line-height:1.55; margin-top:1rem}
.lead--light{color:var(--on-dark-muted)}

/* ---------- BUTTONS ---------- */
.btn{
  --bg:var(--navy); --fg:#fff; --bd:var(--navy);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--kumbh); font-weight:600; font-size:1rem; line-height:1;
  padding:.95rem 1.6rem; min-height:52px; border-radius:var(--radius-pill);
  border:1.5px solid var(--bd); background:var(--bg); color:var(--fg);
  cursor:pointer; text-decoration:none; transition:transform var(--t), box-shadow var(--t), background var(--t), color var(--t);
}
.btn .ic{width:18px; height:18px}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); color:var(--fg)}
.btn--primary{--bg:var(--navy); --fg:#fff; --bd:var(--navy)}
.btn--primary:hover{--bg:var(--navy-deep)}
.btn--ghost{--bg:transparent; --fg:var(--navy); --bd:var(--line-strong)}
.btn--ghost:hover{--bd:var(--navy); background:var(--white)}
.btn--on-dark{--bg:#fff; --fg:var(--navy); --bd:#fff}
.btn--on-dark:hover{--bg:var(--sky)}
.btn--block{width:100%}

/* ---------- PROTO FLAG ---------- */
.proto-flag{position:fixed; z-index:150; right:12px; bottom:12px; background:rgba(28,43,78,.9); color:#fff;
  font:600 11px/1 var(--inter); letter-spacing:.08em; text-transform:uppercase; padding:7px 12px; border-radius:999px; pointer-events:none}

/* ---------- TOPBAR ---------- */
.topbar{background:var(--navy); color:var(--on-dark); font-size:var(--fs-sm)}
.topbar__inner{display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:42px; flex-wrap:wrap}
.topbar a{color:var(--on-dark); display:inline-flex; align-items:center; gap:.4rem}
.topbar a:hover{color:#fff}
.topbar__loc{display:inline-flex; align-items:center; gap:.45rem; color:var(--on-dark-muted)}
.topbar__contact{display:inline-flex; gap:1.4rem}
.ic{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none}

/* ---------- HEADER ---------- */
/* Blur auf ::before, damit .site-header KEIN Containing-Block für position:fixed erzeugt
   (sonst würde das mobile Menü relativ zum Header statt zum Viewport positioniert). */
.site-header{position:sticky; top:0; z-index:100; border-bottom:1px solid transparent; transition:box-shadow var(--t), border-color var(--t)}
.site-header::before{content:""; position:absolute; inset:0; z-index:-1; background:rgba(255,255,255,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:background var(--t)}
.site-header.is-stuck{box-shadow:var(--shadow-sm); border-color:var(--line)}
.site-header.is-stuck::before{background:rgba(255,255,255,.96)}
.site-header__inner{display:flex; align-items:center; gap:1.5rem; min-height:72px}

.brand{display:inline-flex; align-items:center; gap:.7rem; color:var(--navy); text-decoration:none; margin-right:auto}
.brand__mark{width:44px; height:44px; color:var(--navy); display:grid; place-items:center}
.brand__mark svg{width:100%; height:100%; overflow:visible}
.brand__text b{font-family:var(--kumbh); font-weight:700; font-size:1.18rem; color:var(--navy); display:block; line-height:1.05; letter-spacing:-.01em}
.brand__text span{font-size:.74rem; color:var(--muted); letter-spacing:.02em}

.nav{display:flex; gap:.3rem}
.nav a{font-family:var(--inter); font-weight:500; color:var(--navy); padding:.55rem .8rem; border-radius:8px; font-size:.98rem; position:relative}
.nav a::after{content:""; position:absolute; left:.8rem; right:.8rem; bottom:.35rem; height:2px; background:var(--cyan); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform var(--t)}
.nav a:hover{color:var(--accent)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.nav a.is-active{color:var(--accent)}

.header-cta{min-height:44px; padding:.6rem 1.4rem}
.nav-toggle{display:none; width:46px; height:46px; border:1px solid var(--line-strong); border-radius:10px; background:#fff; cursor:pointer; padding:0; flex-direction:column; gap:5px; align-items:center; justify-content:center}
.nav-toggle span{width:20px; height:2px; background:var(--navy); border-radius:2px; transition:var(--t)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- HERO ---------- */
.hero{position:relative; background:linear-gradient(180deg,var(--sky-soft) 0%, var(--white) 62%); padding-top:clamp(2.5rem,5vw,4.5rem); padding-bottom:clamp(3rem,6vw,6rem); overflow:hidden}
.hero__current{position:absolute; inset:0; background:url('../img/current.svg') repeat-x; background-size:1600px auto; background-position:0 55%; opacity:.55; z-index:0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.hero__inner{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:2rem; align-items:center; min-height:clamp(420px,52vh,560px)}
.hero__copy{max-width:36rem}
.hero__title{font-size:var(--fs-display); letter-spacing:-.02em; margin-bottom:1.3rem}
.hero__actions{display:flex; gap:.9rem; flex-wrap:wrap; margin-top:1.8rem}
.hero__docs{margin-top:2rem; font-size:.98rem; color:var(--muted); line-height:1.9}
.hero__docs b{color:var(--navy)}

.hero__art{position:relative; display:grid; place-items:center; min-height:340px}
.manta--hero{width:min(100%,460px); color:var(--navy); overflow:visible; will-change:transform}
.manta--hero .manta__p{fill:transparent; stroke:var(--navy); stroke-width:1px; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round}
.manta--hero.is-drawn .manta__p{fill:var(--navy); stroke-opacity:0; transition:fill 1.1s var(--ease) .1s, stroke-opacity .8s ease}
.float{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-1.2deg)}}

.hero__hours{position:relative; z-index:3; margin-top:-1.5rem}
.hours-card{background:rgba(255,255,255,.9); backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md);
  padding:1.2rem 1.5rem; display:inline-flex; flex-wrap:wrap; align-items:center; gap:.6rem 2rem; max-width:100%}
.hours-card__title{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--kumbh); font-weight:700; color:var(--navy); font-size:1.05rem; margin:0}
.hours-card__title .ic{color:var(--sea); width:20px; height:20px}
.hours-card__list{display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin:0}
.hours-card__list li{display:inline-flex; gap:.45rem; font-size:.92rem; align-items:baseline}
.hours-card__list span{color:var(--muted); font-weight:600}
.hours-card__list b{color:var(--navy); font-variant-numeric:tabular-nums}
.hours-card__note{margin:0; font-size:.82rem; color:var(--sea); font-weight:600}

/* ---------- NOTICE BAND ---------- */
.notice-band{background:var(--sky); border-block:1px solid var(--line)}
.notice-band__inner{display:flex; align-items:center; gap:1rem; padding-block:1rem; flex-wrap:wrap}
.notice-band .ic{color:var(--sea); width:22px; height:22px; flex:none}
.notice-band p{margin:0; flex:1 1 320px; color:var(--body)}
.notice-band b{color:var(--navy)}
.notice-band a{white-space:nowrap; font-family:var(--kumbh); font-weight:600}

/* ---------- PILLARS ---------- */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.pillar{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:2rem 1.8rem; position:relative; transition:transform var(--t), box-shadow var(--t), border-color var(--t)}
.pillar:hover{transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--line-strong)}
.pillar__num{font-family:var(--kumbh); font-weight:700; font-size:.85rem; color:var(--cyan); letter-spacing:.1em}
.pillar h3{font-size:var(--fs-h3); margin:.6rem 0 .6rem}
.pillar p{color:var(--muted)}

/* ---------- TEAM ---------- */
.team{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem}
.doc{background:var(--navy); color:var(--on-dark); border-radius:var(--radius-lg); padding:2.4rem 2.2rem; position:relative; overflow:hidden; transition:transform var(--t), box-shadow var(--t)}
.doc::after{content:""; position:absolute; right:-40px; bottom:-40px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle,rgba(9,169,205,.28),transparent 70%)}
.doc:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg)}
.doc__badge{display:inline-block; font-family:var(--inter); font-weight:600; font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); border:1px solid rgba(9,169,205,.4); padding:.35rem .8rem; border-radius:999px; margin-bottom:1.1rem}
.doc h3{color:#fff; font-size:clamp(1.5rem,1.2rem+1.2vw,2rem); margin-bottom:1.2rem}
.doc h3 span{color:var(--cyan); font-weight:500; font-size:.65em}
.doc__tags{display:flex; flex-wrap:wrap; gap:.5rem; position:relative; z-index:1}
.doc__tags li{font-size:.85rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:var(--on-dark); padding:.4rem .8rem; border-radius:999px}
.team__mfa{margin-top:1.8rem; max-width:70ch; color:var(--body)}
.team__mfa b{color:var(--navy)}

/* ---------- SERVICES ---------- */
.services{display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem}
.svc{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:1.9rem 1.7rem; transition:transform var(--t), box-shadow var(--t), border-color var(--t)}
.svc:hover{transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--cyan)}
.svc__ic{display:grid; place-items:center; width:54px; height:54px; border-radius:14px; background:var(--sky); color:var(--sea); margin-bottom:1.1rem}
.svc__ic svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.svc h3{font-size:1.2rem; margin-bottom:.35rem}
.svc p{color:var(--muted); font-size:.96rem}
.callout{margin-top:1.6rem; background:var(--sky); border-left:4px solid var(--sea); border-radius:0 var(--radius) var(--radius) 0; padding:1.3rem 1.6rem}
.callout p{margin:0; color:var(--body)}
.callout b{color:var(--navy)}

/* ---------- SPRECHZEITEN (navy) ---------- */
.section--navy__manta{position:absolute; right:-70px; top:50%; transform:translateY(-50%); width:min(46vw,560px); color:rgba(9,169,205,.13); z-index:0; pointer-events:none}
.section--navy__manta svg{width:100%; height:auto; overflow:visible}
.sprech{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.1fr; gap:2.5rem; align-items:center}
.sprech__copy .btn{margin-top:1.6rem}
.sprech__table{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-lg); padding:.6rem 1.6rem; backdrop-filter:blur(4px)}
.srow{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 0; border-bottom:1px solid rgba(255,255,255,.1)}
.srow:last-child{border-bottom:0}
.srow span{color:var(--on-dark-muted)}
.srow b{color:#fff; font-variant-numeric:tabular-nums; font-family:var(--kumbh); font-weight:600}
.srow--note b{color:var(--cyan)}

/* ---------- AKTUELLES ---------- */
.news{display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem}
.news-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:2rem 1.9rem; transition:transform var(--t), box-shadow var(--t)}
.news-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.news-card--wide{grid-column:1 / -1}
.news-card--accent{background:var(--navy); color:var(--on-dark)}
.news-card--accent h3{color:#fff}
.news-card h3{font-size:var(--fs-h3); margin:.8rem 0 .5rem}
.news-card p{color:var(--muted)}
.news-card--accent p{color:var(--on-dark-muted)}
.tag{display:inline-block; font-family:var(--inter); font-weight:700; font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--sea); background:var(--sky); padding:.35rem .8rem; border-radius:999px}
.tag--warn{color:#9a4a06; background:#fdf1e2}
.tag--light{color:var(--cyan); background:rgba(9,169,205,.12)}
.vertretung{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin:1.5rem 0; padding:1.3rem 0; border-block:1px solid var(--line)}
.vertretung h4{font-family:var(--kumbh); font-size:1rem; color:var(--navy); margin:0 0 .3rem}
.vertretung p{color:var(--body); font-size:.95rem}
.emergency{background:#fbeef0; border-radius:10px; padding:.9rem 1.1rem; font-size:.95rem; color:#7a1420}
.emergency a{color:#a41d2b}
.link-arrow{display:inline-block; margin-top:1rem; font-family:var(--kumbh); font-weight:600; color:var(--cyan)}
.news-card--accent .link-arrow:hover{color:#fff}

/* ---------- KONTAKT ---------- */
.kontakt{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start}
.kontakt__info h2{font-size:var(--fs-h2)}
.contact-list{margin:1.8rem 0; display:grid; gap:1rem}
.contact-list li{display:flex; gap:1rem; align-items:center}
.contact-list__ic{display:grid; place-items:center; width:48px; height:48px; border-radius:12px; background:var(--white); border:1px solid var(--line); color:var(--sea); flex:none}
.contact-list div{display:flex; flex-direction:column}
.contact-list b{color:var(--navy); font-family:var(--kumbh); font-size:.95rem}
.map-ph{display:flex; gap:.8rem; align-items:center; background:var(--white); border:1px dashed var(--line-strong); border-radius:var(--radius); padding:1.2rem 1.3rem; color:var(--muted)}
.map-ph .ic{color:var(--sea); width:24px; height:24px}
.map-ph small{font-size:.8rem}

.kontakt__form{background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:2.2rem; box-shadow:var(--shadow-sm)}
.form-note{background:var(--sky); border-radius:10px; padding:.8rem 1rem; font-size:.9rem; color:var(--body); margin-bottom:1.4rem}
.field{margin-bottom:1.1rem}
.field label{display:block; font-weight:600; color:var(--navy); margin-bottom:.4rem; font-size:.95rem}
.req{color:#b42318}
.field input:not([type=checkbox]), .field textarea{width:100%; min-height:50px; padding:.75rem .9rem; font-family:var(--inter); font-size:1rem; color:var(--body); background:#fff; border:1.5px solid var(--line-strong); border-radius:10px; transition:border-color var(--t), box-shadow var(--t)}
.field textarea{resize:vertical}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--sea); box-shadow:0 0 0 3px rgba(0,108,132,.18)}
.field--check{display:flex; gap:.6rem; align-items:flex-start}
.field--check input{margin-top:.25rem; width:18px; height:18px; flex:none; accent-color:var(--sea)}
.field--check label{font-weight:400; color:var(--body); font-size:.9rem}
.form-spam{margin-top:.9rem; font-size:.8rem; color:var(--muted); text-align:center}

/* ---------- WAVE DIVIDERS ---------- */
.wave-top{position:absolute; top:0; left:0; width:100%; height:64px; transform:translateY(-99%); background:url('../img/wave-divider.svg') center bottom/100% 100% no-repeat; opacity:.5; pointer-events:none}
.wave-top--footer{opacity:.35}

/* ---------- FOOTER ---------- */
.site-footer{position:relative; background:var(--navy-deep); color:var(--on-dark-muted); padding-top:clamp(3rem,6vw,5rem)}
.footer__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem}
.footer__brand .brand__mark--footer{color:var(--cyan); width:52px; height:52px; margin-bottom:1rem}
.footer__brand h3{color:#fff; font-size:1.3rem; margin-bottom:.8rem}
.footer__brand p{color:var(--on-dark-muted); line-height:1.8}
.footer__brand a{color:var(--on-dark)}
.footer__brand a:hover{color:#fff}
.footer__muted{color:rgba(175,198,218,.6); font-size:.85rem; margin-top:.6rem}
.footer__col h4{color:#fff; font-family:var(--kumbh); font-size:1rem; margin-bottom:1rem}
.footer__col li{margin-bottom:.6rem}
.footer__col a{color:var(--on-dark-muted)}
.footer__col a:hover{color:#fff}
.footer__bottom{border-top:1px solid rgba(255,255,255,.1); padding-block:1.5rem; font-size:.85rem; color:rgba(175,198,218,.7)}

/* ---------- REVEAL (scroll) ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}

/* ---------- DRIFT (Strömung) ---------- */
@keyframes drift{to{background-position-x:-1600px}}
[data-drift]{animation:drift 34s linear infinite}

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  .hero__inner{grid-template-columns:1fr; gap:1rem}
  .hero__art{order:-1; min-height:220px}
  .manta--hero{width:min(72%,340px)}
  .sprech{grid-template-columns:1fr; gap:1.6rem}
  .kontakt{grid-template-columns:1fr; gap:2rem}
  .pillars{grid-template-columns:1fr}
  .services{grid-template-columns:1fr 1fr}
  .section--navy__manta{opacity:.6}
}
@media (max-width:820px){
  .header-cta{display:none}
  .nav-toggle{display:flex}
  .nav{position:fixed; inset:0 0 0 auto; width:min(80vw,320px); background:#fff; flex-direction:column; gap:.2rem;
    padding:6rem 1.5rem 2rem; box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform var(--t); z-index:99}
  .nav.open{transform:none}
  .nav a{padding:.9rem .6rem; font-size:1.1rem; border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  body.nav-open{overflow:hidden}
  .team{grid-template-columns:1fr}
  .news{grid-template-columns:1fr}
  .vertretung{grid-template-columns:1fr}
  .topbar__loc{display:none}
  .topbar__inner{justify-content:center}
}
@media (max-width:560px){
  .services{grid-template-columns:1fr}
  .hero__actions .btn{flex:1 1 auto}
  .hours-card{width:100%}
}

/* ---------- BRAND MARK ALS <img> (Unterseiten) ---------- */
.brand__mark img{width:100%; height:100%; display:block}

/* aktive Seite in der Navigation */
.nav a[aria-current="page"]{color:var(--accent)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}

/* ---------- PAGE-HERO (Unterseiten) ---------- */
.page-hero{position:relative; overflow:hidden; background:linear-gradient(180deg,var(--sky-soft) 0%,var(--white) 100%);
  padding-block:clamp(2.8rem,6vw,5rem); border-bottom:1px solid var(--line)}
.page-hero__current{position:absolute; inset:0; background:url('../img/current.svg') repeat-x; background-size:1500px auto; background-position:0 62%; opacity:.4; z-index:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.page-hero__inner{position:relative; z-index:2; max-width:60ch}
.page-hero h1{font-size:clamp(2.1rem,1.5rem+2.6vw,3.4rem); letter-spacing:-.02em; margin-bottom:1rem; color:var(--ink)}
.page-hero .lead{margin-top:0}
.page-hero__manta{position:absolute; right:clamp(-40px,-2vw,0px); bottom:-24px; width:min(38vw,380px); opacity:.10; z-index:1; pointer-events:none}

/* ---------- CTA-BAND ---------- */
.cta{position:relative; overflow:hidden; background:var(--navy); color:var(--on-dark); border-radius:var(--radius-lg);
  padding:clamp(2rem,4vw,3.2rem); display:flex; align-items:center; justify-content:space-between; gap:1.5rem 2rem; flex-wrap:wrap}
.cta__manta{position:absolute; right:-30px; top:50%; transform:translateY(-50%); width:min(30vw,320px); opacity:.14; pointer-events:none}
.cta__text{position:relative; z-index:1; max-width:46ch}
.cta h2{color:#fff; margin-bottom:.4rem}
.cta p{color:var(--on-dark-muted); margin:0}
.cta .btn{position:relative; z-index:1; flex:none}

/* teaser „alle ansehen" */
.section__foot{margin-top:2rem}

/* ---------- EDITOR-INHALT (Rechtliche Seiten / page.php) ---------- */
.entry{color:var(--body); line-height:1.75; max-width:70ch}
.entry h2{font-size:var(--fs-h3); color:var(--ink); margin:2rem 0 .7rem}
.entry h2:first-child{margin-top:0}
.entry h3{font-size:1.15rem; color:var(--ink); margin:1.5rem 0 .5rem}
.entry p{margin:0 0 1.1rem}
.entry ul{margin:0 0 1.1rem 1.25rem; list-style:disc}
.entry li{margin-bottom:.4rem}
.entry a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .reveal{opacity:1; transform:none}
  .manta--hero .manta__p{fill:var(--navy); stroke-opacity:0}
}