/* happiness-consultants – Design 1 "Rosenblatt" für alle Seiten (lädt NACH Seitenstil und effekte.css).
   Gleiche Inhalte und Funktionen wie v8, aber: Puder, Blush, Rosenholz, Salbei; Gloock + Work Sans + Handschrift;
   Bögen, Wellen, weiche Schatten statt harter Kanten. Keine schwarzen Buttons. */
:root{
  --creme:#FDF7F5; --rosa:#F7E4E3; --pink:#B5536E; --pink-d:#8A3B52; --orange:#C9737F; --gelb:#F3D3C2;
  --smaragd:#5E7D67; --smaragd-d:#4C6955; --violett:#7E5A8E; --violett-d:#644372; --pflaume:#4A3038; --grau:#6E5A60;
  --rb-rose:#EFC9CB; --rb-rose2:#E2A9B1; --rb-holz:#A64D66; --rb-holz-d:#8A3B52; --rb-salbei:#A9BCA8; --rb-gold:#C6A07A; --rb-tinte:#3D2B31; --rb-linie:#EEDAD9;
  --display:"Gloock",Georgia,serif; --text:"Work Sans","Segoe UI",system-ui,sans-serif; --hand:"Nothing You Could Do",cursive;
  --grad-haupt:linear-gradient(120deg,#8A3B52 0%,#A64D66 45%,#C46A80 100%);
  --grad-gelb:linear-gradient(120deg,#FBEAE3,#F3D3C2 60%,#EFC9CB);
  --grad-rand:linear-gradient(120deg,#E2A9B1,#C6A07A 55%,#A9BCA8);
}
body{background:var(--creme);color:var(--rb-tinte)}
h1,h2,h3{font-weight:400;letter-spacing:-.01em}
em{color:var(--rb-holz)}
.streifen{height:6px;background:linear-gradient(90deg,var(--rb-rose),var(--rb-rose2),var(--rb-gold),var(--rb-salbei),var(--rb-rose))}

/* Kopf: Logo wie Design 1 */
header{border-bottom:1px solid var(--rb-linie);background:color-mix(in srgb,var(--creme) 88%,transparent);backdrop-filter:blur(12px)}
.logo{font-family:var(--display);font-weight:400;letter-spacing:.01em;display:inline-block!important;white-space:nowrap;line-height:1}
.logo i{margin-left:.25em}
.logo .punkt{display:none}
.logo i{color:var(--rb-holz)}
.logo .rb-unter{display:block;font-family:var(--text);font-style:normal;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--grau);margin-top:4px}
.fuss .logo .rb-unter{color:#D8C3C6}
nav.haupt a:hover{background:var(--rosa);color:var(--rb-holz-d)}
.hand{font-family:var(--hand);color:var(--rb-holz);font-size:1.5rem;line-height:1.2;display:block;transform:rotate(-3deg);margin-bottom:6px}

/* Buttons: Rosenholz, weicher Schein */
.btn{box-shadow:0 12px 26px -12px rgba(138,59,82,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.btn:hover{box-shadow:0 18px 34px -14px rgba(138,59,82,.7),inset 0 1px 0 rgba(255,255,255,.35)}
.btn--gelb{color:var(--rb-holz-d);box-shadow:0 10px 24px -12px rgba(166,77,102,.45)}
.btn--weiss{color:var(--rb-holz-d)}
.pille{background:linear-gradient(120deg,var(--rb-holz),#C46A80)!important;color:#fff!important;font-family:var(--text)}
.diskret .pille,.info .pille{background:var(--rb-rose)!important;color:var(--rb-holz-d)!important}

/* Hero: atmender Farbfleck + Bogenbild statt Blob */
.hero{background:transparent}
.hero::before{content:"";position:absolute;right:-12%;top:-18%;width:60vw;height:60vw;max-width:820px;max-height:820px;border-radius:46% 54% 60% 40%/50% 42% 58% 50%;background:radial-gradient(circle at 35% 35%,var(--rosa),var(--rb-rose) 70%);opacity:.75;z-index:0;animation:rbAtmen 14s ease-in-out infinite;pointer-events:none}
@keyframes rbAtmen{50%{border-radius:58% 42% 44% 56%/42% 58% 42% 58%;transform:rotate(8deg) scale(1.03)}}
.hero h1{font-weight:400}
.hero h1 .p{color:var(--rb-holz)}
.hero h1 em{color:var(--rb-holz)}
.hero h1 .unter{background-image:linear-gradient(transparent 64%,var(--rb-rose) 64% 90%,transparent 90%)}
.blob .form{border-radius:999px 999px 36px 36px!important;background:var(--rb-rose);animation:none}
.blob .form2{border-radius:999px 999px 36px 36px!important;background:var(--rb-salbei);opacity:.55;animation:none;inset:5% -4% -4% 6%}
.blob img{border-radius:999px 999px 30px 30px!important;animation:none;box-shadow:0 30px 60px -30px rgba(166,77,102,.45)}
.sticker{border:0;box-shadow:0 12px 30px -12px rgba(61,43,49,.3);font-family:var(--display);font-weight:400}
.sticker.s1{background:#fff;color:var(--rb-holz)}
.sticker.s2{background:var(--rosa);color:var(--rb-holz-d)}
.bogenbild img{border:0;box-shadow:0 30px 60px -30px rgba(166,77,102,.45)}
.bogenbild .sticker{background:#fff;color:var(--rb-holz)}
.funken i{opacity:.35}

/* Laufband sanft */
.band{background:var(--rosa);color:var(--rb-holz-d);transform:none;width:100%;margin-left:0;border-block:1px solid var(--rb-linie)}
.band-spur{font-family:var(--display);font-weight:400;text-transform:none;font-size:1.6rem}
.band-spur span::after{color:var(--rb-rose2)}

/* Themen-Kacheln: helle, weiche Flächen */
.kachel{color:var(--rb-tinte);border-radius:36px;box-shadow:0 18px 40px -28px rgba(166,77,102,.5)}
.kachel b{font-family:var(--display);font-weight:400}
.kachel small{color:var(--grau);opacity:1}
.kachel svg{opacity:.18}
.kachel svg *{fill:var(--rb-holz);stroke:var(--rb-holz)}
.k-pink{background:var(--rb-rose)}.k-orange{background:#F6DCCF}.k-gelb{background:#FBEFE6;color:var(--rb-tinte)}.k-smaragd{background:#E3EBE2}.k-violett{background:#EFE4F1}.k-pflaume{background:var(--rosa)}
.kachel.bild{color:#fff}.kachel.bild small{color:#F6E8EC}
.kachel.gross{border-radius:999px 999px 36px 36px}

/* Stimmungs-Check */
.check{background:linear-gradient(135deg,var(--rb-holz-d),var(--rb-holz));border-radius:48px}
.check::before{background:var(--rb-rose);opacity:.35}
.check h2 em{color:var(--rb-rose)}
.tipp{box-shadow:0 20px 40px -24px rgba(61,43,49,.5);border-radius:32px}

/* Karten: Bogen oben, weicher Schatten statt Rand */
.karte{border:0;border-radius:28px;box-shadow:0 20px 44px -28px rgba(166,77,102,.55)}
.karte:hover{box-shadow:0 26px 50px -26px rgba(166,77,102,.65)}
.karte img{border-bottom:0;border-radius:999px 999px 0 0;aspect-ratio:4/3.4}
.karte .pille{background:var(--rosa)!important;color:var(--rb-holz-d)!important}

/* Expertinnen: Salbei-Fläche */
.exp{background:var(--smaragd)}
.exp .welle path{fill:var(--smaragd)}
.exp h2 em{color:var(--rb-rose)}
.exp .pille{background:#fff!important;color:var(--smaragd-d)!important}
.exp-bild img{border:0;border-radius:999px 999px 36px 36px}
.exp-bild .sticker{background:#fff;color:var(--rb-holz)}
.tags li{background:rgba(255,255,255,.18)}
.suche{border:0;box-shadow:0 18px 40px -24px rgba(61,43,49,.5)}

/* Lieblingsdinge: Bögen wie Design 1 */
.lieb a{background:transparent!important;color:var(--rb-tinte);transform:none!important;padding:0;text-align:center}
.lieb img{border-radius:999px 999px 24px 24px;aspect-ratio:3/4}
.lieb b{font-family:var(--display);font-weight:400}

/* Unter uns: tiefes Rosenholz-Braun statt Pflaume */
.diskret{background:var(--pflaume)}
.diskret h2 em{color:var(--rb-rose)}
.sk .ico{background:var(--c)}
.sk .zu{color:var(--rb-rose)}

/* Mitmachen, FAQ, Newsletter */
.mit > div{border:0;border-radius:40px;box-shadow:0 20px 44px -30px rgba(166,77,102,.5)}
.mit .a{background:#fff}
.mit .b{background:var(--rosa)}
details{border:1px solid var(--rb-linie);border-radius:22px;background:#fff}
details[open]{background:#FFF8F7}
summary::after{background:var(--rb-holz)}
.news{background:var(--rosa);color:var(--rb-tinte)}
.news h2{color:var(--rb-tinte)}
.news h2 em{color:var(--rb-holz)}
.news::before{background:var(--rb-rose)}
.news::after{background:#FBEFE6}
.news form{border:0;box-shadow:0 18px 40px -24px rgba(166,77,102,.5)}
.news small,.news .stand{color:var(--grau)}

/* Fuß: Tinte wie Design 1 */
footer{background:var(--rb-tinte)}
.fuss h4{color:var(--rb-rose2)}
.fuss .logo i{color:var(--rb-rose2)}
.fuss-sprachen a[aria-current]{background:var(--rb-rose);color:var(--rb-holz-d);border-color:var(--rb-rose)}

/* Wellen-Übergänge (vom Skript eingefügt) */
.rb-welle{display:block;width:100%;height:60px;margin-bottom:-1px;position:relative;z-index:1}
.rb-welle svg{display:block;width:100%;height:100%}

/* Themenseite + Recht */
.kurz{border:0;box-shadow:0 20px 44px -28px rgba(94,125,103,.6)}
.chips a{box-shadow:inset 0 0 0 1px var(--rb-rose2)}
.laender button{box-shadow:inset 0 0 0 1px var(--rb-rose2)}
.eintrag{border:1px solid var(--rb-linie)}
.leise{background:linear-gradient(135deg,var(--violett),var(--rb-holz))}
.recht h2{border-top:1px solid var(--rb-linie)}
.recht .uebersetzung{background:var(--rosa);color:var(--rb-holz-d)}

/* Anmeldeseite */
body:has(.info){background:var(--pflaume);color:#F6E8F0}
body:has(.info) .logo .rb-unter{color:#D8C3C6}
body:has(.info) .logo i{color:var(--rb-rose2)}
body:has(.info) header{background:transparent;border-bottom:0;backdrop-filter:none}
.info h1 em,.info .hand{color:var(--rb-rose)}
.info{background:linear-gradient(160deg,var(--rb-holz),var(--violett))}
.info::after{background:var(--rb-rose);opacity:.5}
.form{background:var(--creme)}
.reiter{box-shadow:inset 0 0 0 1px var(--rb-rose2)}
.sprache,.raus{font-family:var(--text)}

@media (prefers-reduced-motion:reduce){.hero::before{animation:none}}

/* WP-Ausgleich (nur auf happiness-consultants.com): Theme/Bootstrap-Vorgaben neutralisieren, damit die Seiten wie der lokale Entwurf aussehen.
   Niedrige Spezifität (:where), damit alle Regeln des Designs Vorrang behalten. */
:where(.hc-rb) :is(h1,h2,h3,h4,h5,h6){color:inherit;letter-spacing:inherit}
:where(.hc-rb) h4{font-weight:bold;line-height:inherit}
:where(.hc-rb) p{line-height:inherit;margin-top:1em;margin-bottom:1em}
:where(.hc-rb) :is(ul,ol,dl){margin-top:1em;margin-bottom:1em}
:where(.hc-rb) small{font-size:smaller}
:where(.hc-rb) :is(input,button,select,textarea){color:inherit;font-size:inherit;line-height:inherit}
/* BARZ-Logo kleiner (Anton, 17.10.2026) */
.hc-rb .barz-logo{height:16px;width:auto;max-width:none;padding:3px 6px;border-radius:5px}

/* Kopf volle Breite, Knöpfe nie umbrechen (Anton, 17.10.2026) */
header .wrap.kopf{max-width:none;padding-inline:clamp(16px,3vw,48px)}
.kopf-rechts > *, nav.haupt a, .kopf .logo{white-space:nowrap;flex-shrink:0}
.kopf-rechts .anmelden svg{flex:0 0 18px}
@media (max-width:1440px){.kopf-rechts .anmelden span{position:absolute;left:-9999px}.kopf-rechts .anmelden{padding:9px}}
/* Affiliate dezent (Anton, 17.10.2026): Affiliate-Hinweise klein, dünn, grau, kein Kasten, keine Pille.
   Bezahlte Anzeigen (article.werbung, .shop.top, .gs-anzeige, .eintrag .anz) bleiben deutlich gekennzeichnet. */
div.werbung{border:0;background:none;padding:0;border-radius:0}
div.werbung > .werbe-band{display:block;margin:0 0 14px;padding:0;background:none;border-radius:0;color:var(--grau);font-weight:400;font-size:9px;line-height:1.5}
div.werbung > .werbe-band .marke{display:inline;background:none;color:var(--grau);padding:0;border-radius:0;font-size:inherit;letter-spacing:0;text-transform:none;font-weight:400}
div.werbung > .werbe-band .marke::after{content:" · "}
div.werbung > .werbe-band span:not(.marke){font-weight:400}
div.werbung > .werbe-band span:not(.marke)::after{content:" · "}
div.werbung > .werbe-band small{font-size:inherit;opacity:1}
.produkt .aff{background:rgba(255,255,255,.85);color:var(--grau);font-weight:400;font-size:9px;letter-spacing:.02em;text-transform:none;padding:1px 7px;left:20px;top:20px}
.shop:not(.top) .etikett,.gs:not(.gs-anzeige) .etikett{background:none;color:var(--grau);font-weight:400;font-size:9px;letter-spacing:.02em;text-transform:none;padding:0}
.produkt:hover{border-color:var(--rb-rose2)}
@media (max-width:560px){div.werbung{padding:0}div.werbung > .werbe-band{margin:0 0 12px;padding:0}}
/* Menü-Knopf für Handy und Tablet (Anton, 17.10.2026) */
.menue-knopf{display:none;align-items:center;gap:8px;font:inherit;font-family:var(--text);font-weight:700;font-size:.92rem;color:var(--rb-tinte);background:#fff;border:0;border-radius:999px;padding:9px 14px;cursor:pointer;box-shadow:inset 0 0 0 1px var(--rb-rose2);white-space:nowrap}
.menue-knopf svg{width:20px;height:20px;flex:0 0 20px}
@media (max-width:1280px){
  .menue-knopf{display:inline-flex}
  header.menue-offen nav.haupt{display:flex!important;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:2px;padding:10px clamp(16px,3vw,48px) 18px;background:var(--creme);border-bottom:1px solid var(--rb-linie);box-shadow:0 18px 30px -20px rgba(61,43,49,.35);z-index:50}
  header.menue-offen nav.haupt a{padding:12px 14px;font-size:1.05rem;border-radius:14px}
  header.menue-offen .menue-knopf{background:var(--rosa)}
}
@media (max-width:560px){.menue-knopf span{position:absolute;left:-9999px}.menue-knopf{padding:9px}}
/* Kopf Handy kompakt (Anton, 17.10.2026) */
@media (max-width:560px){
  header .wrap.kopf{gap:8px}
  header .kopf-rechts{gap:4px}
  .kopf .logo .rb-unter{letter-spacing:.16em}
  .kopf-rechts .sprache summary{padding:7px 10px;gap:6px}
}
@media (max-width:400px){
  .kopf .logo{font-size:1rem!important}
  .kopf .logo .rb-unter{letter-spacing:.08em;font-size:.55rem}
  .kopf-rechts .anmelden,.menue-knopf{padding:7px}
}
/* Newsletter-Anmeldung (17.10.2026): Häkchen, reCAPTCHA, Meldung */
.hc-rb .hc-falle{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.hc-rb .news form{position:relative}
.hc-rb .hc-nl-zusatz{max-width:560px;margin:0 auto 14px;text-align:left}
.hc-rb .hc-nl-ok{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;line-height:1.5;cursor:pointer;color:var(--rb-tinte)}
.hc-rb .hc-nl-ok input{width:20px;height:20px;flex:0 0 20px;margin:2px 0 0;accent-color:var(--rb-holz)}
.hc-rb .hc-nl-ok a{color:inherit;text-decoration:underline}
.hc-rb #nl-captcha{margin:12px 0 0}
.hc-rb #nl-meldung{margin:10px 0 0;font-weight:600;min-height:1.4em}
.hc-rb #nl-meldung.fehler{color:#9b1c3a}
.hc-rb #nl-meldung.ok{color:#1f6b36}
