:root{
  --bg:#0b1220;
  --card:#0f1b33cc;
  --text:#eaf0ff;
  --muted:#b7c2e5;
  --line:rgba(255,255,255,.12);

  --brand:#7c5cff;
  --brand2:#33d6ff;
  --ok:#20d18a;
  --bad:#ff5a6a;
  --warn:#ffcc00;

  --shadow: 0 18px 55px rgba(0,0,0,.35);
  --radius:18px;
  --maxw: 1180px;
  --pad: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 900px at 20% 10%, rgba(124,92,255,.28), transparent 55%),
    radial-gradient(1000px 800px at 85% 25%, rgba(51,214,255,.22), transparent 50%),
    radial-gradient(1100px 900px at 50% 95%, rgba(32,209,138,.12), transparent 55%),
    var(--bg);
  line-height:1.5;
  overflow-x:hidden;
}

a{color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}

/* Skip link */
.skip{
  position:absolute;
  left:-999px;
  top:10px;
  background:#fff;
  color:#000;
  padding:10px 12px;
  border-radius:10px;
  z-index:9999;
  text-decoration:none;
  font-weight:800;
}
.skip:focus{left:10px}

/* NAV */
.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(11,18,32,.65);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 0;
}
.brand{
  display:flex; gap:12px; align-items:center;
  text-decoration:none;
  min-width:unset;
}

/* Logo */
.logo{
  width:56px; height:56px; border-radius:16px;
  background:
    url("img/logo-mark.png") center/92% no-repeat,
    linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 14px 30px rgba(124,92,255,.25);
  border:1px solid rgba(255,255,255,.10);
}
.brand strong{display:block; font-size:14px; letter-spacing:.2px}
.brand span{display:block; font-size:12px; color:var(--muted)}

.nav{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.nav a{
  text-decoration:none;
  font-size:13px;
  color:var(--muted);
  padding:8px 10px;
  border-radius:999px;
  border:1px solid transparent;
  transition:.18s ease;
}
.nav a:hover{
  color:var(--text);
  border-color: var(--line);
  background: rgba(255,255,255,.06);
}
.nav a.active{
  color:var(--text);
  border-color: rgba(124,92,255,.35);
  background: rgba(124,92,255,.14);
}

.btn{
  appearance:none; border:0; cursor:pointer;
  padding:11px 14px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.2px;
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  text-decoration:none;
  white-space:nowrap;
  transition:.18s ease;
}
.btn:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px rgba(124,92,255,.22);
  border-radius:999px;
}
.btn-primary{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color:#081022;
  box-shadow: 0 18px 40px rgba(124,92,255,.22);
}
.btn-primary:hover{transform: translateY(-1px)}
.btn-ghost{
  background: rgba(255,255,255,.06);
  color:var(--text);
  border:1px solid var(--line);
}
.btn-ghost:hover{background: rgba(255,255,255,.09)}

.hamburger{
  display:none;
  background: rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 12px;
  color:var(--text);
  cursor:pointer;
}

/* Drawer */
.drawer{
  display:none;
  position:fixed; inset:0;
  background: rgba(0,0,0,.45);
  z-index:60;
}
.drawer[aria-hidden="false"]{ display:block; }
.drawer-panel{
  position:absolute; top:0; right:0; height:100%; width:min(420px, 88vw);
  background: rgba(12,20,38,.92);
  backdrop-filter: blur(14px);
  border-left: 1px solid var(--line);
  padding: 16px;
  box-shadow: var(--shadow);
}
.drawer-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px}
.drawer-nav{display:grid; gap:8px; margin-top:10px}
.drawer-nav a{
  text-decoration:none;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight:700;
}
.drawer-nav a:hover{background: rgba(255,255,255,.07)}

