/* Flotten-Baukasten: gemeinsame Regeln für übernommene Inhalte (Artikel, Übersichten, Landingpages) und CTA-Bausteine. */
/* ---------- Unterseiten: übernommene Inhalte im neuen Design ---------- */
.unterseite .artikel-sec{padding-top:44px}
.artikel{max-width:880px}
.artikel h1{font-family:var(--display);font-size:var(--t-2xl);line-height:1.08;margin:.25em 0 .4em;color:var(--fg)}
.artikel h2{font-family:var(--display);font-size:var(--t-xl);line-height:1.15;margin:1.7em 0 .5em;color:var(--fg)}
.artikel h3{font-family:var(--display);font-size:var(--t-l);margin:1.3em 0 .4em;color:var(--fg)}
.artikel p,.artikel li{color:var(--fg-2);line-height:1.75;font-size:var(--t-base)}
.artikel strong,.artikel b{color:var(--fg)}
.artikel a{color:var(--cyan-2);text-decoration:underline;text-underline-offset:3px}
.artikel ul,.artikel ol{padding-left:1.3em;margin:0 0 1.2em}
.artikel li{margin:.25em 0}
.artikel table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:var(--t-s);display:block;overflow-x:auto}
.artikel th,.artikel td{border-bottom:1px solid var(--line-2);padding:10px 12px;text-align:left;color:var(--fg-2);vertical-align:top}
.artikel th{color:var(--fg);background:var(--bg-2)}
.artikel figure{margin:24px 0!important;border-radius:var(--r)!important;box-shadow:none!important;border:1px solid var(--line);background:var(--bg-2)}
.artikel figure img{width:100%;height:auto;display:block}
.artikel figcaption{color:var(--fg-3)!important;padding:8px 12px 10px!important;font-size:var(--t-xs)!important}
.artikel .breadcrumbs,.artikel .breadcrumb{font-size:var(--t-xs);color:var(--fg-3);margin-bottom:12px}
.artikel .breadcrumbs a,.artikel .breadcrumb a{color:var(--fg-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.artikel figure img{aspect-ratio:16/10;object-fit:cover}
/* 320 px: lange Knopftexte und Kennzeilen dürfen umbrechen */
.eyebrow{white-space:normal}
.btn{white-space:normal;text-align:center}
@media (max-width:420px){.kva-box{padding:20px 16px}.kva-box .big{font-size:1.6rem}}
.artikel nav ol,.artikel nav ul,.artikel .breadcrumb ol,.artikel .breadcrumb ul,.artikel>ol:first-child,.artikel>ul:first-child{display:flex;flex-wrap:wrap;gap:6px 10px;list-style:none;padding:0;margin:0 0 12px;font-size:var(--t-xs)}
.artikel nav li,.artikel .breadcrumb li,.artikel>ol:first-child li,.artikel>ul:first-child li{margin:0;font-size:var(--t-xs);color:var(--fg-3)}
.artikel nav li+li::before,.artikel .breadcrumb li+li::before,.artikel>ol:first-child li+li::before,.artikel>ul:first-child li+li::before{content:"/";margin-right:10px;color:var(--fg-3)}
.artikel nav a,.artikel .breadcrumbs a,.artikel .breadcrumb a,.artikel>ol:first-child a,.artikel>ul:first-child a{display:inline-block;padding:6px 0;min-height:24px}
.artikel .article-meta{color:var(--fg-3);font-size:var(--t-xs);margin-bottom:14px}
.artikel .lauf-eeat{font-size:var(--t-xs)!important;color:var(--fg-3)!important}
.artikel .lauf-eeat a{color:var(--fg-3)!important}
.artikel [style*="color:#"]:not(.btn):not(a.btn-primary),.artikel [style*="color: #"]:not(.btn),.landing [style*="color:#"]:not(.btn),.landing [style*="color: #"]:not(.btn){color:var(--fg-2)!important}
/* alte Inline-Links in Knopffarbe: auf Dunkel als Akzent lesbar machen */
.artikel [style*="color:var(--primary)"],.landing [style*="color:var(--primary)"]{color:var(--cyan-2)!important}
.artikel img,.landing img{max-width:100%;height:auto}
/* schmale Handys: lange Domainnamen im Logo dürfen das Menü nicht verdrängen */
@media (max-width:400px){.logo small{display:none}.logo{min-width:0;flex:1 1 auto}.logo .mark{flex:0 0 auto}
  .logo>span:last-child{font-size:.86em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.nav-burger{flex:0 0 auto}}
.artikel [style*="background:#f"],.artikel [style*="background: #f"],.artikel [style*="background:#e"]{background:var(--bg-2)!important;border-color:var(--line-2)!important}
.artikel .card,.artikel [class*="-card"]{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);box-shadow:none}
.artikel a[class*="-card"]{display:block;padding:18px 20px;text-decoration:none;color:var(--fg)}
.artikel a[class*="-card"]:hover{border-color:var(--cyan)}
.artikel [class*="-grid"]{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:14px 0 28px}
.artikel a.btn-primary:not(.btn){display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:var(--r);background:var(--red);color:#fff;text-decoration:none;font-weight:700}
.artikel .article-related{border-top:1px solid var(--line);margin-top:36px;padding-top:18px}
.artikel .faq-block{margin-top:40px}
.cta-oben{background:var(--red-soft);border:1px solid rgba(255,106,51,.35);border-radius:var(--r);padding:12px 16px;margin:16px 0 20px}
.cta-oben a{color:var(--fg)!important;font-weight:700;text-decoration:none!important;display:inline-flex;align-items:center;gap:6px}
.cta-oben svg,.cta-mitte svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.cta-mitte{border:1px solid var(--line-2);border-left:4px solid var(--red);background:var(--bg-2);border-radius:var(--r);padding:20px 22px;margin:30px 0}
.cta-mitte b{font-family:var(--display);font-size:var(--t-l);color:var(--fg);display:block;margin-bottom:4px}
.cta-mitte p{margin:0 0 14px}
.cta-mitte .btn{color:#fff!important;text-decoration:none!important}
/* ---------- Landingpages (alte Bausteine hero/strip/use/steps) ---------- */
.landing .hero{min-height:auto!important;display:block;padding:64px 0 48px;overflow:visible}
.landing .hero>.wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;padding-top:0;padding-bottom:0}
.landing .hero p{color:var(--fg-2);font-size:var(--t-l);line-height:1.6}
.landing .hero h1 em{color:var(--cyan-2);font-style:normal}
.landing .hero-art{position:relative}
.landing .hero-art img{width:100%;height:auto;display:block;border-radius:var(--r);border:1px solid var(--line)}
.landing .hero-badge{position:absolute;left:-18px;bottom:-18px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r);padding:12px 16px;display:flex;gap:10px;align-items:center}
.landing .hero-badge b{display:block;color:var(--fg)}.landing .hero-badge span{color:var(--fg-3);font-size:var(--t-xs)}
.landing .hero-badge .dot svg{width:20px;height:20px;stroke:var(--ok);fill:none;stroke-width:2}
.landing .strip{border-block:1px solid var(--line);background:var(--bg-2)}
.landing .strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:22px 20px}
.landing .stat .n{font-family:var(--display);font-weight:700;color:var(--fg);font-size:var(--t-l)}
.landing .stat .l{color:var(--fg-3);font-size:var(--t-xs)}
.landing .use-grid,.landing .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.landing .steps{grid-template-columns:repeat(4,1fr)}
.landing .use,.landing .step{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.landing .use h3,.landing .step h3{font-family:var(--display);color:var(--fg);margin:0 0 6px}
.landing .use p,.landing .step p{color:var(--fg-2);margin:0}
.landing .step .num{width:34px;height:34px;border-radius:50%;border:1px solid var(--cyan);color:var(--cyan);display:grid;place-items:center;font-family:var(--display);margin-bottom:10px}
.landing .ins-grid{display:flex;flex-wrap:wrap;gap:10px}
.landing .ins{border:1px solid var(--line-2);background:var(--bg-2);border-radius:var(--r);padding:9px 16px;color:var(--fg);font-family:var(--display)}
.landing .bg-white{background:var(--bg-2)}
@media (max-width:860px){.landing .hero>.wrap{grid-template-columns:1fr}.landing .strip .wrap{grid-template-columns:1fr 1fr}.landing .use-grid,.landing .steps{grid-template-columns:1fr}.landing .hero-badge{left:10px;bottom:-14px}}

/* 05.10.2026: Leuchtschatten und Akzente in der Themenfarbe der Domain statt fest im Kamera-Rot (Stefan: blauer Knopf mit rotem Schimmer beißt sich) */
.btn-primary{box-shadow:0 10px 30px -12px rgba(0,0,0,.55);box-shadow:0 10px 30px -12px color-mix(in srgb,var(--red) 80%,transparent)}
.logo .mark::after{box-shadow:0 0 12px color-mix(in srgb,var(--red) 80%,transparent)}
.hero-sub::before{background:radial-gradient(800px 420px at 90% -10%,var(--cyan-soft),transparent 60%),radial-gradient(600px 300px at 0% 110%,color-mix(in srgb,var(--red) 12%,transparent),transparent 60%)}
.card.feat{background:linear-gradient(160deg,color-mix(in srgb,var(--red) 9%,var(--bg-2)),var(--bg-2));border-color:color-mix(in srgb,var(--red) 40%,transparent)}
.badge.red{border-color:color-mix(in srgb,var(--red) 30%,transparent)}