/* =============================================================
   annefraune.de — Gerüst v1
   Eine feste Farbwelt: Creme, Gold, dunkles Blaugrau (Anne, 04.10.2026)
   Kontrastwerte geprüft: Text >= 4.5:1, Flächen >= 3:1
   ============================================================= */

:root{
  --bg:#FAF7F2;
  --bg-alt:#F3EEE6;
  --soft:#EFE8DE;
  --card:#FFFFFF;
  --ink:#2A2622;
  --muted:#6B6259;
  --deep:#16303C;
  --deep-2:#0F242E;
  --accent:#B07C3E;
  --accent-text:#8A5E2A;
  --accent-hover:#7A5124;
  --on-deep:#EDE7DF;
  --on-deep-muted:#B9C6CB;
  --on-deep-label:#D9AE79;
  --line:#DED5C8;
  --line-strong:#C9BCA9;
  --hero-veil-1:rgba(12,26,33,.28);
  --hero-veil-2:rgba(12,26,33,.02);
}

:root{
  --display:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --pad:clamp(1.25rem,5vw,5.5rem);
  --measure:36rem;

  /* Schriftgroessen: hier und nur hier festlegen, sie gelten auf allen Seiten.
     Fliesstext 16 px auf dem Handy, ab etwa 800 px Breite 18 px. */
  --text-size:clamp(1rem,.9rem + .45vw,1.125rem);
  /* Zitate der Paare in der Serifenschrift, etwas groesser als der Fliesstext */
  --quote-size:clamp(1.1875rem,1.05rem + .6vw,1.375rem);
  /* Farbe des Fliesstexts: zwischen Schrift- und Nebenfarbe */
  --text:color-mix(in srgb, var(--ink) 58%, var(--muted));
  --head-h:5.25rem;
  --radius:0px;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.10);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 1rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:var(--text-size);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; display:block; height:auto}
a{color:inherit}

/* ---------- Icon-Font (Material Symbols, keine Emojis) ---------- */
.mi{
  font-family:"Material Symbols Outlined";
  font-weight:normal; font-style:normal;
  font-size:1.25em; line-height:1;
  letter-spacing:normal; text-transform:none; white-space:nowrap;
  direction:ltr; display:inline-block; vertical-align:middle;
  -webkit-font-feature-settings:'liga'; -webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;
  /* Falls die Icon-Schrift ausfaellt, darf der Ligaturname den Text nicht
     auseinanderdruecken. Grosszuegig genug fuer breite Glyphen. */
  max-width:1.6em; overflow:hidden;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--bg); padding:.75rem 1.25rem;
}
.skip:focus{left:0}

:where(a,button,input,textarea,select,summary):focus-visible{
  outline:2px solid var(--accent-text); outline-offset:3px;
}

/* ---------- Typografie ---------- */

h1,h2,h3,h4{
  font-family:var(--display); font-weight:600; margin:0; color:var(--ink);
  line-height:1.14;
}
h1{font-size:clamp(2.25rem,1.5rem + 3.2vw,4rem); font-weight:500; line-height:1.08}
h2{font-size:clamp(1.75rem,1.35rem + 1.7vw,2.75rem); font-weight:500}

/* Cormorant ist bei gleicher Groesse deutlich kleiner als Inter: die Kleinbuchstaben
   werden auf eine gemeinsame Hoehe gebracht, Ziffern stehen auf der Grundlinie. */
h1,h2,h3,h4,.brand-name,.mobile-nav a,.way-price,.quote-lead,.steps > li::before,
.price-amount,.price-rows b,.faq summary,.fact b{
  font-size-adjust:.46; font-variant-numeric:lining-nums;
}
h3{font-size:clamp(1.1875rem,1.1rem + .4vw,1.4375rem)}
h4{font-size:1.0625rem}

p{margin:0 0 1.15rem; max-width:var(--measure)}
p:last-child{margin-bottom:0}
strong{font-weight:600}

.lede{font-size:var(--text-size)}
.note{font-size:.875rem; color:var(--muted)}
.center-measure{margin-left:auto; margin-right:auto; text-align:center}

.eyebrow{
  display:flex; align-items:center; gap:.6rem;
  font-size:.6875rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent-text);
  margin:0 0 1.5rem; max-width:none;
}
.eyebrow::before{content:""; width:1.75rem; height:1px; background:currentColor; flex:none}
.eyebrow-center{justify-content:center}
.on-deep .eyebrow{color:var(--on-deep-label)}

/* ---------- Layout ---------- */

.section{padding:clamp(2.25rem,4.7vw,4.75rem) var(--pad)}
.section-tight{padding-block:clamp(2.5rem,5vw,4.5rem)}
/* Startseite: engere Rasterabstaende; alle Abschnitte teilen dieselben Kanten (.wrap). */
.page-home .g3,.page-home .g2:not(.split-media){gap:clamp(.75rem,1.5vw,1.25rem)}
.page-home .facts{margin-top:1.5rem}
.page-home .steps{margin-top:1.25rem}
.wrap{max-width:76rem; margin:0 auto}
.wrap-narrow{max-width:52rem; margin:0 auto}
.bg-alt{background:var(--bg-alt)}
.bg-soft{background:var(--soft)}

