/* ═══════════════════════════════════════════════
   BERATUNG BACHHUBER — Christina Bachhuber
   Stylesheet

   Regeln:
   · Runde Ecken überall, keine harten Kanten
   · Keine Weichzeichner, keine Verläufe, keine
     halbtransparenten Flächen — alles deckend
   · Formen sind eindeutig, nicht angedeutet
   ═══════════════════════════════════════════════ */

:root{
  /* Flächen */
  --creme:#EDE5DF;
  --creme-2:#F6F1ED;
  --sand:#C6BCA9;
  --sand-soft:#DBD3C6;

  /* Blau */
  --blau:#063D9C;
  --hellblau:#5170FF;
  --hellblau-soft:#97A3FB;
  --blau-pale:#DFE3F8;

  /* Schrift & Linien */
  --text:#33302C;
  --text-soft:#5E5850;
  --line:#D5CBBF;
  --line-2:#B0A491;

  --wrap:1140px;

  /* Radius-Skala */
  --r-xs:12px;
  --r-sm:20px;
  --r:32px;
  --r-lg:44px;
  --r-xl:72px;
  --pill:999px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--creme);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.78;font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;              /* Rückfallebene für ältere Browser */
}
/* clip statt hidden: verhindert, dass der Body zu einem eigenen
   Scrollbereich wird — das bremst den klebenden Kopfbereich aus. */
@supports (overflow:clip){
  html,body{overflow-x:clip}
}
/* height:auto ist wichtig: die width/height-Attribute im HTML verhindern
   Layout-Springen beim Laden, würden sonst aber die Höhe fest vorgeben
   und das Bild verzerren, sobald CSS die Breite ändert. */
img{max-width:100%;height:auto;display:block}
a{color:var(--blau)}

/* ─── Typo ─────────────────────────────────── */
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;color:var(--blau);line-height:1.14}
h1{font-size:clamp(2.7rem,5.5vw,4.4rem)}
h2{font-size:clamp(2rem,3.6vw,2.9rem);margin-bottom:1.3rem}
h3{font-size:clamp(1.5rem,2.4vw,1.95rem);margin-bottom:.7rem}
h4{font-family:'Inter',sans-serif;font-size:1.02rem;font-weight:600;color:var(--blau);margin-bottom:.5rem}
p{max-width:66ch;margin-bottom:1.15rem}
p:last-child{margin-bottom:0}
strong{font-weight:500}

.eyebrow{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--blau);margin-bottom:1.4rem;display:block}
.lead{font-size:clamp(1.1rem,1.7vw,1.28rem);line-height:1.7;max-width:58ch;font-weight:300}
.small{font-size:.9rem;line-height:1.72}
.muted{color:var(--text-soft)}

/* ─── Layout ───────────────────────────────── */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
.narrow{max-width:760px}
section{position:relative}
.sec{padding:120px 0}
.sand-bg{background:var(--sand)}
.sand-bg .muted{color:#4A4438}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.grid2.top{align-items:start}
.grid2.narrowleft{grid-template-columns:.85fr 1.15fr}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}

/* ─── Wellen ───────────────────────────────── */
.wave{display:block;width:100%;height:auto;margin-bottom:-1px;pointer-events:none}

/* ─── Header ───────────────────────────────── */
header{position:sticky;top:0;z-index:60;background:var(--creme);border-bottom:1px solid transparent}
header.scrolled{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;
  max-width:var(--wrap);margin:0 auto;padding:18px 40px}
.logo{text-decoration:none;display:block;flex:0 0 auto}
.logo img{height:46px;width:auto;display:block;transform:translateZ(0)}
footer .logo img{height:56px}
@media(max-width:820px){.logo img{height:40px}}
@media(max-width:400px){.logo img{height:34px}}
.nav ul{display:flex;gap:6px;list-style:none;align-items:center}
.nav a{font-size:.88rem;text-decoration:none;color:var(--text);white-space:nowrap;
  padding:9px 13px;border-radius:var(--pill);border:1px solid transparent;transition:.2s}