/* HERO */
header.hero{padding:34px 0 18px}
.hero-grid{
  display:grid;
  grid-template-columns: minmax(0,1.26fr) minmax(420px,.84fr);
  gap:24px;
  align-items:stretch;
}
.hero-grid > div{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.hero h1{
  margin:0;
  font-size: clamp(34px, 4.2vw, 52px);
  line-height:1.05;
  max-width: 12.5ch;
  letter-spacing:-.3px;
}
.lead{
  margin:0;
  color:var(--muted);
  font-size:16px;
  max-width:68ch;
}

.cta{
  margin:0;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.subnote{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
  max-width:70ch;
}

.card{
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: var(--card);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}
.panel{padding:16px}

.hero-card{padding:16px; display:flex; flex-direction:column; gap:12px; height:100%}
.hero-card h2{margin:0 0 24px; font-size:15px}

.list{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.li{display:flex; gap:10px; align-items:flex-start; color:var(--muted); font-size:14px}
.tick{
  width:20px; height:20px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(32,209,138,.12);
  border:1px solid rgba(32,209,138,.25);
  color:#bff7de;
  font-weight:900;
  flex:0 0 auto;
  margin-top:1px;
}

.hero-media{
  margin-top:12px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:10px;
}
.hero-card .hero-media{margin-top:auto;}

.img{
  width:100%;
  height:136px;
  border-radius:16px;
  object-fit:cover;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
}

/* SECTIONS */
section{padding:30px 0}
.section-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:8px;
  margin-bottom:18px;
}
.section-head h2{margin:0; font-size:20px; line-height:1.2; letter-spacing:-.2px}
.section-head p{margin:0; color:var(--muted); font-size:14px; line-height:1.65; max-width:92ch}

.grid3{display:grid; grid-template-columns: repeat(3,1fr); gap:14px; align-items:stretch}

/* Forms */
.row2{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
label{display:block; font-size:13px; color:var(--muted); margin:0 0 6px}

input, select, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}

textarea{min-height:110px; resize:vertical}
input:focus, select:focus, textarea:focus{
  border-color: rgba(124,92,255,.45);
  box-shadow: 0 0 0 4px rgba(124,92,255,.16);
}
input:focus-visible, select:focus-visible, textarea:focus-visible{outline:none}

.result{
  margin-top:12px;
  padding:16px;
  border-radius:16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-size:14px;
  line-height:1.55;
}
.result strong{color:var(--text)}
.check{display:grid; gap:8px; margin:10px 0 0; padding-left:18px}

/* Meet CTA */
.meet-cta{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:14px;
  align-items:stretch;
}
.meet-card{
  padding:16px;
  background: linear-gradient(180deg, rgba(124,92,255,.16), rgba(255,255,255,.03));
  border-color: rgba(124,92,255,.28);
}
.meet-card h3{margin:0 0 10px; font-size:16px}
.meet-card p{margin:0 0 12px; color:var(--muted); font-size:14px}
.meet-meta{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:8px}
.badge{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
  background: rgba(255,255,255,.04);
}

/* Pricing */
.pricing{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  align-items:stretch;
}

/* WICHTIG: so wie Bild 1 (unten fix, gleich hohe Cards) */
.price{
  padding:16px;
  display:grid;
  grid-template-rows: auto auto auto 1fr auto auto;
  gap:10px;
  height:100%;
}

.price h3{margin:0; font-size:16px; line-height:1.3}
.meta{color:var(--muted); font-size:13px}
.money{font-size:28px; font-weight:900; letter-spacing:-.4px}
.money small{font-size:13px; color:var(--muted); font-weight:700}

.bullets{
  margin:0;
  padding-left:18px;
  color:var(--muted);
  display:grid;
  gap:10px;
  font-size:14px;
  line-height:1.6;
  align-self:start;
}

/* Nicht-enthalten Box unten halten */
.price .result{
  margin-top:auto;
  width:100%;
  min-height:118px;
  padding:14px;
  font-size:13px;
  line-height:1.5;
  border-radius:16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  display:block;
}
.price .result strong{color:var(--text)}
@supports not (-webkit-line-clamp: 1){
  .price .result{ min-height:118px; }
}

/* CTA unten + horizontal mittig */
.price-cta{
  margin-top:0;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
}

/* Button in Preis-Card etwas breiter */
.price-cta .btn{
  min-width: 190px;
}

.highlight{
  background: linear-gradient(180deg, rgba(124,92,255,.14), rgba(255,255,255,.03));
  border-color: rgba(124,92,255,.28);
}

/* Preis-Hinweis unter den Karten über volle Breite + Abstand */
#preise .subnote-wide{
  display:block;
  width:100%;
  max-width:none;
  margin-top:16px !important;
  margin-bottom:14px;
  line-height:1.6;
}

/* FAQ */
details{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  padding:14px 16px;
  transition: background .18s ease, border-color .18s ease;
}
details:hover{
  background: rgba(255,255,255,.045);
  border-color: rgba(124,92,255,.18);
}
summary{
  cursor:pointer;
  font-weight:900;
  list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
summary::-webkit-details-marker{display:none}
summary span[aria-hidden="true"]{
  color: var(--muted);
  font-weight: 900;
}
details p{margin:12px 0 0; color:var(--muted); font-size:14px; line-height:1.65}

/* Footer */
footer{
  padding:28px 0 34px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  background: rgba(0,0,0,.08);
}
.foot{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:center}
.foot a{color:var(--muted); text-decoration:none}
.foot a:hover{color:var(--text)}

/* Toast */
.toast{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:16px;
  z-index:1200;
  width:min(820px, calc(100vw - 24px));
  display:none;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background: rgba(12,20,38,.92);
  backdrop-filter: blur(14px);
  color: var(--text);
  box-shadow: var(--shadow);
  font-size:13px;
}
.toast .muted{color:var(--muted)}
.toast .row{display:flex; gap:10px; align-items:flex-start; justify-content:space-between}
.toast .x{
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius:999px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:900;
  flex:0 0 auto;
}



/* Typografie in Inhaltskarten vereinheitlichen */
.card.panel > h3,
.card.price > h3,
.card.meet-card > h3{
  margin:0 0 10px;
}

#leistung .card,
#ueber .card,
#termin .card,
#kontakt .card,
#kompass .card,
#preise .card{
  height:100%;
}

#leistung .card p,
#ueber .card p,
#termin .card p,
#kontakt .card p,
#kompass .card p{
  line-height:1.65;
}

