/* DEEPDIEMER v110 — letztes Stylesheet. Ersetzt dd-v109.css.
   Brief v110, Wellen 1–4. Orange von Sebastian freigegeben:
   Basis #E8863A · Hover #F2A15A · Aktiv #D9762E · Gold bleibt Akzent · WhatsApp bleibt grün. */

:root{
  --dd-cta:#E8863A;
  --dd-cta-hover:#F2A15A;
  --dd-cta-active:#D9762E;
  --dd-cta-ink:#1A0E05;
  --dd-gold:#D8B67B;
  --dd-wa:#25D366;
  --dd-wa-ink:#0B2E17;
}

/* ── 3. CTAs auf gleicher Höhe ──────────────────────────────────────────────*/
.dd-tools, .dd-tool-row, .dd-cards, .dd-choice-grid, .couple-grid, .cd-grid{
  align-items:stretch;
}
.dd-tool, .dd-couple-card, .dd-finder-card, .dd-card{
  display:flex; flex-direction:column;
}
.dd-tool > .dd-tool-cta, .dd-tool-cta-row, .dd-card > :last-child,
.dd-couple-card > :last-child, .dd-finder-card > :last-child{
  margin-top:auto;
}

/* ── 4. Pfoten-Cursor plus Farbwechsel auf allen Antwortflächen ─────────────
   PNG, weil Safari SVG-Cursor ignoriert. Nur echte Maus. */
@media (hover:hover) and (pointer:fine){
  .ddpt-likert button, .rf-option, .cd-choice label, .couple-choice label,
  .bs-scale-option, #bs-answer-wrap button, #bs-answer-wrap label,
  [data-answer], .opt, .scale-choice, .question-row label{
    cursor:url("data:image/png;base64,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") 16 16, pointer !important;
    transition:background-color .16s ease, color .16s ease, border-color .16s ease,
               transform .14s ease, box-shadow .18s ease;
  }
  .ddpt-likert button:hover, .rf-option:hover, .bs-scale-option:hover,
  #bs-answer-wrap button:hover, #bs-answer-wrap label:hover,
  [data-answer]:hover, .opt:hover, .scale-choice:hover, .question-row label:hover{
    background:rgba(216,182,123,.92) !important; color:#1A1305 !important;
    border-color:var(--dd-gold) !important;
    transform:translateY(-2px);
    box-shadow:0 0 0 3px rgba(216,182,123,.2) !important;
  }
  .cd-choice label:hover, .couple-choice label:hover{
    background:rgba(216,182,123,.9) !important; color:#1A1305 !important;
    border-color:var(--dd-gold) !important; transform:translateY(-2px);
  }
}
.ddpt-likert button.is-on, .rf-option:has(input:checked),
.cd-choice label:has(input:checked), .couple-choice label:has(input:checked){
  background:var(--dd-cta) !important; color:var(--dd-cta-ink) !important;
  border-color:var(--dd-cta) !important;
}

/* ── 5. Couple: Auswahl als Pills, Boxen ausgerichtet ───────────────────────*/
fieldset.cd-choice, .cd-choice, .couple-choice{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; align-items:center;
  border:0; margin:0 auto 1.1rem; padding:0; max-width:660px;
}
.cd-choice legend, .couple-choice legend{
  float:none; width:100%; text-align:center; margin:0 0 .7rem; padding:0;
  color:#C4BBAD; font-size:.95rem;
}
.cd-choice label, .couple-choice label{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  min-height:52px; padding:0 1.4rem; border-radius:999px;
  border:1px solid rgba(232,134,58,.38); background:rgba(255,255,255,.035);
  color:#E6DFD2; font-weight:650; font-size:1rem; line-height:1;
}
.cd-choice input[type=radio], .couple-choice input[type=radio]{
  appearance:none; width:1.05em; height:1.05em; margin:0; border-radius:50%;
  border:2px solid currentColor; flex:0 0 auto;
}
.cd-choice input[type=radio]:checked{background:var(--dd-cta-ink); box-shadow:inset 0 0 0 3px var(--dd-cta)}

/* ── 6. Blind Spot: keine gelbe Umrandung an den Schritten ──────────────────*/
#bs-progress-text, .bs-step, [class*="bs-step"]{
  border-color:transparent !important; outline:none !important; box-shadow:none !important;
}
.bs-step.is-current, [class*="bs-step"][aria-current="step"]{
  background:rgba(232,134,58,.16) !important; color:#F5F0E8 !important;
  border:1px solid rgba(232,134,58,.4) !important;
}

/* ── 7. Trust-Zeile mit Icons statt Fließtext ──────────────────────────────*/
.dd-trust-icons{
  display:flex; flex-wrap:wrap; gap:.5rem .9rem; justify-content:center;
  margin:1.1rem auto 0; padding:0; list-style:none; max-width:760px;
}
.dd-trust-icons li{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.86rem; color:#B5ADA1; letter-spacing:-.005em;
  background:rgba(255,255,255,.04); border:1px solid rgba(216,182,123,.22);
  border-radius:999px; padding:.42rem .85rem;
}
.dd-trust-icons svg{width:1.05em; height:1.05em; flex:0 0 auto; color:var(--dd-gold)}