.nav ul{flex-wrap:nowrap}
.nav a:hover{color:var(--blau);background:var(--creme-2);border-color:var(--line)}
.nav a.active{color:var(--blau);border-color:var(--blau)}
.nav .nav-tel{margin-left:12px}
.nav .nav-tel a{font-weight:500;color:var(--blau)}
.nav .btn-nav{background:var(--blau);color:var(--creme);padding:12px 24px;margin-left:8px;border-color:var(--blau);font-weight:500}
.nav .btn-nav:hover{background:var(--hellblau);color:#fff;border-color:var(--hellblau)}
.burger{display:none;background:none;border:1px solid var(--line);cursor:pointer;
  padding:10px;width:46px;border-radius:var(--pill)}
.burger span{display:block;height:2px;background:var(--blau);margin:5px 0;transition:.3s;border-radius:var(--pill)}

/* ─── Buttons ──────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:11px;background:var(--blau);color:var(--creme);
  padding:16px 32px;border-radius:var(--pill);font-size:.95rem;font-weight:500;
  text-decoration:none;transition:.2s;border:2px solid var(--blau);cursor:pointer;font-family:inherit}
.btn:hover{background:var(--hellblau);border-color:var(--hellblau);color:#fff}
.btn.ghost{background:transparent;color:var(--blau)}
.btn.ghost:hover{background:var(--blau);color:var(--creme);border-color:var(--blau)}
.btn.on-blue{background:transparent;color:var(--creme);border-color:var(--creme)}
.btn.on-blue:hover{background:var(--creme);color:var(--blau)}
.btn.big{font-size:1.05rem;padding:19px 40px}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
.txtlink{color:var(--blau);text-decoration:none;font-size:.92rem;font-weight:500;
  border-bottom:2px solid var(--blau);padding-bottom:2px}
.txtlink:hover{color:var(--hellblau);border-color:var(--hellblau)}

/* ─── Karten & Boxen ───────────────────────── */
.card{background:var(--creme);padding:48px 44px;border-radius:var(--r-lg)}
.card.on-sand{background:var(--creme)}
.card.outline{background:transparent;border:2px solid var(--line)}
.card.blue{background:var(--blau);color:var(--creme)}
.card.blue h2,.card.blue h3,.card.blue h4,.card.blue p,.card.blue .muted{color:var(--creme)}
.card.blue .tag{color:var(--creme);border-color:var(--creme)}

.tag{display:inline-flex;align-items:center;justify-content:center;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--blau);border:2px solid var(--blau);padding:6px 15px;
  border-radius:var(--pill);margin-bottom:22px}
.tag.lg{font-size:.9rem;letter-spacing:.12em;padding:11px 26px;margin-bottom:26px}

.note{background:var(--blau-pale);padding:20px 26px;max-width:62ch;border-radius:var(--r-sm)}
.box{background:var(--sand-soft);padding:42px 44px;border-radius:var(--r-lg);max-width:70ch}
.box-blue{background:var(--blau-pale);padding:42px 44px;border-radius:var(--r-lg);max-width:70ch}
.sand-bg .box{background:var(--creme)}

/* ─── Listen ───────────────────────────────── */
ul.clean{list-style:none;max-width:60ch}
ul.clean li{padding:13px 0 13px 30px;position:relative;border-bottom:1px solid var(--line)}
.sand-bg ul.clean li{border-bottom-color:var(--line-2)}
ul.clean li:last-child{border-bottom:0}
ul.clean li:before{content:"";position:absolute;left:0;top:23px;width:12px;height:2px;
  background:var(--blau);border-radius:var(--pill)}

/* Kontaktwege mit Symbol */
.contact-list{list-style:none;display:grid;gap:20px;max-width:none;margin-bottom:40px}
.contact-list li{display:flex;align-items:center;gap:20px;padding:0;border:0}
.contact-list .ci{flex:0 0 auto;width:54px;height:54px;color:var(--blau);
  border:2px solid var(--blau);border-radius:var(--pill);
  display:flex;align-items:center;justify-content:center}
