/* herzpaar.ch — Gestaltung 2026 (Startseite und alle Unterseiten)
   Hell und warm wie Abendlicht über der Alpwiese. Eine Display-Schrift (Instrument Serif),
   eine Textschrift (Hanken Grotesk), ein Akzent (Abendrot-Rosé aus dem Herz-Favicon). */

@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/HankenGrotesk-normal.woff2) format("woff2")}

:root{
  --papier:#F7F1E9; --papier-2:#EFE4D6; --papier-3:#E3D3C0; --weiss:#FFFDF9;
  --tinte:#2A1F1A; --grau:#5E5048; --rose:#8E434A; --rose-dunkel:#74343A; --rose-hell:#D9A7A0;
  --gold:#C99A55; --gold-hell:#E7B98A; --nacht:#221815; --licht:#F4E9DD; --licht-grau:#CDBFB2;
  --serif:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --rand:clamp(16px,5vw,72px); --breit:1320px; --ease:cubic-bezier(.2,.7,.2,1); --feder:cubic-bezier(.34,1.56,.64,1);
  /* Namen aus der Vorfassung, von Inline-Stilen der Unterseiten noch benutzt */
  --ink:var(--tinte); --ink-faint:var(--grau);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--tinte);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main{display:block;overflow-x:clip}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:var(--rose);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--rose-dunkel)}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05;letter-spacing:-.005em;margin:0 0 .45em;overflow-wrap:break-word;hyphens:auto}
h2{font-size:clamp(2.1rem,4.8vw,4rem)}
h3{font-size:clamp(1.55rem,2.4vw,2.1rem);line-height:1.1}
h1 em,h2 em,h3 em{font-style:italic;color:var(--rose)}
figure{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:2px}
:where(.hero,.page-hero,.zahlen,.kontakt,.fuss,.menue,.leuchtkasten,.pkg.featured) :focus-visible{outline-color:var(--gold-hell)}

.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--tinte);color:var(--papier);padding:12px 18px;border-radius:2px;text-decoration:none;font-weight:600}
.skip:focus{top:12px;color:var(--papier)}

.eyebrow{font:600 .78rem/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--rose);margin:0 0 18px}