#kompass .panel{
  padding:18px;
}

#kompass .row2{
  align-items:start;
}

#kompass #kompassResult{
  min-height:118px;
}

#kompass .panel > div[style*='margin-top:12px'] {
  margin-top: 14px !important;
}

#leistung .grid3 .card{
  padding:18px;
}

#ueber .card.panel,
#termin .card.panel,
#kontakt .card.panel{
  padding:18px;
}

#preise .section-head{
  margin-bottom:16px;
}

#preise .subnote-wide,
#kontakt .section-head,
#fragen .section-head{
  margin-bottom:16px;
}

#kontakt .form-cta-note{
  margin:10px 0 0;
  max-width:none;
}

#kontakt aside .result ul{
  margin:0;
}

#kontakt aside .result:first-of-type ul{
  padding-left:18px;
}

#kontakt aside .img{
  margin-top:18px;
}

/* Responsive */
@media (max-width: 980px){
  .nav{display:none}
  .hamburger{display:inline-flex}
  .hero-grid{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .meet-cta{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .logo{width:48px;height:48px;border-radius:14px;background-size:92%;}
  .hero-media{grid-template-columns:1fr 1fr}
  .img{height:120px}

  /* Mobil: Nicht-enthalten Box darf wachsen */
  .price .result{
    height:auto;
    display:block;
    -webkit-line-clamp:unset;
    max-height:none;
  }

  /* Mobil ebenfalls mittig lassen (dein Wunsch) */
  .price-cta{
    justify-content:center;
  }

  .price-cta .btn{
    min-width: 190px;
  }

  /* Neue Boxen entspannen */
  #ueber .lead{
    max-width:none;
  }

  #ueber .row2 > div:last-child{
    gap:12px !important;
  }

  #kontakt aside .result{
    min-height: unset !important;
  }
}
@media (max-width: 520px){
  .hero-media{grid-template-columns:1fr}
  .img{height:160px}

  .result .check{
    padding-left: 16px;
  }

  #termin .meet-cta > .card.panel .subnote{
    margin-top: 8px;
  }
}

