/* scheidungsmesse.at, Entwurf hell im Apple-Stil. Farben aus Antons Entscheidung 21.10.2026 (Grün, Rosa, Gold). */
:root{
  --weiss:#fff;--flaeche:#f6f6f3;--flaeche-gruen:#eef3ef;--flaeche-rosa:#f8eef0;
  --text:#23302a;--grau:#5a665f;--linie:rgba(35,48,42,.12);
  --gruen:#4f6b5c;--rosa:#a8616d;--rosa-tief:#8f4f5b;--gold:#b8955a;--widerruf:#237A30;
  --radius:28px;--radius-klein:18px;--schatten:0 18px 50px rgba(35,48,42,.08);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --anzeige:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --marke:Didot,"Bodoni 72","Bodoni MT","Libre Bodoni",Georgia,serif;
  --spring:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--weiss);color:var(--text);font:400 1.0625rem/1.55 var(--sans);-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--rosa);outline-offset:3px;border-radius:6px}
.rahmen{width:min(1120px,100%);margin:0 auto;padding:0 24px}
.sr{position:absolute;left:-9999px}

/* Kopf: Material, Inhalt läuft darunter durch */
.kopf{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);box-shadow:0 1px 0 var(--linie)}
.kopf .rahmen{display:flex;align-items:center;gap:24px;height:60px}
.marke{font:400 1.15rem/1 var(--marke);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--gruen);white-space:nowrap}
.nav{display:flex;gap:26px;list-style:none;margin:0 0 0 auto;padding:0}
.nav a{font-size:.875rem;text-decoration:none;color:var(--grau);padding:8px 0;transition:color .15s}
.nav a:hover,.nav a[aria-current]{color:var(--text)}
.sprache{font-size:.8125rem;text-decoration:none;color:var(--gruen);border:1px solid var(--linie);border-radius:99px;padding:5px 12px;white-space:nowrap}
.sprachen{display:flex;gap:6px;align-items:center}
.sprachen a{display:block;padding:9px 5px;border-radius:6px;opacity:.5;transition:opacity .15s}
.sprachen a:hover,.sprachen a[aria-current]{opacity:1}
.sprachen svg{width:24px;height:16px;border-radius:3px;box-shadow:0 0 0 1px var(--linie)}
.burger{display:none;margin-left:auto;background:none;border:0;width:44px;height:44px;padding:11px;cursor:pointer}
.burger span{display:block;height:1.5px;background:var(--text);margin:5px 0}
@media(max-width:1000px){
  .burger{display:block}
  .nav{display:none;position:absolute;top:60px;left:0;right:0;flex-direction:column;gap:0;background:rgba(255,255,255,.97);padding:6px 24px 18px;box-shadow:0 12px 24px rgba(35,48,42,.08)}
  .nav.offen{display:flex}
  .nav a{display:block;font-size:1.0625rem;padding:12px 0}
  .marke{font-size:1rem;letter-spacing:.14em}
  .sprachen{order:3;margin-left:auto}
  .burger{order:4;margin-left:0}
  .kopf .rahmen{gap:10px;justify-content:space-between}
}

/* Typografie */
h1,h2,h3{font-family:var(--anzeige);margin:0}
.dach{font-size:1rem;font-weight:600;color:var(--gruen);margin:0 0 10px}
h1{font-size:clamp(2.75rem,8vw,5.25rem);line-height:1.04;letter-spacing:-.03em;font-weight:700}
h2{font-size:clamp(2rem,5vw,3.25rem);line-height:1.08;letter-spacing:-.025em;font-weight:700}
h3{font-size:1.3125rem;line-height:1.2;letter-spacing:-.012em;font-weight:600}
.lead{font-size:clamp(1.1875rem,2.4vw,1.5rem);line-height:1.38;letter-spacing:-.008em;color:var(--grau);margin:18px auto 0;max-width:34em}
.mitte{text-align:center}

/* Knöpfe: Rückmeldung beim Drücken */
.knopf{display:inline-block;background:var(--rosa);color:#fff;text-decoration:none;font-weight:500;padding:13px 26px;border-radius:99px;transition:background .15s,transform .1s ease-out}
.knopf:hover{background:var(--rosa-tief)}
.knopf:active,.kachel:active{transform:scale(.97)}
.pfeil{color:var(--rosa-tief);text-decoration:none;font-weight:500;padding:13px 6px}
.pfeil:hover{text-decoration:underline}
.pfeil::after{content:" \203A"}
.knoepfe{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;margin-top:30px}

/* Abschnitte */
.teil{padding:clamp(72px,11vw,124px) 0}
.teil--flaeche{background:var(--flaeche)}
.teil-kopf{text-align:center;margin-bottom:clamp(36px,6vw,64px)}
.held{padding:clamp(64px,10vw,112px) 0 0;text-align:center}
.buehne{position:relative;margin:clamp(40px,7vw,72px) auto 0;width:min(1200px,calc(100% - 32px));aspect-ratio:21/9;border-radius:var(--radius);overflow:hidden;background:#aeb9b3 url("medien/scheidungsmesse-kopf-poster.jpg") center/cover}
.buehne video{width:100%;height:100%;object-fit:cover}
.buehne::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,0) 45%)}
.buehne-knopf{position:absolute;z-index:2;left:14px;bottom:14px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--text);font-size:.75rem;cursor:pointer}
.quelle{position:absolute;z-index:2;right:16px;bottom:12px;font-size:.6875rem;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55)}
@media(max-width:700px){.buehne{aspect-ratio:4/3}}

