/* ===================================================================
   Zahnarztpraxis Paus  ·  32Dent-Referenz nachgebaut, honest branding
   Palette: Electric Blue + near-black + white/mist  ·  Font: Manrope
   Light theme locked. Single accent (blue). Radius: cards 16px, pill buttons.
=================================================================== */

:root{
  --blue:      #2b2bf5;   /* primary accent */
  --blue-ink:  #1e1ed6;   /* hover / pressed */
  --blue-soft: #eeeefe;   /* tint */
  --ink:       #0e0e14;   /* near-black */
  --ink-2:     #23242c;
  --paper:     #ffffff;
  --mist:      #f2f3f7;   /* light gray section */
  --line:      #e4e6ee;
  --muted:     #5a5c6a;
  --muted-2:   #8a8c98;
  --radius:    16px;
  --radius-lg: 22px;
  --wrap:      1240px;
  --ease:      cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; line-height:1.05; letter-spacing:-.02em; font-weight:800}
p{margin:0}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.ic{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none}
.skip{position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:10px 16px; border-radius:8px; z-index:100}
.skip:focus{left:16px; top:12px}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--ink); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--bg); color:var(--fg);
  font-weight:700; font-size:15px; letter-spacing:-.01em;
  padding:13px 22px; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap; transition:transform .12s var(--ease), background .18s, color .18s, border-color .18s;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:9px 16px; font-size:14px}