/* ---------- Kopf ---------- */
.kopf{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px var(--rand);color:var(--licht);transition:background-color .4s var(--ease),box-shadow .4s,padding .4s var(--ease),color .3s}
.kopf--fest,.kopf-hell .kopf{background:rgba(247,241,233,.97);color:var(--tinte);box-shadow:0 1px 0 rgba(42,31,26,.08);padding-top:8px;padding-bottom:8px}
.marke{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;min-height:44px;flex-wrap:wrap;min-width:0}
.marke:hover{color:inherit}
.marke__herz{width:18px;height:18px;fill:var(--gold-hell);transition:transform .6s var(--feder)}
.kopf--fest .marke__herz,.kopf-hell .kopf .marke__herz{fill:var(--rose)}
.marke:hover .marke__herz{transform:scale(1.2) rotate(-8deg)}
.marke__wort{font:400 1.85rem/1 var(--serif);letter-spacing:.01em}
.marke__zusatz{font:600 .62rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;padding-top:4px}
.nav{display:flex;align-items:center;gap:2px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:inherit;text-decoration:none;font:500 .93rem/1 var(--sans);position:relative}
.nav a:not(.nav__cta)::after{content:"";position:absolute;left:12px;right:12px;bottom:10px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav__cta{border:1px solid currentColor;border-radius:999px;margin-left:10px;padding:0 20px !important;transition:background-color .3s,color .3s}
.nav__cta:hover{background:var(--rose);border-color:var(--rose);color:#fff !important}
.burger{display:none;width:48px;height:48px;border:0;background:transparent;cursor:pointer;position:relative;z-index:70;color:inherit;border-radius:50%}
.burger span{position:absolute;left:12px;right:12px;height:1.5px;background:currentColor;transition:transform .45s var(--ease),top .45s var(--ease)}
.burger span:first-child{top:19px}.burger span:last-child{top:28px}
.burger[aria-expanded="true"]{color:var(--licht)}
.burger[aria-expanded="true"] span:first-child{top:24px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:24px;transform:rotate(-45deg)}
.menue{position:fixed;inset:0;z-index:60;background:var(--nacht);display:flex;align-items:center;padding:90px var(--rand) 40px;opacity:0;transition:opacity .4s var(--ease)}
.menue[hidden]{display:none}
.menue.offen{opacity:1}
.menue nav{display:flex;flex-direction:column;gap:2px}
.menue a{font:400 clamp(2rem,8vw,3rem)/1.15 var(--serif);color:var(--licht);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;transform:translateY(16px);opacity:0;transition:transform .6s var(--ease),opacity .6s var(--ease),color .3s}
.menue.offen a{transform:none;opacity:1}
.menue.offen a:nth-child(2){transition-delay:.04s}.menue.offen a:nth-child(3){transition-delay:.08s}.menue.offen a:nth-child(4){transition-delay:.12s}.menue.offen a:nth-child(5){transition-delay:.16s}.menue.offen a:nth-child(6){transition-delay:.2s}.menue.offen a:nth-child(7){transition-delay:.24s}
.menue a:hover{color:var(--gold-hell)}
.menue__cta{font-style:italic !important;color:var(--gold-hell) !important}
.kopf.ist-offen{background:transparent;box-shadow:none;color:var(--licht);z-index:65}
.kopf.ist-offen .marke__herz{fill:var(--gold-hell)}
.kopf.ist-offen .marke{position:relative;z-index:70}
@media (max-width:1060px){.nav{display:none}.burger{display:block}}
@media (max-width:480px){.marke__zusatz{display:none}.marke__wort{font-size:1.7rem}}

/* ---------- Knöpfe ---------- */
.knopf,.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;font:600 .95rem/1.2 var(--sans);letter-spacing:.02em;text-decoration:none;cursor:pointer;border:1px solid transparent;text-align:center;transition:background-color .35s,color .35s,border-color .35s,translate .6s var(--ease)}
.knopf--voll,.btn-primary{background:var(--rose);color:#fff}
.knopf--voll:hover,.btn-primary:hover{background:var(--rose-dunkel);color:#fff}
.knopf--hell{border-color:rgba(255,253,249,.75);color:#fff}
.knopf--hell:hover{background:var(--weiss);color:var(--tinte)}
.knopf--linie,.btn-outline{border-color:var(--tinte);color:var(--tinte);background:transparent}
.knopf--linie:hover,.btn-outline:hover{background:var(--tinte);color:var(--papier)}
.btn-light{background:var(--weiss);color:var(--tinte)}
.btn-light:hover{background:var(--gold-hell);color:var(--tinte)}
.pfeil{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-weight:600;text-decoration:none;color:var(--rose)}
.pfeil::after,.leistung__mehr::after{content:"";width:26px;height:1px;background:currentColor;box-shadow:inset 0 0 0 1px currentColor;transition:width .45s var(--ease)}
.pfeil:hover::after{width:40px}

/* ---------- Einblenden ---------- */
.auf{opacity:0;animation:auf 1s var(--ease) var(--d,0s) forwards}
@keyframes auf{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.js .zeige,.js .reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease) var(--d,0s),transform 1.1s var(--ease) var(--d,0s)}
.js .zeige:nth-child(2n),.js .reveal:nth-child(2n){transition-duration:1.05s,1.3s}
.js .zeige:nth-child(3n),.js .reveal:nth-child(3n){transition-duration:.8s,.95s}
.js .zeige.in,.js .reveal.in{opacity:1;transform:none}
.reveal.d1{--d:.1s}.reveal.d2{--d:.2s}.reveal.d3{--d:.3s}

/* Gezeichnete Symbole: zeichnen sich beim Erscheinen, wippen beim Überfahren */
.ikon{width:46px;height:46px;flex:none;fill:none;stroke:var(--rose);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .7s var(--feder),stroke .4s}
.js .ikon *{transition:stroke-dashoffset 1.5s var(--ease) calc(var(--d,0s) + .25s)}
:is(li,a,.schritt):hover>.ikon,:is(.leistung,.weg):hover .ikon{transform:rotate(-8deg) scale(1.1);stroke:var(--gold)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:max(640px,100svh);display:grid;align-items:end;color:#fff;isolation:isolate;overflow:hidden;background:var(--nacht)}
.hero__buehne{position:absolute;inset:0;z-index:-1}
.hero__foto{position:absolute;top:0;left:0;width:100%;max-width:none;height:100%;object-fit:cover;object-position:52% 40%}
.hero__kulisse{position:absolute;inset:0;width:100%;height:100%}
.hero__schleier{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(28,19,16,.6) 0%,rgba(28,19,16,0) 24%),
  linear-gradient(0deg,rgba(28,19,16,.95) 0%,rgba(28,19,16,.9) 50%,rgba(28,19,16,.84) 64%,rgba(28,19,16,.45) 82%,rgba(28,19,16,.2) 100%)}
@media (min-width:900px){
  .hero__foto{width:130%;object-position:0 36%}
  .hero__schleier{background:
    linear-gradient(180deg,rgba(28,19,16,.86) 0%,rgba(28,19,16,.68) 9%,rgba(28,19,16,0) 25%),
    linear-gradient(90deg,rgba(28,19,16,.9) 0%,rgba(28,19,16,.87) 42%,rgba(28,19,16,.6) 58%,rgba(28,19,16,.14) 80%,rgba(28,19,16,.04) 100%),
    linear-gradient(0deg,rgba(28,19,16,.6) 0%,rgba(28,19,16,0) 38%)}
  .hero__inhalt{max-width:min(980px,56vw)}
  .hero__titel{font-size:clamp(3rem,6.1vw,7rem)}
}
.hero__inhalt{position:relative;padding:130px var(--rand) clamp(120px,15vw,210px);max-width:980px}
.hero__eyebrow{color:var(--gold-hell);display:inline-block;background:rgba(28,19,16,.66);padding:8px 12px 7px;border-left:2px solid var(--gold-hell);line-height:1.45}
.hero__titel{font-size:clamp(3rem,8.6vw,7.4rem);line-height:.93;margin:0 0 .32em;letter-spacing:-.015em}
.zeile{display:block}
.zeile--anders{padding-left:clamp(.3em,4vw,1.1em)}
.zeile--anders em{color:var(--gold-hell);font-style:italic}
.hero__unter{font-size:clamp(1.06rem,1.5vw,1.28rem);line-height:1.55;max-width:34ch;color:var(--licht);margin:0}
.hero__knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__schluss{margin:30px 0 0;font-size:.86rem;letter-spacing:.05em;color:var(--licht);display:flex;align-items:center;gap:12px}
.hero__schluss::before{content:"";width:34px;height:1px;background:var(--gold-hell);flex:none}
.hero__weiter{position:absolute;right:var(--rand);bottom:clamp(110px,13vw,190px);display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--licht);text-decoration:none;font:600 .7rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;min-width:44px;min-height:44px;padding:6px 0}
.hero__weiter::after{content:"";width:1px;height:54px;background:linear-gradient(var(--gold-hell),transparent);animation:tropfen 2.4s var(--ease) infinite}
@keyframes tropfen{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero__weiter span{writing-mode:vertical-rl;background:rgba(28,19,16,.66);padding:10px 6px}
@media (max-width:700px){.hero__weiter{display:none}}
.hero__kante{position:absolute;left:0;bottom:-1px;width:100%;height:clamp(46px,8vw,120px);pointer-events:none}
.kante--hinten{fill:var(--papier-2);opacity:.45}
.kante--vorne{fill:var(--papier-2)}

/* ---------- Laufband ---------- */
.band{background:var(--papier-2);overflow:hidden;padding:8px 0 30px}
.band__spur{display:flex;align-items:center;gap:28px;width:max-content;animation:laufen 70s linear infinite;font:italic 400 clamp(1.6rem,3vw,2.5rem)/1.2 var(--serif);color:var(--tinte)}
.band__spur span{white-space:nowrap}
.band__spur i{width:8px;height:8px;border-radius:50%;background:var(--rose);flex:none}
.band:hover .band__spur{animation-play-state:paused}
@keyframes laufen{to{transform:translateX(-50%)}}

/* ---------- Abschnitte allgemein ---------- */
.vertrauen,.sorge,.leistungen,.galerie,.stimmen,.ueber,.ablauf,.fragen{padding:clamp(80px,11vw,170px) var(--rand)}
.vertrauen>*,.sorge>*,.stimmen>*,.ueber>*,.ablauf>*,.fragen>*{min-width:0}
.kopfzeile{max-width:760px;margin:0 0 clamp(40px,6vw,80px)}
.kopfzeile--rechts{margin-left:auto;margin-right:clamp(0px,6vw,110px)}
.kopfzeile__lead{font-size:1.15rem;color:var(--grau);max-width:46ch}

/* ---------- Vertrauensanker ---------- */
.vertrauen{display:grid;gap:clamp(40px,6vw,90px);max-width:var(--breit);margin:0 auto}
@media (min-width:900px){.vertrauen{grid-template-columns:1.05fr 1fr;align-items:start}.vertrauen__liste{margin-top:clamp(40px,7vw,110px)}}
.vertrauen__zitat{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,34px);align-items:start}
.vertrauen__zitat img{width:clamp(96px,14vw,180px);aspect-ratio:1;object-fit:cover;border-radius:50% 50% 50% 8px}
.vertrauen__zitat blockquote{margin:0}
.vertrauen__zitat blockquote p{font:italic 400 clamp(1.55rem,2.8vw,2.45rem)/1.18 var(--serif);margin:0 0 16px}
.vertrauen__zitat footer{font:600 .8rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--rose)}
.vertrauen__liste h2{font:600 .78rem/1.3 var(--sans);letter-spacing:.18em}
.vertrauen__liste ul{list-style:none;margin:0;padding:0}
.vertrauen__liste li{display:grid;grid-template-columns:46px 1fr;gap:18px;align-items:start;padding:20px 0;border-top:1px solid var(--papier-3)}
.vertrauen__liste li:last-child{border-bottom:1px solid var(--papier-3)}
.vertrauen__liste li p{margin:4px 0 0;color:var(--grau)}
.vertrauen__liste b{color:var(--tinte);font-weight:600}

/* ---------- Problem und Lösung ---------- */
.sorge{display:grid;gap:clamp(56px,7vw,110px);max-width:var(--breit);margin:0 auto}
@media (min-width:900px){.sorge{grid-template-columns:.9fr 1.1fr;align-items:center}}
.sorge__bilder{position:relative;padding-bottom:clamp(60px,9vw,120px)}
.sorge__gross{width:72%}
.sorge__gross img{width:100%;aspect-ratio:4/5;object-fit:cover}
.sorge__klein{position:absolute;right:0;bottom:0;width:58%;border:clamp(6px,1vw,10px) solid var(--papier)}
.sorge__klein img{width:100%;aspect-ratio:4/3;object-fit:cover}
.sorge__notiz{position:absolute;left:0;bottom:-8px;width:40%;font:italic 400 1.05rem/1.3 var(--serif);color:var(--grau);margin:0}
@media (max-width:560px){.sorge__notiz{position:static;width:auto;margin-top:18px}.sorge__bilder{padding-bottom:0}.sorge__klein{position:relative;margin:-22% 0 0 auto}}
.sorge__text h2{font-size:clamp(2rem,4.3vw,3.6rem)}
.sorge__lead{font-size:1.15rem;color:var(--grau);max-width:52ch}
.sorge__paare{margin:36px 0 0}
.sorge__paare>div{padding:0 0 0 22px;border-left:1px solid var(--rose-hell);margin-bottom:28px}
.sorge__paare dt{font:italic 400 1.5rem/1.2 var(--serif);color:var(--rose);margin-bottom:6px}
.sorge__paare dd{margin:0;color:var(--grau);max-width:56ch}

/* ---------- Leistungen ---------- */
.leistungen{max-width:calc(var(--breit) + 2*var(--rand));margin:0 auto}
.leistungen__raster{display:grid;gap:clamp(56px,7vw,90px) 28px}
.leistung{display:block;color:inherit;text-decoration:none;position:relative}
.leistung:hover{color:inherit}
.leistung figure{overflow:hidden;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .8s var(--ease);will-change:transform}
.leistung img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.leistung:hover img{transform:scale(1.045)}
.leistung--1 figure{aspect-ratio:4/5}.leistung--2 figure{aspect-ratio:1/1}.leistung--3 figure{aspect-ratio:21/9}.leistung--4 figure{aspect-ratio:3/2}
.leistung__text{position:relative;padding-top:22px;max-width:52ch}
.leistung__text .ikon{position:absolute;right:0;top:20px}
.leistung__nr{font:italic 400 1.1rem/1 var(--serif);color:var(--rose);display:block;margin-bottom:8px}
.leistung__text h3{padding-right:60px}
.leistung__text p{color:var(--grau)}
.leistung__mehr{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:.93rem;color:var(--rose)}
.leistung:hover .leistung__mehr::after{width:40px}
.leistung:focus-visible{outline-offset:8px}
@media (min-width:900px){
  .leistungen__raster{grid-template-columns:repeat(12,1fr)}
  .leistung--1{grid-column:1/span 5}
  .leistung--2{grid-column:7/span 5;margin-top:clamp(80px,10vw,160px)}
  .leistung--3{grid-column:2/span 11}
  .leistung--3 .leistung__text{background:var(--papier);margin:-110px 0 0 6%;padding:30px 36px 6px;width:min(560px,70%)}
  .leistung--3 .leistung__text .ikon{right:32px;top:28px}
  .leistung--4{grid-column:5/span 6}
}

/* ---------- Zahlen ---------- */
.zahlen{position:relative;isolation:isolate;overflow:hidden;color:var(--licht);padding:clamp(100px,14vw,200px) var(--rand)}
.zahlen__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.zahlen__schleier{position:absolute;inset:0;background:rgba(28,19,16,.76);z-index:-1}
.zahlen__inhalt{max-width:var(--breit);margin:0 auto}
.zahlen .eyebrow{color:var(--gold-hell)}
.zahlen h2{max-width:14ch}
.zahlen h2 em{color:var(--gold-hell)}
.zahlen__reihe{display:grid;gap:44px 36px;margin-top:clamp(40px,6vw,80px)}
@media (min-width:760px){.zahlen__reihe{grid-template-columns:repeat(3,1fr)}.zahl.zahl--tief{margin-top:70px}}
.zahl{margin:0;display:flex;flex-direction:column;gap:6px;border-top:1px solid rgba(231,185,138,.45);padding-top:18px}
.zahl__wert{font:400 clamp(4.2rem,9vw,7.6rem)/.9 var(--serif);color:var(--gold-hell);font-variant-numeric:lining-nums tabular-nums}
.zahl__einheit{font:600 .8rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.zahl__text{color:var(--licht);max-width:30ch}

/* ---------- Galerie (Startseite und Unterseiten) ---------- */
.galerie{max-width:calc(var(--breit) + 2*var(--rand));margin:0 auto}
.galerie__raster,.gal-grid{columns:3 260px;column-gap:clamp(12px,1.8vw,24px)}
.galerie__raster figure,.gal-grid figure{break-inside:avoid;margin:0 0 clamp(12px,1.8vw,24px);overflow:hidden;background:var(--papier-2)}
.galerie__raster button,.gal-grid button{all:unset;display:block;width:100%;cursor:zoom-in;position:relative}
.galerie__raster button:focus-visible,.gal-grid button:focus-visible{outline:3px solid var(--rose);outline-offset:-3px}
.galerie__raster img,.gal-grid img{width:100%;aspect-ratio:var(--ar,3/2);object-fit:cover;transition:transform 1.3s var(--ease),filter .6s}
.galerie__raster button:hover img,.gal-grid button:hover img{transform:scale(1.04)}
.galerie__raster figure:nth-child(6n+1),.gal-grid figure:nth-child(6n+1){--ar:4/5}
.galerie__raster figure:nth-child(6n+2),.gal-grid figure:nth-child(6n+2){--ar:2/3}
.galerie__raster figure:nth-child(6n+3),.gal-grid figure:nth-child(6n+3){--ar:16/10}
.galerie__raster figure:nth-child(6n+4),.gal-grid figure:nth-child(6n+4){--ar:1/1}
.galerie__raster figure:nth-child(6n+5),.gal-grid figure:nth-child(6n+5){--ar:3/4}
.galerie__raster figure:nth-child(6n),.gal-grid figure:nth-child(6n){--ar:16/9}
@media (max-width:620px){.galerie__raster,.gal-grid{columns:2}}
.galerie__fuss{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px;margin-top:40px}

/* ---------- Stimmen ---------- */
.stimmen{display:grid;gap:clamp(40px,5vw,70px) clamp(28px,4vw,60px);max-width:calc(var(--breit) + 2*var(--rand));margin:0 auto;background:var(--papier)}
.stimmen__bild img{width:100%;aspect-ratio:4/5;object-fit:cover}
.stimme{margin:0}
.stimme p{font:italic 400 1.3rem/1.35 var(--serif);margin:0 0 16px}
.stimme footer{display:flex;align-items:center;gap:14px}
.stimme footer img{width:54px;height:54px;border-radius:50%;object-fit:cover}
.stimme cite{font:600 .82rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--rose)}
.stimme--gross p{font-size:clamp(1.6rem,2.9vw,2.4rem);line-height:1.2}
.stimmen__hinweis{font-size:.9rem;color:var(--grau);margin-top:10px}
.stimmen__weitere{display:grid;gap:34px}
@media (min-width:900px){
  .stimmen{grid-template-columns:repeat(12,1fr)}
  .stimmen__bild{grid-column:1/span 4;grid-row:1/span 2}
  .stimmen__haupt{grid-column:6/span 7;align-self:center}
  .stimmen__weitere{grid-column:5/span 8;grid-template-columns:repeat(3,1fr);align-items:start}
  .stimmen__weitere .stimme:nth-child(2){margin-top:60px}.stimmen__weitere .stimme:nth-child(3){margin-top:22px}
}

/* ---------- Über Reto ---------- */
.ueber{background:var(--papier-2);display:grid;gap:clamp(60px,7vw,110px)}
.ueber>*{max-width:var(--breit)}
@media (min-width:900px){.ueber{grid-template-columns:1fr 1fr;align-items:center;padding-left:max(var(--rand),calc((100vw - var(--breit))/2));padding-right:max(var(--rand),calc((100vw - var(--breit))/2))}}
.ueber__bilder{position:relative;padding-bottom:12%}
.ueber__gross{width:74%;position:relative}
.ueber__gross img{width:100%;aspect-ratio:2/3;object-fit:cover;box-shadow:18px 18px 0 -1px var(--papier-2),18px 18px 0 0 var(--rose-hell)}
.ueber__bilder{isolation:isolate}
.ueber__klein{position:absolute;right:0;bottom:0;width:44%;border:10px solid var(--papier-2);transform:rotate(2deg)}
.ueber__klein img{width:100%;aspect-ratio:1;object-fit:cover}
.ueber__text p{color:var(--grau);max-width:56ch}
.unterschrift{font:italic 400 2.5rem/1 var(--serif);color:var(--rose) !important;margin:24px 0 28px}

/* ---------- Ablauf ---------- */
.ablauf{display:grid;gap:clamp(40px,6vw,90px);max-width:calc(var(--breit) + 2*var(--rand));margin:0 auto}
@media (min-width:900px){.ablauf{grid-template-columns:4fr 7fr;align-items:start}.ablauf__bild{margin-top:120px}}
.ablauf__bild img{width:100%;aspect-ratio:2/3;object-fit:cover;max-height:78vh}
@media (max-width:899px){.ablauf__bild{width:62%;margin-left:auto}}
.schritte{list-style:none;margin:40px 0 0;padding:0;position:relative}
.schritte::before{content:"";position:absolute;left:22px;top:12px;bottom:12px;width:1px;background:var(--rose-hell);transform-origin:top;transform:scaleY(var(--fortschritt,1));transition:transform 1.8s var(--ease)}
.js .schritte:not(.in)::before{--fortschritt:0}
.schritt{display:grid;grid-template-columns:46px 1fr;column-gap:24px;padding-bottom:40px;position:relative}
.schritt .ikon{grid-row:1/span 3;background:var(--papier);padding:3px;box-sizing:content-box;margin-left:-3px}
.schritt__nr{font:italic 400 1.1rem/1 var(--serif);color:var(--rose)}
.schritt h3{margin:6px 0 10px}
.schritt p{color:var(--grau);max-width:54ch;margin:0}

/* ---------- Investment ---------- */
.investment{background:var(--papier-2);padding-bottom:clamp(80px,11vw,160px)}
.investment__band img{width:100%;aspect-ratio:16/7;object-fit:cover;max-height:62vh}
.investment__inhalt{display:grid;gap:44px;max-width:var(--breit);margin:0 auto;padding:clamp(56px,7vw,100px) var(--rand) 0}
@media (min-width:900px){.investment__inhalt{grid-template-columns:1.1fr 1fr;gap:80px}.investment__listen{margin-top:60px}}
.investment__kopf p{color:var(--grau);max-width:46ch}
.investment__kopf .knopf{margin-top:12px}
.investment__listen{display:grid;gap:36px}
.investment__listen h3{font-size:1.5rem}
.haken,.striche{list-style:none;margin:0;padding:0}
.haken li,.striche li{position:relative;padding:12px 0 12px 34px;border-top:1px solid var(--papier-3)}
.haken li::before{content:"";position:absolute;left:4px;top:18px;width:12px;height:6px;border-left:1.5px solid var(--rose);border-bottom:1.5px solid var(--rose);transform:rotate(-45deg)}
.striche li{color:var(--grau)}
.striche li::before{content:"";position:absolute;left:2px;top:25px;width:14px;height:1px;background:var(--grau)}

/* ---------- Fragen ---------- */
.fragen{display:grid;gap:clamp(36px,5vw,80px);max-width:calc(var(--breit) + 2*var(--rand));margin:0 auto}
@media (min-width:900px){.fragen{grid-template-columns:5fr 7fr}}
.fragen__bild{margin-top:30px;width:min(360px,80%)}
.fragen__bild img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:999px 999px 0 0}
.fragen__liste details{border-top:1px solid var(--papier-3)}
.fragen__liste details:last-child{border-bottom:1px solid var(--papier-3)}
.fragen__liste summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:44px;padding:22px 0;font:400 clamp(1.3rem,2vw,1.6rem)/1.25 var(--serif)}
.fragen__liste summary::-webkit-details-marker{display:none}
.fragen__liste summary::after,.faq-q::after{content:"";flex:none;width:18px;height:18px;background:linear-gradient(var(--rose),var(--rose)) center/18px 1.5px no-repeat,linear-gradient(var(--rose),var(--rose)) center/1.5px 18px no-repeat;transition:transform .5s var(--feder)}
.fragen__liste details[open] summary::after,.faq-item.open .faq-q::after{transform:rotate(45deg)}
.fragen__liste details>div{padding:0 44px 22px 0;color:var(--grau)}
.fragen__liste details>div p{margin:0}