.on-deep{background:var(--deep); color:var(--on-deep)}
.on-deep h1,.on-deep h2,.on-deep h3{color:#fff}
.on-deep p{color:var(--on-deep-muted)}
.on-deep .lede{color:var(--on-deep-muted)}

.grid{display:grid; gap:clamp(1.5rem,3vw,2.5rem)}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
.g4{grid-template-columns:1fr}
@media (min-width:40rem){
  .g4{grid-template-columns:1fr 1fr}
}
@media (min-width:52rem){
  .g2{grid-template-columns:1fr 1fr}
  .g3{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:64rem){
  .g4{grid-template-columns:repeat(4,1fr)}
}
.split-media{align-items:center}
/* Foto oben buendig mit dem Text statt mittig daneben */
.split-media.media-top{align-items:start}
@media (min-width:60rem){
  .split-media{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(2.5rem,5vw,5rem)}
  .split-media.media-left{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  /* Groesseres Foto rechts */
  .split-media-wide{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
}

/* ---------- Kopf ---------- */

.site-head{
  position:sticky; top:0; z-index:100;
  background:var(--bg); border-bottom:1px solid var(--line);
  transition:background-color .3s ease, border-color .3s ease;
}
.site-head[data-transparent="true"]{
  position:fixed; left:0; right:0;
  background:transparent; border-bottom-color:transparent;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}
.site-head[data-transparent="true"]::before{
  content:""; position:absolute; inset:0 0 auto; height:200%;
  background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0));
  pointer-events:none; z-index:-1; transition:opacity .3s ease;
}
.site-head[data-transparent="true"].is-stuck::before{opacity:0}
.site-head[data-transparent="true"].is-stuck{text-shadow:none}
.site-head[data-transparent="true"] .brand-name,
.site-head[data-transparent="true"] .brand-role,
.site-head[data-transparent="true"] .nav a,
.site-head[data-transparent="true"] .burger{color:#fff}
.site-head[data-transparent="true"] .btn-outline{
  border-color:rgba(255,255,255,.7); color:#fff;
  background:rgba(18,20,24,.28);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.site-head[data-transparent="true"] .btn-outline:hover{background:rgba(255,255,255,.14)}
.site-head[data-transparent="true"].is-stuck{
  background:var(--bg); border-bottom-color:var(--line);
}
.site-head[data-transparent="true"].is-stuck .brand-name,
.site-head[data-transparent="true"].is-stuck .nav a,
.site-head[data-transparent="true"].is-stuck .burger{color:var(--ink)}
.site-head[data-transparent="true"].is-stuck .brand-role{color:var(--muted)}
.site-head[data-transparent="true"].is-stuck .btn-outline{
  border-color:var(--line-strong); color:var(--ink);
  background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;
}

.head-inner{
  max-width:84rem; margin:0 auto; min-height:var(--head-h);
  padding:0 var(--pad);
  display:flex; align-items:center; gap:1.5rem; justify-content:space-between;
}
.brand{text-decoration:none; flex:none}
.brand-name{
  display:block; font-family:var(--display); font-weight:700;
  font-size:.9375rem; letter-spacing:.3em; text-transform:uppercase;
}
.brand-role{
  display:block; font-size:.5625rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin-top:.3rem;
}
/* Auf schmalen Schirmen braucht der Kopf den Platz fuer Menue und Auswahl. */
@media (max-width:30rem){
  .brand-role{font-size:.5rem; letter-spacing:.1em}
  .head-inner{gap:.75rem}
}

.nav{display:none}
/* Sechs Menuepunkte passen ab 68rem in eine Zeile; darunter gibt es den Burger. */
@media (min-width:68rem){
  .nav{display:block}
  .nav ul{display:flex; gap:1.5rem; list-style:none; margin:0; padding:0}
  .nav a{
    text-decoration:none; font-size:.8125rem; font-weight:500; white-space:nowrap;
    letter-spacing:.04em; padding:.35rem 0; display:block; position:relative;
  }
  .nav a::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:currentColor; transform:scaleX(0); transform-origin:left;
    transition:transform .25s ease;
  }
  .nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
  .nav a[aria-current="page"]{font-weight:600}
}

.head-actions{display:flex; align-items:center; gap:.5rem; flex:none}
/* Spezifitaet bewusst hoeher als .btn, sonst gewinnt dessen display:inline-flex. */
.head-actions .head-cta{display:none}
@media (min-width:48rem){.head-actions .head-cta{display:inline-flex}}

.burger{
  appearance:none; background:transparent; border:0; cursor:pointer;
  color:var(--ink); padding:.5rem; display:flex; align-items:center;
  /* Fingergerechtes Tippziel */
  min-height:2.75rem; min-width:2.75rem; justify-content:center;
}
@media (min-width:68rem){.burger,.mobile-nav{display:none}}

.mobile-nav{
  position:fixed; inset:var(--head-h) 0 0; z-index:99;
  background:var(--bg); overflow-y:auto;
  padding:1.5rem var(--pad) 3rem;
}
.mobile-nav ul{list-style:none; margin:0; padding:0}
.mobile-nav li + li{border-top:1px solid var(--line)}
.mobile-nav ul:first-child a{
  display:block; padding:1rem 0; text-decoration:none;
  font-family:var(--display); font-size:1.375rem; font-weight:500;
}
.mobile-nav ul:first-child a[aria-current="page"]{color:var(--accent-text)}
.mobile-nav .mobile-nav-cta{margin-top:1.5rem; padding:1.1rem 1.5rem; font-size:1rem}
.mobile-nav .mobile-nav-contact{margin-top:1.25rem}
.mobile-nav .mobile-nav-contact li{border:0}
.mobile-nav-contact a{
  display:inline-flex; align-items:center; gap:.6rem; padding:.6rem 0;
  text-decoration:none; font-size:1rem;
}
.mobile-nav-contact .mi{color:var(--accent-text); font-size:1.2rem}

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  white-space:nowrap; flex:0 0 auto;
  font-family:var(--body); font-size:.875rem; font-weight:500; letter-spacing:.02em;
  padding:.9rem 1.5rem; text-decoration:none; cursor:pointer;
  border:1px solid transparent; border-radius:var(--radius);
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn-primary{background:var(--accent-text); color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.btn-outline{border-color:var(--line-strong); color:var(--ink); background:transparent}
.btn-outline:hover{background:var(--soft)}
.on-deep .btn-outline{border-color:rgba(255,255,255,.45); color:#fff}
.on-deep .btn-outline:hover{background:rgba(255,255,255,.12)}
.btn-sm{padding:.6rem 1.1rem; font-size:.8125rem}
.btn-block{width:100%; flex:1 1 auto; min-width:0}
.btn-icon{padding:.9rem 1rem; border-color:var(--line-strong)}
.btn-row{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem}

.link{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.875rem; font-weight:500; color:var(--accent-text);
  text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px;
}
.link:hover{color:var(--accent-hover)}
.link .mi{font-size:1.1em}
.on-deep .link{color:var(--on-deep-label)}
/* Textlink neben dem Button: auf Fotos weiss, sonst Akzentfarbe */
.btn-row{align-items:center}
.hero .link,.page-hero.has-media .link{color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.5)}
/* Link mitten im Fliesstext: so gross wie der umgebende Text */
.link-inline{display:inline; font-size:inherit; font-weight:inherit}

/* ---------- Hero ---------- */

.hero{
  position:relative; min-height:min(92svh,52rem);
  display:flex; align-items:flex-end;
  padding:calc(var(--head-h) + 3rem) var(--pad) clamp(7rem,16vw,14rem);
  overflow:hidden; isolation:isolate;
}
.hero-media{position:absolute; inset:0; z-index:-2}
.hero-media img{width:100%; height:100%; object-fit:cover}
.hero-veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, var(--hero-veil-1) 0%, var(--hero-veil-2) 52%, rgba(0,0,0,0) 72%, rgba(0,0,0,.22) 100%);
}
.hero-inner{max-width:76rem; margin:0 auto; width:100%; color:#fff; position:relative; z-index:1}
.hero h1{
  color:#fff; max-width:24ch; text-wrap:balance;
  font-size:clamp(1.85rem,1.3rem + 2.1vw,3rem); font-weight:600; line-height:1.15;
  text-shadow:0 2px 6px rgba(0,0,0,.45), 0 4px 30px rgba(0,0,0,.55);
}
.hero .hero-sub{
  color:#fff; font-size:clamp(1rem,.95rem + .35vw,1.1875rem); font-weight:500;
  max-width:38rem; margin-top:1.5rem;
  text-shadow:0 1px 4px rgba(0,0,0,.6), 0 2px 18px rgba(0,0,0,.5);
}
.hero .eyebrow{color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.5)}
.hero .btn-primary{background:#fff; color:var(--deep-2)}
.hero .btn-primary:hover{background:rgba(255,255,255,.86)}
.hero .btn-outline,
.page-hero .btn-outline{
  border-color:rgba(255,255,255,.7);
  background:rgba(18,20,24,.34);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:#fff;
}
.hero .btn-outline:hover,
.page-hero .btn-outline:hover{background:rgba(18,20,24,.5)}
.hero-arc{
  position:absolute; left:-5%; right:-5%; bottom:-1px; height:clamp(2.5rem,6vw,5.5rem);
  background:var(--bg); border-radius:50% 50% 0 0 / 100% 100% 0 0; z-index:0; pointer-events:none;
}
.hero-scroll{
  position:absolute; left:50%; bottom:clamp(1rem,3vw,2rem); transform:translateX(-50%);
  z-index:1; color:var(--muted); font-size:1.5rem;
}
@media (prefers-reduced-motion:no-preference){
  .hero-scroll{animation:bob 2.4s ease-in-out infinite}
}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,.4rem)}}

