/* DrillUp – Gestaltung der neuen Seiten (Kopfleiste, Startseite, Bibliothek, Detail, Preise, Konto) */
@font-face { font-family: "Hanken Grotesk"; font-weight: 400 700; font-display: swap; src: url(fonts/hanken-grotesk.woff2) format("woff2"); }

:root {
  --grund: #000; --flaeche: #0c0c0b; --flaeche-2: #161615; --linie: #242422; --linie-hell: #3a3a37;
  --text: #f5f4f0; --leise: #a5a39c; --gold: #f2be22; --glut: #f24522; --gruen: #2fbf71;
  --verlauf: linear-gradient(90deg, #f2be22, #f24522);
  --schrift: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --titel: Kanit, "Hanken Grotesk", system-ui, sans-serif;
  --breit: 1240px; --rand: clamp(16px, 2.8vw, 48px); --kopf: 64px; --rund: 14px;
}

/* ---------- Grundlage (nur neue Seiten) ---------- */
html:has(body.neu) { background: #000; scrollbar-color: #3a3a37 #0a0a0a; }
body.neu { position: relative; margin: 0; background: transparent; color: var(--text); font: 16px/1.55 var(--schrift); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.neu *, .kopf *, .fuss * { box-sizing: border-box; }
body.neu main { display: block; min-height: 60vh; }
body.neu a { color: inherit; }
body.neu h1, body.neu h2, body.neu h3 { font-family: var(--titel); margin: 0; line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; }
body.neu p { margin: 0; text-wrap: pretty; }
body.neu img { max-width: 100%; }
body.neu :focus-visible, .kopf :focus-visible, .fuss :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.sprung { position: absolute; left: -999px; top: 8px; z-index: 300; background: var(--gold); color: #111; padding: 10px 14px; border-radius: 8px; font: 600 14px var(--schrift); }
.sprung:focus { left: 8px; }
.mitte { text-align: center; }
.klein { font-size: 13.5px; color: var(--leise); }
.klein a { color: var(--text); }
.auge { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px/1 var(--schrift); letter-spacing: .09em; text-transform: uppercase; color: var(--leise); }
.punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 0 4px rgba(47,191,113,.16); }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 11px;
  font: 600 15px/1 var(--schrift); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .15s ease, filter .15s ease, background-color .15s ease, border-color .15s ease; }
.knopf:active { transform: scale(.975); }
.knopf.gold { background: var(--verlauf); color: #17110a; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 22px rgba(242,122,34,.22); }
.knopf.gold:hover { filter: brightness(1.07); }
.knopf.glas { background: rgba(255,255,255,.06); border-color: var(--linie-hell); color: var(--text); }
.knopf.glas:hover { background: rgba(255,255,255,.11); }
.knopf.dunkel { background: var(--flaeche-2); border-color: var(--linie-hell); color: var(--text); }
.knopf.dunkel:hover { border-color: #55554f; }
.knopf.hell { background: var(--text); color: #111; }
.knopf.hell:hover { filter: brightness(.93); }
.knopf.gross { min-height: 52px; padding: 0 26px; font-size: 16px; border-radius: 13px; }
.knopf.klein { min-height: 38px; padding: 0 15px; font-size: 14px; border-radius: 10px; color: #17110a; }
.knopf.aus { opacity: .55; cursor: default; pointer-events: none; }

/* ---------- Kopfleiste ---------- */
.kopf { position: sticky; top: 0; z-index: 200; font-family: var(--schrift); background: transparent; border-bottom: 1px solid transparent; transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease; }
.kopf.gerollt, .kopf.offen, body.alt .kopf { background: rgba(14,13,11,.55); -webkit-backdrop-filter: saturate(1.6) blur(22px); backdrop-filter: saturate(1.6) blur(22px); border-bottom-color: rgba(255,255,255,.09); }
.kopf-in { max-width: none; margin: 0 auto; padding: 0 var(--rand); height: var(--kopf); display: flex; align-items: center; gap: 28px; }
.kopf .logo { display: flex; align-items: center; flex: none; }
.kopf .logo img { height: 26px; width: auto; display: block; }
.kopf .haupt { display: flex; gap: 4px; margin-right: auto; }
.kopf .haupt a { padding: 9px 13px; border-radius: 9px; font: 500 15px/1 var(--schrift); color: #cfcdc6; text-decoration: none; transition: color .15s, background-color .15s; }
.kopf .haupt a:hover { color: #fff; background: rgba(255,255,255,.07); }
.kopf .haupt a[aria-current] { color: #fff; background: rgba(255,255,255,.09); }
.kopf-rechts { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.kopf .sprache { font: 600 13px/1 var(--schrift); color: #cfcdc6; text-decoration: none; padding: 10px 8px; border-radius: 8px; }
.kopf .sprache:hover { color: #fff; }
.kopf .rest { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 11px; border: 1px solid var(--linie-hell); border-radius: 10px; font: 600 14px/1 var(--schrift); color: var(--gold); }
.kopf .rest svg, .kopf .konto svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kopf .konto { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--linie-hell); border-radius: 50%; background: rgba(255,255,255,.05); color: #fff; cursor: pointer; }
.kopf .konto:hover { background: rgba(255,255,255,.12); }
.menue-knopf { display: none; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.menue-knopf span { position: absolute; left: 10px; right: 10px; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s ease, top .2s ease; }
.menue-knopf span:first-child { top: 15px; } .menue-knopf span:last-child { top: 23px; }
.menue-knopf[aria-expanded="true"] span:first-child { top: 19px; transform: rotate(45deg); }
.menue-knopf[aria-expanded="true"] span:last-child { top: 19px; transform: rotate(-45deg); }
.kopf .mobil { display: grid; gap: 4px; padding: 10px var(--rand) 20px; border-top: 1px solid rgba(255,255,255,.07); }
.kopf .mobil[hidden] { display: none; }
.kopf .mobil a:not(.knopf) { padding: 14px 4px; font: 600 18px/1 var(--schrift); color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.07); }
.kopf .mobil .knopf { margin-top: 12px; min-height: 50px; }
@media (max-width: 860px) {
  .kopf .haupt, .kopf .nur-breit { display: none; }
  .menue-knopf { display: block; }
  .kopf-in { gap: 12px; }
}
@media (min-width: 861px) { .kopf .mobil { display: none !important; } }

/* ---------- Übernommene Webflow-Seiten: alte Leisten ausblenden ---------- */
body.alt .nav-header, body.alt .content.sidebar, body.alt .footer-container, body.alt .footer-divider, body.alt .footer-copyright-center { display: none !important; }
body.alt .main-content { min-width: 0; max-width: 100%; }

/* ---------- Held ---------- */
.held { position: relative; max-width: 980px; margin: 0 auto; padding: clamp(64px, 10vw, 136px) var(--rand) clamp(40px, 6vw, 72px); text-align: center; }
.held h1 { margin-top: 0; font-size: clamp(44px, 9.2vw, 104px); font-weight: 800; text-transform: uppercase; line-height: .94; letter-spacing: -.02em; }
.held h1 em { font-style: normal; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.held-text { max-width: 600px; margin: 22px auto 0 !important; font-size: clamp(16px, 2.1vw, 19px); color: #cfcdc6; }
.held-text b { color: var(--gold); }
.held-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.held-zahl { margin-top: 26px !important; font-size: 13.5px; color: var(--leise); }

/* ---------- Bibliothek ---------- */
.bib { max-width: none; margin: 0 auto; padding: clamp(28px, 4vw, 56px) var(--rand) clamp(28px, 4vw, 56px); }
.bib-kopf { max-width: 820px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--rand) 28px; text-align: center; }
.bib-kopf h1 { margin-top: 14px; font-size: clamp(40px, 7.4vw, 80px); font-weight: 800; text-transform: uppercase; }
.bib-titel { font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; margin-bottom: 22px !important; }
.umschalter { display: flex; width: fit-content; margin: 0 auto 28px; padding: 5px; gap: 4px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; }
.umschalter button { min-height: 44px; padding: 0 22px; border: 0; border-radius: 10px; background: none; color: var(--leise); font: 600 15px/1 var(--schrift); cursor: pointer; transition: color .15s, background-color .15s; }
.umschalter button:hover { color: #fff; }
.umschalter button[aria-selected="true"] { background: var(--text); color: #111; }
.filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.filter button { min-height: 38px; padding: 0 15px; border: 1px solid var(--linie-hell); border-radius: 999px; background: none; color: #d8d6cf; font: 500 14px/1 var(--schrift); cursor: pointer; transition: all .15s; }
.filter button:hover { border-color: #6a6a63; color: #fff; }
.filter button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #111; }
.raster { display: flex; align-items: flex-start; gap: 16px; }
.raster:not(.fertig) { flex-wrap: wrap; }
.raster:not(.fertig) > .karte { width: calc(50% - 8px); }
.spalte { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.karte { position: relative; display: block; text-decoration: none; color: var(--text); }
.karte[hidden] { display: none; }
.vid { position: relative; width: 100%; overflow: hidden; border-radius: var(--rund); background: #0d0d0c; line-height: 0; isolation: isolate; }
.vid::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255,255,255,.09); pointer-events: none; }
.vid > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid video { position: absolute; max-width: none; object-fit: cover; pointer-events: none; opacity: 0; transition: opacity .35s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.vid video.bereit { opacity: 1; }
.karte:hover .vid video { transform: scale(1.035); }
.karte-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px 0; }
.karte-name { font: 600 15px/1.25 var(--schrift); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.karte-art { flex: none; font: 500 12px/1 var(--schrift); color: var(--leise); padding: 5px 9px; border: 1px solid var(--linie); border-radius: 999px; text-transform: capitalize; }
.marke { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 6px 10px; border-radius: 999px; font: 700 11.5px/1 var(--schrift); letter-spacing: .02em; background: rgba(10,10,10,.72); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.16); }
.marke.gratis { background: var(--gruen); border-color: transparent; color: #05210f; }
.marke.hell { background: var(--text); color: #111; border-color: transparent; }
.bib > .mitte { margin-top: 34px; }
.leer, .leer-filter { max-width: 520px; margin: 30px auto; padding: 44px 24px; text-align: center; border: 1px dashed var(--linie-hell); border-radius: 18px; color: var(--leise); }
.leer h2 { font-size: 26px; font-weight: 700; color: var(--text); margin-bottom: 10px !important; }
.leer .knopf { margin-top: 20px; }
@media (max-width: 620px) { .raster { gap: 10px; } .spalte { gap: 16px; } .karte-art { display: none; } .karte-name { font-size: 14px; } .umschalter button { padding: 0 16px; } }

/* ---------- Preise ---------- */
.preise.seite { padding-top: clamp(40px, 6vw, 72px); text-align: center; }
.preise.seite h1 { margin-top: 14px; }
.preise .unter { max-width: 520px; margin: 16px auto 0 !important; text-align: center; color: #c6c4bd; font-size: 17px; }
.plaene { display: grid; grid-template-columns: repeat(2, minmax(0, 400px)); justify-content: center; gap: 16px; margin: 40px auto 22px; text-align: left; }
.plaene.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1160px; }
.plan { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: 22px; background: rgba(17,17,16,.78); border: 1px solid var(--linie); }
.plan.beliebt { background: linear-gradient(170deg, #1f1709, #131110 55%); border-color: #8a6a17; box-shadow: 0 0 0 1px rgba(242,190,34,.18), 0 24px 60px -30px rgba(242,150,34,.5); }
.plan-marke { position: absolute; top: -12px; left: 28px; padding: 6px 12px; border-radius: 999px; background: var(--verlauf); color: #17110a; font: 700 12px/1 var(--schrift); }
.plan h3 { font-size: 22px; font-weight: 700; }
.plan-preis { display: flex; align-items: baseline; gap: 6px; margin-top: 16px !important; }
.plan-preis b { font: 800 clamp(44px, 5vw, 56px)/1 var(--titel); letter-spacing: -.02em; }
.plan-preis span { color: var(--leise); }
.plan-sub { margin-top: 8px !important; font-size: 14px; color: var(--leise); min-height: 22px; }
.plan ul { list-style: none; margin: 22px 0 26px; padding: 22px 0 0; border-top: 1px solid var(--linie); display: grid; gap: 12px; }
.plan li { position: relative; padding-left: 28px; color: #dedcd5; }
.plan li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 14px; height: 8px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); }
.plan li b { color: #fff; }
.plan .knopf { margin-top: auto; width: 100%; min-height: 50px; }
.plan-hinweis { max-width: 620px; margin: 0 auto !important; text-align: center; font-size: 14.5px; color: var(--leise); }
@media (max-width: 980px) { .plaene, .plaene.drei { grid-template-columns: minmax(0, 460px); } .plan.beliebt { order: -1; } }

/* ---------- Fragen ---------- */
.fragen { max-width: 760px; margin: 34px auto 0; border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 2px; font: 600 17px/1.35 var(--schrift); cursor: pointer; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; flex: none; font: 400 26px/1 var(--schrift); color: var(--gold); transition: transform .2s ease; }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen details p { padding: 0 2px 22px; color: #c6c4bd; max-width: 660px; }

/* ---------- Detail ---------- */
.pfad { max-width: var(--breit); margin: 0 auto; padding: 22px var(--rand) 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--leise); }
.pfad a { text-decoration: none; } .pfad a:hover { color: #fff; } .pfad b { color: var(--text); font-weight: 600; }
.detail { max-width: var(--breit); margin: 0 auto; padding: 24px var(--rand) clamp(48px, 7vw, 88px); display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.detail.quer { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.detail-video .vid { border-radius: 20px; }
.detail-info h1 { margin-top: 14px; font-size: clamp(32px, 4.6vw, 56px); font-weight: 800; text-transform: uppercase; overflow-wrap: anywhere; }
.fakten { display: flex; flex-wrap: wrap; gap: 1px; margin: 26px 0 0; border: 1px solid var(--linie); border-radius: 14px; overflow: hidden; background: var(--linie); }
.fakten div { flex: 1 1 130px; background: var(--flaeche); padding: 14px 16px; }
.fakten dt { font-size: 12.5px; color: var(--leise); } .fakten dd { margin: 4px 0 0; font-weight: 600; text-transform: capitalize; }
.detail-aktion { margin-top: 26px; display: grid; gap: 12px; justify-items: start; }
.detail-aktion .knopf { min-width: 240px; }
.prompt { margin-top: 22px; border: 1px solid var(--linie); border-radius: 14px; background: var(--flaeche); overflow: hidden; }
.prompt-kopf { display: flex; justify-content: space-between; align-items: center; min-height: 46px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--linie); font: 600 12.5px/1 var(--schrift); letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.kopieren { min-height: 34px; padding: 0 13px; border: 1px solid var(--linie-hell); border-radius: 9px; background: none; color: #fff; font: 600 13px/1 var(--schrift); cursor: pointer; }
.kopieren:hover { background: rgba(255,255,255,.08); }
.prompt-text { padding: 16px; font: 14.5px/1.65 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #e4e2da; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow-y: auto; }
.prompt-zu { color: #4b4b46; letter-spacing: 1px; user-select: none; filter: blur(1.5px); }
@media (max-width: 820px) { .detail, .detail.quer { grid-template-columns: 1fr; } .detail-video { max-width: 440px; width: 100%; margin: 0 auto; } .detail.quer .detail-video { max-width: none; } .detail-aktion .knopf { width: 100%; } }

/* ---------- Konto ---------- */
.konto-seite { max-width: 980px; margin: 0 auto; padding: clamp(36px, 5vw, 64px) var(--rand) 80px; }
.konto-seite h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 800; text-transform: uppercase; margin-bottom: 26px !important; }
.konto-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kasten { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; border: 1px solid var(--linie); border-radius: 18px; background: var(--flaeche); margin: 0; }
.kasten h2 { font-size: 20px; font-weight: 700; }
.plan-kasten { background: linear-gradient(170deg, #1f1709, #131110 60%); border-color: #5c4712; }
.plan-name { font: 800 30px/1.05 var(--titel); text-transform: uppercase; }
.kasten label { display: grid; gap: 6px; width: 100%; font-size: 13px; font-weight: 600; color: #d8d6cf; }
.kasten input { width: 100%; height: 46px; padding: 0 13px; border: 1px solid var(--linie-hell); border-radius: 10px; background: #0c0c0b; color: #fff; font: 16px var(--schrift); }
.kasten input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.reihe { display: flex; flex-wrap: wrap; gap: 10px; }
.liste { list-style: none; margin: 0; padding: 0; width: 100%; }
.liste li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linie); }
.liste li:last-child { border: 0; } .liste a { text-decoration: none; font-weight: 500; } .liste a:hover { color: var(--gold); } .liste span { color: var(--leise); font-size: 13.5px; }
@media (max-width: 760px) { .konto-raster, .zwei { grid-template-columns: 1fr; } }

/* ---------- Danke ---------- */
.danke { min-height: 62vh; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 40px var(--rand); }
.danke h1 { font-size: 34px; font-weight: 800; text-transform: uppercase; } .danke p { color: var(--leise); }
.lade { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--linie-hell); border-top-color: var(--gold); animation: dreh .8s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }

/* ---------- Fußleiste ---------- */
.fuss { font-family: var(--schrift); background: rgba(5,5,5,.82); color: var(--text); border-top: 1px solid var(--linie); margin-top: 40px; }
.fuss-in { max-width: none; margin: 0 auto; padding: 52px var(--rand) 34px; display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 32px; }
.fuss-marke img { height: 26px; width: auto; }
.fuss-marke p { margin: 14px 0 0; max-width: 280px; color: var(--leise); font-size: 14.5px; line-height: 1.5; }
.fuss .sozial { display: flex; gap: 16px; margin-top: 16px; }
.fuss nav { display: grid; gap: 11px; align-content: start; }
.fuss h2 { margin: 0 0 4px; font: 600 12.5px/1 var(--schrift); letter-spacing: .09em; text-transform: uppercase; color: var(--leise); }
.fuss a { color: #dedcd5; text-decoration: none; font-size: 14.5px; line-height: 1.3; } .fuss a:hover { color: var(--gold); }
.fuss-unten { max-width: none; margin: 0 auto; padding: 18px var(--rand) 28px; border-top: 1px solid var(--linie); color: var(--leise); font-size: 13.5px; }
@media (max-width: 760px) { .fuss-in { grid-template-columns: 1fr 1fr; } .fuss-marke { grid-column: 1 / -1; } }

/* ---------- Anmelde-Fenster ---------- */
html.du-offen { overflow: hidden; }
#du-fenster { position: fixed; inset: 0; z-index: 2147483000; background: rgba(0,0,0,.66); display: grid; place-items: center; padding: 16px; overflow-y: auto; font-family: var(--schrift); animation: du-ein .16s ease-out; }
@keyframes du-ein { from { opacity: 0; } }
#du-fenster * { box-sizing: border-box; }
#du-fenster .du-karte { position: relative; width: 100%; max-width: 372px; background: #fff; color: #0a0a0a; border-radius: 16px; padding: 36px 28px 26px; box-shadow: 0 24px 70px rgba(0,0,0,.5); text-align: left; line-height: 1.35; animation: du-hoch .22s cubic-bezier(.2,.8,.2,1); }
@keyframes du-hoch { from { transform: translateY(10px) scale(.985); opacity: 0; } }
#du-fenster .du-x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; background: none; font-size: 24px; line-height: 1; color: #111; cursor: pointer; border-radius: 10px; }
#du-fenster .du-x:hover { background: #f1f1f1; }
#du-fenster .du-logo { width: 44px; height: 44px; margin: 0 auto 12px; background: #000; border-radius: 10px; display: grid; place-items: center; }
#du-fenster .du-logo img { width: 30px; height: auto; }
#du-fenster h2 { margin: 0 0 22px; text-align: center; font: 700 22px/1.2 var(--schrift); color: #0a0a0a; letter-spacing: -.2px; text-transform: none; }
#du-fenster .du-text { margin: -10px 0 18px; text-align: center; font-size: 14px; color: #444; }
#du-fenster .du-f { display: block; margin: 0 0 16px; }
#du-fenster .du-f > span { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 700; margin-bottom: 7px; color: #0a0a0a; }
#du-fenster .du-f > span a { font-weight: 500; color: #0a0a0a; text-decoration: none; } #du-fenster .du-f > span a:hover { text-decoration: underline; }
#du-fenster input { display: block; width: 100%; height: 52px; padding: 0 15px; border: 1px solid #dcdcdc; border-radius: 10px; font: 16px var(--schrift); color: #0a0a0a; background: #fff; margin: 0; }
#du-fenster input:focus { outline: 2px solid #f2be22; outline-offset: 1px; border-color: #f2be22; }
#du-fenster .du-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#du-fenster .du-knopf { width: 100%; height: 52px; border: 0; border-radius: 10px; background: linear-gradient(100deg, #f2be22, #f28a22); color: #17110a; font: 700 15px var(--schrift); cursor: pointer; margin-top: 4px; transition: filter .15s, transform .1s; }
#du-fenster .du-knopf:hover { filter: brightness(1.05); } #du-fenster .du-knopf:active { transform: scale(.985); } #du-fenster .du-knopf:disabled { opacity: .6; cursor: default; }
#du-fenster .du-fehler { font-size: 13.5px; color: #c81e1e; margin: -4px 0 10px; } #du-fenster .du-fehler:empty { display: none; }
#du-fenster .du-fuss { margin-top: 16px; text-align: center; font-size: 13.5px; color: #444; }
#du-fenster .du-fuss a { color: #0a0a0a; font-weight: 700; text-decoration: none; } #du-fenster .du-fuss a:hover { text-decoration: underline; }
#du-hinweis { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px); z-index: 2147483001; max-width: min(92vw, 440px); padding: 13px 18px; border-radius: 12px; background: #1c1c1b; color: #fff; border: 1px solid #3a3a37; font: 600 14.5px/1.35 var(--schrift); text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
#du-hinweis.zeigen { opacity: 1; transform: translate(-50%, 0); } #du-hinweis.gut { border-color: var(--gruen); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ================= Zweiter Entwurf (13.10.2026): Himmel, Glas, volle Breite ================= */
body.neu ::selection { background: var(--gold); color: #17110a; }
body.neu input, body.neu textarea { caret-color: var(--gold); }
.knopf svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Himmel: nur oben auf der Seite – oranges Licht aus beiden Ecken wie auf der alten Seite, Sterne darin, nach unten reines Schwarz */
.himmel { position: absolute; top: 0; left: 0; right: 0; height: clamp(620px, 108vh, 1150px); z-index: -1; pointer-events: none; overflow: hidden; background:
  radial-gradient(44% 62% at 0% 0%, rgba(242,160,34,.66), rgba(242,110,34,.22) 40%, transparent 70%),
  radial-gradient(44% 62% at 100% 0%, rgba(242,160,34,.66), rgba(242,96,34,.22) 40%, transparent 70%);
  -webkit-mask-image: linear-gradient(#000 52%, transparent); mask-image: linear-gradient(#000 52%, transparent); }
#sterne { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Abschnitts-Kopf über den Rastern */
.abschnitt-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(18px, 2.4vw, 30px); }
.abschnitt-kopf h2 { font-size: clamp(34px, 5.4vw, 72px); font-weight: 800; text-transform: uppercase; line-height: .96; }
.abschnitt-kopf p { margin-top: 10px !important; color: #c6c4bd; font-size: clamp(15px, 1.5vw, 18px); max-width: 52ch; }
.abschnitt-kopf .knopf { flex: none; }
.raster { gap: clamp(10px, 1.2vw, 18px); }
.spalte { gap: clamp(18px, 2vw, 28px); }
.vid { background: #0c0b0a; box-shadow: 0 18px 40px -22px rgba(0,0,0,.9); }
.karte-fuss { padding: 11px 3px 0; }
.leer h3 { font-size: 26px; font-weight: 700; color: var(--text); margin-bottom: 10px !important; }

/* Video-Band unter dem Held */
.band { overflow: hidden; padding: 6px 0 clamp(28px, 4vw, 56px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.band-lauf { display: flex; gap: clamp(10px, 1.2vw, 18px); width: max-content; padding: 0 var(--rand); animation: band 46s linear infinite alternate; }
.band:hover .band-lauf { animation-play-state: paused; }
.band-teil { display: block; width: clamp(240px, 27vw, 480px); flex: none; }
.band-teil .vid { border-radius: clamp(12px, 1.2vw, 18px); }
@keyframes band { from { transform: translateX(0); } to { transform: translateX(calc(100vw - 100%)); } }

/* Zwei Wege: zwei Bühnen mit Schaubild */
.wege { max-width: 1320px; margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--rand); }
.wege > h2, .preise h2, .preise h1, .faq h2, .ablauf h2, .stimmen h2, .abschluss h2 { font-size: clamp(32px, 5vw, 60px); font-weight: 800; text-transform: uppercase; text-align: center; }
.wege-raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(28px, 4vw, 48px); }
.weg { display: flex; flex-direction: column; padding: clamp(14px, 1.6vw, 22px); padding-bottom: clamp(22px, 2.4vw, 30px); border-radius: 26px; background: rgba(17,17,16,.74); border: 1px solid var(--linie); text-decoration: none; transition: border-color .25s ease, transform .35s cubic-bezier(.16,1,.3,1); }
.weg:hover { border-color: #5b5a54; transform: translateY(-4px); }
.buehne { position: relative; height: clamp(230px, 24vw, 330px); border-radius: 16px; overflow: hidden; margin-bottom: clamp(18px, 2vw, 26px); border: 1px solid rgba(255,255,255,.07); }
.weg-prompt .buehne { background: radial-gradient(120% 90% at 0% 0%, #3a2a0c, #17120a 55%, #0d0c0a); }
.weg-ae .buehne { background: radial-gradient(120% 90% at 100% 0%, #3a160c, #170f0b 55%, #0d0b0a); }
.weg h3 { font-size: clamp(22px, 2.5vw, 32px); font-weight: 700; padding: 0 8px; }
.weg p { color: #c6c4bd; margin-top: 10px !important; padding: 0 8px; max-width: 54ch; }
.weg-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 0 8px; font-weight: 600; color: var(--gold); }
.weg-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.weg:hover .weg-link svg { transform: translateX(5px); }
.fenster-mock { position: absolute; left: 6%; top: 11%; width: 62%; border-radius: 12px; background: rgba(12,11,10,.92); border: 1px solid rgba(255,255,255,.13); box-shadow: 0 24px 50px -18px rgba(0,0,0,.85); }
.mock-leiste { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-bottom: 1px solid rgba(255,255,255,.09); }
.mock-leiste i { width: 9px; height: 9px; border-radius: 50%; background: #3d3b36; }
.mock-leiste span { margin-left: 8px; font: 500 11.5px/1 ui-monospace, "SF Mono", Menlo, monospace; color: #8f8d86; }
.mock-text { min-height: 96px; padding: 14px 14px 6px; font: 12.5px/1.6 ui-monospace, "SF Mono", Menlo, monospace; color: #e9e6dc; }
.schreibmarke { display: inline-block; width: 7px; height: 15px; margin-left: 2px; vertical-align: -2px; background: var(--gold); animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.mock-fuss { display: flex; justify-content: flex-end; padding: 8px 12px 12px; }
.mock-knopf { padding: 7px 13px; border-radius: 8px; background: var(--verlauf); color: #17110a; font: 700 11.5px/1 var(--schrift); }
.mock-ergebnis { position: absolute; right: 5%; bottom: 9%; width: 46%; border-radius: 12px; box-shadow: 0 26px 50px -14px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.14); transform: rotate(2.5deg); }
.mock-ergebnis .vid { border-radius: 12px; }
.zeitleiste { position: absolute; inset: 11% 6%; border-radius: 12px; background: rgba(12,11,10,.92); border: 1px solid rgba(255,255,255,.13); box-shadow: 0 24px 50px -18px rgba(0,0,0,.85); padding: 0 14px 12px 0; overflow: hidden; display: grid; grid-template-rows: 30px repeat(5, 1fr); }
.zl-kopf { display: flex; justify-content: space-between; align-items: center; margin-left: 88px; padding: 0 2px; border-bottom: 1px solid rgba(255,255,255,.09); font: 500 10.5px/1 ui-monospace, "SF Mono", Menlo, monospace; color: #8f8d86; }
.zl-spur { display: grid; grid-template-columns: 88px 1fr; align-items: center; border-bottom: 1px solid rgba(255,255,255,.05); }
.zl-spur > span { padding-left: 14px; font: 500 11.5px/1 var(--schrift); color: #b5b3ab; white-space: nowrap; }
.zl-spur > div { position: relative; height: 100%; }
.zl-spur i { position: absolute; top: 26%; bottom: 26%; border-radius: 5px; background: #f2be22; }
.zl-spur i.b { background: #f29a22; } .zl-spur i.c { background: #f26a22; } .zl-spur i.d { background: #8a6a3a; } .zl-spur i.e { background: #4a4238; }
.zl-spur i::before, .zl-spur i::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
.zl-spur i::before { left: 0; } .zl-spur i::after { left: 100%; }
.zl-zeiger { position: absolute; top: 0; bottom: 0; left: 88px; width: 2px; background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.7); animation: zeiger 6s cubic-bezier(.45,0,.55,1) infinite alternate; }
.zl-zeiger::before { content: ""; position: absolute; top: 0; left: -5px; border: 6px solid transparent; border-top: 9px solid #fff; }
@keyframes zeiger { to { left: calc(100% - 16px); } }
@media (max-width: 820px) { .wege-raster { grid-template-columns: 1fr; } .buehne { height: clamp(250px, 66vw, 330px); } .fenster-mock { width: 88%; top: 8%; } .mock-text { min-height: 0; padding-bottom: 12px; } .mock-fuss { display: none; } .mock-ergebnis { width: 54%; bottom: 7%; } }

/* Studio-Hinweis */
.studio { max-width: 1320px; margin-top: clamp(24px, 4vw, 56px); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.studio > div { flex: 1 1 420px; }
.studio h2 { font-size: clamp(26px, 3.6vw, 44px); font-weight: 800; text-transform: uppercase; margin-bottom: 12px !important; }
.studio p { color: #d9cdbd; max-width: 52ch; }
.studio { padding: clamp(26px, 4vw, 52px); margin-left: var(--rand); margin-right: var(--rand); border-radius: 26px; background: linear-gradient(120deg, rgba(58,42,12,.72), rgba(48,20,10,.72) 60%, rgba(40,14,10,.72)); border: 1px solid #5a3a18; }
@media (min-width: 1416px) { .studio { margin-left: auto; margin-right: auto; } }
.preise, .faq, .abschluss { max-width: 1320px; margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--rand); }
.abschluss { text-align: center; padding-top: clamp(24px, 4vw, 48px); } .abschluss .knopf { margin-top: 26px; }
.fragen details p { max-width: 68ch; }

/* ---------- Hire us ---------- */
.frei { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px !important; padding: 9px 15px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--linie-hell); font: 600 13.5px/1 var(--schrift); }
.marken { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 10px 26px; margin-top: clamp(34px, 5vw, 56px) !important; color: var(--leise); font-size: 14px; }
.marken b { font: 700 clamp(17px, 2vw, 22px)/1 var(--titel); color: #d8d6cf; letter-spacing: .01em; }
.arbeiten { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.2vw, 18px); }
.arbeit { margin: 0; } .arbeit figcaption { display: grid; gap: 4px; padding: 12px 3px 0; }
.arbeit b { font: 600 16px/1.25 var(--schrift); } .arbeit span { color: var(--leise); font-size: 14.5px; }
.ablauf, .stimmen, .gruender, .anfrage { max-width: 1320px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--rand); }
.ablauf ol { counter-reset: s; list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); }
.ablauf li { counter-increment: s; padding-top: 22px; border-top: 1px solid var(--linie-hell); }
.ablauf li::before { content: counter(s); display: block; font: 800 clamp(44px, 5vw, 64px)/1 var(--titel); color: var(--gold); margin-bottom: 14px; }
.ablauf h3 { font-size: clamp(20px, 2.1vw, 26px); font-weight: 700; margin-bottom: 10px !important; } .ablauf p { color: #c6c4bd; }
.stimmen-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(28px, 4vw, 48px); }
.stimmen blockquote { margin: 0; display: flex; flex-direction: column; gap: 22px; padding: clamp(22px, 2.4vw, 32px); border-radius: 22px; background: rgba(17,17,16,.74); border: 1px solid var(--linie); }
.stimmen blockquote p { font-size: clamp(16px, 1.45vw, 18.5px); line-height: 1.55; color: #ecebe4; }
.stimmen footer { margin-top: auto; display: grid; gap: 3px; } .stimmen footer b { font: 700 18px/1 var(--titel); } .stimmen footer span { color: var(--leise); font-size: 14px; }
.gruender { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.gruender h2 { font-size: clamp(30px, 4.2vw, 52px); font-weight: 800; text-transform: uppercase; }
.gruender dl { margin: 28px 0 0; display: grid; } .gruender dl div { padding: 14px 0; border-top: 1px solid var(--linie); }
.gruender dt { font-size: 13px; color: var(--leise); } .gruender dd { margin: 4px 0 0; font-weight: 600; }
.gruender-text { display: grid; gap: 18px; font-size: clamp(16px, 1.4vw, 18.5px); line-height: 1.65; color: #dedcd5; max-width: 68ch; }
.unterschrift { font: 700 22px/1 var(--titel); color: #fff; }
.anfrage { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.anfrage h2 { font-size: clamp(34px, 5vw, 64px); font-weight: 800; text-transform: uppercase; } .anfrage-kopf p { margin-top: 16px !important; color: #c6c4bd; font-size: 17px; max-width: 40ch; }
.anfrage-form { display: grid; gap: 14px; padding: clamp(20px, 2.6vw, 34px); border-radius: 24px; background: rgba(17,17,16,.8); border: 1px solid var(--linie); }
.anfrage-form label { display: grid; gap: 7px; font-size: 13.5px; font-weight: 600; color: #d8d6cf; }
.anfrage-form input, .anfrage-form select, .anfrage-form textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--linie-hell); border-radius: 12px; background: #0b0a09; color: #fff; font: 16px var(--schrift); }
.anfrage-form textarea { resize: vertical; line-height: 1.5; }
.anfrage-form :is(input, select, textarea):focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; }
.anfrage-form ::placeholder { color: #8f8d86; }
.anfrage-form .knopf { justify-self: start; margin-top: 6px; }
.falle { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.w-form-done { display: none; padding: clamp(24px, 3vw, 40px); border-radius: 24px; background: rgba(17,17,16,.8); border: 1px solid var(--gruen); }
.w-form-done h3 { font-size: 26px; font-weight: 700; margin-bottom: 8px !important; } .w-form-done p { color: #c6c4bd; }
@media (max-width: 900px) { .arbeiten { grid-template-columns: 1fr 1fr; } .ablauf ol, .stimmen-raster, .gruender, .anfrage { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .band-lauf, .zl-zeiger, .schreibmarke { animation: none; } }

/* ================= Dritter Entwurf (13.10.2026): reines Schwarz, Startseite nur AI Prompts, bündige Produktseite, Hire us ================= */
.fuss { background: #000; }
.knopf.gold { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 26px -6px rgba(242,96,34,.5); }
.held { max-width: 1180px; }
.held h1 { font-size: clamp(38px, 7.6vw, 96px); }
.held .auge { margin-bottom: 22px !important; padding: 9px 15px; border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.16); color: #e9e6dc; letter-spacing: .04em; text-transform: none; font-size: 13.5px; }
.held-text { max-width: 640px; }

/* Platzhalter: graue Fläche ohne Video */
.vid.platz { background: #2b2b2b; box-shadow: none; }
.vid.platz::after { border-color: rgba(255,255,255,.06); }

/* Schaufenster auf der Startseite: hohes Raster, läuft unten gerade ins Schwarz aus, darunter der Knopf */
.schau { padding-top: clamp(8px, 2vw, 24px); padding-bottom: 0; }
.schau-fenster { max-height: clamp(1500px, 250vh, 2700px); overflow: hidden; -webkit-mask-image: linear-gradient(#000 calc(100% - 340px), transparent calc(100% - 30px)); mask-image: linear-gradient(#000 calc(100% - 340px), transparent calc(100% - 30px)); }
.schau-fuss { position: relative; z-index: 2; display: flex; justify-content: center; margin-top: -96px; padding-bottom: clamp(24px, 4vw, 48px); }
.schau-fuss .knopf { min-height: 58px; padding: 0 30px; font-size: 17px; }

/* So funktioniert es */
.so { max-width: 1320px; margin: 0 auto; padding: clamp(64px, 9vw, 128px) var(--rand) clamp(32px, 5vw, 64px); }
.so-kopf { max-width: 780px; margin: 0 auto; text-align: center; }
.so-kopf h2 { font-size: clamp(32px, 5vw, 60px); font-weight: 800; text-transform: uppercase; }
.so-kopf p, .werk-kopf p { margin-top: 16px !important; color: #c6c4bd; font-size: 17px; }
.so-raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(28px, 4vw, 52px); align-items: stretch; }
.so-buehne { height: auto; min-height: 400px; margin: 0; border-radius: 26px; background: radial-gradient(110% 90% at 0% 0%, #4a2408, #170d07 52%, #0a0807); border-color: var(--linie); }
.so-schritte { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: clamp(12px, 1.4vw, 20px); }
.so-schritte li { counter-increment: s; position: relative; display: flex; flex-direction: column; justify-content: center; padding: 24px 26px 24px 96px; border-radius: 22px; background: var(--flaeche); border: 1px solid var(--linie); }
.so-schritte li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 26px; top: 50%; transform: translateY(-50%); font: 800 38px/1 var(--titel); color: var(--gold); }
.so-schritte h3 { font-size: clamp(20px, 2vw, 25px); font-weight: 700; }
.so-schritte p { margin-top: 8px !important; color: #c6c4bd; }
@media (max-width: 900px) { .so-raster { grid-template-columns: 1fr; } .so-buehne { min-height: clamp(260px, 68vw, 340px); } .so-schritte li { padding-left: 78px; } .so-schritte li::before { left: 20px; font-size: 32px; } }

/* Pläne */
.plan { background: var(--flaeche); }
.plan.beliebt { background: linear-gradient(165deg, #2e1707, #120b07 58%); border-color: #b0561c; box-shadow: 0 0 0 1px rgba(242,130,34,.22), 0 30px 70px -34px rgba(242,96,34,.7); }
.plan-preis s { font: 600 22px/1 var(--titel); color: #8f8d86; text-decoration-thickness: 2px; }
.plan li::before { border-color: #f29a22; }
@media (min-width: 981px) { .plaene.drei .plan.beliebt { transform: translateY(-10px); } }

/* Produktseite: zwei gleich hohe Flächen, oben und unten bündig */
.pfad { max-width: 1320px; }
.detail, .detail.quer { max-width: 1320px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(12px, 1.4vw, 20px); align-items: stretch; padding-top: 18px; }
.detail.quer { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
.detail.quer .detail-rahmen { width: 100%; }
.detail.quer .prompt-text { max-height: 220px; }
.detail-video, .detail-info { border-radius: 24px; background: var(--flaeche); border: 1px solid var(--linie); }
.detail-video { display: grid; place-items: center; padding: clamp(14px, 1.8vw, 26px); }
.detail-rahmen { width: min(100%, calc(var(--q) * 66vh)); }
.detail-video .vid { border-radius: 14px; }
.detail-info { display: flex; flex-direction: column; padding: clamp(20px, 2.4vw, 34px); min-width: 0; }
.detail-info .auge { color: #f29a22; }
.detail-info h1 { margin-top: 12px; font-size: clamp(28px, 3.1vw, 44px); }
.fakten { margin-top: 20px; background: var(--linie); }
.fakten div { background: #111110; flex-basis: 110px; padding: 12px 14px; }
.prompt { margin-top: 14px; flex: 1 1 auto; display: flex; flex-direction: column; background: #111110; }
.prompt-text { flex: 1 1 auto; max-height: 340px; }
.detail-aktion { margin-top: auto; padding-top: 18px; justify-items: stretch; }
.detail-aktion .knopf { width: 100%; min-width: 0; }
@media (max-width: 900px) { .detail, .detail.quer { grid-template-columns: 1fr; } .detail-video { max-width: none; } .detail-rahmen { width: min(100%, calc(var(--q) * 60vh)); } }

/* Hire us */
.hire-held { padding-bottom: clamp(28px, 4vw, 52px); }
.hire-leiste { max-width: 1160px; margin: 0 auto; padding: 0 var(--rand); }
.zahlen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--linie); border-radius: 22px; background: rgba(12,12,11,.86); overflow: hidden; }
.zahlen li { display: grid; gap: 8px; padding: clamp(18px, 2.2vw, 28px); border-left: 1px solid var(--linie); }
.zahlen li:first-child { border-left: 0; }
.zahlen b { font: 800 clamp(32px, 3.6vw, 50px)/1 var(--titel); letter-spacing: -.01em; }
.zahlen small { font-size: .46em; font-weight: 600; color: var(--leise); margin-left: 2px; }
.zahlen span { color: var(--leise); font-size: 14.5px; }
.hire-leiste .marken { margin-top: 30px !important; }
.werk { max-width: 1160px; margin: 0 auto; padding: clamp(64px, 8vw, 112px) var(--rand) 0; }
.werk-kopf { text-align: center; }
.werk-kopf h2 { font-size: clamp(32px, 5vw, 60px); font-weight: 800; text-transform: uppercase; }
.arbeiten { grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 22px); margin-top: clamp(26px, 3.6vw, 44px); }
.arbeit { padding: 10px 10px 16px; border-radius: 22px; background: var(--flaeche); border: 1px solid var(--linie); }
.arbeit .vid { border-radius: 14px; }
.arbeit figcaption { padding: 14px 6px 0; }
.ablauf ol { gap: clamp(12px, 1.4vw, 20px); }
.ablauf li { padding: clamp(22px, 2.4vw, 30px); border: 1px solid var(--linie); border-radius: 22px; background: var(--flaeche); }
.ablauf li::before { content: counter(s, decimal-leading-zero); font-size: clamp(34px, 3.6vw, 46px); color: var(--gold); margin-bottom: 20px; }
.stimmen blockquote { background: var(--flaeche); }
.stimmen blockquote::before { content: "“"; font: 800 64px/.6 var(--titel); color: var(--gold); height: 26px; }
.gruender { max-width: 1272px; margin-top: clamp(24px, 4vw, 48px); padding: clamp(24px, 3.4vw, 52px); border-radius: 28px; background: var(--flaeche); border: 1px solid var(--linie); }
.gruender, .anfrage { margin-left: var(--rand); margin-right: var(--rand); }
.anfrage { padding-left: 0; padding-right: 0; max-width: 1272px; }
@media (min-width: 1368px) { .gruender, .anfrage { margin-left: auto; margin-right: auto; } }
.anfrage-form { background: var(--flaeche); }
@media (max-width: 900px) { .zahlen { grid-template-columns: 1fr 1fr; } .zahlen li:nth-child(3) { border-left: 0; } .zahlen li:nth-child(n+3) { border-top: 1px solid var(--linie); } }
@media (max-width: 640px) { .arbeiten { grid-template-columns: 1fr; } }

/* ================= Vierter Entwurf (13.10.2026 abends): grauer Grund, Kopfleiste immer Glas, reicherer Himmel ================= */
:root { --grund: #121212; --flaeche: #1a1a19; --flaeche-2: #232322; --linie: #2f2f2d; --linie-hell: #444441; --leise: #aeaca5; }
html:has(body.neu) { background: #121212; scrollbar-color: #4a4a46 #121212; }
body.neu { background: transparent; }

/* Kopfleiste: dauerhaft dunkles Glas, auch ganz oben */
.kopf, .kopf.gerollt, .kopf.offen, body.alt .kopf { background: rgba(14,14,14,.62); -webkit-backdrop-filter: saturate(1.5) blur(22px); backdrop-filter: saturate(1.5) blur(22px); border-bottom: 1px solid rgba(255,255,255,.09); }

/* Himmel: Nacht oben, die nach unten ins Grau übergeht; oranges Licht aus beiden Ecken bleibt (Lucas Look) */
.himmel { height: clamp(760px, 124vh, 1320px); background:
  radial-gradient(40% 56% at 0% 0%, rgba(242,160,34,.58), rgba(242,110,34,.18) 42%, transparent 70%),
  radial-gradient(40% 56% at 100% 0%, rgba(242,140,34,.58), rgba(242,96,34,.18) 42%, transparent 70%),
  radial-gradient(60% 40% at 50% 34%, rgba(120,90,160,.10), transparent 70%),
  linear-gradient(180deg, #070609 0%, #0a090c 46%, #0f0e10 72%, #121212 100%);
  -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.himmel::before { content: ""; position: absolute; left: -10%; right: -10%; top: 8%; height: 46%; transform: rotate(-9deg); pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,226,190,.075), rgba(255,200,150,.03) 45%, transparent 70%); filter: blur(6px); }

/* Flächen auf Grau */
.vid { background: #1b1b1a; }
.weg, .stimmen blockquote, .anfrage-form, .w-form-done, .kasten, .prompt, .fakten div { background-color: var(--flaeche); }
.fuss { background: #0d0d0d; }

/* Marken-Zeile im Held */
.vertrauen { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 8px 24px; margin-top: clamp(30px, 4.5vw, 52px) !important; color: var(--leise); font-size: 14px; }
.vertrauen b { font: 700 clamp(16px, 1.8vw, 21px)/1 var(--titel); color: #dcdad3; letter-spacing: .01em; }

/* Nach Stil stöbern */
.kategorien, .stimmen-wand, .schluss { max-width: none; margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--rand) 0; }
.kat-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(10px, 1.2vw, 18px); max-width: 1500px; margin: clamp(28px, 4vw, 48px) auto 0; }
.kat { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--flaeche-2); color: #fff; text-decoration: none; isolation: isolate; }
.kat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.kat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.82)); z-index: 1; }
.kat span { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; display: grid; gap: 3px; }
.kat b { font: 700 clamp(20px, 2vw, 26px)/1.05 var(--titel); text-transform: uppercase; }
.kat i { font-style: normal; font-size: 13.5px; color: #d8d6cf; }
.kat:hover img { transform: scale(1.06); }

/* Kundenstimmen als Reihe echter Nachrichten */
.sw-lauf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); max-width: 1500px; margin: clamp(28px, 4vw, 48px) auto 0; }
.sw-lauf img { width: 100%; height: auto; display: block; border-radius: 18px; border: 1px solid var(--linie); background: var(--flaeche); }
@media (max-width: 1000px) { .sw-lauf { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: calc(-1 * var(--rand)); margin-right: calc(-1 * var(--rand)); padding: 0 var(--rand) 8px; scrollbar-width: none; }
  .sw-lauf::-webkit-scrollbar { display: none; } .sw-lauf img { flex: none; width: min(58vw, 240px); scroll-snap-align: center; } }

/* Schluss-Aufruf */
.schluss { position: relative; text-align: center; padding-bottom: clamp(56px, 8vw, 112px); overflow: hidden; }
.schluss::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(46% 70% at 50% 100%, rgba(242,130,34,.22), transparent 70%); }
.schluss h2 { font-size: clamp(32px, 5.4vw, 72px); font-weight: 800; text-transform: uppercase; line-height: .98; }
.schluss p { margin: 16px 0 28px !important; color: #c9c7c0; font-size: clamp(16px, 1.6vw, 19px); }

/* Preise: alles auf einer Linie */
.plaene { align-items: stretch; }
.plan { padding: 28px; }
.plan h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.plan-marke { position: static; flex: none; }
.plan-preis { min-height: 60px; flex-wrap: nowrap; }
.plan-preis s { align-self: center; color: var(--leise); font-size: 20px; }
.plan-sub { min-height: 2.9em; }
.plan ul { flex: 1 1 auto; align-content: start; }
.plan .knopf { margin-top: 0; }
@media (max-width: 980px) { .plan-sub { min-height: 0; } }

/* Hire us: Team mit Bildern, Unterschrift */
.team { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.team figure { margin: 0; }
.team img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 18px; border: 1px solid var(--linie); }
.team figcaption { display: grid; gap: 2px; padding-top: 10px; }
.team b { font: 700 17px/1.2 var(--titel); } .team span { color: var(--leise); font-size: 14px; }
img.unterschrift { width: 150px; height: auto; margin-top: 4px; }

/* Preise bündig (Luca): keine angehobene Karte, alter Preis sauber neben dem neuen */
@media (min-width: 981px) { .plaene.drei .plan.beliebt { transform: none; } }
.plan-preis { gap: 10px; }
.plan-preis s { order: 2; align-self: baseline; font: 600 20px/1 var(--titel); margin-left: 2px; }
.plan-preis span { order: 3; }
.plan-sub { min-height: 3em; }

/* Held: Überschrift in zwei klaren Zeilen */
.held { max-width: 1240px; }
.held h1 { font-size: clamp(36px, 6.3vw, 92px); }
.held h1 em { display: block; }

/* Himmel, zweite Fassung: enge, weiche Scheinwerfer in den Ecken, tiefes Nachtblau, feines Korn gegen Streifen */
.himmel { background:
  radial-gradient(30% 46% at 0% 0%, rgba(255,176,46,.72), rgba(242,116,34,.26) 36%, rgba(242,96,34,.07) 58%, transparent 76%),
  radial-gradient(30% 46% at 100% 0%, rgba(255,150,40,.72), rgba(242,96,34,.26) 36%, rgba(242,80,34,.07) 58%, transparent 76%),
  radial-gradient(70% 46% at 50% 0%, rgba(70,84,150,.20), transparent 72%),
  linear-gradient(180deg, #06070c 0%, #090a10 40%, #0e0e12 70%, #121212 100%); }
.himmel::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* =====================================================================================================
   FÜNFTER ENTWURF (14.10.2026) – neuer Look nach Lucas Referenzen: fast schwarzer Grund, orange Lichtsäulen,
   Glas-Widgets mit heller Oberkante, schwebende Kapsel-Leiste, feinere Schrift. Ersetzt die Entwürfe davor.
   ===================================================================================================== */
@font-face { font-family: Newsreader; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/newsreader-italic.woff2) format("woff2"); }
:root { --grund: #0a0a0b; --flaeche: #121213; --flaeche-2: #19191b; --linie: rgba(255,255,255,.085); --linie-hell: rgba(255,255,255,.17);
  --text: #f4f2ee; --leise: #a09e99; --orange: #ff7a1a; --gold: #ffa63d; --gruen: #37d67a;
  --verlauf: linear-gradient(180deg, #ffb24a, #ff7a1a 58%, #ef531c);
  --titel: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --glas: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.022));
  --kante: inset 0 1px 0 rgba(255,255,255,.11), 0 34px 70px -34px rgba(0,0,0,.9); }
html:has(body.neu) { background: #0a0a0b; scrollbar-color: #3c3c3f #0a0a0b; }
.himmel { display: none; }

/* ---- Schrift: ruhig, groß, mit einem kursiven Akzentwort ---- */
body.neu :is(h1, h2, h3) { font-family: var(--titel); text-transform: none !important; font-weight: 500 !important; letter-spacing: -.035em; line-height: 1.04; }
body.neu :is(h1, h2) em { font-family: Newsreader, Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.012em; color: #ffa24a; background: none; -webkit-text-fill-color: currentColor; padding-right: .06em; }
.held h1 { font-size: clamp(40px, 6.6vw, 92px); }
.held h1 em { display: block; }
.so-kopf h2, .preise h2, .preise h1, .faq h2, .schluss h2, .abschnitt-kopf h2, .bib-kopf h1, .wege > h2, .ablauf h2, .stimmen h2, .gruender h2, .anfrage h2, .konto-seite h1, .detail-info h1, .werk-kopf h2 { font-size: clamp(32px, 4.7vw, 62px); }
body.neu h3 { letter-spacing: -.02em; }
.held-text, .so-kopf p, .preise .unter { color: #c2c0ba; font-size: clamp(16px, 1.45vw, 19px); }
.so-kopf { max-width: 820px; }

/* ---- Lichtsäulen ---- */
.glut { position: absolute; top: 0; left: 0; right: 0; height: 900px; z-index: -1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 330px), transparent); mask-image: linear-gradient(#000 calc(100% - 330px), transparent); }
#saeulen { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(9px) saturate(1.15); transform: scale(1.03); }
.glut::before { content: ""; position: absolute; inset: 0; z-index: 1; background: repeating-linear-gradient(90deg, rgba(0,0,0,.42) 0 1px, rgba(255,255,255,.05) 1px 2px, transparent 2px var(--s, 56px)); }
.glut::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, #0a0a0b 0, rgba(10,10,11,.86) 16%, rgba(10,10,11,.25) 52%, rgba(10,10,11,0) 74%),
  radial-gradient(60% 46% at 50% 30%, rgba(10,10,11,.7), transparent 72%); }

/* ---- Kopfleiste: schwebende Glas-Kapsel, immer dunkel ---- */
.kopf, .kopf.gerollt, .kopf.offen, body.alt .kopf { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; padding: 12px var(--rand) 0; }
.kopf-in { position: relative; max-width: 1500px; height: 60px; padding: 0 10px 0 22px; border-radius: 999px; background: rgba(15,15,17,.74);
  -webkit-backdrop-filter: saturate(1.6) blur(24px); backdrop-filter: saturate(1.6) blur(24px); border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 18px 40px -18px rgba(0,0,0,.8); }
.kopf .haupt { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; gap: 2px; }
.kopf .haupt a { padding: 10px 15px; border-radius: 999px; font-size: 14.5px; }
.kopf .haupt a[aria-current] { background: rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.kopf .konto, .kopf .rest { border-color: rgba(255,255,255,.14); }
.kopf .mobil { margin-top: 8px; padding: 10px 18px 18px; border-radius: 26px; background: rgba(15,15,17,.92); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,.1); }
@media (max-width: 860px) { .kopf-in { padding: 0 8px 0 18px; height: 56px; } }

/* ---- Knöpfe: Pillen mit Licht ---- */
.knopf { border-radius: 999px; font-weight: 600; letter-spacing: -.005em; }
.knopf.gross, .knopf.klein { border-radius: 999px; }
.knopf.gold { background: var(--verlauf); color: #1d0e02; border: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 8px rgba(150,44,0,.35), 0 12px 34px -10px rgba(255,112,24,.6); }
.knopf.gold:hover { filter: brightness(1.08); transform: translateY(-1px); }
.knopf.glas, .knopf.dunkel { background: var(--glas), rgba(18,18,20,.7); border: 1px solid rgba(255,255,255,.13); color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.knopf.glas:hover, .knopf.dunkel:hover { border-color: rgba(255,255,255,.3); background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)), rgba(18,18,20,.7); }
.knopf.gold svg { width: 18px; height: 18px; }
.auge { padding: 9px 16px 9px 13px; border-radius: 999px; background: var(--glas), rgba(14,14,16,.6); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); color: #e8e5de; font-size: 13.5px; letter-spacing: 0; text-transform: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.auge .punkt { background: #ff8a2a; box-shadow: 0 0 0 4px rgba(255,138,42,.2), 0 0 14px rgba(255,138,42,.9); }

/* ---- Glas-Widgets: ein Rezept für alle Flächen ---- */
.plan, .so-schritte li, .stimme, .weg, .kasten, .prompt, .anfrage-form, .w-form-done, .stimmen blockquote, .rahmen, .fragen details, .ablauf li, .zahlen, .werk figure, .leer {
  background: var(--glas), #101011; border: 1px solid var(--linie); box-shadow: var(--kante); border-radius: 24px; }
.vid { background: #141415; border-radius: 18px; box-shadow: 0 24px 50px -28px rgba(0,0,0,.95); }
.vid::after { border-color: rgba(255,255,255,.1); }
.karte-name { font-weight: 500; letter-spacing: -.01em; }
.karte-art { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.marke { background: rgba(12,12,13,.7); border-color: rgba(255,255,255,.18); }

/* ---- Held und das Fenster mit den Videos ---- */
.held { max-width: 1180px; padding-top: clamp(56px, 8vw, 116px); padding-bottom: clamp(44px, 6vw, 76px); }
.schau { padding-top: 0; }
.rahmen { position: relative; overflow: hidden; border-radius: 30px; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015)), rgba(11,11,12,.78);
  -webkit-backdrop-filter: blur(26px) saturate(1.4); backdrop-filter: blur(26px) saturate(1.4); border: 1px solid rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 -30px 90px -30px rgba(255,112,24,.35), 0 50px 100px -40px rgba(0,0,0,.95); }
.rahmen-leiste { display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.rahmen-punkte { display: flex; gap: 7px; } .rahmen-punkte i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.16); }
.rahmen-leiste b { font: 600 14.5px/1 var(--schrift); color: #e8e5de; }
.rahmen-stile { margin-left: auto; display: flex; gap: 6px; overflow: hidden; }
.rahmen-stile a { padding: 8px 13px; border-radius: 999px; font: 500 13px/1 var(--schrift); color: #cfcdc6; text-decoration: none; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); white-space: nowrap; transition: background-color .2s, color .2s; }
.rahmen-stile a:hover { background: rgba(255,255,255,.12); color: #fff; }
.rahmen .schau-fenster { padding: clamp(10px, 1.2vw, 18px) clamp(10px, 1.2vw, 18px) 0; }
.rahmen .schau-fuss { padding-bottom: clamp(22px, 3vw, 36px); }
@media (max-width: 620px) { .rahmen { border-radius: 22px; } .rahmen-stile a:nth-child(n+3) { display: none; } }

/* ---- Abschnitte: gleicher Rhythmus ---- */
.kategorien, .so, .kunden, .preise, .faq { max-width: none; margin: 0 auto; padding: clamp(72px, 9vw, 136px) var(--rand) 0; }
.preise, .faq { max-width: 1320px; }
.schluss { padding: clamp(72px, 9vw, 136px) var(--rand) clamp(40px, 5vw, 72px); }

/* ---- Welches Video brauchst du? ---- */
.kat-raster { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(12px, 1.4vw, 20px); max-width: 1500px; }
.kat { aspect-ratio: 16 / 11; border-radius: 26px; border: 1px solid rgba(255,255,255,.1); box-shadow: var(--kante); background: #111; transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .3s; }
.kat:hover { transform: translateY(-6px); border-color: rgba(255,150,60,.55); }
.kat::after { background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.5)); }
.kat-fuss { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; border-radius: 18px;
  background: rgba(14,14,16,.62); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.kat-fuss > span:first-child { display: grid; gap: 4px; min-width: 0; margin-right: auto; }
.kat-fuss b { font: 600 clamp(18px, 1.6vw, 22px)/1.1 var(--schrift); letter-spacing: -.02em; text-transform: none; }
.kat-fuss i { font-style: normal; font-size: 13.5px; color: #c9c7c0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kat-zahl { flex: none; padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.1); font: 600 13px/1 var(--schrift); }
.pfeil { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--verlauf); color: #1d0e02; box-shadow: inset 0 1px 0 rgba(255,255,255,.55); transition: transform .35s cubic-bezier(.16,1,.3,1); }
.pfeil svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.kat:hover .pfeil { transform: rotate(-45deg); }

/* ---- So einfach geht das ---- */
.so-raster { margin-top: clamp(32px, 4vw, 56px); }
.buehne { border-radius: 26px; border: 1px solid rgba(255,255,255,.1); box-shadow: var(--kante); background: radial-gradient(110% 80% at 50% 118%, rgba(255,122,26,.62), rgba(239,83,28,.2) 42%, transparent 70%), repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 1px, transparent 1px 46px), #0f0f10; }
.fenster-mock, .zeitleiste { background: rgba(13,13,14,.82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 30px 60px -24px rgba(0,0,0,.9); border-radius: 16px; }
.mock-knopf { background: var(--verlauf); border-radius: 999px; }
.schreibmarke { background: #ff8a2a; }
.so-schritte li::before { color: #ff8a2a; font-family: Newsreader, Georgia, serif; font-style: italic; font-weight: 400; font-size: 46px; }
.so-schritte h3 { font-weight: 600 !important; }

/* ---- Kundenstimmen als Schieber ---- */
.schieber { margin: clamp(32px, 4vw, 56px) calc(-1 * var(--rand)) 0; }
.schieber-lauf { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--rand); padding: 6px var(--rand) 30px; scrollbar-width: none; }
.schieber-lauf::-webkit-scrollbar { display: none; }
.stimme { flex: 0 0 min(460px, 84vw); scroll-snap-align: start; margin: 0; padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 20px; }
.sterne-reihe { display: flex; gap: 4px; } .sterne-reihe svg { width: 18px; height: 18px; fill: #ff9a3c; }
.stimme blockquote { margin: 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; letter-spacing: -.01em; color: #f0eee8; }
.stimme figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.kopfkreis { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--verlauf); color: #1d0e02; font: 700 17px/1 var(--schrift); box-shadow: inset 0 1px 0 rgba(255,255,255,.55); }
.stimme figcaption b { display: block; font-weight: 600; } .stimme figcaption i { font-style: normal; font-size: 14px; color: var(--leise); }
.schieber-knoepfe { display: flex; justify-content: center; gap: 10px; }
.schieber-knoepfe button { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--glas), rgba(18,18,20,.7); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); color: #fff; cursor: pointer; transition: border-color .2s, opacity .2s, transform .2s; }
.schieber-knoepfe button:hover:not(:disabled) { border-color: rgba(255,150,60,.7); transform: scale(1.05); }
.schieber-knoepfe button:disabled { opacity: .35; cursor: default; }
.schieber-knoepfe svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Preise ---- */
.preise > .so-kopf { margin-bottom: clamp(32px, 4vw, 56px); }
.plaene { margin-top: 0; }
.plan { padding: clamp(24px, 2.4vw, 32px); border-radius: 28px; }
.plan h3 { font-size: 20px; font-weight: 600 !important; color: #dcdad3; }
.plan-preis b { font: 500 clamp(48px, 5vw, 64px)/1 var(--schrift); letter-spacing: -.045em; }
.plan-marke { background: var(--verlauf); color: #1d0e02; box-shadow: inset 0 1px 0 rgba(255,255,255,.55); }
.plan ul { border-top-color: rgba(255,255,255,.09); }
.plan li::before { border-color: #ff9a3c; }
.plan.beliebt { background: radial-gradient(120% 70% at 50% 0%, rgba(255,122,26,.36), rgba(255,122,26,.08) 46%, transparent 74%), var(--glas), #121011; border-color: rgba(255,154,60,.6);
  box-shadow: inset 0 1px 0 rgba(255,214,170,.45), 0 0 0 1px rgba(255,122,26,.22), 0 44px 90px -36px rgba(255,104,20,.55); }
.plan .knopf { min-height: 52px; }

/* ---- Fragen ---- */
.fragen { border: 0; display: grid; gap: 10px; max-width: 860px; margin-top: clamp(32px, 4vw, 56px); }
.fragen details { border-radius: 20px; padding: 0 22px; }
.fragen summary { padding: 22px 0; font-weight: 500; letter-spacing: -.01em; }
.fragen summary::after { color: #ff9a3c; }

/* ---- Schluss: noch einmal Lichtsäulen, als Fläche ---- */
.schluss::before { content: none; }
.schluss-kasten { position: relative; overflow: hidden; max-width: 1500px; margin: 0 auto; padding: clamp(56px, 8vw, 120px) 24px; border-radius: 34px; border: 1px solid rgba(255,255,255,.12); text-align: center;
  background: linear-gradient(180deg, #0a0a0b 0%, rgba(10,10,11,.86) 30%, rgba(10,10,11,.1) 100%), repeating-linear-gradient(90deg, rgba(0,0,0,.4) 0 1px, rgba(255,255,255,.05) 1px 2px, transparent 2px 58px),
  radial-gradient(90% 130% at 50% 128%, #ffb24a, #ff7a1a 30%, #ef531c 52%, rgba(239,83,28,0) 76%), #0c0c0d; box-shadow: var(--kante); }
.schluss-kasten p { margin: 16px 0 30px !important; color: #e3e0d9; font-size: clamp(16px, 1.5vw, 19px); }
.fuss { background: #0a0a0b; border-top-color: rgba(255,255,255,.08); }

/* ---- Unterseiten ---- */
.filter button { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.filter button[aria-pressed="true"] { background: #f4f2ee; border-color: #f4f2ee; }
.fakten { border-color: rgba(255,255,255,.09); border-radius: 18px; } .fakten div { background: #111112; }
.kasten input, .anfrage-form input, .anfrage-form select, .anfrage-form textarea { background: rgba(0,0,0,.4); border-color: rgba(255,255,255,.14); border-radius: 14px; }
.plan-kasten { background: radial-gradient(120% 80% at 50% 0%, rgba(255,122,26,.3), transparent 70%), var(--glas), #121011; border-color: rgba(255,154,60,.5); }
.ablauf li::before { color: #ff8a2a; }
@media (prefers-reduced-motion: reduce) { .kat, .pfeil, .knopf { transition: none; } }

/* Nachbesserung nach der Sichtprüfung */
.glut::after { background: linear-gradient(180deg, #0a0a0b 0, rgba(10,10,11,.72) 12%, rgba(10,10,11,.12) 40%, rgba(10,10,11,0) 60%), radial-gradient(46% 34% at 50% 30%, rgba(10,10,11,.55), transparent 74%); }
#saeulen { filter: blur(7px) saturate(1.2); }
.kat .kat-fuss span { position: static; display: block; }
.kat .kat-fuss > span:first-child { display: grid; gap: 4px; min-width: 0; margin-right: auto; }
.kat .kat-fuss .pfeil { display: grid; }
.plan-preis { height: 64px; min-height: 0; align-items: flex-end; }
.plan-sub { height: 3em; min-height: 0; overflow: hidden; }
@media (max-width: 980px) { .plan-sub { height: auto; } }
.kat .kat-fuss { display: flex; position: absolute; left: 12px; right: 12px; bottom: 12px; }
.kat .kat-fuss .kat-zahl { display: inline-block; }
.glut { -webkit-mask-image: linear-gradient(#000 calc(100% - 210px), transparent); mask-image: linear-gradient(#000 calc(100% - 210px), transparent); }
.glut::after { background: linear-gradient(180deg, #0a0a0b 0, rgba(10,10,11,.55) 10%, rgba(10,10,11,0) 34%), radial-gradient(44% 30% at 50% 34%, rgba(10,10,11,.62), transparent 76%); }
.plan-preis s { align-self: flex-end; margin-bottom: 9px; } .plan-preis span { align-self: flex-end; margin-bottom: 9px; }

/* =====================================================================================================
   SECHSTER SCHRITT (14.10.2026) – Lucas Wahl: Mischung aus Variante 1 (ruhig) und 4 (Lichtbänder).
   Eine Seitenbreite für alles, was fast voll ist (--weit): Kopfleiste, Videos, Kacheln, Bühne, Schluss, Fußleiste.
   Schmaler dürfen nur Preise und Fragen sein. Jeder Abschnitt hat ein eigenes Licht im Hintergrund.
   ===================================================================================================== */
:root { --weit: 1600px; --saeulen-flaeche: repeating-linear-gradient(90deg, rgba(0,0,0,.5) 0 1px, rgba(255,255,255,.04) 1px 2px, transparent 2px 56px), linear-gradient(0deg, rgba(255,150,50,.75), rgba(240,86,22,.3) 45%, transparent 82%); }
@property --w { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.held-stapel { display: none; }
body.neu main { overflow-x: clip; }
.glut::after { background: linear-gradient(180deg, #0a0a0b 0, rgba(10,10,11,.5) 9%, rgba(10,10,11,0) 30%), radial-gradient(40% 26% at 50% 32%, rgba(10,10,11,.6), transparent 78%); }
#saeulen { filter: blur(6px) saturate(1.25); }

/* ---- eine Breite ---- */
.kopf-in, .kat-raster, .so-raster, .schluss-kasten { max-width: var(--weit); margin-left: auto; margin-right: auto; }
.bib, .fuss-in { max-width: calc(var(--weit) + 2 * var(--rand)); }
.fuss-unten { max-width: calc(var(--weit) + 2 * var(--rand)); margin-left: auto; margin-right: auto; }
.preise { max-width: 1320px; } .faq { max-width: 940px; }
.kategorien, .so, .kunden, .preise, .faq { position: relative; isolation: isolate; }

/* ---- Startseite: Videos frei auf dem Grund, unten laufen sie ins Schwarz aus ---- */
.schau .schau-fenster { padding: 0; }
.schau .schau-fuss { padding-bottom: 0; }

/* ---- Einblenden: leicht von unten, aus einer weichen Unschärfe ---- */
html.js .r { opacity: 0; translate: 0 20px; filter: blur(10px); transition: opacity .9s cubic-bezier(.16,1,.3,1), translate .9s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 80ms); }
html.js body.neu .r.da { opacity: 1; translate: none; filter: none; }

/* ---- Welches Video brauchst du? – stehende Lichtlinie darüber, Kacheln klappen beim Überfahren auf ---- */
.kategorien::before { content: ""; position: absolute; left: 50%; top: clamp(30px, 4vw, 60px); width: min(var(--weit), 100% - 2 * var(--rand)); height: 1px; translate: -50% 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13) 18%, rgba(255,190,120,.95) 50%, rgba(255,255,255,.13) 82%, transparent); }
.kategorien::after { content: ""; position: absolute; left: 50%; top: clamp(30px, 4vw, 60px); width: min(620px, 80%); height: 150px; translate: -50% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 100% at 50% 0%, rgba(255,122,26,.3), transparent 72%); }
.kat-raster { display: flex; height: clamp(320px, 32vw, 500px); }
.kat { flex: 1 1 0; aspect-ratio: auto; height: 100%; min-width: 0; transition: flex-grow .7s cubic-bezier(.16,1,.3,1), border-color .3s; }
.kat:hover { flex-grow: 2.6; transform: none; }
.kat-raster:not(:hover) .kat:first-child { flex-grow: 2.6; }

/* ---- So einfach geht das – breite Bühne, darunter ein Zeitstrahl ---- */
.so-raster { display: block; }
.so-buehne { height: clamp(260px, 28vw, 440px); margin: 0 0 clamp(40px, 5vw, 70px); }
.so-schritte { position: relative; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 48px); padding-top: 70px; }
.so-schritte::before { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 1px; background: rgba(255,255,255,.18); }
.so-schritte::after { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 1px; background: linear-gradient(90deg, #ff7a1a, #ffc98a); box-shadow: 0 0 14px rgba(255,130,40,.7); transform-origin: 0 50%; scale: 0 1; transition: scale 1.8s cubic-bezier(.16,1,.3,1) .25s; }
.so-schritte:has(li.da)::after, html:not(.js) .so-schritte::after { scale: 1 1; }
.so-schritte li { display: block; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.so-schritte li::before { position: absolute; left: 0; top: -66px; transform: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #121213; border: 1px solid rgba(255,255,255,.2); font: 600 17px/1 var(--schrift); font-style: normal; color: #ffb766; z-index: 1; transition: border-color .6s, box-shadow .6s, background-color .6s, color .6s; transition-delay: calc(.35s + var(--i, 0) * .45s); }
.so-schritte li.da::before { border-color: rgba(255,160,80,.9); background: #1d130b; color: #ffd2a0; box-shadow: 0 0 0 5px rgba(255,130,40,.14), 0 0 24px rgba(255,130,40,.45); }
.so-schritte h3 { font-size: clamp(22px, 2.2vw, 30px); }
.so-schritte p { margin-top: 10px !important; color: #c2c0ba; }

/* ---- Kundenstimmen – geneigtes Laufband vor einem leuchtenden Bogen; läuft immer durch ---- */
.kunden::before { content: ""; position: absolute; left: 50%; top: clamp(24px, 3vw, 48px); width: max(1500px, 128vw); height: 560px; translate: -50% 0; z-index: -1; pointer-events: none; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border-top: 1px solid rgba(255,186,116,.85); background: radial-gradient(46% 62% at 50% 0%, rgba(255,122,26,.3), rgba(255,122,26,.07) 52%, transparent 78%); box-shadow: 0 -26px 80px -26px rgba(255,120,30,.75);
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 34%, #000 66%, transparent 92%); mask-image: linear-gradient(90deg, transparent 8%, #000 34%, #000 66%, transparent 92%); }
.kunden > .so-kopf { padding-top: clamp(20px, 3vw, 44px); }
.schieber.laufband { overflow: hidden; padding-bottom: 40px; transform: perspective(1500px) rotateX(13deg) rotateZ(-2.5deg); transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.schieber.laufband .schieber-lauf { overflow: visible; width: max-content; scroll-snap-type: none; padding-left: 0; padding-right: 0; animation: laufband 64s linear infinite; }
.schieber.laufband .stimme { flex-basis: min(420px, 80vw); }
.schieber.laufband .schieber-knoepfe { display: none; }
@keyframes laufband { to { transform: translateX(calc(-50% - 9px)); } }

/* ---- Preise – ruhiger Grund mit stehender Linie; umlaufender Lichtrand am beliebten Plan, Lichtfleck folgt der Maus ---- */
.preise:not(.seite)::before { content: ""; position: absolute; left: 50%; top: clamp(30px, 4vw, 60px); width: min(var(--weit), 100vw - 2 * var(--rand)); height: 1px; translate: -50% 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14) 20%, rgba(255,255,255,.14) 80%, transparent); }
.plan.beliebt::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none; background: conic-gradient(from var(--w), transparent 0 62%, #ffb24a 78%, #fff3e0 86%, #ff7a1a 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: rundlauf 4.5s linear infinite; }
@keyframes rundlauf { to { --w: 360deg; } }
.plan::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0px), rgba(255,150,60,.17), transparent 70%); }
.plan:hover::after { opacity: 1; }
.plan > * { position: relative; z-index: 1; }

/* ---- Fragen – ein Lichtkegel von oben ---- */
.faq::before { content: ""; position: absolute; left: 50%; top: clamp(20px, 3vw, 44px); width: min(1100px, 100vw); height: 520px; translate: -50% 0; z-index: -1; pointer-events: none;
  background: conic-gradient(from 180deg at 50% 0%, transparent 146deg, rgba(255,130,40,.34) 170deg, rgba(255,196,140,.5) 180deg, rgba(255,130,40,.34) 190deg, transparent 214deg);
  -webkit-mask-image: linear-gradient(#000, transparent 82%); mask-image: linear-gradient(#000, transparent 82%); filter: blur(14px); }
.fragen { margin-left: auto; margin-right: auto; }

@media (max-width: 860px) {
  .kat-raster { flex-direction: column; height: auto; } .kat, .kat:hover, .kat-raster:not(:hover) .kat:first-child { flex: none; height: 200px; }
  .so-schritte { grid-template-columns: 1fr; padding-top: 0; gap: 34px; } .so-schritte::before, .so-schritte::after { display: none; }
  .so-schritte li { padding-left: 70px; } .so-schritte li::before { top: 0; }
  .schieber.laufband { transform: none; } .kunden::before { height: 380px; }
}
@media (prefers-reduced-motion: reduce) { .plan.beliebt::before { animation: none; } .so-schritte::after { scale: 1 1; transition: none; } }

/* ---- Feinschliff 14.10.2026 (Lucas Rückmeldung) ---- */
.kunden { margin-top: clamp(40px, 5.5vw, 90px); }
/* Hauptknopf: ein Lichtstreif zieht beim Überfahren einmal durch */
.knopf.gold { position: relative; overflow: hidden; }
.knopf.gold::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); }
.knopf.gold:hover::after { left: 130%; transition: left .7s cubic-bezier(.16,1,.3,1); }
/* Preisseite: das Licht liegt unter den Plänen und endet darunter mit harter Kante */
.glut.hart { -webkit-mask-image: none; mask-image: none; border-bottom: 1px solid rgba(255,206,150,.7); box-shadow: 0 1px 0 rgba(0,0,0,.6), 0 26px 60px -30px rgba(255,120,30,.55); }
.glut.hart::after { background: linear-gradient(180deg, #0a0a0b 0, rgba(10,10,11,.9) 22%, rgba(10,10,11,.55) 48%, rgba(10,10,11,0) 86%); }
.preise.seite { padding-bottom: 0; }
.preise.seite .plaene { margin-top: clamp(32px, 4vw, 52px); }
.preise.seite .klein.mitte { margin: 26px 0 0 !important; }
body:has(.glut.hart) .preise.seite .klein.mitte { margin-top: 96px !important; }
.preise.seite + .faq { padding-top: clamp(56px, 7vw, 100px); padding-bottom: clamp(56px, 7vw, 100px); }
/* Produktseite: gleiche Breite wie die Kopfleiste, Art als schlichte Zeile (kein Balken), darunter drei Schritte und „Mehr davon“ mit Auslauf */
.pfad, .detail, .detail.quer, .so-kurz { max-width: calc(var(--weit) + 2 * var(--rand)); }
.art-zeile { margin: 0 0 10px !important; font: 600 14px/1 var(--schrift); color: #ffa24a; }
.detail-info h1 { margin-top: 0; font-size: clamp(30px, 3.4vw, 52px); }
.detail { padding-bottom: 0; }
.so-kurz { margin: 0 auto; padding: clamp(12px, 1.4vw, 20px) var(--rand) 0; }
.so-kurz ol { list-style: none; counter-reset: k; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 20px); }
.so-kurz li { counter-increment: k; position: relative; padding: clamp(20px, 2vw, 28px) clamp(20px, 2vw, 28px) clamp(20px, 2vw, 28px) clamp(72px, 6vw, 92px); border-radius: 24px; background: var(--glas), #101011; border: 1px solid var(--linie); box-shadow: var(--kante); }
.so-kurz li::before { content: counter(k, decimal-leading-zero); position: absolute; left: clamp(20px, 2vw, 28px); top: clamp(16px, 1.8vw, 24px); font: italic 400 38px/1 Newsreader, Georgia, serif; color: #ff8a2a; }
.so-kurz h3 { font-size: clamp(18px, 1.6vw, 22px); font-weight: 600 !important; }
.so-kurz p { margin-top: 8px !important; color: #c2c0ba; font-size: 15.5px; }
.mehr { padding-top: clamp(72px, 9vw, 136px); padding-bottom: clamp(56px, 7vw, 100px); }
.mehr .so-kopf { margin-bottom: clamp(28px, 3.4vw, 48px); }
.mehr .schau-fenster { max-height: clamp(520px, 84vh, 880px); -webkit-mask-image: linear-gradient(#000 calc(100% - 300px), transparent calc(100% - 30px)); mask-image: linear-gradient(#000 calc(100% - 300px), transparent calc(100% - 30px)); }
@media (max-width: 860px) { .so-kurz ol { grid-template-columns: 1fr; } }
/* Hire us und Konto: dieselbe Seitenbreite, keine Versalien mehr */
.hire-leiste, .werk, .ablauf, .stimmen { max-width: calc(var(--weit) + 2 * var(--rand)); }
.gruender, .anfrage { max-width: min(var(--weit), 100% - 2 * var(--rand)); margin-left: auto; margin-right: auto; }
.plan-name { font-family: var(--schrift); text-transform: none; font-weight: 600; letter-spacing: -.02em; }

/* =====================================================================================================
   RUNDE 3 (14.10.2026, Lucas Rückmeldung): sechs ruhige Kategorie-Kacheln, Schritte im Rechteck mit hervorgehobenem Prompt,
   Produktseite bündig, Preise mobil in der richtigen Reihenfolge, Hire us neu (Laufband, Notiz, Anfrage-Kasten)
   ===================================================================================================== */
/* ---- Kategorien: sechs kleine Kacheln, nichts springt ---- */
.stil-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); max-width: var(--weit); margin: clamp(32px, 4vw, 56px) auto 0; }
.stil { display: block; min-width: 0; color: inherit; text-decoration: none; }
.stil-bild { display: block; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #141415; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 24px 50px -28px rgba(0,0,0,.95); transition: border-color .3s, box-shadow .3s; }
.stil-bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .7s cubic-bezier(.16,1,.3,1); }
.stil:hover .stil-bild { border-color: rgba(255,150,60,.65); box-shadow: 0 22px 46px -24px rgba(255,112,24,.65); }
.stil:hover .stil-bild img { scale: 1.06; }
.stil-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; padding: 0 3px; }
.stil-zeile b { font: 600 17px/1.2 var(--schrift); letter-spacing: -.015em; }
.stil-zahl { flex: none; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.08); font: 600 12.5px/1 var(--schrift); color: #cfcdc6; }
.stil > i { display: block; margin-top: 4px; padding: 0 3px; font-style: normal; font-size: 14px; line-height: 1.4; color: var(--leise); }
@media (max-width: 1100px) { .stil-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; } }
@media (max-width: 560px) { .stil-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- So einfach geht das: ein Rechteck – Prompt (Anfang lesbar, Rest verschwommen) → Video, die drei Schritte als Fußzeile ---- */
.werkbank { max-width: var(--weit); margin: clamp(32px, 4vw, 56px) auto 0; border-radius: 30px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); box-shadow: var(--kante);
  background: radial-gradient(90% 62% at 50% 100%, rgba(255,122,26,.5), rgba(239,83,28,.14) 46%, transparent 74%), repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 1px, transparent 1px 46px), #0f0f10; }
.wb-oben { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr); align-items: center; gap: clamp(16px, 2.4vw, 40px); padding: clamp(18px, 3.4vw, 56px); }
.wb-prompt { border-radius: 20px; background: rgba(13,13,14,.84); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 30px 60px -24px rgba(0,0,0,.9); padding-bottom: 20px; }
.wb-leiste { display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.wb-leiste i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.16); }
.wb-leiste span { margin-left: 8px; font: 12.5px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--leise); }
.wb-text { margin: 0 !important; padding: 18px 20px 4px; font: 15px/1.7 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #f4f2ee; }
.wb-zu { filter: blur(5px); color: #b4b1a9; -webkit-user-select: none; user-select: none; }
.wb-prompt .knopf { margin: 14px 20px 0; }
.wb-pfeil { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--verlauf); color: #1d0e02; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 8px rgba(255,130,40,.12), 0 14px 34px -10px rgba(255,112,24,.7); }
.wb-pfeil svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wb-video .vid { border-radius: 18px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.1); }
.wb-schritte { list-style: none; counter-reset: w; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.1); background: rgba(10,10,11,.6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.wb-schritte li { counter-increment: w; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-content: start; padding: clamp(18px, 2.2vw, 30px) clamp(18px, 2.4vw, 34px); border-left: 1px solid rgba(255,255,255,.1); }
.wb-schritte li:first-child { border-left: 0; }
.wb-schritte li::before { content: counter(w, decimal-leading-zero); grid-row: 1 / 3; font: italic 400 34px/1 Newsreader, Georgia, serif; color: #ff8a2a; }
.wb-schritte h3 { font-size: clamp(17px, 1.5vw, 21px); font-weight: 600 !important; }
.wb-schritte p { margin-top: 6px !important; color: #c2c0ba; font-size: 15px; line-height: 1.5; }
@media (max-width: 860px) {
  .wb-oben { grid-template-columns: minmax(0, 1fr); justify-items: center; } .wb-prompt, .wb-video { width: 100%; } .wb-pfeil { rotate: 90deg; width: 44px; height: 44px; }
  .wb-schritte { grid-template-columns: minmax(0, 1fr); } .wb-schritte li { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); } .wb-schritte li:first-child { border-top: 0; }
}

/* ---- Preise am Handy: untereinander in der Reihenfolge Monat, Jahr, Lifetime ---- */
.plan.beliebt { order: 0; }

/* ---- Produktseite: Schritt 3 steht genau unter der Info-Fläche, 1 und 2 unter dem Video ---- */
.so-kurz ol { --g: clamp(12px, 1.4vw, 20px); gap: var(--g); }
.so-kurz.quer ol { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) calc((100% - var(--g)) / 2.9); }
.so-kurz.hoch ol { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) calc((100% - var(--g)) / 2); }
@media (max-width: 900px) { .so-kurz.quer ol, .so-kurz.hoch ol { grid-template-columns: minmax(0, 1fr); } }

/* ---- Hire us ---- */
.ablauf > .so-kopf { margin: 0 auto clamp(32px, 4vw, 56px); text-align: center; }
/* Kundenstimmen wie auf der Startseite, aber vor einem Lichtband mit harter Unterkante */
.kunden.band::before { left: 0; top: auto; bottom: 34px; width: 100%; height: 300px; translate: none; border: 0; border-bottom: 1px solid rgba(255,206,150,.7); border-radius: 0; box-shadow: none; opacity: .6; background: var(--saeulen-flaeche);
  -webkit-mask-image: linear-gradient(transparent, #000 70%); mask-image: linear-gradient(transparent, #000 70%); }
.kunden.band { padding-bottom: 34px; }
/* Worte vom Gründer als Notiz auf Papier */
.brief { max-width: calc(var(--weit) + 2 * var(--rand)); margin: 0 auto; padding: clamp(72px, 9vw, 136px) var(--rand) 0; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 90px); align-items: center; }
.brief h2, .anfrage-kasten h2 { font-size: clamp(30px, 3.8vw, 54px); }
.brief .team { max-width: 440px; }
.notiz { position: relative; margin: 0; padding: clamp(34px, 3.8vw, 60px) clamp(24px, 3.6vw, 60px) clamp(26px, 3vw, 44px); border-radius: 5px; rotate: 1.1deg; color: #2a2118; font: italic 400 clamp(18px, 1.5vw, 21px)/36px Newsreader, Georgia, serif;
  background: repeating-linear-gradient(transparent 0 35px, rgba(70,48,24,.14) 35px 36px), linear-gradient(180deg, #f6eede, #efe4cf); background-position: 0 clamp(34px, 3.8vw, 60px), 0 0; box-shadow: 0 50px 90px -34px rgba(0,0,0,.95), 0 0 70px -20px rgba(255,130,40,.35); }
.notiz::before { content: ""; position: absolute; left: 50%; top: -15px; width: 128px; height: 32px; translate: -50% 0; rotate: -3deg; background: rgba(255,170,90,.72); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.notiz p { margin: 0 0 36px !important; color: inherit; }
.notiz img.unterschrift { display: block; width: 150px; height: auto; margin: 0; filter: invert(1) brightness(.35); }
/* Anfrage: ein Kasten mit Licht, links die Zusagen, rechts das Formular mit Auswahl-Knöpfen */
.anfrage-teil { padding: clamp(72px, 9vw, 136px) var(--rand) clamp(56px, 7vw, 100px); }
.anfrage-kasten { position: relative; overflow: hidden; max-width: var(--weit); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 70px); align-items: center; padding: clamp(20px, 3.6vw, 60px); border-radius: 34px; border: 1px solid rgba(255,255,255,.12); box-shadow: var(--kante);
  background: linear-gradient(180deg, #0a0a0b 0%, rgba(10,10,11,.82) 34%, rgba(10,10,11,.16) 100%), repeating-linear-gradient(90deg, rgba(0,0,0,.4) 0 1px, rgba(255,255,255,.05) 1px 2px, transparent 2px 58px),
  radial-gradient(74% 120% at 22% 126%, #ffb24a, #ff7a1a 30%, #ef531c 52%, rgba(239,83,28,0) 76%), #0c0c0d; }
.anfrage-kopf > p { margin-top: 16px !important; color: #d6d3cc; font-size: clamp(16px, 1.45vw, 19px); max-width: 40ch; }
.zusagen { list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: clamp(18px, 2.6vw, 40px); }
.zusagen li { display: grid; gap: 6px; padding-left: 16px; border-left: 1px solid rgba(255,255,255,.22); }
.zusagen b { font: 500 clamp(24px, 2.4vw, 34px)/1 var(--schrift); letter-spacing: -.035em; white-space: nowrap; } .zusagen span { font-size: 14px; color: #d0cdc5; }
.direkt { display: flex; align-items: center; gap: 14px; margin-top: clamp(24px, 3vw, 40px) !important; font-weight: 500; color: #f4f2ee; }
.direkt-bilder { display: flex; flex: none; } .direkt-bilder img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid #17120d; } .direkt-bilder img + img { margin-left: -12px; }
.anfrage-kasten .anfrage-form, .anfrage-kasten .w-form-done { background: rgba(12,12,13,.86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-color: rgba(255,255,255,.14); }
.wahl { min-width: 0; margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wahl legend { padding: 0; margin-bottom: 9px; font-size: 13.5px; font-weight: 600; color: #d8d6cf; }
.anfrage-form .wahl label { position: relative; display: block; }
.wahl input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.wahl span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); font-size: 14.5px; font-weight: 500; color: #e8e5de; transition: background-color .2s, border-color .2s, color .2s; }
.wahl label:hover span { border-color: rgba(255,255,255,.34); }
.wahl input:checked + span { background: var(--verlauf); border-color: transparent; color: #1d0e02; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.55); }
.wahl input:focus-visible + span { outline: 2px solid #ffb24a; outline-offset: 2px; }
@media (max-width: 900px) { .brief, .anfrage-kasten { grid-template-columns: minmax(0, 1fr); } .notiz { rotate: .5deg; } .zusagen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .zusagen li { padding-left: 12px; } }

/* ---- Runde 4 (14.10.2026): vier Kategorien, weicherer Auslauf des Kopf-Lichts ---- */
.stil-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stil-bild { aspect-ratio: 16 / 10; }
.stil-bald { display: grid; place-items: center; width: 100%; height: 100%; font: 600 14px/1 var(--schrift); color: #e8e5de; background: radial-gradient(90% 80% at 50% 110%, rgba(255,122,26,.5), rgba(239,83,28,.12) 50%, transparent 76%), repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 1px, transparent 1px 38px), #101011; }
@media (max-width: 1100px) { .stil-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0; } }
@media (max-width: 860px) { .stil-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; } }
/* Kopf-Licht: oben wie zuvor (helles Orange); unten spiegelt es sich 140 px unter der Grundlinie und läuft dort kurz und weich aus */
.glut:not(.hart) { -webkit-mask-image: linear-gradient(#000 calc(100% - 350px), rgba(0,0,0,.5) calc(100% - 140px), rgba(0,0,0,.28) calc(100% - 70px), transparent); mask-image: linear-gradient(#000 calc(100% - 350px), rgba(0,0,0,.5) calc(100% - 140px), rgba(0,0,0,.28) calc(100% - 70px), transparent); }

/* =====================================================================================================
   RUNDE 5 (14.10.2026): Kategorien als Glas-Felder (wie Lucas Referenz), Schritte der Produktseite mit Licht,
   Hire us – Notiz im Stil der Seite, Kundenstimmen vor einem Lichtkreis
   ===================================================================================================== */
/* ---- Welches Video brauchst du? – vier Glas-Felder in zwei Reihen (breit + schmal, schmal + breit) ---- */
.felder { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); grid-auto-rows: clamp(250px, 23vw, 350px); gap: clamp(10px, 1.2vw, 18px); max-width: var(--weit); margin: clamp(32px, 4vw, 56px) auto 0; }
.feld { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; padding: clamp(18px, 2vw, 30px); border-radius: 26px; color: inherit; text-decoration: none;
  background: var(--glas), #0f0f10; border: 1px solid rgba(255,255,255,.1); box-shadow: var(--kante); transition: border-color .35s; }
.feld:nth-child(1), .feld:nth-child(4) { grid-column: span 12; } .feld:nth-child(2), .feld:nth-child(3) { grid-column: span 8; }
.feld::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -42%; height: 86%; z-index: -1; pointer-events: none; filter: blur(14px); opacity: .8;
  background: radial-gradient(50% 58% at 50% 62%, rgba(255,150,60,.75), rgba(239,83,28,.3) 46%, transparent 74%); transition: opacity .5s, translate .7s cubic-bezier(.16,1,.3,1); }
.feld:nth-child(2)::before { left: 20%; right: -40%; } .feld:nth-child(3)::before { left: -40%; right: 20%; }
.feld:hover { border-color: rgba(255,160,80,.55); } .feld:hover::before { opacity: 1; translate: 0 -9%; }
.feld-schau { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.feld-schau > img { position: absolute; right: 5%; top: 11%; width: 56%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 60px -24px #000; opacity: .96;
  -webkit-mask-image: linear-gradient(#000 52%, transparent 98%); mask-image: linear-gradient(#000 52%, transparent 98%); transition: translate .7s cubic-bezier(.16,1,.3,1); }
.feld:nth-child(3) .feld-schau > img { left: 9%; right: 9%; top: 9%; width: 82%; }
.feld:hover .feld-schau > img { translate: 0 -6px; }
.feld-zahl { position: absolute; left: clamp(18px, 2vw, 30px); top: clamp(18px, 2vw, 30px); padding: 7px 12px; border-radius: 999px; background: rgba(14,14,16,.6); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 600 12.5px/1 var(--schrift); color: #e8e5de; }
.feld-text { display: grid; gap: 7px; max-width: 34ch; }
.feld-text b { font: 600 clamp(19px, 1.8vw, 26px)/1.15 var(--schrift); letter-spacing: -.025em; }
.feld-text i { font-style: normal; font-size: clamp(14px, 1.1vw, 15.5px); line-height: 1.45; color: #d2cfc7; }
/* Talking Head hat noch kein Bild: kleines Schaubild aus Sprecher, Untertitel und Bausteinen */
.feld-mock { position: absolute; left: 9%; right: 9%; top: 24%; display: grid; justify-items: center; gap: 12px; }
.mock-kopf { width: 54px; height: 54px; border-radius: 50%; background: var(--verlauf); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 7px rgba(255,130,40,.14); }
.mock-zeile { padding: 9px 14px; border-radius: 12px; background: rgba(14,14,16,.72); border: 1px solid rgba(255,255,255,.14); font: 600 14px/1.2 var(--schrift); text-align: center; }
.mock-zeile i { font-style: normal; color: #d2cfc7; } .mock-zeile b { color: #ffa24a; }
.mock-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .mock-chips i { font-style: normal; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); font: 500 12px/1 var(--schrift); color: #cfcdc6; }
/* „Alle ansehen“ hebt sich ab: oranger Rand, gefächerte Vorschau, Pfeil */
.feld.alle { border-color: rgba(255,154,60,.6); background: radial-gradient(110% 90% at 100% 0%, rgba(255,122,26,.3), transparent 62%), var(--glas), #121011; }
.feld.alle::before { opacity: 1; }
.stapel > img { top: 14%; width: 34%; right: auto; -webkit-mask-image: none; mask-image: none; }
.stapel > img:nth-child(1) { left: 34%; rotate: -7deg; } .stapel > img:nth-child(2) { left: 48%; rotate: 2deg; top: 10%; } .stapel > img:nth-child(3) { left: 62%; rotate: 8deg; top: 15%; }
.feld.alle:hover .stapel > img:nth-child(1) { translate: -10px -4px; } .feld.alle:hover .stapel > img:nth-child(3) { translate: 10px -4px; }
.feld.alle .pfeil { position: absolute; right: clamp(18px, 2vw, 30px); bottom: clamp(18px, 2vw, 30px); width: 48px; height: 48px; }
.feld.alle:hover .pfeil { transform: rotate(-45deg); }
.feld.alle .feld-text { padding-right: 64px; }
@media (max-width: 860px) {
  /* Handy: zwei nebeneinander, eines länger, eines kürzer – versetzt wie in der Referenz */
  .felder { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 112px; }
  .feld:nth-child(n) { grid-column: auto; padding: 14px; border-radius: 20px; }
  .feld:nth-child(1) { grid-column: 1; grid-row: 1 / 4; } .feld:nth-child(2) { grid-column: 2; grid-row: 1 / 3; } .feld:nth-child(3) { grid-column: 1; grid-row: 4 / 6; } .feld:nth-child(4) { grid-column: 2; grid-row: 3 / 6; }
  .feld-schau > img, .feld:nth-child(3) .feld-schau > img { left: 8%; right: 8%; top: 44px; width: 84%; }
  .feld:nth-child(2) .feld-schau > img, .feld:nth-child(3) .feld-schau > img { opacity: .5; }
  .feld-zahl { left: 12px; top: 12px; padding: 6px 9px; font-size: 11.5px; }
  .feld-text b { font-size: 17px; } .feld-text i { font-size: 13px; }
  .feld-mock { top: 46px; gap: 8px; } .mock-kopf { width: 38px; height: 38px; } .mock-zeile { display: none; } .mock-chips i { font-size: 11px; padding: 5px 8px; }
  .stapel > img { width: 46%; top: 50px; } .stapel > img:nth-child(1) { left: 6%; } .stapel > img:nth-child(2) { left: 27%; top: 44px; } .stapel > img:nth-child(3) { left: 48%; top: 52px; }
  .feld.alle .pfeil { width: 38px; height: 38px; right: 12px; bottom: 12px; } .feld.alle .feld-text { padding-right: 44px; }
}

/* ---- Produktseite: Hoch- und Quadrat-Format bekommen drei gleich breite Schritte; jeder Schritt hat Licht von unten ---- */
.so-kurz.hoch ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.so-kurz li { overflow: hidden; isolation: isolate; }
.so-kurz li::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -70%; height: 130%; z-index: -1; pointer-events: none; filter: blur(12px); background: radial-gradient(40% 46% at var(--gx, 50%) 44%, rgba(255,140,50,.6), rgba(239,83,28,.2) 50%, transparent 76%); }
.so-kurz li:nth-child(1) { --gx: 22%; } .so-kurz li:nth-child(3) { --gx: 78%; }
@media (max-width: 900px) { .so-kurz.hoch ol { grid-template-columns: minmax(0, 1fr); } }

/* ---- Hire us: Kundenstimmen vor einem Lichtkreis mit Punktraster (statt Lichtband) ---- */
.kunden.band::before { left: 50%; top: 18%; bottom: auto; width: min(1100px, 92vw); height: 560px; translate: -50% 0; border: 0; border-radius: 50%; opacity: 1; box-shadow: none; -webkit-mask-image: none; mask-image: none; filter: blur(30px);
  background: radial-gradient(closest-side, rgba(255,130,40,.5), rgba(239,83,28,.2) 55%, transparent); }
.kunden.band::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.5px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(48% 52% at 50% 56%, #000, transparent 78%); mask-image: radial-gradient(48% 52% at 50% 56%, #000, transparent 78%); }
/* ---- Hire us: eine Notiz in der Mitte, im Stil der Seite – Überschrift, Bilder, Text und Unterschrift auf demselben Blatt ---- */
.brief { display: block; max-width: none; padding: clamp(72px, 9vw, 136px) var(--rand) 0; }
.notiz { max-width: 980px; margin: 0 auto; padding: clamp(30px, 4vw, 64px) clamp(22px, 4.4vw, 72px) clamp(26px, 3.4vw, 52px); border-radius: 26px; rotate: -.7deg; color: #ece8df; font: italic 400 clamp(18px, 1.5vw, 21px)/36px Newsreader, Georgia, serif;
  background: repeating-linear-gradient(transparent 0 35px, rgba(255,255,255,.07) 35px 36px), radial-gradient(90% 60% at 50% 118%, rgba(255,122,26,.32), transparent 70%), var(--glas), #101011; background-position: 0 0; border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--kante), 0 0 90px -30px rgba(255,130,40,.45); }
.notiz::before { top: -16px; background: var(--verlauf); opacity: .9; }
.notiz-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(18px, 3vw, 48px); margin-bottom: 36px; padding-bottom: 35px; }
.notiz-kopf h2 { font-style: normal; font-size: clamp(28px, 3.4vw, 48px); }
.notiz .team { display: flex; gap: 14px; margin: 0; max-width: none; flex: none; font-style: normal; font-family: var(--schrift); line-height: 1.3; }
.notiz .team figure { width: clamp(96px, 10vw, 132px); margin: 0; } .notiz .team figure:first-child { rotate: -3deg; } .notiz .team figure:last-child { rotate: 2.5deg; translate: 0 6px; }
.notiz .team img { border-radius: 14px; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 18px 36px -16px #000; }
.notiz .team b { font: 600 14px/1.2 var(--schrift); } .notiz .team span { font-size: 12.5px; }
.notiz p { color: inherit; }
.notiz img.unterschrift { filter: none; }
@media (max-width: 700px) { .notiz-kopf { flex-direction: column; align-items: flex-start; } .notiz { rotate: -.4deg; } }
/* ---- Hire us: Anfrage-Kasten – linke Spalte schließt oben und unten mit dem Formular ab ---- */
.anfrage-kasten { align-items: stretch; }
.anfrage-kopf { display: flex; flex-direction: column; }
.anfrage-kopf .zusagen { margin-top: auto; padding-top: clamp(24px, 3vw, 40px); }
@media (max-width: 900px) { .anfrage-kopf .zusagen { margin-top: 0; } }
@media (max-width: 860px) {
  .mock-chips i:nth-child(3) { display: none; } .feld-mock { top: 42px; gap: 7px; }
  .feld:nth-child(1) .feld-schau > img { aspect-ratio: 4 / 3.6; }
  .stapel > img { aspect-ratio: 4 / 3.4; }
  .feld.alle .feld-text i { display: none; }
}

/* =====================================================================================================
   RUNDE 6 (14.10.2026): Kopf-Licht läuft versetzt aus, Kategorie-Felder mit Video über die ganze Fläche,
   „Alle ansehen“ stärker, Schritte der Produktseite mit Bausteinen, Unterseiten im neuen Look
   ===================================================================================================== */
.glut:not(.hart) { -webkit-mask-image: linear-gradient(#000 calc(100% - var(--sp, 260px) - 210px), rgba(0,0,0,.62) calc(100% - var(--sp, 260px)), rgba(0,0,0,.5) calc(100% - 50px), transparent); mask-image: linear-gradient(#000 calc(100% - var(--sp, 260px) - 210px), rgba(0,0,0,.62) calc(100% - var(--sp, 260px)), rgba(0,0,0,.5) calc(100% - 50px), transparent); }

/* ---- Felder: das Video füllt das ganze Feld, unten liegt ein dunkler Verlauf für den Text ---- */
.feld-schau .vid { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto !important; border-radius: 0; box-shadow: none; background: #0f0f10; }
.feld-schau .vid::after { content: none; }
.feld-schau .vid video, .feld-schau .vid > img { position: absolute; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; }
.feld-schau .vid > img { transition: scale .9s cubic-bezier(.16,1,.3,1); } .feld-schau .vid video { transition: opacity .35s ease, scale .9s cubic-bezier(.16,1,.3,1); }
.feld:hover .feld-schau .vid > img, .feld:hover .feld-schau .vid video { scale: 1.04; transform: none; }
.feld-schau::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,11,.98) 0%, rgba(10,10,11,.92) 26%, rgba(10,10,11,.5) 44%, rgba(10,10,11,.08) 60%, rgba(10,10,11,0) 70%), linear-gradient(180deg, rgba(10,10,11,.45), rgba(10,10,11,0) 26%); }
.feld:not(.alle)::before { z-index: 0; opacity: .5; mix-blend-mode: screen; }
.feld-text, .feld-zahl { position: relative; z-index: 1; } .feld-zahl { position: absolute; }
/* „Alle ansehen“: eigenes Feld mit Lichtsäulen, umlaufendem Lichtrand und Knopf */
.feld.alle { border-color: transparent; background: linear-gradient(180deg, #0c0c0d 0%, rgba(12,12,13,.72) 38%, rgba(12,12,13,.1) 100%), repeating-linear-gradient(90deg, rgba(0,0,0,.4) 0 1px, rgba(255,255,255,.05) 1px 2px, transparent 2px 52px),
  radial-gradient(90% 130% at 70% 128%, #ffb24a, #ff7a1a 30%, #ef531c 52%, rgba(239,83,28,0) 78%), #0c0c0d; box-shadow: var(--kante), 0 0 80px -26px rgba(255,120,30,.7); }
.feld.alle::before { content: ""; position: absolute; inset: 0; left: 0; right: 0; bottom: 0; height: auto; z-index: 2; border-radius: inherit; padding: 2px; opacity: 1; filter: none; translate: none !important; pointer-events: none;
  background: conic-gradient(from var(--w), rgba(255,154,60,.45) 0 58%, #ffb24a 76%, #fff3e0 86%, #ff7a1a 93%, rgba(255,154,60,.45) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: rundlauf 5s linear infinite; }
.feld.alle .feld-schau::after { content: none; }
.feld.alle .feld-text { max-width: 30ch; padding-right: 0; gap: 10px; }
.feld.alle .feld-text b { font: 500 clamp(26px, 3vw, 44px)/1.04 var(--schrift); letter-spacing: -.035em; }
.feld.alle .feld-text b em { font-family: Newsreader, Georgia, serif; font-style: italic; font-weight: 400; color: #ffa24a; letter-spacing: -.012em; }
.feld.alle .knopf { justify-self: start; margin-top: 8px; min-height: 46px; padding: 0 20px; }
.stapel > img { top: 12%; width: 30%; } .stapel > img:nth-child(1) { left: 46%; } .stapel > img:nth-child(2) { left: 58%; } .stapel > img:nth-child(3) { left: 70%; right: auto; }
@media (max-width: 860px) {
  .feld.alle .feld-text b { font-size: 21px; } .feld.alle .knopf { min-height: 40px; padding: 0 14px; font-size: 13.5px; }
  .stapel > img { width: 46%; top: 22px; } .stapel > img:nth-child(1) { left: 6%; } .stapel > img:nth-child(2) { left: 27%; top: 16px; } .stapel > img:nth-child(3) { left: 48%; top: 24px; }
  .feld-schau .vid > img, .feld:nth-child(n) .feld-schau .vid > img { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .feld.alle::before { animation: none; } }

/* ---- Produktseite: Schritte mit großen Zahlen, Bausteinen und Pfeil zum nächsten Schritt ---- */
.so-kurz li { padding: clamp(22px, 2.2vw, 32px); overflow: visible; display: flex; flex-direction: column; min-height: clamp(190px, 15vw, 230px); border-color: rgba(255,255,255,.1); }
.so-kurz li::after { border-radius: inherit; left: 0; right: 0; bottom: 0; top: 0; height: auto; filter: none; background: radial-gradient(70% 80% at var(--gx, 50%) 118%, rgba(255,140,50,.5), rgba(239,83,28,.14) 48%, transparent 74%), repeating-linear-gradient(90deg, rgba(0,0,0,.3) 0 1px, transparent 1px 44px); }
.so-kurz li::before { position: static; display: block; margin-bottom: auto; padding-bottom: 22px; font-size: clamp(44px, 4vw, 62px); line-height: .9; }
.so-kurz li + li h3::before { content: ""; position: absolute; left: calc(var(--g) / -2 - 17px); top: 50%; width: 34px; height: 34px; translate: 0 -50%; border-radius: 50%; z-index: 2; background: #141415 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffa24a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-5-5l5 5-5 5'/%3E%3C/svg%3E") center / 16px no-repeat; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 8px 20px -8px #000; }
.kurz-chips { position: absolute; right: clamp(18px, 2vw, 28px); top: clamp(22px, 2.2vw, 32px); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 62%; }
.kurz-chips i { font-style: normal; padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); font: 500 12.5px/1 var(--schrift); color: #dedbd3; }
.kurz-chips i:first-child { background: rgba(255,138,42,.16); border-color: rgba(255,154,60,.5); color: #ffc48a; }
@media (max-width: 900px) { .so-kurz li { min-height: 0; } .so-kurz li + li h3::before { left: 50%; top: calc(var(--g) / -2 - 17px); translate: -50% 0; rotate: 90deg; } }

/* ---- Unterseiten im neuen Look: Rechtstexte, Über uns, Formular-Seiten ---- */
.recht { max-width: 860px; margin: 0 auto; padding: clamp(8px, 2vw, 24px) var(--rand) clamp(72px, 9vw, 120px); color: #d6d3cc; font-size: 16.5px; line-height: 1.7; overflow-wrap: anywhere; }
.recht h2, .recht h3, .recht h4 { margin: 2.1em 0 .6em; font-size: clamp(20px, 2vw, 25px); color: var(--text); line-height: 1.2; }
.recht > :first-child { margin-top: 0; }
.recht p, .recht ul, .recht ol { margin: 0 0 1em !important; } .recht ul, .recht ol { padding-left: 1.3em; }
.recht a { color: #ffa24a; text-underline-offset: 3px; } .recht strong, .recht b { color: var(--text); font-weight: 600; }
.about-held { max-width: 1080px; }
.ueber { max-width: calc(var(--weit) + 2 * var(--rand)); margin: 0 auto; padding: clamp(40px, 6vw, 90px) var(--rand) 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 90px); align-items: center; }
.ueber h2 { font-size: clamp(30px, 3.8vw, 54px); margin-bottom: 22px; }
.ueber-text p { margin: 0 0 1em !important; color: #d0cdc5; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65; max-width: 60ch; } .ueber-text a { color: #ffa24a; font-weight: 600; text-decoration: none; }
.ueber-team { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.4vw, 20px); }
.ueber-team figure { margin: 0; padding: 10px 10px 16px; border-radius: 24px; background: var(--glas), #101011; border: 1px solid var(--linie); box-shadow: var(--kante); }
.ueber-team figure:first-child { rotate: -2deg; } .ueber-team figure:last-child { rotate: 2deg; translate: 0 18px; }
.ueber-team img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 16px; }
.ueber-team figcaption { display: grid; gap: 3px; padding: 14px 6px 0; } .ueber-team b { font: 600 17px/1.2 var(--schrift); } .ueber-team span { color: var(--leise); font-size: 14px; }
.faq .so-kopf a { color: #ffa24a; font-weight: 600; text-decoration: none; }
.form-seite { padding-top: clamp(28px, 4vw, 56px); }
.anfrage-kasten h1 { font-size: clamp(32px, 4.2vw, 58px); }
.form-seite .anfrage-kopf .direkt { margin-top: auto !important; padding-top: 28px; }
.sterne-wahl span { font-size: 15px; }
@media (max-width: 900px) { .ueber { grid-template-columns: minmax(0, 1fr); } .ueber-team { max-width: 460px; } }

/* =====================================================================================================
   RUNDE 7 (14.10.2026): Kopf-Licht endet ruhiger und schneller, „Alle ansehen“ mit laufenden Videos in der Mitte,
   Lichtverlauf wandert über die drei Schritte, Preise mit Lichtoval und feineren Karten, schnelleres Einblenden
   ===================================================================================================== */
.glut:not(.hart) { -webkit-mask-image: linear-gradient(#000 calc(100% - var(--sp, 170px) - 200px), rgba(0,0,0,.7) calc(100% - var(--sp, 170px)), rgba(0,0,0,.34) calc(100% - var(--sp, 170px) * .5), transparent calc(100% - 8px)); mask-image: linear-gradient(#000 calc(100% - var(--sp, 170px) - 200px), rgba(0,0,0,.7) calc(100% - var(--sp, 170px)), rgba(0,0,0,.34) calc(100% - var(--sp, 170px) * .5), transparent calc(100% - 8px)); }

/* ---- Einblenden: kürzer und früher, damit beim Scrollen nichts „nachlädt“ ---- */
html.js .r { translate: 0 14px; filter: blur(6px); transition-duration: .5s; transition-delay: calc(var(--i, 0) * 45ms); }

/* ---- „Alle … Videos ansehen“: drei laufende Videos gefächert, rechts in der Mitte ---- */
.stapel-karte { position: absolute; top: 50%; width: 27%; aspect-ratio: 16 / 10; translate: 0 -50%; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 30px 60px -22px #000; transition: translate .7s cubic-bezier(.16,1,.3,1), rotate .7s cubic-bezier(.16,1,.3,1); }
.stapel-karte:nth-child(1) { left: 45%; rotate: -8deg; translate: 0 -46%; } .stapel-karte:nth-child(2) { left: 57%; rotate: 0deg; translate: 0 -56%; z-index: 1; } .stapel-karte:nth-child(3) { left: 69%; rotate: 8deg; translate: 0 -46%; }
.feld.alle:hover .stapel-karte:nth-child(1) { translate: -14px -48%; rotate: -10deg; } .feld.alle:hover .stapel-karte:nth-child(3) { translate: 14px -48%; rotate: 10deg; }
@media (max-width: 860px) {
  .stapel-karte { top: 26%; width: 50%; } .stapel-karte:nth-child(1) { left: 4%; } .stapel-karte:nth-child(2) { left: 25%; } .stapel-karte:nth-child(3) { left: 46%; }
}

/* ---- Schritte (Produktseite und Hire us): das Licht wandert – unten rechts in 1, weiter durch 2 nach oben rechts, oben links in 3 an ---- */
.so-kurz li:nth-child(1)::after { background: radial-gradient(64% 86% at 100% 108%, rgba(255,140,50,.62), rgba(239,83,28,.18) 48%, transparent 74%), repeating-linear-gradient(90deg, rgba(0,0,0,.3) 0 1px, transparent 1px 44px); }
.so-kurz li:nth-child(2)::after { background: radial-gradient(52% 76% at 0% 108%, rgba(255,140,50,.6), rgba(239,83,28,.16) 48%, transparent 74%), radial-gradient(52% 76% at 100% -8%, rgba(255,140,50,.6), rgba(239,83,28,.16) 48%, transparent 74%), repeating-linear-gradient(90deg, rgba(0,0,0,.3) 0 1px, transparent 1px 44px); }
.so-kurz li:nth-child(3)::after { background: radial-gradient(64% 86% at 0% -8%, rgba(255,140,50,.62), rgba(239,83,28,.18) 48%, transparent 74%), radial-gradient(40% 60% at 100% 110%, rgba(255,140,50,.3), transparent 72%), repeating-linear-gradient(90deg, rgba(0,0,0,.3) 0 1px, transparent 1px 44px); }
.so-kurz li:nth-child(2) .kurz-chips { top: auto; bottom: clamp(22px, 2.2vw, 32px); } .so-kurz li:nth-child(2) { padding-bottom: clamp(64px, 5vw, 76px); }
.ablauf .so-kurz { max-width: none; padding: 0; }
.ablauf .so-kurz ol { margin: 0; --g: clamp(12px, 1.4vw, 20px); }
.ablauf .so-kurz li { counter-increment: k; border-top: 1px solid rgba(255,255,255,.1); }
.ablauf .so-kurz h3 { margin-bottom: 0 !important; }

/* ---- Hire us: Anfrage – linke Spalte mittig ---- */
.anfrage-kasten { align-items: center; }
.anfrage-kopf { align-items: center; text-align: center; }
.anfrage-kopf > p { margin-left: auto; margin-right: auto; }
.anfrage-kopf .zusagen { margin-top: clamp(24px, 3vw, 40px); padding-top: 0; justify-content: center; text-align: left; }
.anfrage-kopf .direkt, .form-seite .anfrage-kopf .direkt { margin-top: clamp(24px, 3vw, 40px) !important; padding-top: 0; justify-content: center; }

/* ---- Notiz: Eselsohr unten rechts ---- */
.notiz { border-bottom-right-radius: 0; }
.notiz::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 58px; height: 58px; pointer-events: none; background: linear-gradient(135deg, #343436 0%, #1c1c1d 49%, #0a0a0b 50%); border-top-left-radius: 12px; box-shadow: -8px -8px 16px -8px rgba(0,0,0,.75); }

/* ---- Preise auf der Startseite: Lichtoval mit Punktraster hinter den Karten ---- */
.preise:not(.seite)::after { content: ""; position: absolute; left: 50%; top: 34%; width: min(1180px, 96vw); height: 520px; translate: -50% 0; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(34px); background: radial-gradient(closest-side, rgba(255,130,40,.6), rgba(239,83,28,.24) 55%, transparent); }
/* ---- Preis-Karten 1 und 2: feine Rillen, ein Hauch Licht von unten, helle Oberkante – ruhiger als Lifetime, aber nicht leer ---- */
.plan:not(.beliebt) { background: radial-gradient(100% 46% at 50% 112%, rgba(255,130,40,.2), transparent 70%), var(--glas), #101011; border-color: rgba(255,255,255,.12); }
.plan:not(.beliebt)::before { content: ""; position: absolute; left: 26px; right: 26px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); pointer-events: none; }

/* =====================================================================================================
   RUNDE 8 (14.10.2026): längerer Auslauf des Kopf-Lichts, größeres Lichtoval ohne Punkte, Fragen mit Licht am rechten Rand,
   Hire us – Zahlen-Kasten, dunklere Notiz, Ausklang
   ===================================================================================================== */
.glut:not(.hart) { -webkit-mask-image: linear-gradient(#000 calc(100% - var(--sp, 250px) - 200px), rgba(0,0,0,.74) calc(100% - var(--sp, 250px)), rgba(0,0,0,.42) calc(100% - var(--sp, 250px) * .55), rgba(0,0,0,.16) calc(100% - var(--sp, 250px) * .2), transparent calc(100% - 6px)); mask-image: linear-gradient(#000 calc(100% - var(--sp, 250px) - 200px), rgba(0,0,0,.74) calc(100% - var(--sp, 250px)), rgba(0,0,0,.42) calc(100% - var(--sp, 250px) * .55), rgba(0,0,0,.16) calc(100% - var(--sp, 250px) * .2), transparent calc(100% - 6px)); }
/* Preise (Startseite): größeres Lichtoval, ragt unten unter den Karten heraus – ohne Punkte */
.preise:not(.seite)::after { top: 30%; width: min(1500px, 110vw); height: 760px; filter: blur(46px); background: radial-gradient(closest-side, rgba(255,130,40,.62), rgba(239,83,28,.26) 55%, transparent); }
.preise:not(.seite) { padding-bottom: clamp(30px, 4vw, 70px); }
/* „Alle … Videos ansehen“: Text in der Mitte der Höhe und etwas weiter rechts */
.feld.alle { justify-content: center; padding-left: clamp(26px, 4.4vw, 76px); }
@media (max-width: 860px) { .feld.alle { justify-content: flex-end; padding-left: 14px; } }
/* Fragen: Licht am rechten Rand, von Frage zu Frage an anderer Stelle (wie bei den Schritten) */
.fragen details { position: relative; overflow: hidden; isolation: isolate; }
.fragen details::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .85; transition: opacity .4s; background: radial-gradient(34% 150% at 104% var(--fy, 110%), rgba(255,140,50,.5), rgba(239,83,28,.14) 50%, transparent 76%); }
.fragen details:nth-child(3n+2)::before { --fy: -10%; } .fragen details:nth-child(3n)::before { --fy: 50%; opacity: .5; }
.fragen details[open]::before, .fragen details:hover::before { opacity: 1; }
/* Hire us: Zahlen-Kasten im Stil der Seite */
.zahlen { position: relative; isolation: isolate; border-radius: 28px; border: 1px solid rgba(255,255,255,.12); box-shadow: var(--kante), 0 0 90px -34px rgba(255,120,30,.6);
  background: radial-gradient(60% 120% at 0% 120%, rgba(255,130,40,.42), transparent 62%), radial-gradient(50% 110% at 100% -20%, rgba(255,130,40,.34), transparent 62%), repeating-linear-gradient(90deg, rgba(0,0,0,.3) 0 1px, transparent 1px 46px), rgba(12,12,13,.84);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); }
.zahlen::before { content: ""; position: absolute; left: 40px; right: 40px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,214,170,.75), transparent); }
.zahlen li { padding: clamp(22px, 2.6vw, 38px) clamp(20px, 2.6vw, 40px); gap: 10px; border-left-color: rgba(255,255,255,.1); }
.zahlen b { font: 500 clamp(40px, 4.6vw, 68px)/1 var(--schrift); letter-spacing: -.045em; }
.zahlen small { font-size: .42em; font-weight: 500; color: #ffa24a; letter-spacing: -.01em; margin-left: 3px; }
.zahlen span { color: #cfccc4; font-size: 15px; }
.hire-leiste .marken { margin-top: clamp(26px, 3vw, 40px) !important; }
/* Hire us: Notiz dunkler und ruhiger */
.notiz { color: #e3dfd6; background: repeating-linear-gradient(transparent 0 35px, rgba(255,255,255,.045) 35px 36px), radial-gradient(70% 44% at 50% 112%, rgba(255,122,26,.24), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), #0b0b0c;
  border-color: rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 44px 90px -36px #000, 0 0 80px -34px rgba(255,130,40,.4); }
.notiz::after { background: linear-gradient(135deg, #262628 0%, #141415 49%, #0a0a0b 50%); }
/* Hire us: Ausklang statt abruptem Ende */
.ausklang-teil { position: relative; isolation: isolate; padding: clamp(10px, 2vw, 30px) var(--rand) clamp(72px, 9vw, 130px); }
.ausklang-teil::before { content: ""; position: absolute; left: 50%; top: 10%; width: min(900px, 96vw); height: 360px; translate: -50% 0; z-index: -1; border-radius: 50%; filter: blur(44px); background: radial-gradient(closest-side, rgba(255,130,40,.4), rgba(239,83,28,.14) 55%, transparent); }
.ausklang { display: grid; justify-items: center; gap: clamp(20px, 2.4vw, 32px); max-width: 900px; margin: 0 auto; text-align: center; }
.ausklang h2 { font-size: clamp(30px, 4.4vw, 60px); }
.ausklang .direkt { margin: 0 !important; }
.anfrage-teil { padding-bottom: clamp(48px, 6vw, 90px); }

/* =====================================================================================================
   RUNDE 9 (14.10.2026): Kopf-Licht setzt höher an und läuft verschieden lang aus, Zahlen-Kasten deckend, Notiz mit Stecknadel
   ===================================================================================================== */
/* Hire us: Zahlen-Kasten deckend, ohne Rillen; EIN Lichtverlauf zieht über den ganzen Kasten (unten links nach oben rechts) */
.zahlen { overflow: hidden; -webkit-backdrop-filter: none; backdrop-filter: none;
  background: radial-gradient(46% 130% at 0% 118%, rgba(255,140,50,.55), rgba(239,83,28,.16) 46%, transparent 72%), radial-gradient(38% 120% at 52% -30%, rgba(255,140,50,.3), transparent 70%),
  radial-gradient(46% 130% at 100% -18%, rgba(255,140,50,.5), rgba(239,83,28,.14) 46%, transparent 72%), linear-gradient(180deg, #19191a, #101011); }
.zahlen li::after { content: none; }
/* Notiz: Stecknadel statt Klebestreifen; Verweise im Text */
.notiz::before { top: -13px; width: 26px; height: 26px; rotate: none; border-radius: 50%; opacity: 1; background: radial-gradient(circle at 34% 30%, #ffe3bd 0 12%, #ffab4a 30%, #ef5f1c 68%, #a8380c 100%); box-shadow: 0 2px 0 rgba(255,255,255,.25) inset, 3px 9px 12px -2px rgba(0,0,0,.8), 0 0 22px rgba(255,130,40,.55); }
.notiz a { color: #ffa24a; text-underline-offset: 4px; }

/* ---- Runde 10: großer Check – Kleinigkeiten ---- */
.marke { font-size: 12px; } .prompt-kopf span { text-transform: none; letter-spacing: 0; }
.fuss nav a { padding: 7px 0; } .fuss .sozial a { padding: 7px 0; }
.pfad a, .pfad b { padding: 6px 0; }
@media (max-width: 860px) { .feld-zahl { font-size: 12px; } .mock-chips i { font-size: 12px; } }
.prompt-kopf { text-transform: none; letter-spacing: 0; font-size: 13.5px; }
.fehler-seite { margin-bottom: clamp(70px, 10vw, 170px); }
.fehler-zahl { margin: 0 0 6px !important; font: italic 400 clamp(72px, 12vw, 150px)/1 Newsreader, Georgia, serif; color: #ffa24a; }
/* Anmelde-Fenster im neuen Look: dunkles Glas, Licht von unten, Pillen-Knopf */
#du-fenster { background: rgba(4,4,5,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#du-fenster .du-karte { max-width: 400px; padding: 38px 30px 28px; border-radius: 28px; color: var(--text); border: 1px solid rgba(255,255,255,.13);
  background: radial-gradient(90% 46% at 50% 112%, rgba(255,122,26,.34), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), #101011; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 40px 90px -30px #000; }
#du-fenster .du-x { color: #e8e5de; border-radius: 50%; } #du-fenster .du-x:hover { background: rgba(255,255,255,.1); }
#du-fenster .du-logo { width: auto; height: auto; background: none; margin-bottom: 18px; } #du-fenster .du-logo img { width: 92px; }
#du-fenster h2 { color: var(--text); font: 500 26px/1.15 var(--schrift); letter-spacing: -.03em; }
#du-fenster .du-text { color: #c2c0ba; }
#du-fenster .du-f > span { color: #d8d6cf; font-weight: 600; } #du-fenster .du-f > span a { color: #ffa24a; }
#du-fenster input { height: 50px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.4); color: #fff; }
#du-fenster input:focus { outline: 2px solid #ffa24a; border-color: #ffa24a; }
#du-fenster .du-knopf { height: 52px; border-radius: 999px; background: var(--verlauf); color: #1d0e02; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 8px rgba(150,44,0,.35), 0 12px 34px -10px rgba(255,112,24,.6); }
#du-fenster .du-fehler { color: #ff8f7a; }
#du-fenster .du-fuss { color: #c2c0ba; } #du-fenster .du-fuss a { color: #ffa24a; font-weight: 600; }
#du-hinweis { border-radius: 999px; background: rgba(16,16,17,.94); border-color: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* =====================================================================================================
   RUNDE 11 (14.10.2026): kleine Dinge, die die Seite lebendiger machen – sparsam eingesetzt
   ===================================================================================================== */
/* Hauptknopf: der Lichtstreif zieht von selbst durch – langsam, weich, mit Pause; beim Überfahren sofort noch einmal */
.knopf.gold::after { left: 0; width: 46%; translate: -140% 0; background: linear-gradient(100deg, transparent, rgba(255,255,255,.2) 30%, rgba(255,255,255,.6) 50%, rgba(255,255,255,.2) 70%, transparent); animation: streif 5.6s cubic-bezier(.4,0,.25,1) infinite; }
.knopf.gold:hover::after { left: 0; transition: none; }
.knopf.gold.klein::after { animation-delay: 1.5s; }
@keyframes streif { 0% { translate: -140% 0; } 46% { translate: 330% 0; } 100% { translate: 330% 0; } }   /* 2,6 s Durchlauf, dann 3 s Pause */
/* Orange Akzentwörter leuchten leicht; im Kopf der Seite atmet das Leuchten langsam */
/* Orange Akzentwörter: die Farbe im Wort selbst wandert langsam (Orange, Gold, dunkles Orange) – Lucas Wunsch; dahinter nur ein leichter Schein */
body.neu :is(h1, h2) em { padding-inline: .04em .1em; background: linear-gradient(100deg, #ff7a1a 0%, #ffbe6a 22%, #e2520f 46%, #ffa24a 70%, #ff7a1a 100%); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; filter: drop-shadow(0 0 12px rgba(255,130,40,.16)); animation: farbe 9s linear infinite; }
@keyframes farbe { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
/* Punkt im Zähler-Etikett pulsiert */
.auge .punkt, .frei .punkt { animation: puls 2.4s ease-out infinite; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(255,138,42,.55), 0 0 14px rgba(255,138,42,.9); } 100% { box-shadow: 0 0 0 9px rgba(255,138,42,0), 0 0 14px rgba(255,138,42,.9); } }
/* Kopfleiste: ein feiner Lichtpunkt wandert langsam über den Rand, unten sitzt ein warmer Schein; aktiver Punkt bekommt eine Lichtlinie */
.kopf-in::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: conic-gradient(from var(--w), transparent 0 74%, rgba(255,178,74,.9) 86%, rgba(255,243,224,.95) 90%, rgba(255,122,26,.7) 94%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: rundlauf 9s linear infinite; }
.kopf-in::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,190,120,.7), transparent); opacity: .6; transition: opacity .4s, left .4s, right .4s; }
.kopf.gerollt .kopf-in { background: rgba(12,12,13,.86); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 18px 40px -18px rgba(0,0,0,.9), 0 14px 46px -22px rgba(255,120,30,.55); }
.kopf.gerollt .kopf-in::after { opacity: 1; left: 12%; right: 12%; }
.kopf .haupt a { position: relative; transition: color .2s, background-color .25s; }
.kopf .haupt a::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 22px; height: 2px; translate: -50% 0; scale: 0 1; border-radius: 2px; background: linear-gradient(90deg, #ff7a1a, #ffc98a); box-shadow: 0 0 10px rgba(255,130,40,.8); transition: scale .3s cubic-bezier(.16,1,.3,1); }
.kopf .haupt a:hover::after { scale: .8 1; } .kopf .haupt a[aria-current]::after { scale: 1 1; }
.kopf .logo img { transition: filter .3s; } .kopf .logo:hover img { filter: drop-shadow(0 0 10px rgba(255,170,60,.7)); }
@media (prefers-reduced-motion: reduce) { .knopf.gold::after, body.neu :is(h1, h2) em, .auge .punkt, .frei .punkt, .kopf-in::before { animation: none; } }

/* ---- Runde 13: Bibliotheks-Kopf auf beiden Seiten gleich hoch (AI Prompts hat keine Filter mehr), Monatswert im Jahresplan ---- */
.bib-kopf { min-height: 322px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.plan-monat { display: inline-block; margin-right: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255,138,42,.16); border: 1px solid rgba(255,154,60,.5); color: #ffc48a; font-weight: 600; font-size: 13.5px; }


/* ===== RUNDE 14 (14.10.2026): Bestellung prüfen, Kündigung, Bleib-Angebot, Cookie-Hinweis ===== */
#du-fenster .du-bestellung { max-width: 460px; }
#du-fenster .du-bestellung h2 { margin-bottom: 18px; text-align: left; }
#du-fenster .du-posten { margin: 0 0 12px; } #du-fenster .du-posten div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
#du-fenster .du-posten dt { font-weight: 600; font-size: 16px; } #du-fenster .du-posten dd { margin: 0; color: #c2c0ba; font-size: 14.5px; white-space: nowrap; } #du-fenster .du-posten dd b { color: var(--text); font-size: 18px; font-weight: 600; }
#du-fenster .du-klein { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: #b9b6af; }
#du-fenster .du-summe { display: flex; align-items: baseline; gap: 8px; margin: 14px 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); font-size: 15px; }
#du-fenster .du-summe span { margin-right: auto; color: #d8d6cf; } #du-fenster .du-summe b { font-size: 22px; font-weight: 600; } #du-fenster .du-summe small { color: #a5a29b; font-size: 12.5px; }
#du-fenster .du-haken { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; margin: 0 0 14px; padding: 14px; border-radius: 16px; border: 1px solid rgba(255,154,60,.45); background: rgba(255,122,26,.07); font-size: 13.5px; line-height: 1.5; color: #e4e1da; cursor: pointer; }
#du-fenster .du-haken input { width: 22px; height: 22px; margin: 1px 0 0; padding: 0; accent-color: #ff8a2a; border-radius: 6px; cursor: pointer; }
#du-fenster .du-bestellung .du-fuss { font-size: 12.5px; line-height: 1.5; color: #a5a29b; } #du-fenster .du-bestellung .du-fuss a { color: #ffa24a; font-weight: 500; }
.kuend-grund[hidden], .kuend-datum[hidden], .ck-wahl[hidden] { display: none !important; }
.kuend-fertig p { margin: 0 0 12px; line-height: 1.6; } .kuend-fertig:focus { outline: none; } .bleib-hinweis a { color: #ffa24a; }
.kuend .anfrage-form .knopf { justify-self: stretch; justify-content: center; }
.bleib { width: 100%; display: grid; gap: 12px; justify-items: start; padding: 16px; border-radius: 18px; border: 1px solid rgba(255,154,60,.5); background: rgba(255,122,26,.09); }
.bleib p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #e4e1da; }
.fuss nav .fuss-link { display: block; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#du-cookies { position: fixed; left: 50%; bottom: 16px; translate: -50% 0; z-index: 2147482000; width: min(calc(100vw - 24px), 880px); display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; padding: 20px 22px; border-radius: 24px;
  background: rgba(14,14,15,.94); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 24px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); font-size: 14px; line-height: 1.5; color: #c9c6bf; }
#du-cookies b { color: var(--text); font-size: 15.5px; font-weight: 600; } #du-cookies p { margin: 4px 0 0; } #du-cookies a { color: #ffa24a; }
#du-cookies .ck-wahl { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; } #du-cookies .ck-wahl label { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: #e4e1da; cursor: pointer; }
#du-cookies .ck-wahl input { width: 20px; height: 20px; accent-color: #ff8a2a; }
#du-cookies .ck-knoepfe { display: grid; gap: 8px; min-width: 190px; } #du-cookies .ck-knoepfe .knopf { justify-content: center; min-height: 44px; padding: 0 16px; font-size: 14.5px; }
@media (max-width: 720px) { #du-cookies { grid-template-columns: 1fr; padding: 18px; gap: 14px; max-height: calc(100vh - 24px); overflow-y: auto; } #du-cookies .ck-knoepfe { grid-template-columns: 1fr 1fr; } #du-cookies .ck-knoepfe .knopf:nth-child(2) { grid-column: 1 / -1; grid-row: 2; } }
#du-fenster .du-haken.leise { border-color: rgba(255,255,255,.12); background: none; padding: 12px 14px; color: #c9c6bf; }
#du-fenster .du-klein a { color: #ffa24a; }
.fuss nav .fuss-link { padding: 7px 0; color: #dedcd5; font-size: 14.5px; line-height: 1.3; } .fuss nav .fuss-link:hover { color: var(--gold); }

/* ----- Tablet (700 bis 980 px): Menü bleibt sichtbar, Pläne nebeneinander ----- */
@media (min-width: 700px) and (max-width: 860px) {
  .kopf .haupt { display: flex; position: static; transform: none; margin: 0 auto 0 4px; gap: 0; }
  .kopf .haupt a { padding: 10px 10px; font-size: 14px; }
  .kopf .nur-breit { display: inline-flex; }
  .menue-knopf { display: none; }
  .kopf-in { gap: 8px; }
}
@media (min-width: 700px) and (max-width: 980px) {
  .plaene.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .plaene:not(.drei) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan { padding: 20px 18px; border-radius: 24px; }
  .plan.beliebt { order: 0; }
  .plan-preis { height: 54px; gap: 6px; } .plan-preis b { font-size: 40px; } .plan-preis span, .plan-preis s { font-size: 13.5px; margin-bottom: 6px; }
  .plan-sub { height: 5.2em; font-size: 13px; }
  .plan-monat { display: block; width: fit-content; margin: 0 0 6px; font-size: 12.5px; }
  .plan ul { margin: 16px 0 20px; padding-top: 16px; gap: 10px; } .plan li { font-size: 14px; padding-left: 24px; }
  .plan .knopf { min-height: 48px; padding: 0 10px; font-size: 14px; }
}

/* ----- Kundenstimmen: Lichtwelle zieht über die Karten (nur auf den Flächen, nicht in den Lücken). --p = Lage des Streifs in der Karte ----- */
.schieber.laufband .schieber-lauf { position: relative; --s: -9999px; }
.schieber.laufband .stimme { position: relative; overflow: hidden; isolation: isolate; --p: calc(var(--s) - var(--ox, 0px)); }
.schieber.laufband .stimme > * { position: relative; z-index: 1; }
.schieber.laufband .stimme::before, .schieber.laufband .stimme::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.schieber.laufband .stimme::before { z-index: 0; mix-blend-mode: screen;
  background: linear-gradient(104deg, transparent calc(var(--p) - 380px), rgba(255,90,10,.12) calc(var(--p) - 220px), rgba(255,120,30,.26) calc(var(--p) - 80px),
    rgba(255,176,90,.34) var(--p), rgba(255,110,25,.18) calc(var(--p) + 80px), transparent calc(var(--p) + 230px)); }
.schieber.laufband .stimme::after { z-index: 2; padding: 1px;
  background: linear-gradient(104deg, transparent calc(var(--p) - 160px), rgba(255,170,80,.75) calc(var(--p) - 30px), #fff1de var(--p), rgba(255,140,50,.6) calc(var(--p) + 40px), transparent calc(var(--p) + 150px));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
@media (prefers-reduced-motion: reduce) { .schieber.laufband .stimme::before, .schieber.laufband .stimme::after { display: none; } }

/* ----- Kundenstimmen: jede Karte etwas anders (wie echte Nachrichten), Bilder nie doppelt ----- */
.stimme figcaption time { margin-left: auto; align-self: flex-end; font-size: 12.5px; color: #8f8d86; white-space: nowrap; }
.kopfbild { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; }
.kopfbild.emoji { background: radial-gradient(circle at 50% 35%, #2b2b2e, #161618); border: 1px solid rgba(255,255,255,.12); font-size: 25px; line-height: 1; }
.kopfbild.logo-welle { background: #050505; border: 1px solid rgba(255,255,255,.22); } .kopfbild.logo-welle svg { width: 30px; height: 30px; }
.kopfbild.logo-rahmen { background: #1a120b; border: 1px solid rgba(255,154,60,.45); } .kopfbild.logo-rahmen svg { width: 32px; height: 32px; }
.schieber.laufband .stimme-breit { flex-basis: min(480px, 84vw); }
.schieber.laufband .stimme-schmal { flex-basis: min(380px, 80vw); } .stimme-schmal blockquote { font-size: clamp(16px, 1.25vw, 18px); }
.schieber.laufband .stimme-kurz { flex-basis: min(340px, 78vw); } .stimme-kurz blockquote { font: italic 400 clamp(21px, 1.75vw, 25px)/1.35 var(--akzent, "Newsreader", serif); letter-spacing: -.01em; }
.schieber.laufband .stimme-zitat { flex-basis: min(360px, 78vw); }
.stimme-zitat blockquote { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.38; font-weight: 500; letter-spacing: -.02em; }
.stimme-zitat blockquote::before { content: "“"; display: block; height: 34px; font: italic 72px/1 "Newsreader", serif; color: #ff9a3c; }
.schieber.laufband .stimme-chat { flex-basis: min(440px, 82vw); }
.stimme-quelle { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: #a5a29b; }
.stimme-quelle svg { width: 16px; height: 16px; fill: none; stroke: #ff9a3c; stroke-width: 1.8; } .stimme-quelle svg circle:last-child { fill: #ff9a3c; stroke: none; }
.stimme-chat blockquote { align-self: flex-start; padding: 14px 16px; border-radius: 20px 20px 20px 6px; background: #262628; font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.5; }

/* ----- Rechtstexte: Lichtsäulen hängen von oben herab (gespiegelt) und laufen kurz nach unten aus ----- */
.glut.haengend, .glut.haengend:not(.hart) { -webkit-mask-image: linear-gradient(#000 35%, rgba(0,0,0,.45) 70%, transparent); mask-image: linear-gradient(#000 35%, rgba(0,0,0,.45) 70%, transparent); }
.glut.haengend::after { background: linear-gradient(0deg, #0a0a0b 0, rgba(10,10,11,.6) 30%, rgba(10,10,11,0) 75%); }
.recht-kopf { position: relative; }
.bib-kopf.recht-kopf { min-height: 0; padding-top: clamp(150px, 15vw, 190px); padding-bottom: clamp(18px, 3vw, 36px); }
@media (max-width: 699px) { .bib-kopf.recht-kopf { padding-top: 130px; } }

/* ----- Blog (nur über die Fußleiste erreichbar) ----- */
.blog-kopf { min-height: 0; padding-top: clamp(130px, 13vw, 170px); }
.blog-kopf h1 { font-size: clamp(38px, 5.4vw, 72px); }
.artikel-kopf { max-width: 920px; padding-top: clamp(34px, 5vw, 64px); }
.artikel-kopf h1 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.08; text-wrap: balance; }
.blog-meta { margin: 0; font-size: 13.5px; color: var(--leise); }
.artikel-kopf .blog-meta { margin-top: 18px; }
.blog-pfad { padding-top: clamp(96px, 9vw, 120px); max-width: 920px; margin: 0 auto; }
.blog-liste { max-width: 1240px; margin: 0 auto; padding: clamp(16px, 3vw, 40px) var(--rand) clamp(72px, 9vw, 120px); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 18px; }
.blog-karte { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.4vw, 30px); border-radius: 26px; text-decoration: none; color: inherit;
  background: var(--glas), #101011; border: 1px solid var(--linie); box-shadow: var(--kante); transition: border-color .25s, transform .25s; }
.blog-karte:hover { border-color: rgba(255,154,60,.55); transform: translateY(-2px); }
.blog-karte h2 { margin: 0; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.18; letter-spacing: -.02em; text-wrap: balance; }
.blog-karte p { margin: 0; color: #c2c0ba; font-size: 15.5px; line-height: 1.55; }
.blog-weiter { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; color: #ffa24a; font-weight: 600; font-size: 15px; }
.blog-weiter svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: translate .2s; } .blog-karte:hover .blog-weiter svg { translate: 3px 0; }
.blog-mehr { padding-top: 0; } .blog-mehr-titel { grid-column: 1 / -1; margin: 0 0 6px; text-align: center; font-size: clamp(28px, 3.2vw, 42px); }
.artikel { max-width: 760px; font-size: 17.5px; line-height: 1.75; }
.artikel h2 { margin-top: 2em; font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.02em; } .artikel h3 { font-size: clamp(19px, 1.7vw, 22px); margin-top: 1.6em; }
.artikel li { margin-bottom: .45em; } .artikel ol { padding-left: 1.4em; }
.artikel blockquote { margin: 0 0 1.2em; padding: 18px 22px; border-radius: 18px; border: 1px solid rgba(255,154,60,.35); background: rgba(255,122,26,.06); color: #e4e1da; font-size: 16px; }
.artikel blockquote p { margin: 0 !important; }
.artikel-ende { margin-top: 3em; padding: clamp(24px, 3vw, 36px); border-radius: 28px; text-align: center; border: 1px solid rgba(255,154,60,.45);
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,122,26,.22), transparent 70%), #101011; }
.artikel-ende h2 { margin: 0 0 10px; } .artikel-ende p { margin: 0 auto 20px !important; max-width: 520px; color: #c9c6bf; }
.artikel-ende .knopf { color: #1d0e02; text-decoration: none; }

/* ----- Kundenstimmen, Runde 15: alle Karten gleich (Breite, Schrift), oben „Nachricht auf Instagram“, Bilder verschieden ----- */
.schieber.laufband .stimme { flex-basis: min(430px, 82vw); }
.stimme blockquote { font-size: clamp(16px, 1.25vw, 17.5px); line-height: 1.55; letter-spacing: -.005em; }
.stimme-quelle time { margin-left: auto; color: #8f8d86; font-size: 12.5px; }
.stimme figcaption .kopfbild, .stimme figcaption .kopfkreis { width: 48px; height: 48px; flex: 0 0 48px; }
.kopfbild.memoji { object-fit: cover; background: radial-gradient(circle at 50% 30%, #3a3a3e, #17171a); }
.kopfbild.logo-db, .kopfbild.logo-ve { border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.14); } .kopfbild svg { width: 100%; height: 100%; display: block; }
.kopfkreis.kreis-clara { background: linear-gradient(140deg, #fff3e3, #ffd2a8); color: #4a2a10; }
.kopfkreis.kreis-sj { background: #141416; color: #ffb47a; box-shadow: inset 0 0 0 2px #ff8a2a; font-size: 15px; }

/* ----- AI Prompts: Erklärtext unter dem Raster (für Suchmaschinen und Neulinge) ----- */
.bib-wissen { max-width: var(--weit); margin: 0 auto; padding: clamp(40px, 6vw, 88px) var(--rand) 0; }
.bib-wissen h2 { margin: 0 0 clamp(20px, 2.6vw, 32px); text-align: center; font-size: clamp(28px, 3.4vw, 44px); }
.wissen-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wissen-raster p { margin: 0; padding: clamp(20px, 2.2vw, 28px); border-radius: 24px; background: var(--glas), #101011; border: 1px solid var(--linie); box-shadow: var(--kante); color: #c9c6bf; font-size: 15.5px; line-height: 1.6; }
.wissen-raster a { color: #ffa24a; text-underline-offset: 3px; }
@media (max-width: 860px) { .wissen-raster { grid-template-columns: 1fr; } }
.blog-liste { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 400px)); justify-content: center; }
@media (max-width: 699px) { .blog-pfad b, .blog-pfad span:last-of-type { display: none; } .blog-pfad { padding-top: 104px; } }
.blog-karte h3 { margin: 0; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.18; letter-spacing: -.02em; text-wrap: balance; }
.kopfbild.memoji { padding: 3px; background: radial-gradient(circle at 50% 30%, #ffd9b0, #ff9a5a 70%, #e0642a); box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.detail-text { margin: -4px 0 18px; color: #c2c0ba; font-size: 15.5px; line-height: 1.55; max-width: 60ch; }
/* ----- Blog-Artikel: Kurz gesagt, Inhalt, Video, Animation, Autor ----- */
.kurz-gesagt { margin: 0 0 1.6em; padding: 18px 22px; border-radius: 20px; border: 1px solid rgba(255,154,60,.45); background: rgba(255,122,26,.07); }
.kurz-gesagt b { display: block; margin-bottom: 4px; color: #ffa24a; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.kurz-gesagt p { margin: 0 !important; color: #ecebe4; font-size: 17px; line-height: 1.6; }
.inhalt { margin: 0 0 2em; padding: 18px 22px; border-radius: 20px; background: var(--glas), #101011; border: 1px solid var(--linie); }
.inhalt b { display: block; margin-bottom: 8px; color: var(--text); font-size: 15px; }
.inhalt ol { margin: 0 !important; padding-left: 1.3em; display: grid; gap: 4px; font-size: 15.5px; } .inhalt a { color: #d8d6cf; text-decoration: none; } .inhalt a:hover { color: #ffa24a; }
.artikel h2[id] { scroll-margin-top: 100px; }
.artikel-video { margin: 2em 0; } .artikel-video .vid { border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.1); }
.artikel-video figcaption { margin-top: 10px; font-size: 14px; color: var(--leise); text-align: center; } .artikel-video figcaption a { color: #ffa24a; }
.artikel-werkbank { margin: 2.2em calc(-1 * min(120px, (100vw - 760px) / 2 - 16px)); } .artikel-werkbank .werkbank { margin: 0; }
.artikel-werkbank h3 { margin: 0; font-size: inherit; }
.artikel .fragen { margin: 0 0 1.5em; } .artikel .fragen details p { margin: 0 !important; }
.autor { display: flex; gap: 16px; align-items: flex-start; margin-top: 2.6em; padding: 20px; border-radius: 22px; background: var(--glas), #101011; border: 1px solid var(--linie); }
.autor img { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.autor b { color: var(--text); } .autor p { margin: 4px 0 0 !important; font-size: 15px; line-height: 1.55; color: #c2c0ba; }
.blog-meta a { color: inherit; text-underline-offset: 3px; }
.reihe.mitte { justify-content: center; flex-wrap: wrap; gap: 10px; }
@media (max-width: 860px) { .artikel-werkbank { margin-left: 0; margin-right: 0; } }
.artikel-ende .knopf.glas { color: var(--text); }
.kurz-gesagt b { font-size: 15px; letter-spacing: 0; text-transform: none; }

/* ===== Academy (Lucas Wunsch, Vorbild MotionSites Academy) ===== */
.ak-kopf { min-height: 0; padding-top: clamp(130px, 13vw, 170px); }
.ak-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 0 !important; }
.ak-chips span { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 14px; border-radius: 999px; font-size: 14px; color: #e4e1da; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.ak-chips svg, .ak-schloss svg, .ak-zu-symbol svg, .ak-seite svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ak { max-width: var(--weit); margin: 0 auto; padding: clamp(24px, 3vw, 44px) var(--rand) clamp(72px, 9vw, 120px); }
.ak-erste { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; padding: clamp(14px, 1.6vw, 20px); border-radius: 30px; text-decoration: none; color: inherit;
  background: radial-gradient(120% 120% at 100% 0%, rgba(255,122,26,.18), transparent 55%), var(--glas), #101011; border: 1px solid rgba(255,154,60,.35); box-shadow: var(--kante); transition: border-color .25s; }
.ak-erste:hover { border-color: rgba(255,154,60,.7); }
.ak-bild { position: relative; display: block; border-radius: 20px; overflow: hidden; background: #141415; }
.ak-bild .vid { border-radius: 0; box-shadow: none; }
.ak-start { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; background: var(--verlauf); color: #1d0e02; font-weight: 600; font-size: 15px; box-shadow: 0 10px 30px -8px rgba(255,120,30,.7); }
.ak-start svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ak-erste-text { display: grid; gap: 12px; padding-right: clamp(4px, 2vw, 24px); }
.ak-nr { font: italic 400 clamp(30px, 3vw, 40px)/1 "Newsreader", serif; color: #ff9a3c; }
.ak-erste h2 { margin: 0; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.ak-erste p, .ak-karte p { margin: 0; color: #c2c0ba; font-size: 15.5px; line-height: 1.55; }
.ak-meta { font-size: 13.5px; color: var(--leise); }
.ak-zwischen { margin: clamp(56px, 7vw, 96px) 0 clamp(24px, 3vw, 36px); text-align: center; font-size: clamp(28px, 3.4vw, 44px); }
.ak-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.ak-karte { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 22px; border-radius: 26px; text-decoration: none; color: inherit; background: var(--glas), #101011; border: 1px solid var(--linie); box-shadow: var(--kante); transition: border-color .25s, transform .25s; }
.ak-karte:hover { border-color: rgba(255,154,60,.55); transform: translateY(-2px); }
.ak-karte > :not(.ak-bild) { margin-left: 10px; margin-right: 10px; }
.ak-karte .ak-bild { margin-bottom: 6px; } .ak-karte .ak-nr { font-size: 26px; }
.ak-karte h3 { margin: 0; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.2; letter-spacing: -.02em; }
.ak-schloss { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(10,10,11,.78); border: 1px solid rgba(255,255,255,.18); color: #ffb47a; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ak-zu { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; margin-top: clamp(40px, 5vw, 64px); padding: clamp(22px, 2.6vw, 32px); border-radius: 28px;
  background: radial-gradient(90% 140% at 0% 0%, rgba(255,122,26,.2), transparent 60%), #101011; border: 1px solid rgba(255,154,60,.45); }
.ak-zu-symbol { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; background: var(--verlauf); color: #1d0e02; } .ak-zu-symbol svg { width: 24px; height: 24px; stroke-width: 2; }
.ak-zu h2 { margin: 0 0 6px; font-size: clamp(22px, 2.2vw, 28px); } .ak-zu p { margin: 0 !important; color: #c9c6bf; font-size: 15.5px; }
.ak-zu .reihe { gap: 10px; flex-wrap: wrap; } .ak-zu .knopf { white-space: nowrap; }
.ak-lektion { max-width: 1180px; margin: 0 auto; padding: 0 var(--rand) clamp(72px, 9vw, 120px); display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.ak-lektion .artikel { max-width: none; margin: 0; padding: 0; }
.ak-lektion-kopf { max-width: 1180px; }
.ak-seite { position: sticky; top: 100px; padding: 18px; border-radius: 22px; background: var(--glas), #101011; border: 1px solid var(--linie); }
.ak-seite b { display: block; margin: 0 0 10px 6px; font-size: 15px; }
.ak-seite ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ak-seite a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px; border-radius: 12px; color: #d8d6cf; text-decoration: none; font-size: 14.5px; line-height: 1.3; }
.ak-seite a span { font: italic 400 17px/1 "Newsreader", serif; color: #ff9a3c; flex: 0 0 22px; } .ak-seite a svg { margin-left: auto; flex: 0 0 15px; color: #8f8d86; }
.ak-seite a:hover { background: rgba(255,255,255,.05); } .ak-seite a[aria-current] { background: rgba(255,122,26,.12); color: #fff; }
.ak-gesperrt { position: relative; margin-top: 1em; filter: blur(5px); opacity: .55; user-select: none; pointer-events: none; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.ak-zu-lektion { margin-top: -10px; grid-template-columns: auto 1fr; } .ak-zu-lektion .reihe { grid-column: 1 / -1; }
.ak-weiter { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 3em; }
.ak-weiter a { display: grid; gap: 4px; padding: 16px 18px; border-radius: 18px; background: var(--glas), #101011; border: 1px solid var(--linie); color: var(--text); text-decoration: none; font-weight: 600; line-height: 1.3; }
.ak-weiter a:hover { border-color: rgba(255,154,60,.55); } .ak-weiter small { color: var(--leise); font-weight: 400; font-size: 13px; } .ak-weiter .ak-nach { text-align: right; }
.artikel .schritt-box { margin: 1.2em 0; padding: 16px 20px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); font-size: 16px; }
.artikel .schritt-box b { color: #ffa24a; }
.artikel code, .artikel .befehl { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .9em; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 1px 6px; }
.artikel .befehl { display: block; margin: .8em 0 1.2em; padding: 14px 16px; white-space: pre-wrap; color: #f0eee8; line-height: 1.55; }
@media (max-width: 960px) { .ak-lektion { grid-template-columns: minmax(0, 1fr); } .ak-seite { position: static; } }
@media (max-width: 760px) { .ak-erste { grid-template-columns: minmax(0, 1fr); } .ak-zu { grid-template-columns: auto 1fr; } .ak-zu > .knopf, .ak-zu > .reihe { grid-column: 1 / -1; justify-self: stretch; justify-content: center; } .ak-weiter { grid-template-columns: 1fr; } .ak-weiter .ak-nach { text-align: left; } }

/* ----- AI Prompts: „So entstehen diese KI-Videos“ im Stil der Seite (Kopf wie überall, Schritte wie auf der Produktseite) ----- */
.bib-so { padding-top: clamp(72px, 9vw, 136px); }
.bib-so > .so-kopf { margin-bottom: clamp(32px, 4vw, 56px); }
.bib-so .so-kurz { max-width: var(--weit); padding-left: 0; padding-right: 0; }
.bib-so .so-kurz ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ak-band { max-width: var(--weit); margin: clamp(16px, 2vw, 24px) auto 0; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 28px);
  border-radius: 26px; text-decoration: none; color: inherit; background: radial-gradient(80% 160% at 0% 50%, rgba(255,122,26,.2), transparent 60%), var(--glas), #101011; border: 1px solid rgba(255,154,60,.4); box-shadow: var(--kante); transition: border-color .25s; }
.ak-band:hover { border-color: rgba(255,154,60,.75); }
.ak-band-symbol { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--verlauf); color: #1d0e02; }
.ak-band-symbol svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.ak-band-text { display: grid; gap: 3px; } .ak-band-text b { font-size: clamp(18px, 1.6vw, 21px); } .ak-band-text span { color: #c2c0ba; font-size: 15px; }
@media (max-width: 860px) { .bib-so .so-kurz ol { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .ak-band { grid-template-columns: auto 1fr; } .ak-band .knopf { grid-column: 1 / -1; justify-content: center; } }
/* Academy: alle Vorschaubilder im Querformat */
.ak-bild .vid { aspect-ratio: 16 / 9 !important; }

/* ===== Blog Runde 17: eine Breite für alles, Abstand Fragen, verschiedene Grafiken je Artikel ===== */
.artikel { max-width: 860px; }
.artikel > *, .artikel .fragen, .artikel .fragen details { max-width: none; }
.artikel-werkbank { margin: 2.2em 0; }
.artikel .fragen { margin: 18px 0 1.5em; }
.artikel h2#fragen { margin-bottom: 0; }
.artikel .grafik-text { margin-top: -.4em !important; font-size: 14.5px; color: var(--leise); text-align: center; }
/* Zwei Wege */
.zwei-wege { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 1.4em 0 1.6em; }
.weg-karte { position: relative; padding: 22px; border-radius: 22px; background: var(--glas), #101011; border: 1px solid var(--linie); }
.weg-karte.gewinner { border-color: rgba(255,154,60,.55); background: radial-gradient(120% 100% at 100% 0%, rgba(255,122,26,.18), transparent 60%), #101011; }
.weg-marke { display: inline-block; margin-bottom: 10px; padding: 4px 11px; border-radius: 999px; font-size: 13px; background: rgba(255,255,255,.07); color: #d8d6cf; }
.gewinner .weg-marke { background: var(--verlauf); color: #1d0e02; font-weight: 600; }
.weg-karte h3 { margin: 0 0 6px !important; font-size: 20px; } .weg-karte p { margin: 0 !important; font-size: 15.5px; line-height: 1.6; }
/* Bausteine */
.bausteine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 1.2em 0 1.6em; counter-reset: b; }
.baustein { padding: 20px 22px; border-radius: 20px; background: var(--glas), #101011; border: 1px solid var(--linie); }
.baustein-nr { font: italic 400 30px/1 "Newsreader", serif; color: #ff9a3c; }
.baustein h3 { margin: 8px 0 6px !important; font-size: 19px; } .baustein p { margin: 0 !important; font-size: 15.5px; line-height: 1.6; }
/* Formate */
.formate { display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px, 3vw, 34px); margin: 1.6em 0 1em; padding: 26px 16px; border-radius: 24px; background: radial-gradient(60% 80% at 50% 100%, rgba(255,122,26,.16), transparent 70%), #0e0e0f; border: 1px solid var(--linie); }
.format { position: relative; display: grid; place-content: center; text-align: center; gap: 4px; border-radius: 14px; border: 2px solid rgba(255,154,60,.7); background: rgba(255,255,255,.03); }
.format b { font-size: 18px; color: var(--text); } .format small { font-size: 12.5px; color: var(--leise); }
.f916 { width: clamp(84px, 13vw, 120px); aspect-ratio: 9 / 16; overflow: hidden; } .f11 { width: clamp(96px, 15vw, 140px); aspect-ratio: 1; } .f169 { width: clamp(150px, 26vw, 240px); aspect-ratio: 16 / 9; }
.format.f916 .sicher { position: absolute; left: 10%; right: 18%; top: 14%; bottom: 30%; border-radius: 8px; background: rgba(255,154,60,.14); border: 1px dashed rgba(255,154,60,.6); }
.format.f916 b, .format.f916 small { position: relative; }
/* Zeitstrahl */
.zeitstrahl { display: flex; gap: 4px; margin: 1.2em 0 1em; }
.zs-teil { flex: var(--anteil) 1 0; min-width: 0; padding: 14px 10px 12px; border-radius: 12px; background: linear-gradient(180deg, rgba(255,140,50,.3), rgba(255,140,50,.08)); border: 1px solid rgba(255,154,60,.35); display: grid; gap: 4px; }
.zs-teil:nth-child(even) { background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02)); border-color: rgba(255,255,255,.14); }
.zs-zeit { font-size: 12px; color: var(--leise); white-space: nowrap; } .zs-teil b { font-size: 14.5px; line-height: 1.2; overflow-wrap: anywhere; }
/* Vergleich */
.vergleich { margin: 1.2em 0 1.6em; border-radius: 22px; overflow: hidden; border: 1px solid var(--linie); background: #101011; }
.vergleich table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.vergleich th, .vergleich td { padding: 14px 16px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.07); vertical-align: top; }
.vergleich thead th { font-size: 14px; color: var(--leise); font-weight: 600; background: rgba(255,255,255,.03); }
.vergleich thead th:last-child { color: #ffa24a; } .vergleich tbody th { color: var(--text); font-weight: 600; width: 34%; }
.vergleich td:last-child { background: rgba(255,122,26,.06); } .vergleich tr:last-child th, .vergleich tr:last-child td { border-bottom: 0; }
/* Bildstreifen */
.bildstreifen { display: flex; gap: 6px; margin: 1.4em 0 1em; padding: 14px; border-radius: 18px; background: #0e0e0f; border: 1px solid var(--linie); overflow: hidden; }
.bild-k { flex: 1 1 0; aspect-ratio: 16 / 9; display: grid; place-items: end start; padding: 6px; border-radius: 8px; background: linear-gradient(135deg, rgba(255,140,50,.35), rgba(255,140,50,.05)); border: 1px solid rgba(255,154,60,.35); }
.bild-k:nth-child(6) { background: none; border-color: transparent; place-items: center; }
.bild-k i { font-style: normal; font-size: 12px; color: #f0eee8; }
@media (max-width: 640px) {
  .zwei-wege, .bausteine { grid-template-columns: minmax(0, 1fr); }
  .zeitstrahl { flex-wrap: wrap; } .zs-teil { flex: 1 1 calc(33% - 4px); }
  .vergleich { overflow-x: auto; } .vergleich table { font-size: 14px; } .vergleich th, .vergleich td { padding: 11px 10px; }
  .bild-k:nth-child(n+4):not(:nth-child(6)):not(:nth-last-child(-n+2)) { display: none; }
}
.kopfkreis.kreis-mara { background: linear-gradient(140deg, #2b2b30, #141416); color: #ffb47a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.ak-zwischen { margin-top: 0 !important; padding-top: clamp(56px, 7vw, 96px); }
@media (max-width: 640px) { .zeitstrahl { flex-wrap: nowrap; gap: 3px; } .zs-teil { flex: var(--anteil) 1 0; padding: 10px 6px 9px; } .zs-teil b { font-size: 12.5px; } .zs-zeit { font-size: 10.5px; } }
@media (max-width: 640px) {   /* am Handy als senkrechter Zeitstrahl: keine getrennten Wörter */
  .zeitstrahl { flex-direction: column; gap: 6px; }
  .zs-teil { flex: none; display: grid; grid-template-columns: 74px 1fr; align-items: center; padding: 12px 14px; }
  .zs-zeit { font-size: 12.5px; } .zs-teil b { font-size: 15px; overflow-wrap: normal; }
}

/* AI Prompts: alle drei Schritte auf einer Ebene (Chips immer oben, gleiche Höhe) */
.bib-so .so-kurz li:nth-child(2) .kurz-chips { top: clamp(22px, 2.2vw, 32px); bottom: auto; }
.bib-so .so-kurz li:nth-child(2) { padding-bottom: clamp(22px, 2.2vw, 32px); }
.bib-so .so-kurz ol { align-items: stretch; }

/* ===== Academy Runde 18: Lernpfad, Fortschritt, klare Weiter-Knöpfe ===== */
.ak-fortschritt { max-width: 460px; margin: 26px auto 0; display: grid; gap: 10px; }
.ak-fortschritt p { margin: 0 !important; font-size: 15px; color: #c9c6bf; } .ak-fortschritt b { color: var(--text); }
.ak-balken { height: 10px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); overflow: hidden; }
.ak-balken span { display: block; height: 100%; min-width: 10px; border-radius: inherit; background: var(--verlauf); box-shadow: 0 0 18px rgba(255,130,40,.6); }
.ak-balken.klein { height: 7px; margin: 4px 6px 6px; }
.ak-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #d8d6cf; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); white-space: nowrap; }
.ak-status svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.ak-status.jetzt { background: var(--verlauf); color: #1d0e02; border-color: transparent; }
.ak-status.fertig { background: rgba(80,200,120,.14); border-color: rgba(80,200,120,.4); color: #9ee6b5; }
.ak-erste .ak-erste-text { justify-items: start; } .ak-erste .knopf { margin-top: 6px; }
.ak-pfad-kopf { padding-top: clamp(80px, 9vw, 128px); margin-bottom: clamp(32px, 4vw, 52px); }
.ak-pfad { list-style: none; max-width: 940px; margin: 0 auto; padding: 0; display: grid; gap: 14px; position: relative; }
.ak-schritt { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: center; }
.ak-schritt::before { content: ""; position: absolute; left: 27px; top: calc(50% + 30px); height: calc(100% - 46px); width: 2px; background: rgba(255,255,255,.12); }
.ak-schritt:last-child::before { display: none; }
.ak-schritt.fertig::before { background: linear-gradient(#ff9a3c, rgba(255,154,60,.35)); }
.ak-knoten { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font: italic 400 24px/1 "Newsreader", serif; color: #ffb47a; background: #141416; border: 1px solid rgba(255,255,255,.16); }
.ak-knoten svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fertig .ak-knoten { background: var(--verlauf); color: #1d0e02; border-color: transparent; }
.jetzt .ak-knoten { color: #fff; border-color: #ff9a3c; box-shadow: 0 0 0 6px rgba(255,138,42,.14), 0 0 26px rgba(255,130,40,.55); }
.zu .ak-knoten { color: #8f8d86; }
.bald .ak-knoten { color: #8f8d86; border-style: dashed; }
.ak-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 22px; border-radius: 22px; text-decoration: none; color: inherit; background: var(--glas), #101011; border: 1px solid var(--linie); transition: border-color .25s, transform .25s; }
a.ak-zeile:hover { border-color: rgba(255,154,60,.55); transform: translateX(3px); }
.jetzt .ak-zeile { border-color: rgba(255,154,60,.6); background: radial-gradient(90% 140% at 0% 0%, rgba(255,122,26,.16), transparent 60%), #101011; }
.ak-zeile-text { display: grid; gap: 6px; min-width: 0; }
.ak-zeile-oben { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ak-zeile h3 { margin: 0; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.25; letter-spacing: -.015em; }
.ak-zeile p { margin: 0; color: #b9b6af; font-size: 15px; line-height: 1.5; }
.ak-zeile-pfeil svg { width: 22px; height: 22px; fill: none; stroke: #ffa24a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ak-blind { display: grid; gap: 8px; padding-top: 4px; } .ak-blind i { display: block; height: 11px; border-radius: 6px; background: rgba(255,255,255,.08); filter: blur(1.5px); }
.ak-zeile-zu { opacity: .82; } .ak-zeile-zu:hover { opacity: 1; }
.ak-bald { border-style: dashed; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.02); }
.ak .ak-zu { max-width: 940px; margin-left: auto; margin-right: auto; }
/* Lektion: Abhaken und Weiter-Knöpfe */
.ak-ende { margin-top: 3em; display: grid; gap: 16px; }
.ak-abhaken { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 60px; padding: 0 20px; border-radius: 18px; cursor: pointer;
  font: 600 16px var(--schrift); color: var(--text); background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.25); transition: background-color .25s, border-color .25s; }
.ak-abhaken:hover { border-color: rgba(255,154,60,.7); }
.ak-abhaken-kreis { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); }
.ak-abhaken-kreis svg { width: 16px; height: 16px; fill: none; stroke: transparent; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ak-abhaken.ist-fertig { border-style: solid; border-color: rgba(80,200,120,.5); background: rgba(80,200,120,.1); color: #c9f2d6; }
.ak-abhaken.ist-fertig .ak-abhaken-kreis { background: #3fbf6f; border-color: #3fbf6f; } .ak-abhaken.ist-fertig svg { stroke: #08200f; }
.ak-ende .ak-weiter { margin-top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ak-weiter .knopf { min-height: 68px; justify-content: space-between; gap: 14px; padding: 12px 20px; border-radius: 18px; text-align: left; white-space: normal; }
.ak-weiter .knopf span { display: grid; gap: 2px; font-size: 15px; line-height: 1.25; } .ak-weiter .knopf small { font-size: 12.5px; font-weight: 500; opacity: .75; }
.ak-weiter .knopf svg { flex: 0 0 22px; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ak-weiter .ak-vor { justify-content: flex-start; } .ak-weiter .ak-nach { text-align: right; } .ak-weiter .ak-nach span { justify-items: end; }
.ak-weiter .ak-nach.leuchten { box-shadow: 0 0 0 3px rgba(255,154,60,.35), 0 12px 40px -8px rgba(255,120,30,.8); }
.ak-ok { color: #9ee6b5; }
.ak-seite-stand { margin: 0 6px 10px !important; font-size: 13px; color: var(--leise); }
.ak-mini { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; font: italic 400 15px/1 "Newsreader", serif; color: #ffb47a; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.ak-mini svg { width: 13px; height: 13px; margin: 0 !important; fill: none; stroke: currentColor; stroke-width: 2.2; }
.ak-seite a.fertig .ak-mini { background: var(--verlauf); color: #1d0e02; border-color: transparent; }
.ak-seite a span { flex: none; } .ak-seite a svg { margin-left: 0; }
@media (max-width: 640px) {
  .ak-schritt { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; } .ak-knoten { width: 40px; height: 40px; font-size: 19px; } .ak-knoten svg { width: 17px; height: 17px; }
  .ak-schritt::before { left: 19px; top: calc(50% + 22px); height: calc(100% - 30px); }
  .ak-zeile { padding: 16px; grid-template-columns: minmax(0, 1fr); } .ak-zeile-pfeil { display: none; }
  .ak-ende .ak-weiter { grid-template-columns: 1fr; } .ak-weiter .ak-nach { order: -1; }
}
.ak-bald .ak-status { justify-self: start; }
/* Kopfleiste mit 5 Punkten (Academy): bis 1080 px links neben dem Logo statt mittig, damit nichts eng wird */
@media (min-width: 861px) and (max-width: 1080px) { .kopf .haupt { position: static; transform: none; margin: 0 auto 0 8px; } .kopf .haupt a { padding: 10px 12px; } }
@media (min-width: 700px) and (max-width: 860px) { .kopf .haupt a { padding: 10px 8px; font-size: 13.5px; } }
@media (min-width: 700px) and (max-width: 759px) { .kopf .haupt { display: none; } .menue-knopf { display: block; } .kopf .nur-breit { display: none; } }
.ak-weiter .knopf { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; }
.ak-weiter .knopf::before, .ak-weiter .knopf::after { display: none; }
.ak-weiter .ak-nach small { color: rgba(29,14,2,.7); opacity: 1; }

/* Academy Runde 19: Pfad links bündig zur Seite, gesperrte Zeilen nicht klickbar, Weiter-Knöpfe immer gleich aufgebaut */
.blog-pfad, .ak-lektion-pfad { max-width: calc(var(--weit) + 2 * var(--rand)); padding-left: var(--rand); padding-right: var(--rand); }
.ak-zeile-zu { opacity: .78; cursor: default; } .ak-zeile-zu h3 { color: #d8d6cf; }
.ak-weiter .knopf { min-height: 72px; }
.ak-weiter .knopf > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.ak-weiter .ak-vor > span { align-items: flex-start; text-align: left; }
.ak-weiter .ak-nach > span { align-items: flex-end; text-align: right; }
.ak-weiter .knopf small { display: block; line-height: 1.2; }
/* Test: hängende Säulen sichtbar tiefer (Maske und Abdunklung später) */
.glut.haengend, .glut.haengend:not(.hart) { -webkit-mask-image: linear-gradient(#000 50%, rgba(0,0,0,.55) 78%, transparent); mask-image: linear-gradient(#000 50%, rgba(0,0,0,.55) 78%, transparent); }
.glut.haengend::after { background: linear-gradient(0deg, #0a0a0b 0, rgba(10,10,11,.55) 16%, rgba(10,10,11,0) 42%); }
.plan-danach { display: block; margin-top: 6px; }
#du-fenster .du-folge { margin: -6px 0 14px; text-align: right; }
/* Preiskarten: Unterzeile mit Platz für „danach … /Monat“, bei allen Karten gleich hoch */
.plan-sub { height: 4.6em; } .plan-danach { margin-top: 8px; line-height: 1.35; }
@media (min-width: 700px) and (max-width: 980px) { .plan-sub { height: 7em; } }

/* ===== Runde 20 ===== */
/* AI Prompts, After Effects und Academy: Überschrift startet auf derselben Höhe (ruhiger Wechsel zwischen den Seiten) */
.bib-kopf:not(.recht-kopf):not(.blog-kopf), .bib-kopf.ak-kopf { justify-content: flex-start; padding-top: clamp(64px, 7vw, 96px); }
.bib-kopf.ak-kopf { min-height: 0; }
@media (max-width: 700px) { .bib-kopf:not(.recht-kopf):not(.blog-kopf) { min-height: 340px; } }
/* Lektionen und Artikel: mehr Luft zwischen Überschrift und Text */
.artikel h2 { margin-bottom: .85em !important; }
.artikel h3 { margin-bottom: .55em !important; }
.artikel li { margin-bottom: .6em; } .artikel li:last-child { margin-bottom: 0; }
.artikel ul, .artikel ol { margin-bottom: 1.3em !important; }
.artikel .befehl { margin: 1em 0 1.4em !important; }
.artikel .schritt-box { margin: 1.4em 0 1.6em; }
.bib-kopf:not(.recht-kopf):not(.blog-kopf):not(.ak-kopf) { min-height: 340px; }
@media (max-width: 700px) { .bib-kopf:not(.recht-kopf):not(.blog-kopf):not(.ak-kopf) { min-height: 362px; } }
/* Test (Luca): kleines „Beliebt“-Abzeichen an AI Prompts */
.kopf .haupt a { overflow: visible; }
.nav-marke { position: absolute; top: -9px; right: -6px; padding: 2px 6px 3px; border-radius: 999px; font: 600 9.5px/1 var(--schrift); letter-spacing: .01em; color: #1d0e02;
  background: var(--verlauf); box-shadow: 0 4px 12px -4px rgba(255,120,30,.8), inset 0 1px 0 rgba(255,255,255,.5); pointer-events: none; white-space: nowrap; }
.nav-marke.inline { position: static; display: inline-block; vertical-align: middle; margin-left: 8px; font-size: 11px; padding: 3px 8px 4px; }
@media (max-width: 1080px) { .nav-marke:not(.inline) { top: -7px; right: -2px; font-size: 9px; } }

/* ===== Runde 21: Umfang der Prompts zeigen ===== */
.wb-leiste .wb-umfang { margin-left: auto; padding: 4px 10px; border-radius: 999px; font: 600 12px/1 var(--schrift); color: #ffc48a; background: rgba(255,138,42,.14); border: 1px solid rgba(255,154,60,.45); white-space: nowrap; }
.wb-echt { font-size: 13.5px !important; line-height: 1.65 !important; white-space: pre-line; max-height: 15.5em; overflow: hidden; }
.wb-mehr { display: grid; gap: 8px; padding: 6px 20px 2px; } .wb-mehr span { height: 9px; border-radius: 5px; background: rgba(255,255,255,.08); filter: blur(1.5px); }
.wb-mehr span:nth-child(1) { width: 92%; } .wb-mehr span:nth-child(2) { width: 78%; } .wb-mehr span:nth-child(3) { width: 86%; } .wb-mehr span:nth-child(4) { width: 54%; }
.wb-hinweis { margin: 14px 20px 0 !important; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.55; color: #d8d6cf; background: rgba(255,138,42,.08); border: 1px solid rgba(255,154,60,.3); }
.wb-hinweis b { color: #ffc48a; font-weight: 600; }
/* Pfad (Home / Academy / Lektion): beginnt bündig mit der Textspalte darunter, Schrägstriche auf Schrifthöhe */
.pfad { align-items: baseline; line-height: 1.4; }
.pfad span { line-height: 1.4; transform: none; position: static; top: auto; }
.blog-pfad { max-width: 860px; }
.blog-pfad.ak-lektion-pfad { max-width: 1180px; }
@media (max-width: 699px) { .blog-pfad.ak-lektion-pfad b, .blog-pfad.ak-lektion-pfad span:last-of-type { display: inline; } }
/* „Beliebt“ einen Tick tiefer, aber nie über dem Wort */
.nav-marke { top: -5px; } @media (max-width: 1080px) { .nav-marke:not(.inline) { top: -4px; } }
.nav-marke { top: -7px; } @media (max-width: 1080px) { .nav-marke:not(.inline) { top: -6px; } }
/* AI Prompts (mit Umfang-Kasten) und After Effects: Videos beginnen trotzdem gleich hoch */
.bib-kopf:not(.recht-kopf):not(.blog-kopf):not(.ak-kopf) { min-height: 412px; }
@media (max-width: 1099px) { .bib-kopf:not(.recht-kopf):not(.blog-kopf):not(.ak-kopf) { min-height: 364px; } }
@media (max-width: 699px) { .bib-kopf:not(.recht-kopf):not(.blog-kopf):not(.ak-kopf) { min-height: 458px; } }
@media (max-width: 340px) { .bib-kopf:not(.recht-kopf):not(.blog-kopf):not(.ak-kopf) { min-height: 482px; } }

/* Startseite: nur noch eine Unschärfe (der verschwommene Text läuft im Fenster weiter) */
.wb-echt { max-height: 17.2em; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
/* schmale Pille: Kopfhöhe wieder wie vorher, Videos auf AI Prompts und After Effects gleich hoch */
.bib-kopf:not(.recht-kopf):not(.blog-kopf):not(.ak-kopf) { min-height: 340px; }
@media (max-width: 699px) { .bib-kopf:not(.recht-kopf):not(.blog-kopf):not(.ak-kopf) { min-height: 362px; } }
@media (max-width: 340px) { .bib-kopf:not(.recht-kopf):not(.blog-kopf):not(.ak-kopf) { min-height: 392px; } }
.wb-echt { max-height: 19.5em; }

/* Startseite: das Prompt-Fenster zeigt, dass es weitergeht (Bildlaufleiste + „noch … Wörter“) */
.wb-rolle { position: relative; }
.wb-rolle .wb-echt { padding-right: 34px; }
.wb-spur { position: absolute; top: 18px; bottom: 26px; right: 12px; width: 4px; border-radius: 4px; background: rgba(255,255,255,.07); }
.wb-spur i { position: absolute; top: 0; left: 0; right: 0; height: 9%; min-height: 10px; border-radius: 4px; background: #ff9a3c; box-shadow: 0 0 8px rgba(255,140,50,.7); }
.wb-weiter { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px;
  border-radius: 999px; font: 600 12px/1 var(--schrift); color: #ffc48a; white-space: nowrap; background: rgba(20,14,10,.92); border: 1px solid rgba(255,154,60,.45);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.9); }
.wb-weiter svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; animation: wb-runter 1.6s ease-in-out infinite; }
@keyframes wb-runter { 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .wb-weiter svg { animation: none; } }

/* ===== RUNDE 23: Blog-Grafiken sauber (Artikel-Abstände dürfen nicht in Grafiken wirken) ===== */
.artikel .wb-schritte, .artikel .wb-schritte li { margin: 0 !important; }
.artikel .wb-schritte { padding: 0 !important; align-items: stretch; }
/* Formate (Werbevideo-Artikel): vier Rahmen gleich hoch, Beschriftung darunter, nichts wird abgeschnitten */
.formate { display: flex; align-items: flex-end; justify-content: center; flex-wrap: wrap; gap: 26px clamp(16px, 3vw, 34px); padding: 30px 20px 24px; --h: 168px; }
.format { display: grid; justify-items: center; gap: 12px; border: 0 !important; background: none !important; border-radius: 0; aspect-ratio: auto !important; width: auto !important; overflow: visible !important; }
.format .rahmen { position: relative; height: var(--h); display: grid; place-items: center; border-radius: 14px; overflow: hidden;
  border: 2px solid rgba(255,154,60,.7); background: rgba(255,255,255,.03); }
.fr-916 { aspect-ratio: 9 / 16; } .fr-45 { aspect-ratio: 4 / 5; } .fr-11 { aspect-ratio: 1; } .fr-169 { aspect-ratio: 16 / 9; }
.fr-916 { background: rgba(255,154,60,.13) !important; }
.fr-916 .ui-band { position: absolute; left: 0; right: 0; height: 17%; background: repeating-linear-gradient(135deg, rgba(10,10,11,.92) 0 5px, rgba(40,40,42,.92) 5px 10px); }
.fr-916 .ui-band.oben { top: 0; border-bottom: 1px dashed rgba(255,154,60,.6); } .fr-916 .ui-band.unten { bottom: 0; height: 24%; border-top: 1px dashed rgba(255,154,60,.6); }
.format .rahmen b { position: relative; font-size: 18px; color: var(--text); }
.format small { font-size: 12.5px; line-height: 1.3; color: var(--leise); text-align: center; white-space: nowrap; }
@media (max-width: 640px) { .formate { --h: 120px; gap: 22px 14px; padding: 24px 12px 20px; } .format .rahmen b { font-size: 15px; } .format small { font-size: 11.5px; } }
@media (max-width: 380px) { .formate { --h: 104px; } }
/* Prompt-Fenster im Artikel: mehr Platz für den Prompt, Dateiname nie umbrechen */
.wb-leiste span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wb-leiste .wb-umfang { flex: none; }
@media (min-width: 861px) { .artikel-werkbank .wb-oben { grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1fr); gap: clamp(14px, 2vw, 26px); padding: clamp(18px, 2.6vw, 36px); } }
@media (max-width: 640px) {
  .formate { --h: 96px; gap: 20px 14px; }
  .format small { white-space: normal; max-width: 100px; }
}
@media (max-width: 380px) { .formate { --h: 86px; gap: 18px 12px; } }
.formate { align-items: flex-start; } .format { align-content: start; }
/* „Weitere Artikel“ genau so breit wie die Textspalte des Artikels */
.blog-liste.blog-mehr { box-sizing: content-box; max-width: 780px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); justify-content: stretch; }


/* ===== RUNDE 24: Umfang auf AI Prompts (Lucas Wahl „K1“): Mini-Prompt-Fenster + Zahl zählt hoch + „im Durchschnitt“, alles mittig,
   ab und zu zieht ein Lichtstrahl durch ===== */
.umfang { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin: 20px auto 0 !important;
  padding: 8px 20px 8px 10px; border-radius: 999px; background: rgba(255,138,42,.08); border: 1px solid rgba(255,154,60,.35); text-align: center; }
.umfang::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,190,120,.10) 35%, rgba(255,236,210,.32) 50%, rgba(255,190,120,.10) 65%, transparent);
  transform: translateX(-120%) skewX(-18deg); animation: umfang-strahl 6.5s cubic-bezier(.45,0,.25,1) 1.2s infinite; }
@keyframes umfang-strahl { 0% { transform: translateX(-120%) skewX(-18deg); } 30%, 100% { transform: translateX(320%) skewX(-18deg); } }
.umfang b { display: inline-block; min-width: 3.05em; text-align: center; font: italic 400 24px/1 "Newsreader", serif; color: #ffb066;
  text-shadow: 0 0 16px rgba(255,130,40,.5); font-variant-numeric: tabular-nums; }
.umfang span { font-size: 14px; color: #ecd9c6; }
.k-fenster { position: relative; flex: none; display: grid; align-content: start; gap: 3px; width: 30px; height: 24px; padding: 6px 7px 0 5px; border-radius: 6px; background: #0d0d0e; border: 1px solid rgba(255,255,255,.2); overflow: hidden; }
.k-fenster i { height: 2px; border-radius: 1px; background: rgba(255,255,255,.4); } .k-fenster i:nth-child(2) { width: 70%; } .k-fenster i:nth-child(n+3) { filter: blur(.8px); opacity: .6; }
.k-fenster u { position: absolute; right: 2px; top: 4px; width: 2px; height: 5px; border-radius: 1px; background: #ff9a3c; box-shadow: 0 0 4px #ff9a3c; animation: k-rollen 5s ease-in-out infinite; }
@keyframes k-rollen { 0%, 10% { top: 4px; } 80%, 100% { top: 16px; } }
@media (max-width: 640px) { .umfang { gap: 8px; padding-right: 16px; border-radius: 20px; } .umfang b { font-size: 22px; } .umfang span { font-size: 12.5px; line-height: 1.3; } }
@media (prefers-reduced-motion: reduce) { .umfang::after, .k-fenster u { animation: none; } }
/* Lichtstrahl deutlicher: hellerer Kern, dazu leuchtet beim Durchlauf die Kante kurz mit */
.umfang::after { width: 28%; background: linear-gradient(100deg, transparent, rgba(255,170,90,.18) 30%, rgba(255,240,220,.55) 50%, rgba(255,170,90,.18) 70%, transparent); mix-blend-mode: screen; }
.umfang::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(90deg, transparent 0 calc(var(--umf-s, -30%) - 14%), #ffd9b0 var(--umf-s, -30%), transparent calc(var(--umf-s, -30%) + 14%));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: umfang-kante 6.5s cubic-bezier(.45,0,.25,1) 1.2s infinite; }
@property --umf-s { syntax: "<percentage>"; inherits: false; initial-value: -30%; }
@keyframes umfang-kante { 0% { --umf-s: -30%; } 30%, 100% { --umf-s: 130%; } }
@media (prefers-reduced-motion: reduce) { .umfang::before { animation: none; } }
/* Handy: weniger Luft zwischen Kopf und Videos (AI Prompts und After Effects bleiben gleich hoch) */
@media (max-width: 699px) { .bib-kopf:not(.recht-kopf):not(.blog-kopf):not(.ak-kopf) { min-height: 280px; } }
@media (max-width: 340px) { .bib-kopf:not(.recht-kopf):not(.blog-kopf):not(.ak-kopf) { min-height: 300px; } }
@media (max-width: 580px) { .bib-kopf:not(.recht-kopf):not(.blog-kopf):not(.ak-kopf) { min-height: 362px; } }
@media (max-width: 340px) { .bib-kopf:not(.recht-kopf):not(.blog-kopf):not(.ak-kopf) { min-height: 392px; } }
@media (min-width: 641px) { .formate { --h: 140px; gap: 26px clamp(16px, 2.6vw, 30px); } }
@media (min-width: 641px) and (max-width: 900px) { .formate { --h: 112px; gap: 22px 20px; } }
/* Lichtstrahl läuft vollständig aus der Pille heraus, bevor er neu startet (blieb vorher am rechten Rand stehen) */
@keyframes umfang-strahl { 0% { transform: translateX(-160%) skewX(-18deg); } 34%, 100% { transform: translateX(480%) skewX(-18deg); } }
.umfang::after { transform: translateX(-160%) skewX(-18deg); }
@keyframes umfang-kante { 0% { --umf-s: -30%; } 34%, 100% { --umf-s: 150%; } }
/* Bildlaufleiste im Mini-Fenster: runter und wieder hoch, in einer Schleife */
@keyframes k-rollen { 0%, 12% { top: 4px; } 50%, 62% { top: 16px; } 100% { top: 4px; } }
.k-fenster u { animation: k-rollen 4.4s ease-in-out infinite; }

/* ===== RUNDE 25: Linien im Kopf-Licht sitzen genau auf den Säulenkanten =====
   Die Säulen-Fläche war um 3 % vergrößert (scale 1.03), die Linien nicht. Dadurch passten sie nur in der Mitte. Jetzt beide gleich groß.
   Linien in Hintergrundfarbe, oben (unter der Kopfleiste) und unten weich ausgeblendet, damit sie mit den Flammen verschmelzen. */
#saeulen { transform: none; }
.glut::before { background: repeating-linear-gradient(90deg, rgba(10,10,11,.6) 0 1px, rgba(255,255,255,.04) 1px 2px, transparent 2px var(--s, 56px)); }
.glut.haengend::before { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 90px, #000 45%, transparent 88%); mask-image: linear-gradient(180deg, transparent 0, #000 90px, #000 45%, transparent 88%); }

/* ===== RUNDE 26 ===== */
/* Kopf-Licht: Linien genau in Hintergrundfarbe (kein heller Rand mehr), damit sie dort, wo die Flammen enden, unsichtbar werden */
.glut::before { background: repeating-linear-gradient(90deg, #0a0a0b 0 1px, transparent 1px var(--s, 56px)); opacity: .75; }
/* Produktseite: Prompt-Fenster wie auf der Startseite: Wortzahl oben, Bildlaufleiste, „noch … Wörter“ */
.prompt-kopf .wb-umfang { margin-left: auto; margin-right: 8px; padding: 4px 10px; border-radius: 999px; font: 600 12px/1 var(--schrift); color: #ffc48a; background: rgba(255,138,42,.14); border: 1px solid rgba(255,154,60,.45); white-space: nowrap; }
.prompt.offen .prompt-kopf .wb-umfang { margin-right: 10px; }
.prompt-rolle { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.prompt-rolle .prompt-text { overflow: hidden; padding-right: 34px; padding-bottom: 46px; -webkit-mask-image: linear-gradient(#000 55%, transparent 96%); mask-image: linear-gradient(#000 55%, transparent 96%); }
.prompt-rolle .wb-spur { top: 16px; bottom: 16px; }
.prompt-rolle .wb-weiter { bottom: 12px; }
.prompt-voll { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.glut::before { opacity: .25; }   /* Linien zart (Luca): 25 %, genau auf den Säulenkanten, in Hintergrundfarbe */


/* ===== RUNDE 28: Pfad (Home / AI Prompts / Name) liegt oft vor den Flammen: weiß und mit leichtem Schatten, damit er immer lesbar ist ===== */
.pfad { color: rgba(255,255,255,.72); text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 14px rgba(0,0,0,.45); }
.pfad a { color: rgba(255,255,255,.86); } .pfad a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pfad b { color: #fff; } .pfad span { color: rgba(255,255,255,.5); }
@media (max-width: 699px) { .plan-sub { height: auto; } }   /* Handy: Pläne untereinander, keine feste Höhe nötig (sonst leere Lücke) */
.ueber-text h2 { margin-bottom: .7em !important; }   /* Über uns: Luft zwischen Überschrift und Text wie in Artikeln */
/* Abstand Überschrift → Text: Rechtstexte und Academy-Kasten (vorher 0 px) */
.recht h2, .recht h3 { margin-bottom: .55em !important; }
.ak-zu h2 { margin-bottom: .45em !important; }

/* ===== RUNDE 29: Schritte (Produktseite, Hire us) einheitlich: Zahl, Titel und Text oben, Chips oben rechts, alle Karten gleich hoch =====
   Vorher schob die Zahl den Text nach unten (margin-bottom: auto): bei unterschiedlich langen Texten standen die Titel auf verschiedenen Höhen,
   und in Schritt 2 standen die Chips unten. */
.so-kurz ol { align-items: stretch; }
.so-kurz li::before { margin-bottom: 0; padding-bottom: clamp(18px, 1.8vw, 26px); }
.so-kurz li:nth-child(2) .kurz-chips { top: clamp(22px, 2.2vw, 32px); bottom: auto; }
.so-kurz li:nth-child(2) { padding-bottom: clamp(22px, 2.2vw, 32px); }
/* Chips immer in einer Reihe rechts neben der Zahl (nie über dem Titel) */
.kurz-chips { flex-wrap: nowrap; max-width: calc(100% - 96px); }
@media (max-width: 1100px) { .kurz-chips { gap: 5px; } .kurz-chips i { padding: 6px 9px; font-size: 12px; } }
@media (max-width: 380px) { .kurz-chips { gap: 4px; max-width: calc(100% - 78px); } .kurz-chips i { padding: 5px 7px; font-size: 11px; } }
@media (max-width: 900px) { .so-kurz ol { grid-auto-rows: 1fr; } }   /* untereinander: alle Schritte so hoch wie der höchste */
/* Kundenstimmen (Runde 32): Initialen Ayla und Jana, jede mit eigener Farbe */
.kopfkreis.kreis-ayla { background: linear-gradient(140deg, #ffe3c2, #ffb36b); color: #4a2a10; }
.kopfkreis.kreis-jana { background: linear-gradient(140deg, #2b2b30, #141416); color: #ffb47a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }

/* ===== RUNDE 33 (nur Handy, Lucas Wunsch) ===== */
@media (max-width: 699px) {
  /* Hire us: Überschrift und Bilder des Gründer-Briefs mittig, Bilder etwas größer; der Brieftext bleibt linksbündig */
  .notiz-kopf { align-items: center; text-align: center; }
  .notiz-kopf h2 { text-align: center; }
  .notiz .team { justify-content: center; }
  .notiz .team figure { width: 132px; }
  /* „Du schreibst direkt mit Luca und Paul.“ in einer Zeile */
  .direkt { gap: 10px; white-space: nowrap; font-size: clamp(12.5px, 3.9vw, 15px); }
  .direkt-bilder img { width: 38px; height: 38px; } .direkt-bilder img + img { margin-left: -10px; }
  /* Hire us (nicht Kontakt/Rezension/Widerruf): Zeile linksbündig */
  .anfrage-teil:not(.form-seite) .anfrage-kopf .direkt { justify-content: flex-start; }
}
@media (max-width: 699px) {
  .anfrage-kasten .anfrage-kopf p.direkt { white-space: nowrap; font-size: clamp(12.5px, 3.75vw, 15px) !important; gap: 10px; }
}
@media (max-width: 699px) {
  /* Schrift wächst mit der Breite, damit „Du schreibst direkt mit Luca und Paul.“ immer in eine Zeile passt (gemessen: Text = 16,9 × Schriftgröße) */
  .anfrage-kasten .anfrage-kopf p.direkt { font-size: clamp(10.5px, calc((100vw - 150px) / 17), 15px) !important; gap: 8px; }
  .anfrage-kasten .direkt-bilder img { width: 32px; height: 32px; } .anfrage-kasten .direkt-bilder img + img { margin-left: -9px; }
  .anfrage-teil:not(.form-seite) .anfrage-kopf .direkt { align-self: flex-start; margin-left: 0 !important; margin-right: auto !important; justify-content: flex-start; }
}
@media (max-width: 400px) { .anfrage-kasten { padding-left: 12px; padding-right: 12px; } }
@media (max-width: 699px) { .anfrage-kasten .anfrage-kopf p.direkt { font-size: clamp(10px, calc((100vw - 150px) / 18.2), 15px) !important; } }
@media (max-width: 699px) { .anfrage-kasten .anfrage-kopf p.direkt { width: max-content; max-width: 100%; } }
.du-zustimmung span { font-size: 13px; line-height: 1.45; }   /* Zustimmung zum sofortigen Start: kurz und klein (Luca), Inhalt nach § 356 Abs. 5 BGB vollständig */

/* ===== RUNDE 37 ===== */
/* Held: beide Knöpfe gleich breit und gleich hoch, am Handy untereinander genau mittig */
.held-knoepfe { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; justify-content: center; align-items: stretch; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; }
.held-knoepfe .knopf { justify-content: center; width: 100%; }
@media (max-width: 560px) { .held-knoepfe { grid-auto-flow: row; grid-auto-columns: auto; } }
/* Kundenstimmen-Laufband am Handy: langsamer, ohne Lichtwelle, als eigene Grafikebene (verschwand in Safari nach einer Weile) */
.schieber.laufband .schieber-lauf { will-change: transform; backface-visibility: hidden; }
@media (max-width: 699px) {
  .schieber.laufband .schieber-lauf { animation-duration: 115s; }
  .schieber.laufband .stimme::before, .schieber.laufband .stimme::after { display: none; }
  .schieber.laufband .stimme { isolation: auto; }
}
@media (max-width: 699px) { .band-lauf { animation-duration: 80s; will-change: transform; backface-visibility: hidden; } }
/* After Effects, Handy: alle Filter in EINER Zeile (volle Breite, kompakte Knöpfe, Schrift wächst mit der Breite) */
@media (max-width: 699px) {
  .bib-kopf .filter { flex-wrap: nowrap; gap: 4px; margin-left: calc(50% - 50vw + 16px); margin-right: calc(50% - 50vw + 16px); overflow-x: auto; scrollbar-width: none; justify-content: center; }
  .bib-kopf .filter::-webkit-scrollbar { display: none; }
  .bib-kopf .filter button { flex: none; min-height: 32px; padding: 0 7px; font-size: clamp(10.5px, calc((100vw - 32px - 104px) * 14 / 259), 13.5px); }
}
/* Handy: Kopf niedriger, weil die Filter jetzt einzeilig sind (gemessen: höchster Inhalt von AI Prompts/After Effects + 28 px) */
@media (max-width: 699px) { .bib-kopf:not(.recht-kopf):not(.blog-kopf):not(.ak-kopf) { min-height: 262px; } }
@media (max-width: 580px) { .bib-kopf:not(.recht-kopf):not(.blog-kopf):not(.ak-kopf) { min-height: 306px; } }
@media (max-width: 340px) { .bib-kopf:not(.recht-kopf):not(.blog-kopf):not(.ak-kopf) { min-height: 340px; } }
/* Karten: schon geladen → „Freigeschaltet“ in Orange statt „Neu“ */
.marke.frei { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(90deg, #f2be22, #f24522); color: #1d0e02; border: 0; font-weight: 700; }
.marke.frei svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* Konto: „Zuletzt geladen“ orange hervorgehoben, „Alle anzeigen“; Seite „Deine Downloads“ */
.geladen-kasten .knopf { margin-top: 14px; align-self: flex-start; }
.geladen-kopf { min-height: 0 !important; padding-bottom: 8px; }
.geladen-kopf .knopf { margin-top: 18px; }
.geladen-teil h2 { margin: 18px 0 14px !important; font-size: clamp(20px, 2vw, 26px); display: flex; align-items: center; gap: 10px; }
.zahl-klein { font: 600 13px/1 var(--schrift); padding: 5px 9px; border-radius: 999px; background: rgba(255,138,42,.14); border: 1px solid rgba(255,154,60,.45); color: #ffc48a; }
/* Konfetti beim Freischalten (dezent, orange, ~1 s) */
.konfetti { position: fixed; z-index: 90; width: 0; height: 0; pointer-events: none; }
.konfetti i { position: absolute; left: -3px; top: -4px; width: 6px; height: 9px; border-radius: 1.5px; opacity: 0;
  animation: konfetti var(--t, 900ms) cubic-bezier(.15,.7,.3,1) forwards; }
.konfetti i:nth-child(3n) { width: 5px; height: 5px; border-radius: 50%; }
@keyframes konfetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.6); } 70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 40px)) rotate(var(--d)) scale(1); } }
.frei-marke { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; margin-left: 10px; padding: 4px 10px; border-radius: 999px; font: 700 12px/1 var(--schrift);
  color: #1d0e02; background: linear-gradient(90deg, #f2be22, #f24522); box-shadow: 0 0 16px rgba(255,120,30,.45); animation: frei-ein .5s cubic-bezier(.22,1,.36,1); }
.frei-marke svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@keyframes frei-ein { from { opacity: 0; transform: scale(.6); } }
.frei-marke { margin-right: 0; } .frei-marke.ruhig { animation: none; }
/* ===== Handy flüssiger (Runde 37) =====
   Weichzeichner sind auf Handys teuer: Einblenden ohne Unschärfe, Glas-Flächen mit weniger Weichzeichnung. Optik bleibt fast gleich. */
@media (max-width: 699px) {
  html.js .r { filter: none; transition-property: opacity, translate; }
  .kopf-in, .kopf.gerollt .kopf-in { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .wb-prompt, .schieber .stimme, .plan, .so-kurz li { -webkit-backdrop-filter: none; backdrop-filter: none; }
  #saeulen { filter: blur(6px); }
}

/* ===== RUNDE 38: Lifetime-Upgrade (72 Stunden nach dem Kauf) ===== */
.upgrade { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: clamp(16px, 2.4vw, 32px);
  max-width: 1080px; margin: 0 auto 28px; padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 34px); text-align: left; border-radius: 24px; isolation: isolate;
  background: radial-gradient(90% 140% at 0% 0%, rgba(255,122,26,.28), transparent 60%), radial-gradient(60% 120% at 100% 100%, rgba(242,69,34,.18), transparent 70%), #141011;
  border: 1px solid rgba(255,154,60,.55); box-shadow: inset 0 1px 0 rgba(255,214,160,.25), 0 24px 60px -30px rgba(242,90,34,.55); }
.upgrade h3 { margin: 0 0 6px !important; font-size: clamp(21px, 2.1vw, 27px); font-weight: 500; letter-spacing: -.02em; color: var(--text); }
.upgrade h3 em { font-family: Newsreader, Georgia, serif; font-style: italic; font-weight: 400; color: #ffa24a; }
.upgrade p { margin: 0 !important; font-size: 15px; line-height: 1.5; color: #cfccc4; max-width: 560px; }
.upgrade p b { color: var(--text); }
.upgrade-uhr { display: flex; align-items: flex-start; gap: 6px; font-variant-numeric: tabular-nums; }
.upgrade-uhr span { display: grid; justify-items: center; min-width: 58px; padding: 9px 6px 7px; border-radius: 14px; background: rgba(0,0,0,.42); border: 1px solid rgba(255,154,60,.28); }
.upgrade-uhr b { font: 600 26px/1 var(--schrift); color: var(--text); }
.upgrade-uhr small { margin-top: 5px; font-size: 11px; letter-spacing: .04em; color: var(--leise); }
.upgrade-uhr i { font-style: normal; font: 600 22px/1 var(--schrift); color: #ffa24a; padding-top: 10px; }
.upgrade .knopf { white-space: nowrap; }
.konto-seite .upgrade { margin-bottom: 18px; }
.plan-upgrade { color: #ffb36b !important; }
.upgrade-rest { font-variant-numeric: tabular-nums; font-weight: 600; }
@media (max-width: 860px) {
  .upgrade { grid-template-columns: 1fr; justify-items: start; }
  .upgrade .knopf { width: 100%; justify-content: center; }
}
@media (max-width: 380px) { .upgrade-uhr span { min-width: 52px; } .upgrade-uhr b { font-size: 22px; } }