/* ============================================================
   Pro-Movement – Unterseiten (Bride-Fit · Wissenswertes · FAQ)
   Baut auf style.css auf: gleiche Tokens, gleiche Bausteine
   (Header, Footer, FAB, CTA-Bar, .btn, .kicker, Reveals).
   Nur die seiten-spezifischen Komponenten leben hier, damit die
   abgenommene Startseite (style.css) unangetastet bleibt.
   ============================================================ */

/* Bildfamilie: derselbe kühle Grade wie auf der Startseite, plus
   weicher Radial-Auslauf (kein „aufgeklebtes" Foto, Tabu 2). */
.soft-photo img{filter:saturate(.82) contrast(1.05) brightness(1.02)}
.soft-photo{
  -webkit-mask-image:radial-gradient(128% 128% at 50% 46%,#000 60%,rgba(0,0,0,.55) 80%,transparent 99%);
  mask-image:radial-gradient(128% 128% at 50% 46%,#000 60%,rgba(0,0,0,.55) 80%,transparent 99%);
}

/* ============================================================
   Subpage-Hero (hell): Kicker · Anton-H1 · Lead – wie die
   Startseiten-Sprache, nur ohne Freisteller.
   ============================================================ */
.sp-hero{
  position:relative;overflow:hidden;overflow:clip;
  padding-top:calc(var(--head-h) + clamp(48px,8vw,110px));
  padding-bottom:clamp(40px,6vw,72px);
  background:linear-gradient(180deg,var(--bg),var(--bg-ice));
}
.sp-hero .wrap{position:relative;z-index:1}
.sp-hero h1{max-width:20ch;margin-top:6px}
.sp-hero .sp-lead{
  font-size:clamp(1.08rem,1.8vw,1.34rem);line-height:1.6;color:var(--ink-soft);
  margin-top:22px;max-width:60ch;
}
.sp-breadcrumb{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:.82rem;color:var(--ink-low);margin-top:28px;
}
.sp-breadcrumb a{color:var(--ink-low);border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.sp-breadcrumb a:hover{color:var(--blue);border-color:var(--blue)}
.sp-breadcrumb span[aria-hidden]{opacity:.5}
/* Wort-Index im Kicker (z. B. „Bride-Fit", „Wissenswertes") nicht umbrechen */
.k-idx{white-space:nowrap}

/* ============================================================
   Wissenswertes – Blog-Liste (editoriale Reihen, Hairlines,
   Konturziffer, weich auslaufende Fotos, KEINE Karten)
   ============================================================ */
.blog{padding-block:clamp(48px,7vw,90px)}
.blog-row{
  display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,40px);
  padding-block:clamp(38px,5vw,60px);
  border-top:1px solid var(--line);align-items:center;
}
.blog-row:first-child{border-top:none;padding-top:0}
@media(min-width:760px){
  .blog-row{grid-template-columns:minmax(0,46%) 1fr}
  .blog-row:nth-child(even) .blog-media{order:2}
  /* Beiträge ohne eigenes Foto (z. B. Manuel liefert nur Text): ohne .blog-media
     bliebe die 46%-Spalte leer und der Text säße links eingequetscht – darum
     volle Breite statt der 2-Spalten-Aufteilung. */
  .blog-row.no-media{grid-template-columns:1fr}
}
.blog-media{
  position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:22px;
}
.blog-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.blog-row:hover .blog-media img{transform:scale(1.04)}
.blog-num{
  font-family:var(--fd);font-weight:400;color:var(--amber-deep);
  font-size:.9rem;letter-spacing:.08em;
  display:inline-flex;align-items:center;gap:14px;margin-bottom:16px;
}
.blog-num::after{content:"";width:38px;height:1.5px;background:var(--amber);border-radius:2px}
.blog-h{font-size:clamp(1.55rem,3.1vw,2.5rem);line-height:1.06;margin-bottom:14px}
.blog-h a{color:var(--ink);transition:color .3s}
.blog-h a:hover{color:var(--blue-deep)}
.blog-ex{color:var(--ink-soft);max-width:56ch;margin-bottom:22px}
.blog-meta{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
.blog-by{font-size:.9rem;color:var(--ink-low)}
.blog-by b{color:var(--ink-soft);font-weight:700}

/* ============================================================
   Beitrag – Artikel-Layout
   ============================================================ */
.art-hero{
  position:relative;overflow:hidden;overflow:clip;
  padding-top:calc(var(--head-h) + clamp(40px,7vw,96px));
  padding-bottom:clamp(28px,4vw,44px);
  background:linear-gradient(180deg,var(--bg),var(--bg-ice));
}
.art-hero .wrap{position:relative;z-index:1;max-width:900px}
.art-hero h1{font-size:clamp(2.1rem,5vw,4rem);max-width:20ch}
.art-sub{font-size:clamp(1.06rem,1.7vw,1.28rem);line-height:1.55;color:var(--ink-soft);margin-top:20px;max-width:56ch}
.art-byline{
  display:inline-flex;align-items:center;gap:12px;margin-top:26px;
  font-size:.9rem;color:var(--ink-low);font-weight:600;
}
.art-byline::before{content:"";width:30px;height:1.5px;background:var(--amber);border-radius:2px}

/* Foto als Figur in NATÜRLICHER Größe (nie hochskaliert – die
   Quellbilder reichen von 350 bis 1200px; ein Vollbild-Bleed
   würde die kleinen unscharf ziehen, Lehre aus AP 07). */
.art-figure{margin:clamp(24px,4vw,40px) auto 0;padding-inline:clamp(20px,4vw,36px);max-width:1240px}
.art-figure figure{margin-inline:auto}
.art-figure img{
  width:100%;height:auto;border-radius:20px;
  filter:saturate(.82) contrast(1.05) brightness(1.02);
}
.art-figure figcaption{margin-top:12px;font-size:.82rem;color:var(--ink-low);text-align:center;max-width:60ch;margin-inline:auto}

.art-body{max-width:720px;margin-inline:auto;padding:clamp(40px,6vw,72px) clamp(20px,4vw,36px) 0}
.art-body h2{
  font-size:clamp(1.6rem,3vw,2.35rem);line-height:1.12;
  margin:clamp(38px,5vw,60px) 0 18px;
}
.art-body h3{
  font-size:clamp(1.24rem,2vw,1.55rem);letter-spacing:.01em;
  margin:clamp(30px,4vw,44px) 0 12px;color:var(--ink);
}
/* Blocksatz (Manuel 16.07., alle Breiten – wie PT/Über-mich am Telefon):
   braucht Silbentrennung, sonst reißen die Wortabstände auf (lang="de"). */
.art-body p{margin-bottom:1.35em;color:var(--ink-soft);text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.art-body>p:first-of-type{color:var(--ink);font-size:1.12rem;line-height:1.72}
/* Messing-Initial wie „Was ist PT" auf der Startseite */
.art-body>p:first-of-type::first-letter{
  font-family:var(--fd);font-weight:400;float:left;
  font-size:3.4em;line-height:.78;padding:.06em .12em 0 0;color:var(--amber-deep);
}
.art-body a{
  color:var(--blue-deep);font-weight:600;
  border-bottom:1.5px solid rgba(46,92,151,.32);
  transition:border-color .3s,color .3s;
}
.art-body a:hover{color:var(--blue);border-color:var(--blue)}
.art-body ul,.art-body ol{margin:0 0 1.35em;padding-left:2px}
.art-body li{position:relative;padding-left:34px;margin-bottom:.7em;color:var(--ink-soft)}
.art-body ul li::before{
  content:"";position:absolute;left:6px;top:.72em;width:12px;height:2px;
  background:var(--amber);border-radius:2px;
}
.art-body ol{counter-reset:art}
.art-body ol li{counter-increment:art}
.art-body ol li::before{
  content:counter(art);position:absolute;left:0;top:.05em;
  font-family:var(--fd);font-weight:400;font-size:1rem;color:var(--amber-deep);
}
.art-body .art-tip{
  border-left:2px solid var(--amber);padding:2px 0 2px 20px;margin:0 0 1.35em;
  color:var(--ink-soft);
}
.art-body .art-tip b{color:var(--ink)}
/* Übungs-Illustrationen direkt im Fließtext (erstmals Rücken-Artikel, 8
   Bilder statt nur 1 Aufmacher-Foto). Nachtrag (Manuel-Screenshot): Rand
   raus (Bild-Hintergrund ist eh exakt auf --bg abgestimmt, verschmilzt
   von selbst – ein Rand macht es nur wieder "eingerahmt") und bewusst
   BREITER als die schmale .art-body-Lesespalte (720/800px), wie es die
   .art-figure-Aufmacher schon immer tun – sonst bleibt auf breiten
   Screens Fläche ungenutzt, die die Illustration eigentlich füllen könnte.
   Breakout-Trick OHNE transform: [data-rv] hat (html.js [data-rv]:not(.is-in),
   style.css) ein spezifischeres transform:translateY(30px) fürs Einblenden,
   das jede eigene transform-Regel hier vor dem Reveal überschreiben würde
   (Bild bliebe unzentriert bis zum Scrollen). Stattdessen reines margin:
   min(450px,50vw) ist die halbe Breite der Box (450 = 900/2), dadurch
   bleibt sie exakt auf der Viewport-Mitte zentriert – auch unterhalb 900px
   Breite, wo sie automatisch randlos auf 100vw geht. max-width 900px =
   native Auflösung der Exporte, kein Hochskalieren. */
.art-body .art-inline-fig{
  width:100vw;max-width:900px;
  margin-inline:calc(50% - min(450px,50vw));
  margin-top:20px;margin-bottom:28px;border-radius:20px;
  overflow:hidden;background:var(--bg);
}
.art-body .art-inline-fig img{width:100%;height:auto;display:block}

/* Golf-Selbsttest: interaktive Auswertung im Artikel-Fließtext (19.07.,
   Vorlage von Manuel geliefert). Bewusst KEINE Card-Optik pro Test (Tabu 2)
   – Buttons/Ergebnis reihen sich in den bestehenden Fließtext ein, nur das
   Ergebnisfeld selbst bekommt einen Hairline-Rand + leichten Ton als
   Container. Score-Farbskala läuft Blau→Amber statt der ursprünglich
   vorgeschlagenen Rot/Grün-Ampel (Tabu 7: kein Rot). */
/* Grid statt Flex, damit die 3 Optionen wirklich gleich breit werden
   (Manuel-Feedback) – bei Flex bestimmt der längste Label-Text die Breite.
   Schmal: 1 Spalte gestapelt. Ab 640px (Breakpoint wie .lp-cards): 3 Spalten
   nebeneinander. */
.gt-opts{margin:14px 0 0;display:grid;grid-template-columns:1fr;gap:.6rem}
@media(min-width:640px){.gt-opts{grid-template-columns:repeat(3,1fr)}}
.gt-opt{
  font:inherit;font-size:.92rem;line-height:1.4;text-align:left;
  padding:.65rem 1rem;border:1.5px solid var(--powder);border-radius:10px;
  background:#fff;color:var(--ink-soft);cursor:pointer;
  transition:border-color .2s,background .2s,color .2s;
}
.gt-opt:hover{border-color:var(--blue)}
.gt-opt:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.gt-opt[aria-pressed="true"]{border-color:var(--amber);background:var(--amber-soft);color:var(--ink);font-weight:600}
.gt-result{
  margin:clamp(30px,4vw,44px) 0 0;padding:clamp(22px,3.5vw,32px);
  background:var(--bg-ice);border:1px solid var(--line);border-radius:20px;
}
.gt-result h3{margin-top:0}
.gt-placeholder{color:var(--ink-low);margin:0}
.gt-badge{display:inline-block;font-family:var(--ft);font-weight:700;font-size:.82rem;letter-spacing:.01em;padding:.35rem .85rem;border-radius:8px;margin-bottom:1rem}
.gt-line{display:flex;gap:.65rem;align-items:flex-start;font-size:.95rem;line-height:1.6;color:var(--ink-soft);margin-bottom:.6rem}
.gt-line strong{color:var(--ink)}
.gt-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-top:.5em}
.gt-rat{margin:1rem 0 0;color:var(--ink)}
.gt-cta-row{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.gt-reset{display:block;margin:.9rem auto 0;font:inherit;font-size:.85rem;color:var(--ink-low);background:none;border:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.gt-reset:hover{color:var(--blue-deep)}

/* Artikel-Ende: CTA + Weiterlesen + Zurück. padding-bottom NEU (Manuel-
   Screenshot: „Zurück zu allen Beiträgen" hing fast ohne Abstand am
   Footer, da weder .art-back noch .art-foot bislang unten etwas
   Luft ließen) – Wert spiegelt das margin-top oben für Symmetrie. */
.art-foot{max-width:720px;margin:clamp(48px,6vw,72px) auto 0;padding:0 clamp(20px,4vw,36px) clamp(48px,6vw,72px)}
.art-cta{
  position:relative;overflow:hidden;overflow:clip;border-radius:26px;
  background:linear-gradient(160deg,var(--night),var(--night-2));
  padding:clamp(30px,4.5vw,52px);
}
.art-cta h2{color:#fff;font-size:clamp(1.5rem,3vw,2.2rem);max-width:20ch;margin-bottom:14px}
/* Nachtrag (Manuel-Screenshot): der 48ch-Deckel ließ in der (jetzt auch
   breiteren, s. .art-inline-fig) Box viel Fläche ungenutzt rechts stehen
   – weg damit, Text füllt jetzt die Box-Breite. Blocksatz+Trennung wie
   beim übrigen Fließtext (.art-body p), damit es nicht wie ein Bruch
   im sonst durchgehenden Blocksatz-Muster der Seite wirkt. */
.art-cta p{
  color:var(--ice-soft);margin-bottom:26px;
  text-align:justify;-webkit-hyphens:auto;hyphens:auto;
}
/* CTA-Button auf Nachtblau: Pfeil raus (kein zusätzlicher Akzent nötig,
   Button steht bereits solo im dunklen Feld), Button selbst zentriert
   statt linksbündig am Fließtext. */
.art-cta .btn{display:flex;width:fit-content;margin-inline:auto}
.art-cta .btn-arr{display:none}
.art-more{margin-top:clamp(44px,6vw,64px);border-top:1px solid var(--line);padding-top:clamp(30px,4vw,42px)}
.art-more-h{font-family:var(--ft);font-weight:700;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-low);margin-bottom:22px}
.art-more-grid{display:grid;gap:14px}
@media(min-width:640px){.art-more-grid{grid-template-columns:1fr 1fr}}
.art-more-grid a{
  display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:16px;
  background:var(--bg-ice);color:var(--ink);font-weight:600;font-size:.98rem;
  transition:background .3s,transform .3s var(--ease),color .3s;
}
.art-more-grid a:hover{background:var(--bg-powder);transform:translateY(-2px);color:var(--blue-deep)}
.art-more-grid a svg{width:15px;height:15px;flex-shrink:0;color:var(--amber-deep)}
.art-back{display:inline-flex;align-items:center;gap:10px;margin:clamp(36px,5vw,52px) 0 0;font-weight:700;color:var(--blue);font-size:.98rem}
.art-back svg{width:16px;height:16px}
.art-back:hover{color:var(--blue-deep)}
/* Auf sehr breiten Bildschirmen wirkte die 720px-Spalte verloren (Manuel-
   Screenshot: viel ungenutzte Fläche links/rechts). +~15% statt der zuerst
   vorgeschlagenen 30% – bei Blocksatz+Silbentrennung kippt die Zeilenlänge
   sonst über die Lesbarkeits-Faustregel (ideal 50–75, bis ~90 Zeichen
   vertretbar; 720px liegt bei ~76, 800px bei ~88, 936px läge schon bei ~101).
   Erst ab 1400px, NICHT als Basiswert – 720px ist selbst auf großen Tablets
   quer schon die volle Spaltenbreite, eine generelle Erhöhung hätte also
   auch Tablet-Querformat mitgezogen (Manuel wollte dort nichts ändern).
   Gilt automatisch auch für Impressum/Datenschutz (teilen sich .art-body/
   .art-foot mit den Beiträgen) – konsistent statt zwei Text-Layouts. */
@media(min-width:1400px){
  .art-hero .wrap{max-width:1000px}
  .art-body,.art-foot{max-width:800px}
}

/* ============================================================
   Stadtteil-Landingpages + Rechtsseiten (Impressum/Datenschutz)
   Nutzen die .art-body-Typo, aber ohne Messing-Initial.
   ============================================================ */
.no-initial>p:first-of-type{font-size:inherit;color:var(--ink-soft)}
.no-initial>p:first-of-type::first-letter{
  float:none;font-family:inherit;font-size:inherit;line-height:inherit;
  padding:0;color:inherit;
}
.lead-line{
  font-size:clamp(1.12rem,1.9vw,1.35rem);line-height:1.6;
  color:var(--ink) !important;font-weight:600;
}
.lp-intro{font-size:1.06rem}
.lp-cards{display:grid;gap:14px;margin:clamp(26px,4vw,38px) 0}
@media(min-width:640px){.lp-cards{grid-template-columns:repeat(3,1fr)}}
.lp-card{background:var(--bg-ice);border-radius:18px;padding:22px 20px}
.lp-card .lc-h{
  display:block;font-family:var(--fd);font-weight:400;font-size:1.15rem;
  letter-spacing:.02em;color:var(--ink);margin-bottom:8px;
}
.lp-card p{margin:0;font-size:.95rem;color:var(--ink-soft)}
.lp-list{display:grid;gap:12px 28px;margin:0 0 1.35em}
@media(min-width:640px){.lp-list{grid-template-columns:1fr 1fr}}
.lp-list .checkitem{padding-left:0;margin:0}
.lp-quote{
  border-left:2px solid var(--amber);padding:4px 0 4px 22px;
  margin:clamp(26px,4vw,38px) 0 18px;
  font-size:1.08rem;line-height:1.7;color:var(--ink-soft);font-style:normal;
}
.lp-author{display:flex;align-items:center;gap:14px;margin-bottom:1.6em}
.lp-author img{width:54px;height:54px;border-radius:50%;object-fit:cover}
.lp-author .nm{font-size:.92rem;line-height:1.45;color:var(--ink-low)}
.lp-author .nm b{color:var(--ink)}
.lp-cta{margin-top:clamp(26px,4vw,38px)}
.lp-links{font-size:.95rem;color:var(--ink-low)}
.sp-note{
  background:var(--bg-ice);border-left:2px solid var(--amber);
  border-radius:0 14px 14px 0;padding:16px 20px;font-size:.92rem;
  color:var(--ink-soft) !important;
}

/* ============================================================
   FAQ – Akkordeon (native <details>, läuft auch ohne JS)
   ============================================================ */
.faq{padding-block:clamp(40px,6vw,80px)}
.faq-list{max-width:880px;margin-inline:auto}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;gap:20px;
  padding:clamp(22px,3vw,30px) 0;
  font-family:var(--ft);font-weight:700;font-size:clamp(1.05rem,1.8vw,1.28rem);
  line-height:1.35;color:var(--ink);transition:color .3s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--blue-deep)}
.faq-icon{
  position:relative;flex-shrink:0;width:26px;height:26px;margin-top:2px;
}
.faq-icon::before,.faq-icon::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--amber-deep);border-radius:2px;
  transform:translate(-50%,-50%);transition:transform .35s var(--ease),opacity .3s;
}
.faq-icon::before{width:15px;height:2px}
.faq-icon::after{width:2px;height:15px}
.faq-item[open] .faq-icon::after{transform:translate(-50%,-50%) scaleY(0);opacity:0}
.faq-q{flex:1}
/* Antwort gleitet auf statt aufzupoppen (18.07., Manuel-Feedback zur 16.07.-Fassung):
   die alte Lösung versteckte .faq-a komplett per display:none (html.js …:not([open])),
   nur der Text im Inneren faded per @keyframes — display:none kennt aber keinen
   Startwert zum Interpolieren, darum poppte die BOX trotzdem instantan auf, nur die
   Schrift faded hinterher. Jetzt bleibt .faq-a immer im Fluss (KEIN display:none mehr;
   Autoren-CSS gewinnt gegen die UA-Regel details:not([open])>:not(summary){display:none}
   ohnehin) und eine einzeilige Grid-Spur fährt von 0fr→1fr – der bekannte Kniff, um zu
   „auto“-Höhe zu transitionieren (reines height/max-height kennt kein „auto“ als
   Zielwert). overflow:hidden auf Container UND Kind hält die Antwort während der
   Kollaps-Phase geklippt. FALLE 1 (gemessen, nicht nur vermutet): Padding zählt NICHT
   als „Content“, das overflow:hidden mitklippt – ein festes padding-bottom auf dem
   Kind bliebe als sichtbarer Rest stehen, selbst bei grid-template-rows:0fr (die
   automatische Mindestgröße wird nur für Inhalt auf 0 gedrückt, nicht für Padding).
   Darum transitioniert padding-bottom HIER MIT (0 → clamp() im offenen Zustand).
   FALLE 2 (per Screenshot-Zeitreihe verifiziert): [open] als Trigger-Selektor
   funktioniert nur fürs ÖFFNEN sauber – beim SCHLIESSEN snappt Chrome die Zeile
   sofort zu, keine sichtbare Transition (Chrome hängt das Ein-/Ausblenden von
   details-Kindern intern an <details>, nicht rein an eine überschreibbare
   UA-CSS-Regel). Darum steuert jetzt eine JS-Klasse (.is-open) die Werte, nicht
   [open] direkt – das Skript am Seitenende entfernt beim Schließen zuerst die
   Klasse (Transition läuft), setzt `open=false` erst NACH transitionend. Reduce:
   globaler *{transition-duration:.01ms!important} in style.css greift automatisch. */
.faq-a{
  display:grid;grid-template-rows:0fr;overflow:hidden;
  padding:0 46px 0 0;
  transition:grid-template-rows .5s var(--ease),opacity .5s var(--ease),padding-bottom .5s var(--ease);
  opacity:0;color:var(--ink-soft);line-height:1.75;max-width:64ch;
}
.faq-item.is-open .faq-a{grid-template-rows:1fr;opacity:1;padding-bottom:clamp(24px,3vw,32px)}
.faq-a>p{overflow:hidden;min-height:0}
/* Blocksatz auch für die FAQ-Antworten (Manuel 16.07.) */
.faq-a p{text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.faq-a a{color:var(--blue-deep);font-weight:600;border-bottom:1.5px solid rgba(46,92,151,.32);transition:border-color .3s,color .3s}
.faq-a a:hover{color:var(--blue);border-color:var(--blue)}
.faq-cta{max-width:880px;margin:clamp(48px,6vw,72px) auto 0}

/* ============================================================
   Bride-Fit — Original-Look der Bestandsseite (User-Wunsch 15.07.):
   Bordeaux #aa4152 als dominante Farbe, Funky-Signature-Script,
   Original-Slider, Original-Flipcards, freie Häkchen, Ringe-Intro.
   ============================================================ */
/* Foto-Hero-Seiten (Altbestand, aktuell ungenutzt): Header hell über Bild */
body[data-hero-dark] .hd:not(.scrolled) .brand img{filter:brightness(0) invert(1);opacity:.95}
body[data-hero-dark] .hd:not(.scrolled) .nav>a:not(.nav-cta){color:#fff}
body[data-hero-dark] .hd:not(.scrolled) .nav>a:not(.nav-cta)::after{background:var(--amber-soft)}
body[data-hero-dark] .hd:not(.scrolled) .nav-tgl span{background:#fff}

@font-face{
  font-family:'Funky Signature';
  src:url(../fonts/funky-signature.woff) format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}
body.bride-page{--bride:#aa4152;--bride-d:#8e3644;--bride-strong:#a3253f;--bride-soft:#f4c9d1;--bride-tint:#faf2f3}
/* Filigrane Überschriften (User 15.07.): das Original nutzt eine leichte
   Grotesk (Open Sans 300) statt fetter Display-Schrift → Hanken 300;
   Akzent-Wörter halbfett statt farbverfremdet-fett. */
body.bride-page main h2{
  font-family:var(--ft);font-weight:300;letter-spacing:.01em;
  font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.32;
}
body.bride-page main h2 em{font-style:normal;font-weight:600}
/* Bordeaux ersetzt auf dieser Seite die Messing-Akzente (dominante Farbe) */
body.bride-page .k-idx{color:var(--bride)}
body.bride-page .k-idx::after{background:var(--bride)}
body.bride-page em.am,body.bride-page em.am-s{color:var(--bride)}
/* Rückverweis Intro→Hochzeits-Ratgeber: blaues .link-arrow passt nicht zur
   bordeaux-dominanten Bride-Welt (Tabu 7), hier lokal umgefärbt statt neuer Klasse. */
body.bride-page .bride-intro .link-arrow{color:var(--bride)}
body.bride-page .bride-intro .link-arrow::after{background:var(--bride)}
/* Pointer-Licht (16.07.): auf Bride bordeaux statt bläulich (Manuel);
   Stärke = HALBE Basis (.27/.14 → .135/.07, Manuel: „um 50 % abschwächen" –
   Bordeaux trägt auf dem hellen Grund deutlich mehr als das blasse Sky-Blau) */
body.bride-page .pglow i{
  background:radial-gradient(circle closest-side,rgba(170,65,82,.135),rgba(170,65,82,.07) 46%,rgba(170,65,82,0) 100%);
}
body.bride-page .btn-amber{
  background:var(--bride);border-color:var(--bride);color:#fff;
  box-shadow:0 14px 54px -10px rgba(170,65,82,.8),inset 0 1px 0 rgba(255,255,255,.25);
}
body.bride-page .btn-amber:hover{background:var(--bride-d);border-color:var(--bride-d);box-shadow:0 22px 66px -10px rgba(170,65,82,.9),inset 0 1px 0 rgba(255,255,255,.25)}
body.bride-page .c-form .btn-amber{background:rgba(170,65,82,.5)}
body.bride-page .c-form .btn-amber:hover{background:rgba(170,65,82,.68)}
body.bride-page .cta-bar a{background:var(--bride)}
body.bride-page .field input:focus{border-color:var(--bride-soft);box-shadow:0 0 0 3px rgba(170,65,82,.25)}
.btn-bride{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  /* luftiger + transparenter (User 15.07.: „wirkt gedrungen") */
  font-family:var(--ft);font-weight:600;font-size:.98rem;line-height:1.2;letter-spacing:.09em;
  padding:16px 34px;border-radius:999px;cursor:pointer;
  background:rgba(170,65,82,.5);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .25s,transform .2s var(--ease);
}
.btn-bride{box-shadow:0 14px 54px -10px rgba(170,65,82,.55)}
.btn-bride:hover{background:rgba(170,65,82,.72);transform:translateY(-2px);box-shadow:0 22px 66px -10px rgba(170,65,82,.7)}
/* „die perfekten Highlights in Deinem" bleibt am Rechner eine Zeile */
@media(min-width:900px){
  .dress-nbr{white-space:nowrap}
}

/* Hero: Banner im Original-Zuschnitt (1800/874), Titel in Funky Signature
   mittig über der Braut; Header steht normal auf Ice darüber (Logo lesbar). */
.bride-hero{
  position:relative;margin-top:var(--head-h);aspect-ratio:1800/874;
  display:flex;align-items:center;justify-content:center;text-align:center;
  overflow:hidden;overflow:clip;background:#0A1B36;padding:24px;
}
.bride-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.03) brightness(.98)}
.bride-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(8,20,38,.18),rgba(8,20,38,.3))}
.bride-title{
  position:relative;z-index:2;margin:0;color:#fff;
  font-family:'Funky Signature',cursive;font-weight:400;text-transform:none;
  letter-spacing:.01em;line-height:.85;font-size:clamp(3.6rem,13vw,104px);
  text-shadow:0 6px 26px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.45);
}
@media(max-width:760px){.bride-hero{aspect-ratio:auto;min-height:56vh}}