/* ---------- Kontakt ---------- */
.kontakt{position:relative;isolation:isolate;overflow:hidden;color:var(--licht);padding:clamp(100px,13vw,190px) var(--rand)}
.kontakt__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.kontakt__schleier{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,20,17,.5) 0%,rgba(30,20,17,.82) 45%,rgba(30,20,17,.86) 100%);z-index:-1}
.kontakt__inhalt{display:grid;gap:44px;max-width:var(--breit);margin:0 auto}
@media (min-width:900px){.kontakt__inhalt{grid-template-columns:1.1fr .9fr;align-items:end}}
.kontakt .eyebrow{color:var(--gold-hell)}
.kontakt h2 em{color:var(--gold-hell)}
.kontakt__text p{max-width:46ch}
.kontakt__wege{display:grid;gap:12px}
.weg{display:flex;align-items:center;gap:18px;padding:18px 22px;min-height:64px;border:1px solid rgba(244,233,221,.4);color:var(--licht);text-decoration:none;background:rgba(30,20,17,.35);transition:background-color .35s,border-color .35s,translate .6s var(--ease)}
.weg:hover{background:rgba(30,20,17,.7);border-color:var(--gold-hell);color:var(--licht)}
.weg .ikon{width:36px;height:36px;stroke:var(--gold-hell)}
.weg b{display:block;font-weight:600;font-size:1.05rem}
.weg small{display:block;color:var(--licht-grau);font-size:.85rem}
.weg--haupt{background:var(--rose);border-color:var(--rose)}
.weg--haupt:hover{background:var(--rose-dunkel);border-color:var(--rose-dunkel)}
.weg--haupt .ikon{stroke:#fff}
.weg--haupt small{color:#F6E6E2}
.kontakt__ort{font-size:.9rem;color:var(--licht-grau);margin:8px 0 0}
.kontakt--kurz{padding:clamp(90px,11vw,150px) var(--rand)}
.kontakt--kurz .kontakt__inhalt{align-items:center}
.kontakt--kurz .knopf{justify-self:start}

/* ---------- Fuss ---------- */
.fuss{background:var(--nacht);color:var(--licht-grau);padding:clamp(70px,9vw,110px) var(--rand) 40px;font-size:.96rem}
.fuss__raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:40px 36px;max-width:var(--breit);margin:0 auto}
.fuss__marke{grid-column:span 1}
@media (min-width:900px){.fuss__raster{grid-template-columns:1.6fr 1fr 1fr 1.2fr}}
.marke--hell{color:var(--licht)}
.marke--hell .marke__herz{fill:var(--gold-hell)}
.fuss__marke p{margin:18px 0 12px;max-width:34ch}
.fuss__titel{font:600 .78rem/1.3 var(--sans) !important;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-hell);margin:0 0 10px}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss a{color:var(--licht);text-decoration:none}
.fuss a:hover{color:var(--gold-hell);text-decoration:underline}
.fuss ul a,.fuss__quer{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.fuss__kontakt li{display:flex;align-items:center;gap:12px;min-height:44px}
.fuss__kontakt svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--gold-hell);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fuss__schluss{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 30px;max-width:var(--breit);margin:56px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.13);font-size:.86rem}
.fuss__schluss p{margin:0}
.fuss__schluss a{display:inline-flex;min-height:44px;min-width:44px;justify-content:center;align-items:center;text-decoration:underline}
.fuss{padding-bottom:7.5rem}