/* Print */
@media print{
  body{background:#fff !important; color:#000}
  a{color:#000; text-decoration:none}

  .topbar, .drawer, footer, .toast{display:none !important;}
  .btn, .hamburger{display:none !important;}
  .cta, .hero-media{display:none !important;}

  .card, .result{
    box-shadow:none !important;
    backdrop-filter:none !important;
    background:#fff !important;
  }

  section{padding:10px 0}
}

/* 3-step helper list */
.steps{
  margin:0;
  padding-left:18px;
  color:var(--text);
}
.steps li{margin:6px 0}

/* Termin Liste ohne 1./2./3. */
.steps-plain{
  list-style:none;
  padding-left:0;
}
.steps-plain li{
  margin:10px 0;
}

/* ---------------------------------------
   Kontaktformular UX-Feinschliff
---------------------------------------- */

/* Einleitung im Kontaktbereich sauber umbrechen */
#kontakt .section-head p{
  max-width: 72ch;
  overflow-wrap: break-word;
}

/* Placeholder lesbarer */
#kontakt input::placeholder,
#kontakt textarea::placeholder{
  color: rgba(183,194,229,.78);
}

/* Zeichenzähler besser lesbar */
#kontakt #topicCount{
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  text-align: left;
}

/* Formular-CTA robuster (2 Buttons) */
#kontakt .form-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

#kontakt .form-cta .btn{
  min-width: 210px;
}

/* Mehr Luft vor rechtlichem Hinweis im Formular */
#kontakt form .subnote{
  margin-top:12px;
  max-width:none;
  line-height:1.65;
}

/* ---------------------------------------
   Dropdown-Lesbarkeit (Kontaktweg + Kompass)
---------------------------------------- */

/* Sichtbarer Text im geschlossenen Select */
select{
  color: var(--text);
}

/* Native Dropdown-Liste (Optionen) deutlich lesbar */
select option{
  color: #eaf0ff;
  background: #15233f;
}

/* Einige Browser nutzen optgroup separat */
select optgroup{
  color: #ffffff;
  background: #12203a;
}

/* Platzhalter-Option */
select option[value=""]{
  color: #d7e2ff;
}

/* Fokus im Select deutlicher */
select:focus{
  border-color: rgba(124,92,255,.55);
  box-shadow: 0 0 0 4px rgba(124,92,255,.20);
}

/* Select optisch harmonischer + Chevron (für ALLE relevanten Selects) */
#kontakt select,
#kompass select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:42px;
  background-image:
    linear-gradient(45deg, transparent 50%, #d7e2ff 50%),
    linear-gradient(135deg, #d7e2ff 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  color: var(--text);
  background-color: rgba(255,255,255,.04);
}

/* Auto-übernommene Situation optisch als Hilfsfeld markieren */
#leadSituation[readonly]{
  background: rgba(255,255,255,.025);
  border-style: dashed;
  color: #dfe8ff;
  cursor: default;
}

/* Formularfelder etwas ruhiger */
#kontakt .row2{
  gap:12px;
}

#kontakt textarea{
  min-height:118px;
}

/* Buttons links/rechts ausrichten (Desktop/Tablet) */
#kontakt .form-cta{
  justify-content:space-between;
  align-items:center;
}

#kontakt .form-cta .btn:first-child{
  margin-right:auto;
}

/* Hauptbutton minimal stärker gewichten */
#kontakt #leadSubmitBtn{
  min-width: 260px;
}

#kontakt .form-cta .btn:last-child{
  margin-left:auto;
}

/* Mid-size/Tablet: Buttons sauber umbrechen */
@media (max-width: 760px){
  #kontakt .form-cta{
    display:grid;
    grid-template-columns: 1fr;
  }

  #kontakt .form-cta .btn{
    width:100%;
    min-width:0;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* ---------------------------------------
   Buchung / PayPal (Kontaktformular)
---------------------------------------- */

#kontakt .booking-box{
  margin-top: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(124,92,255,.28);
  background: linear-gradient(180deg, rgba(124,92,255,.10), rgba(255,255,255,.03));
}

#kontakt .booking-box .booking-title{
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

#kontakt .booking-box .booking-grid{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  align-items: center;
}

#kontakt .booking-box .booking-label{
  color: var(--muted);
  font-size: 13px;
}