.page-hero{
  /* Der Kopf ist hier mitlaufend, nicht fixiert — kein Platz dafuer reservieren. */
  position:relative; padding:clamp(3rem,7vw,5.5rem) var(--pad) clamp(3rem,6vw,5rem);
  background:var(--deep); color:var(--on-deep); overflow:hidden; isolation:isolate;
}
.page-hero.has-media .hero-media{z-index:-2}
/* Repertoire: Anne, Paar und Gaeste unten in der Bildmitte, der Text links */
.page-repertoire .ft-hero .hero-media img{object-position:55% 80%}
/* Hochzeitsblog: Traubogen mit Anne und Brautpaar bleibt ueber und neben der Schrift sichtbar */
.page-blog .ft-hero .hero-media img{object-position:50% 45%}
@media (min-width:60rem){
  .page-blog .ft-hero .page-hero-title{max-width:18ch}
  .page-blog .ft-hero .lede{max-width:30rem}
}
@media (min-width:60rem){
  .page-repertoire .ft-hero h1{max-width:13ch}
  /* Text oben links vor der hellen Wand; Anne, Paar und Gaeste bleiben unten frei */
  .page-repertoire .ft-hero{align-items:flex-start; padding-top:clamp(3rem,6vw,5rem)}
  .page-repertoire.page-repertoire .ft-hero .hero-veil{
    background:linear-gradient(to bottom right, rgba(12,16,22,.6) 0%, rgba(12,16,22,.42) 28%, rgba(12,16,22,0) 52%);
  }
}
/* Preise: Paar und Anne leicht rechts der Mitte, der Text links */
.page-preise .ft-hero .hero-media img{object-position:62% 60%}
/* Villa Boskow: Weide und Trauung im unteren Bilddrittel */
.page-boskow .ft-hero .hero-media img{object-position:50% 62%}
@media (min-width:60rem){
  /* Text oben links im Laub, damit die Trauung unten unter der Weide frei bleibt */
  .page-boskow .ft-hero{align-items:flex-start; padding-top:clamp(3rem,6vw,5rem)}
  .page-boskow .ft-hero .hero-media img{object-position:50% 70%}
  .page-boskow .ft-hero .page-hero-title{max-width:14ch}
  .page-boskow.page-boskow .ft-hero .hero-veil{
    background:linear-gradient(to bottom right, rgba(12,16,22,.6) 0%, rgba(12,16,22,.42) 28%, rgba(12,16,22,0) 55%);
  }
}
/* Eindruecke: auf dem Handy zwei Fotos nebeneinander, am Computer drei */
.vb-photos{grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(.75rem,1.5vw,1.25rem); margin-top:clamp(1.5rem,3vw,2.5rem)}
.vb-photos .card{margin:0}
.vb-photos .card-media{aspect-ratio:3/2}
.vb-photos .card-media{position:relative}
.vb-photos .hero-credit{position:absolute; right:.5rem; bottom:.4rem; font-size:.625rem}
.vb-photos .card-media img.vb-pos-nacht{object-position:50% 72%}
.vb-photos .card-body{padding:clamp(.85rem,1.8vw,1.35rem) clamp(.85rem,1.8vw,1.35rem) clamp(1rem,2vw,1.5rem)}
.vb-photos .card-body h3{font-size:clamp(1.125rem,1rem + .5vw,1.375rem); margin-bottom:.35rem}
.vb-photos .card-body p{font-size:clamp(.875rem,.85rem + .15vw,.9375rem); line-height:1.5}
/* Der Ort: Scheunenfoto auf dem Handy quer statt hochkant */
.vb-ort-media img{width:100%; aspect-ratio:4/3; object-fit:cover; object-position:50% 70%}
@media (min-width:52rem){.vb-ort-media img{aspect-ratio:auto}}
@media (min-width:52rem){.vb-photos{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Termine gut sichtbar ueber der Ueberschrift */
.vb-events{margin-top:clamp(1.5rem,3vw,2.5rem); gap:clamp(.75rem,1.5vw,1.25rem)}
.vb-events .card-meta{display:flex; align-items:center; gap:.45rem; font-size:1rem; letter-spacing:0; text-transform:none}
.vb-events .card-meta .mi{font-size:1.25rem}
/* Ueber Anne: Anne steht links, Text rechts auf der Backsteinmauer, damit das Gesicht frei bleibt */
.page-ueber .ft-hero .hero-media img{aspect-ratio:4/3; object-position:40% 40%}
@media (min-width:60rem){
  .page-ueber .ft-hero{align-items:center; padding-bottom:clamp(3rem,6vw,5rem)}
  .page-ueber .ft-hero .hero-media img{aspect-ratio:auto; object-position:35% 30%}
  .page-ueber .ft-hero .wrap{padding-left:clamp(26rem,52vw,46rem)}
  .page-ueber .ft-hero h1{max-width:14ch; font-size:clamp(2.5rem,1.6rem + 2vw,3.25rem)}
  .page-ueber .ft-hero .lede{max-width:26rem}
  .page-ueber.page-ueber .ft-hero .hero-veil{
    background:linear-gradient(to left, rgba(12,16,22,.55) 0%, rgba(12,16,22,.35) 38%, rgba(12,16,22,0) 62%);
  }
}
@media (min-width:60rem){
  .page-preise .ft-hero h1{max-width:12ch; font-size:clamp(2.5rem,1.6rem + 2vw,3.25rem)}
  .page-preise .ft-hero .lede{max-width:21rem}
}
/* Gesang: Anne sitzt rechts im Bild, der Text links */
.page-gesang .ft-hero .hero-media img{object-position:65% 68%}
/* Auf breiten Bildschirmen hoeher, damit Kopf und Keyboard zugleich ins Bild passen */
@media (min-width:60rem){
  .page-gesang .ft-hero{min-height:min(92svh,max(44rem,46vw))}
  /* Text oben links; der Verlauf dunkelt dafuer oben links ab statt unten links */
  .page-gesang .ft-hero{align-items:flex-start; padding-top:clamp(3rem,6vw,5rem)}
  .page-gesang.page-gesang .ft-hero .hero-veil{
    background:linear-gradient(to bottom right, rgba(12,16,22,.55) 0%, rgba(12,16,22,.38) 26%, rgba(12,16,22,0) 50%);
  }
}
@media (min-width:60rem){.page-gesang .ft-hero .page-hero-title{max-width:15ch}}
.page-hero.has-media .hero-veil{
  background:
    linear-gradient(to right, var(--hero-veil-1) 0%, var(--hero-veil-1) 30%, rgba(0,0,0,.18) 90%),
    linear-gradient(to bottom, rgba(0,0,0,.42), rgba(0,0,0,.22) 40%, rgba(0,0,0,.38));
}
.page-hero .btn-outline{border-color:rgba(255,255,255,.55); color:#fff}
.page-hero .btn-outline:hover{background:rgba(255,255,255,.14)}
.page-hero .btn-primary{background:#fff; color:var(--deep-2)}
.page-hero .btn-primary:hover{background:rgba(255,255,255,.86)}
.page-hero h1{color:#fff; max-width:26ch}
.page-hero .lede{color:var(--on-deep-muted); max-width:38rem; margin-top:1.25rem}
.page-hero .eyebrow{color:var(--on-deep-label)}
/* Grosse Aussage im Kopf, wenn die H1 die kleine SEO-Zeile ist */
.page-hero-title{
  font-family:var(--display); color:#fff; margin:0; max-width:22ch; text-wrap:balance;
  font-size:clamp(2.25rem,1.5rem + 3.2vw,4rem); font-weight:500; line-height:1.08;
  font-size-adjust:.46;
}
.page-hero h1.eyebrow{
  font-family:var(--body); font-size:.6875rem; font-weight:600; letter-spacing:.18em;
  line-height:1.4; font-size-adjust:none; max-width:none;
}
/* Freie Trauung: Handy Foto im Querformat oben, Text darunter;
   Computer Foto ganzflaechig, Text links auf dunklem Verlauf. */
.ft-hero .hero-media{
  position:relative; margin:calc(-1 * clamp(3rem,7vw,5.5rem)) calc(-1 * var(--pad)) 2rem;
}
.ft-hero .hero-media img{width:100%; aspect-ratio:3/2; object-fit:cover; object-position:60% 40%}
.ft-hero .hero-veil{display:none}
.hero-credit{z-index:1}
/* Lange Listen links buendig mit den anderen Abschnitten, aber mit lesbarer Zeilenlaenge */
.page-trauung .steps,.page-trauung .faq{max-width:52rem}
@media (min-width:60rem){
  /* Text tief unten links, damit die Gesichter der Gaeste frei bleiben */
  .ft-hero{min-height:min(80svh,44rem); display:flex; align-items:flex-end; padding-bottom:2rem}
  .ft-hero .lede{margin-top:.75rem}
  .ft-hero h1.eyebrow{margin-bottom:1rem}
  .ft-hero .wrap{width:100%}
  .ft-hero .hero-media{position:absolute; inset:0; margin:0}
  .ft-hero .hero-media img{height:100%; aspect-ratio:auto; object-position:60% 35%}
  /* Nur unten links hinter dem Text abdunkeln, schraeg nach oben rechts auslaufend; der Rest des Fotos bleibt unveraendert.
     Doppelte Klasse, damit die allgemeine Abdunklung der Unterseiten nicht greift. */
  .page-hero.ft-hero .hero-veil{
    display:block; position:absolute; inset:0; z-index:-1;
    background:
      radial-gradient(ellipse 42% 38% at 0% 100%, rgba(12,16,22,.28), rgba(12,16,22,0) 100%),
      linear-gradient(to top right, rgba(12,16,22,.55) 0%, rgba(12,16,22,.38) 26%, rgba(12,16,22,0) 50%);
  }
  /* Weicher Textschatten: eng fuer die Kanten, breit fuer einen sanften Hof um die Schrift */
  .ft-hero .page-hero-title,.ft-hero h1:not(.eyebrow),.ft-hero .lede,.ft-hero .eyebrow{
    text-shadow:0 1px 3px rgba(0,0,0,.35), 0 2px 16px rgba(0,0,0,.45), 0 4px 34px rgba(0,0,0,.35);
  }
  .ft-hero .lede,.ft-hero .eyebrow{color:#fff}
  /* Text schmal halten, damit das Brautpaar in der Bildmitte frei bleibt */
  .ft-hero .page-hero-title{max-width:12ch; font-size:clamp(2.5rem,1.6rem + 2vw,3.25rem)}
  .ft-hero .lede{max-width:25rem}
}

/* ---------- Karten ---------- */

.card{background:var(--card); border:1px solid var(--line); overflow:hidden}
.card-media{aspect-ratio:4/3; overflow:hidden; background:var(--soft)}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.card:hover .card-media img{transform:scale(1.03)}
.card-body{padding:clamp(1.25rem,2.5vw,1.75rem)}
.card-body h3{margin-bottom:.6rem}
.card-body p{font-size:var(--text-size)}
.card-meta{
  font-size:.6875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-text); margin-bottom:.75rem; display:block;
}
.card-foot{margin-top:1.25rem}

/* Hochzeitsblog: Artikelkarten ohne Bild, Titel als h2 unter der SEO-H1 */
.blog-list .card-media{position:relative}
.blog-list .hero-credit{position:absolute; right:.5rem; bottom:.4rem; font-size:.625rem}
.blog-list h2{font-size:clamp(1.375rem,1.2rem + .7vw,1.75rem); margin-bottom:.6rem}

/* Hochzeitsblog: Artikelseite. Textspalte links buendig mit der Ueberschrift im Kopf. */
.article-hero h1{max-width:20ch; text-wrap:balance}
.article-hero .eyebrow a{color:inherit; text-decoration:none}
.article-hero .eyebrow a:hover{text-decoration:underline}
/* Doppelte Klasse, sonst setzt .photo-credit den Abstand zurueck */
.photo-credit.article-photo{margin:0 0 clamp(2rem,4vw,3rem)}
.article-photo img{width:100%; aspect-ratio:3/2; object-fit:cover}
@media (min-width:52rem){.article-photo img{aspect-ratio:21/9}}
.prose{max-width:44rem}
.prose h2{margin:3.25rem 0 1rem}
.prose h3{margin:2.25rem 0 .6rem}
.prose ul,.prose ol{margin:0 0 1.15rem; padding-left:1.25rem; font-size:var(--text-size)}
.prose li{margin-bottom:.5rem; padding-left:.25rem}
.prose li::marker{color:var(--accent-text)}
.prose .faq{margin-top:0}
.prose .faq summary{font-size:1.1875rem}

/* Tabellen: auf dem Handy notfalls seitlich wischen, die Seite selbst scrollt nie quer */
.table-wrap{overflow-x:auto; margin:1.5rem 0 1.75rem; -webkit-overflow-scrolling:touch}
.prose table{width:100%; border-collapse:collapse; font-size:var(--text-size); line-height:1.45}
.prose th,.prose td{text-align:left; vertical-align:top; padding:.7rem 1rem .7rem 0; border-bottom:1px solid var(--line)}
.prose thead th{font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text)}
.prose tbody th{font-weight:600; color:var(--ink)}
.prose tfoot th,.prose tfoot td{border-bottom:0; border-top:2px solid var(--ink); color:var(--ink)}
.prose td:last-child,.prose th:last-child{padding-right:0}
.table-facts th{width:8.5rem}
.table-compare tbody th{width:7.5rem}
/* Drei Spalten passen auch aufs Handy, wenn Schrift und Abstaende etwas kleiner werden */
@media (max-width:40rem){
  .table-compare{font-size:.875rem}
  .table-compare th,.table-compare td{padding-right:.6rem}
  .table-compare tbody th{width:4.75rem}
}

.key-points{background:var(--soft); padding:clamp(1.25rem,3vw,2rem); margin:3rem 0}
.prose .key-points h2{margin-top:0; font-size:clamp(1.5rem,1.3rem + .8vw,2rem)}
.key-points ol,.key-points p{margin-bottom:0}

.article-end{margin-top:3rem}
.article-end .btn-row{margin-top:1.5rem}
.prose .article-links{list-style:none; padding:0; margin:2rem 0 0; display:grid; gap:.75rem}
.prose .article-links li{padding:0; margin:0}

.author-box{
  display:flex; gap:1.25rem; align-items:flex-start;
  margin-top:3.5rem; padding-top:2rem; border-top:1px solid var(--line);
}
.author-photo{margin:0; flex:none; width:clamp(5.5rem,14vw,7.5rem)}
.author-photo img{border-radius:50%; aspect-ratio:1; object-fit:cover}
.author-photo figcaption{font-size:.6875rem; color:var(--muted); margin-top:.4rem; text-align:center}
.author-box p{font-size:var(--text-size)}

.way-card{position:relative; display:block; text-decoration:none}
.way-card .card-media{aspect-ratio:3/2}
.way-price{
  font-family:var(--display); font-size:.9375rem; font-weight:600; color:var(--muted);
  display:block; margin-top:.35rem;
}

/* ---------- Merkmale (Rede + Gesang) ---------- */

.feature{border-top:1px solid var(--line); padding-top:1.5rem}
.on-deep .feature{border-top-color:rgba(255,255,255,.22)}
.feature .feature-key{
  display:block; font-size:.6875rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent-text); margin-bottom:.9rem;
}
.on-deep .feature .feature-key{color:var(--on-deep-label)}
.feature h3{margin-bottom:.6rem}
.feature p{font-size:var(--text-size)}

.quote-lead{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.5rem,1.15rem + 1.6vw,2.5rem); line-height:1.22;
  max-width:34ch; margin:0; color:#fff; text-wrap:balance;
}
.quote-lead em{font-style:italic; color:var(--on-deep-label)}

/* ---------- Video-Fassade ---------- */

.video-card{border:1px solid var(--line); background:var(--card); overflow:hidden}
.hear-speech{font-size:clamp(1.5rem,1.25rem + 1vw,2.125rem); font-weight:500; max-width:18ch}
.on-deep .video-card{border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.04)}
.video-facade{
  position:relative; width:100%; aspect-ratio:16/9; border:0; padding:0; margin:0;
  background:var(--soft); cursor:pointer; display:block; overflow:hidden;
}
.video-facade img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.video-facade:hover img{transform:scale(1.04)}
.video-facade::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.05));
}
.video-play{
  position:absolute; inset:0; margin:auto; z-index:2;
  width:3.5rem; height:3.5rem; border-radius:50%;
  background:rgba(255,255,255,.94); color:var(--deep-2);
  display:grid; place-items:center; font-size:1.75rem;
  transition:transform .25s ease;
}
.video-facade:hover .video-play{transform:scale(1.08)}
.video-tag{
  position:absolute; top:.75rem; left:.75rem; z-index:2;
  font-size:.5625rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(0,0,0,.5); color:#fff; padding:.25rem .5rem;
}
.video-body{padding:.9rem 1rem}
.video-title{display:block; font-size:.875rem; font-weight:500; line-height:1.4}
.video-where{display:block; font-size:.75rem; color:var(--muted); margin-top:.25rem}
.on-deep .video-where{color:var(--on-deep-muted)}
.video-frame-live{width:100%; aspect-ratio:16/9; border:0; display:block}