/* Intro: Ringe-Foto liegt hinter dem Text und blurt/faded beim Scrollen
   weg (Original-Verhalten); Script-Zeile in Funky Signature Bordeaux. */
.bride-intro{position:relative;overflow:hidden;overflow:clip;padding-block:clamp(70px,9vw,120px);background:#fff}
/* will-change NIE mit filter (Tabu 9, iPhone-Crash 16.07.): es war die einzige
   solche Deklaration im Projekt. WebKit hält den Filter-Puffer dieser
   vollflächigen Bildebene damit dauerhaft vor – auch bei opacity:0 weit
   darunter. Die Startseite scrubbt Blur ebenfalls, aber ohne will-change:filter,
   und läuft. Nur opacity ankündigen; den Filter räumt WebKit dann selbst ab. */
.bride-intro-bg{position:absolute;inset:0;z-index:0;will-change:opacity}
/* gespiegelt (User 15.07.): Ringe rechts, Text läuft links frei */
.bride-intro-bg img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.9) contrast(1.02);transform:scaleX(-1)}
/* KEIN Schleier (User 15.07.): das HD-Bild ist hell genug, Text steht
   wie im Original direkt darauf. */
/* Maße wie das Original (User 15.07.): breiter Container, Lesespalte
   ~640px links, ruhige 17px-Schrift. */