/* ---------- Schwebende Knöpfe ---------- */
.schweben{position:fixed;right:16px;bottom:16px;z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.schweben__knopf{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:48px;height:48px;border-radius:999px;text-decoration:none;box-shadow:0 8px 24px rgba(34,24,21,.22);opacity:0;visibility:hidden;translate:0 12px;transition:opacity .4s,visibility .4s,translate .5s var(--ease),background-color .3s}
.schweben__knopf.sichtbar{opacity:1;visibility:visible;translate:0 0}
.schweben__knopf svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.schweben__hoch{background:var(--weiss);color:var(--tinte)}
.schweben__anfrage{background:var(--rose);color:#fff;padding:0 20px 0 16px;font-weight:600;font-size:.93rem}
.schweben__anfrage:hover{background:var(--rose-dunkel);color:#fff}
.schweben__anfrage svg{fill:currentColor;stroke:none}

/* ---------- Bildansicht ---------- */
.leuchtkasten{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:rgba(20,14,12,.95);color:var(--licht)}
.leuchtkasten::backdrop{background:rgba(20,14,12,.6)}
.leuchtkasten[open]{display:grid;place-items:center}
.leuchtkasten img{max-width:92vw;max-height:84dvh;object-fit:contain}
.lk-knopf{position:absolute;width:52px;height:52px;border-radius:50%;border:1px solid rgba(244,233,221,.45);background:rgba(20,14,12,.6);color:var(--licht);cursor:pointer;display:grid;place-items:center}
.lk-knopf:hover{background:var(--rose);border-color:var(--rose)}
.lk-knopf svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.lk-zu{top:16px;right:16px}.lk-zurueck{left:16px;top:50%;translate:0 -50%}.lk-vor{right:16px;top:50%;translate:0 -50%}
@media (max-width:620px){.lk-zurueck,.lk-vor{top:auto;bottom:18px;translate:none}}

/* =====================================================================
   Unterseiten: die bestehenden Bausteine in der neuen Gestaltung
   ===================================================================== */
.page-hero{position:relative;isolation:isolate;min-height:clamp(470px,72svh,740px);display:grid;align-items:end;background-color:var(--nacht);background-size:cover;background-position:center 40%;color:#fff;padding:130px var(--rand) clamp(100px,12vw,170px);overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(28,19,16,.7) 0%,rgba(28,19,16,0) 26%),
  linear-gradient(0deg,rgba(28,19,16,.92) 0%,rgba(28,19,16,.76) 45%,rgba(28,19,16,.3) 82%)}
@media (min-width:900px){.page-hero::before{background:
  linear-gradient(180deg,rgba(28,19,16,.86) 0%,rgba(28,19,16,.68) 12%,rgba(28,19,16,0) 30%),
  linear-gradient(90deg,rgba(28,19,16,.86) 0%,rgba(28,19,16,.7) 42%,rgba(28,19,16,.14) 78%),
  linear-gradient(0deg,rgba(28,19,16,.5) 0%,rgba(28,19,16,0) 45%)}}
.page-hero-inner{max-width:900px;width:100%;margin:0 auto 0 0;min-width:0}
@media (min-width:900px){.page-hero-inner{max-width:min(900px,58vw)}}
.page-hero .eyebrow{color:var(--gold-hell);display:inline-block;background:rgba(28,19,16,.66);padding:8px 12px 7px;border-left:2px solid var(--gold-hell);line-height:1.45;animation:auf 1s var(--ease) .15s both}
.page-hero h1{font-size:clamp(2.35rem,6.4vw,5.6rem);line-height:.98;margin:0 0 .35em;animation:auf 1s var(--ease) .32s both}
.page-hero-inner>p:not(.eyebrow){font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--licht);max-width:44ch;margin:0;animation:auf 1s var(--ease) .5s both}
.page-hero .hero__kante .kante--vorne,.page-hero .hero__kante .kante--hinten{fill:var(--papier)}
.kopf-hell main{padding-top:74px}
.crumb{padding:6px var(--rand) 0;font-size:.86rem;color:var(--grau)}
.crumb .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:0 .55em}
.crumb a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.section{padding:clamp(64px,9vw,130px) var(--rand)}
.section+.section:not(.cta-band){padding-top:clamp(24px,4vw,60px)}
.wrap{max-width:var(--breit);margin:0 auto;min-width:0}
.center{text-align:left}
.shead{max-width:780px;margin:0 0 clamp(36px,5vw,64px)}
.shead.center{margin-left:clamp(0px,7vw,120px)}
.lead{font-size:1.15rem;color:var(--grau);max-width:52ch}
.prose{max-width:780px}
.prose.center{margin-left:clamp(0px,7vw,120px)}
.prose p,.prose li{color:var(--grau)}
.prose h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-top:1.3em}
.prose h3{margin-top:1.2em}
.prose strong{color:var(--tinte)}
.prose ul{padding-left:1.2em}
.spots{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}
.spot{background:var(--papier-2);border:1px solid var(--papier-3);border-radius:999px;padding:9px 18px;font-size:.95rem}
.spot b{font-weight:500}
.spot:nth-child(3n+2){transform:translateY(8px)}
.gallery .shead,.services .shead{margin-bottom:clamp(30px,4vw,56px)}
.gal-cta,.story-back{margin-top:36px}
.svc-detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:0 34px}
.card{padding:30px 0 10px;border-top:1px solid var(--rose-hell)}
.card h3{font-size:clamp(1.5rem,2.2vw,1.9rem)}
.card p{color:var(--grau)}
@media (min-width:900px){.svc-detail .card:nth-child(3n+2){margin-top:46px}.svc-detail .card:nth-child(3n){margin-top:18px}}
.faq{max-width:880px;margin-left:clamp(0px,7vw,120px)}
.faq-item{border-top:1px solid var(--papier-3)}
.faq-item:last-child{border-bottom:1px solid var(--papier-3)}
.faq-q{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:44px;padding:22px 0;cursor:pointer;font:400 clamp(1.25rem,2vw,1.55rem)/1.25 var(--serif)}
.faq-q:focus-visible{outline:2px solid var(--rose);outline-offset:4px}
.faq-a{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)}
.faq-a p{margin:0 44px 22px 0;color:var(--grau)}
.tst-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:34px;margin-top:10px !important}
.tst-item{display:block !important;opacity:1 !important}
.tst-item .quote{font:italic 400 1.3rem/1.35 var(--serif);margin:0 0 16px}
.tst-item .who{display:flex;align-items:center;gap:14px}
.tst-item .who img{width:54px;height:54px;border-radius:50%;object-fit:cover}
.tst-item .who b{font:600 .82rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--rose)}
@media (min-width:900px){.tst-item:nth-child(2n){margin-top:50px}}
.tst-stars,.tst-dots{display:none !important}
.about-grid{display:grid;gap:clamp(50px,6vw,90px)}
@media (min-width:900px){.about-grid{grid-template-columns:1fr 1.1fr;align-items:center}}
.about-photo{position:relative;width:min(100%,520px)}
.about-photo img{width:100%;aspect-ratio:2/3;object-fit:cover}
.about-photo .frame{display:none}
.about-photo img{box-shadow:18px 18px 0 -1px var(--papier),18px 18px 0 0 var(--rose-hell)}
.about{isolation:isolate}
.about-text p{color:var(--grau)}
.sig{font:italic 400 2.4rem/1 var(--serif);color:var(--rose) !important;margin:24px 0}
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:26px;align-items:start}
.pkg{background:var(--weiss);border:1px solid var(--papier-3);padding:34px 28px}
.pkg .name{font:600 .78rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--rose)}
.pkg .pr{font:400 clamp(2.6rem,4vw,3.4rem)/1 var(--serif);margin:14px 0 18px}
.pkg .pr small{font:600 .8rem var(--sans);letter-spacing:.1em;margin-left:6px}
.pkg ul{list-style:none;padding:0;margin:0 0 24px}
.pkg li{padding:9px 0;border-top:1px solid var(--papier-3);color:var(--grau)}
.pkg.featured{background:var(--nacht);color:var(--licht);border-color:var(--nacht)}
.pkg.featured .name{color:var(--gold-hell)}
.pkg.featured li{color:var(--licht-grau);border-color:rgba(244,233,221,.18)}
.pkg.featured .btn-outline{border-color:var(--licht);color:var(--licht)}
.pkg.featured .btn-outline:hover{background:var(--licht);color:var(--tinte)}
@media (min-width:900px){.pkg.featured{transform:translateY(-22px)}}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:48px 34px}
.blog-card{display:block;color:inherit;text-decoration:none}
.blog-card:hover{color:inherit}
.blog-card .thumb{overflow:hidden}
.blog-card .thumb img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1.3s var(--ease)}
.blog-card:nth-child(4n+2) .thumb img{aspect-ratio:4/5}
.blog-card:nth-child(4n+3) .thumb img{aspect-ratio:1/1}
.blog-card:nth-child(4n) .thumb img{aspect-ratio:16/10}
.blog-card:hover .thumb img{transform:scale(1.045)}
.blog-card .body{padding-top:18px}
.blog-card h3{font-size:clamp(1.5rem,2.2vw,1.9rem)}
.blog-card p{color:var(--grau)}
.pmeta,.post-meta{font:600 .76rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--rose)}
.post-meta span{margin:0 .6em}
.blog-card .more{display:inline-flex;align-items:center;gap:12px;font-weight:600;color:var(--rose)}
.blog-card .more::after{content:"";width:26px;height:1px;background:currentColor;transition:width .45s var(--ease)}
.blog-card:hover .more::after{width:40px}
.post-intro{max-width:760px;font-size:1.15rem}
.post-intro p{color:var(--grau)}
.contact-row{display:flex;flex-wrap:wrap;gap:18px 48px;margin:0 0 44px;padding-bottom:28px;border-bottom:1px solid var(--papier-3)}
.contact-row span{display:flex;flex-direction:column;gap:4px;min-width:0}
.contact-row b{font:600 .76rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--rose)}
.contact-row a{display:inline-flex;align-items:center;min-height:44px}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px 24px;max-width:900px}
.form>div{min-width:0}
.form .full{grid-column:1/-1}
.form label{display:block;font:600 .88rem/1.3 var(--sans);margin-bottom:8px}
.form input:not([type="checkbox"]):not([type="radio"]):not([name="hp_website"]),.form select,.form textarea{width:100%;max-width:100%;min-height:52px;padding:12px 14px;font-size:1rem;background:var(--weiss);border:1px solid #8C7B70;border-radius:2px;color:var(--tinte);transition:border-color .3s,box-shadow .3s}
.form textarea{min-height:170px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 3px rgba(142,67,74,.2)}
.form .btn{margin-top:4px}
.hint{font-size:.92rem;color:var(--grau)}
.danke-herz{color:var(--rose)}

/* ---------- Ruhige Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-property:opacity !important}
  .auf{animation:blenden .6s linear var(--d,0s) both !important}
  .page-hero .eyebrow,.page-hero h1,.page-hero-inner>p{animation:blenden .6s linear both !important}
  @keyframes blenden{from{opacity:0}to{opacity:1}}
  .js .zeige,.js .reveal{transform:none !important}
  .band__spur{animation:none !important;transform:none !important}
  .leistung figure{transform:none !important}
  .leistung:hover img,.galerie__raster button:hover img,.gal-grid button:hover img,.blog-card:hover .thumb img{transform:none}
  .hero__weiter::after{animation:none}
  .knopf,.btn,.weg,.schweben__knopf{translate:none !important}
}

/* =====================================================================
   Unterseiten auf Startseiten-Niveau (25.09.2026)
   ===================================================================== */
.hero--seite{min-height:max(600px,88svh)}
.hero--seite .hero__titel{font-size:clamp(2.55rem,7.6vw,6.2rem)}
@media (min-width:900px){.hero--seite .hero__titel{font-size:clamp(2.8rem,5.3vw,5.9rem)}}
.hero--klein{min-height:clamp(400px,58svh,580px)}
.hero--klein .hero__inhalt{padding-bottom:clamp(96px,11vw,150px)}
.hero--klein .kante--vorne,.hero--klein .kante--hinten{fill:var(--papier)}
.hero--klein + .crumb{padding-top:10px}

.ikon--klein{width:22px;height:22px;stroke-width:3.2}

/* Text neben versetztem Bildpaar */
.text-bild{display:grid;gap:clamp(52px,7vw,110px);max-width:calc(var(--breit) + 2*var(--rand));margin:0 auto;padding:clamp(70px,10vw,150px) var(--rand)}
.text-bild>*{min-width:0}
@media (min-width:900px){.text-bild{grid-template-columns:1.12fr .88fr;align-items:center}}
.text-bild__text h2{font-size:clamp(1.95rem,3.9vw,3.3rem);margin-top:1.15em}
.text-bild__text h2:first-child,.text-bild__text .eyebrow+h2{margin-top:0}
.text-bild__text p{color:var(--grau);max-width:60ch}
.text-bild__text strong{color:var(--tinte)}
.anfang::first-letter{float:left;font:400 4.3em/.78 var(--serif);color:var(--rose);padding:.06em .1em 0 0}
.text-bild__bilder{position:relative;padding-bottom:clamp(56px,9vw,120px);isolation:isolate}
.text-bild__gross{width:76%;margin-left:auto}
.text-bild__gross img{width:100%;aspect-ratio:4/5;object-fit:cover;box-shadow:-18px 18px 0 -1px var(--papier),-18px 18px 0 0 var(--rose-hell)}
.text-bild__klein{position:absolute;left:0;bottom:0;width:50%;border:clamp(6px,1vw,10px) solid var(--papier);transform:rotate(-2.5deg)}
.text-bild__klein img{width:100%;aspect-ratio:5/4;object-fit:cover}
.text-bild--einzeln .text-bild__bilder{padding-bottom:0}
.text-bild--einzeln .text-bild__gross{width:min(100%,460px);margin:0 auto}
.text-bild--einzeln .text-bild__gross img{aspect-ratio:1/1;border-radius:999px 999px 0 0;box-shadow:none}
.text-bild .spots{margin-top:14px}
.orte-zahl{font:italic 400 clamp(4.2rem,9vw,7rem)/.8 var(--serif);color:var(--rose);margin:18px 0 0}
.spot{display:inline-flex;align-items:center;gap:8px;transition:background-color .35s,border-color .35s}
.spot:hover{background:var(--weiss);border-color:var(--rose-hell)}
.spot .ikon{stroke:var(--rose)}

/* Kacheln (Leistungen, Was mich ausmacht) */
.kacheln{display:grid;gap:34px 28px;background:var(--papier-2);padding:clamp(70px,10vw,150px) max(var(--rand),calc((100% - var(--breit))/2))}
.kacheln>*{min-width:0}
.kacheln__kopf{max-width:620px}
.kacheln__bild img{width:100%;aspect-ratio:2/3;object-fit:cover;max-height:80vh}
.kacheln__raster{display:grid;gap:22px}
.kachel{position:relative;background:var(--papier);border:1px solid var(--papier-3);padding:26px 26px 20px;transition:border-color .4s,box-shadow .5s}
.kachel:hover{border-color:var(--rose-hell);box-shadow:0 18px 40px -24px rgba(42,31,26,.35)}
.kachel .ikon{position:absolute;right:22px;top:22px}
.kachel__nr{display:block;font:italic 400 1.1rem/1 var(--serif);color:var(--rose);margin-bottom:10px}
.kachel h3{font-size:clamp(1.45rem,2.1vw,1.85rem);padding-right:56px}
.kachel p{color:var(--grau);margin:0}
.js .kachel.zeige.in,.js .pkg.zeige.in{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:opacity .9s var(--ease) var(--d,0s),transform .7s var(--ease),border-color .4s,box-shadow .5s}
@media (min-width:700px){.kacheln__raster{grid-template-columns:1fr 1fr}.kacheln__raster .kachel:nth-child(even){margin-top:46px}}
@media (min-width:1000px){
  .kacheln{grid-template-columns:4fr 8fr;column-gap:clamp(40px,5vw,80px)}
  .kacheln__kopf{grid-column:1/-1;margin-left:calc(33% + 20px)}
  .kacheln__bild{grid-row:2;align-self:start;margin-top:40px}
  .kacheln__raster{grid-row:2}
}

/* Fragen auf Unterseiten */
.fragen--seite .faq{margin-left:0;max-width:none}
.fragen--seite .fragen__seite h2{font-size:clamp(2rem,4vw,3.4rem)}

/* Stimmen auf Unterseiten */
.stimmen--seite .tst-item{margin:0 !important}
.tst-item--gross .quote{font-size:clamp(1.6rem,2.9vw,2.4rem);line-height:1.2}
@media (min-width:900px){.stimmen__weitere>:nth-child(2){margin-top:60px !important}.stimmen__weitere>:nth-child(3){margin-top:22px !important}}

/* Über mich */
.ueber--seite{background:var(--papier)}
.ueber--seite .ueber__gross img{box-shadow:18px 18px 0 -1px var(--papier),18px 18px 0 0 var(--rose-hell)}
.ueber--seite .ueber__klein{border-color:var(--papier)}

/* Pakete */
.pakete{background:var(--papier-2);padding-bottom:clamp(80px,11vw,150px)}
.pakete>.wrap{padding:clamp(56px,7vw,100px) var(--rand) 0}
.pkg{position:relative;transition:border-color .4s,box-shadow .5s}
.pkg:hover{box-shadow:0 22px 44px -26px rgba(42,31,26,.4)}
.pkg .ikon{margin-bottom:16px}
.pkg.featured .ikon{stroke:var(--gold-hell)}
.pkg .pr span{font-variant-numeric:tabular-nums}
@media (min-width:900px){.js .pkg.featured.zeige.in{transform:translateY(-22px) perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}}

/* Blogkarten versetzt */
@media (min-width:900px){
  .blog-grid--versetzt{grid-template-columns:repeat(12,1fr);gap:70px 28px}
  .blog-grid--versetzt .blog-card:nth-child(4n+1){grid-column:1/span 7}
  .blog-grid--versetzt .blog-card:nth-child(4n+2){grid-column:9/span 4;margin-top:90px}
  .blog-grid--versetzt .blog-card:nth-child(4n+3){grid-column:2/span 5}
  .blog-grid--versetzt .blog-card:nth-child(4n){grid-column:8/span 5;margin-top:40px}
}

/* Blogeinstieg */
.geschichte{display:grid;gap:clamp(44px,6vw,90px);max-width:calc(var(--breit) + 2*var(--rand));margin:0 auto;padding:clamp(64px,9vw,130px) var(--rand) clamp(30px,4vw,60px)}
.geschichte>*{min-width:0}
@media (min-width:900px){.geschichte{grid-template-columns:1.2fr .8fr;align-items:center}}
.geschichte .post-intro{font-size:clamp(1.1rem,1.5vw,1.3rem)}
.geschichte__bild{position:relative;width:min(100%,440px);margin-left:auto}
.geschichte__bild img{width:100%;aspect-ratio:4/5;object-fit:cover}
.geschichte__zahl{position:absolute;left:-22px;bottom:26px;background:var(--papier);padding:12px 18px 10px;font:600 .78rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--grau);display:flex;align-items:baseline;gap:10px}
.geschichte__zahl span{font:italic 400 2.6rem/1 var(--serif);letter-spacing:0;color:var(--rose)}
@media (max-width:560px){.geschichte__zahl{left:0}}