#kontakt .booking-box .booking-value{
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

#kontakt .booking-box .booking-note{
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
}

#kontakt .consent-box{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  display: grid;
  gap: 10px;
}

#kontakt .consent-row{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
}

#kontakt .consent-row input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--brand);
  cursor: pointer;
}

#kontakt .consent-row label{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

#kontakt .consent-row label strong{
  color: var(--text);
}

#leadMsg.is-success{
  display: block;
  border-color: rgba(32,209,138,.25);
  background: rgba(32,209,138,.08);
  color: #c8f8e3;
}

#leadMsg.is-error{
  display: block;
  border-color: rgba(255,90,106,.22);
  background: rgba(255,90,106,.08);
  color: #ffd6db;
}

#leadMsg.is-info{
  display: block;
  border-color: rgba(51,214,255,.22);
  background: rgba(51,214,255,.08);
  color: #d8f8ff;
}

#leadSubmitBtn.is-loading{
  pointer-events: none;
  opacity: .9;
}

#kontakt #printLeadBtn{
  opacity: .92;
}
#kontakt #printLeadBtn:hover{
  opacity: 1;
}

@media (max-width: 520px){
  #kontakt .booking-box .booking-grid{
    grid-template-columns: 1fr;
    gap: 6px;
  }

  #kontakt .booking-box .booking-value{
    text-align: left;
  }

  #kontakt .consent-row{
    grid-template-columns: 20px 1fr;
  }
}

/* ---------------------------------------
   Feinschliff für neue Inhaltsboxen
   (Über mich / Termin rechts / Kontakt rechts)
---------------------------------------- */

/* Allgemein: result-Boxen mit Listen etwas ruhiger */
.result .check{
  margin-top: 8px;
  gap: 6px;
  line-height: 1.45;
}

/* Über mich: rechte Spalte visuell harmonischer */
#ueber .row2{
  align-items:start;
}

#ueber .row2 > div:last-child{
  align-self: start;
}

#ueber .row2 > div:last-child .result{
  flex: 1 1 auto;
}

/* Über mich: Leadtext minimal angenehmer lesbar */
#ueber .lead{
  max-width: 60ch;
  line-height: 1.6;
}

/* Termin rechte Karte: Boxen sauber staffeln */
#termin .meet-cta{
  align-items:start;
}

#termin .meet-cta > .card.panel .result{
  margin-top: 12px;
}

#termin .meet-cta > .card.panel .result + .result{
  margin-top: 10px;
}

/* Termin rechte Karte: untere Hilfszeile besser lesbar */
#termin .meet-cta > .card.panel .subnote{
  font-size: 12px;
  line-height: 1.6;
  color: rgba(183,194,229,.9);
}

/* Kontakt rechte Karte: "Nach der Zahlung" leicht hervorheben */
#kontakt aside .result + .result{
  border-color: rgba(124,92,255,.22);
  background: linear-gradient(180deg, rgba(124,92,255,.07), rgba(255,255,255,.03));
}

/* Kontakt rechte Karte: Listen in Infoboxen etwas kompakter */
#kontakt aside .result .check{
  padding-left: 16px;
  gap: 6px;
}

/* ---------------------------------------
   Mobile Feinschliff (Hero / Preise / Kontakt)
   Fokus: 390px / kleine Smartphones
---------------------------------------- */