.contact-list .ci svg{width:24px;height:24px;display:block}
.contact-list .ci-label{display:block;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--blau);margin-bottom:4px}
.contact-list a{font-size:1.05rem;word-break:break-word}
@media(max-width:420px){
  .contact-list .ci{width:46px;height:46px}
  .contact-list .ci svg{width:20px;height:20px}
  .contact-list a{font-size:.95rem}
}

/* Symbole in der Aktionsleiste */
.actionbar svg{width:19px;height:19px;flex:0 0 auto;margin-right:9px}

.steps{counter-reset:s}
.step{counter-increment:s;position:relative;padding-left:80px;margin-bottom:38px}
.step:last-child{margin-bottom:0}
.step:before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:0;
  width:54px;height:54px;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--blau);border-radius:var(--pill);
  font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--blau)}

/* ─── Tabelle / Preise ─────────────────────── */
.table-card{background:var(--sand-soft);border-radius:var(--r-lg);padding:16px 44px;max-width:800px}
.sand-bg .table-card{background:var(--creme)}
table{width:100%;border-collapse:collapse}
td,th{text-align:left;padding:22px 0;border-bottom:1px solid var(--line-2);font-weight:300;vertical-align:top}
tr:last-child td{border-bottom:0}
th{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding-bottom:12px}
td.price{text-align:right;font-family:'Cormorant Garamond',serif;font-size:1.7rem;color:var(--blau);white-space:nowrap}

/* ─── Zitat ────────────────────────────────── */
.quote{font-family:'Cormorant Garamond',serif;font-size:clamp(1.7rem,3.2vw,2.5rem);
  line-height:1.42;color:var(--blau);font-weight:300;max-width:24ch}
.quote-src{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-top:24px;color:var(--blau)}

/* ═══ BILDER & FORMEN ═══════════════════════ */
.imgbox{border-radius:var(--r-lg);overflow:hidden;background:var(--sand-soft)}
.imgbox img{width:100%;height:100%;object-fit:cover}
.square{aspect-ratio:1/1}
.wide{aspect-ratio:16/10}

.imgbox.arch{border-radius:var(--pill) var(--pill) var(--r-lg) var(--r-lg)}
.imgbox.leaf{border-radius:var(--r-xl) 8px var(--r-xl) 8px}
.imgbox.organic{border-radius:52% 48% 44% 56% / 48% 52% 48% 52%}

/* Große Abschnittsüberschrift mit vier Punkten für die vier Schritte */
.h-xl{font-size:clamp(2.6rem,5vw,4.3rem);line-height:1.08;margin-bottom:0}
.dots{display:flex;gap:16px;align-items:center;margin:26px 0 0}
.dots i{width:13px;height:13px;border-radius:var(--pill);background:var(--blau);display:block}

/* Bild unter der Abschnittsüberschrift.
   Früher lief hier eine Aquarell-Illustration randlos in die Fläche.
   Jetzt ist es ein Foto — das braucht eine klare Kante statt Überlauf. */
.illu{margin:38px 0 0;width:100%;max-width:none;height:auto;border-radius:var(--r-lg)}
@media(max-width:980px){
  .h-xl{font-size:clamp(2.2rem,7vw,3rem)}
  .dots{gap:13px;margin-top:20px}
  .dots i{width:11px;height:11px}
  .illu{margin:28px 0 0;width:100%}
}

/* Zitat über dem Fließtext — einzeilig, füllt die Spalte komplett aus.
   Die Schriftgröße wird per JS exakt eingepasst (site.js, fitQuotes). */
.pullquote{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.35;
  color:var(--blau);
  max-width:none;
  margin-bottom:48px;
  white-space:nowrap;
  font-size:2.9cqw;              /* Startwert, bis JS gemessen hat */
  display:block;
}
/* Zitatblock: zentriert, zweizeilig, mit großen Anführungszeichen
   direkt am Textanfang und -ende. */