/* ---------- Ablauf ---------- */

.steps{counter-reset:step; list-style:none; margin:2.5rem 0 0; padding:0}
.steps > li{
  counter-increment:step; position:relative;
  padding:1.75rem 0 1.75rem 4rem; border-top:1px solid var(--line);
}
.steps > li:last-child{border-bottom:1px solid var(--line)}
.steps > li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute; left:0; top:1.75rem;
  font-family:var(--display); font-size:1.5rem; font-weight:500; color:var(--accent-text);
  font-variant-numeric:tabular-nums;
}
.steps h3{margin-bottom:.5rem}
/* Ueber Anne, „Ein paar Dinge“: Kacheln so hoch wie ihr Inhalt, Symbol neben dem Titel.
   Drei Spalten am Computer, zwei auf dem Tablet (dritte Spalte darunter), eine auf dem Handy. */
.things{display:grid; grid-template-columns:minmax(0,1fr); gap:.75rem; margin-top:clamp(1.5rem,3vw,2.25rem); align-items:start}
.things-col{list-style:none; margin:0; padding:0; display:grid; gap:.75rem; align-content:start}
.thing{
  background:var(--card); border:1px solid var(--line); border-top:2px solid var(--accent);
  padding:1rem 1.25rem; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:.85rem; align-content:start;
}
.thing-icon{
  grid-row:1 / span 9; display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; border-radius:50%;
  background:var(--bg-alt); color:var(--accent-text); border:1px solid var(--line);
}
.thing-icon .mi{font-size:1.05rem}
.thing h3{font-size:1.15rem; line-height:1.25; margin:.2rem 0 .25rem}
.thing p{font-size:.9375rem; line-height:1.55; margin-bottom:0}
.thing p + p{margin-top:.6rem}
.thing-photo{display:block; padding:0; overflow:hidden}
.thing-photo img{width:100%; display:block; object-fit:cover}
.thing-photo > img:not(.thing-portrait){aspect-ratio:16/9; object-position:50% 60%}
.thing-photo figure{margin:0}
.thing-photo .thing-portrait{aspect-ratio:4/5; object-position:50% 22%}
.thing-photo figure img{aspect-ratio:4/3; object-position:55% 40%}
.thing-photo .thing-body{padding:1rem 1.25rem; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:.85rem; align-content:start}
/* Ab Tablet: alle Spalten gleich hoch, oben und unten buendig. Die Fotos fuellen den
   Rest jeder Spalte, deshalb sind sie in kuerzeren Spalten etwas hoeher. */