/* Kacheln */
.raster{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
@media(max-width:960px){.raster{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.raster{grid-template-columns:1fr}}
.kachel{display:flex;flex-direction:column;background:var(--weiss);border-radius:var(--radius);padding:30px;text-decoration:none;box-shadow:0 1px 0 var(--linie);transition:transform .35s var(--spring),box-shadow .35s var(--spring)}
.kachel:hover{transform:translateY(-4px);box-shadow:var(--schatten)}
.teil:not(.teil--flaeche) .kachel{background:var(--flaeche);box-shadow:none}
.kachel svg{width:34px;height:34px;fill:none;stroke:var(--gruen);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px}
.kachel.kachel--rosa,.teil:not(.teil--flaeche) .kachel.kachel--rosa{background:var(--flaeche-rosa)}
.kachel--rosa svg{stroke:var(--rosa-tief)}
.kachel p{color:var(--grau);font-size:.9375rem;margin:8px 0 0;flex:1}
.kachel .mehr{margin-top:16px;font-size:.875rem;font-weight:500;color:var(--rosa-tief)}

/* Wege (Angebote) */
.wege{display:grid;gap:18px;grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.wege{grid-template-columns:1fr}}
.weg{border-radius:var(--radius);padding:clamp(32px,5vw,56px);text-decoration:none;min-height:280px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .35s var(--spring)}
.weg:hover{transform:translateY(-4px)}
.weg:active{transform:scale(.98)}
.weg h3{font-size:clamp(1.625rem,3.4vw,2.25rem);letter-spacing:-.02em}
.weg p{margin:8px 0 0;color:var(--grau)}
.weg--1{background:var(--flaeche-gruen)}.weg--2{background:var(--flaeche-rosa)}.weg--3{background:var(--flaeche-rosa)}.weg--4{background:var(--flaeche-gruen)}

/* Schritte */
.schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
@media(max-width:860px){.schritte{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.schritte{grid-template-columns:1fr}}
.schritte b{display:block;font:600 2.5rem/1 var(--anzeige);letter-spacing:-.03em;color:var(--gold);margin-bottom:14px}
.schritte p{color:var(--grau);font-size:.9375rem;margin:8px 0 0}

.schritte--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.schritte--3{grid-template-columns:1fr}}
.kachel h3:first-child{margin-top:0}
.suchleiste{display:grid;grid-template-columns:2fr 1.4fr 1fr auto;gap:10px;background:var(--weiss);border-radius:var(--radius);padding:14px;box-shadow:var(--schatten)}
.suchleiste input,.suchleiste select{width:100%;font:400 1rem var(--sans);color:var(--text);padding:13px 16px;border-radius:14px;border:1px solid var(--linie);background:var(--flaeche);-webkit-appearance:none}
@media(max-width:820px){.suchleiste{grid-template-columns:1fr}.suchleiste .knopf{text-align:center}}

.test-hinweis{text-align:center;font-size:.875rem;color:var(--rosa-tief);margin:0 0 26px}
.produkt-bild{aspect-ratio:4/3;border-radius:var(--radius-klein);background:linear-gradient(145deg,var(--flaeche-gruen),var(--flaeche-rosa));margin-bottom:18px}
.kachel .preis{font:600 1.375rem/1.2 var(--anzeige);color:var(--text);margin:14px 0;flex:0 0 auto}
button.knopf{border:0;cursor:pointer;font:500 1rem var(--sans)}
.held--unter{padding-bottom:clamp(44px,6vw,72px)}
.knopf--aus{background:#8d939a;text-align:center;cursor:not-allowed}
.knopf--aus:hover{background:#8d939a}

/* Directorist-Seiten im hellen Design */
body.sm-verz-seite{--directorist-color-primary:#a8616d;--directorist-color-primary-rgb:168,97,109;--directorist-color-btn-primary-bg:#a8616d;--directorist-color-btn-primary-border:#a8616d;--directorist-color-btn:#fff}
.sm-verz h2,.sm-verz h3,.sm-verz h4{letter-spacing:-.01em}
.sm-verz h2{font-size:1.5rem;line-height:1.25}
.sm-vz-einleitung{text-align:center;font-size:clamp(1.0625rem,2vw,1.25rem);line-height:1.4;color:var(--grau);max-width:36em;margin:0 auto 34px}
.sm-verz .directorist-search-form,.sm-verz .directorist-search-contents,.sm-verz .directorist-card,.sm-verz .directorist-add-listing-form .directorist-content-module{border-radius:var(--radius-klein)}
.sm-verz .directorist-btn{border-radius:99px}
.sm-verz .directorist-btn.directorist-btn-primary{background:var(--rosa);border-color:var(--rosa);color:#fff}
.sm-verz .directorist-btn.directorist-btn-primary:hover{background:var(--rosa-tief);border-color:var(--rosa-tief)}
.sm-verz a{text-decoration:none}

/* Uebrige Seiten im Theme: Impressum, Datenschutz, Warenkorb, Kasse, Fehlerseite */
.sm-theme .wp-block-post-title{font-size:clamp(2rem,6vw,3.5rem);line-height:1.08;letter-spacing:-.025em;font-weight:700;text-align:center;overflow-wrap:anywhere;hyphens:auto;margin:clamp(40px,7vw,80px) auto clamp(24px,4vw,44px)}
.sm-theme main{padding-left:24px;padding-right:24px;padding-bottom:clamp(56px,8vw,96px)}
.sm-recht .teil{padding:0}
.sm-recht{font-family:var(--sans);color:var(--text)}
.sm-recht a{color:var(--rosa-tief)}
.sm-theme .wp-element-button,.sm-theme .wp-block-button__link,.sm-theme button.button,.sm-theme a.button{background:var(--rosa);color:#fff;border:0;border-radius:99px}

/* Logo in Kopf und Fuss */
body .kopf .rahmen{height:88px}
.marke img{display:block;height:72px;width:auto}
.fuss-logo{display:inline-block;margin-bottom:18px}
.fuss-logo img{display:block;height:88px;width:auto}
@media(max-width:1000px){
  body .kopf .rahmen{height:72px}
  body .kopf .nav{top:72px}
  .marke img{height:58px}
}

/* Geschichte */
.geschichte{max-width:760px;margin:0 auto;text-align:center}
.geschichte .lead{max-width:none}

/* Hilfe sofort */
.sofort{background:var(--flaeche-rosa);border-radius:var(--radius);padding:clamp(32px,5vw,56px)}
.sofort h2{font-size:clamp(1.625rem,3.4vw,2.25rem)}
.sofort>p{color:var(--grau);margin:10px 0 26px}
.nummern{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.nummern a{display:block;background:var(--weiss);border-radius:var(--radius-klein);padding:18px 20px;text-decoration:none}
.nummern strong{display:block;font:600 1.375rem/1.2 var(--anzeige);letter-spacing:-.01em;color:var(--rosa-tief)}
.nummern span{font-size:.9375rem;color:var(--grau)}

/* FAQ */
.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{list-style:none;cursor:pointer;font:600 1.1875rem/1.3 var(--anzeige);padding:22px 36px 22px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:18px;font-size:1.625rem;font-weight:300;color:var(--grau);transition:transform .3s var(--spring)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 22px;color:var(--grau)}
.hinweis{max-width:760px;margin:26px auto 0;font-size:.8125rem;color:var(--grau);text-align:center}

/* Verzeichnis: Suche */
.suche{position:relative;max-width:560px;margin:30px auto 0}
.suche input{width:100%;font:400 1.125rem var(--sans);color:var(--text);padding:17px 22px 17px 52px;border-radius:99px;border:1px solid var(--linie);background:var(--flaeche);-webkit-appearance:none}
.suche input:focus{background:var(--weiss)}
.suche svg{position:absolute;left:20px;top:18px;width:22px;height:22px;fill:none;stroke:var(--grau);stroke-width:1.7;stroke-linecap:round}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;list-style:none;padding:0;margin:22px auto 0;max-width:760px}
.chips a{display:block;font-size:.875rem;text-decoration:none;color:var(--text);background:var(--flaeche);border-radius:99px;padding:8px 15px;transition:background .15s}
.chips a:hover{background:var(--flaeche-gruen)}
.zahl{font-size:.8125rem;color:var(--grau);margin-top:14px}
.leer{display:none;text-align:center;color:var(--grau);padding:30px 0}
.band{margin-top:clamp(36px,6vw,64px);text-align:center}

/* Fuß */
.fuss{background:var(--flaeche);padding:44px 0;font-size:.8125rem;color:var(--grau)}
.fuss nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-bottom:14px}
.fuss nav a{text-decoration:none}
.fuss nav a:hover{text-decoration:underline}
.fuss nav a.widerruf{background:var(--widerruf);color:#fff;padding:5px 12px;border-radius:99px}
.fuss p{margin:4px 0}

/* Einblenden, nur wenn Bewegung erwünscht */
@media (prefers-reduced-motion:no-preference){
  .js .auf{opacity:0;transform:translateY(22px);transition:opacity .7s var(--spring),transform .7s var(--spring)}
  .js .auf.da{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .kachel,.weg,.knopf,.faq summary::after{transition:none}
  .buehne video,.buehne-knopf{display:none}
}
@media (prefers-reduced-transparency:reduce){
  .kopf{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
  .buehne-knopf{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-contrast:more){:root{--grau:#3b463f;--linie:rgba(35,48,42,.4)}}