:root{
  --offwhite:#FAF9F7;
  --beige:#E9DFD7;
  --blush:#E6CFC5;
  --softgrey:#DADBDC;
  --charcoal:#2F2F2F;
  --text:#2F2F2F;
  --text-80: rgba(47,47,47,.8);
  --text-70: rgba(47,47,47,.7);
  --text-60: rgba(47,47,47,.6);
  --radius:1.25rem;
}
html,body{scroll-behavior:smooth}
body {
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--offwhite);
}

h1, h2, h3, .display-5, .display-6 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600; /* schöne Semibold Headlines */
}
a{color:var(--text);text-decoration:none}
a.link-underline{border-bottom:1px solid rgba(47,47,47,.25);padding-bottom:2px}
a.link-underline:hover{border-color:var(--text)}
.btn{border-radius:999px;padding:.8rem 1.25rem;font-weight:600}
.btn-primary{background:var(--charcoal);border-color:var(--charcoal);color:#fff}
.btn-ghost{background:transparent;border:1px solid var(--softgrey)}
/* Navbar */
.navbar{backdrop-filter:saturate(140%) blur(6px);background:color-mix(in oklab,var(--offwhite) 90%,#fff 10%);box-shadow:0 2px 20px rgba(0,0,0,.04)}
.navbar-brand img{height:36px}
.nav-link{font-weight:600}
/* Layout */
.section{padding:clamp(3rem,6vw,5rem) 0}
.section-narrow{max-width:880px;margin:0 auto}
.hero{background:linear-gradient(180deg,var(--offwhite) 0%, var(--beige) 100%);padding:clamp(4rem,6vw,6rem) 0}
.hero .kicker{display:inline-block;font-weight:600;color:var(--text-60);letter-spacing:.3px;margin-bottom:.5rem}
.hero .hero-mark{width:72px;opacity:.14;margin-top:2rem;filter:grayscale(1) brightness(0)}
.card{border:1px solid var(--softgrey);border-radius:1.25rem;box-shadow:0 10px 30px rgba(0,0,0,.04)}
.footer{background:linear-gradient(180deg,#fff 0%,var(--offwhite) 100%);border-top:1px solid var(--softgrey);padding:40px 0;margin-top:40px}
.footer-mark{height:22px;opacity:.4;filter:grayscale(1) brightness(0)}
.text-charcoal-70{color:var(--text-70)}
/* Active nav on scroll */
.section[id]{scroll-margin-top:92px}
.nav-link.active{border-bottom:2px solid var(--charcoal)}


/* === Inline Icons & Lists === */
.h-icon { display:flex; align-items:center; gap:.5rem; }
.h-icon .i { width:1.1rem; height:1.1rem; }
.ul-icon { list-style:none; padding-left:0; margin:0; }
.ul-icon li { display:flex; gap:.5rem; align-items:flex-start; margin-bottom:.5rem; }
.ul-icon .i-wrap { flex:0 0 auto; line-height:1; transform:translateY(.15rem); }
.h-icon .i, .ul-icon .i { fill:none; stroke:currentColor; stroke-width:1.6; }

/* === Mini Timeline (vertical, two columns) === */
.timeline { 
  --gap: 3rem;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--gap);
  row-gap: 1rem;
  padding: .25rem 0 0;
}
.timeline::before{
  content:"";
  position:absolute;
  left:50%;
  top:0; bottom:0;
  width:2px;
  background: rgba(0,0,0,.08);
  transform: translateX(-1px);
}
.timeline-col { position: relative; }
.timeline-left  .t-item { padding-right: 1.25rem; text-align: right; }
.timeline-right .t-item { padding-left:  1.25rem; text-align: left; }

.t-item { position: relative; margin-bottom:.5rem; }
.t-year { display:block; font-size:.85rem; opacity:.75; margin-bottom:.1rem; }
.t-body { line-height:1.35; }

.timeline-left  .t-item::after,
.timeline-right .t-item::after{
  content:"";
  position:absolute;
  top:.8rem;
  width:10px; height:10px; border-radius:999px;
  background: currentColor;
}
.timeline-left  .t-item::after { right: calc(-.5 * var(--gap) - 5px); }
.timeline-right .t-item::after { left:  calc(-.5 * var(--gap) - 5px); }

/* Mobile stack */
@media (max-width: 767.98px){
  .timeline{
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: .25rem;
    padding-left: 1.25rem;
  }
  .timeline::before{ left:.25rem; transform:none; }
  .timeline-left .t-item,
  .timeline-right .t-item{ text-align:left; padding-left:1rem; padding-right:0; }
  .timeline-left .t-item::after,
  .timeline-right .t-item::after{ left:-.25rem; right:auto; }
}

/* Small spacing tweak for intro next to image on smaller desktops */
@media (max-width: 991.98px){
  #ueber .col-lg-7 { margin-top:.25rem; }
}


/* Timeline headings align to the center rail */
.timeline-left  .h-icon { text-align: right; padding-right: 1.25rem; }
.timeline-right .h-icon { text-align: left;  padding-left:  1.25rem; }
/* Optional small dot for headings too (consistency) */
.timeline-left  .h-icon::after,
.timeline-right .h-icon::after{
  content:"";
  position:relative;
  display:inline-block;
  width:8px; height:8px; border-radius:50%;
  background: currentColor;
  margin-left:.4rem;
  transform: translateY(.08rem);
}
.timeline-left  .h-icon::after { margin-left: .4rem; } /* stays on the right side visually */
@media (max-width: 767.98px){
  .timeline-left  .h-icon,
  .timeline-right .h-icon{ padding: 0 0 0 1rem; text-align:left; }
  .timeline-left  .h-icon::after,
  .timeline-right .h-icon::after{ margin-left:.4rem; }
}

/* Subtle star icon size */
.i-star { width: 1rem; height: 1rem; }


/* Four-point star bullets (diamond) */
.i-star4 { width: 1rem; height: 1rem; }


/* Softer 4-point sparkle (✦-like) */
.i-star4 { width: .85rem; height: .85rem; display:inline-block; }
.i-star4 path { fill: currentColor; stroke: none; }

/* --- Icon-Badges für Behandlungsangebot --- */
.icon-badge{
  width: 72px; height: 72px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--badge-bg, rgba(0,0,0,.04));
  margin-bottom: .75rem;
}
.icon-badge .i{
  width: 32px; height: 32px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
}

/* Einheitliche Icon-Badge */
.icon-badge{
  --badge-bg: rgba(233, 223, 215, .35); /* warmes Beige, soft */
  width: 72px; height: 72px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--badge-bg);
  margin-bottom: .75rem;
}
.icon-badge .i{
  width: 32px; height: 32px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
}
@media (min-width: 992px){
  .icon-badge{ width: 80px; height: 80px; }
  .icon-badge .i{ width: 36px; height: 36px; }
}

/* Disclosure (Details) – wie zuvor, falls noch nicht vorhanden */
.disclosure { border: 1px solid rgba(0,0,0,.08); border-radius: .5rem; padding: .5rem .75rem; background: rgba(0,0,0,.02); }
.disclosure > summary { cursor: pointer; list-style: none; font-weight: 600; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after { content: "▸"; float: right; transition: transform .2s ease; transform: translateY(1px); }
.disclosure[open] > summary::after { transform: rotate(90deg) translateX(-1px); }
.disclosure ul { padding-left: 1.1rem; }
.disclosure li { margin-bottom: .25rem; }

/* --- Flowdiagramm --- */
.flow{
  display:grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; /* Step, Arrow, ... */
  align-items:start;
  gap: 1rem 1.25rem;
}
.flow-step{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: .75rem;
  padding: 1.25rem 1rem;
  text-align: center;
}
.flow .icon-badge{
  --badge-bg: rgba(233,223,215,.35); /* einheitlich & warm */
  width: 80px; height: 80px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 999px; background: var(--badge-bg);
  margin-bottom:.5rem;
}
.flow .icon-badge .i{
  width: 36px; height: 36px;
  fill:none; stroke:currentColor; stroke-width:1.6;
}
.flow-title{ margin:.25rem 0 .25rem; display:flex; gap:.4rem; align-items:center; justify-content:center; }
.flow-title .nr{
  flex-shrink: 0; display:inline-flex; align-items:center; justify-content:center;
  width: 1.6em; height: 1.6em; border-radius: 999px; aspect-ratio: 1;
  font-size:.85em; line-height:1; border:1px solid currentColor; opacity:.7;
}
.flow-text{ margin:0; color: rgba(0,0,0,.7); }

.flow-arrow{
  display:flex; align-items:center; justify-content:center;
  min-width: 36px;
}
.flow-arrow svg{
  width: 48px; height: 24px;
  fill:none; stroke: currentColor; stroke-width: 1.6;
  opacity:.5;
}

/* Pfeile vertikal mittig im Grid ausrichten */
.flow { align-items: stretch; }     /* Steps dürfen unterschiedlich hoch sein */
.flow-step { height: 100%; }        /* Karten füllen die Zelle, für saubere Mitte */
.flow-arrow { align-self: center; } /* ← das zentriert die Pfeile vertikal */

/* Mobile: vertikal mit Pfeilen nach unten */
@media (max-width: 991.98px){
  .flow{
    grid-template-columns: 1fr;
  }
  .flow-arrow{
    transform: rotate(90deg);
    margin: -0.25rem 0; 
  }
}

/* --- Kosten (Accordion) --- */
.costs{ display:grid; gap:.5rem; }
.cost{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .6rem;
  background: rgba(0,0,0,.02);
  padding: .5rem .75rem;
}
.cost > summary{
  cursor: pointer; list-style: none; font-weight: 600;
  display:flex; align-items:center; gap:.5rem;
}
.cost > summary::-webkit-details-marker{ display:none; }
.cost > summary::after{
  content:"▸"; margin-left: auto; transition: transform .2s ease;
  transform: translateY(1px);
}
.cost[open] > summary::after{ transform: rotate(90deg) translateX(-1px); }
.cost-body{ padding-top:.5rem; color: rgba(0,0,0,.78); }

/* Überschriften an die Mittelachse ausrichten */
.timeline-left .h-icon  { justify-content: flex-end; padding-right: 1.25rem; }
.timeline-right .h-icon { justify-content: flex-start; padding-left:  1.25rem; }

/* Falls frühere Regeln Punkte an den Headings erzeugt haben – hier deaktivieren */
.timeline-left .h-icon::after,
.timeline-right .h-icon::after {
  content: none !important;
  display: none !important;
}

/* Mobile: wieder einheitlich links ausrichten */
@media (max-width: 767.98px){
  .timeline-left .h-icon,
  .timeline-right .h-icon{
    justify-content: flex-start;
    padding: 0 0 0 1rem; /* wie bei den Items */
  }
}

/* Logo etwas größer, mit sanfter Balance */
.navbar .brand-mark { height: 40px; width: auto; }

/* Name + Rolle nebeneinander, mit feiner Typo */
.navbar .brand-lockup {
  display: inline-flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}

.navbar .brand-name {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 1.35rem;            /* Desktop-Größe */
  line-height: 1;
}

.navbar .brand-role {
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;
  font-size: .72rem;             /* kleiner als Name */
  letter-spacing: .08em;         /* CAPS-Feeling */
  line-height: 1.1;
  opacity: .85;                  /* dezent */
}

/* auf kleineren Screens die Rolle unter den Namen umbrechen */
@media (max-width: 575.98px){
  .navbar .brand-lockup { gap: .25rem; }
  .navbar .brand-name  { font-size: 1.2rem; }
  .navbar .brand-role  { font-size: .68rem; display: block; }
}

/* Toggler-Icon zuverlässig sichtbar (helles Navbar-Schema) */
.navbar.navbar-light .navbar-toggler { border: 0; }
.navbar.navbar-light .navbar-toggler:focus { box-shadow: none; }

/* Brand: immer gestapelt (Name oben, Rolle darunter) */
.navbar .brand-lockup {
  display: inline-flex;
  flex-direction: column;       /* <- Stack */
  align-items: flex-start;      /* links bündig */
  gap: .15rem;
}

.navbar .brand-name {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.05;
}

.navbar .brand-role {
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;
  font-size: .7rem;             /* etwas kleiner als zuvor */
  letter-spacing: .08em;
  line-height: 1.1;
  opacity: .85;
}

/* Logo minimal größer, damit der Stack ausgewogen wirkt */
.navbar .brand-mark { height: 42px; width: auto; }

@media (min-width: 992px){
  .navbar .brand-name { font-size: 1.45rem; }
  .navbar .brand-role { font-size: .72rem; }
  .navbar .brand-lockup { gap: .2rem; }
}

/* Sticky Portrait im Über-mich-Bereich (nur Desktop) */
@media (min-width: 992px){
  #ueber .col-lg-5 { 
    position: sticky; 
    top: 110px;       /* Abstand unter der Navbar */
    height: fit-content;
  }
}

/* Feinabstimmung Abstände im Über-mich-Block */
#ueber .lead { margin-bottom: .75rem; }
#ueber .ul-icon li { margin-bottom: .35rem; }

/* Reiter-Styling für "Bin ich hier richtig?" */
.nav-pills .nav-link {
  border: 1px solid var(--softgrey);
  font-weight: 600;
}
.nav-pills .nav-link.active {
  background: var(--charcoal);
  border-color: var(--charcoal);
}

/* Tabs in Karte "Bin ich hier richtig?" – Farben an Palette anpassen */
.nav-pills .nav-link{
  color: var(--text) !important;           /* Text statt Blau */
  background: transparent;
  border: 1px solid var(--softgrey);
  font-weight: 600;
}
.nav-pills .nav-link:hover{
  color: var(--text) !important;
  background: rgba(0,0,0,.03);
}
.nav-pills .nav-link.active{
  color: #fff !important;                  /* Weißer Text auf aktiv */
  background: var(--charcoal) !important;  /* Deine Primärfarbe */
  border-color: var(--charcoal) !important;
}

/* Optional: schöner Fokusrahmen für Tastatur-Nutzer */
.nav-pills .nav-link:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--charcoal) 60%, #fff 40%);
  outline-offset: 2px;
}

