/* Branchen-Salespages: Farbwelt kommt je Gruppe aus --accent / --t (RGB) / --t-hi / --t-lo */

/* Vorgaben (Hub-Seite); Branchenseiten überschreiben sie im <head> */
:root{--t:207,125,191;--t-hi:#f6d9f1;--t-lo:#c06cb0}

/* Atmosphäre und Hauptbutton in der Gruppenfarbe */
.orb.a{background:radial-gradient(closest-side,rgba(var(--t),.20),transparent 70%)}
.orb.b{background:radial-gradient(closest-side,rgba(var(--t),.10),transparent 70%)}
.btn-primary{background:linear-gradient(180deg,var(--t-hi),var(--accent) 55%,var(--t-lo));box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 10px 40px -10px rgba(var(--t),.6),0 0 60px -20px rgba(var(--t),.5)}
.btn-primary:hover{box-shadow:0 0 0 1px rgba(255,255,255,.6) inset,0 14px 50px -8px rgba(var(--t),.75),0 0 90px -16px rgba(var(--t),.6)}
.btn-primary .ico{background:#120b10;color:var(--t-hi)}
.price-note{border-color:rgba(var(--t),.35);background:rgba(var(--t),.08);color:var(--t-hi)}
.eyebrow .dot{box-shadow:0 0 12px var(--accent)}
.spot::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(var(--t),.10),transparent 60%)}
.faq details[open] .plus{color:#120b10}
.service .svc-ico{background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.2),rgba(var(--t),.07));border-color:rgba(var(--t),.35);color:var(--t-hi)}
.service.featured .card-core{background:linear-gradient(180deg,rgba(var(--t),.09),rgba(255,255,255,.01) 60%)}
.service.featured{border-color:rgba(var(--t),.3)}
.svc-link{color:var(--t-hi)}
.crumbs a:hover{color:var(--t-hi)}

/* ---------- Hero ---------- */
.br-hero{overflow:hidden;padding-top:clamp(96px,14svh,150px);padding-bottom:clamp(36px,5vw,64px)}
.br-hero .motif{position:absolute;inset:0;width:100%;height:100%;z-index:-1;color:var(--accent);opacity:.2;pointer-events:none;
  -webkit-mask-image:radial-gradient(80% 90% at 85% 20%,#000,transparent 75%);mask-image:radial-gradient(80% 90% at 85% 20%,#000,transparent 75%)}
.br-hero .motif *{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.br-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,72px);align-items:center}
.br-hero-grid>*{min-width:0}
.br-hero h1{font-size:clamp(1.85rem,4.3vw,3.6rem);margin-top:20px}
.br-hero .lead{margin-top:20px}
.br-eyebrow{margin-top:20px}
.br-note{margin-top:20px}
.br-hero .crumbs li:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}

