/* ============================================================
   Bewertungsinstitut - institut.css  (Pink-Layer overrides / feintuning)
   ============================================================ */
.hero-kick .st{filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}
.section+.section{padding-top:0}
.section--ink+.section{padding-top:76px}
.hero+.section{padding-top:66px}

/* Package box 3D accent (marketingstars24 paket-optik) */
.lp-card--best .lp-name{color:var(--pink)}
.lp-card--best .lp-total{color:var(--pink)}

/* Trust ribbon under hero */
.trust-ribbon{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-ribbon .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:2.2rem;padding:18px 22px;
  font-size:.85rem;font-weight:700;color:var(--pink)}
.trust-ribbon .tr-i{display:inline-flex;align-items:center;gap:.45rem}
.trust-ribbon .tr-i svg{width:18px;height:18px}

/* Navy price header accent for paket cards (optional decorative) */
.pkg-header{background:var(--navy);color:#fff;border-radius:12px 12px 0 0;padding:.6rem 1rem;
  font-weight:800;font-size:.9rem;text-align:center}
.pkg-header em{color:var(--amber)}

/* selection color */
::selection{background:var(--pink);color:#fff}

/* focus visible */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(240,0,100,.4);outline-offset:2px;border-radius:6px}

/* Weitere Plattformen (Related) */
.relp-section .relp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:1.4rem}
.relp-link{display:flex;flex-direction:column;justify-content:space-between;gap:.6rem;padding:22px 22px;background:#fff;border:1.5px solid var(--line);border-radius:16px;color:var(--ink);font-weight:700;font-size:.95rem;text-decoration:none;box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s,background .15s}
@media(max-width:900px){.relp-section .relp-grid{grid-template-columns:1fr}}
.relp-link:hover{transform:translateY(-2px);background:#fff5f9;box-shadow:0 6px 18px rgba(240,0,100,.12)}
.relp-link--all{background:linear-gradient(150deg,var(--pink),var(--pink-dark));color:#fff;border-color:transparent}
.relp-link--all:hover{background:linear-gradient(150deg,var(--pink-dark),var(--pink))}

/* Kontextuelle In-Text-Verlinkung (Topical Authority) */
.intro-contextlinks{margin-top:1.1rem;padding:1rem 1.2rem;background:#fff5f9;border-left:3px solid var(--pink);
  border-radius:0 12px 12px 0;font-size:.98rem;line-height:1.7;color:var(--ink)}
.intro-contextlinks a{color:var(--pink);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(240,0,100,.3)}
.intro-contextlinks a:hover{border-bottom-color:var(--pink)}

/* ===================== Warenkorb / Sidecart ===================== */
.lp-cart-btn{display:block;width:100%;margin-bottom:.5rem;text-align:center;border:none;cursor:pointer;
  padding:.7rem 1rem;border-radius:10px;font-weight:800;font-size:.92rem}
.sidecart-overlay{position:fixed;inset:0;background:rgba(20,4,12,.45);opacity:0;visibility:hidden;
  transition:opacity .25s;z-index:900}
.sidecart-overlay[data-open="true"]{opacity:1;visibility:visible}
.sidecart{position:fixed;top:0;right:0;height:100%;width:min(390px,92vw);background:#fff;z-index:901;
  box-shadow:-12px 0 40px rgba(240,0,100,.18);display:flex;flex-direction:column;
  transform:translateX(105%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.sidecart[data-open="true"]{transform:translateX(0)}
.sidecart-head{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.2rem;
  background:linear-gradient(120deg,var(--pink),var(--pink-dark));color:#fff}
.sidecart-head b{font-size:1.1rem}
.sidecart-x{background:none;border:none;color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;padding:0 .2rem}
.sidecart-body{flex:1;overflow-y:auto;padding:1rem 1.2rem}
.sidecart-empty{color:var(--muted);font-size:.95rem;text-align:center;margin-top:2rem}
.sidecart-item{display:flex;justify-content:space-between;gap:.6rem;padding:.85rem 0;border-bottom:1px solid #f2e4ec}
.sidecart-item-main b{display:block;color:var(--ink);font-size:.98rem}
.sidecart-item-main span{color:var(--muted);font-size:.84rem}
.sidecart-item-side{text-align:right;white-space:nowrap}
.sidecart-item-price{display:block;font-weight:800;color:var(--pink)}
.sidecart-item-rm{background:none;border:none;color:var(--muted);font-size:.78rem;cursor:pointer;
  text-decoration:underline;padding:.2rem 0}
.sidecart-item-rm:hover{color:var(--pink)}
.sidecart-foot{padding:1.1rem 1.2rem;border-top:1px solid #f2e4ec;background:#fff5f9}
.sidecart-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}
.sidecart-total b{font-size:1.3rem;color:var(--pink)}
.sidecart-note{font-size:.78rem;color:var(--muted);margin:.2rem 0 .8rem;line-height:1.5}
.sidecart-checkout{display:block;text-align:center;width:100%}

/* ===================== Schwebendes Trust-Widget ===================== */
.trust-widget{position:fixed;right:18px;bottom:18px;z-index:880;font-family:inherit}
.tw-toggle{display:flex;align-items:center;gap:.6rem;background:#fff;border:1px solid #ffd0e2;cursor:pointer;
  padding:.5rem .9rem .5rem .5rem;border-radius:999px;box-shadow:0 8px 26px rgba(240,0,100,.22)}
.tw-ring{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;
  background:conic-gradient(#F5A623 0 88%,#ffe3b0 88% 100%);position:relative}
.tw-ring::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--pink)}
.tw-grade{position:relative;z-index:1;font-size:.95rem}
.tw-toggle-txt{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.tw-toggle-txt b{color:var(--ink);font-size:.9rem}
.tw-toggle-txt span{color:var(--muted);font-size:.72rem}
.tw-card{position:absolute;right:0;bottom:64px;width:300px;background:#fff;border-radius:16px;
  box-shadow:0 18px 50px rgba(240,0,100,.25);border:1px solid #ffe0ec;padding:1.1rem;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.22s}
.trust-widget[data-open="true"] .tw-card{opacity:1;visibility:visible;transform:translateY(0)}
.tw-x{position:absolute;top:.5rem;right:.6rem;background:none;border:none;font-size:1.3rem;color:var(--muted);cursor:pointer}
.tw-card-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem}
.tw-card-ring{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;
  flex-shrink:0;background:conic-gradient(#F5A623 0 88%,#ffe3b0 88% 100%);position:relative}
.tw-card-ring::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--pink)}
.tw-card-ring span{position:relative;z-index:1;font-size:1.05rem}
.tw-card-head b{display:block;color:var(--ink);font-size:1rem}
.tw-card-stars{color:#F5A623;font-size:.95rem;letter-spacing:1px}
.tw-card-count{display:block;color:var(--muted);font-size:.76rem}
.tw-card-text{font-size:.85rem;color:var(--ink);line-height:1.55;margin:.4rem 0 .7rem}
.tw-card-badges{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.8rem}
.tw-card-badges span{background:#fff5f9;color:var(--pink);font-size:.72rem;font-weight:700;padding:.25rem .55rem;border-radius:999px}
.tw-card-cta{display:block;text-align:center;background:var(--pink);color:#fff;font-weight:800;font-size:.88rem;
  padding:.6rem;border-radius:10px;text-decoration:none}
.tw-card-cta:hover{background:var(--pink-dark)}
@media(max-width:520px){.tw-toggle-txt{display:none}.tw-card{width:min(300px,90vw)}}

/* ============================================================
   MOBILE-FIXES v2 (2026-08-17) — ans ENDE von institut.css
   institut.css laedt als LETZTES (home->landing->institut),
   daher gewinnen diese Regeln die Kaskade gegen landing.css.
   ============================================================ */

/* Global: nichts darf breiter als der Viewport werden */
html,body{max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img,svg{max-width:100%;height:auto}

/* Grosse Buttons duerfen nie breiter als Container sein */
.btn--lg{max-width:100%}
.hero-actions .btn,.gratis-cta .btn{max-width:100%}

/* ---- Plattform-Preiskarten (.lp-pricing = repeat(5,1fr) in landing.css) ---- */
@media(max-width:1080px){ .lp-pricing{grid-template-columns:repeat(3,1fr)} }
@media(max-width:820px){ .lp-pricing{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){
  .lp-pricing{grid-template-columns:1fr;gap:14px}
  .lp-card{width:auto;max-width:100%}
  .lp-card--best{transform:none}
  .lp-card--best:hover{transform:translateY(-5px)}
}

/* ---- Hero-Quickpick-Kacheln (.qpick-grid = repeat(4,1fr) in landing.css) ---- */
@media(max-width:560px){
  .qpick-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:360px){
  .qpick-grid{grid-template-columns:repeat(2,1fr);gap:6px}
  .qpick-cell{padding:12px 4px}
  .qpick-cell b{font-size:1.1rem}
}

/* ---- Testfunnel-Card / Formular (tb-card ragte auf ~425px) ---- */
@media(max-width:560px){
  .tb-card{padding:22px 16px}
  .tb-form{max-width:100%}
  .tb-row.two{grid-template-columns:1fr}
  .tb-card input,.tb-card select,.tb-card textarea{max-width:100%}
}

/* ---- Logo-Strip: 10 Logos in 1 Reihe -> mobil sauber umbrechen ---- */
@media(max-width:640px){
  .ls-row{flex-wrap:wrap;gap:18px 22px;row-gap:18px}
  .ls-item{height:26px}
  .ls-item img{max-height:22px;max-width:88px}
}
@media(max-width:400px){
  .ls-row{gap:14px 18px}
  .ls-item img{max-height:20px;max-width:76px}
}

/* ---- Kontakt-Trust-Badges / contact-form (ragten ~15px) ---- */
@media(max-width:760px){
  .trust-badges,.trust-badge,.contact-form{max-width:100%;width:100%}
  .contact-form input,.contact-form select,.contact-form textarea{max-width:100%}
}

/* ---- Ratgeber-Hero-Text nicht ueber Rand ---- */
@media(max-width:760px){
  .hero-kick,.ratgeber-hero h1,.ratgeber-hero p{max-width:100%}
}

/* ---- Checkout-Cards: leichtes Ueberragen (367->389) abfangen ---- */
@media(max-width:760px){
  .co-wrap{padding-left:16px;padding-right:16px}
  .co-card{max-width:100%}
}

/* ---- v2b: Grid-Overflow-Fix (1fr respektiert min-content -> minmax(0,1fr)) ---- */
@media(max-width:820px){
  .tb-grid{grid-template-columns:minmax(0,1fr) !important}
  .tb-grid>*{min-width:0}
}
@media(max-width:900px){
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .contact-grid>*{min-width:0}
}
.tb-intro,.tb-card,.tb-form,.trust-badge,.contact-form{min-width:0;max-width:100%}
.tb-benefits li{min-width:0}
.btn{max-width:100%}
.btn .arw{white-space:nowrap}

/* ---- v2c: Logo-Strip mobil sichtbar (width:auto+flex-wrap kollabierte auf 0) ---- */
@media(max-width:640px){
  .ls-row{flex-wrap:wrap;gap:16px 20px;justify-content:center}
  .ls-item{width:auto;min-width:70px;height:auto;flex:0 0 auto}
  .ls-item img{width:78px;max-width:78px;height:auto;max-height:26px}
}
@media(max-width:380px){
  .ls-item{min-width:60px}
  .ls-item img{width:66px;max-width:66px;max-height:22px}
}
/* ---- Coupon-Box: Button nicht ueber Rand, sauberer Umbruch ---- */
@media(max-width:560px){
  .coupon-box,.qpick .coupon,.tb-coupon{flex-wrap:wrap}
  .coupon-box *{max-width:100%}
}
/* ---- Floating 4,9-Badge mobil kleiner + weiter raus, kein Text-Overlap ---- */
@media(max-width:640px){
  .rev-float,.float-rating,.rating-badge,.lp-badge,.tb-badge{transform:scale(.8)}
}

/* ---- v2d: echte Klassen (coupon-inline, trust-widget) ---- */
@media(max-width:560px){
  .coupon-inline{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;max-width:100%}
  .coupon-inline .cc-code{word-break:break-all}
  .coupon-inline .cc-copy{flex:0 0 auto}
}
@media(max-width:640px){
  .trust-widget{right:12px;bottom:12px;transform:scale(.82);transform-origin:bottom right}
}

/* ---- v2e: Logo-Reihe wirklich zentrieren + Badge mobil dezenter ---- */
@media(max-width:640px){
  .ls-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center}
  .ls-item{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
  .ls-item img{max-height:22px !important;width:auto !important;max-width:80px}
  /* Trust-Widget mobil klein + tief, minimiert Overlap */
  .trust-widget{right:10px;bottom:10px;transform:scale(.72);transform-origin:bottom right}
}

/* ---- v2f: Trust-Widget mobil hoeher + Safe-Area (kollidierte mit Safari-Bar) ---- */
@media(max-width:640px){
  .trust-widget{
    right:10px;
    bottom:calc(76px + env(safe-area-inset-bottom,0px));
    transform:scale(.7);
    transform-origin:bottom right;
  }
  /* geschlossener Zustand nur Ring (kompakt), kein breiter Text-Pill */
  .trust-widget:not([data-open="true"]) .tw-toggle{padding:.35rem}
}

/* ---- Prozess-Sektion Aufwertung: cron-Zahlen + gestaffeltes Reveal ---- */
.proc-step .dot{
  background:linear-gradient(135deg,#FFD200,#FFC400) !important;
  color:#3a2a00 !important;
  box-shadow:0 6px 18px rgba(255,196,0,.45);
  font-size:1.05rem;
}
/* gestaffelte Einblende-Verzoegerung (Observer setzt .in) */
.reveal[data-d="1"]{transition-delay:.05s}
.reveal[data-d="2"]{transition-delay:.20s}
.reveal[data-d="3"]{transition-delay:.35s}
.reveal[data-d="4"]{transition-delay:.50s}
/* etwas mehr Bewegung mobil beim Einblenden */
@media(max-width:760px){
  .proc-step.reveal{transform:translateY(30px)}
  .proc-step.reveal.in{transform:none}
}

/* ---- Feinschliff: Badge-OpenClaw dezenter, Trust-Widget weiter weg von Karten ---- */
.proc-step .dot{box-shadow:0 3px 10px rgba(255,196,0,.30) !important}
@media(max-width:640px){
  .trust-widget{right:8px;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:scale(.66);transform-origin:bottom right}
}

/* ============================================================
   TRUST-WIDGET mobil GROESSER + besser (Nico 17:41)
   Ueberschreibt alle vorherigen mobilen scale()-Overrides.
   Desktop (>640px) bleibt komplett unveraendert.
   ============================================================ */
@media(max-width:640px){
  .trust-widget{
    right:12px;
    bottom:calc(16px + env(safe-area-inset-bottom,0px));
    transform:none;              /* alte scale()-Regeln aufheben -> scharf */
  }
  /* Pill sichtbar + kraeftiger */
  .trust-widget .tw-toggle{
    padding:.5rem .95rem .5rem .5rem;
    gap:.55rem;
    box-shadow:0 10px 30px rgba(240,0,100,.28);
  }
  /* Ring groesser */
  .trust-widget .tw-ring{width:50px;height:50px}
  .trust-widget .tw-grade{font-size:1.05rem}
  /* Text-Pill wieder EINblenden (war bei 520px display:none) + lesbar */
  .trust-widget .tw-toggle-txt{display:flex}
  .trust-widget .tw-toggle-txt b{font-size:.92rem}
  .trust-widget .tw-toggle-txt span{font-size:.74rem}
}

/* ============================================================
   TRUST-WIDGET mobil v3 (Nico 17:53): gross & lesbar, aber
   KOMPAKT (nur Ring) damit es keine Produktkachel/CTA ueberdeckt.
   Text-Pill erscheint nur im geoeffneten Zustand. Desktop unveraendert.
   ============================================================ */
@media(max-width:640px){
  .trust-widget{
    right:14px;
    bottom:calc(16px + env(safe-area-inset-bottom,0px));
    transform:none;
  }
  /* geschlossen: nur der Ring, gross & scharf, klein genug fuer freie Ecke */
  .trust-widget:not([data-open="true"]) .tw-toggle{
    padding:4px;
    background:#fff;
    box-shadow:0 8px 24px rgba(240,0,100,.30);
  }
  .trust-widget:not([data-open="true"]) .tw-toggle-txt{display:none}
  .trust-widget .tw-ring{width:56px;height:56px}
  .trust-widget .tw-grade{font-size:1.2rem}
  /* geoeffnet: dann darf der Text/Karte sichtbar sein (Karte regelt sich selbst) */
  .trust-widget[data-open="true"] .tw-toggle-txt{display:flex}
}

/* ---- Hub-Kacheln: gleiche Spaltenbreite (minmax gg. Aufblaehen) + Logos einheitlich hoch ---- */
@media(max-width:640px){
  .hub-tiles,.hub-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important}
  .hub-tile{min-width:0}
}
@media(max-width:380px){
  .hub-tiles,.hub-grid{grid-template-columns:minmax(0,1fr) !important}
}
/* Logos einheitliche optische Hoehe statt breitenbasiert (Wortmarken sonst zu klein) */
.hub-logo-box img{max-height:64px;max-width:100%;width:auto;object-fit:contain}
@media(max-width:560px){
  .hub-logo-box img{max-height:58px;max-width:100%}
}

/* ---- Kaufen-Zeile: kein Umbruch von "Kaufen >" / Preis mobil ---- */
.hub-tile-meta{flex-wrap:nowrap;gap:6px}
.hub-tile-buy{white-space:nowrap}
.hub-tile-buy .arw{white-space:nowrap}
@media(max-width:560px){
  .hub-tile-meta{font-size:.74rem;padding:6px 4px 8px}
  .hub-tile-buy{gap:.2rem}
}