/* Runde, beige Badges mit den bestehenden dünnen Line-Icons */
#Behandlungsangebot .icon-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width: 88px; height: 88px; border-radius: 999px;
  background: var(--beige);
  border: 1px solid var(--softgrey);
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
  margin-bottom: .9rem;
}
#Behandlungsangebot .icon-badge .i{
  width: 40px; height: 40px;      /* Icon-Größe in der Badge */
  stroke: currentColor; fill: none; stroke-width: 1.6;
  color: var(--charcoal);
}
@media (min-width: 992px){
  #Behandlungsangebot .icon-badge{ width: 96px; height: 96px; }
  #Behandlungsangebot .icon-badge .i{ width: 44px; height: 44px; }
}

/* ---- Google Maps Styling ---- */
.map-consent {
  background: #faf9f7;
  border: 1px solid #e9dfd7;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
}

/* Wrapper, damit Höhe kontrollierbar bleibt */
.map-wrapper {
  width: 100%;
  height: 300px; /* Höhe anpassbar */
  border-radius: 1rem;
  overflow: hidden;
}

.map-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
/* ---- Google Maps Styling ---- */
.map-consent {
  background: #faf9f7;
  border: 1px solid #e9dfd7;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
}

/* Karte: halb so groß + mit sanfter Einblendung */
.map-wrapper {
  width: 100%;
  height: 150px; /* <<< halb so hoch wie vorher */
  border-radius: 1rem;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.map-wrapper.loaded {
  opacity: 1;
}

.map-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ---- Hero Header Höhe feinjustiert ---- */
#hero {
  min-height: 90vh;          /* statt 100vh – etwas kompakter */
  display: flex;
  align-items: center;
  padding-top: 4rem;         /* Abstand unter Navbar */
  padding-bottom: 3rem;
}