/* ── 8. Endlos-Slider mit den 16 Typ-Dackeln ────────────────────────────────*/
.dd-typeslider{margin:1.6rem 0 .4rem; position:relative}
.dd-typeslider-mask{
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.dd-typeslider-track{display:flex; gap:1rem; width:max-content; animation:dd-typeslide 46s linear infinite}
.dd-typeslider:hover .dd-typeslider-track{animation-play-state:paused}
@keyframes dd-typeslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.dd-typecard{
  flex:0 0 auto; width:132px; text-align:center; text-decoration:none;
  background:rgba(255,255,255,.035); border:1px solid rgba(216,182,123,.2);
  border-radius:18px; padding:.7rem .5rem .8rem;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.dd-typecard img{width:100%; height:auto; display:block; margin:0 auto .4rem}
.dd-typecard b{display:block; color:var(--dd-gold); font-size:.95rem; letter-spacing:.04em}
.dd-typecard span{display:block; color:#B5ADA1; font-size:.76rem; margin-top:.1rem}
.dd-typecard:hover{transform:translateY(-4px); border-color:var(--dd-cta); background:rgba(232,134,58,.1)}
.dd-typeslider-cta{display:flex; justify-content:center; margin-top:.9rem}
.dd-typeslider-cta a{
  color:var(--dd-gold); text-decoration:underline; text-underline-offset:4px;
  text-decoration-thickness:1px; font-size:.92rem; font-weight:600;
  background:none !important; border:0 !important; box-shadow:none !important;
  padding:.3rem .2rem; min-height:0;
}
.dd-typeslider-cta a:hover{color:#F0D9A8}
@media (max-width:640px){.dd-typecard{width:108px}.dd-typeslider-track{animation-duration:38s}}

/* ── 9. Rosi bewegt sich immer, sofort, überall ─────────────────────────────*/
@keyframes dd110-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.008)}}
@keyframes dd110-cheer{
  0%{transform:translateY(0) scaleX(1) scaleY(1)}
  12%{transform:translateY(5px) scaleX(1.09) scaleY(.9)}
  36%{transform:translateY(-30px) scaleX(.93) scaleY(1.1) rotate(-6deg)}
  58%{transform:translateY(-16px) rotate(5deg)}
  74%{transform:translateY(3px) scaleX(1.06) scaleY(.95)}
  88%{transform:translateY(-7px)}100%{transform:translateY(0)}
}
.dd110-cheer{animation:dd110-cheer .8s cubic-bezier(.28,1.5,.42,1) 1 !important}
/* Pause-Schalter aus früheren Versionen entfernen — sie hielten Rosi an */
.rosi-motion-toggle, .dd-home-motion-toggle, .ddmicro-toggle{display:none !important}
.ddmicro-suspended{animation-play-state:running !important}

/* ── 10. Mobile first ───────────────────────────────────────────────────────*/
@media (max-width:640px){
  .dd-button, .dd-hero-cta, .btn, .bs-primary{min-height:52px}
  .dd-trust-icons li{font-size:.8rem; padding:.36rem .7rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important}
  .dd-typeslider-track{animation:none !important}
  .dd-button, .dd-hero-cta{transition:none !important}
}
@media print{*{animation:none !important}}

/* ── v110.1: Teaser-Kleintext lesbarer, weniger grau ──────────────────────*/
.dd-tool-meta, .dd-tool-note, .dd-tool small, .dd-hero-meta,
.dd-tool p.dd-muted, .dd-tool-foot{
  color:#C9C0B2 !important; font-size:.92rem; line-height:1.5; letter-spacing:-.005em;
}
/* ── v110.1: beantwortete Fragen ausblenden ───────────────────────────────
   Sebastian: unnütze Information, verwirrt. */
.personality-review{display:none !important}
/* ═════════════════════════════════════════════════════════════════════════
   v110.2 — Verfeinerungs-Schritt im Blind Spot Test neu gestaltet
   Vorher: Kasten mit Unterstrich um "Ergebnis jetzt zeigen" (sah nach
   halbem Button aus), sehr großes Textfeld mit harter Goldkante, Orange
   als diffuser Nebel, Buttons rechts und "Zurück" mittig — zwei Achsen.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Hinweiszeile darüber: ruhiger, als Karte erkennbar ────────────────── */
.bs-refinement-ready{
  display:grid; gap:.2rem; text-align:center;
  width:min(640px,100%); max-width:none; margin:0 auto 1rem; padding:1rem 1.25rem;
  background:linear-gradient(180deg, rgba(216,182,123,.09), rgba(216,182,123,.035));
  border:1px solid rgba(216,182,123,.22);
  border-radius:18px;
}
.bs-refinement-ready strong{color:#F5F0E8; font-size:1.02rem; font-weight:700; letter-spacing:-.01em}
.bs-refinement-ready span{color:#A8A095; font-size:.9rem; line-height:1.45}

/* ── Das Textfeld ─────────────────────────────────────────────────────────
   Weichere Kante, Innenschatten für Tiefe, kompakter. Der Beispielsatz
   sieht jetzt nach Beispiel aus und nicht nach fertigem Inhalt. */
.bs-text-form{width:min(640px,100%); margin:0 auto}
.bs-text-form textarea{
  width:100%; min-height:132px; resize:vertical;
  padding:1.05rem 1.15rem;
  font:inherit; font-size:1.02rem; line-height:1.55; color:#F5F0E8;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(216,182,123,.055), transparent 70%),
    #12171D;
  border:1px solid rgba(216,182,123,.2);
  border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), inset 0 14px 28px -20px rgba(0,0,0,.9);
  outline:none;
  transition:border-color .18s ease, box-shadow .22s ease, background .22s ease;
}
.bs-text-form textarea::placeholder{
  color:#6F7681; font-style:italic; opacity:1;
}
.bs-text-form textarea:hover{border-color:rgba(216,182,123,.34)}
.bs-text-form textarea:focus{
  border-color:#D8B67B;
  box-shadow:0 0 0 3px rgba(216,182,123,.16),
             inset 0 1px 0 rgba(255,255,255,.05), inset 0 14px 28px -20px rgba(0,0,0,.9);
  background:radial-gradient(120% 80% at 50% 0%, rgba(216,182,123,.09), transparent 70%), #131A21;
}
/* Zeichenzähler-Platz unten rechts freihalten, falls später ergänzt */
.bs-text-form{position:relative}

/* ── Aktionsreihe: eine Achse, klare Hierarchie ───────────────────────────*/
.bs-text-actions{
  display:flex; align-items:center; justify-content:space-between;
  gap:.9rem; margin-top:1rem; flex-wrap:wrap;
}

/* Sekundär: reiner Textknopf. Kein Kasten, kein Unterstrich im Ruhezustand. */
.bs-quiz .bs-ghost, .bs-text-actions .bs-ghost{
  order:1;
  appearance:none; background:transparent !important; border:0 !important;
  box-shadow:none !important; padding:.55rem .2rem; min-height:44px;
  color:#7C838C !important; font:inherit; font-size:.94rem; font-weight:500;
  text-decoration:none !important; cursor:pointer;
  transition:color .16s ease, text-decoration-color .16s ease;
}
.bs-quiz .bs-ghost:hover, .bs-text-actions .bs-ghost:hover{
  color:#F5F0E8 !important;
  text-decoration:underline !important; text-underline-offset:5px;
  text-decoration-thickness:1px; text-decoration-color:rgba(245,240,232,.5) !important;
}
.bs-quiz .bs-ghost:focus-visible{outline:2px solid rgba(216,182,123,.7); outline-offset:4px; border-radius:10px}

/* Primär: der eine wichtige Knopf. Warmes Orange, enger Lichtsaum statt Nebel. */
.bs-quiz .bs-primary, .bs-text-actions .bs-primary{
  order:2;
  appearance:none; border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:52px; padding:0 1.6rem; border-radius:999px;
  font:inherit; font-size:1rem; font-weight:750; letter-spacing:-.01em;
  color:#1A0E05 !important;
  background:linear-gradient(180deg, #EE9450 0%, #E8863A 55%, #DC7B31 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 3px 10px -3px rgba(232,134,58,.45),
    0 1px 2px rgba(0,0,0,.45);
  transition:transform .13s cubic-bezier(.2,.9,.3,1), box-shadow .2s ease, filter .16s ease;
}
.bs-quiz .bs-primary::after{
  content:"→"; font-weight:700; transform:translateX(0); transition:transform .18s ease;
}
.bs-quiz .bs-primary:hover{
  filter:brightness(1.06); transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 6px 16px -5px rgba(232,134,58,.5),
    0 2px 4px rgba(0,0,0,.45);
}
.bs-quiz .bs-primary:hover::after{transform:translateX(3px)}
.bs-quiz .bs-primary:active{
  transform:translateY(1px) scale(.995);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.32);
  background:linear-gradient(180deg, #D9762E 0%, #CE6E28 100%) !important;
}
.bs-quiz .bs-primary:focus-visible{outline:3px solid rgba(216,182,123,.85); outline-offset:3px}

/* ── "Zurück" auf dieselbe Achse wie der sekundäre Knopf ─────────────────*/
.bs-back-row{width:min(640px,100%); margin:1.1rem auto 0; text-align:left}
.bs-quiz .bs-back{
  color:#7E858D; font-size:.9rem; font-weight:600; padding:.4rem .2rem;
}
.bs-quiz .bs-back:hover{color:#C9C0B2}

/* ── Mobil: Primär volle Breite, sekundär darunter ───────────────────────*/
@media (max-width:560px){
  .bs-text-actions{flex-direction:column-reverse; align-items:stretch; gap:.55rem}
  .bs-quiz .bs-primary{width:100%; justify-content:center; min-height:54px}
  .bs-quiz .bs-ghost{width:100%; text-align:center}
  .bs-back-row{text-align:center}
  .bs-text-form textarea{min-height:118px; font-size:1rem; border-radius:20px}
  .bs-refinement-ready{padding:.9rem 1rem}
}
@media (prefers-reduced-motion:reduce){
  .bs-quiz .bs-primary, .bs-quiz .bs-primary::after, .bs-text-form textarea{transition:none !important}
}

/* ═════════════════════════════════════════════════════════════════════════
   v111 — Couple-Flow: Frageschritte und Match-Auswertung
   ═════════════════════════════════════════════════════════════════════════ */
.ddg-hidden{display:none !important}
.ddg-gate{width:min(760px,100%); margin:0 auto}
.ddg-card{
  position:relative; text-align:center;
  background:linear-gradient(180deg, rgba(216,182,123,.075), rgba(216,182,123,.02));
  border:1px solid rgba(216,182,123,.22); border-radius:26px;
  padding:1.5rem 1.4rem 1.6rem;
  animation:ddg-in .42s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes ddg-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ddg-card h2{margin:.5rem 0 .35rem; font-size:clamp(1.35rem,3.6vw,1.9rem); line-height:1.15;
  letter-spacing:-.025em; color:#F5F0E8; text-wrap:balance}
.ddg-card p{margin:0 auto; max-width:46ch; color:#B5ADA1; font-size:1rem; line-height:1.55}
@keyframes ddg-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.01)}}
.ddg-rosi{display:block; margin:0 auto; height:auto; animation:ddg-breathe 4.4s ease-in-out infinite}
.ddg-rosi-lg{width:min(230px,58vw)}
.ddg-rosi-hero{width:min(280px,66vw)}
.ddg-row{display:flex; flex-wrap:wrap; gap:.65rem; justify-content:center; margin-top:1.15rem}
.ddg-row-quiet{margin-top:.85rem}
.ddg-pill{
  appearance:none; cursor:pointer; font:inherit; font-size:1rem; font-weight:650;
  min-height:52px; padding:0 1.6rem; border-radius:999px;
  color:#E6DFD2; background:rgba(255,255,255,.04);
  border:1px solid rgba(216,182,123,.34);
  transition:transform .13s cubic-bezier(.2,.9,.3,1), background .16s ease, border-color .16s ease, box-shadow .2s ease;
}
.ddg-pill:hover{background:rgba(216,182,123,.14); border-color:#D8B67B; transform:translateY(-2px)}
.ddg-pill-primary{
  color:#1A0E05; border-color:transparent;
  background:linear-gradient(180deg,#EE9450,#E8863A 55%,#DC7B31);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 3px 10px -3px rgba(232,134,58,.45);
}
.ddg-pill-primary:hover{filter:brightness(1.06); background:linear-gradient(180deg,#F2A15A,#EE9450)}
.ddg-pill:active{transform:translateY(1px) scale(.995)}
.ddg-pill:focus-visible{outline:3px solid rgba(216,182,123,.85); outline-offset:3px}
.ddg-wa{
  display:inline-flex; align-items:center; gap:.55rem; text-decoration:none;
  min-height:52px; padding:0 1.6rem; border-radius:999px;
  background:#25D366; color:#0B2E17; font-weight:750; font-size:1rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 4px 14px -4px rgba(37,211,102,.5);
  transition:transform .13s ease, filter .16s ease;
}
.ddg-wa:hover{filter:brightness(1.07); transform:translateY(-2px)}
.ddg-back{
  display:block; margin:1.05rem auto 0; appearance:none; border:0; background:none;
  color:#7C838C; font:inherit; font-size:.9rem; font-weight:500; cursor:pointer; padding:.4rem .6rem;
}
.ddg-back:hover{color:#C9C0B2}
.ddg-pickwrap{display:grid; gap:.5rem; justify-items:center; margin-top:1.15rem}
.ddg-pick{
  appearance:none; font:inherit; font-size:1.05rem; font-weight:600;
  min-height:54px; width:min(340px,100%); padding:0 2.6rem 0 1.2rem;
  color:#F5F0E8; background:#12171D; border:1px solid rgba(216,182,123,.3); border-radius:16px;
  background-image:linear-gradient(45deg,transparent 50%,#D8B67B 50%),linear-gradient(135deg,#D8B67B 50%,transparent 50%);
  background-position:calc(100% - 22px) 24px, calc(100% - 15px) 24px; background-size:7px 7px,7px 7px;
  background-repeat:no-repeat; cursor:pointer;
}
.ddg-pick:focus{outline:none; border-color:#D8B67B; box-shadow:0 0 0 3px rgba(216,182,123,.16)}
.ddg-help{color:#8F877B; font-size:.86rem; text-decoration:underline; text-underline-offset:3px}
.ddg-help:hover{color:#D8B67B}
.ddg-err{color:#F0A48C !important; font-size:.9rem; min-height:1.2em; margin-top:.6rem !important}
.ddg-wait .ddg-bar{height:7px; border-radius:4px; background:rgba(216,182,123,.16); overflow:hidden; margin:1.1rem auto 0; width:min(340px,100%)}
.ddg-wait .ddg-bar i{display:block; height:100%; width:0; border-radius:4px; background:linear-gradient(90deg,#D8B67B,#E8863A)}

/* ── Auswertung ───────────────────────────────────────────────────────────*/
.ddg-result{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease}
.ddg-result.is-in{opacity:1; transform:none}
.ddg-result-head{text-align:center; margin-bottom:1.4rem}
.ddg-eyebrow{color:#D8B67B; letter-spacing:.12em; text-transform:uppercase; font-size:.76rem; margin:.4rem 0 .2rem}
.ddg-result-head h2{margin:.1rem 0 .4rem; font-size:clamp(1.6rem,5vw,2.5rem); letter-spacing:-.035em; color:#F5F0E8}
.ddg-sub{color:#B5ADA1; max-width:52ch; margin:0 auto; line-height:1.55}
.ddg-matches{display:grid; grid-template-columns:repeat(auto-fit,minmax(216px,1fr)); gap:.9rem; margin:1.3rem 0}
.ddg-match{
  position:relative; text-align:center; padding:1rem .85rem 1.1rem;
  background:rgba(255,255,255,.035); border:1px solid rgba(216,182,123,.18); border-radius:22px;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.ddg-match:hover{transform:translateY(-4px); border-color:rgba(232,134,58,.5); background:rgba(232,134,58,.07)}
.ddg-match img{width:100%; max-width:170px; height:auto; display:block; margin:0 auto .35rem;
  animation:ddg-breathe 5s ease-in-out infinite}
.ddg-match:nth-child(2n) img{animation-delay:.5s}
.ddg-match:nth-child(3n) img{animation-delay:1s}
.ddg-rank{
  position:absolute; top:12px; left:12px; min-width:26px; height:26px; border-radius:999px;
  display:grid; place-items:center; font-size:.8rem; font-weight:800;
  background:#D8B67B; color:#1A1305;
}
.ddg-match:first-child .ddg-rank{background:linear-gradient(180deg,#EE9450,#DC7B31); color:#1A0E05}
.ddg-match h3{margin:.2rem 0 0; font-size:1.35rem; letter-spacing:.03em; color:#F5F0E8}
.ddg-mname{margin:0 !important; color:#B5ADA1 !important; font-size:.86rem !important}
.ddg-mscore{margin:.45rem 0 .55rem !important; font-size:1.6rem !important; font-weight:800; color:#D8B67B !important}
.ddg-mscore small{font-size:.72rem; color:#8F877B; font-weight:500; margin-left:.15rem}
.ddg-match ul{list-style:none; margin:0; padding:0; display:grid; gap:.3rem; text-align:left}
.ddg-match li{color:#C4BBAD; font-size:.83rem; line-height:1.45; padding-left:.85rem; position:relative}
.ddg-match li::before{content:"🐾"; position:absolute; left:0; top:0; font-size:.6rem; opacity:.75}
.ddg-mlink{display:inline-block; margin-top:.7rem; color:#D8B67B; font-size:.84rem; font-weight:600;
  text-decoration:underline; text-underline-offset:3px}
.ddg-mlink:hover{color:#F0D9A8}
.ddg-row-share{margin:.4rem 0 1.2rem}
.ddg-hard{margin:.6rem auto 0; max-width:60ch; color:#B5ADA1}
.ddg-hard summary{cursor:pointer; color:#D8B67B; font-weight:600; font-size:.94rem; padding:.4rem 0}
.ddg-hard p{color:#B5ADA1; font-size:.92rem; line-height:1.55; margin:.3rem 0 0}
.ddg-note{max-width:60ch; margin:1.1rem auto 0 !important; color:#8F877B !important; font-size:.86rem !important; line-height:1.5}

@media (max-width:560px){
  .ddg-card{padding:1.2rem 1rem 1.3rem; border-radius:22px}
  .ddg-row{flex-direction:column; align-items:stretch}
  .ddg-pill, .ddg-wa{width:100%; justify-content:center}
  .ddg-matches{grid-template-columns:1fr 1fr; gap:.6rem}
  .ddg-match{padding:.75rem .55rem .85rem; border-radius:18px}
  .ddg-match h3{font-size:1.15rem}
  .ddg-mscore{font-size:1.35rem !important}
  .ddg-match li{font-size:.78rem}
}
@media (prefers-reduced-motion:reduce){
  .ddg-card,.ddg-rosi,.ddg-match img,.ddg-result{animation:none !important; transition:none !important; opacity:1; transform:none}
}

/* ═══ v115 — zwei Mini-Fixes ══════════════════════════════════════════════
   a) Content-Boxen sahen anklickbar aus: .dd-life-card bekam bei :hover und
      :focus-within einen goldenen Rahmen. focus-within greift, sobald man
      irgendwo in die Karte klickt — der Rahmen blieb dann stehen.
      Das Anheben bleibt, der goldene Rahmen geht. */
.master-v83.dd-life-ready :is(.dd-tool,.dd-podcast,.dd-couple-card).dd-life-card.is-alive:hover,
.master-v83.dd-life-ready :is(.dd-tool,.dd-podcast,.dd-couple-card).dd-life-card.is-alive:focus-within,
.dd-life-card:hover, .dd-life-card:focus-within,
.dd-tool:hover, .dd-tool:focus-within,
.dd-couple-card:hover, .dd-couple-card:focus-within,
.dd-finder-card:hover, .dd-finder-card:focus-within{
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:0 14px 40px rgba(0,0,0,.4) !important;
}
/* Nur echte Schaltflächen dürfen golden reagieren */
a.dd-button:hover, button:hover, a.dd-provider:hover, .dd-tool-cta:hover{border-color:inherit}

/* b) Pfoten-Cursor: global-brand.css legt ihn über body, main, section,
      article, div, header, footer, nav, aside, figure UND jeden Link.
      Zurücknehmen auf Standard, nur Antwortflächen behalten die Pfote. */
html.dd-global-brand :is(body,main,section,article,div,header,footer,nav,aside,figure){cursor:auto !important}
html.dd-global-brand :is(a,button,summary,[role="button"],label){cursor:pointer !important}
html.dd-global-brand :is(.cp-type-list li,.cp-nav-button,.cp-scene){cursor:pointer !important}
html.dd-global-brand h1,html.dd-global-brand h2,html.dd-global-brand h3,
html.dd-global-brand p,html.dd-global-brand li,html.dd-global-brand span{cursor:auto !important}
@media (hover:hover) and (pointer:fine){
  html.dd-global-brand :is(.ddpt-likert button,.rf-option,.cd-choice label,.couple-choice label,
    .bs-scale-option,#bs-answer-wrap button,#bs-answer-wrap label,[data-answer],.opt,
    .scale-choice,.question-row label,.ddg-pill,
    .personality-answer,.personality-choices button,.personality-choices label,
    .personality-ai-choice,.rf-option label,.cp-type-list li){
    cursor:url("/assets/paw-cursor.svg") 6 4, pointer !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   DEEPDIEMER — BUTTON-SYSTEM v115
   Verbindlich für die ganze Seite. Vorher gab es vier Behandlungen für
   dieselbe Funktion: Gold gefüllt 17x, transparent 6x, Orange 3x, Weiß 1x.

   Es gibt genau DREI Rollen. Mehr nicht.

   1. PRIMÄR   Orange #E8863A — die eine wichtigste Aktion je Karte/Abschnitt
   2. SEKUNDÄR Gold-Kontur auf transparent — jede weitere Aktion
   3. WHATSAPP Grün #25D366 — Plattformfarbe, bleibt unangetastet

   Gold gefüllt ist als Button-Stil abgeschafft. Gold bleibt Akzentfarbe für
   Text, Linien, Scores und Rahmen — nicht für Flächen.
   ═════════════════════════════════════════════════════════════════════════ */

:root{
  --dd-primary:#E8863A;
  --dd-primary-hover:#F2A15A;
  --dd-primary-active:#D9762E;
  --dd-primary-ink:#1A0E05;
  --dd-secondary-line:rgba(216,182,123,.42);
  --dd-secondary-ink:#E6DFD2;
  --dd-secondary-hover:rgba(216,182,123,.14);
  --dd-gold:#D8B67B;
  --dd-wa:#25D366;
  --dd-wa-ink:#0B2E17;
  --dd-btn-h:54px;
}

/* ── gemeinsame Form für alle drei Rollen ───────────────────────────────── */
.dd-hero-cta, .dd-tool-cta, a.dd-provider, .dd-button, .btn,
.bs-primary, .bs-ghost, .ddg-pill, .ddpt-btn, .rf-button,
.pc-page .dd-hero-cta, .dd-primary-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:var(--dd-btn-h); padding:0 1.6rem; border-radius:999px;
  font-weight:750; font-size:1rem; letter-spacing:-.01em; line-height:1;
  text-decoration:none; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease,
             box-shadow .2s ease, transform .12s cubic-bezier(.2,.9,.3,1), filter .15s ease;
}

/* ── 1. PRIMÄR ──────────────────────────────────────────────────────────── */
.dd-hero-cta, .dd-primary-cta, .dd-tool-cta,
a.dd-provider.primary, .dd-provider.primary,
.bs-primary, .ddg-pill-primary, .ddpt-btn-primary,
.rf-button:not(.rf-secondary), .pc-page .dd-hero-cta,
.dd-button.is-primary{
  background:linear-gradient(180deg,#EE9450,var(--dd-primary) 55%,#DC7B31) !important;
  background-color:var(--dd-primary) !important;
  color:var(--dd-primary-ink) !important;
  border:0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),
             0 3px 10px -3px rgba(232,134,58,.45),
             0 1px 2px rgba(0,0,0,.45) !important;
}
@media (hover:hover) and (pointer:fine){
  .dd-hero-cta:hover, .dd-primary-cta:hover, .dd-tool-cta:hover,
  a.dd-provider.primary:hover, .bs-primary:hover, .ddg-pill-primary:hover,
  .ddpt-btn-primary:hover, .rf-button:not(.rf-secondary):hover,
  .pc-page .dd-hero-cta:hover, .dd-button.is-primary:hover{
    background:linear-gradient(180deg,#F4A868,var(--dd-primary-hover)) !important;
    transform:translateY(-2px) scale(1.012);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4),
               0 6px 16px -5px rgba(232,134,58,.5),
               0 2px 4px rgba(0,0,0,.45) !important;
  }
}
.dd-hero-cta:active, .dd-primary-cta:active, .dd-tool-cta:active,
a.dd-provider.primary:active, .bs-primary:active, .ddg-pill-primary:active,
.ddpt-btn-primary:active, .rf-button:not(.rf-secondary):active{
  background:linear-gradient(180deg,var(--dd-primary-active),#CE6E28) !important;
  transform:translateY(1px) scale(.995);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.32) !important;
}

/* ── 2. SEKUNDÄR ────────────────────────────────────────────────────────── */
.dd-button:not(.is-primary):not(.dd-hero-cta):not(.dd-primary-cta):not([href*="wa.me"]):not([href*="whatsapp"]),
a.dd-provider:not(.primary), .dd-provider:not(.primary),
.btn:not(.bs-primary):not(.is-primary),
.bs-ghost, .ddg-pill:not(.ddg-pill-primary), .ddpt-btn-ghost,
.rf-secondary, .dd-secondary, .dd-button-quiet{
  background:transparent !important; background-image:none !important;
  color:var(--dd-secondary-ink) !important;
  border:1px solid var(--dd-secondary-line) !important;
  box-shadow:none !important;
}
@media (hover:hover) and (pointer:fine){
  .dd-button:not(.is-primary):not(.dd-hero-cta):not([href*="wa.me"]):hover,
  a.dd-provider:not(.primary):hover, .btn:not(.bs-primary):hover,
  .bs-ghost:hover, .ddg-pill:not(.ddg-pill-primary):hover,
  .ddpt-btn-ghost:hover, .rf-secondary:hover{
    background:var(--dd-secondary-hover) !important;
    border-color:var(--dd-gold) !important;
    color:#F5F0E8 !important;
    transform:translateY(-2px);
  }
}

/* ── 3. WHATSAPP ────────────────────────────────────────────────────────── */
a[href*="wa.me"], a[href*="whatsapp.com"], .ddfx-share, .ddg-wa, [data-share="whatsapp"]{
  background:var(--dd-wa) !important; background-image:none !important;
  color:var(--dd-wa-ink) !important; border:0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 4px 14px -4px rgba(37,211,102,.5) !important;
}
a[href*="wa.me"]:hover, .ddfx-share:hover, .ddg-wa:hover{
  background:#2BE26E !important; transform:translateY(-2px);
}

/* ── Textlinks bleiben Textlinks, keine Buttons ─────────────────────────── */
.dd-typeslider-cta a, .pc-alt a, .pc-crosslink a, .ddg-help, .bs-back, .ddg-back{
  background:none !important; border:0 !important; box-shadow:none !important;
  min-height:0; padding:.3rem .2rem; color:var(--dd-gold) !important; font-weight:600;
}
.dd-typeslider-cta a:hover, .pc-alt a:hover, .pc-crosslink a:hover{color:#F0D9A8 !important}

/* ── Fokus einheitlich ──────────────────────────────────────────────────── */
.dd-hero-cta:focus-visible, .dd-button:focus-visible, a.dd-provider:focus-visible,
.btn:focus-visible, .bs-primary:focus-visible, .bs-ghost:focus-visible,
.ddg-pill:focus-visible, .ddpt-btn:focus-visible, .rf-button:focus-visible{
  outline:3px solid var(--dd-gold); outline-offset:3px;
}

@media (max-width:560px){
  :root{--dd-btn-h:52px}
  .dd-hero-cta, .dd-tool-cta, a.dd-provider, .bs-primary, .ddg-pill{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .dd-hero-cta, .dd-button, a.dd-provider, .btn, .bs-primary, .ddg-pill{transition:none !important}
}

/* v115: Die Release-Stylesheets faerben Provider-Buttons und Tool-CTAs mit
   hoeherer Spezifitaet gold. Hier explizit auf das System gezogen. */
.master-v83 .dd-tools a.dd-provider.primary,
.master-v83 .dd-tools .dd-tool-cta,
.master-v83 .dd-tools .dd-tool-cta-personality,
.master-v83 .dd-hero .dd-hero-cta{
  background:linear-gradient(180deg,#EE9450,#E8863A 55%,#DC7B31) !important;
  background-color:#E8863A !important; color:#1A0E05 !important; border-color:transparent !important;
}
.master-v83 .dd-tools a.dd-provider:not(.primary),
.master-v83 .dd-tools .dd-provider-choice>a:not(:first-child){
  background:transparent !important; background-image:none !important;
  color:#E6DFD2 !important; border:1px solid rgba(216,182,123,.42) !important;
  box-shadow:none !important;
}
.master-v83 .dd-tools a.dd-provider:not(.primary):hover{
  background:rgba(216,182,123,.14) !important; border-color:#D8B67B !important; color:#F5F0E8 !important;
}

/* v115 — die drei Nachzügler. Die Release-Stylesheets faerben sie mit
   hoeherer Spezifitaet gold; hier gleichgezogen statt dagegen anzukaempfen. */
.master-j, /* no-op, haelt die Spezifitaet lesbar */
.master-v83 a[href*="wa.me"], .master-v83 a[href*="whatsapp.com"],
body a[href*="wa.me"], body a[href*="whatsapp.com"]{
  background:#25D366 !important; background-image:none !important;
  color:#0B2E17 !important; border-color:#25D366 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 4px 14px -4px rgba(37,211,102,.5) !important;
}
body a[href*="wa.me"]:hover{background:#2BE26E !important}
/* Haupt-Aktion einer Test-Karte = primaer */
body .dd-tool-cta, body .dd-tool-cta-personality, body a.dd-provider.primary{
  background:linear-gradient(180deg,#EE9450,#E8863A 55%,#DC7B31) !important;
  background-color:#E8863A !important; color:#1A0E05 !important; border-color:transparent !important;
}
/* Instagram ist kein Primaerziel der Seite -> sekundaer als Kontur */
body .dd-community-instagram-cta{
  background:transparent !important; background-image:none !important;
  color:#E6DFD2 !important; border:1px solid rgba(216,182,123,.42) !important;
  box-shadow:none !important;
}
body .dd-community-instagram-cta:hover{
  background:rgba(216,182,123,.14) !important; border-color:#D8B67B !important; color:#F5F0E8 !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   v116 — Ruhe ins Layout. Weniger Kästen, mehr Hintergrund.
   Gemessen vorher: Typseite 19 Boxen (sieben Kästen verschachtelt in sieben
   Kästen), Paarseite 11. Eine Box ist ab jetzt nur dort, wo sie eine eigene
   Funktion hat: der Score, der Abschluss-CTA, eine Antwortfläche.
   Alles andere trägt der Hintergrund.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Typseiten: äußerer Kasten weg, Kapitel trennen sich durch Raum ─────── */
.long-chapter{
  background:transparent !important;
  border:0 !important;
  border-top:1px solid rgba(216,182,123,.13) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:2.2rem 0 0 !important;
  margin:2.2rem 0 0 !important;
}
.long-chapter:first-of-type{border-top:0 !important;margin-top:1rem !important;padding-top:0 !important}
/* Beispiel im Kapitel: Zitatlinie statt Kasten */
.chapter-example{
  background:transparent !important;
  border:0 !important; border-left:2px solid rgba(216,182,123,.4) !important;
  border-radius:0 !important; box-shadow:none !important;
  padding:.15rem 0 .15rem 1.1rem !important;
  margin:1rem 0 0 !important;
  color:#B5ADA1 !important;
}

/* ── Paarseiten: nur Score und Abschluss bleiben Kästen ─────────────────── */
.pc-axis{
  background:transparent !important; border:0 !important;
  border-top:1px solid rgba(216,182,123,.13) !important;
  border-radius:0 !important; padding:1.6rem 0 0 !important; margin:1.6rem 0 0 !important;
}
.pc-role{
  background:transparent !important; border:0 !important;
  border-left:2px solid rgba(216,182,123,.4) !important; border-radius:0 !important;
  padding:.2rem 0 .2rem 1.1rem !important; margin:1.8rem 0 !important;
}
.pc-brings-grid article, .pc-needs-grid article{
  background:transparent !important; border:0 !important; border-radius:0 !important;
  padding:0 !important;
}
.pc-brings-grid, .pc-needs-grid{gap:1.6rem 2rem}
.pc-needs-grid h3{color:#E8863A !important}
.pc-brings-grid h3{color:#D8B67B !important}

/* ── Mehr Luft zwischen den Abschnitten ─────────────────────────────────── */
.pc-page main{padding-bottom:5rem}
.pc-intro, .pc-brings, .pc-needs, .pc-steps, .pc-faq, .pc-more{margin:2.4rem 0}
.pc-page h2{margin-bottom:.75rem}

/* ── Zentrierung: kurze Leitsätze mittig, Fließtext bleibt linksbündig ──── */
.pc-hero, .pc-result-head, .pc-cta, .ddg-card{text-align:center}
.pc-hero .pc-dyn, .pc-hero .pc-disclaim, .pc-cta p{margin-left:auto;margin-right:auto}
.pc-intro p, .pc-axis p, .pc-role p, .pc-brings-grid p, .pc-needs-grid p,
.pc-steps li, .pc-faq p{text-align:left}
/* Maximale Zeilenlänge für ruhiges Lesen */
.pc-page p, .pc-steps li, .pc-faq p{max-width:68ch}
.pc-hero h1, .pc-result-head h2{text-wrap:balance}

/* ── Score behält seinen Kasten, wird aber ruhiger ──────────────────────── */
.pc-score{
  background:transparent !important;
  border:1px solid rgba(216,182,123,.26) !important;
  padding:.85rem 1.5rem !important;
}
/* ── Abschluss-CTA bleibt der einzige farbige Block ─────────────────────── */
.pc-cta{
  background:linear-gradient(180deg,rgba(232,134,58,.08),transparent) !important;
  border:0 !important; border-top:1px solid rgba(232,134,58,.22) !important;
  border-radius:0 !important; padding:2.2rem 1rem 1.6rem !important; margin-top:3rem !important;
}

/* ── Startseite: die Panels etwas zurücknehmen ──────────────────────────── */
.aligned-panel, .dd-how-bridge{
  background:transparent !important;
  border-top:1px solid rgba(216,182,123,.12) !important;
  border-left:0 !important; border-right:0 !important; border-bottom:0 !important;
  border-radius:0 !important; box-shadow:none !important;
}

/* ── Fußzeilen-Link auf die Tabelle: unauffällig, nicht wie ein Button ──── */
footer a[href*="/16-personalities/compatibility/"]{
  background:none !important; border:0 !important; box-shadow:none !important;
  color:#8F877B !important; font-weight:500; text-decoration:none; min-height:0; padding:0;
}
footer a[href*="/16-personalities/compatibility/"]:hover{color:#D8B67B !important}

@media (max-width:640px){
  .long-chapter{padding-top:1.6rem !important;margin-top:1.6rem !important}
  .pc-axis{padding-top:1.3rem !important;margin-top:1.3rem !important}
  .pc-brings-grid, .pc-needs-grid{gap:1.3rem}
}

/* v116: der Erklärblock auf der Couple-Seite war als einziger linksbündig
   zwischen zentrierten Abschnitten — angeglichen. */
.couple-search-guide{text-align:center}
.couple-search-guide p, .couple-search-guide h2{margin-left:auto;margin-right:auto;max-width:64ch}
.couple-search-guide .couple-guide-links{justify-content:center}

/* ═══ v119 — Rassen-Durchlauf im Find-your-Rosi-Intro ════════════════════ */
.rf-rail{margin:2.2rem 0 .5rem}
.rf-rail-label{text-align:center;color:#B5ADA1;font-size:.9rem;margin:0 0 .8rem;letter-spacing:.01em}
.rf-rail-mask{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rf-rail-mask::-webkit-scrollbar{display:none}
.rf-rail-track{display:flex;gap:.9rem;width:max-content;margin:0;padding:0;list-style:none;
  animation:rf-rail-run 64s linear infinite}
@keyframes rf-rail-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rf-breed{flex:0 0 auto;width:146px;text-align:center}
.rf-breed img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;display:block;
  transition:transform .2s ease}
.rf-breed:hover img{transform:translateY(-5px) scale(1.03)}
.rf-breed span{display:block;margin-top:.2rem;font-size:.8rem;color:#C4BBAD;line-height:1.25}
.rf-rail.is-static .rf-rail-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
/* v121: vorher n+17 — das versteckte 16 echte Rassen. Die Liste enthaelt
   32 Rassen doppelt, ausgeblendet werden duerfen nur die Duplikate. */
.rf-rail.is-static .rf-breed:nth-child(n+33){display:none}
.rf-rail-controls{display:flex;gap:.5rem;justify-content:center;margin-top:.7rem}
.rf-rail-btn{width:40px;height:40px;border-radius:999px;border:1px solid rgba(216,182,123,.34);
  background:transparent;color:#D8B67B;font-size:1rem;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:background .16s ease,border-color .16s ease}
.rf-rail-btn:hover{background:rgba(216,182,123,.14);border-color:#D8B67B}
.rf-rail-btn:focus-visible{outline:3px solid #D8B67B;outline-offset:3px}
@media (max-width:640px){.rf-breed{width:118px}.rf-rail-track{animation-duration:52s}}
@media (prefers-reduced-motion:reduce){.rf-rail-track{animation:none!important}.rf-rail-controls{display:none}}

/* ═══ v121 — Motion-Add-on: Standbild ist der Normalfall ════════════════
   Beide teilen denselben 4:3-Slot, damit beim Wechsel nichts springt. */
[data-rosi-ai-story]{position:relative}
[data-rosi-ai-story] > img,
[data-rosi-ai-story] > .dd-motion-clip{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;display:block;
}
[data-rosi-ai-story] > .dd-motion-clip{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity .28s ease;background:transparent;
}
[data-rosi-ai-story].dd-motion-on > .dd-motion-clip{opacity:1}
[data-rosi-ai-story].dd-motion-on > img{opacity:0;transition:opacity .28s ease}
[data-rosi-ai-story] > img{transition:opacity .28s ease}
/* Die neue Szene bringt ihr Geraet mit — gezeichnete Laptop-Schichten weg,
   sonst stehen zwei Geraete uebereinander. */
[data-rosi-ai-story] .rosi-ai-laptop,
[data-rosi-ai-story] .rosi-ai-display-panel,
[data-rosi-ai-story] .rosi-display-stand{display:none !important}
@media (prefers-reduced-motion:reduce){
  [data-rosi-ai-story] > .dd-motion-clip{display:none !important}
  [data-rosi-ai-story] > img{opacity:1 !important}
}

/* ═══ v124 — Social-Karten: weniger Dackel auf einem Fleck ════════════════
   Vorher: ein grosses Motiv (76 % der Kartenbreite, 340 px) plus drei Avatare,
   in denen das 1200x900-Motiv so beschnitten wurde, dass teils nur leere
   Flaeche im Kreis stand. Die gewinnende Regel hing an einer ID
   (#beta .dd-community-rosi), deshalb hier mit derselben Staerke. */
html[data-page="home"] .ddmicro-cartoon .ddmicro-v4-art,
.master-v83 #beta .dd-community-rosi,
img.dd-community-rosi{
  width:min(60%, 190px) !important; max-width:190px !important; height:auto !important;
  margin-inline:auto;
}
/* Avatare: kleiner, ganzes Motiv im Kreis statt Ausschnitt, und nur zwei */
.ddmicro-friend-parade{gap:.3rem}
.ddmicro-friend{width:50px !important; height:50px !important; background:rgba(216,182,123,.10)}
.ddmicro-friend img{object-fit:contain !important; object-position:center !important}
.ddmicro-friend-2{display:none !important}
@media (max-width:640px){
  html[data-page="home"] .ddmicro-cartoon .ddmicro-v4-art,
  .master-v83 #beta .dd-community-rosi,
  img.dd-community-rosi{width:min(54%, 150px) !important; max-width:150px !important}
  .ddmicro-friend{width:42px !important; height:42px !important}
}