.bride-intro .wrap{position:relative;z-index:1;max-width:1100px}
/* durchgehend EINE Farbe (User 15.07.): die des unteren Abschnitts */
.bride-intro p{max-width:640px;font-size:1.06rem;line-height:1.72;color:#6b6b6b;margin-bottom:1.15em}
/* Fett-Variante (synthetisch, wie das Original mit font-weight:700 den
   Strich kräftigt) im Marken-Bordeaux. */
.bride-intro p.bride-script{
  font-family:'Funky Signature',cursive;font-weight:700;color:var(--bride);
  font-size:clamp(2.1rem,5vw,2.7rem);line-height:1.1;
  margin:.5em 0 .55em;max-width:none;
}

/* Vorteile: freie Häkchen ohne Kreis (wie Original) */
.bride-adv{padding-block:clamp(48px,7vw,90px);background:var(--bg-ice)}
.adv-grid{display:grid;gap:clamp(28px,4vw,48px);margin-top:clamp(36px,5vw,56px)}
@media(min-width:820px){.adv-grid{grid-template-columns:1fr 1fr}}
.adv-col{display:flex;flex-direction:column;gap:26px}
.adv-media{aspect-ratio:3/2;overflow:hidden;border-radius:22px}
.adv-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.05) brightness(1.02)}
.adv-items{display:flex;flex-direction:column;gap:18px}
.checkitem{display:flex;gap:14px;align-items:flex-start;color:var(--ink-soft);line-height:1.6}
.check{flex-shrink:0;width:30px;height:30px;margin-top:-1px;display:flex;align-items:center;justify-content:center}
.check svg{width:28px;height:28px}