/* Google-Suche (schematisch) */
.serp{position:relative;padding:18px;border-radius:26px;background:rgba(18,12,22,.72);border:1px solid var(--line-2);box-shadow:0 40px 100px -40px rgba(0,0,0,.8),0 0 80px -30px rgba(var(--t),.35);transform:rotate(1.2deg)}
.serp-bar{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 18px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line-2);font-size:15.5px;color:var(--ink)}
.serp-bar svg{flex:none;width:18px;height:18px;color:var(--t-hi)}
.serp-q{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:opacity .35s var(--ease)}
.serp-q.out{opacity:0}
.serp-bar .caret{flex:none;width:2px;height:20px;background:var(--accent);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.serp-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.serp-list li{position:relative;display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto auto;column-gap:12px;row-gap:7px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.serp-list .fav{grid-row:1/4;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.1)}
.serp-list .l1{height:10px;width:62%;border-radius:6px;background:rgba(255,255,255,.2)}
.serp-list .l2{height:8px;width:90%;border-radius:6px;background:rgba(255,255,255,.08)}
.serp-list em{font-style:normal;font-size:12px;letter-spacing:.06em;color:var(--dim)}
.serp-list .ghost{border:1.5px dashed rgba(var(--t),.7);background:rgba(var(--t),.07);animation:ghost 2.6s ease-in-out infinite}
.serp-list .ghost .fav{background:rgba(var(--t),.3)}
.serp-list .ghost .l1{background:rgba(var(--t),.35)}
.serp-list .ghost .l2{background:rgba(var(--t),.15)}
.serp-list .ghost em{color:var(--t-hi);font-weight:600}
@keyframes ghost{50%{box-shadow:0 0 28px -4px rgba(var(--t),.55)}}
.serp-cap{margin-top:12px;text-align:right;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* ---------- Suchanfragen ---------- */
.br-searches{padding-block:clamp(56px,8vw,100px)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.chips li{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 20px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.035);font-size:clamp(.98rem,1.3vw,1.1rem);color:var(--ink)}
.chips li svg{flex:none;width:18px;height:18px;color:var(--accent)}
.chips-link li{padding:0}
.chips-link a{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 20px;border-radius:999px;text-decoration:none;color:var(--muted);transition:color .3s,background .3s}
.chips-link a:hover{color:var(--ink);background:rgba(var(--t),.12)}
.chips-link a.all{color:var(--t-hi)}
.chips-link a svg{width:16px;height:16px}
.br-note-line{margin-top:28px;max-width:780px;font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.45;letter-spacing:-.015em;color:var(--ink)}

/* ---------- Probleme ---------- */
.pain-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.pain{grid-column:auto}
.pain .card-core{padding:clamp(24px,3vw,38px)}
.pain-no{display:block;font-family:var(--serif);font-style:italic;font-size:2.6rem;line-height:1;color:var(--accent)}
.pain h3{margin-top:18px}

/* ---------- Verlustrechner ---------- */
.loss-core{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);padding:clamp(24px,4vw,56px);background:radial-gradient(70% 90% at 100% 0%,rgba(var(--t),.28),transparent 60%),#120d16}
.loss-core>*{min-width:0}
.loss-core h2{font-size:clamp(1.8rem,3.6vw,3rem);margin-top:20px}
.loss-core .lead{margin-top:18px;color:var(--muted)}
.loss{display:grid;gap:14px;align-content:start}
.loss-out{display:block;min-height:96px;padding:18px 20px;border-radius:20px;border:1px solid rgba(var(--t),.35);background:rgba(var(--t),.07)}
.loss-idle{color:var(--muted);font-size:15px}
.loss-res b{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.05;color:var(--t-hi)}
.loss-res small{display:block;margin-top:6px;color:var(--muted);font-size:14px}
.loss .btn{justify-self:start;margin-top:6px}

/* ---------- Pflichtprogramm ---------- */
.br-must-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,90px);align-items:start}
.br-must-wrap>*{min-width:0}
.br-must-wrap .section-head{margin-bottom:0}
.musts{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.musts li{display:flex;gap:16px;align-items:flex-start;padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.025);font-size:clamp(1rem,1.3vw,1.1rem)}
.musts .tick{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:rgba(var(--t),.16);color:var(--t-hi)}
.musts .tick svg{width:16px;height:16px}
.rule{display:flex;gap:14px;align-items:flex-start;margin-top:18px;padding:16px 18px;border-radius:18px;border:1px dashed rgba(var(--t),.5);color:var(--muted);font-size:15px}
.rule svg{flex:none;width:22px;height:22px;margin-top:2px;color:var(--accent)}

/* ---------- Ablauf ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.steps .card{grid-column:auto}
.step-no{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent);color:#120b10;font-weight:700}
.steps h3{margin-top:20px}

@media (max-width:960px){
  .br-hero-grid{grid-template-columns:minmax(0,1fr)}
  .serp{max-width:520px;transform:none}
  .loss-core,.br-must-wrap{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:1fr}
}
@media (max-width:700px){
  .pain-grid{grid-template-columns:1fr}
  .br-hero .crumbs{display:none}
  .br-eyebrow{margin-top:0}
  .br-hero h1{font-size:clamp(1.6rem,7.4vw,2rem);line-height:1.08;margin-top:16px}
  .chips li{font-size:15px}
}
/* Hero-Buttons müssen ohne Scrollen sichtbar bleiben: auf niedrigen Fenstern verdichten */
@media (max-height:760px){
  .br-hero .lead{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .br-second,.br-note{display:none}
}
@media (max-height:520px) and (orientation:landscape){
  .br-hero{padding-top:84px}
  .br-hero .lead{-webkit-line-clamp:2}
  .br-hero h1{font-size:clamp(1.5rem,3.4vw,2rem)}
  .br-eyebrow{display:none}
}
@media (prefers-reduced-motion:reduce){
  .serp-bar .caret,.serp-list .ghost{animation:none}
}

/* ---------- Übersicht /branchen/ ---------- */
.hub-search{display:grid;gap:8px;max-width:520px;margin-bottom:clamp(28px,4vw,48px)}
.hub-search label{font-size:14px;color:var(--muted)}
.hub-search input{width:100%;min-height:56px;padding:14px 20px;border-radius:999px;border:1px solid var(--line-2);background:rgba(9,7,12,.6);color:var(--ink);font:17px var(--sans)}
.hub-search input:focus{outline:none;border-color:rgba(var(--t),.7);box-shadow:0 0 0 4px rgba(var(--t),.15)}
.hub-none{color:var(--muted)}
.hub-none a{color:var(--t-hi)}
.hub-groups{display:grid;gap:clamp(28px,4vw,44px)}
.hub-group h2{display:flex;align-items:center;gap:12px;font-size:clamp(1.25rem,2vw,1.6rem);margin-bottom:16px;letter-spacing:-.02em}
.hub-group h2 small{font-size:13px;font-weight:500;color:var(--dim);letter-spacing:0}
.hub-dot{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent);flex:none}
.hub-group .chips-link a:hover{background:rgba(var(--t),.14)}