@media (min-width:40rem){
  .things{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch}
  .things-col{display:flex; flex-direction:column}
  .things-col > .thing{flex:none}
  .things-col > .thing-photo{flex:1 1 auto; display:flex; flex-direction:column}
  .thing-photo > img,.thing-photo > figure{flex:1 1 auto; min-height:9rem}
  .thing-photo > img,.thing-photo figure img{aspect-ratio:auto !important; height:100%}
  .thing-photo > .thing-portrait{min-height:20rem}
  .thing-photo > figure{display:flex}
  .thing-photo > figure img{flex:1}
  /* Tablet: dritte Spalte unter den beiden ersten, Villa links ueber zwei Kacheln rechts */
  .things-col:nth-child(3){grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:auto}
  .things-col:nth-child(3) > .thing-photo{grid-row:span 2}
}
@media (min-width:60rem){
  .things{grid-template-columns:repeat(3,minmax(0,1fr))}
  .things-col:nth-child(3){grid-column:auto; display:flex; flex-direction:column}
  .things-col:nth-child(3) > .thing-photo{grid-row:auto}
}
/* Textabschnitt ohne Foto ueber die volle Inhaltsbreite */
.text-block,.text-block h2,.text-block p{max-width:none}
/* Foto direkt unter einem Textabschnitt mit gleichem Hintergrund: kein doppelter Abstand */
.section + .section-photo{padding-top:0}
/* Breites Foto ueber die volle Inhaltsbreite; Handy 3:2, Computer flacher (2:1) */
.photo-wide img{width:100%; aspect-ratio:3/2; object-fit:cover; object-position:50% 55%}
@media (min-width:52rem){.photo-wide img{aspect-ratio:2/1}}

/* Gesang, Was ich mitbringe: Foto oben buendig mit dem Text, oben beschnitten, etwas schmaler */
.kit-split img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 80%}
@media (min-width:60rem){
  .kit-split{align-items:start}
  .split-media.media-left.kit-split{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}
}

/* Preise, Was ihr bekommt: Foto rechts, oben buendig mit der Ueberschrift */
.price-split img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 45%}
@media (min-width:60rem){
  .price-split{align-items:start}
  .split-media.price-split{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .price-split .faq{margin-top:1.5rem}
}

/* Freie Trauung, Haeufige Fragen: Foto links, oben buendig, bleibt beim Scrollen stehen */
.faq-split img{width:100%; aspect-ratio:3/4; object-fit:cover; object-position:55% 55%}
@media (min-width:60rem){
  .faq-split{align-items:start}
  .split-media.media-left.faq-split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .faq-split .faq-media{position:sticky; top:6rem}
  .faq-split .faq{max-width:none}
}

/* Fotonachweis klein unten rechts direkt auf dem Foto */
.photo-credit{position:relative; margin:0}
.photo-credit figcaption,.hero-credit{
  position:absolute; right:.5rem; bottom:.4rem; font-size:.6875rem; line-height:1.3;
  color:rgba(255,255,255,.9); text-shadow:0 1px 3px rgba(0,0,0,.6); pointer-events:none;
}

/* Ueber mich: Querformat-Foto, per CSS zugeschnitten. Handy 4:3, Computer 3:4. */
.about-media img{width:100%; aspect-ratio:4/3; object-fit:cover; object-position:45% 50%}
@media (min-width:60rem){.about-media img{aspect-ratio:3/4}}

/* So laeuft es ab: Handy Foto oben (3:2), dann Ueberschrift, Schritte, Preis.
   Computer: Schritte links, Foto rechts von der Oberkante der Ueberschrift bis zur
   Linie unter dem letzten Schritt; der Preis-Kasten steht darunter. */
.steps-split{display:grid; grid-template-columns:minmax(0,1fr)}
.steps-media{order:-1; margin-bottom:2rem; position:relative}
/* Handy: quadratisch und auf Gesichter und Haende ausgerichtet; Tablet quer */
.steps-media img{width:100%; aspect-ratio:1/1; object-fit:cover; object-position:50% 68%}
@media (min-width:40rem){.steps-media img{aspect-ratio:3/2; object-position:50% 50%}}
@media (min-width:60rem){
  .steps-split{
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); column-gap:clamp(2.5rem,5vw,5rem);
    grid-template-areas:"head media" "steps media" "price .";
  }
  .steps-head{grid-area:head}
  .steps-split > .steps{grid-area:steps}
  .steps-split > .price-box{grid-area:price}
  .steps-media{grid-area:media; order:0; margin:0; position:relative}
  .steps-media img{position:absolute; inset:0; height:100%; aspect-ratio:auto; object-position:50% 35%}
}

/* Preis-Kasten unter den Schritten; auf dem Handy alles untereinander und zentriert. */
.price-box{
  margin-top:1.5rem; background:var(--soft); border-top:2px solid var(--accent-text);
  padding:2.25rem 1.25rem; display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:1.75rem;
}
.price-box p{margin:0; max-width:none}
.price-box-label{
  font-size:.875rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-text); margin-bottom:.4rem !important;
}
.price-box-amount{
  font-family:var(--display); font-size:clamp(3rem,2.4rem + 2.4vw,3.9rem); font-weight:500;
  font-size-adjust:.46; font-variant-numeric:lining-nums; line-height:1;
  color:var(--ink); margin-bottom:.75rem !important;
}
.price-box-note{font-size:var(--text-size); text-wrap:pretty}
.price-box-cta{display:flex; flex-direction:column; align-items:center; gap:1rem; flex:none}
.price-box .link{font-size:var(--text-size)}
@media (min-width:43.75rem){
  .price-box{
    flex-direction:row; justify-content:space-between; text-align:left;
    padding:2.5rem 2.5rem; gap:2rem;
  }
}