.btn-lg{padding:16px 28px; font-size:16px}
.btn-blue{--bg:var(--blue); --fg:#fff}
.btn-blue:hover{background:var(--blue-ink)}
.btn-ink{--bg:var(--ink); --fg:#fff}
.btn-ink:hover{background:#000}
.btn-line{--bg:transparent; --fg:var(--ink); border-color:var(--line)}
.btn-line:hover{border-color:var(--ink)}
.btn-line-light{--bg:transparent; --fg:#fff; border-color:rgba(255,255,255,.5)}
.btn-line-light:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.btn-glass{--bg:rgba(255,255,255,.14); --fg:#fff; border-color:rgba(255,255,255,.55); backdrop-filter:blur(6px)}
.btn-glass:hover{background:rgba(255,255,255,.24)}
.btn-wa{--bg:var(--blue); --fg:#fff}
.btn-wa:hover{background:var(--blue-ink)}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:70px; gap:20px}
.brand{display:inline-flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em}
.brand__mark{display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--blue); color:#fff; font-size:19px; font-weight:800}
.brand__word{font-size:16px; line-height:1; display:flex; flex-direction:column}
.brand__word b{color:var(--blue); font-weight:800}
.nav{display:flex; gap:30px}
.nav a{font-size:15px; font-weight:600; color:var(--ink-2); transition:color .15s}
.nav a:hover{color:var(--blue)}
.header-actions{display:flex; align-items:center; gap:14px}
.phone{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px}
.phone .ic{width:17px; height:17px; stroke-width:1.5}
.burger{display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:11px; background:#fff; cursor:pointer; padding:0; flex-direction:column; gap:4px; align-items:center; justify-content:center}
.burger span{width:19px; height:2px; background:var(--ink); border-radius:2px; transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-nav{display:flex; flex-direction:column; gap:4px; padding:14px 24px 22px; border-bottom:1px solid var(--line); background:#fff}
.mobile-nav[hidden]{display:none}
.mobile-nav a{padding:12px 4px; font-weight:700; font-size:17px; border-bottom:1px solid var(--line)}
.mobile-nav a.btn{border:none; margin-top:10px; color:#fff}

/* ---------- Hero ---------- */
.hero{padding:14px 0 0}
.hero__frame{position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:clamp(460px, 66vh, 620px); display:flex}
.hero__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; filter:grayscale(1) contrast(1.05)}
.hero__scrim{position:absolute; inset:0; background:linear-gradient(100deg, rgba(10,10,16,.9) 0%, rgba(10,10,16,.62) 42%, rgba(10,10,16,.15) 78%)}
.hero__content{position:relative; z-index:2; align-self:center; padding:clamp(28px,5vw,64px); max-width:660px; color:#fff}
.hero__title{font-size:clamp(2.3rem, 5.4vw, 4rem); letter-spacing:-.03em; margin-bottom:20px}
.hero__sub{font-size:clamp(1rem,1.5vw,1.18rem); color:rgba(255,255,255,.86); max-width:46ch; margin-bottom:30px}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap}
.hero__status{position:absolute; z-index:2; right:clamp(20px,4vw,40px); bottom:clamp(20px,4vw,40px); display:none; align-items:center; gap:9px; padding:9px 15px; border-radius:999px; background:rgba(255,255,255,.14); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:13.5px; font-weight:700}
.hero__status.is-open .dot{background:#3ad07a}
.hero__status .dot{width:9px; height:9px; border-radius:50%; background:#ff6b6b}
.hero__status.show{display:inline-flex}

/* ---------- Section scaffolding ---------- */
.section{padding:clamp(64px,8vw,110px) 0}
.section--mist{background:var(--mist)}
.sec-title{font-size:clamp(1.9rem,3.6vw,2.9rem); display:flex; align-items:center; gap:14px; margin-bottom:40px}
.sec-title--flush{margin-bottom:20px}
.arrow{width:.82em; height:.82em; flex:none; position:relative; top:.02em;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2bf5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E")}
.sec-head{display:flex; flex-direction:column; gap:12px; margin-bottom:40px; max-width:60ch}
.sec-lead{color:var(--muted); font-size:1.06rem}

/* ---------- About ---------- */
.about{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(28px,4vw,60px); align-items:start}
.about__media{margin:0; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3.4}
.about__media img{width:100%; height:100%; object-fit:cover}
.tabs{display:inline-flex; padding:5px; background:var(--mist); border-radius:999px; margin-bottom:26px}
.section--mist .tabs{background:#fff}
.tab{border:none; background:transparent; font-family:inherit; font-weight:700; font-size:14.5px; color:var(--muted); padding:9px 20px; border-radius:999px; cursor:pointer; transition:.18s}
.tab.is-active{background:var(--ink); color:#fff}
.tab-panel{display:none}
.tab-panel.is-active{display:block; animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.about__block{padding:20px 0; border-top:1px solid var(--line)}
.about__block:first-child{border-top:0; padding-top:0}
.about__block h3{font-size:1.02rem; font-weight:800; margin-bottom:7px; text-transform:uppercase; letter-spacing:.02em}
.about__block p{color:var(--muted); font-size:1rem}
.faq{padding:16px 0; border-top:1px solid var(--line)}
.faq:first-child{border-top:0}
.faq summary{font-weight:700; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:1.4rem; color:var(--blue); font-weight:700; line-height:1}
.faq[open] summary::after{content:"-"}
.faq p{color:var(--muted); margin-top:10px; font-size:.98rem}

/* ---------- Stats ---------- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:clamp(40px,5vw,64px); border-top:1px solid var(--line); padding-top:clamp(32px,4vw,48px)}
.stat{display:flex; flex-direction:column; gap:4px}
.stat__num{font-size:clamp(2.6rem,5vw,3.6rem); font-weight:800; color:var(--blue); letter-spacing:-.03em; line-height:1}
.stat__label{color:var(--muted); font-weight:600; font-size:.98rem}

/* ---------- Leistungen (bento) ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:16px}
.svc{position:relative; border-radius:var(--radius); border:1px solid var(--line); background:#fff; padding:22px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; transition:transform .2s var(--ease), border-color .2s}
.section--mist .svc{border-color:#e9eaf1}
.svc:hover{transform:translateY(-4px); border-color:var(--blue)}
.svc__name{font-size:1.12rem; font-weight:800; letter-spacing:-.01em}
.svc__tag{color:var(--muted); font-size:.9rem; font-weight:600; margin-top:4px}
.svc__go{position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%; background:var(--blue-soft); display:grid; place-items:center}
.svc__go::before{content:""; width:11px; height:11px; border:2px solid var(--blue); border-left:0; border-bottom:0; transform:rotate(45deg); margin:-2px -2px 0 0}
.svc__go--light{background:rgba(255,255,255,.9)}
.svc--tall{grid-row:span 2}
.svc--photo{padding:0}
.svc--photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.svc--photo .svc__cap{position:relative; z-index:2; padding:22px; color:#fff; background:linear-gradient(to top, rgba(8,8,14,.82), rgba(8,8,14,0))}
.svc--photo .svc__tag{color:rgba(255,255,255,.85)}
.svc--kids img{filter:none}
.svc--blue{background:var(--blue); border-color:var(--blue); color:#fff}
.svc--blue .svc__tag{color:rgba(255,255,255,.85)}
.svc--blue:hover{background:var(--blue-ink)}

/* ---------- Sprechzeiten ---------- */
.hours{display:grid; grid-template-columns:1.4fr .9fr; gap:24px; align-items:stretch}
.hours__panel{background:var(--ink); color:#fff; border-radius:var(--radius-lg); padding:clamp(26px,3.5vw,40px)}
.hours__status{display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:14px; padding:8px 15px; border-radius:999px; background:rgba(255,255,255,.1); margin-bottom:24px}
.hours__status .dot{width:9px; height:9px; border-radius:50%; background:#ff6b6b}
.hours__status.is-open .dot{background:#3ad07a}
.hours__table{width:100%; border-collapse:collapse}
.hours__table th, .hours__table td{text-align:left; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:.98rem}
.hours__table th{font-weight:700; width:34%}
.hours__table td{color:rgba(255,255,255,.82); font-variant-numeric:tabular-nums}
.hours__table td.muted{color:rgba(255,255,255,.4)}
.hours__table tr.closed th, .hours__table tr.closed td{color:rgba(255,255,255,.4)}
.hours__table tr.today th{color:#fff}
.hours__table tr.today td{color:#fff}
.hours__table tr.today{position:relative}
.hours__table tr.today th::before{content:""; position:absolute; left:-16px; top:50%; transform:translateY(-50%); width:6px; height:6px; border-radius:50%; background:var(--blue)}
.hours__note{color:rgba(255,255,255,.62); font-size:.92rem; margin-top:18px; line-height:1.55}
.hours__cta{background:var(--mist); border-radius:var(--radius-lg); padding:clamp(26px,3.5vw,40px); display:flex; flex-direction:column; gap:14px}
.section .hours__cta{background:var(--mist)}
.hours__cta h3{font-size:1.5rem}
.hours__cta p{color:var(--muted)}
.hours__cta .btn{width:100%; margin-top:2px}
.hours__cta .btn-line{margin-top:0}

/* ---------- Team ---------- */
.team{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.doc{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; display:flex; gap:18px; align-items:center}
.doc--note{align-items:flex-start; background:var(--blue); border-color:var(--blue); color:#fff}
.doc__avatar{width:66px; height:66px; border-radius:14px; background:var(--ink); color:#fff; display:grid; place-items:center; font-weight:800; font-size:1.35rem; letter-spacing:.02em; flex:none}
.doc__name{font-size:1.2rem; font-weight:800}
.doc__role{color:var(--blue); font-weight:700; font-size:.95rem; margin-top:3px}
.doc--note .doc__role{color:#fff}
.doc__meta{color:var(--muted); font-size:.9rem; margin-top:5px}
.doc--note .doc__meta{color:rgba(255,255,255,.85)}

/* ---------- Bewertungen ---------- */
.reviews{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,60px); align-items:center}
.reviews__text p{color:var(--muted); font-size:1.08rem; margin:0 0 26px; max-width:44ch}
.reviews__media{margin:0; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/11}
.reviews__media img{width:100%; height:100%; object-fit:cover}

/* ---------- Termin band ---------- */
.termin{background:var(--blue); color:#fff; padding:clamp(56px,7vw,96px) 0}
.termin__inner{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(30px,4vw,60px); align-items:start; position:relative}
.termin__intro h2{font-size:clamp(2rem,3.6vw,2.9rem); margin-bottom:16px}
.termin__intro p{color:rgba(255,255,255,.85); font-size:1.06rem; max-width:40ch; margin-bottom:28px}
.termin__contact{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.termin__contact li{display:flex; flex-direction:column; gap:2px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.2)}
.termin__contact span:first-child{font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.6); font-weight:700}
.termin__contact a, .termin__contact li span:last-child{font-weight:700; font-size:1.05rem}
.termin__form{background:#fff; color:var(--ink); border-radius:var(--radius-lg); padding:clamp(24px,3vw,38px); display:flex; flex-direction:column; gap:16px}
.field{display:flex; flex-direction:column; gap:7px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field label{font-weight:700; font-size:.92rem}
.field input, .field textarea{font-family:inherit; font-size:16px; color:var(--ink); background:#fbfbfd; border:1.5px solid var(--line); border-radius:11px; padding:12px 14px; transition:border-color .15s, box-shadow .15s; width:100%; resize:vertical}
.field input::placeholder, .field textarea::placeholder{color:var(--muted-2)}
.field input:hover, .field textarea:hover{border-color:#c9cbd8}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(43,43,245,.14)}
.field.invalid input, .field.invalid textarea{border-color:#e0392b; box-shadow:0 0 0 4px rgba(224,57,43,.12)}
.err{color:#c0271b; font-size:.84rem; font-weight:600; min-height:0}
.err:empty{display:none}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--muted); line-height:1.5}
.consent input{margin-top:3px; width:18px; height:18px; accent-color:var(--blue); flex:none}
.consent a{color:var(--blue); font-weight:700; text-decoration:underline}
#err-consent{margin-top:-6px}
.termin__actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:4px}
.termin__actions .btn{flex:1; min-width:200px}
.btn-line-light{--fg:var(--ink); border-color:var(--line)}
.btn-line-light:hover{border-color:var(--ink); background:transparent}
.termin__hint{font-size:.9rem; color:var(--muted); min-height:0}
.termin__hint:empty{display:none}
.termin__hint.err-hint{color:#c0271b; font-weight:600}
/* success replaces form */
.termin__success{position:absolute; inset:0 0 0 auto; width:min(52%,560px); background:#fff; color:var(--ink); border-radius:var(--radius-lg); padding:clamp(30px,4vw,46px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:14px}
.termin__success[hidden]{display:none}
.termin__success .check{width:60px; height:60px; border-radius:50%; background:var(--blue-soft); display:grid; place-items:center}
.termin__success .check svg{width:30px; height:30px; fill:none; stroke:var(--blue); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.termin__success h3{font-size:1.5rem}
.termin__success p{color:var(--muted)}

/* ---------- Aktuelles ---------- */
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.post{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px}
.post h3{font-size:1.22rem; margin-bottom:12px}
.post p{color:var(--muted); font-size:.98rem}
.post--blue{background:var(--blue); border-color:var(--blue); color:#fff}
.post--blue p{color:rgba(255,255,255,.85)}

/* ---------- Footer ---------- */
.footer{background:var(--mist); border-top:1px solid var(--line); padding-top:clamp(48px,6vw,72px)}
.footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px; padding-bottom:44px}
.brand--footer .brand__word{color:var(--ink)}
.footer__addr{color:var(--muted); margin-top:16px; font-size:.98rem; line-height:1.6}
.footer__nav, .footer__col, .footer__mail{display:flex; flex-direction:column; gap:10px}
.footer__nav a{color:var(--ink-2); font-weight:600; font-size:.98rem}
.footer__nav a:hover{color:var(--blue)}
.footer__k{font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2); font-weight:700; margin-bottom:4px}
.footer__col a, .footer__col span{color:var(--muted); font-size:.98rem}
.footer__col a{color:var(--ink); font-weight:700}
.footer__email{font-size:clamp(1.3rem,2.6vw,2rem); font-weight:800; color:var(--blue); letter-spacing:-.02em; text-decoration:underline; text-underline-offset:4px; word-break:break-word}
.footer__bar{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 24px; border-top:1px solid var(--line); font-size:.9rem; color:var(--muted); flex-wrap:wrap}
.footer__legal{display:flex; gap:20px}
.footer__legal a:hover{color:var(--blue)}

/* ---------- focus ---------- */
:focus-visible{outline:3px solid var(--blue); outline-offset:2px; border-radius:6px}
.termin :focus-visible{outline-color:#fff}
.termin__form :focus-visible{outline-color:var(--blue)}

/* ===================================================================
   Responsive
=================================================================== */
@media (max-width:1000px){
  .nav{display:none}
  .burger{display:flex}
  .phone span{display:none}
  .phone{padding:0}
  .svc-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:180px}
  .svc--tall{grid-row:span 2}
}
@media (max-width:820px){
  .about{grid-template-columns:1fr}
  .about__media{aspect-ratio:16/10; max-height:340px}
  .hours{grid-template-columns:1fr}
  .reviews{grid-template-columns:1fr}
  .reviews__media{order:-1; aspect-ratio:16/9}
  .team{grid-template-columns:1fr 1fr}
  .termin__inner{grid-template-columns:1fr}
  .termin__success{position:static; width:100%; margin-top:8px}
  .posts{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero__frame{min-height:78vh}
  .hero__scrim{background:linear-gradient(180deg, rgba(10,10,16,.55) 0%, rgba(10,10,16,.85) 100%)}
  .stats{grid-template-columns:1fr; gap:22px}
  .svc-grid{grid-template-columns:1fr; grid-auto-rows:auto}
  .svc{min-height:150px}
  .svc--tall{grid-row:auto; min-height:230px}
  .team{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .termin__actions .btn{min-width:100%}
}
@media (max-width:440px){
  .footer__grid{grid-template-columns:1fr}
  .footer__bar{justify-content:flex-start}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .btn:hover, .svc:hover{transform:none}
}