@media (max-width: 420px){

  /* Allgemein etwas kompaktere Abstände */
  :root{
    --pad: 14px;
  }

  section{
    padding: 20px 0;
  }

  /* HERO */
  header.hero{
    padding: 28px 0 12px;
  }

  .hero h1{
    font-size: clamp(24px, 7.2vw, 30px);
    line-height: 1.12;
    letter-spacing: -.2px;
  }

  .lead{
    font-size: 14px;
    line-height: 1.55;
  }

  .steps{
    padding-left: 16px;
  }

  .steps li{
    margin: 5px 0;
    line-height: 1.45;
    font-size: 14px;
  }

  .cta{
    gap: 10px;
  }

  .cta .btn{
    width: 100%;
    min-width: 0;
  }

  .hero-card{
    padding: 14px;
    gap: 10px;
  }

  .hero-card h2{
    margin: 0 0 12px;
    font-size: 14px;
  }

  .li{
    font-size: 13px;
    line-height: 1.45;
  }

  /* Karten / Panels allgemein */
  .panel,
  .meet-card,
  .price{
    padding: 14px;
  }

  .result{
    padding: 12px;
    font-size: 13px;
  }

  /* PREISE */
  .price h3{
    font-size: 15px;
    line-height: 1.25;
  }

  .meta{
    font-size: 12px;
    line-height: 1.4;
  }

  .money{
    font-size: 24px;
    line-height: 1.1;
  }

  .bullets{
    font-size: 13px;
    gap: 7px;
    padding-left: 16px;
  }

  .price .result{
    font-size: 12.5px;
    line-height: 1.4;
  }

  .price-cta .btn{
    width: 100%;
    min-width: 0;
  }

  /* FAQ besser antippbar */
  details{
    padding: 11px 12px;
  }

  summary{
    font-size: 14px;
    line-height: 1.35;
  }

  details p{
    font-size: 13px;
    line-height: 1.5;
  }

  /* KONTAKT / FORM */
  #kontakt .section-head h2{
    line-height: 1.2;
  }

  #kontakt .section-head p{
    font-size: 13px;
    line-height: 1.5;
  }

  /* 2-Spalten-Felder schon früher umbrechen */
  #kontakt .row2{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  label{
    font-size: 12.5px;
  }

  input, select, textarea{
    padding: 11px 12px;
    border-radius: 12px;
    font-size: 16px; /* iOS Zoom vermeiden */
  }

  #kontakt textarea{
    min-height: 108px;
  }

  #kontakt #topicCount{
    font-size: 11.5px;
  }

  /* Buchungsbox */
  #kontakt .booking-box{
    padding: 12px;
    border-radius: 14px;
  }

  #kontakt .booking-box .booking-title{
    font-size: 12.5px;
  }

  #kontakt .booking-box .booking-label,
  #kontakt .booking-box .booking-value{
    font-size: 12.5px;
  }

  #kontakt .booking-box .booking-note{
    font-size: 11.5px;
    line-height: 1.5;
  }

  /* Einwilligungen */
  #kontakt .consent-box{
    padding: 12px;
    gap: 9px;
    border-radius: 14px;
  }

  #kontakt .consent-row{
    grid-template-columns: 20px 1fr;
    gap: 8px;
  }

  #kontakt .consent-row label{
    font-size: 12.5px;
    line-height: 1.45;
  }

  /* Buttons im Formular */
  #kontakt .form-cta{
    gap: 8px;
  }

  #kontakt .form-cta .btn{
    width: 100%;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #kontakt #leadSubmitBtn{
    min-width: 0;
  }

  /* Rechte Kontaktkarte */
  #kontakt aside h3{
    font-size: 15px !important;
  }

  #kontakt aside .result{
    padding: 12px;
  }

  #kontakt aside .result ul{
    line-height: 1.55 !important;
  }

  #kontakt aside .img{
    height: 180px !important;
    max-width: 100% !important;
  }

  /* Termin rechts (neue Boxen) */
  #termin .meet-cta{
  align-items:start;
}

#termin .meet-cta > .card.panel .result{
    margin-top: 10px;
  }

  #termin .meet-cta > .card.panel .subnote{
    font-size: 11.5px;
    line-height: 1.5;
  }

  /* Über mich */
  #ueber .lead{
    font-size: 14px;
    line-height: 1.55;
  }

  #ueber .bullets{
    font-size: 13px;
    padding-left: 16px;
  }
}


/* ---------------------------------------
   Runde 3: Pixel-Feinschliff Desktop + Mobil
---------------------------------------- */

.topbar-inner{
  padding: 14px 0;
}

.brand{
  gap: 14px;
}

.brand div{
  line-height: 1.3;
}

.nav{
  gap: 10px;
}

.nav a{
  padding: 9px 12px;
}

header.hero{
  padding: 58px 0 34px;
}

.hero-grid{
  gap: 20px;
}

.hero-grid > div{
  gap: 22px;
}