.steps p{font-size:var(--text-size)}

/* ---------- Stimmen ---------- */

.quote{
  --quote-pad:clamp(1.5rem,3vw,2rem);
  margin:0; background:var(--card); border:1px solid var(--line);
  padding:var(--quote-pad); display:flex; flex-direction:column;
}
.quote figcaption .quote-credit{font-size:.6875rem; margin-top:.1rem}
/* Entwurf: fehlende Angabe sichtbar markieren */
.quote figcaption .quote-missing{width:fit-content; border:1px dashed var(--line-strong); background:var(--soft); padding:0 .35rem}
.quote blockquote{
  margin:0; font-family:var(--display); font-style:italic; font-weight:500;
  font-size:var(--quote-size); font-size-adjust:.46; line-height:1.5; color:var(--ink);
}
/* Unter dem Zitat: links Name, Ort, Fotonachweis, rechts ein rundes Paarfoto.
   Keine Trennlinie; beides ist vertikal mittig zueinander ausgerichtet. */
.quote{--avatar:112px}
@media (min-width:52rem){.quote{--avatar:140px}}
.quote figcaption{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:auto; font-size:.8125rem; font-weight:500; line-height:1.4;
}
/* Abstand Zitat bis Foto (beim laengsten Zitat einer Reihe) */
.quote blockquote{margin-bottom:1.5rem}
/* Karten in einer Reihe teilen sich die Zeilen: Zitat oben, Name und Foto darunter.
   So stehen Name und Foto in allen Karten auf derselben Hoehe. */
@supports (grid-template-rows:subgrid){
  .grid > .quote{display:grid; grid-row:span 2; grid-template-rows:subgrid; row-gap:0}
  .grid > .quote figcaption{margin-top:0}
}
.quote-who{display:block; min-width:0}
.quote-avatar{
  flex:none; width:var(--avatar); height:var(--avatar); border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 1px var(--line);
}
/* Einzelnes Zitat im Fliesstext, ohne Karte */
.quote.quote-plain{
  background:none; border:0; border-left:2px solid var(--accent); padding:.25rem 0 .25rem 1.25rem;
  margin-top:2rem;
}
.quote.quote-plain blockquote{margin-bottom:.75rem}
.quote figcaption span{display:block; font-weight:400; color:var(--muted); font-size:.75rem; margin-top:.05rem}

/* Seite Stimmen, Variante B: Name und Ort links unter einer Trennlinie, das Foto
   rechts auf der Linie, die obere Haelfte ragt in den Zitatbereich. */
.page-stimmen .stimmen-list{margin-top:clamp(1.25rem,2.5vw,1.75rem); gap:clamp(1rem,2vw,1.5rem)}
.page-stimmen .quote{--avatar:92px}
@media (min-width:40rem){.page-stimmen .quote{--avatar:110px}}
/* Abschluss: Absatz unter der Ueberschrift mittig, nicht links in der Spalte */
.stimmen-end-text{margin:1rem auto 0}
.page-stimmen .quote figcaption{
  display:block; position:relative; border-top:1px solid var(--line); padding-top:.85rem;
}
.page-stimmen .quote-photo blockquote{margin-bottom:calc(var(--avatar) / 2 + 1rem)}
.page-stimmen .quote-photo figcaption{
  padding-right:calc(var(--avatar) + 1rem); min-height:calc(var(--avatar) / 2 + 1.75rem);
}
.page-stimmen .quote figcaption .quote-pic{
  position:absolute; right:0; top:calc(var(--avatar) / -2); width:var(--avatar);
  display:flex; flex-direction:column; align-items:center; margin:0;
}
/* Quadratisch statt rund, damit Koepfe in den Ecken nicht angeschnitten werden.
   Heller Rahmen in Kartenfarbe, damit das Foto die Linie sauber unterbricht */
.page-stimmen .quote-avatar{border-radius:0; box-shadow:0 0 0 4px var(--card), 0 0 0 5px var(--line)}
.page-stimmen .quote-pic .quote-credit{
  font-size:.625rem; line-height:1.3; margin-top:.5rem; text-align:center; white-space:nowrap;
}
/* Weitere Karten erst nach „Mehr Stimmen“, ohne JavaScript alle sichtbar */
html.js .page-stimmen .stimmen-list:not(.is-open) .quote-more{display:none}
.stimmen-more-row{margin-top:clamp(1.25rem,2.5vw,1.75rem)}
html:not(.js) .stimmen-more-row{display:none}
/* Der Fokus nach „Mehr Stimmen“ dient nur Tastatur und Vorleser, ohne sichtbaren Rahmen */
.page-stimmen .quote[tabindex="-1"]:focus{outline:none}
.btn-more{background:var(--card); border-color:var(--line-strong); color:var(--ink)}
.btn-more:hover{background:var(--soft)}
.btn-more .mi{font-size:1.25rem}
/* Karte mit ganzem Wortlaut zum Aufklappen */
.quote-text blockquote{margin-bottom:.75rem}
.quote-toggle{background:none; border:0; border-bottom:1px solid currentColor; border-radius:0;
  padding:0 0 1px; margin-bottom:1.5rem; cursor:pointer; font-family:var(--body)}
.quote-toggle .mi{font-size:1.125rem; transition:transform .2s ease}
.quote-toggle[aria-expanded="true"] .mi{transform:rotate(180deg)}
/* Karten mit Foto: der Abstand fuer den Kreis steht unter dem Link, nicht unter dem Zitat */
.page-stimmen .quote-photo .quote-text blockquote{margin-bottom:.75rem}
.page-stimmen .quote-photo .quote-toggle{margin-bottom:calc(var(--avatar) / 2 + 1rem)}
/* Aufgeklappt: die Karte bekommt eine eigene Zeile ueber die ganze Breite, damit die
   Nachbarkarten nicht mitwachsen und der lange Text nicht in einer schmalen Spalte steht */
@media (min-width:40rem){
  .page-stimmen .quote.is-expanded{grid-column:1 / -1}
  .page-stimmen .quote.is-expanded .quote-full{max-width:48rem}
}
/* Aufgeklappt wird auch das Foto groesser */
.page-stimmen .quote.is-expanded{--avatar:160px}
@media (min-width:40rem){
  /* Am Computer steht das grosse Foto oben rechts neben dem ganzen Text */
  .page-stimmen .quote.is-expanded{--avatar:240px}
  .page-stimmen .quote-photo.is-expanded{position:relative}
  .page-stimmen .quote-photo.is-expanded figcaption{position:static; padding-right:0; min-height:0}
  .page-stimmen .quote-photo.is-expanded .quote-pic{top:var(--quote-pad); right:var(--quote-pad)}
  .page-stimmen .quote-photo.is-expanded .quote-text{
    padding-right:calc(var(--avatar) + 2.5rem); min-height:calc(var(--avatar) + 2.5rem);
  }
  .page-stimmen .quote-photo.is-expanded .quote-toggle{margin-bottom:1.5rem}
}
/* Einstieg: Kennzahlen auf dunklem Grund */
.page-stimmen .page-hero .facts{border-color:rgba(255,255,255,.18); margin-top:2rem}
.page-stimmen .page-hero .fact{color:var(--on-deep)}
.page-stimmen .page-hero .fact .mi,.page-stimmen .page-hero .link{color:var(--on-deep-label)}
/* Foto ueber die ganze Breite; das Paar steht rechts der Mitte, der Text links unten
   auf der dunklen Backsteinwand */