.quoteblock{display:block;margin:0 0 90px;border:0;padding:0}
.pullquote{
  margin:0;text-align:center;max-width:none;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:700;
  font-size:clamp(1.5rem,2.7vw,2.35rem);
  line-height:1.32;letter-spacing:.005em;
  color:var(--blau);
  transform:translateY(14px);opacity:0;
  transition:transform .6s cubic-bezier(.16,.9,.3,1),opacity .5s ease;
}
.quoteblock.in .pullquote{transform:none;opacity:1}

.pullquote .qm{
  color:var(--hellblau-soft);
  font-size:1.35em;line-height:0;
  vertical-align:-.06em;
  display:inline-block;
  transform:scale(.5);opacity:0;
  transition:transform .65s cubic-bezier(.16,.9,.3,1) .1s,opacity .45s ease .1s;
}
.pullquote .qm:first-child{margin-right:.03em;transform-origin:right bottom}
.pullquote .qm:last-child{margin-left:.03em;transform-origin:left bottom}
.quoteblock.in .pullquote .qm{transform:none;opacity:1}

@media(prefers-reduced-motion:reduce){
  .pullquote,.pullquote .qm{transform:none;opacity:1;transition:none}
}
@media(max-width:980px){
  .quoteblock{margin-bottom:48px}
  .pullquote{font-size:clamp(1.25rem,4.4vw,1.6rem)}
  .pullquote br{display:none}
}

/* Fertige Bild-Formen-Montage (aus Canva, Formen sind im Bild enthalten) */
.collage{display:flex;justify-content:center;align-items:flex-start}
.collage img{max-width:min(100%,380px);max-height:62vh;width:auto;height:auto}
.collage.lg img{max-width:min(100%,540px);max-height:none}
@media(max-width:980px){
  .collage img{max-width:min(100%,300px);max-height:none}
  .collage.lg img{max-width:min(100%,420px)}
}

/* Deko-Formen */
.shape{position:absolute;display:block;z-index:0;pointer-events:none}
.shape.tri{
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%3E%3Cpath%20d='M100,18Q126,18,136,42L178,138Q191,169,158,173L42,173Q9,169,22,138L64,42Q74,18,100,18Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%3E%3Cpath%20d='M100,18Q126,18,136,42L178,138Q191,169,158,173L42,173Q9,169,22,138L64,42Q74,18,100,18Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.shape.blob{border-radius:54% 46% 42% 58% / 46% 54% 46% 54%}
.shape.c-light{background:var(--hellblau-soft)}
.shape.c-sand{background:var(--sand)}
.sand-bg .shape.c-sand{background:var(--sand-soft)}

/* Formen hinter einem gerahmten Bild */
.with-shapes{position:relative}
.with-shapes>.imgbox,.with-shapes>.figure{position:relative;z-index:1}
.with-shapes .p1{width:42%;aspect-ratio:1;left:-9%;top:-8%;transform:rotate(-18deg)}
.with-shapes .p2{width:30%;aspect-ratio:1;right:-7%;bottom:-7%;transform:rotate(24deg)}

/* Versetzter Rahmen hinter dem Bild */
.figure{position:relative}
.figure>.imgbox{position:relative;z-index:1}
.figure:before{content:"";position:absolute;z-index:0;
  left:26px;top:26px;right:-26px;bottom:-26px;
  background:var(--sand);border-radius:var(--r-lg)}
.figure.organic-frame:before{border-radius:52% 48% 44% 56% / 48% 52% 48% 52%}
.figure.leaf-frame:before{border-radius:var(--r-xl) 8px var(--r-xl) 8px}
.sand-bg .figure:before{background:var(--sand-soft)}
.figure.left:before{left:-26px;right:26px}

/* Vollbreites Bildband */
.band{width:min(100% - 52px,1400px);margin:0 auto;height:clamp(300px,40vw,480px);
  object-fit:cover;border-radius:var(--r-xl)}
div.band{display:flex}

/* Bildband, das über einen Wellenübergang hinwegläuft:
   Die Sandfläche beginnt bereits hinter dem Bild. */
.bandzone{position:relative}
.bandzone-bg{position:absolute;left:0;right:0;top:44%;bottom:0;z-index:0;
  display:flex;flex-direction:column}
.bandzone-bg .wave{flex:0 0 auto}
.bandzone-fill{flex:1 1 auto;background:var(--sand)}
.bandzone .band{position:relative;z-index:1}
@media(max-width:820px){.bandzone-bg{top:50%}}

/* ─── Leistungsblöcke ──────────────────────── */
.leistung{padding:100px 0;border-bottom:1px solid var(--line)}
.leistung:last-of-type{border-bottom:0}
.leistung .grid2{gap:80px}
.leistung.flip .imgbox,.leistung.flip .with-shapes{order:2}

/* ─── Formular ─────────────────────────────── */
form{max-width:560px}
.field{margin-bottom:22px}
.field label{display:block;font-size:.82rem;font-weight:500;color:var(--blau);
  margin-bottom:8px;padding-left:22px}
.field input,.field textarea{width:100%;background:var(--creme-2);
  border:2px solid var(--line);border-radius:var(--pill);
  padding:15px 22px;font-family:inherit;font-size:1rem;font-weight:300;color:var(--text)}
.field textarea{min-height:150px;resize:vertical;border-radius:var(--r);padding:18px 22px}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--blau)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.88rem;line-height:1.6;
  margin:26px 0;background:var(--creme-2);padding:18px 22px;border-radius:var(--r)}