.hero h1{
  max-width: 12ch;
  line-height: 1.1;
}

.lead{
  line-height: 1.7;
}

.steps{
  display: grid;
  gap: 8px;
}

.steps li{
  margin: 0;
  line-height: 1.55;
}

.cta{
  gap: 14px;
  margin-top: 2px;
}

.subnote{
  line-height: 1.7;
}

.hero-card{
  padding: 18px;
  gap: 14px;
}

.hero-card h2{
  margin: 0 0 10px;
  font-size: 16px;
}

.list{
  gap: 12px;
}

.li{
  line-height: 1.55;
}

.hero-card .hero-media{
  padding-top: 4px;
}

section{
  padding: 46px 0;
}

.section-head{
  gap: 10px;
  margin-bottom: 18px;
}

.section-head p{
  font-size: 15px;
}

.grid3,
.pricing,
.row2,
.meet-cta{
  gap: 16px;
}

#kompass .panel,
#leistung .grid3 .card,
#ueber .card.panel,
#termin .card.panel,
#kontakt .card.panel,
.meet-card,
.price{
  padding: 20px;
}

#kompass #kompassResult{
  min-height: 124px;
}

#leistung .grid3 .card h3{
  font-size: 18px;
  margin-bottom: 12px;
}

#leistung .grid3 .card p,
#ueber .card p,
#termin .card p,
#kontakt .card p{
  margin-bottom: 0;
}

.bullets{
  gap: 12px;
}

#ueber .row2{
  grid-template-columns: 1.1fr .9fr;
}

#ueber .row2 > div:last-child{
  gap: 12px !important;
}

#ueber .row2 > div:last-child .result{
  min-height: 0;
}

.meet-card .steps-plain{
  display: grid;
  gap: 12px;
}

.meet-card .steps-plain li{
  margin: 0;
  line-height: 1.6;
}

.meet-meta{
  margin-top: 12px;
  gap: 12px;
}

#termin .meet-cta > .card.panel{
  padding-top: 18px;
}

#termin .meet-cta > .card.panel .bullets{
  margin-top: 4px;
}

#termin .meet-cta{
  align-items:start;
}

#termin .meet-cta > .card.panel .result{
  padding: 16px;
}

.price{
  gap: 12px;
}

.price h3{
  font-size: 17px;
}

.meta{
  line-height: 1.55;
}

.money{
  margin-top: 2px;
}

.price .result{
  min-height: 150px;
  line-height: 1.55;
  -webkit-line-clamp: 7;
}

#preise .subnote-wide{
  margin-top: 18px !important;
  margin-bottom: 18px;
}

#fragen .wrap > div[style*="display:grid"]{
  gap: 12px !important;
}

details{
  padding: 16px 18px;
}

summary{
  line-height: 1.45;
}

details[open]{
  background: rgba(255,255,255,.05);
  border-color: rgba(124,92,255,.22);
}

details p{
  margin-top: 14px;
}

#kontakt .section-head{
  margin-bottom: 18px;
}

#kontakt form{
  position: relative;
}

#kontakt .booking-box{
  margin-top: 14px;
  padding: 16px;
}

#kontakt .booking-box .booking-grid{
  gap: 10px 14px;
}

#kontakt .consent-box{
  margin-top: 14px;
  padding: 14px 16px;
  gap: 12px;
}

#kontakt .consent-row label{
  line-height: 1.55;
}

#kontakt .form-cta{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}

#kontakt .form-cta .btn{
  width: 100%;
  min-width: 0;
  margin: 0 !important;
}

#kontakt #leadSubmitBtn{
  grid-column: 1 / -1;
  min-width: 0;
}

#kontakt .form-cta-note{
  margin-top: 12px;
  line-height: 1.65;
}

#kontakt aside{
  gap: 14px;
}

#kontakt aside .result{
  padding: 16px;
}

#kontakt aside .img{
  margin-top: 6px;
}

footer{
  padding: 30px 0 36px;
}