@media (min-width:60rem){
  /* Leicht vergroessert und links verankert: das Paar rueckt nach rechts,
     links bleibt die Backsteinwand fuer den Text frei */
  .page-stimmen .ft-hero .hero-media img{object-position:50% 30%; transform:scale(1.3); transform-origin:0 15%}
  .page-stimmen .ft-hero .wrap > *{max-width:min(24rem, 30vw)}
  .page-stimmen .ft-hero .facts{gap:1rem 2rem}
}

/* ---------- Preise ---------- */

.price-card{
  background:var(--card); border:1px solid var(--line);
  padding:clamp(1.5rem,3vw,2.25rem); display:flex; flex-direction:column;
}
.price-card.is-lead{border-color:var(--accent); border-width:1px; box-shadow:var(--shadow)}
.price-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.price-amount{
  font-family:var(--display); font-size:clamp(1.75rem,1.4rem + 1.2vw,2.5rem);
  font-weight:500; color:var(--deep); font-variant-numeric:lining-nums tabular-nums; white-space:nowrap;
}
.price-lead{font-weight:500; color:var(--ink); margin:0}
.price-note{font-size:.8125rem; color:var(--muted); margin-top:.5rem}
.price-list{list-style:none; margin:1.5rem 0 0; padding:0; font-size:var(--text-size)}
.price-list li{display:grid; grid-template-columns:1.5rem 1fr; gap:.5rem; padding:.5rem 0}
.price-list .mi{color:var(--accent-text); font-size:1.1rem; margin-top:.15rem}
.price-rows{list-style:none; margin:1.5rem 0 0; padding:0; border-top:1px solid var(--line)}
.price-rows li{
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.85rem 0; border-bottom:1px solid var(--line); font-size:var(--text-size);
}
.price-rows b{font-family:var(--display); font-weight:600; white-space:nowrap; font-variant-numeric:lining-nums tabular-nums}
.price-hint{
  display:flex; gap:.75rem; align-items:flex-start;
  background:var(--soft); padding:1.25rem; margin-top:2rem; font-size:var(--text-size);
}
.price-hint .mi{color:var(--accent-text); flex:none}
.price-hint p{max-width:none}

/* ---------- Repertoire ---------- */

.song-search{position:relative; margin-top:2rem; max-width:36rem}
.song-search .mi{position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none}
.song-search input{
  width:100%; font-family:var(--body); font-size:var(--text-size); color:var(--ink);
  background:var(--card); border:1px solid var(--line-strong); border-radius:2rem;
  padding:.85rem 3rem .85rem 2.85rem; appearance:none;
}
.song-search input:focus{outline:2px solid var(--accent-text); outline-offset:1px; border-color:var(--accent-text)}
.song-search input::-webkit-search-cancel-button{display:none}
.song-search-clear{
  position:absolute; right:.4rem; top:50%; transform:translateY(-50%);
  width:2.5rem; height:2.5rem; border:0; background:none; cursor:pointer; color:var(--muted);
  display:grid; place-items:center; border-radius:50%;
}
.song-search-clear .mi{position:static; transform:none}
.song-search-clear[hidden]{display:none}
.song-search-clear:hover{background:var(--soft); color:var(--ink)}
.song-search-status{margin:.6rem 0 0 1rem; font-size:.8125rem; color:var(--muted); min-height:1.2em}
.song-search-empty{margin-top:1rem}
.filter-bar{
  display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 2.5rem;
  padding-bottom:2rem; border-bottom:1px solid var(--line);
}
.chip{
  appearance:none; cursor:pointer; background:transparent;
  border:1px solid var(--line-strong); color:var(--ink);
  font-family:var(--body); font-size:.8125rem; font-weight:500;
  padding:.5rem 1rem; border-radius:2rem;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.chip:hover{background:var(--soft)}
.chip[aria-pressed="true"]{background:var(--accent-text); border-color:var(--accent-text); color:#fff}
.chip .count{opacity:.6; font-size:.75rem; margin-left:.25rem}

.genre{margin-bottom:3rem}
.genre h2{
  font-size:1.25rem; padding-bottom:.75rem; margin-bottom:1rem;
  border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:.75rem;
}
.genre h2 span{font-family:var(--body); font-size:.6875rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.song-list{list-style:none; margin:0; padding:0; columns:2; column-gap:2.5rem}
@media (max-width:44rem){.song-list{columns:1}}
.song-list li{
  break-inside:avoid; padding:.3rem 0; font-size:.9375rem;
  display:flex; align-items:baseline; gap:.4rem;
}
/* display:flex oben wuerde das hidden-Attribut der Suche sonst ueberstimmen */
.song-list li[hidden],.genre[hidden]{display:none}
.song-list a{
  display:inline-flex; align-items:baseline; gap:.35rem;
  text-decoration:none; color:var(--accent-text); border-bottom:1px solid transparent;
}
.song-list a:hover{border-bottom-color:currentColor}
.song-list .mi{font-size:1rem; flex:none}
/* Nur fuer Screenreader sichtbar */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---------- FAQ ---------- */

.faq{border-top:1px solid var(--line); margin-top:2.5rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; padding:1.25rem 2.5rem 1.25rem 0; position:relative;
  font-family:var(--display); font-size:1.0625rem; list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"add"; font-family:"Material Symbols Outlined"; font-size:1.25rem;
  position:absolute; right:0; top:1.15rem; color:var(--accent-text);
  transition:transform .25s ease;
}
.faq details[open] summary::after{content:"remove"}
.faq .faq-body{padding-bottom:1.5rem}
.faq .faq-body p{font-size:var(--text-size)}

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */

.legal h2{margin-bottom:1.25rem}
.legal h3{margin:2.75rem 0 .75rem}
.legal h2 + h3{margin-top:0}

/* ---------- Formular ---------- */

.form-grid{display:grid; gap:1.25rem}
@media (min-width:40rem){.form-grid{grid-template-columns:1fr 1fr}}
.field{display:flex; flex-direction:column; gap:.4rem}
.field.full{grid-column:1/-1}
.field label{font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.field input,.field textarea,.field select{
  font-family:var(--body); font-size:1rem; color:var(--ink);
  background:var(--card); border:1px solid var(--line-strong);
  padding:.8rem .9rem; border-radius:0; width:100%;
}
.field textarea{min-height:8rem; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--muted); opacity:.7}
.choice-row{display:flex; flex-wrap:wrap; gap:.5rem}
.choice{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  border:1px solid var(--line-strong); padding:.5rem 1rem; border-radius:2rem;
  font-size:.8125rem; font-weight:500;
}
/* .choice und .consent sind Labels im Feld, sollen aber nicht wie Feldbeschriftungen aussehen. */
.field .choice,.field .consent{text-transform:none; letter-spacing:0; font-weight:500}
.field .choice{color:inherit; line-height:1.3}
.choice input{accent-color:var(--accent-text); margin:0; width:auto; flex:none}
.choice:has(input:checked){background:var(--soft); border-color:var(--accent-text); color:var(--ink)}
.consent{display:flex; gap:.6rem; align-items:flex-start; font-size:.8125rem; color:var(--muted)}
.consent input{margin-top:.25rem; accent-color:var(--accent-text); width:auto; flex:none}
.on-deep .consent{color:var(--on-deep-muted)}

.contact-direct{list-style:none; margin:2rem 0 0; padding:0}
.contact-direct li{display:flex; gap:.75rem; align-items:center; padding:.6rem 0; font-size:var(--text-size)}
.contact-direct .mi{color:var(--accent-text)}
.contact-direct a{text-decoration:none}
.contact-direct a:hover{text-decoration:underline}

/* ---------- Instagram-Streifen ---------- */

.ig-strip{display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem}
@media (min-width:44rem){.ig-strip{grid-template-columns:repeat(4,1fr)}}
.ig-strip img{aspect-ratio:1; object-fit:cover; width:100%}
.ig-item{position:relative; display:block; overflow:hidden}
.ig-item .mi{
  position:absolute; right:.5rem; bottom:.5rem; color:#fff; font-size:1.1rem;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}

/* ---------- Info-Zeile / Badges ---------- */

.facts{
  display:flex; flex-wrap:wrap; gap:1rem 2.5rem; align-items:center;
  padding:1.5rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin-top:2.5rem;
}
.fact{display:flex; align-items:center; gap:.6rem; font-size:.875rem}
.fact .mi{color:var(--accent-text)}
.fact b{font-family:var(--display); font-weight:600; font-size:1.0625rem}

.kit{list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:1rem}
@media (min-width:44rem){.kit{grid-template-columns:1fr 1fr}}
.kit li{display:flex; gap:.75rem; align-items:flex-start; font-size:var(--text-size)}
.kit .mi{color:var(--accent-text); flex:none}

.callout{
  border-left:2px solid var(--accent); padding:.25rem 0 .25rem 1.25rem;
  margin:2rem 0; font-size:var(--text-size);
}
.callout p{max-width:44rem}
.callout strong{color:var(--ink)}

.placeholder{
  border:1px dashed var(--line-strong); background:var(--soft);
  padding:clamp(1.25rem,3vw,2rem); display:flex; gap:.75rem; align-items:flex-start;
}
.placeholder .mi{color:var(--accent-text); flex:none}
.placeholder p{font-size:.9375rem; color:var(--muted); max-width:44rem}
.placeholder strong{color:var(--ink); font-weight:600}
/* display:flex oben wuerde das hidden-Attribut sonst ueberstimmen */
.placeholder[hidden]{display:none}
/* Kurzer Platzhalter mitten im Text, z. B. unbekannter Bildnachweis */
.placeholder-inline{background:#FFE58A; color:#3A2E00; padding:0 .35em; text-shadow:none}
.placeholder span{color:var(--muted)}

/* ---------- Fuß ---------- */

.site-foot{background:var(--bg-alt); border-top:1px solid var(--line); margin-top:0}
.foot-inner{
  max-width:76rem; margin:0 auto; padding:clamp(3rem,6vw,5rem) var(--pad) 2.5rem;
  display:grid; gap:2.5rem; grid-template-columns:1fr;
}
@media (min-width:44rem){.foot-inner{grid-template-columns:1fr 1fr}}
@media (min-width:64rem){.foot-inner{grid-template-columns:1.6fr 1fr 1fr 1.2fr}}
.foot-brand p{font-size:.875rem; color:var(--muted); margin-top:1rem}
.foot-social{display:flex; gap:.5rem; margin-top:1rem; }
.foot-social a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.75rem; min-height:2.75rem; color:var(--muted);
}
.foot-social a:hover{color:var(--ink)}
.foot-nav h2{
  font-family:var(--body); font-size:.6875rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:1rem;
}
.foot-nav ul{list-style:none; margin:0; padding:0}
.foot-nav li{margin-bottom:.25rem}
.foot-nav a{font-size:.875rem; text-decoration:none; display:inline-block; padding:.35rem 0}
.foot-nav a:hover{text-decoration:underline}
.foot-contact a{display:inline-flex; align-items:center; gap:.5rem}
.foot-contact .mi{color:var(--accent-text); font-size:1.1rem}

.foot-legal{
  border-top:1px solid var(--line); max-width:76rem; margin:0 auto;
  padding:1.25rem var(--pad) 2rem;
  display:flex; flex-wrap:wrap; gap:.75rem 2rem; align-items:center;
  font-size:.75rem; color:var(--muted);
}
.foot-legal nav{display:flex; gap:1.5rem}
.foot-legal a{text-decoration:none; display:inline-block; padding:.4rem 0}
.foot-legal a:hover{text-decoration:underline}

/* ---------- Sticky-CTA mobil ---------- */

.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:98;
  display:flex; gap:.5rem; padding:.75rem;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  border-top:1px solid var(--line);
  backdrop-filter:blur(8px);
  transform:translateY(110%); transition:transform .3s ease;
}
.sticky-cta.is-visible{transform:translateY(0)}
@media (min-width:48rem){.sticky-cta{display:none}}
body:has(.mobile-nav:not([hidden])) .sticky-cta{display:none}

/* ---------- Reveal ---------- */

/* Ohne JS bleibt alles sichtbar: die html.js-Klasse setzt erst das Skript.
   So kann eine fehlgeschlagene Skriptausfuehrung keine Inhalte verstecken. */
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0; transform:translateY(1.25rem); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1)}
  html.js .reveal.is-in{opacity:1; transform:none}
}