/* Ziele: Original-Slider (Crossfade + Dots, JS in bride-fit.html) */
.bride-goals{padding-block:clamp(48px,7vw,90px) 0}
.bride-goals .sec-h{max-width:24ch}
.bride-goals .sec-head{margin-bottom:clamp(28px,4vw,44px)}
.bride-slider{position:relative;height:clamp(420px,56vh,560px);overflow:hidden;background:#0A1B36}
.bsl-slide{
  position:absolute;inset:0;opacity:0;transition:opacity 2s ease;
  background-size:cover;background-position:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px;
}
.bsl-slide.active{opacity:1}
@keyframes bslIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.bsl-content{max-width:900px}
.bsl-slide.active .bsl-content{animation:bslIn 1.1s ease .45s both}
.bsl-content h3{
  /* noch filigraner (User 15.07.) */
  font-family:var(--ft);font-weight:250;letter-spacing:.015em;
  color:#fff;font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.35;margin:0;
  text-shadow:0 2px 16px rgba(0,0,0,.6),0 1px 4px rgba(0,0,0,.5);
}
.bsl-content>div{margin-top:28px}
.bsl-dots{position:absolute;bottom:18px;left:0;right:0;display:flex;gap:0;justify-content:center;z-index:3}
/* Tap-Fläche 24px (WCAG 2.2), Punkt bleibt optisch 11px: die Fläche sitzt auf
   dem button, die Zeichnung auf ::before. gap:0, damit die Punktabstände nicht
   mitwachsen (Mittenabstand 24px = genau die geforderte Trennung). */
.bsl-dots button{width:24px;height:24px;border:none;background:none;cursor:pointer;padding:0;display:grid;place-items:center}
.bsl-dots button::before{content:"";width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.55);transition:.2s}
.bsl-dots button.active::before{background:var(--bride);transform:scale(1.2)}
@media(prefers-reduced-motion:reduce){.bsl-slide{transition:none}.bsl-slide.active .bsl-content{animation:none}}