/* Anfrage (Kontakt) */
.anfrage{display:grid;gap:clamp(40px,5vw,80px);max-width:calc(var(--breit) + 2*var(--rand));margin:0 auto;padding:clamp(64px,9vw,130px) var(--rand)}
.anfrage>*{min-width:0}
@media (min-width:960px){.anfrage{grid-template-columns:.8fr 1.2fr;align-items:start}}
.anfrage__bild img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:999px 999px 0 0}
.anfrage .contact-row{flex-direction:column;gap:18px;border:0;margin:30px 0 0;padding:0}
.anfrage .contact-row span{display:grid;grid-template-columns:24px 1fr;column-gap:14px;align-items:start}
.anfrage .contact-row .ikon{grid-row:1/span 2;margin-top:2px}
.anfrage__formular{background:var(--weiss);border:1px solid var(--papier-3);padding:clamp(22px,4vw,48px)}
.anfrage__formular .form{max-width:none}

/* Rechtstexte */
.rechtstext{padding:clamp(48px,7vw,100px) var(--rand) clamp(70px,9vw,130px)}
.rechtstext .prose{margin:0 auto 0 clamp(0px,7vw,120px)}
.rechtstext .prose h2{font-size:clamp(1.6rem,2.8vw,2.3rem)}

/* Seiten-Hero: längere Überschriften als auf der Startseite, deshalb engerer Textblock und dichterer Schleier auf der Textseite (Kontrastmessung 25.09.2026) */
@media (min-width:900px){
  .hero--seite .hero__inhalt{max-width:min(900px,50vw)}
  .hero--seite .hero__schleier{background:
    linear-gradient(180deg,rgba(28,19,16,.86) 0%,rgba(28,19,16,.68) 9%,rgba(28,19,16,0) 25%),
    linear-gradient(90deg,rgba(28,19,16,.9) 0%,rgba(28,19,16,.88) 46%,rgba(28,19,16,.6) 60%,rgba(28,19,16,.14) 80%,rgba(28,19,16,.04) 100%),
    linear-gradient(0deg,rgba(28,19,16,.6) 0%,rgba(28,19,16,0) 38%)}
}