.check input{margin-top:5px;width:20px;height:20px;accent-color:var(--blau);flex:0 0 auto}

/* ─── Mobile Aktionsleiste ─────────────────── */
.actionbar{display:none}

/* ─── Footer ───────────────────────────────── */
footer{background:var(--blau);color:var(--creme);padding:80px 0 40px}
footer a{color:var(--creme);text-decoration:none}
footer a:hover{text-decoration:underline}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:60px}
footer ul{list-style:none}
footer li{margin-bottom:11px;font-size:.92rem}
.fbottom{border-top:1px solid #3A64B1;margin-top:60px;padding-top:26px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.84rem}

/* ─── Animation ────────────────────────────── */
.fade{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease}
.fade.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.fade{opacity:1;transform:none;transition:none}}

/* ─── Responsive ───────────────────────────── */
@media(max-width:980px){
  .grid2,.grid2.narrowleft,.grid3,.fgrid{grid-template-columns:1fr;gap:44px}
  .leistung.flip .imgbox,.leistung.flip .with-shapes{order:0}
  .sec{padding:90px 0}
  .leistung{padding:70px 0}
  .figure:before{display:none}
  :root{--r-lg:36px;--r-xl:44px}
}
/* Ab 980 px reicht die Breite für die ausgeschriebene Navigation nicht mehr —
   dann übernimmt das Klappmenü. Die übrigen Mobilregeln greifen erst bei 820 px. */