/* Kleider: Original-Flipcards (3D-Drehung, Verlaufs-Label, weiße Rückseite) */
.bride-dress{padding-block:clamp(48px,7vw,90px);background:var(--bg-ice)}
.dress-grid{display:grid;gap:clamp(18px,2.4vw,28px);margin-top:clamp(36px,5vw,56px);grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.dress-grid{grid-template-columns:repeat(4,1fr)}}
.flip-card{position:relative;aspect-ratio:1/1.2;perspective:1300px;cursor:pointer;outline:none}
.flip-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.22,.61,.36,1)}
.flip-card:hover .flip-inner,.flip-card:focus-visible .flip-inner,.flip-card.flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;border-radius:14px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.flip-front{background:var(--bride-tint)}
.flip-front img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.03)}
.flip-front .ff-label{
  position:absolute;left:0;right:0;bottom:0;height:40%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 14px 15px;text-align:center;color:#fff;
  background:linear-gradient(to top,rgba(170,65,82,.55),rgba(170,65,82,.28) 45%,rgba(170,65,82,0));
}
.ff-name{font-size:1.2rem;font-weight:700;line-height:1.15;text-shadow:0 1px 8px rgba(90,20,32,.6)}
.ff-prop{font-size:.9rem;font-weight:400;margin-top:3px;text-shadow:0 1px 7px rgba(90,20,32,.55)}
.flip-back{
  transform:rotateY(180deg);background:#fff;border:1px solid #f0dadf;color:#444;
  display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px 14px 14px;
}
.fb-title{font-size:1.2rem;font-weight:700;color:#7a7a7a;margin-bottom:8px}
.fb-combo{flex:1;min-height:0;width:100%;object-fit:contain;display:block}
@media(max-width:520px){.dress-grid{grid-template-columns:1fr}}
.dress-note{margin-top:22px;font-size:.86rem;color:var(--ink-low);text-align:center}

/* Bride-Kontakt: Beratungs-Foto hinter dem Nacht-Scrim (wie Original) */
.bride-contact .contact-copy .sec-lead{margin-bottom:36px}

/* Footer auf Bride in Bordeaux (wie die Bestandsseite: footer #aa4152).
   Wortmarke + Akzente wechseln von Gold auf Rosé, der CTA-Button wird
   weiß, damit er auf dem Bordeaux nicht versinkt. */
body.bride-page .foot{background:var(--bride)}
body.bride-page .foot-mark path{stroke:#f4c9d1}
body.bride-page .foot-mark svg{
  filter:drop-shadow(0 0 20px rgba(244,201,209,.7)) drop-shadow(0 0 60px rgba(244,201,209,.45)) drop-shadow(0 0 120px rgba(244,201,209,.3));
}
/* Tabu 9: Diese Regel schlägt den Schutz aus style.css (.foot-mark svg{filter:none}
   ≤760) – höhere Spezifität, später geladen. Ohne die Wiederholung hier läuft der
   Puls am iPhone wieder unter 3-fach-Glow und Safari stürzt ab (Bride-Crash 16.07.). */
@media(max-width:760px){
  body.bride-page .foot-mark svg{filter:none}
}
/* Die Textstufen des Footers (.75/.55) sind für den Nacht-Footer #081426 gebaut.
   Auf Bordeaux ergeben sie nur 3,74:1 bzw. 2,7:1 – hier dichter (5,39:1 / 4,68:1). */
body.bride-page .foot{color:var(--ice-text)}
body.bride-page .foot-sub,
body.bride-page .foot-btm{color:rgba(241,246,252,.9)}
body.bride-page .foot-col a:hover,body.bride-page .socials a:hover{color:#f4c9d1}

@media(max-width:900px){
  .art-body>p:first-of-type::first-letter{font-size:3em}
}
@media(max-width:560px){
  .blog-media{aspect-ratio:16/11}
  .faq-a{padding-right:0}
  .art-body ol li,.art-body ul li{padding-left:30px}
}