@media print{
  .site-head,.sticky-cta,.mobile-nav,.hero-scroll{display:none}
  .hero{min-height:auto}
  /* Karten, Bilder und Fusszeile nicht ueber zwei Seiten zerschneiden */
  .card,.price-card,.quote,.video-card,.thing,figure,.placeholder,.callout,footer{break-inside:avoid}
  h2,h3,.eyebrow{break-after:avoid}
}

/* ---------- Kontakt ---------- */

/* Kopffoto: das Brautpaar steht in der Mitte, die Zeile ueber der Ueberschrift bricht
   deshalb frueher um und bleibt links bei den Gaesten */
@media (min-width:60rem){.page-kontakt .ft-hero h1.eyebrow{max-width:22rem}}

/* Und dann?: Foto im Hochformat schmaler als der Text; auf dem Handy steht es darueber */
@media (min-width:52rem){
  .split-media.media-left.kontakt-split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
}
/* Foto am See: auf dem Handy quer, Ausschnitt von oben auf Gesicht und Mikrofon;
   am Computer das ganze Hochformat neben dem Text */
.kontakt-foto img{width:100%; aspect-ratio:4/3; object-fit:cover; object-position:50% 0}
@media (min-width:52rem){.kontakt-foto img{aspect-ratio:auto}}
.kontakt-direkt{margin:clamp(1.75rem,3vw,2.5rem) 0 0}

/* ---------- Anfrageformular ---------- */

/* Falle fuer Spam-Programme, fuer Menschen nicht sichtbar */
.field-trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-status{margin-top:1rem}
.form-status .callout{margin:0}
.form-status .form-ok{display:flex; gap:.75rem; align-items:flex-start}
.form-status .form-ok[hidden]{display:none}
.form-status .form-ok .mi{color:var(--accent-text); flex:none}
form[aria-busy="true"] button[type="submit"]{opacity:.6; cursor:progress}

/* ---------- Termine ---------- */

/* Startseite: eine Zeile im Abschnitt „Hört einfach mal rein“, zwischen Liedern und Rede */
.termin-hinweis{margin-top:clamp(1.5rem,3vw,2.25rem); padding:1.1rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.on-deep .termin-hinweis{border-color:rgba(255,255,255,.18)}
.on-deep .termin-hinweis p{color:var(--on-deep)}
.on-deep .termin-hinweis p > .mi{color:var(--on-deep-label)}
.termin-hinweis p{margin:0; max-width:none; font-size:var(--text-size)}
/* Symbol im Textfluss, damit es auf dem Handy nicht allein in einer Zeile steht */
.termin-hinweis p > .mi{color:var(--accent-text); vertical-align:-.2em; margin-right:.5rem}
.termin-hinweis .link{margin-left:.75rem; white-space:nowrap}
.termin-hinweis [hidden]{display:none}
/* Gesang-Seite: Liste der Auftritte, am Computer zweispaltig */
/* Spalten von oben nach unten, damit die Termine der Reihe nach lesbar sind */
.termine-liste{list-style:none; margin:clamp(1.5rem,3vw,2.25rem) 0 0; padding:0; column-gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:52rem){.termine-liste{columns:2}}
.termine-liste li{padding:1rem 0; border-top:1px solid var(--line); break-inside:avoid}
.termine-liste p{margin:0; font-size:var(--text-size)}
.termine-liste .termin-wann{font-weight:600; color:var(--ink)}
.on-deep .termine-liste li{border-color:rgba(255,255,255,.18)}
.on-deep .termine-liste p{color:var(--on-deep-muted)}
.on-deep .termine-liste .termin-wann{color:#fff}