/* Für Tablets und kleiner: noch kompakter */
@media (max-width: 991px) {
  #hero {
    min-height: 65vh;
    padding-top: 5rem;
  }
}

/* Für sehr kleine Screens (Smartphones): normale Sektion */
@media (max-width: 575px) {
  #hero {
    min-height: auto;
    padding-top: 5rem;
    padding-bottom: 3rem;
  }
}

/* ---- Feinanpassung: Textbereich im Hero leicht höher setzen ---- */
#hero .col-lg-6.order-lg-1 {
  margin-top: -2rem; /* leicht nach oben geschoben */
}

/* optional: etwas mehr Abstand bei kleineren Screens */
@media (max-width: 991px) {
  #hero .col-lg-6.order-lg-1 {
    margin-top: 0;
  }
}

/* Letzte Inhaltssektion ganz unten bündig abschließen */
.section:last-of-type {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Falls #kontakt eigene Abstände hat, zusätzlich hart kappen */
#kontakt {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* --- Navbar-Brand: robust auf sehr kleinen Screens --- */
.navbar .navbar-brand{ min-width: 0; }          /* darf schrumpfen */
.navbar .brand-lockup{ flex: 1 1 auto; }        /* Text nutzt Restbreite */
.navbar .brand-mark{ flex: 0 0 auto; }          /* Logo behält Größe */

/* iPhone SE / sehr schmale Geräte */
@media (max-width: 400px){
  .navbar .brand-name { font-size: 1.05rem; }   /* vorher ~1.35rem */
  .navbar .brand-role { font-size: .60rem; letter-spacing: .06em; }
  .navbar .brand-mark { height: 36px; }         /* Logo leicht kleiner */
}

/* Ultra-schmale Geräte / wenn es immer noch eng wird */
@media (max-width: 340px){
  .navbar .brand-name { font-size: 1rem; }
  .navbar .brand-role { font-size: .55rem; }
  /* Notfalloption: Rolle ausblenden, falls gewünscht */
  /* .navbar .brand-role { display:none; } */
}

/* Nur die beiden Hero-Buttons anpassen */
#hero .btn.btn-lg{
  /* skaliert sanft: auf großen Screens bleibt es 1rem, auf kleinen wird's kleiner */
  font-size: clamp(0.85rem, 3.2vw, 1rem);
}

/* Extra knapp auf wirklich kleinen iPhones */
@media (max-width: 390px){
  #hero .btn.btn-lg{ 
    font-size: 0.85rem; 
    padding: .7rem 1rem;              /* minimal kompakter, gleicher Stil */
  }
  #hero .d-flex.gap-3{ gap: .5rem !important; }  /* etwas weniger Abstand */
}

/* Allerkleinste Geräte */
@media (max-width: 340px){
  #hero .btn.btn-lg{ 
    font-size: 0.8rem; 
    padding: .65rem .9rem;
  }
}