@media (max-width: 980px){
  header.hero{
    padding: 42px 0 24px;
  }

  .hero h1{
    max-width: none;
  }

  #ueber .row2{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px){
  section{
    padding: 34px 0;
  }

  .section-head{
    margin-bottom: 16px;
  }

  #kontakt .form-cta{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px){
  .topbar-inner{
    padding: 12px 0;
  }

  .brand{
    gap: 10px;
  }

  .brand strong{
    font-size: 13px;
  }

  .brand span{
    font-size: 11px;
  }

  .hero-grid > div{
    gap: 18px;
  }

  .section-head p,
  .lead,
  .subnote{
    line-height: 1.6;
  }

  #kompass .panel,
  #leistung .grid3 .card,
  #ueber .card.panel,
  #termin .card.panel,
  #kontakt .card.panel,
  .meet-card,
  .price{
    padding: 16px;
  }

  #kontakt aside .img{
    height: 168px !important;
  }
}


.hero-grid > div:first-child{padding-right:8px}

#leistung .grid3 .card{
  min-height: 246px;
}

#preise .bullets{
  gap: 12px;
}

#preise .money{
  margin: 4px 0 2px;
}

#preise .result.not-included{
  margin-bottom: 8px;
}

#fragen details{
  padding: 16px 18px;
}

#fragen details p{
  max-width: 96ch;
}

#kontakt .meet-cta{
  align-items:start;
}

#kontakt aside .result{
  line-height: 1.6;
}

#kontakt aside .img{
  height: 220px !important;
}

#kontakt .form-cta-note{
  color: rgba(183,194,229,.88);
}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .hero h1{max-width: 13ch;}
  .hero-grid > div:first-child{padding-right:0}
}

@media (max-width: 760px){
  .hero h1{
    font-size: clamp(32px, 9vw, 44px);
    max-width: 13ch;
  }

  #kompass .row2,
  #ueber .row2{
    grid-template-columns: 1fr;
  }
}

/* hero headline reduced again */
.hero h1{
  font-size: clamp(28px, 3.6vw, 44px) !important;
  line-height: 1.08 !important;
  max-width: 11ch !important;
}
@media (max-width: 980px){
  .hero h1{
    font-size: clamp(28px, 5vw, 40px) !important;
    max-width: 12ch !important;
  }
}
@media (max-width: 760px){
  .hero h1{
    font-size: clamp(24px, 7vw, 34px) !important;
    max-width: 12ch !important;
    line-height: 1.1 !important;
  }
}


/* hero compact fix */
header.hero{
  padding: 24px 0 10px;
}
.hero-grid{
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, .9fr);
  gap: 24px;
  align-items: start;
}
.hero-grid > div{
  gap: 10px;
}
.hero h1{
  font-size: clamp(28px, 3.25vw, 42px);
  line-height: 1.06;
  max-width: 26ch;
  letter-spacing: -0.25px;
  text-wrap: balance;
}
.hero .lead{
  margin-top: 2px;
  max-width: 62ch;
}
.hero .subnote{
  margin-top: 0;
  max-width: 62ch;
}
.hero .cta{
  margin-top: 2px;
}
.hero-card{
  padding: 14px;
}
.hero-card h2{
  margin: 0 0 12px;
}
.hero-card .list{
  gap: 8px;
}
.hero-media{
  margin-top: 8px;
}
.img{
  height: 124px;
}
@media (max-width: 980px){
  .hero-grid{
    grid-template-columns: 1fr;
  }
  .hero h1{
    max-width: 16ch;
    text-wrap: pretty;
  }
}


/* hero width fix */
header.hero{padding:24px 0 10px !important;}
.hero-grid{grid-template-columns:minmax(0,1.78fr) minmax(300px,.82fr) !important;gap:22px !important;align-items:start !important;}
.hero-grid > div:first-child{padding-right:10px !important;}
.hero h1{font-size:clamp(30px,3.65vw,50px) !important;line-height:1.06 !important;max-width:none !important;width:auto !important;letter-spacing:-0.35px !important;text-wrap:pretty !important;}
.hero .lead,.hero .subnote{max-width:60ch !important;}
.hero-card{padding:14px !important;}
.hero-card .hero-media{margin-top:10px !important;}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr !important;}.hero-grid > div:first-child{padding-right:0 !important;}.hero h1{max-width:16ch !important;}}