@media(max-width:980px){
  .nav ul{position:fixed;inset:0 0 0 auto;width:min(82vw,340px);background:var(--creme);
    flex-direction:column;align-items:stretch;justify-content:center;gap:10px;padding:0 30px;
    transform:translateX(100%);transition:transform .3s ease;
    border-left:1px solid var(--line);border-radius:var(--r-lg) 0 0 var(--r-lg)}
  .nav ul.open{transform:none}
  .nav ul a{font-size:1.1rem;padding:13px 20px;border:1px solid var(--line)}
  .nav .nav-tel{display:none}
  .nav .btn-nav{margin-left:0;margin-top:8px;justify-content:center;text-align:center}
  .burger{display:block;position:relative;z-index:70}
  .burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.x span:nth-child(2){opacity:0}
  .burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

@media(max-width:820px){
  .wrap{padding:0 24px}
  .nav{padding:16px 24px}
  .card{padding:38px 30px}
  .box,.box-blue{padding:34px 28px}
  .table-card{padding:6px 28px}
  .row2{grid-template-columns:1fr}
  .band{width:calc(100% - 32px);border-radius:36px}
  body{font-size:16px;padding-bottom:88px}

  /* Termin immer erreichbar */
  .actionbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:var(--creme);border-top:2px solid var(--blau);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .actionbar a{display:flex;align-items:center;justify-content:center;
    padding:15px 10px;border-radius:var(--pill);font-size:.95rem;font-weight:600;
    text-decoration:none;border:2px solid var(--blau)}
  .actionbar .ab-call{background:var(--creme);color:var(--blau)}
  .actionbar .ab-book{background:var(--blau);color:var(--creme)}
}

/* Spamfalle im Formular — darf nicht sichtbar und nicht fokussierbar sein */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fbottom .flinks a{text-decoration:underline;text-underline-offset:3px}
picture{display:block}

/* Fließtext unter dem Zitat sitzt etwas eingerückt */
.pullquote-box > p{max-width:58ch;margin-left:auto}
@media(max-width:980px){.pullquote-box > p{margin-left:0}}

/* ─── Telefon im Kopfbereich ─────────────────
   Auf großen Bildschirmen Symbol + Nummer in der Navigation,
   auf kleinen ein Symbolknopf, der immer sichtbar bleibt. */
.nav-tel a{display:inline-flex;align-items:center;gap:9px}
.nav-tel svg{width:17px;height:17px;flex:0 0 auto}

.tel-mini{display:none}
/* Unterhalb der vollen Inhaltsbreite wird es in der Kopfzeile eng.
   Dann weicht die ausgeschriebene Nummer dem Symbolknopf. */
@media(max-width:1140px){
  .nav .nav-tel{display:none}
  .tel-mini{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;flex:0 0 auto;
    margin-left:auto;margin-right:12px;
    color:var(--blau);border:1px solid var(--line);
    border-radius:var(--pill);text-decoration:none;
  }
  .tel-mini svg{width:19px;height:19px}
  .logo img{height:42px}
}
@media(max-width:820px){
  .tel-mini{
    display:inline-flex;align-items:center;justify-content:center;
    width:46px;height:46px;flex:0 0 auto;
    margin-left:auto;margin-right:10px;
    color:var(--blau);border:1px solid var(--line);
    border-radius:var(--pill);text-decoration:none;
  }
  .tel-mini svg{width:20px;height:20px}
  .tel-mini:active{background:var(--creme-2)}
}

/* ─── Überschriften-Ebenen ───────────────────
   Manche Seiten nutzen nicht alle Ebenen. Damit kein Rang übersprungen
   wird (wichtig für Screenreader), sind die Tags fortlaufend vergeben —
   das Aussehen kommt über diese Klassen. */
.as-h3{font-size:clamp(1.5rem,2.4vw,1.95rem);margin-bottom:.7rem}
.as-h4{
  font-family:'Inter',sans-serif;font-size:1.02rem;font-weight:600;
  color:var(--blau);margin-bottom:.5rem;line-height:1.5;letter-spacing:0;
}
footer .as-h4{
  color:var(--creme);font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:20px;
}

/* ─── Tastaturbedienung ──────────────────────
   Ohne sichtbare Fokusmarkierung ist die Seite mit der Tastatur
   praktisch unbenutzbar. Nur bei Tastaturnutzung, nicht bei Mausklick. */
:focus-visible{
  outline:3px solid var(--hellblau);
  outline-offset:3px;
  border-radius:4px;
}
.btn:focus-visible,.btn-nav:focus-visible,.tel-mini:focus-visible,
.nav a:focus-visible,.actionbar a:focus-visible{outline-offset:4px}
footer a:focus-visible{outline-color:var(--creme)}
.card.blue a:focus-visible{outline-color:var(--creme)}

/* Sprungmarke zum Inhalt */
.skip{
  position:absolute;left:16px;top:-100px;z-index:100;
  background:var(--blau);color:var(--creme);
  padding:14px 24px;border-radius:var(--pill);
  font-size:.92rem;font-weight:500;text-decoration:none;
  transition:top .2s;
}
.skip:focus{top:16px}

/* ─── Hilfsklassen ──────────────────────────
   Ersetzen die früheren style-Attribute im HTML.
   Nötig, damit die Sicherheitsrichtlinie (CSP) ohne
   'unsafe-inline' auskommt. */
.u-bd-0{border:0;}
.u-d-none{display:none;}
.u-d-none_mb-26px{display:none;margin-bottom:26px;}
.u-gap-40px{gap:40px;}
.u-gap-60px{gap:60px;}
.u-gap-70px{gap:70px;}
.u-gap-70px_mt-40px{gap:70px;margin-top:40px;}
.u-gtc-1fr{grid-template-columns:1fr;}
.u-hei-40px{height:40px;}
.u-mb-44px{margin-bottom:44px;}
.u-mt-16px{margin-top:16px;}
.u-mt-18px{margin-top:18px;}
.u-mt-20px{margin-top:20px;}
.u-mt-22px{margin-top:22px;}
.u-mt-24px{margin-top:24px;}
.u-mt-24px_mw-34ch{margin-top:24px;max-width:34ch;}
.u-mt-26px{margin-top:26px;}
.u-mt-28px{margin-top:28px;}
.u-mt-30px{margin-top:30px;}
.u-mt-30px_jc-flex-end{margin-top:30px;justify-content:flex-end;}
.u-mt-32px{margin-top:32px;}
.u-mt-34px{margin-top:34px;}
.u-mt-36px{margin-top:36px;}
.u-mt-44px{margin-top:44px;}
.u-mt-6px{margin-top:6px;}
.u-mt-70px{margin-top:70px;}
.u-mw-15ch{max-width:15ch;}
.u-mw-16ch{max-width:16ch;}
.u-mw-13ch{max-width:13ch;}
.u-mw-17ch{max-width:17ch;}
.u-mw-19ch{max-width:19ch;}
.u-pad-100px-0-50px{padding:100px 0 50px;}
.u-pad-100px-0-60px{padding:100px 0 60px;}
.u-pad-10px-0-90px{padding:10px 0 90px;}
.u-pad-110px-0-40px{padding:110px 0 40px;}
.u-pad-110px-0-70px{padding:110px 0 70px;}
.u-pad-110px-0-80px{padding:110px 0 80px;}
.u-pad-130px-0-110px{padding:130px 0 110px;}
.u-pad-30px-0-100px{padding:30px 0 100px;}
.u-pad-60px-0-100px{padding:60px 0 100px;}
.u-pad-60px-0-70px{padding:60px 0 70px;}
.u-pad-70px-0-100px{padding:70px 0 100px;}
.u-pad-80px-0-100px{padding:80px 0 100px;}
.u-pad-80px-0-110px{padding:80px 0 110px;}
.u-pad-80px-0-120px{padding:80px 0 120px;}
.u-pb-110px{padding-bottom:110px;}
.u-pt-90px{padding-top:90px;}
.u-pb-120px{padding-bottom:120px;}
.u-tex-none_let-0{text-transform:none;letter-spacing:0;}

/* ─── Druckansicht ───────────────────────────
   Wer Preise oder Anfahrt ausdruckt, soll kein
   Menü, keine Wellen und keine Buttons auf dem
   Papier haben. */
@media print{
  header, footer, .actionbar, .skip, .wave,
  .btn, .btns, .burger, .tel-mini{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  .sand-bg, .card, .box, .box-blue, .table-card, .note{background:#fff !important}
  h1,h2,h3,h4,.eyebrow,.price,.quote{color:#000 !important}
  .sec{padding:18pt 0}
  .wrap{max-width:none;padding:0}
  .card, .box, .note, .table-card{border:1pt solid #999;border-radius:0}
  .grid2, .grid3{display:block}
  img, picture{max-width:60mm}
  .collage, .illu{display:none}
  a[href^="http"]:after{content:" (" attr(href) ")";font-size:9pt}
  .fade{opacity:1 !important;transform:none !important}
  main{page-break-inside:auto}
  section{page-break-inside:avoid}
}