/* AVYZOR – nach Gabriels echter Onepage-Seite (Abzug vom 07.10.2026): fast Schwarz (#08090B), Gold (#C4A06A / #E0C79B), Überschriften Space Grotesk 700, Fließtext Inter. Beide Schriften (SIL OFL) liegen als eigene Dateien bei, keine Fremd-Hosts. */

@font-face { font-family: "Space Grotesk"; font-weight: 300; font-style: normal; font-display: swap; src: url(./schriften/space-grotesk-300.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url(./schriften/space-grotesk-regular.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url(./schriften/space-grotesk-500.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 600; font-style: normal; font-display: swap; src: url(./schriften/space-grotesk-600.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url(./schriften/space-grotesk-700.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url(./schriften/inter-regular.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url(./schriften/inter-500.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url(./schriften/inter-600.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url(./schriften/inter-700.woff2) format("woff2"); }
:root {
  --grund: #08090B;
  --grund-2: #0E1216;
  --flaeche: rgba(255, 255, 255, .028);
  --flaeche-2: rgba(255, 255, 255, .05);
  --linie: rgba(255, 255, 255, .08);
  --linie-2: rgba(255, 255, 255, .14);
  --text: #edeff4;
  --text-hell: #f4f6fb;
  --leise: #a2a8b6;
  --gold: #C4A06A;
  --gold-hell: #E0C79B;
  --gold-glanz: #fbe6b4;
  --gold-tief: #b6802a;
  --radius: 22px;
  --breite: 1250px;
  --kurve: cubic-bezier(.32, .72, 0, 1);
  --serif: "Space Grotesk", "Avenir Next", "Segoe UI", system-ui, sans-serif; /* Überschriften wie auf der Onepage-Seite (Space Grotesk 700, Zeilenhöhe 1,2) */
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.08; overflow-wrap: break-word; hyphens: manual; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 3px; border-radius: 6px; }
.springen { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--gold); color: #07070c; border-radius: 10px; font-weight: 600; text-decoration: none; }
.springen:focus { top: 12px; }
.gold-text { background: linear-gradient(112deg, var(--gold-glanz) 0%, var(--gold-hell) 30%, var(--gold) 70%, var(--gold-tief) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.leise { color: var(--leise); }
.klein-text { font-size: 13px; }
.kicker { display: inline-flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .36em; text-transform: uppercase; color: #b7bccb; font-weight: 500; }
.kicker::before { content: ""; width: 30px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent; font: 600 15px/1 var(--sans); letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: transform .45s var(--kurve), background .3s, border-color .3s, box-shadow .45s var(--kurve); white-space: nowrap; }
.knopf:active { transform: scale(.98); }
.knopf.gold { position: relative; overflow: hidden; background: linear-gradient(120deg, #f6dd9d, var(--gold)); color: #07070c; box-shadow: 0 12px 40px -14px rgba(196, 160, 106, .55), inset 0 1px 0 rgba(255, 255, 255, .35); }
.knopf.gold::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s ease; pointer-events: none; }
.knopf.gold:hover::before { transform: translateX(120%); }
.knopf.gold:hover { transform: translateY(-2px); box-shadow: 0 18px 50px -14px rgba(196, 160, 106, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }
.knopf.rand { background: rgba(5, 6, 12, .3); color: #e7e9f0; border-color: rgba(255, 255, 255, .22); backdrop-filter: blur(3px); }
.knopf.rand .pfeil { color: var(--gold); }
.knopf.rand:hover { border-color: rgba(196, 160, 106, .55); background: rgba(196, 160, 106, .06); }
.knopf.klein { min-height: 40px; padding: 0 18px; font-size: 14px; }
.pfeil { transition: transform .45s var(--kurve); }
.knopf:hover .pfeil { transform: translateX(4px); }
.status-punkt { width: 8px; height: 8px; border-radius: 50%; background: #5FD49A; box-shadow: 0 0 0 0 rgba(95, 212, 154, .6); animation: puls 2.4s infinite; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(95, 212, 154, .55); } 70% { box-shadow: 0 0 0 9px rgba(95, 212, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(95, 212, 154, 0); } }

/* ---------- Kopfleiste ---------- */
.kopfleiste { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; justify-content: center; border-bottom: 1px solid transparent; transition: background .4s ease, border-color .4s ease; }
.kopf-innen { width: 100%; max-width: var(--breite); display: flex; align-items: center; gap: 24px; padding: 20px 24px; }
.kopfleiste.gescrollt { background: rgba(5, 6, 12, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: rgba(196, 160, 106, .22); }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 600; letter-spacing: .34em; font-size: 22px; color: #f4f1ea; text-decoration: none; padding-left: .34em; }
.logo-zeichen { display: none; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold-hell), var(--gold) 45%, var(--gold-tief) 100%); box-shadow: 0 0 18px rgba(196, 160, 106, .55); }
.menue { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.menue a { position: relative; padding: 6px 0; font-size: 13px; letter-spacing: .06em; color: #c8ccd8; text-decoration: none; transition: color .25s; }
.menue a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--gold); transition: width .3s ease; }
.menue a:hover, .menue a[aria-current="page"] { color: #fff; }
.menue a:hover::after, .menue a[aria-current="page"]::after { width: 100%; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprache { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--gold); border: 1px solid rgba(196, 160, 106, .35); border-radius: 999px; padding: 5px 9px; }
.menue-knopf { display: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linie-2); background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.menue-knopf span { width: 16px; height: 1.5px; background: var(--text); transition: transform .4s var(--kurve); }
.menue-knopf[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; background: var(--grund); }
.hero-grund { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.kern { position: absolute; right: max(-6vw, -120px); top: 50%; width: min(70vw, 900px); height: min(70vw, 900px); transform: translateY(-50%); }
.kern[data-marke] { inset: 0; right: auto; top: 0; width: 100%; height: 100%; transform: none; }
.hero-schein { position: absolute; inset: 0; background: radial-gradient(55% 60% at 74% 50%, rgba(196, 160, 106, .14), transparent 70%), radial-gradient(120% 90% at 78% 50%, #14161d 0%, transparent 60%); }
/* weicher Verlauf nur links: Text bleibt lesbar, rechts bleibt hell (wie auf der Onepage-Seite) */
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, #030305 0%, rgba(3, 3, 5, .78) 26%, rgba(3, 3, 5, .38) 46%, transparent 66%); }
.hero-innen { position: relative; flex: 1; width: 100%; max-width: var(--breite); margin: 0 auto; padding: 120px 24px 40px; display: flex; align-items: center; }
.hero-spalte { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 620px; }
.hero-tag { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: #9aa0b2; margin-bottom: 22px; text-transform: uppercase; }
.status-ping { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(196, 160, 106, .55); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
.tag-haupt { color: #e7c983; letter-spacing: .22em; }
.tag-trenn { color: #4c4f5c; }
.tag-neben { color: #8b90a0; }
.hero-spalte .kicker { margin-bottom: 18px; }
.hero-titel { margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.03; letter-spacing: .005em; display: flex; flex-direction: column; align-items: flex-start; gap: .04em; font-size: clamp(2.3rem, 4.6vw, 4.6rem); color: var(--text-hell); }
.hero-titel .zeile { display: block; padding: .06em 0; }
.hero-titel .gold-text { filter: drop-shadow(0 4px 26px rgba(196, 160, 106, .3)); }
.hero-text { max-width: 500px; margin-top: 24px; font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.68; color: #c3c8d5; }
.hero-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 32px; }
.hero-knoepfe .knopf { min-height: 54px; padding: 0 32px; font-size: 15.5px; }
.hero-punkte { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; color: var(--leise); font-size: 14.5px; }
.hero-punkte li { display: flex; align-items: center; gap: 8px; }
.hero-punkte svg, .paket li svg, .liste svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--gold); stroke-width: 2; }
.kennzahlen { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 14px 34px; margin: 40px 0 0; padding: 26px 0 0; border-top: 1px solid rgba(196, 160, 106, .22); }
.kennzahlen div { display: flex; flex-direction: column; gap: 4px; }
.kennzahlen dt { order: 2; font-size: 12px; letter-spacing: .03em; color: var(--leise); line-height: 1.35; }
.kennzahlen dd { order: 1; margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1; background: linear-gradient(120deg, #f6e2ac, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.laufband { position: relative; width: 100%; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.laufband-spur { display: flex; width: max-content; animation: laufband 46s linear infinite; }
.laufband-spur span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .32em; color: #8b90a0; padding: 13px 0; white-space: nowrap; text-transform: uppercase; }
@keyframes laufband { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Kontakt-Knopf unten rechts, über dem KI-Berater (wie auf der Onepage-Seite) */
@keyframes rollen { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 14px); } }

/* ---------- Abschnitte ---------- */
.abschnitt { max-width: var(--breite); margin: 0 auto; padding: 110px 24px; }
.abschnitt.schmal { max-width: 860px; }
.abschnitt-kopf { display: flex; flex-direction: column; gap: 16px; max-width: 720px; margin-bottom: 56px; }
.abschnitt-kopf h2, .ki-band h2, .cta h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(40px, 5.4vw, 68px); letter-spacing: -.02em; }
.abschnitt-kopf p { color: var(--leise); font-size: 18px; }
.raster { display: grid; gap: 18px; }
.raster.drei { grid-template-columns: repeat(3, 1fr); }
.raster.zwei-sp { grid-template-columns: repeat(2, 1fr); }
.karte { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 30px; border-radius: var(--radius); background: var(--flaeche); border: 1px solid var(--linie); transition: border-color .4s, transform .6s var(--kurve), background .4s; }
.karte:hover { border-color: rgba(196, 160, 106, .32); transform: translateY(-3px); background: rgba(255, 255, 255, .038); }
.karte h3 { font-size: 20px; }
.karte p { color: var(--leise); font-size: 15.5px; }
.karte.gross { padding: 36px; gap: 14px; }
.karte.gross h3 { font-size: 24px; }
.sym { width: 44px; height: 44px; padding: 10px; border-radius: 14px; fill: none; stroke: var(--gold-hell); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; background: rgba(196, 160, 106, .08); border: 1px solid rgba(196, 160, 106, .22); margin-bottom: 6px; }
.liste { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 9px; font-size: 15px; color: #c8ccd8; }
.liste li { display: flex; gap: 10px; align-items: flex-start; }
.liste svg { margin-top: 4px; }
.nr { font-family: var(--serif); font-size: 30px; color: var(--gold); line-height: 1; }

.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; border-top: 1px solid var(--linie); }
.schritte li { padding: 28px 22px 0 0; display: flex; flex-direction: column; gap: 10px; position: relative; }
.schritte li::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 14px rgba(196, 160, 106, .8); }
.schritte h3 { font-size: 19px; }
.schritte p { color: var(--leise); font-size: 15px; }

/* ---------- KI-Band ---------- */
.ki-band { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding: 56px; border-radius: 32px; background: radial-gradient(80% 120% at 100% 0%, rgba(196, 160, 106, .12), transparent 60%), var(--grund-2); border: 1px solid var(--linie); overflow: hidden; }
.ki-band > div:first-child { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.ki-band p { color: #c3c8d5; }
.reihe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.chat-attrappe { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 24px; background: #0E0E12; border: 1px solid var(--linie); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); }
.b { max-width: 86%; padding: 11px 15px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; }
.b-l { align-self: flex-end; background: rgba(196, 160, 106, .14); border: 1px solid rgba(196, 160, 106, .3); border-bottom-right-radius: 5px; }
.b-r { align-self: flex-start; background: rgba(255, 255, 255, .05); border: 1px solid var(--linie); border-bottom-left-radius: 5px; }
.tippt { display: flex; gap: 5px; padding: 14px 16px; }
.tippt span { width: 6px; height: 6px; border-radius: 50%; background: var(--leise); animation: tipp 1.3s infinite; }
.tippt span:nth-child(2) { animation-delay: .15s; } .tippt span:nth-child(3) { animation-delay: .3s; }
@keyframes tipp { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.kern-klein { position: relative; aspect-ratio: 1; }
.kern-klein canvas { position: absolute; inset: -10%; width: 120%; height: 120%; }
.frage-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linie-2); background: rgba(255, 255, 255, .03); color: var(--text); font: 500 14px var(--sans); cursor: pointer; transition: border-color .3s, background .3s; text-align: left; }
.chip:hover { border-color: rgba(196, 160, 106, .55); background: rgba(196, 160, 106, .07); }

/* ---------- Preise ---------- */
.pakete { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); align-items: stretch; }
.pakete .paket { padding: 32px 24px 26px; }
.pakete .preis strong { font-size: 40px; }
.paket { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 34px 30px 30px; border-radius: 26px; background: var(--flaeche); border: 1px solid var(--linie); }
.paket.hervor { background: linear-gradient(180deg, rgba(196, 160, 106, .1), rgba(196, 160, 106, .02) 60%), var(--grund-2); border-color: rgba(196, 160, 106, .45); box-shadow: 0 40px 90px -50px rgba(196, 160, 106, .55); }
.band { position: absolute; top: -12px; left: 30px; padding: 5px 12px; border-radius: 999px; background: var(--gold); color: #07070c; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.paket h3 { font-size: 24px; }
.paket-text { color: var(--leise); font-size: 15px; min-height: 48px; }
.preis { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.preis strong { font-family: var(--serif); font-size: 44px; font-weight: 500; letter-spacing: -.01em; line-height: 1.05; }
.preis span { color: var(--leise); font-size: 13.5px; }
.preis em { font-style: normal; color: var(--gold-hell); font-size: 14px; margin-top: 4px; }
.aktion { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 26px; padding: 16px 22px; border-radius: 18px; border: 1px solid rgba(196, 160, 106, .4); background: linear-gradient(90deg, rgba(196, 160, 106, .12), rgba(196, 160, 106, .03)); }
.aktion strong { color: var(--gold-hell); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.aktion span { color: #DCD7CC; font-size: 15px; }
.paket ul { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: #DCD7CC; flex: 1; }
.paket li { display: flex; gap: 10px; align-items: flex-start; }
.paket li svg { margin-top: 4px; }
.paket .knopf { width: 100%; }
.zusatz { margin-top: 26px; padding: 28px 30px; border-radius: 22px; border: 1px solid var(--linie); background: var(--flaeche); }
.zusatz h3 { font-size: 18px; margin-bottom: 14px; }
.zusatz p { font-size: 15px; }
.zusatz-liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 32px; }
.zusatz-liste div { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; }
.zusatz-liste span { grid-column: 1; color: var(--leise); font-size: 14.5px; }
.zusatz-liste em { grid-column: 2; grid-row: 1 / 3; align-self: center; font-style: normal; color: var(--gold-hell); font-size: 15px; }
.hinweis { margin-top: 22px; color: var(--leise); font-size: 13.5px; }

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--linie); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-size: 18.5px; font-weight: 500; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { position: relative; width: 14px; height: 14px; flex: none; }
.faq summary span::before, .faq summary span::after { content: ""; position: absolute; inset: 6px 0 auto; height: 1.5px; background: var(--gold); transition: transform .4s var(--kurve); }
.faq summary span::after { transform: rotate(90deg); }
.faq details[open] summary span::after { transform: rotate(0); }
.faq-suche { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.faq-suche[hidden], .faq-suche [hidden], .faq details[hidden] { display: none !important; }
.faq-suche label { font-size: 13px; color: var(--leise); }
.faq-suche input { width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--linie-2); background: #08080A; color: var(--text); font: 400 17px var(--sans); }
.faq-suche input:focus { outline: none; border-color: rgba(196, 160, 106, .65); box-shadow: 0 0 0 3px rgba(196, 160, 106, .12); }
.faq-status { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--leise); }
.faq-leer { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 20px; border: 1px solid var(--linie-2); border-radius: 14px; }
.faq-leer p { margin: 0; }
.faq details p { padding: 0 40px 24px 0; color: var(--leise); }

/* ---------- CTA ---------- */
.cta { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; padding: 80px 32px; border-radius: 32px; background: radial-gradient(70% 90% at 50% 0%, rgba(196, 160, 106, .16), transparent 70%), var(--grund-2); border: 1px solid rgba(196, 160, 106, .22); }
.cta p { color: #c3c8d5; max-width: 560px; font-size: 18px; }

/* ---------- Unterseiten ---------- */
.seiten-hero { padding: 180px 24px 40px; background: radial-gradient(50% 80% at 80% 0%, rgba(196, 160, 106, .1), transparent 70%); }
.seiten-hero-innen { max-width: var(--breite); margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.seiten-hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(48px, 7.4vw, 104px); line-height: .98; max-width: 12em; }
.seiten-hero p { font-size: clamp(17px, 1.5vw, 20px); color: #c3c8d5; max-width: 640px; }
.projekt { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--linie); background: var(--flaeche); transition: transform .6s var(--kurve), border-color .4s; }
.projekt:hover { transform: translateY(-4px); border-color: rgba(196, 160, 106, .32); }
.projekt-bild { position: relative; aspect-ratio: 4 / 3; background-size: cover; background-position: center top; overflow: hidden; }
.projekt-bild.leer { display: grid; place-items: center; background: radial-gradient(70% 70% at 30% 20%, rgba(196, 160, 106, .22), transparent 70%), linear-gradient(160deg, #15130E, #08080A); }
.projekt-bild.leer span { font-family: var(--serif); font-size: 96px; color: var(--gold-hell); opacity: .85; }
.projekt-bild i { position: absolute; inset: auto -20% -60% -20%; height: 80%; background: radial-gradient(closest-side, rgba(196, 160, 106, .18), transparent); transform: rotate(calc(var(--n) * 25deg)); }
.projekt-text { display: flex; flex-direction: column; gap: 8px; padding: 24px 26px 28px; }
.projekt-text h3 { font-size: 22px; }
.projekt-text p { color: var(--leise); font-size: 15px; }
.marke-chip { align-self: flex-start; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(196, 160, 106, .35); color: var(--gold-hell); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.mehr { color: var(--gold-hell); text-decoration: none; font-weight: 600; font-size: 14.5px; margin-top: 6px; }
.fliesstext { display: flex; flex-direction: column; gap: 22px; font-size: 19px; color: #DCD7CC; }
.fliesstext.recht { font-size: 16px; gap: 14px; }
.fliesstext.recht h2 { font-size: 20px; margin-top: 18px; font-family: var(--sans); }
mark.fehlt { background: rgba(255, 120, 90, .15); color: #FFB59F; padding: 0 4px; border-radius: 4px; }

/* ---------- Fuß ---------- */
.fuss { border-top: 1px solid var(--linie); margin-top: 40px; }
.fuss-innen { max-width: var(--breite); margin: 0 auto; padding: 56px 24px 32px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.fuss-marke p { color: var(--leise); margin-top: 12px; font-size: 15px; }
.fuss-spalte { display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: #c3c8d5; }
.fuss-spalte a { text-decoration: none; }
.fuss-spalte a:hover, .fuss-unten a:hover { color: var(--gold-hell); }
.fuss-unten { max-width: var(--breite); margin: 0 auto; padding: 20px 24px 40px; display: flex; justify-content: space-between; gap: 16px; color: var(--leise); font-size: 13.5px; border-top: 1px solid var(--linie); }
.fuss-unten span:last-child { display: flex; gap: 20px; }
.fuss-unten a { text-decoration: none; }

/* ---------- Dialog ---------- */
.dialog { padding: 0; border: 0; background: transparent; color: var(--text); width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
.dialog::backdrop { background: rgba(0, 0, 0, .65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dialog[open] { animation: auf .5s var(--kurve); }
@keyframes auf { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.dialog-innen { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 28px; background: #0E0E12; border: 1px solid var(--linie-2); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9); }
.dialog-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 4px; }
.dialog-kopf h2 { font-family: var(--serif); font-weight: 600; font-size: 34px; margin-top: 8px; }
.zu { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--linie-2); background: transparent; color: var(--text); font-size: 20px; cursor: pointer; }
.feld-l { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--leise); flex: 1; min-width: 0; }
.feld-l input, .feld-l select, .feld-l textarea { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--linie-2); background: #08080A; color: var(--text); font: 400 16px var(--sans); }
.feld-l textarea { resize: vertical; min-height: 90px; }
.termin-feld[hidden] { display: none; }
.feld-l :focus { outline: none; border-color: rgba(196, 160, 106, .65); box-shadow: 0 0 0 3px rgba(196, 160, 106, .12); }
.zwei { display: flex; gap: 12px; }
.einw { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: #c3c8d5; line-height: 1.5; }
.einw input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--gold); flex: none; }
.einw a { color: var(--gold-hell); }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.meldung { min-height: 1em; font-size: 14px; color: var(--gold-hell); }
.meldung.fehler { color: #FFB59F; }
.dialog .knopf.gold { width: 100%; }
.dialog-fertig { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 20px 0; }
.dialog-fertig .ring { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(196, 160, 106, .12); border: 1px solid rgba(196, 160, 106, .4); }
.dialog-fertig svg { width: 28px; height: 28px; fill: none; stroke: var(--gold-hell); stroke-width: 2; }

/* ---------- Einblenden ---------- */
.js.takt .einblenden { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--kurve), transform .9s var(--kurve); transition-delay: var(--v, 0s); }
.js.takt .einblenden.da { opacity: 1; transform: none; }
/* Hero-Text ist sofort lesbar (auch ohne JS, im Hintergrund-Tab, bei reduzierter Bewegung); nur eine leichte Bewegung beim Laden. */
.hero-auf { animation: hero-auf .9s var(--kurve) both; }
.hero-spalte > :nth-child(2) { animation-delay: .06s; } .hero-spalte > :nth-child(3) { animation-delay: .12s; } .hero-spalte > :nth-child(4) { animation-delay: .18s; } .hero-spalte > :nth-child(5) { animation-delay: .24s; } .hero-spalte > :nth-child(6) { animation-delay: .3s; }
@keyframes hero-auf { from { transform: translateY(18px); } to { transform: none; } }
/* Seitenkopf mit Animation statt Video */
.szene-rahmen { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden; background: radial-gradient(80% 80% at 50% 40%, #12131a, #07070b); border: 1px solid rgba(196, 160, 106, .28); box-shadow: 0 40px 90px -40px rgba(196, 160, 106, .35), inset 0 0 0 1px rgba(255, 255, 255, .03); }
.szene-rahmen canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.szene-rahmen figcaption { position: absolute; left: 16px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(6, 6, 9, .7); border: 1px solid rgba(196, 160, 106, .25); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #d9dce6; }
.live-punkt { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px #4ade80; }
.mit-szene .zwei-spalten { align-items: center; }

/* ---------- Mobil ---------- */
@media (max-width: 960px) {
  .raster.drei { grid-template-columns: 1fr 1fr; }
  .schritte { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--linie); padding-left: 24px; gap: 28px; }
  .schritte li { padding: 0; }
  .schritte li::before { left: -28px; top: 8px; }
  .ki-band { grid-template-columns: 1fr; padding: 36px 28px; }
  .fuss-innen { grid-template-columns: 1fr 1fr; }
  .fuss-marke { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .menue { position: fixed; inset: 78px 12px auto; flex-direction: column; gap: 2px; padding: 12px; border-radius: 24px; background: rgba(12, 12, 15, .96); border: 1px solid var(--linie-2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .35s var(--kurve), transform .35s var(--kurve); }
  .menue.offen { opacity: 1; transform: none; pointer-events: auto; }
  .menue a { padding: 14px 16px; font-size: 17px; letter-spacing: 0; }
  .menue a::after { display: none; }
  .menue-knopf { display: flex; margin-left: auto; }
  .kopf-cta { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero-innen { padding: calc(78px + min(36vw, 150px) * 1.75 + 24px) 20px 30px; align-items: flex-start; } /* oben Platz für das schwebende A */
  .hero-innen { padding-bottom: 84px; } /* Platz für den KI-Assistent-Knopf unten rechts */
  .kennzahlen { grid-template-columns: repeat(2, auto); }
  .sprache { display: none; }
  .hero-scrim { background: linear-gradient(180deg, transparent 0, transparent calc(78px + min(36vw, 150px) * 1.6), rgba(4, 4, 10, .7) calc(78px + min(36vw, 150px) * 2.1), rgba(4, 4, 10, .9) 100%); }
  .hero-titel { font-size: clamp(2rem, 9vw, 2.7rem); }
  .hero-knoepfe { width: 100%; flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-knoepfe .knopf { width: 100%; }
  .kennzahlen { gap: 16px 26px; }
  .kicker { letter-spacing: .24em; }
  .hero-spalte .kicker { display: none; }
  .abschnitt { padding: 80px 20px; }
  .abschnitt-kopf { margin-bottom: 36px; }
  .raster.drei, .raster.zwei-sp, .pakete, .zusatz-liste { grid-template-columns: 1fr; }
  .pakete { gap: 26px; }
  .karte, .karte.gross { padding: 26px 24px; }
  .ki-band { padding: 30px 22px; border-radius: 26px; gap: 32px; }
  .cta { padding: 56px 22px; border-radius: 26px; }
  .zwei { flex-direction: column; gap: 14px; }
  .seiten-hero { padding: 140px 20px 20px; }
  .seiten-hero h1 { font-size: clamp(38px, 11vw, 56px); }
  .fuss-innen { grid-template-columns: 1fr; }
  .fuss-unten { flex-direction: column; }
  .dialog-innen { padding: 22px 18px; border-radius: 24px; }
  .faq summary { font-size: 17px; }
}
/* Leistungsseiten, Extras, Kontakt */
.karte .mehr { margin-top: auto; padding-top: 6px; color: var(--gold-hell); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.karte .mehr:hover { color: var(--gold); }
.zwei-spalten { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; text-align: left; }
.zwei-spalten > div:first-child { display: flex; flex-direction: column; gap: 22px; }
.leistung-hero h1 { font-size: clamp(42px, 5.4vw, 76px); }
.leistung-hero .hero-knoepfe { justify-content: flex-start; margin-top: 26px; }
.demo { border-radius: 24px; background: #0E0E12; border: 1px solid var(--linie-2); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(196, 160, 106, .06); overflow: hidden; }
.demo-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 14px 18px; border-bottom: 1px solid var(--linie); font-size: 14px; }
.demo-licht { width: 8px; height: 8px; border-radius: 50%; background: #5BD18B; box-shadow: 0 0 10px rgba(91, 209, 139, .8); }
.demo-kopf strong { white-space: nowrap; }
.demo-status { margin-left: auto; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.demo-code { margin: 0; padding: 22px; font: 14px/1.75 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #c8ccd8; white-space: pre; overflow-x: auto; }
.demo .chat-attrappe { border: 0; border-radius: 0; box-shadow: none; }
.demo-marke { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: rgba(196, 160, 106, .1); color: var(--gold-hell); font-size: 13px; }
.demo-marke svg, .demo-punkt svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.demo-liste { list-style: none; margin: 0; padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.demo-liste li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--flaeche); border: 1px solid var(--linie); font-size: 15px; animation: demo-ein .7s var(--kurve) both; animation-delay: calc(var(--i) * .18s + .3s); }
.demo-punkt { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(196, 160, 106, .12); color: var(--gold); flex: none; }
.demo-werte { margin: 0; padding: 18px 22px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.demo-werte div { padding: 14px; border-radius: 14px; background: var(--flaeche); border: 1px solid var(--linie); }
.demo-werte dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.demo-werte dd { margin: 4px 0 0; font-family: var(--serif); font-size: 22px; color: var(--gold-hell); }
@keyframes demo-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.leistung-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.leistung-links .chip { display: inline-flex; align-items: center; text-decoration: none; }
.kontakt-karte { text-decoration: none; }
.kontakt-karte strong { font-size: 19px; font-weight: 600; word-break: break-word; }
.reihe.mitte { justify-content: center; }
@media (max-width: 960px) { .zwei-spalten { grid-template-columns: 1fr; gap: 36px; } }

@media (prefers-reduced-motion: reduce) {
  .hero-auf { animation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .laufband-spur { transform: none; }
  .js .einblenden { opacity: 1; transform: none; }
}

/* =====================================================================
   Gestaltung nach Gabriels echter Seite (Videos vom 07.10.2026)
   ===================================================================== */
body { background: var(--grund); }
.hero { background: transparent; }
h1, h2, h3 { font-weight: 700; letter-spacing: 0; line-height: 1.2; }

/* Abschnittsköpfe mittig, Kicker als Gold-Pille */
.kicker { padding: 7px 16px 7px 13px; border: 1px solid rgba(196, 160, 106, .4); border-radius: 999px; background: rgba(196, 160, 106, .08); color: var(--gold-hell); font-size: 11px; font-weight: 600; letter-spacing: .2em; gap: 10px; }
.kicker::before { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-hell); box-shadow: 0 0 10px var(--gold); }
.abschnitt-kopf { align-items: center; text-align: center; margin-inline: auto; max-width: 820px; }
.abschnitt-kopf h2, .ki-band h2, .cta h2 { font-weight: 700; letter-spacing: -.035em; font-size: clamp(34px, 4.6vw, 58px); }
.abschnitt-kopf p { max-width: 680px; }
.hero-titel { font-weight: 700; letter-spacing: -.035em; font-size: clamp(2.2rem, 4.5vw, 4.4rem); }
.seiten-hero h1 { font-weight: 700; letter-spacing: -.035em; font-size: clamp(38px, 5.6vw, 78px); line-height: 1.02; max-width: 14em; }
.dialog-kopf h2 { font-weight: 700; font-size: 30px; }
.logo { font-weight: 800; letter-spacing: .3em; font-size: 20px; }
.menue a { font-weight: 600; color: #e6e9f2; }
.kopfleiste.gescrollt { background: rgba(8, 11, 22, .78); }
.knopf { font-weight: 700; }
.nr { font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: .12em; }

/* Glaskacheln */
.karte, .paket, .zusatz, .aktion { background: linear-gradient(160deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .016) 62%); border: 1px solid rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -42px rgba(0, 0, 0, .9); }
.paket.hervor { background: linear-gradient(180deg, rgba(196, 160, 106, .13), rgba(196, 160, 106, .02) 60%), var(--grund-2); border-color: rgba(196, 160, 106, .55); }
.ki-band, .cta { border-color: rgba(255, 255, 255, .1); }

/* Leistungen als Kachelraster mit Beispielansichten */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.bento-k { padding: 20px 22px 26px; overflow: hidden; gap: 8px; }
.b-web { grid-column: 1 / span 6; grid-row: 1 / span 2; }
.b-ki { grid-column: 7 / span 6; }
.b-auto { grid-column: 7 / span 3; }
.b-crm { grid-column: 10 / span 3; }
.b-seo { grid-column: 1 / span 6; }
.b-pflege { grid-column: 7 / span 6; }
.bento-k h3 { font-size: 22px; margin-top: 6px; }
.mini { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 12px; min-height: 150px; padding: 26px 16px 16px; border-radius: 16px; background: rgba(4, 7, 16, .72); border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; }
.b-web .mini { flex: 1; min-height: 250px; }
.beispiel { position: absolute; right: 12px; top: 9px; font: 500 9.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .32); }
.m-kopf { display: flex; align-items: center; gap: 6px; font: 500 11px var(--mono); color: #7d87a3; }
.m-kopf i { width: 9px; height: 9px; border-radius: 50%; background: #ff6b5e; }
.m-kopf i:nth-child(2) { background: #f6c14b; } .m-kopf i:nth-child(3) { background: #5fd49a; }
.m-kopf span { margin-left: 10px; }
.m-code pre { margin: 12px 0 10px; font: 500 12.5px/1.75 var(--mono); color: #c7d0ea; white-space: pre-wrap; }
.m-code .z { display: block; opacity: 0; animation: zeile 9s infinite both; animation-delay: calc(var(--k, 0) * .55s); }
.z1 { --k: 0; } .z2 { --k: 1; } .z3 { --k: 2; color: var(--gold-hell); } .z4 { --k: 3; color: #9fd1ff; } .z5 { --k: 4; } .z6 { --k: 5; }
@keyframes zeile { 0% { opacity: 0; transform: translateX(-8px); } 8%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
.m-fuss { display: flex; align-items: center; gap: 8px; font: 600 12px var(--mono); color: var(--gold-hell); }
.m-fuss b { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-hell); box-shadow: 0 0 10px var(--gold); animation: puls 2.4s infinite; }
.m-chat { display: flex; flex-direction: column; gap: 8px; }
.m-chat .b { animation: blase 8s infinite both; font-size: 13px; padding: 9px 13px; }
.m-chat .b:nth-child(2) { animation-delay: 1.2s; } .m-chat .b:nth-child(3) { animation-delay: 2.6s; }
@keyframes blase { 0% { opacity: 0; transform: translateY(8px); } 8%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.m-fluss { display: flex; align-items: center; gap: 6px; }
.m-fluss .n { flex: none; padding: 7px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); font-size: 12px; font-weight: 600; }
.m-fluss .n.an { border-color: rgba(240, 208, 137, .7); color: var(--gold-hell); box-shadow: 0 0 22px -6px rgba(196, 160, 106, .7); animation: knoten 4s infinite; }
.m-fluss i { position: relative; flex: 1; height: 1px; background: rgba(196, 160, 106, .45); }
.m-fluss i::after { content: ""; position: absolute; top: -2px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-hell); animation: lauf 2.2s linear infinite; }
@keyframes lauf { from { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } to { left: calc(100% - 5px); opacity: 0; } }
.m-status { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #c3c8d5; }
.m-zeile { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.m-zeile span { color: var(--gold-hell); font-size: 11.5px; }
.m-stufen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.m-stufen span { padding: 6px 0; text-align: center; font-size: 10.5px; border-radius: 8px; background: rgba(255, 255, 255, .06); color: #8f97ad; }
.m-stufen .an { background: linear-gradient(120deg, #f6dd9d, var(--gold)); color: #07070c; font-weight: 700; }
.m-balken { display: flex; align-items: flex-end; gap: 7px; height: 84px; }
.m-balken i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--gold-hell), rgba(196, 160, 106, .25)); transform-origin: bottom; animation: wachs 4s ease-out infinite alternate; }
.m-balken i:nth-child(odd) { animation-delay: .3s; }
@keyframes wachs { from { transform: scaleY(.55); } to { transform: none; } }
.m-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13px; color: #d4d8e4; }
.m-liste li { display: flex; align-items: center; gap: 10px; }

/* „Alles greift ineinander“ */
.system-kette { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; position: relative; counter-reset: s; }
.system-kette::before { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(196, 160, 106, .55) 15%, rgba(196, 160, 106, .55) 85%, transparent); }
.system-kette li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 16px 24px; border-radius: 20px; text-align: center; background: linear-gradient(160deg, #141a2e, #0b0f1d); border: 1px solid rgba(255, 255, 255, .12); animation: knoten 8s infinite both; animation-delay: calc(var(--i) * 1.3s); }
.system-kette h3 { font-size: 19px; }
.system-kette p { color: var(--leise); font-size: 14px; }
.s-nr { font: 600 12px var(--mono); letter-spacing: .14em; color: var(--gold); }
@keyframes knoten { 0%, 24%, 100% { border-color: rgba(255, 255, 255, .12); box-shadow: none; } 6%, 16% { border-color: rgba(240, 208, 137, .85); box-shadow: 0 0 0 1px rgba(240, 208, 137, .35), 0 0 46px -8px rgba(196, 160, 106, .65); } }

/* Ablauf als Zeitleiste mit goldener Mittellinie */
.schritte { display: block; position: relative; max-width: 940px; margin: 0 auto; padding: 6px 0; border-top: 0; }
.schritte::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, rgba(196, 160, 106, .6) 10%, rgba(196, 160, 106, .6) 90%, transparent); }
.schritte li { position: relative; width: calc(50% - 40px); margin: 0 0 22px; padding: 22px 26px 24px; border-radius: 20px; background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)); border: 1px solid rgba(255, 255, 255, .1); }
.schritte li:nth-child(even) { margin-left: auto; }
.schritte li::before { top: 30px; left: auto; right: -45px; width: 9px; height: 9px; }
.schritte li:nth-child(even)::before { right: auto; left: -45px; }

/* Fußzeile mit Spalten */
.fuss-innen { grid-template-columns: 1.7fr repeat(5, 1fr); gap: 28px; }
.fuss-spalte h2 { margin: 0 0 6px; font: 700 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hell); }
.fuss-spalte { gap: 9px; font-size: 14.5px; }
.fuss-kontakt { display: block; margin-top: 8px; color: #c3c8d5; text-decoration: none; font-size: 14.5px; }
.fuss-kontakt:hover { color: var(--gold-hell); }

@media (max-width: 1000px) {
  .system-kette { grid-template-columns: 1fr; padding-left: 26px; }
  .system-kette::before { left: 8px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, transparent, rgba(196, 160, 106, .55) 10%, rgba(196, 160, 106, .55) 90%, transparent); }
  .fuss-innen { grid-template-columns: repeat(2, 1fr); }
  .fuss-marke { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; }
  .bento-k { grid-column: auto !important; grid-row: auto !important; }
  .b-web .mini { min-height: 210px; }
}
@media (max-width: 760px) {
  .schritte::before { left: 12px; }
  .schritte li, .schritte li:nth-child(even) { width: auto; margin: 0 0 18px 38px; }
  .schritte li::before, .schritte li:nth-child(even)::before { left: -31px; right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  body::after, .m-code .z, .m-chat .b, .m-balken i, .system-kette li, .m-fluss .n.an, .m-fluss i::after { animation: none; opacity: 1; }
}
/* Die Seite hat im Kopf nur eine Pille; der zweite Tag-Text entfällt. */
.hero .hero-tag { display: none; }
.stimmen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.stimme { margin: 0; padding: 1.4rem; }
.stimme blockquote { margin: 0 0 1rem; line-height: 1.6; }
.stimme figcaption { display: flex; flex-direction: column; gap: .15rem; font-size: .9rem; }
.stimme figcaption span { color: var(--gedaempft, #9aa3b8); }
.ergebnisse { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.ergebnis { padding: 1.4rem; display: flex; flex-direction: column; gap: .4rem; text-align: center; }
.ergebnis strong { font-size: 2.2rem; font-weight: 700; color: var(--gold, #d4b078); }
.ergebnis small { color: var(--gedaempft, #9aa3b8); font-size: .75rem; }
.extra-preis { margin-top: .75rem; font-size: .9rem; color: var(--gedaempft, #9aa3b8); }
.extra-preis strong { color: var(--gold, #d4b078); font-weight: 700; }
.sr-nur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vergleich-link { display: flex; justify-content: center; margin: 1.5rem 0 0; }
.tabelle-rahmen { overflow-x: auto; border: 1px solid rgba(255,255,255,.08); border-radius: 1.25rem; background: rgba(255,255,255,.03); }
.vergleich { width: 100%; min-width: 640px; border-collapse: collapse; }
.vergleich th, .vergleich td { padding: .9rem 1rem; text-align: center; border-bottom: 1px solid rgba(255,255,255,.06); font-weight: 500; }
.vergleich tbody th { text-align: left; font-weight: 500; }
.vergleich thead th { font-weight: 700; vertical-align: bottom; }
.vergleich thead th small { display: block; margin-top: .25rem; font-weight: 500; color: var(--gold, #d4b078); }
.vergleich thead th.hervor { color: var(--gold, #d4b078); }
.vergleich .ja svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: var(--gold, #d4b078); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vergleich .nein { color: rgba(255,255,255,.3); }
.vergleich tfoot td { border-bottom: 0; padding-top: 1.25rem; }
.vergleich .merkmale td { vertical-align: top; text-align: left; }
.vergleich .merkmale th { vertical-align: top; }
.vergleich .merkmale ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.vergleich .merkmale li { display: flex; gap: .5rem; align-items: flex-start; font-size: .92rem; }
.vergleich .merkmale li svg { flex: none; width: 1rem; height: 1rem; margin-top: .2rem; fill: none; stroke: var(--gold, #d4b078); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Unterseiten-Kopf: Pille nur so breit wie ihr Text, Überschrift etwas kleiner neben dem Code-Fenster */
.zwei-spalten > div:first-child > .kicker, .seiten-hero-innen > .kicker { align-self: flex-start; width: fit-content; }
.zwei-spalten h1 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
.rechner { display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; padding: 2rem; }
.rechner-eingabe { display: grid; gap: 1.5rem; align-content: start; }
.rechner input[type=range] { width: 100%; accent-color: var(--gold, #d4b078); margin-top: .75rem; }
.rechner output { display: block; margin-top: .25rem; color: var(--gold, #d4b078); font-weight: 700; }
.rechner-optionen { border: 0; margin: 0; padding: 0; display: grid; gap: .6rem; }
.rechner-optionen legend { padding: 0; margin-bottom: .6rem; font-weight: 600; }
.rechner-optionen em { color: var(--gedaempft, #9aa3b8); font-style: normal; }
.rechner-ergebnis { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; padding: 1.5rem; border-radius: 1rem; background: rgba(196,160,106,.08); border: 1px solid rgba(196,160,106,.3); }
.rechner-ergebnis strong { font-size: 2.6rem; font-weight: 800; color: var(--gold-hell, #e8c98f); }
@media (max-width: 800px) { .rechner { grid-template-columns: 1fr; padding: 1.25rem; } }

/* ---- Startseite nach dem Original (Runde 1): Warum, Portfolio, Engine, Extras, Über, Kontakt ---- */
.menue a { font-size: 14px; font-weight: 400; letter-spacing: .02em; }
.hero-titel { line-height: 1.1; font-size: clamp(2.3rem, 4.4vw, 4rem); gap: 0; }
.hero-titel .zeile { padding: 0; }
.warum-gitter { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; min-height: 640px; }
.warum-text h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.15; letter-spacing: 0; margin: 22px 0 28px; max-width: 520px; }
.haken-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.haken-liste li { display: flex; align-items: center; gap: 14px; color: #d4d7de; font-size: 16px; }
.haken-ring { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(196, 160, 106, .55); background: rgba(196, 160, 106, .1); display: grid; place-items: center; }
.haken-ring svg { width: 12px; height: 12px; fill: none; stroke: var(--gold-hell); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.warum-kugel { position: relative; height: 620px; }
.weltkugel { width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.kugel-karte { position: absolute; left: 50%; bottom: 0; transform: translateX(-10%); display: flex; flex-direction: column; gap: 4px; padding: 16px 24px; border-radius: 14px; border: 1px solid rgba(196, 160, 106, .28); background: rgba(8, 9, 11, .8); backdrop-filter: blur(8px); min-width: 290px; }
.kugel-karte strong { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.kugel-karte span { font-size: 13px; color: var(--leise); white-space: nowrap; }
.portfolio-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.portfolio-kopf .abschnitt-kopf { margin: 0; }
.abschnitt-kopf.links { align-items: flex-start; text-align: left; }
.projekt-bild { aspect-ratio: 16 / 9; border-radius: 14px; border: 1px solid var(--linie); background: radial-gradient(120% 90% at 20% 0%, rgba(196, 160, 106, .18), transparent 60%), #0b0d11; display: flex; align-items: flex-end; padding: 12px 14px; }
.projekt-bild span { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #8a8f9c; }
.projekt h3 { font-size: 22px; }
.engine { border: 1px solid var(--linie); border-radius: 22px; background: rgba(255, 255, 255, .02); padding: 22px 26px 34px; max-width: 980px; margin: 0 auto; }
.engine-kopf { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: .22em; color: #8a8f9c; padding-bottom: 18px; border-bottom: 1px solid var(--linie); }
.engine-kopf .live { color: var(--gold); display: inline-flex; align-items: center; gap: 8px; }
.engine-kopf .live i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.engine-quellen { display: flex; gap: 10px; justify-content: center; margin: 28px 0 18px; }
.engine-quellen div { padding: 8px 16px; border-radius: 10px; border: 1px solid var(--linie-2); font-size: 13px; color: #cfd2d8; background: rgba(255, 255, 255, .03); }
.engine-fluss { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative; }
.engine-fluss::before { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(196, 160, 106, .5), transparent); }
.engine-fluss li { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; border-radius: 12px; border: 1px solid rgba(196, 160, 106, .25); background: #0b0d11; text-align: center; }
.engine-fluss strong { font-size: 14px; color: #fff; }
.engine-fluss span { font-size: 12px; color: var(--leise); }
.extras-raster { grid-template-columns: repeat(3, 1fr); }
.extra-karte { gap: 8px; padding: 22px; }
.extra-karte h3 { font-size: 16px; }
.extra-karte p { font-size: 13px; }
.extra-kopf .sym { width: 26px; height: 26px; stroke: var(--gold-hell); }
.extra-preis { margin-top: auto; padding-top: 6px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--gold-hell); }
.mitte { text-align: center; margin-top: 32px; }
.ueber-gitter { max-width: 760px; }
.ueber-gitter h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.2; letter-spacing: 0; margin: 22px 0 18px; }
.ueber-gitter p { color: var(--leise); font-size: 17px; }
.kontakt-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.kontakt-text h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.12; letter-spacing: 0; margin-bottom: 18px; }
.kontakt-text > p { color: var(--leise); font-size: 17px; max-width: 460px; }
.vorteile { list-style: none; margin: 24px 0 0; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; color: #b7bccb; font-size: 13px; }
.vorteile li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-right: 8px; }
.kontakt-form { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 20px; border: 1px solid var(--linie); background: rgba(255, 255, 255, .025); }
.mini-schritte { list-style: none; display: flex; justify-content: space-between; margin: 6px 0 0; padding: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8a8f9c; }
@media (max-width: 900px) {
  .warum-gitter, .kontakt-gitter { grid-template-columns: 1fr; min-height: 0; }
  .warum-kugel { height: 380px; }
  .kugel-karte { left: 0; right: 0; transform: none; margin: 0 auto; width: max-content; max-width: 100%; }
  .extras-raster { grid-template-columns: 1fr 1fr; }
  .engine-fluss { grid-template-columns: 1fr; }
  .engine-fluss::before { display: none; }
  .portfolio-kopf { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) { .extras-raster { grid-template-columns: 1fr; } .engine-quellen { flex-wrap: wrap; } .zwei { flex-direction: column; } }

.kennzahlen-abschnitt { padding-top: 70px; padding-bottom: 20px; }
.kennzahlen-zeile { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; }
.kennzahlen-zeile > div { display: flex; flex-direction: column-reverse; align-items: center; gap: 10px; padding: 8px 12px; border-left: 1px solid var(--linie); }
.kennzahlen-zeile > div:first-child { border-left: 0; }
.kennzahlen-zeile dd { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(34px, 4vw, 56px); line-height: 1.1; background: linear-gradient(180deg, var(--gold-hell), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kennzahlen-zeile dt { font-size: 13px; color: var(--leise); text-align: center; }
.abschnitt-kopf { max-width: 640px; margin-left: auto; margin-right: auto; align-items: center; text-align: center; }
.abschnitt-kopf.links { margin-left: 0; margin-right: 0; align-items: flex-start; text-align: left; }
.abschnitt-kopf h2, .ki-band h2, .cta h2 { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.1; letter-spacing: 0; }
.abschnitt { padding-top: 120px; padding-bottom: 120px; }
@media (max-width: 700px) { .kennzahlen-zeile { grid-template-columns: 1fr 1fr; row-gap: 22px; } .kennzahlen-zeile > div:nth-child(3) { border-left: 0; } }
.kopfleiste { transition: background .4s ease, border-color .4s ease, transform .4s var(--kurve); }
.kopfleiste.versteckt { transform: translateY(-110%); }
.kennzahlen-zeile > div { flex-direction: column; }

.system-fluss { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 36px; position: relative; }
.system-fluss li { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 18px; background: linear-gradient(160deg, #11151b, #0a0c10); border: 1px solid rgba(255, 255, 255, .1); }
.system-fluss li:not(:last-child)::after { content: ""; position: absolute; left: 100%; top: 50%; width: 36px; height: 1px; background: rgba(196, 160, 106, .45); }
.system-fluss li.ziel { border-color: rgba(196, 160, 106, .55); box-shadow: 0 0 40px rgba(196, 160, 106, .12); }
.sk-kopf { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; color: #e8eaee; padding: 2px 4px; }
.sk-kopf .punkt { width: 6px; height: 6px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 8px rgba(61, 220, 151, .7); }
.system-fluss .mini { min-height: 120px; padding: 14px 10px 18px; }
.m-seite { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.m-chat .b.ok { color: #3ddc97; border-color: rgba(61, 220, 151, .4); }
.seiten-start { padding-top: 150px; }
@media (max-width: 900px) { .system-fluss { grid-template-columns: 1fr; gap: 22px; } .system-fluss li:not(:last-child)::after { left: 50%; top: 100%; width: 1px; height: 22px; } }

.webdesign-hero .zwei-spalten { align-items: center; }
.webdesign-hero h1 { font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: 1.12; letter-spacing: 0; max-width: 12em; }
.browser-mock { border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: #0c0e12; overflow: hidden; }
.browser-mock .m-kopf { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--linie); }
.browser-mock .m-kopf i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; } .browser-mock .m-kopf i:nth-child(2) { background: #febc2e; } .browser-mock .m-kopf i:nth-child(3) { background: #28c840; }
.browser-mock .m-kopf span { margin-left: 8px; flex: 1; padding: 3px 10px; font-size: 10px; color: #70757f; background: rgba(255, 255, 255, .04); border-radius: 6px; }
.bm-leiste { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--linie); }
.bm-leiste b { font-size: 11px; letter-spacing: .2em; margin-right: auto; }
.bm-leiste span { width: 30px; height: 4px; border-radius: 2px; background: #2a2e36; } .bm-leiste em { width: 52px; height: 14px; border-radius: 4px; background: linear-gradient(135deg, var(--gold-hell), var(--gold)); }
.bm-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 28px 16px 18px; }
.bm-text i { display: block; height: 8px; border-radius: 4px; background: #343841; margin-bottom: 10px; } .bm-text .l1 { width: 100%; background: linear-gradient(90deg, #8b8f98, #3a3e46); height: 11px; } .bm-text .l3 { width: 55%; }
.bm-text em { display: block; width: 70px; height: 20px; border-radius: 5px; background: linear-gradient(135deg, var(--gold-hell), var(--gold)); margin-top: 16px; }
.bm-bild { min-height: 90px; border-radius: 10px; border: 1px solid var(--linie); background: radial-gradient(90% 90% at 30% 30%, rgba(196, 160, 106, .2), transparent), #12151a; }
.bm-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 8px 16px 16px; } .bm-karten i { height: 40px; border-radius: 8px; border: 1px solid var(--linie); background: #0f1217; }
.bm-fuss { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--linie); font-size: 11px; color: #8a8f9c; }
.empfehlung .paket { gap: 12px; } .empfehlung .paket-text { color: var(--gold-hell); font-size: 13px; }
.webdesign-hero .seiten-hero-innen { max-width: 1320px; }
.webdesign-hero h1 { font-size: 3rem; max-width: 10.6em; }
.webdesign-hero .seiten-hero-innen > div:first-child > p { max-width: 29em; }
.hero-knoepfe .knopf { min-height: 56px; font-size: 16px; padding-inline: 32px; }
.empfehlung { max-width: 1200px; }
.empfehlung .abschnitt-kopf { max-width: 560px; }
.empfehlung .abschnitt-kopf h2 { font-size: clamp(32px, 3.6vw, 52px); }
.empfehlung .abschnitt-kopf p { font-size: 15px; }
.empfehlung .paket { padding: 30px; gap: 10px; }
.empfehlung .paket h3 { font-family: var(--sans); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.empfehlung .paket-text { font-size: 12px; color: var(--gold-hell); padding-bottom: 14px; border-bottom: 1px solid var(--linie); }
.empfehlung .paket .leise { font-size: 12.5px; line-height: 1.6; min-height: 5.2em; }
.empfehlung .paket .preis { margin-top: auto; padding: 0; border: 0; flex-direction: row; align-items: center; gap: 8px; }
.empfehlung .paket .preis::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3ddc97; }
.empfehlung .paket .preis strong { font-family: var(--sans); font-size: 12px; font-weight: 600; }
.empfehlung .paket .preis span { font-size: 12px; margin: 0; }
.empfehlung .hinweis { text-align: center; max-width: 520px; margin: 28px auto 0; font-size: 12px; }

/* ---- Rechtliches im Stil der Onepage-Seite ---- */
.recht-hero .seiten-hero-innen { max-width: 880px; margin: 0 auto; text-align: left; align-items: flex-start; }
.recht-hero h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.1; letter-spacing: 0; margin: 18px 0 14px; }
.recht-hero p { color: var(--leise); max-width: 40em; }
.stand-chip { display: inline-block; margin-top: 18px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--linie-2); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #aeb3bf; }
.recht-gitter { max-width: 880px; padding-top: 30px; }
.recht-karten { display: grid; gap: 18px; margin-bottom: 18px; }
.recht-karten.drei { grid-template-columns: repeat(3, 1fr); }
.recht-karten.zwei { grid-template-columns: repeat(2, 1fr); }
.recht-karte { gap: 14px; padding: 24px; }
.recht-karte h2 { font-family: var(--sans); font-size: 17px; font-weight: 600; }
.recht-karte p { font-size: 13px; line-height: 1.7; color: var(--leise); }
.mono-titel { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.balken-text { display: flex; flex-direction: column; gap: 6px; padding-left: 14px; border-left: 2px solid var(--gold); font-size: 14px; color: #e6e8ec; }
.balken-text small { margin-top: 6px; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #8a8f9c; }
.balken-text p { font-size: 14px; color: #e6e8ec; margin: 0; }
.recht-text { max-width: 880px; padding-top: 20px; }
.recht-text .fliesstext.recht { gap: 26px; }
.recht-block { padding-left: 18px; border-left: 1px solid rgba(196, 160, 106, .45); display: flex; flex-direction: column; gap: 10px; }
.recht-block h2 { font-size: 22px; margin: 0; font-family: var(--serif); font-weight: 600; letter-spacing: 0; }
.recht-block p { font-size: 14px; line-height: 1.75; color: #b9bdc8; margin: 0; }
@media (max-width: 800px) { .recht-karten.drei, .recht-karten.zwei { grid-template-columns: 1fr; } }
body[data-seite="impressum"] .recht-hero .seiten-hero-innen, body[data-seite="impressum"] .recht-gitter { max-width: 1120px; }
.recht-hero { padding-top: 120px; padding-bottom: 20px; min-height: 0; }
.vergleich-link { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 560px) { .vergleich-link .knopf { width: 100%; justify-content: center; } }
/* Hero-Video: Kugel rechts, Ränder weich in den schwarzen Grund */
.hero-video { left: auto; right: 0; width: 62%; object-position: center; mix-blend-mode: lighten; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%, #000 85%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 28%, #000 85%, transparent 100%); }
@media (max-width: 700px) { .hero-video { inset: 78px 0 auto 0; width: 100%; height: min(78vw, 340px); -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); } }

/* Vergleichsangebot (Drucken → PDF): nur beim Drucken sichtbar */
.angebot-druck { display: none; }
@media print {
  html.angebot-drucken body { background: #fff; }
  html.angebot-drucken body * { visibility: hidden; }
  html.angebot-drucken .angebot-druck, html.angebot-drucken .angebot-druck * { visibility: visible; }
  html.angebot-drucken .angebot-druck { display: block !important; position: absolute; left: 0; top: 0; width: 100%; background: #fff; }
  .angebot-druck { padding: 18mm; color: #111; font-family: 'Inter', Arial, sans-serif; }
  .angebot-druck h2 { font-family: 'Space Grotesk', Arial, sans-serif; margin: 0 0 4mm; }
  .angebot-druck table { width: 100%; border-collapse: collapse; margin: 6mm 0; }
  .angebot-druck td { padding: 2.5mm 0; border-bottom: 1px solid #ccc; }
  .angebot-druck td + td { text-align: right; white-space: nowrap; }
  .angebot-druck .summe td { font-weight: 700; }
}

/* Hero-Fenster der Leistungsseiten (Chatbots, Automatisierung, CRM, SEO, Wartung) */
.mock { border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: #0c0e12; overflow: hidden; display: flex; flex-direction: column; min-height: 440px; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95); }
.mock .m-kopf { display: flex; align-items: center; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--linie); }
.mock .m-kopf i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .mock .m-kopf i:nth-child(2) { background: #febc2e; } .mock .m-kopf i:nth-child(3) { background: #28c840; }
.mock .m-kopf span { margin-left: 8px; flex: 1; padding: 4px 12px; font: 400 12px var(--sans); color: #8b92a3; background: rgba(255, 255, 255, .05); border-radius: 7px; }
.mk-rumpf { flex: 1; display: flex; flex-direction: column; }
.mk-fuss { display: flex; justify-content: space-between; gap: 12px; padding: 18px 16px; border-top: 1px solid var(--linie); font-size: 13px; color: var(--gold-hell); background: rgba(255, 255, 255, .015); }
.mk-fuss span { display: inline-flex; align-items: center; gap: 9px; } .mk-fuss i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.mk-gruen, .mk-fuss .mk-gruen { color: #6bdca0; } .mk-fuss .mk-gruen i { background: #5BD18B; }
.mk-av { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #f0d089, #b9955a); color: #1a1408; font: 700 11px var(--sans); flex: none; }
.mk-av.grau { background: rgba(196, 160, 106, .14); color: var(--gold-hell); border: 1px solid rgba(196, 160, 106, .3); border-radius: 50%; width: 34px; height: 34px; }
@keyframes mk-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mk-blase, .mk-chips, .mk-ok, .mk-schritte li, .mk-pruef li { animation: mk-ein .6s var(--kurve) both; animation-delay: calc(var(--i, 0) * .55s + .5s); }
/* Chat */
.mk-kopf2 { display: flex; gap: 14px; align-items: center; padding: 16px; border-bottom: 1px solid var(--linie); }
.mk-kopf2 strong { display: block; font-size: 14px; } .mk-kopf2 .mk-gruen { font-size: 12px; display: block; margin-top: 2px; } .mk-kopf2 .mk-gruen::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #5BD18B; vertical-align: 1px; }
.mk-verlauf { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.mk-blase { padding: 12px 16px; border-radius: 12px; font-size: 13.5px; line-height: 1.55; color: #9aa1b2; border: 1px solid var(--linie); background: rgba(255, 255, 255, .03); }
.mk-ich { align-self: flex-end; max-width: 92%; } .mk-bot { align-self: stretch; }
.mk-chips { display: flex; gap: 8px; flex-wrap: wrap; } .mk-chips span { padding: 6px 12px; border: 1px solid var(--linie-2); border-radius: 999px; font-size: 11.5px; color: var(--gold-hell); background: rgba(196, 160, 106, .05); }
.mk-ok { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; border: 1px solid rgba(91, 209, 139, .3); background: rgba(91, 209, 139, .08); color: #6bdca0; font-size: 12.5px; font-weight: 600; }
.mk-ok svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; }
/* Workflow */
.mk-schritte { list-style: none; margin: 0; padding: 22px 20px; display: flex; flex-direction: column; gap: 14px; position: relative; flex: 1; }
.mk-schritte li { display: flex; align-items: center; gap: 14px; font-size: 14px; color: #6f7686; position: relative; }
.mk-schritte li:not(:last-child)::after { content: ''; position: absolute; left: 14px; top: 30px; width: 1px; height: 18px; background: var(--linie-2); }
.mk-kreis { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--linie-2); font-size: 11px; flex: none; background: #0c0e12; }
.mk-kreis svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.mk-schritte li.fertig { color: #aeb4c2; } .mk-schritte li.fertig .mk-kreis { border-color: rgba(91, 209, 139, .55); background: rgba(91, 209, 139, .1); color: #6bdca0; }
.mk-schritte li.aktiv { color: var(--gold-hell); } .mk-schritte li.aktiv .mk-kreis { border-color: var(--gold); background: rgba(196, 160, 106, .1); color: var(--gold-hell); }
/* CRM */
.mk-zeile { display: flex; justify-content: space-between; align-items: center; padding: 20px 20px 14px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8b92a3; }
.mk-zeile strong { font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--gold-hell); font-weight: 600; } .mock-status .mk-zeile strong { color: var(--text); letter-spacing: .02em; }
.mk-zeile em { font-style: normal; padding: 6px 12px; border: 1px solid var(--linie-2); border-radius: 999px; font-size: 11px; letter-spacing: .12em; color: var(--gold-hell); }
.mk-crm .mk-zeile { border-bottom: 1px solid var(--linie); margin: 0 20px; padding: 14px 0; }
.mk-lead { display: flex; align-items: center; gap: 14px; margin: 14px 20px; padding: 14px; border: 1px solid var(--linie); border-radius: 12px; background: rgba(255, 255, 255, .02); font-size: 14px; }
.mk-lead div { flex: 1; } .mk-lead strong { display: block; } .mk-lead div span { font-size: 12px; color: #7f8696; }
.mk-lead em { font-style: normal; font-size: 11.5px; padding: 6px 10px; border: 1px solid var(--linie-2); border-radius: 6px; color: var(--gold-hell); }
.mk-phasen { display: grid; grid-template-columns: repeat(4, 1fr); margin: 4px 20px 0; position: relative; text-align: center; font-size: 11.5px; color: #6f7686; }
.mk-phasen::before { content: ''; position: absolute; left: 12%; right: 12%; top: 11px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--gold) 0 18%, rgba(255, 255, 255, .07) 18%); }
.mk-phasen div { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.mk-phasen i { width: 22px; height: 22px; border-radius: 50%; background: #1b1e26; border: 1px solid var(--linie-2); animation: mk-phase 4s ease both; animation-delay: calc(var(--i) * .8s + .6s); }
@keyframes mk-phase { to { background: var(--gold); border-color: var(--gold-hell); box-shadow: 0 0 14px rgba(196, 160, 106, .5); } }
.mk-phasen .ziel span { color: #6bdca0; }
.mk-portal { margin: 18px 20px 6px; padding: 14px; border: 1px solid var(--linie); border-radius: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.mk-portal strong { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 4px; } .mk-portal strong .mk-gruen { font-weight: 500; font-size: 12px; }
.mk-portal div { display: flex; justify-content: space-between; color: #9aa1b2; } .mk-portal b { color: var(--text); font-weight: 500; }
/* SEO */
.mk-suche { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--linie); font-size: 14px; }
.mk-suche em { margin-left: auto; font-style: normal; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border: 1px solid var(--linie-2); border-radius: 6px; color: #8b92a3; }
.mk-lupe { width: 12px; height: 12px; border: 1.5px solid #8b92a3; border-radius: 50%; position: relative; } .mk-lupe::after { content: ''; position: absolute; width: 6px; height: 1.5px; background: #8b92a3; right: -5px; bottom: -2px; transform: rotate(45deg); }
.mk-seo { display: grid; grid-template-columns: 130px 1fr; flex: 1; min-height: 190px; }
.mk-pos { padding: 16px; border-right: 1px solid var(--linie); display: flex; flex-direction: column; gap: 4px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #6f7686; }
.mk-pos small { line-height: 2; } .mk-pos strong { font-family: var(--sans); font-size: 52px; line-height: 1; letter-spacing: 0; color: var(--gold); font-weight: 600; } .mk-pos > small:last-child { text-transform: none; letter-spacing: 0; font-size: 10px; margin-top: auto; }
.mk-saeulen { display: flex; align-items: flex-end; gap: 12px; padding: 16px 16px 0; border-bottom: 1px solid var(--linie); margin: 0 0 0; }
.mk-saeulen i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #d9bd8a, #bfa070); transform-origin: bottom; animation: mk-wachs .9s var(--kurve) both; animation-delay: calc(var(--i) * .12s + .4s); }
@keyframes mk-wachs { from { transform: scaleY(.05); opacity: .4; } }
.mk-kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--linie); } .mk-kennzahlen div { padding: 12px 10px 12px 16px; display: flex; flex-direction: column; gap: 2px; } .mk-kennzahlen strong { font-size: 15px; color: var(--gold-hell); } .mk-kennzahlen span { font-size: 9.5px; color: #6f7686; }
/* Wartung */
.mk-pruef { list-style: none; margin: 0; padding: 4px 20px 6px; border-top: 1px solid var(--linie); }
.mk-pruef li { display: flex; align-items: center; gap: 12px; padding: 12px 10px; font-size: 14px; color: #aeb4c2; border-radius: 8px; }
.mk-pruef b { margin-left: auto; font-weight: 500; color: #6bdca0; font-size: 13px; }
.mk-punkt { width: 7px; height: 7px; border-radius: 50%; background: #5BD18B; flex: none; box-shadow: 0 0 8px rgba(91, 209, 139, .6); }
.mk-alle { margin: 0; padding: 14px 20px; border-top: 1px solid var(--linie); font-size: 12px; color: #9aa1b2; display: flex; align-items: center; gap: 10px; } .mk-alle .mk-punkt { background: var(--gold); box-shadow: none; }
@media (max-width: 760px) { .mock { min-height: 0; } .mk-kennzahlen { grid-template-columns: repeat(2, 1fr); } .mk-seo { grid-template-columns: 110px 1fr; } }
@media (prefers-reduced-motion: reduce) { .mk-blase, .mk-chips, .mk-ok, .mk-schritte li, .mk-pruef li, .mk-saeulen i, .mk-phasen i { animation: none; } }
/* Paketempfehlung: Preiszeile wie im Original */
.empfehlung .preis { flex-direction: row; align-items: center; gap: 8px; padding: 14px 0 0; border: 0; font-size: 13px; letter-spacing: .02em; color: #6bdca0; }
.empfehlung .preis::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #5BD18B; flex: none; }
.empfehlung .preis strong { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; color: #6bdca0; } .empfehlung .preis span { font-size: 13px; color: #6bdca0; }
.empfehlung .abschnitt-kopf h2 { max-width: 760px; margin-inline: auto; }

/* Leistungs-Detailseiten (Webdesign, Chatbots, Automatisierung, CRM, SEO, Wartung): Feinabgleich zur Vorlage */
body.detail .kopf-innen { max-width: 1272px; padding: 16px 0; }
body.detail .sprache { border: 0; background: none; width: auto; height: auto; padding: 0; color: #d9dce4; font: 700 14px/1 var(--serif); letter-spacing: .02em; }
body.detail .kopf-cta { border-radius: 10px; min-height: 44px; padding: 0 18px; font-size: 15px; font-weight: 700; }
body.detail .seiten-hero { min-height: 100vh; display: flex; align-items: center; padding: 36px 0 0; background: radial-gradient(50% 80% at 85% 0%, rgba(196, 160, 106, .1), transparent 70%); }
body.detail .seiten-hero-innen { max-width: 1320px; width: 100%; padding: 0; box-sizing: border-box; }
body.detail .seiten-hero .zwei-spalten, body.detail .seiten-hero-innen.zwei-spalten { grid-template-columns: minmax(0, 1fr) 656px; gap: 84px; }
body.detail .seiten-hero h1 { font-size: 57.6px; line-height: 1.1; letter-spacing: 0; max-width: 580px; }
body.detail .seiten-hero p { font-size: 20px; line-height: 1.5; color: #9ea4b3; max-width: 580px; }
body.detail .seiten-hero .kicker { height: 42px; padding: 0 22px 0 15px; gap: 12px; font: 600 13px/1 var(--sans); letter-spacing: .26em; color: #c9a56a; }
body.detail .seiten-hero .hero-knoepfe { gap: 14px; margin-top: 26px; }
body.detail .seiten-hero .knopf { border-radius: 10px; min-height: 58px; padding: 0 34px; font-size: 16px; }
body.detail .seiten-hero .knopf.rand { background: #0b0c10; border-color: rgba(255, 255, 255, .16); }
body.detail .seiten-hero .mock, body.detail .seiten-hero .browser-mock { width: 656px; max-width: 100%; }
body.detail .seiten-hero .browser-mock { border-radius: 18px; }
@media (max-width: 960px) {
  body.detail .seiten-hero { min-height: 0; padding: 110px 0 30px; }
  body.detail .seiten-hero-innen { padding: 0 20px; }
  body.detail .seiten-hero .zwei-spalten, body.detail .seiten-hero-innen.zwei-spalten { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  body.detail .seiten-hero .mock, body.detail .seiten-hero .browser-mock { width: 100%; }
  body.detail .seiten-hero h1 { font-size: clamp(32px, 8.9vw, 46px); line-height: 1.1; }
  body.detail .seiten-hero p { font-size: 17.5px; line-height: 1.75; }
  body.detail .seiten-hero .hero-knoepfe { flex-wrap: nowrap; gap: 10px; }
  body.detail .seiten-hero .hero-knoepfe .knopf { flex: 1 1 0; min-width: 0; padding: 0 10px; font-size: 15px; white-space: nowrap; }
  body.detail .kopf-innen { padding: 14px 20px; gap: 8px; }
  body.detail .logo { font-size: 19px; margin-right: auto; }
  body.detail .sprache { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border: 1px solid var(--linie-2); border-radius: 8px; }
  body.detail .kopf-cta { display: inline-flex; min-height: 40px; padding: 0 14px; font-size: 13px; }
}
body.detail .logo { padding-left: 0; }
body.detail .menue { margin: 0 auto; }
body.detail .menue a { font-size: 15px; font-weight: 500; letter-spacing: 0; color: #f1f2f6; }
body.detail .kopf-innen { gap: 20px; }
@media (max-width: 960px) { body.detail .menue { margin: 0; } }
body.detail .seiten-hero h1 { text-wrap: balance; }
@media (max-width: 960px) {
  body.detail .seiten-hero .hero-knoepfe { flex-direction: row; align-items: stretch; }
  body.detail .kopf-cta { padding: 0 11px; font-size: 12.5px; white-space: nowrap; flex: none; }
  body.detail .logo { letter-spacing: .22em; font-size: 18px; }
  body.detail .menue-knopf { flex: none; }
}
body.detail .empfehlung { max-width: 1200px; padding-inline: 0; margin-inline: auto; }
body.detail .empfehlung .kicker { height: 42px; padding: 0 22px 0 15px; gap: 12px; font: 600 13px/1 var(--sans); letter-spacing: .3em; color: #c9a56a; }
body.detail .empfehlung .abschnitt-kopf h2 { font-size: 56px; line-height: 1.12; letter-spacing: 0; max-width: 800px; text-wrap: balance; }
body.detail .empfehlung .abschnitt-kopf p { font-size: 17px; line-height: 1.6; color: #a2a8b6; max-width: 620px; }
body.detail .empfehlung .paket { padding: 28px; gap: 14px; border-radius: 22px; }
body.detail .empfehlung .paket h3 { font-size: 20px; letter-spacing: .08em; text-transform: uppercase; }
body.detail .empfehlung .paket.hervor h3 { color: var(--gold-hell); }
body.detail .empfehlung .paket-text { font-size: 14.5px; min-height: 0; padding-bottom: 18px; border-bottom: 1px solid var(--linie); }
body.detail .empfehlung .paket .leise { font-size: 15px; line-height: 1.6; color: #a2a8b6; flex: 1; }
body.detail .empfehlung .hinweis { font-size: 15px; line-height: 1.6; color: #8b92a3; max-width: 640px; margin-inline: auto; text-align: center; }
body.detail .empfehlung .knopf { border-radius: 10px; min-height: 58px; padding: 0 34px; font-size: 16px; }
body.detail .empfehlung .knopf.rand { background: #0b0c10; border-color: rgba(255, 255, 255, .16); }
@media (max-width: 960px) { body.detail .empfehlung { padding-inline: 20px; } body.detail .empfehlung .abschnitt-kopf h2 { font-size: clamp(30px, 8.4vw, 40px); } }
.seiten-hero .mock p.mk-alle { font-size: 12px; line-height: 1.4; color: #9aa1b2; max-width: none; }
/* Code-Fenster (Über AVYZOR) */
.mock-code .mk-rumpf { height: 340px; min-height: 340px; overflow: hidden; position: relative; flex: none; }
.mk-code ol { list-style: none; margin: 0; padding: 0; animation: mk-code 18s linear infinite; }
.mk-code li { display: flex; gap: 14px; padding: 0 20px; height: 24.7px; align-items: center; font: 400 13px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #d6d9e0; }
.mk-code li span { width: 18px; text-align: right; color: #596073; } .mk-code code { font: inherit; white-space: pre; }
.mk-code .kw { color: #e9d49d; font-weight: 400; } .mk-code .str { color: #f1d98a; font-weight: 400; } .mk-code .tag { color: #78b4e8; font-weight: 400; }
@keyframes mk-code { to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .mk-code ol { animation: none; } }

/* ---------- Anfrage-Seiten (Projekt-/Extras-Anfrage) und Portfolio-Detailseiten, wie auf der Onepage-Seite ---------- */
body.detail .anfrage-hero { min-height: 0; display: block; padding: 150px 0 70px; text-align: center; }
body.detail .anfrage-hero .seiten-hero-innen { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 22px; }
body.detail .anfrage-hero h1 { max-width: 780px; }
body.detail .anfrage-hero p { max-width: 640px; font-size: 18px; line-height: 1.7; }
body.detail .anfrage-hero p.anf-hinweis { max-width: 560px; margin-top: 8px; padding: 18px 22px; border: 1px solid rgba(196, 160, 106, .2); border-radius: 12px; background: rgba(196, 160, 106, .04); font-size: 15px; line-height: 1.5; color: #8b92a3; }
.anf { max-width: 860px; padding-top: 10px; }
.anf-karte { display: flex; flex-direction: column; gap: 22px; padding: 40px; border: 1px solid rgba(196, 160, 106, .28); border-radius: 28px; background: linear-gradient(180deg, #0d1016, #0a0c10); box-shadow: 0 40px 100px -50px rgba(0, 0, 0, .8); }
.anf-titel { margin: 0; font: 600 13px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: #c9a56a; }
.anf-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.anf-feld { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.anf-l { font-size: 14px; color: #e3d5b9; }
.anf-feld input:not([type=checkbox]), .anf-feld select, .anf-feld textarea { width: 100%; box-sizing: border-box; min-height: 47px; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: #0e121a; color: var(--text); font: 400 16px/1.4 var(--sans); }
.anf-feld select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a56a' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; padding-right: 44px; }
.anf-feld textarea { min-height: 148px; resize: vertical; }
.anf-feld ::placeholder { color: #5f6676; }
.anf-feld :focus { outline: none; border-color: rgba(196, 160, 106, .65); box-shadow: 0 0 0 3px rgba(196, 160, 106, .12); }
.anf-feld [aria-invalid=true] { border-color: #a8523a; box-shadow: 0 0 0 3px rgba(220, 95, 60, .12); }
.anf-fehler { font-size: 13px; color: #ee8a68; }
.anf-fehler[hidden] { display: none; }
.anf-einw { display: flex; flex-direction: column; gap: 8px; }
.anf-senden { align-self: stretch; min-height: 58px; border-radius: 10px; font-size: 16px; }
.anf-fuss { margin: -6px 0 0; text-align: center; font-size: 14px; color: #8b92a3; }
.anf-danke { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 36px 0 12px; }
.anf-danke[hidden] { display: none; }
.anf-danke h2 { margin: 0; font-size: clamp(28px, 4vw, 40px); }
.anf-danke p { max-width: 520px; margin: 0; color: #a2a8b6; line-height: 1.7; }
.anf-danke .ring { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: rgba(196, 160, 106, .12); border: 1px solid rgba(196, 160, 106, .45); animation: mk-ein .6s var(--kurve) both; }
.anf-danke svg { width: 30px; height: 30px; fill: none; stroke: var(--gold-hell); stroke-width: 2; }
.anf-danke .knopf { margin-top: 10px; border-radius: 10px; min-height: 52px; }

body.detail .portfolio-hero p.pf-sub { color: #f1f2f6; font-size: 20px; line-height: 1.5; margin: 0 0 22px; font-weight: 500; }
.mk-video { min-height: 0; }
.mk-video .mk-buehne { aspect-ratio: 656 / 368; background: #090b0f; position: relative; overflow: hidden; }
.mk-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-video .mk-fuss { letter-spacing: .22em; text-transform: uppercase; font-size: 12px; color: #c9a56a; padding: 16px 16px; background: #0d1015; }
.pf { max-width: 1100px; padding: 0; margin: 0 auto 90px; }
.pf:first-of-type { margin-top: 0; }
.portfolio-hero + .pf { margin-top: 40px; }
.pf .kicker { height: 42px; padding: 0 22px 0 15px; gap: 12px; font: 600 13px/1 var(--sans); letter-spacing: .3em; color: #c9a56a; }
.pf h2 { font-size: 48px; line-height: 1.15; letter-spacing: 0; margin: 24px 0 0; text-wrap: balance; }
.pf .kicker + h2 { margin-top: 22px; }
.pf-lead { max-width: 700px; margin: 22px 0 0; font-size: 20px; line-height: 1.5; color: #a2a8b6; }
.pf-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pf-karte { padding: 32px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 22px; background: #0b0e12; }
.pf-karte i { display: block; width: 40px; height: 3px; border-radius: 2px; background: var(--gold); margin-bottom: 22px; }
.pf-karte h3 { margin: 0 0 14px; font-size: 24px; letter-spacing: 0; }
.pf-karte p { margin: 0; font-size: 17px; line-height: 1.55; color: #a2a8b6; }
.pf-chips { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pf-chips li { display: flex; align-items: center; gap: 14px; padding: 18px 22px; min-height: 76px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; background: #0b0e12; font-size: 17px; line-height: 1.35; color: #d9dce4; }
.pf-chips i { width: 12px; height: 12px; border-radius: 50%; background: #d4b27a; flex: none; }
.pf-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 22px; }
.pf-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 24px 22px; text-align: left; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: #0b0e12; color: #d9dce4; font: 500 17px/1.3 var(--sans); cursor: pointer; transition: border-color .3s, background .3s; }
.pf-tab b { font: 700 32px/1 var(--serif); color: #b9955a; }
.pf-tab:hover { border-color: rgba(196, 160, 106, .4); }
.pf-tab.aktiv { border-color: #c9a56a; box-shadow: 0 0 0 1px rgba(201, 165, 106, .25), 0 10px 40px -20px rgba(196, 160, 106, .5); }
.pf-tab.aktiv b { color: #e0c79b; }
.pf-tab:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 3px; }
.pf-panel { margin-top: 22px; padding: 32px; border: 1px solid rgba(196, 160, 106, .35); border-radius: 22px; background: linear-gradient(180deg, #0d1014, #0a0c10); }
.pf-panel[hidden] { display: none; }
.pf-panel h3 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; font-size: 22px; letter-spacing: 0; }
.pf-panel h3 b { font: 700 18px/1 var(--sans); color: #b9955a; }
.pf-panel p { margin: 0; max-width: 840px; font-size: 16px; line-height: 1.65; color: #a2a8b6; }
.pf-abschluss { padding: 56px 64px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 28px; background: #0b0e12; text-align: center; }
.pf-abschluss h2 { margin: 0 0 22px; }
.pf-abschluss p { max-width: 720px; margin: 0 auto; text-align: left; font-size: 20px; line-height: 1.55; color: #a2a8b6; }
.pf-cta { text-align: center; margin-bottom: 120px; }
.pf-cta p { max-width: 640px; margin: 22px auto 0; font-size: 18px; line-height: 1.55; color: #a2a8b6; }
.pf-cta .reihe { margin-top: 32px; gap: 14px; }
.pf-cta .knopf { border-radius: 10px; min-height: 60px; padding: 0 34px; font-size: 17px; }
.pf-cta .knopf.rand { background: #0b0c10; border-color: rgba(255, 255, 255, .16); }
@media (max-width: 960px) {
  body.detail .anfrage-hero { padding: 120px 0 40px; }
  body.detail .anfrage-hero .seiten-hero-innen { padding: 0 20px; }
  .anf { padding-inline: 16px; }
  .anf-karte { padding: 24px 18px; border-radius: 22px; }
  .anf-zwei { grid-template-columns: 1fr; }
  .pf { padding-inline: 20px; margin-bottom: 64px; box-sizing: border-box; }
  .pf h2 { font-size: clamp(28px, 8vw, 38px); }
  .pf-lead { font-size: 17px; }
  .pf-karten, .pf-chips { grid-template-columns: 1fr; }
  .pf-tabs { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pf-tab { padding: 16px; font-size: 15px; }
  .pf-tab b { font-size: 26px; }
  .pf-panel { padding: 22px; }
  .pf-abschluss { padding: 32px 22px; border-radius: 22px; }
  .pf-abschluss p { font-size: 17px; }
  .pf-cta .reihe { flex-direction: column; align-items: stretch; }
}
body.detail .portfolio-hero p:not(.pf-sub) { font-size: 18px; line-height: 1.5; }
body.detail .portfolio-hero p.pf-sub { margin-bottom: 18px; }
.pf-abschluss p { max-width: 760px; }
body.detail .anfrage-hero { padding: 190px 0 90px; }
body.detail .anfrage-hero .kicker { align-self: center; }
@media (max-width: 960px) { body.detail .anfrage-hero { padding: 120px 0 40px; } }
.anf-karte [hidden] { display: none !important; }
.anf-danke h2 { font-family: var(--serif); font-weight: 700; }
.anf-karte.fertig { min-height: 0; }
@media (max-width: 960px) { body.detail .portfolio-hero h1 { font-size: clamp(34px, 9.8vw, 46px); } }
body.detail .portfolio-hero h1 { max-width: 620px; text-wrap: wrap; }
body.detail .portfolio-hero p { max-width: 600px; }
body.detail .seiten-hero.portfolio-hero h1 { font-size: 54.7px; max-width: 620px; }
body.detail .seiten-hero.portfolio-hero p { max-width: 600px; }
@media (max-width: 960px) { body.detail .seiten-hero.portfolio-hero h1 { font-size: clamp(34px, 9.8vw, 46px); } }
body.detail .seiten-hero.portfolio-hero h1 { font-size: 57.6px; letter-spacing: -.02em; max-width: 640px; }
@media (max-width: 960px) { body.detail .seiten-hero.portfolio-hero h1 { font-size: clamp(34px, 9.8vw, 46px); } }
@media (min-width: 961px) { body.detail .seiten-hero.portfolio-hero .seiten-hero-innen.zwei-spalten { gap: 44px; } body.detail .seiten-hero.portfolio-hero h1, body.detail .seiten-hero.portfolio-hero p { max-width: 620px; } }
@media (min-width: 961px) { body.detail .seiten-hero.portfolio-hero h1 { max-width: 592px; } }
/* Die Leistungen-Übersicht hat keinen eigenen Seitenkopf: ihre Überschrift ist die Hauptüberschrift (h1), sieht aber aus wie die übrigen Abschnittstitel. */
.seiten-start .abschnitt-kopf h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(34px, 3.9vw, 56px); line-height: 1.1; letter-spacing: 0; margin: 0; }

/* ---------- Runde 4: Kontakt, Kundenportal-Anmeldung, Kundenportal-Übersicht ---------- */
.kt-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; max-width: 760px; margin-top: 14px; }
.kt-karte { display: flex; align-items: center; gap: 18px; padding: 22px 24px; text-align: left; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: #0b0e12; color: inherit; text-decoration: none; transition: border-color .25s, transform .25s; }
.kt-karte:hover { border-color: rgba(196, 160, 106, .5); transform: translateY(-2px); }
.kt-symbol { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(196, 160, 106, .1); border: 1px solid rgba(196, 160, 106, .3); }
.kt-symbol svg, .pl-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--gold-hell); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kt-text strong { font-size: 17px; color: #f1f2f6; }
.kt-text small { font-size: 14px; color: #8b92a3; }
.kt-text b { font-size: 16px; color: #e0c79b; font-weight: 600; overflow-wrap: anywhere; }
.kt-pfeil { color: var(--gold); font-size: 20px; }
.kt-portal { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 22px; background: #0b0e12; }
.kt-portal strong { font: 700 22px/1.3 var(--serif); color: #f1f2f6; }
.kt-portal p { margin: 8px 0 0; color: #a2a8b6; line-height: 1.55; }
.kt-portal .knopf { flex: none; border-radius: 10px; min-height: 52px; background: #0b0c10; border-color: rgba(255, 255, 255, .16); }
.anf-zustimmung { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: #8b92a3; }
.anf-zustimmung input { margin-top: 3px; accent-color: #c9a56a; }
.anf-zustimmung a { color: #e0c79b; }
.anf-karte .meldung { margin: 0; min-height: 0; font-size: 14px; color: #a2a8b6; }
.anf-karte .meldung.fehler { color: #ee8a68; }

/* Anmeldung */
.portal-hero .seiten-hero-innen { max-width: 1240px; }
.pl-punkte { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.pl-punkte li { display: flex; align-items: center; gap: 14px; font-size: 17px; color: #d9dce4; }
.pl-punkte li span { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(196, 160, 106, .12); border: 1px solid rgba(196, 160, 106, .4); }
.pl-punkte svg { width: 14px; height: 14px; fill: none; stroke: var(--gold-hell); stroke-width: 2.4; }
.pl-rahmen { position: relative; }
.pl-rahmen::before { content: ""; position: absolute; inset: -30px; background: radial-gradient(closest-side, rgba(196, 160, 106, .18), transparent); pointer-events: none; }
.pl-karte { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 36px; border: 1px solid rgba(196, 160, 106, .35); border-radius: 26px; background: linear-gradient(180deg, #0d1016, #0a0c10); box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .85); }
.pl-kopf { display: flex; align-items: center; gap: 14px; margin: 0; font: 700 22px/1.3 var(--serif); color: #f1f2f6; }
.pl-icon { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: rgba(196, 160, 106, .1); border: 1px solid rgba(196, 160, 106, .3); }
.pl-feld { display: flex; flex-direction: column; gap: 9px; }
.pl-feld > span:first-child { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #c9a56a; }
.pl-feld input:not([type=checkbox]) { width: 100%; box-sizing: border-box; min-height: 50px; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: #0e121a; color: var(--text); font: 400 16px var(--sans); }
.pl-feld input:focus { outline: none; border-color: rgba(196, 160, 106, .65); box-shadow: 0 0 0 3px rgba(196, 160, 106, .12); }
.pl-feld input[aria-invalid=true] { border-color: #a8523a; }
.pl-feld em { font-style: normal; }
.pl-pw { position: relative; display: block; }
.pl-pw input { padding-right: 52px; }
.pl-auge { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; border-radius: 10px; }
.pl-auge svg { width: 20px; height: 20px; fill: none; stroke: #8b92a3; stroke-width: 1.7; }
.pl-auge[aria-pressed=true] svg { stroke: var(--gold-hell); }
.pl-zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.pl-bleiben { display: flex; align-items: center; gap: 10px; color: #a2a8b6; }
.pl-bleiben input { accent-color: #c9a56a; width: 16px; height: 16px; }
.pl-zeile a, .pl-zugang a { color: #e0c79b; text-decoration: none; }
.pl-zeile a:hover, .pl-zugang a:hover { text-decoration: underline; }
.pl-karte .meldung { margin: 0; font-size: 14px; line-height: 1.5; color: #a2a8b6; }
.pl-karte .meldung:empty { display: none; }
.pl-senden { min-height: 56px; border-radius: 10px; font-size: 16px; }
.pl-zugang { margin: 0; text-align: center; font-size: 15px; color: #a2a8b6; }
.pl-sicher { display: flex; align-items: center; gap: 12px; margin: 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13px; line-height: 1.5; color: #8b92a3; }
.pl-sicher span { flex: none; }
.pl-sicher svg { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 1.7; }
.pl-vorschau { max-width: 1100px; margin: 0 auto; padding-bottom: 90px; }
.pl-vorschau-kopf { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; margin-bottom: 40px; }
.pl-vorschau-kopf h2 { margin: 0; max-width: 700px; font-size: clamp(30px, 4vw, 46px); line-height: 1.15; letter-spacing: 0; }
.pl-vorschau-kopf p { margin: 0; max-width: 640px; color: #a2a8b6; font-size: 18px; line-height: 1.6; }
.pl-fenster { border: 1px solid rgba(255, 255, 255, .1); border-radius: 22px; background: #0b0e12; overflow: hidden; }
.pl-fenster .m-kopf { padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.pl-fenster .m-kopf i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .pl-fenster .m-kopf i:nth-child(2) { background: #febc2e; } .pl-fenster .m-kopf i:nth-child(3) { background: #28c840; }
.pl-fenster .m-kopf span { flex: 1; text-align: center; margin: 0; color: #70757f; }
.pl-fenster .m-kopf em { font: 600 11px var(--sans); font-style: normal; letter-spacing: .16em; padding: 6px 12px; border-radius: 99px; color: #e0c79b; border: 1px solid rgba(196, 160, 106, .4); background: rgba(196, 160, 106, .08); }
.pl-fortschritt { display: grid; grid-template-columns: 1fr auto; gap: 10px 20px; align-items: center; padding: 26px 30px 30px; }
.pl-label { grid-column: 1 / -1; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #c9a56a; }
.pl-balken { grid-column: 1 / -1; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.pl-balken i { display: block; height: 100%; width: var(--w); border-radius: 99px; background: linear-gradient(90deg, #b9955a, #e0c79b); }
.pl-fortschritt strong { font-size: 18px; color: #f1f2f6; }
.pl-status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #6bdca0; }
.pl-status i { width: 8px; height: 8px; border-radius: 50%; background: #5bd18b; }
.pl-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.pl-info { padding: 28px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; background: #0b0e12; }
.pl-info h3 { margin: 18px 0 10px; font-size: 20px; letter-spacing: 0; }
.pl-info p { margin: 0; color: #a2a8b6; line-height: 1.6; font-size: 15.5px; }
.pl-fuss { margin: 28px 0 0; text-align: center; font-size: 14px; color: #8b92a3; }

/* Übersicht */
.portal-dash-hero { min-height: 0; padding: 150px 0 80px; display: block; }
.portal-dash-hero .seiten-hero-innen { max-width: 1240px; display: flex; flex-direction: column; gap: 28px; align-items: stretch; }
.pd-kopf { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; text-align: left; }
.pd-kopf > div:first-child { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.pd-kopf h1 { margin: 0; font-size: clamp(2.2rem, 3.8vw, 3.2rem); line-height: 1.12; letter-spacing: 0; max-width: 11em; }
.pd-kopf p { margin: 0; max-width: 560px; }
.pd-kopf .pd-hinweis { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 99px; border: 1px solid rgba(196, 160, 106, .3); background: rgba(196, 160, 106, .06); font-size: 14px; color: #c9ccd6; }
.pd-hinweis i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.pd-ring { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 32px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 24px; background: #0b0e12; }
.pd-kreis { width: 170px; height: 170px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 10px solid rgba(255, 255, 255, .07); box-sizing: border-box; }
.pd-kreis b { font: 700 36px/1 var(--serif); color: #e0c79b; }
.pd-kreis span, .pd-abschluss span, .pd-zahl span { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #8b92a3; }
.pd-abschluss { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pd-abschluss b { font-size: 20px; color: #f1f2f6; }
.pd-kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pd-zahl { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: #0b0e12; }
.pd-zahl b { font: 700 24px/1 var(--serif); color: #e0c79b; }
.pd-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pd-tab { flex-direction: row; align-items: center; gap: 16px; padding: 18px 22px; cursor: pointer; }
.pd-tab b { font-size: 22px; }
.pd-panel { padding: 28px; }
.pd-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pd-feld { padding: 24px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px; background: rgba(255, 255, 255, .02); min-height: 170px; display: flex; flex-direction: column; gap: 14px; }
.pd-feld.breit { grid-column: 1 / -1; }
.pd-feld h2 { margin: 0; font: 600 17px/1.3 var(--sans); letter-spacing: 0; color: #f1f2f6; }
.pd-leer { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; margin: 0; font-size: 15px; color: #8b92a3; }
.pd-leer span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(196, 160, 106, .4); color: var(--gold); font: 600 14px var(--serif); }
@media (max-width: 960px) {
  .kt-karten, .pl-karten, .pd-kennzahlen { grid-template-columns: 1fr; }
  .kt-portal { flex-direction: column; align-items: stretch; text-align: left; padding: 24px 20px; }
  .pl-karte { padding: 24px 18px; }
  .pl-vorschau { padding-inline: 20px; }
  .pl-fortschritt { grid-template-columns: 1fr; padding: 20px; }
  .portal-dash-hero { padding: 120px 0 50px; }
  .portal-dash-hero .seiten-hero-innen { padding: 0 20px; }
  .pd-kopf { grid-template-columns: 1fr; gap: 24px; }
  .pd-tabs { grid-template-columns: 1fr; gap: 10px; }
  .pd-felder { grid-template-columns: 1fr; }
  .pd-panel { padding: 16px; }
}
.pl-rahmen { max-width: 440px; justify-self: center; width: 100%; padding: 0; }
.pl-rahmen::before { inset: -26px; border-radius: 34px; background: linear-gradient(135deg, rgba(196, 160, 106, .28), rgba(196, 160, 106, .04)); filter: blur(2px); }
.pl-karte { padding: 28px; gap: 18px; }
.pl-kopf { font-size: 18px; }
.pl-zugang { font-size: 13px; } .pl-sicher { font-size: 11.5px; }
.pl-vorschau-kopf h2 { max-width: 540px; }
.pl-fenster { max-width: 640px; margin: 0 auto; }
.pl-fortschritt { padding: 18px 22px 22px; grid-template-columns: 1fr; }
.pl-fortschritt strong { font-size: 15px; }
.pl-karten { max-width: 1100px; margin-inline: auto; }
body.detail .portal-dash-hero { padding: 130px 0 40px; }
.pd-kopf { grid-template-columns: 1fr 260px; gap: 40px; }
.pd-kopf > div:first-child { gap: 18px; }
.pd-kopf p:not(.pd-hinweis) { font-size: 15px; line-height: 1.5; color: #a2a8b6; }
.pd-kopf .pd-hinweis { font-size: 12px; padding: 8px 14px; color: #8b92a3; }
.pd-ring { border: 0; background: none; padding: 0; justify-self: end; gap: 34px; }
.pd-kreis { width: 112px; height: 112px; border-width: 6px; } .pd-kreis b { font-size: 24px; }
.pd-kreis span, .pd-abschluss span, .pd-zahl span { font-size: 10px; }
.pd-abschluss b { font-size: 16px; }
.pd-zahl { padding: 16px 18px; gap: 10px; border-radius: 14px; } .pd-zahl b { font: 600 18px/1 var(--sans); color: #e7e9f0; }
.pd-tabs { gap: 8px; padding: 6px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; background: rgba(255, 255, 255, .02); }
.pd-tab { justify-content: center; border-color: transparent; background: none; padding: 12px 16px; font-size: 13px; color: #8b92a3; border-radius: 12px; }
.pd-tab b { font: 600 11px var(--sans); color: #6f7585; } .pd-tab.aktiv { color: #fff; background: rgba(196, 160, 106, .08); } .pd-tab.aktiv b { color: #c9a56a; }
.pd-feld { background: rgba(255, 255, 255, .015); }
.pd-feld h2 { font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #8b92a3; }
.pd-leer { font-size: 13px; color: #6f7585; }
body[data-seite="kundenportal-dashboard"] footer, body[data-seite="kundenportal-dashboard"] .fuss { display: none; }
@media (max-width: 960px) { .pd-kopf { grid-template-columns: 1fr; } .pd-ring { justify-self: start; flex-direction: row; } }
body.detail .pd-kopf .pd-hinweis { font-size: 12px; padding: 8px 14px; color: #8b92a3; }
body.detail .pd-leer { font-size: 13px; color: #6f7585; }
body.detail .pd-tab span { color: inherit; font-size: 13px; }
body.detail .pl-zugang { font-size: 13px; color: #a2a8b6; }
body.detail .pl-sicher { font-size: 11.5px; color: #8b92a3; }
body.detail .pl-karte .meldung { font-size: 13px; }
body.detail .pl-kopf { font-size: 18px; }
.pd-kreis span { letter-spacing: .06em; font-size: 9px; }
@media (max-width: 960px) { .pd-kennzahlen { grid-template-columns: 1fr 1fr; gap: 12px; } .pd-ring { gap: 24px; } .pl-fenster .m-kopf span { display: none; } }

/* Ohne Bild-Takt (html ohne Klasse „takt“) steht nichts im versteckten Startzustand: gilt für jedes Element, dessen Startwert im style-Attribut steht
   (Blöcke und Skripte), egal welches Skript es später einblendet. Die Falle (Honigtopf) bleibt versteckt. */
html:not(.takt) [style*="opacity:0;"]:not([tabindex="-1"]):not(.falle), html:not(.takt) [style*="opacity: 0;"]:not([tabindex="-1"]):not(.falle),
html:not(.takt) [style$="opacity:0"]:not([tabindex="-1"]):not(.falle), html:not(.takt) [style$="opacity: 0"]:not([tabindex="-1"]):not(.falle) { opacity: 1 !important; transform: none !important; translate: none !important; filter: none !important; transition: none !important; }

/* Grundgerüst: Sternenhimmel hinter dem Seiteninhalt (siehe mitSternenhimmel in src/avyzor-seiten.js) */
.sternen-seite { position: relative; overflow: hidden; background: #0A0C0F; }
.sternen-seite > .bw-kopf-sternenfeld { position: absolute; inset: 0; z-index: 0; }
.sternen-seite > :not(.bw-kopf-sternenfeld) { position: relative; z-index: 2; }
.sternen-seite .seiten-hero { background: none; padding-top: 150px; }
.sternen-seite .seiten-hero-innen { max-width: 1120px; }
@media (max-width: 720px) { .sternen-seite .seiten-hero { padding: 110px 18px 30px; } }

/* Kennzeichnung KI-erzeugter Videos: klein, unten rechts im Bildrahmen */
[class*="_stage"]:has(> .ki-hinweis) { position: relative; }
.ki-hinweis { position: absolute; right: 10px; bottom: 10px; z-index: 3; padding: 3px 9px; border-radius: 999px; font: 500 11px/1.4 var(--sans); letter-spacing: .04em; color: #E8E4DA; background: rgba(8, 9, 12, .62); border: 1px solid rgba(196, 160, 106, .35); pointer-events: none; }

/* Karriere-Seite (Modul 307) */
.kar-abschnitt { max-width: 1040px; padding-bottom: 6px; }
.kar-titel { margin: 0 0 22px; font: 600 13px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: #c9a56a; text-align: center; }
.kar-stellen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kar-stelle { padding: 26px; border: 1px solid rgba(196, 160, 106, .22); border-radius: 22px; background: linear-gradient(180deg, #0d1016, #0a0c10); }
.kar-stelle h3 { margin: 0 0 10px; font-size: 19px; color: #f4f1e9; }
.kar-stelle p { margin: 0; color: #a2a8b6; line-height: 1.65; font-size: 15px; }
.kar-gruppe { display: flex; flex-direction: column; gap: 10px; }
.kar-radios { display: flex; gap: 28px; }
.kar-radios .einw { align-items: center; font-size: 15px; color: #e3d5b9; }
.kar-radios .einw input { border-radius: 50%; }
.kar-hinweis { margin: -12px 0 0; font-size: 13px; color: #8b92a3; }
.kar-ds { align-self: flex-start; font-size: 13px; color: var(--gold-hell); }
.anf-feld input[type=file] { padding: 10px 12px; min-height: 0; font-size: 14px; }
.kar-frage[hidden], .kar-datei-fehler[hidden] { display: none; }
.kar-datei-fehler { color: #ee8a68; }
@media (max-width: 820px) { .kar-stellen { grid-template-columns: 1fr; } .anf-karte { padding: 26px 20px; } }

/* ---------- Website-Interview (13.10.): Zusagen, Konzeptbeispiel, Hero-Zeile, Über-Zusätze ---------- */
.avy-hero-zeile { margin: 14px 0 0; font-size: 15px; font-weight: 500; letter-spacing: .02em; color: var(--color-kit-key1, #C4A06A); }
.avy-zusagen .karte { display: flex; flex-direction: column; gap: 10px; }
.avy-zusagen .karte h3 { margin: 0; }
.avy-zusagen .karte p { margin: 0; color: #9aa1b2; }
.avy-zusagen .haken-ring { width: 40px; height: 40px; }
.avy-konzept { display: inline-block; align-self: flex-start; margin: 0 8px 8px 0; padding: 3px 10px; border: 1px solid rgba(196, 160, 106, .55); border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #E0C79B; background: rgba(196, 160, 106, .08); }
.avy-konzept-seite { display: block; width: max-content; margin: 0 0 14px; }
.avy-wer-karte { display: flex; gap: 28px; align-items: center; max-width: 880px; margin: 0 auto; padding: 28px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 20px; background: rgba(255, 255, 255, .03); }
.avy-wer-logo { flex: none; width: 96px; height: 96px; border-radius: 20px; object-fit: cover; }
.avy-wer-karte h2 { margin: 6px 0 10px; font-size: clamp(22px, 3vw, 30px); }
.avy-wer-karte p { margin: 0; color: #9aa1b2; }
.avy-karte-link { display: block; max-width: 880px; margin: 0 auto; text-decoration: none; color: inherit; }
.avy-karte-link h2 { margin: 6px 0 8px; font-size: clamp(22px, 3vw, 30px); }
.avy-karte-link p { margin: 0 0 12px; color: #9aa1b2; }
@media (max-width: 600px) { .avy-wer-karte { flex-direction: column; align-items: flex-start; } }
.avy-hinweiskarte { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding: 14px 16px; border: 1px solid rgba(196, 160, 106, .5); border-radius: 14px; background: rgba(196, 160, 106, .08); font-size: 14px; line-height: 1.5; }
.avy-hinweiskarte[hidden] { display: none; }
.avy-hinweiskarte strong { color: #E0C79B; }
.avy-zahlung-innen { max-width: 880px; margin: 0 auto; display: grid; gap: 28px; }
.avy-balken { display: flex; width: 100%; height: 56px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); }
.avy-balken-teil { flex: var(--b) 1 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; font-size: 14px; white-space: nowrap; transform-origin: left center; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.avy-balken-0 { background: rgba(196, 160, 106, .28); }
.avy-balken-1 { background: rgba(196, 160, 106, .55); color: #08090B; }
.avy-balken-teil b { font-size: 18px; }
.js.takt .einblenden:not(.da) .avy-balken-teil { transform: scaleX(0); }
.avy-zeitleiste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; position: relative; }
.avy-zeitleiste li { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.avy-zeitleiste span:last-child { color: #9aa1b2; font-size: 14px; }
.avy-zeit-punkt { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(196, 160, 106, .7); color: #E0C79B; font-weight: 600; }
@media (max-width: 600px) { .avy-zeitleiste { grid-template-columns: 1fr; } .avy-balken-teil { flex-direction: column; gap: 0; font-size: 12px; white-space: normal; text-align: center; } .avy-balken { height: 72px; } }
@media (prefers-reduced-motion: reduce) { .avy-balken-teil { transition: none; } .js.takt .einblenden:not(.da) .avy-balken-teil { transform: none; } }
.avy-bericht-karte { max-width: 720px; margin: 0 auto; display: grid; gap: 16px; }
.avy-bericht-karte header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.avy-bericht-karte .avy-konzept { margin: 0; }
.avy-bericht-karte .m-balken { height: 90px; display: flex; align-items: flex-end; gap: 8px; }
.avy-bericht-karte .m-balken i { flex: 1; height: var(--h); border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #E0C79B, rgba(196, 160, 106, .25)); }
.avy-bericht-karte dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; }
.avy-bericht-karte dl div { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.avy-bericht-karte dt { font-size: 13px; color: #9aa1b2; }
.avy-bericht-karte dd { margin: 4px 0 0; font-size: 20px; font-weight: 600; }
.avy-plus { font-size: 13px; color: #7fd6a2; font-weight: 500; }
.avy-bericht-karte small { color: #9aa1b2; }
@media (max-width: 600px) { .avy-bericht-karte dl { grid-template-columns: 1fr; } }

/* Dreischritt-Formular und Termin-Knöpfe */
.avy-schritt { border: 0; margin: 0; padding: 0; display: grid; gap: 14px; min-width: 0; }
.avy-schritt legend { padding: 0; margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #E0C79B; }
.avy-schritte-kopf { display: none; list-style: none; margin: 0 0 6px; padding: 0; gap: 6px; }
.avy-schritte-an .avy-schritte-kopf { display: flex; }
.avy-schritte-kopf li { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .12); transition: background .3s; }
.avy-schritte-kopf li.aktiv { background: #C4A06A; }
.avy-schritte-an [hidden] { display: none !important; }
.avy-schritt-knoepfe { display: flex; gap: 10px; justify-content: space-between; }
.avy-schritt-knoepfe .knopf { flex: 1; }
.avy-mehr { border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; padding: 10px 14px; display: grid; gap: 12px; }
.avy-mehr summary { cursor: pointer; color: #E0C79B; font-size: 14px; }
.avy-mehr[open] summary { margin-bottom: 8px; }
.avy-termine { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.avy-termin { padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(196, 160, 106, .45); background: rgba(255, 255, 255, .04); color: inherit; font: inherit; font-size: 14px; cursor: pointer; transition: background .2s, border-color .2s; }
.avy-termin:hover, .avy-termin:focus-visible { border-color: #E0C79B; }
.avy-termin.gewaehlt { background: linear-gradient(135deg, #D9B77C, #B88732); color: #0B0D11; border-color: transparent; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .avy-schritte-kopf li, .avy-termin { transition: none; } }
.avy-region .abschnitt-kopf { max-width: 760px; margin-inline: auto; }
.avy-region-punkte { max-width: 760px; margin: 18px auto 0; display: grid; gap: 12px; }
.avy-dash-fenster { max-width: 820px; margin: 0 auto; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: rgba(255, 255, 255, .03); overflow: hidden; }
.avy-dash-kopf { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 12px; color: #9aa1b2; }
.avy-dash-kopf i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.avy-dash-kopf span { margin-left: auto; letter-spacing: .08em; text-transform: uppercase; color: #E0C79B; }
.avy-dash-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px; }
.avy-dash-kachel { display: grid; gap: 6px; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); }
.avy-dash-kachel span { font-size: 13px; color: #9aa1b2; }
.avy-dash-kachel strong { font-size: 24px; }
.avy-dash-spur { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.avy-dash-spur b { display: block; height: 100%; width: calc(var(--p) * 1%); border-radius: 3px; background: linear-gradient(90deg, #B88732, #E0C79B); transform-origin: left; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1) .2s; }
.js.takt .einblenden:not(.da) .avy-dash-spur b { transform: scaleX(0); }
.avy-dash-liste { list-style: none; margin: 0; padding: 4px 16px 16px; display: grid; gap: 8px; }
.avy-dash-liste li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); font-size: 14px; transition: opacity .5s ease calc(var(--i) * .15s + .4s), transform .5s ease calc(var(--i) * .15s + .4s); }
.js.takt .einblenden:not(.da) .avy-dash-liste li { opacity: 0; transform: translateY(8px); }
.avy-dash-liste em { font-style: normal; color: #7fd6a2; white-space: nowrap; }
@media (max-width: 600px) { .avy-dash-kacheln { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .avy-dash-spur b, .avy-dash-liste li { transition: none; } .js.takt .einblenden:not(.da) .avy-dash-spur b { transform: none; } .js.takt .einblenden:not(.da) .avy-dash-liste li { opacity: 1; transform: none; } }

/* Feste Antworten ohne Berater */
.avy-fest-box { position: fixed; right: 16px; bottom: 16px; z-index: 2147483002; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); max-height: min(560px, calc(100dvh - 32px)); padding: 14px; border-radius: 20px; background: rgba(14, 16, 22, .98); border: 1px solid rgba(196, 160, 106, .35); box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .75); color: #F2E7D0; font-size: 14px; line-height: 1.45; }
.avy-fest-box[hidden] { display: none; }
.avy-fest-kopf { display: flex; justify-content: space-between; align-items: center; }
.avy-fest-zu { background: none; border: 0; color: inherit; font-size: 22px; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; }
.avy-fest-hinweis { margin: 0; color: #9aa1b2; font-size: 13px; }
.avy-fest-log { flex: 1; min-height: 80px; overflow-y: auto; display: grid; gap: 8px; align-content: start; }
.avy-fest-blase { max-width: 92%; padding: 9px 12px; border-radius: 14px; background: rgba(255, 255, 255, .06); }
.avy-fest-blase.ich { justify-self: end; background: rgba(196, 160, 106, .25); }
.avy-fest-blase p, .avy-fest-blase ul { margin: 0; }
.avy-fest-blase ul { padding-left: 18px; }
.avy-fest-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 96px; overflow-y: auto; }
.avy-fest-chip { padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(196, 160, 106, .4); background: none; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
.avy-fest-form { display: flex; gap: 8px; }
.avy-fest-form input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); color: inherit; font: inherit; }
.avy-fest-senden, .avy-fest-termin { padding: 9px 14px; border-radius: 12px; border: 0; font: inherit; font-weight: 600; cursor: pointer; background: linear-gradient(135deg, #D9B77C, #B88732); color: #0B0D11; }
.avy-fest-termin { background: none; border: 1px solid rgba(196, 160, 106, .5); color: #E0C79B; }
.avy-fest { display: none; }
@media (max-width: 480px) { .avy-hero-zeile { margin-top: 6px; font-size: 13px; line-height: 1.3; } }
@media (max-width: 480px) and (max-height: 700px) { .avy-hero-zeile { display: none; } }

/* Bezahl-Animation (Beispiel-Rechnung): Felder füllen sich, Karte dreht, Knopf wird gedrückt, Stempel "BEZAHLT" */
.avy-pay { position: relative; margin-top: 28px; padding: 20px; border-radius: 18px; border: 1px solid rgba(196, 160, 106, .28); background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); display: grid; gap: 16px; overflow: hidden; }
.avy-pay-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.avy-pay-innen { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: center; transition: filter .5s ease, opacity .5s ease; }
.avy-pay-links { display: grid; gap: 10px; min-width: 0; }
.avy-pay-links h3 { margin: 0 0 2px; font-size: 16px; }
.avy-pay-zeile { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: #9aa1b2; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.avy-pay-fett { color: #F3EEE3; font-weight: 600; }
.avy-pay-feld { display: grid; gap: 4px; }
.avy-pay-label { font-size: 12px; color: #9aa1b2; letter-spacing: .04em; }
.avy-pay-box { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(8, 9, 11, .55); font-variant-numeric: tabular-nums; transition: border-color .25s ease, box-shadow .25s ease; }
.avy-pay-wert { min-width: 1ch; min-height: 1.2em; overflow-wrap: anywhere; }
.avy-pay-feld.aktiv .avy-pay-box { border-color: #E0C79B; box-shadow: 0 0 0 3px rgba(224, 199, 155, .18); }
.avy-pay-feld.aktiv .avy-pay-wert::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 2px; vertical-align: -2px; background: #E0C79B; animation: avy-pay-blink .8s steps(1) infinite; }
.avy-pay-haken, .avy-pay-k-haken { display: inline-flex; width: 18px; height: 18px; flex: none; border-radius: 50%; align-items: center; justify-content: center; background: #5FCB8E; transform: scale(0); transition: transform .3s cubic-bezier(.2, .9, .25, 1.4); }
.avy-pay-haken svg, .avy-pay-k-haken svg { width: 12px; height: 12px; fill: none; stroke: #08090B; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.avy-pay-feld.fertig .avy-pay-haken { transform: scale(1); }
.avy-pay-karte { perspective: 900px; justify-self: center; width: min(100%, 280px); aspect-ratio: 1.6; }
.avy-pay-karte-innen { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, .8, .25, 1); }
.avy-pay.avy-pay-gedreht .avy-pay-karte-innen { transform: rotateY(180deg); }
.avy-pay-vorn, .avy-pay-hinten { position: absolute; inset: 0; border-radius: 16px; padding: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(135deg, #1b1d24, #0b0c10); border: 1px solid rgba(196, 160, 106, .45); box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .8); font-variant-numeric: tabular-nums; }
.avy-pay-hinten { transform: rotateY(180deg); }
.avy-pay-chip { width: 34px; height: 26px; border-radius: 6px; background: linear-gradient(135deg, #E7CB92, #B88732); }
.avy-pay-vorn b { position: absolute; top: 16px; right: 16px; font-size: 12px; letter-spacing: .2em; color: #E0C79B; }
.avy-pay-k1 { font-size: 15px; letter-spacing: .08em; color: #F3EEE3; }
.avy-pay-k2 { font-size: 13px; color: #9aa1b2; }
.avy-pay-streifen { display: block; height: 34px; margin: 6px -16px 0; background: #000; }
.avy-pay-k3 { align-self: flex-end; padding: 4px 10px; border-radius: 6px; background: #F3EEE3; color: #08090B; font-weight: 700; }
.avy-pay-knopf { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 20px; border-radius: 14px; color: #0B0D11; font-weight: 700; background: linear-gradient(135deg, #D9B77C, #B88732); transition: transform .18s ease, background .35s ease, filter .5s ease, opacity .5s ease; }
.avy-pay-k-haken { background: #08090B; width: 22px; height: 22px; position: absolute; }
.avy-pay-k-haken svg { stroke: #5FCB8E; width: 14px; height: 14px; }
.avy-pay-knopf { position: relative; }
.avy-pay.avy-pay-druck .avy-pay-knopf { transform: scale(.95); }
.avy-pay.avy-pay-fertig .avy-pay-k-text, .avy-pay.avy-pay-fertig .avy-pay-k-wert { opacity: 0; transition: opacity .2s; }
.avy-pay.avy-pay-fertig .avy-pay-k-haken { transform: scale(1); }
.avy-pay-stempel { position: absolute; left: 50%; top: 46%; padding: 8px 26px; border: 4px solid #5FCB8E; border-radius: 10px; color: #5FCB8E; font-size: clamp(26px, 6vw, 40px); font-weight: 800; letter-spacing: .22em; background: rgba(8, 9, 11, .55); opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(2.2); transition: opacity .25s ease, transform .35s cubic-bezier(.2, 1.1, .3, 1); pointer-events: none; }
.avy-pay.avy-pay-bezahlt .avy-pay-stempel { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
.avy-pay.avy-pay-bezahlt .avy-pay-innen, .avy-pay.avy-pay-bezahlt .avy-pay-knopf { filter: blur(3px); opacity: .35; }
.avy-pay-hinweis { margin: 0; font-size: 12.5px; color: #9aa1b2; }
@keyframes avy-pay-blink { 50% { opacity: 0; } }
@media (max-width: 640px) { .avy-pay-innen { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .avy-pay *, .avy-pay-stempel { transition: none !important; animation: none !important; } }

/* Rückruf-Wunsch: ruhige Fläche auf Preisen und Kontakt */
.avy-rueckruf .anf-karte { max-width: 560px; margin-inline: auto; display: grid; gap: 14px; }
.avy-rr-text { margin: 0; color: #9aa1b2; }
.avy-zeiten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.avy-zeit { display: block; position: relative; cursor: pointer; }
.avy-zeit input { position: absolute; opacity: 0; inset: 0; }
.avy-zeit span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px 6px; text-align: center; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; font-size: 14px; transition: background .2s, border-color .2s, color .2s; }
.avy-zeit input:checked + span { background: rgba(196, 160, 106, .2); border-color: #E0C79B; color: #F3EEE3; }
.avy-zeit input:focus-visible + span { outline: 2px solid #F2D9A6; outline-offset: 2px; }
.avy-rueckruf .anf-senden:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 480px) { .avy-zeiten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .avy-zeit span { transition: none; } }

/* Fremdschriften (Interview TE1): Russisch und Ukrainisch laufen durchgehend in Inter (Kyrillisch ist in den ausgelieferten Dateien enthalten; Space Grotesk hat kein Kyrillisch und würde die Überschriften auf Zufallsschriften fallen lassen).
   Chinesisch und Japanisch nutzen die auf dem Gerät vorhandene Sprachschrift (kein Fremd-Hosting, keine Mehr-MB-Dateien); Arabisch wird bewusst nicht geladen. */
html:lang(ru), html:lang(uk) { --serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
html:lang(zh) {
  --sans: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", "WenQuanYi Micro Hei", sans-serif;
  --serif: "Space Grotesk", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", monospace;
}
html:lang(ja) {
  --sans: "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", "Noto Sans JP", "Source Han Sans JP", sans-serif;
  --serif: "Space Grotesk", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", "Noto Sans JP", "Source Han Sans JP", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", monospace;
}
html:lang(zh) body, html:lang(ja) body { line-height: 1.75; word-break: normal; overflow-wrap: anywhere; line-break: strict; }
html:lang(zh) .kicker, html:lang(ja) .kicker { letter-spacing: .12em; text-transform: none; }
/* ---------- Team-Karussell (Modul 619) ---------- */
.team-karussell { text-align: center; }
.team-buehne { position: relative; margin: 0 auto; max-width: 980px; touch-action: pan-y; user-select: none; }
.team-reihe { list-style: none; margin: 0; padding: 4px 16px 16px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; }
.team-karte { flex: 0 0 min(260px, 70vw); scroll-snap-align: center; }
.team-karte figure { margin: 0; position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--grund-2); border: 1px solid var(--linie-2); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.team-karte img, .team-platz { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; filter: grayscale(1) contrast(1.05); }
.team-platz { font-size: 56px; letter-spacing: .06em; color: var(--gold-hell); background: radial-gradient(circle at 50% 30%, var(--flaeche-2), var(--grund-2)); filter: none; }
.team-karte figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 18px 16px; text-align: left; background: linear-gradient(transparent, rgba(6, 6, 9, .92)); display: flex; flex-direction: column; gap: 2px; }
.team-karte b { color: var(--text-hell); font-weight: 600; }
.team-karte i { color: var(--leise); font-style: normal; font-size: 14px; }
.team-steuerung { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 18px; }
.team-pfeil { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--linie-2); background: var(--flaeche-2); color: var(--text-hell); font-size: 24px; line-height: 1; cursor: pointer; }
.team-pfeil:hover { border-color: var(--gold); }
.team-zaehler { min-width: 70px; color: var(--leise); font-size: 14px; letter-spacing: .12em; }
/* Mit Skript: Karten liegen übereinander und werden per Lage gesetzt. */
.karussell-an .team-buehne { height: 350px; perspective: 1100px; overflow: hidden; }
.karussell-an .team-reihe { display: block; position: relative; height: 100%; padding: 0; overflow: visible; transform-style: preserve-3d; }
.karussell-an .team-karte { position: absolute; left: 50%; top: 0; width: min(260px, 66vw); transition: transform .7s var(--kurve), opacity .5s; will-change: transform; }
.karussell-ruhig .team-karte { transition: none; }
@media (max-width: 560px) { .karussell-an .team-karte { width: min(220px, 62vw); } }

/* AVYZOR - Hover-, Fokus- und Uebergangseffekte 1:1 aus dem Original (Onepage-Abzug).
   Wird NACH stil.css (und bewegung.css) eingebunden. Jede Regel ist mit body[data-seite="..."] auf die Seite begrenzt,
   deren Original genau diese Werte hat. Farben: key1 #C4A06A, key2 #E0C79B, Weiss; color-mix wie im Original.
   Hinweise:
   - Karten, die per .einblenden erscheinen, bewegen sich beim Hover ueber die Eigenschaft "translate" (gleiche Wirkung wie
     transform: translateY, kollidiert aber nicht mit dem Einblenden und dessen Verzoegerung).
   - Wo das Original keinen Hover-Effekt hat, setzen die Regeln hier den Hover von stil.css zurueck. */
:is(body[data-seite="start"], body[data-seite="leistungen"], body[data-seite="datenschutz"]) .fuss-spalte a,
:is(body[data-seite="start"], body[data-seite="leistungen"], body[data-seite="datenschutz"]) .fuss-kontakt { position: relative; transition: color .19s ease, transform .19s ease; }
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="wartung-and-support"], body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"], body[data-seite="kontakt"], body[data-seite="karriere"], body[data-seite="kundenportal-login"]) .fuss-spalte a,
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="wartung-and-support"], body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"], body[data-seite="kontakt"], body[data-seite="karriere"], body[data-seite="kundenportal-login"]) .fuss-kontakt { transition: color .2s ease; }
body[data-seite="ki-automatisierung"] .fuss-spalte a,
body[data-seite="ki-automatisierung"] .fuss-kontakt { transition: color 0.2s ease; }
body[data-seite="seo-and-performance"] .fuss-spalte a,
body[data-seite="seo-and-performance"] .fuss-kontakt { transition: color 0.22s ease; }
body[data-seite="portfolio-webentwicklung"] .fuss-spalte a,
body[data-seite="portfolio-webentwicklung"] .fuss-kontakt { transition: color .25s ease; }
:is(body[data-seite="start"], body[data-seite="leistungen"], body[data-seite="datenschutz"]) .fuss-spalte a::before,
:is(body[data-seite="start"], body[data-seite="leistungen"], body[data-seite="datenschutz"]) .fuss-kontakt::before { content: ""; position: absolute; left: -14px; top: 50%; margin-top: -1px; width: 7px; height: 1.5px; border-radius: 2px; background: #C4A06A; opacity: 0; transform: translateX(-3px); transition: opacity .19s ease, transform .19s ease; }
:is(body[data-seite="start"], body[data-seite="leistungen"], body[data-seite="datenschutz"]) .fuss-spalte a:hover,
:is(body[data-seite="start"], body[data-seite="leistungen"], body[data-seite="datenschutz"]) .fuss-kontakt:hover { color: #F4F1E9; transform: translateX(5px); }
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="seo-and-performance"], body[data-seite="extras-anfrage"], body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"], body[data-seite="kontakt"], body[data-seite="karriere"]) .fuss-spalte a:hover,
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="seo-and-performance"], body[data-seite="extras-anfrage"], body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"], body[data-seite="kontakt"], body[data-seite="karriere"]) .fuss-kontakt:hover { color: #fff; }
body[data-seite="ki-automatisierung"] .fuss-spalte a:hover,
body[data-seite="ki-automatisierung"] .fuss-kontakt:hover { color: #C0BDB5; }
body[data-seite="ki-chatbots-and-voice"] .fuss-spalte a:hover,
body[data-seite="ki-chatbots-and-voice"] .fuss-kontakt:hover { color: #E8E4DA; }
body[data-seite="wartung-and-support"] .fuss-spalte a:hover,
body[data-seite="wartung-and-support"] .fuss-kontakt:hover { color: #C9C6BE; }
body[data-seite="projektanfrage"] .fuss-spalte a:hover,
body[data-seite="projektanfrage"] .fuss-kontakt:hover { color: #D8CBB0; }
body[data-seite="kundenportal-login"] .fuss-spalte a:hover,
body[data-seite="kundenportal-login"] .fuss-kontakt:hover { color: #E0C79B; }
:is(body[data-seite="start"], body[data-seite="leistungen"], body[data-seite="datenschutz"]) .fuss-spalte a:hover::before,
:is(body[data-seite="start"], body[data-seite="leistungen"], body[data-seite="datenschutz"]) .fuss-kontakt:hover::before { opacity: 1; transform: translateX(0); }
body[data-seite="portfolio-webentwicklung"] .fuss-spalte a:focus-visible,
body[data-seite="portfolio-webentwicklung"] .fuss-kontakt:focus-visible { outline: 2px solid #C4A06A; outline-offset: 3px; border-radius: 4px; }
:is(body[data-seite="start"], body[data-seite="wartung-and-support"], body[data-seite="projektanfrage"], body[data-seite="kundenportal-login"]) .fuss-spalte h2 { transition: color .2s ease; }
:is(body[data-seite="ki-automatisierung"], body[data-seite="seo-and-performance"]) .fuss-spalte h2 { transition: color 0.2s ease; }
body[data-seite="datenschutz"] .fuss-spalte h2 { transition: opacity .2s ease; }
body[data-seite="portfolio-webentwicklung"] .fuss-spalte h2 { transition: color .25s ease; }
body[data-seite="start"] .fuss-spalte h2:hover { color: #F4F1E9; }
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="ki-automatisierung"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="seo-and-performance"], body[data-seite="wartung-and-support"], body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"], body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"], body[data-seite="kontakt"], body[data-seite="karriere"], body[data-seite="kundenportal-login"]) .fuss-spalte h2:hover { color: #E0C79B; }
body[data-seite="datenschutz"] .fuss-spalte h2:hover { opacity: 0.72; }
body[data-seite="portfolio-webentwicklung"] .fuss-spalte h2:focus-visible { outline: 2px solid #C4A06A; outline-offset: 3px; border-radius: 4px; }
:is(body[data-seite="start"], body[data-seite="leistungen"], body[data-seite="datenschutz"]) .fuss-unten a,
:is(body[data-seite="start"], body[data-seite="leistungen"], body[data-seite="datenschutz"]) .fuss-spalte[aria-label="Rechtliches"] a { position: relative; transition: color .19s ease, transform .19s ease; }
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="wartung-and-support"], body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"], body[data-seite="kontakt"], body[data-seite="karriere"], body[data-seite="kundenportal-login"]) .fuss-unten a,
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="wartung-and-support"], body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"], body[data-seite="kontakt"], body[data-seite="karriere"], body[data-seite="kundenportal-login"]) .fuss-spalte[aria-label="Rechtliches"] a { transition: color .2s ease; }
:is(body[data-seite="ki-automatisierung"], body[data-seite="seo-and-performance"]) .fuss-unten a,
:is(body[data-seite="ki-automatisierung"], body[data-seite="seo-and-performance"]) .fuss-spalte[aria-label="Rechtliches"] a { transition: color 0.2s ease; }
body[data-seite="portfolio-webentwicklung"] .fuss-unten a,
body[data-seite="portfolio-webentwicklung"] .fuss-spalte[aria-label="Rechtliches"] a { transition: color .25s ease; }
:is(body[data-seite="start"], body[data-seite="leistungen"], body[data-seite="datenschutz"]) .fuss-unten a::before,
:is(body[data-seite="start"], body[data-seite="leistungen"], body[data-seite="datenschutz"]) .fuss-spalte[aria-label="Rechtliches"] a::before { content: ""; position: absolute; left: -14px; top: 50%; margin-top: -1px; width: 7px; height: 1.5px; border-radius: 2px; background: #C4A06A; opacity: 0; transform: translateX(-3px); transition: opacity .19s ease, transform .19s ease; }
:is(body[data-seite="start"], body[data-seite="leistungen"], body[data-seite="datenschutz"]) .fuss-unten a:hover,
:is(body[data-seite="start"], body[data-seite="leistungen"], body[data-seite="datenschutz"]) .fuss-spalte[aria-label="Rechtliches"] a:hover { color: #F4F1E9; transform: translateX(5px); }
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="seo-and-performance"], body[data-seite="extras-anfrage"], body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"], body[data-seite="kontakt"], body[data-seite="karriere"]) .fuss-unten a:hover,
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="seo-and-performance"], body[data-seite="extras-anfrage"], body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"], body[data-seite="kontakt"], body[data-seite="karriere"]) .fuss-spalte[aria-label="Rechtliches"] a:hover { color: #fff; }
body[data-seite="ki-automatisierung"] .fuss-unten a:hover,
body[data-seite="ki-automatisierung"] .fuss-spalte[aria-label="Rechtliches"] a:hover { color: #C0BDB5; }
body[data-seite="ki-chatbots-and-voice"] .fuss-unten a:hover,
body[data-seite="ki-chatbots-and-voice"] .fuss-spalte[aria-label="Rechtliches"] a:hover { color: #E8E4DA; }
:is(body[data-seite="wartung-and-support"], body[data-seite="projektanfrage"]) .fuss-unten a:hover,
:is(body[data-seite="wartung-and-support"], body[data-seite="projektanfrage"]) .fuss-spalte[aria-label="Rechtliches"] a:hover { color: #C4A06A; }
body[data-seite="kundenportal-login"] .fuss-unten a:hover,
body[data-seite="kundenportal-login"] .fuss-spalte[aria-label="Rechtliches"] a:hover { color: #E0C79B; }
:is(body[data-seite="start"], body[data-seite="leistungen"], body[data-seite="datenschutz"]) .fuss-unten a:hover::before,
:is(body[data-seite="start"], body[data-seite="leistungen"], body[data-seite="datenschutz"]) .fuss-spalte[aria-label="Rechtliches"] a:hover::before { opacity: 1; transform: translateX(0); }
body[data-seite="portfolio-webentwicklung"] .fuss-unten a:focus-visible,
body[data-seite="portfolio-webentwicklung"] .fuss-spalte[aria-label="Rechtliches"] a:focus-visible { outline: 2px solid #C4A06A; outline-offset: 3px; border-radius: 4px; }
body[data-seite="ki-automatisierung"] .fuss .logo { transition: color 0.2s ease; }
:is(body[data-seite="ki-chatbots-and-voice"], body[data-seite="projektanfrage"], body[data-seite="kundenportal-login"]) .fuss .logo { transition: color .22s ease; }
body[data-seite="seo-and-performance"] .fuss .logo { transition: color 0.22s ease; }
body[data-seite="wartung-and-support"] .fuss .logo { transition: opacity .2s ease; }
:is(body[data-seite="ki-automatisierung"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="projektanfrage"], body[data-seite="kundenportal-login"]) .fuss .logo:hover { color: #C4A06A; }
body[data-seite="seo-and-performance"] .fuss .logo:hover { color: #E0C79B; }
body[data-seite="wartung-and-support"] .fuss .logo:hover { opacity: 0.82; }
:is(body[data-seite="start"], body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-automatisierung"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="seo-and-performance"], body[data-seite="wartung-and-support"], body[data-seite="uber-avyzor"], body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .knopf.rand:hover { background: rgba(5, 6, 12, .3); }
:is(body[data-seite="start"], body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-automatisierung"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="seo-and-performance"], body[data-seite="wartung-and-support"], body[data-seite="uber-avyzor"], body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]).detail .seiten-hero .knopf.rand:hover,
:is(body[data-seite="start"], body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-automatisierung"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="seo-and-performance"], body[data-seite="wartung-and-support"], body[data-seite="uber-avyzor"], body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]).detail .empfehlung .knopf.rand:hover,
:is(body[data-seite="start"], body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-automatisierung"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="seo-and-performance"], body[data-seite="wartung-and-support"], body[data-seite="uber-avyzor"], body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .pf-cta .knopf.rand:hover,
:is(body[data-seite="start"], body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-automatisierung"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="seo-and-performance"], body[data-seite="wartung-and-support"], body[data-seite="uber-avyzor"], body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .kt-portal .knopf.rand:hover { background: #0b0c10; }
body[data-seite="start"] .knopf.gold:not(.kopf-cta):not(.hero-knoepfe .knopf),
body[data-seite="start"] .knopf.rand:not(.hero-knoepfe .knopf) { position: relative; overflow: hidden; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease; }
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-automatisierung"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="seo-and-performance"], body[data-seite="wartung-and-support"], body[data-seite="uber-avyzor"], body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .knopf.gold:not(.kopf-cta),
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-automatisierung"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="seo-and-performance"], body[data-seite="wartung-and-support"], body[data-seite="uber-avyzor"], body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .knopf.rand { position: relative; overflow: hidden; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease; }
:is(body[data-seite="start"], body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-automatisierung"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="seo-and-performance"], body[data-seite="wartung-and-support"], body[data-seite="uber-avyzor"], body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .pfeil { transition: none; }
body[data-seite="start"] .knopf.gold:not(.kopf-cta):not(.hero-knoepfe .knopf)::before,
body[data-seite="start"] .knopf.rand:not(.hero-knoepfe .knopf)::before { content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; display: block; background: linear-gradient(100deg, transparent 0%, #ffffff5c 50%, transparent 100%); transform: skewX(-18deg); pointer-events: none; opacity: 0; transition: none; }
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-automatisierung"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="seo-and-performance"], body[data-seite="wartung-and-support"], body[data-seite="uber-avyzor"], body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .knopf.gold:not(.kopf-cta)::before,
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-automatisierung"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="seo-and-performance"], body[data-seite="wartung-and-support"], body[data-seite="uber-avyzor"], body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .knopf.rand::before { content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; display: block; background: linear-gradient(100deg, transparent 0%, #ffffff5c 50%, transparent 100%); transform: skewX(-18deg); pointer-events: none; opacity: 0; transition: none; }
body[data-seite="start"] .knopf.gold:not(.kopf-cta):not(.hero-knoepfe .knopf):hover::before,
body[data-seite="start"] .knopf.rand:not(.hero-knoepfe .knopf):hover::before { animation: styles_op_o0oxqu_sweep 0.85s ease; transform: skewX(-18deg); }
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-automatisierung"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="seo-and-performance"], body[data-seite="wartung-and-support"], body[data-seite="uber-avyzor"], body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .knopf.gold:not(.kopf-cta):hover::before,
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-automatisierung"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="seo-and-performance"], body[data-seite="wartung-and-support"], body[data-seite="uber-avyzor"], body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .knopf.rand:hover::before { animation: styles_op_o0oxqu_sweep 0.85s ease; transform: skewX(-18deg); }
body[data-seite="start"] .knopf.gold:not(.kopf-cta):not(.hero-knoepfe .knopf) > *,
body[data-seite="start"] .knopf.rand:not(.hero-knoepfe .knopf) > * { position: relative; z-index: 1; }
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-automatisierung"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="seo-and-performance"], body[data-seite="wartung-and-support"], body[data-seite="uber-avyzor"], body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .knopf.gold:not(.kopf-cta) > *,
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-automatisierung"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="seo-and-performance"], body[data-seite="wartung-and-support"], body[data-seite="uber-avyzor"], body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .knopf.rand > * { position: relative; z-index: 1; }
body[data-seite="start"] .knopf.gold:not(.kopf-cta):not(.hero-knoepfe .knopf):hover { transform: translateY(-2px); box-shadow: 0 16px 40px -16px #E5A62Cc0, inset 0 1px 0 #fff6d9cc; }
body[data-seite="start"] .knopf.rand:not(.hero-knoepfe .knopf):hover { border-color: #C4A06A; color: #C4A06A; transform: translateY(-2px); box-shadow: 0 14px 40px -20px #E5A62Caa; }
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-automatisierung"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="seo-and-performance"], body[data-seite="wartung-and-support"], body[data-seite="uber-avyzor"], body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .knopf.gold:not(.kopf-cta):hover { transform: translateY(-2px); box-shadow: 0 16px 40px -16px #E5A62Cc0, inset 0 1px 0 #fff6d9cc; }
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-automatisierung"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="seo-and-performance"], body[data-seite="wartung-and-support"], body[data-seite="uber-avyzor"], body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .knopf.rand:hover { border-color: #C4A06A; color: #C4A06A; transform: translateY(-2px); box-shadow: 0 14px 40px -20px #E5A62Caa; }
:is(body[data-seite="start"], body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-automatisierung"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="seo-and-performance"], body[data-seite="wartung-and-support"], body[data-seite="uber-avyzor"], body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .knopf:hover .pfeil { transform: none; }
body[data-seite="start"] .knopf.gold:not(.kopf-cta):not(.hero-knoepfe .knopf):active,
body[data-seite="start"] .knopf.rand:not(.hero-knoepfe .knopf):active { transform: translateY(-2px); }
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-automatisierung"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="seo-and-performance"], body[data-seite="wartung-and-support"], body[data-seite="uber-avyzor"], body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .knopf.gold:not(.kopf-cta):active,
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-automatisierung"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="seo-and-performance"], body[data-seite="wartung-and-support"], body[data-seite="uber-avyzor"], body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .knopf.rand:active { transform: translateY(-2px); }
body[data-seite="start"] .hero-knoepfe .knopf.gold::before { display: block; }
body[data-seite="start"] .hero-knoepfe .knopf.gold { transition: transform .28s ease, box-shadow .28s ease; }
body[data-seite="start"] .hero-knoepfe .knopf.rand { transition: border-color .28s ease, background .28s ease, transform .28s ease; }
body[data-seite="start"] .hero-knoepfe .knopf.rand .pfeil { transition: transform .28s ease; }
body[data-seite="start"] .hero-knoepfe .knopf.gold:hover { transform: translateY(-3px); box-shadow: 0 16px 44px color-mix(in srgb, #C4A06A 50%, transparent); }
body[data-seite="start"] .hero-knoepfe .knopf.rand:hover { border-color: #C4A06A; background: color-mix(in srgb, #C4A06A 12%, transparent); transform: translateY(-3px); }
body[data-seite="start"] .hero-knoepfe .knopf.gold:active,
body[data-seite="start"] .hero-knoepfe .knopf.rand:active { transform: translateY(-3px); }
body[data-seite="start"] .hero-knoepfe .knopf.rand:hover .pfeil { transform: translateX(4px); }
body[data-seite="start"] .bento-k:hover { transform: none; background: linear-gradient(160deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .016) 62%); }
body[data-seite="start"] .bento-k { transition: translate .45s cubic-bezier(.22, 1, .36, 1), border-color .4s ease, box-shadow .4s ease; }
body[data-seite="start"] .js .bento-k.einblenden { transition: opacity .9s var(--kurve) var(--v, 0s), transform .9s var(--kurve) var(--v, 0s), translate .45s cubic-bezier(.22, 1, .36, 1), border-color .4s ease, box-shadow .4s ease; }
body[data-seite="start"] .bento-k:hover { translate: 0 -4px; border-color: color-mix(in srgb, #C4A06A 34%, transparent); box-shadow: 0 34px 70px -40px #000, inset 0 1px 0 #ffffff0f; }
body[data-seite="start"] .bento-k:focus-visible { outline: 2px solid #C4A06A; outline-offset: 3px; }
body[data-seite="start"] .paket { transition: border-color 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1); }
body[data-seite="start"] .js .paket.einblenden { transition: opacity .9s var(--kurve) var(--v, 0s), transform .9s var(--kurve) var(--v, 0s), border-color 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1); }
body[data-seite="start"] .paket:hover { border-color: #e5a62c44; box-shadow: 0 20px 50px -36px #00000099; }
body[data-seite="start"] .paket.hervor:hover { border-color: #e5a62c80; box-shadow: 0 38px 80px -44px #e5a62cb0, inset 0 1px 0 #e5a62c40; }
body[data-seite="start"] .paket.hervor .knopf.gold::before { display: none; }
body[data-seite="start"] .paket.hervor .knopf.gold { transition: transform 0.15s ease, filter 0.35s ease !important; }
body[data-seite="start"] .paket.hervor .knopf.gold::after { content: ""; position: absolute; top: 0; left: -110%; width: 55%; height: 100%; background: linear-gradient( 90deg, transparent, #ffffff22, #ffffff18, transparent); transform: skewX(-18deg); pointer-events: none; transition: none; }
body[data-seite="start"] .paket.hervor .knopf.gold:hover { transform: translateY(-1.5px) !important; filter: brightness(1.1); }
body[data-seite="start"] .paket.hervor .knopf.gold:hover::after { left: 155%; transition: left 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
body[data-seite="start"] .paket.hervor .knopf.gold:active { transform: scale(0.982) !important; transition: transform 0.1s ease !important; }
body[data-seite="start"] .extra-karte:hover { transform: none; background: linear-gradient(160deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .016) 62%); }
body[data-seite="start"] .extra-karte { transition: translate .4s cubic-bezier(.22, 1, .36, 1), border-color .4s ease, box-shadow .4s ease; }
body[data-seite="start"] .extra-karte { position: relative; }
body[data-seite="start"] .js .extra-karte.einblenden { transition: opacity .9s var(--kurve) var(--v, 0s), transform .9s var(--kurve) var(--v, 0s), translate .4s cubic-bezier(.22, 1, .36, 1), border-color .4s ease, box-shadow .4s ease; }
body[data-seite="start"] .extra-karte::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient( 115deg, transparent 36%, color-mix(in srgb, #C4A06A 65%, #fff) 50%, transparent 64%); background-size: 260% 100%; background-position: 210% 0; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s ease, background-position 1.1s cubic-bezier(.22, 1, .36, 1); }
body[data-seite="start"] .extra-karte:hover { translate: 0 -4px; border-color: color-mix(in srgb, #C4A06A 32%, transparent); box-shadow: 0 40px 80px -55px #000, inset 0 1px 0 #ffffff0d; }
body[data-seite="start"] .extra-karte:hover::after { opacity: 0.8; background-position: -60% 0; }
body[data-seite="start"] #ueber .knopf.gold::before { display: none; }
body[data-seite="start"] #ueber .knopf.gold { transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; }
body[data-seite="start"] #ueber .knopf.gold:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 18px 42px -14px color-mix(in srgb, #C4A06A 70%, transparent); }
body[data-seite="start"] #ueber .knopf.gold:active { transform: translateY(-1px) scale(0.98); }
body[data-seite="start"] .kontakt-text .reihe .knopf { transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1); }
body[data-seite="start"] .kontakt-text .reihe .knopf { transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease; }
body[data-seite="start"] .kontakt-text .reihe .knopf:hover { transform: translateY(-2px); }
body[data-seite="start"] .kontakt-text .reihe .knopf.rand:hover { box-shadow: none; background: #ffffff0a; border-color: color-mix(in srgb, #C4A06A 55%, #ffffff40); color: color-mix(in srgb, #C4A06A 42%, #fff); }
body[data-seite="start"] .kontakt-text .reihe .knopf:active { transform: scale(0.99); }
body[data-seite="start"] .kontakt-form .knopf.gold { position: relative; overflow: hidden; transition: filter .25s ease; }
body[data-seite="start"] .kontakt-form .knopf.gold { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease, filter .25s ease; }
body[data-seite="start"] .kontakt-form .knopf.gold::after { content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; background: linear-gradient( 100deg, transparent, #fff7e055, transparent); transform: skewX(-18deg); pointer-events: none; opacity: 0; transition: opacity .2s ease; }
body[data-seite="start"] .kontakt-form .knopf.gold:hover { filter: brightness(1.05); }
body[data-seite="start"] .kontakt-form .knopf.gold:hover::after { opacity: 1; animation: styles_op_1blnm2r_btnSweep .8s cubic-bezier(.22, 1, .36, 1); }
body[data-seite="start"] .projekt:hover { transform: none; translate: none; background: linear-gradient(160deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .016) 62%); border-color: rgba(255, 255, 255, .1); }
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="impressum"]) .karte:hover { transform: none; translate: none; background: linear-gradient(160deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .016) 62%); border-color: rgba(255, 255, 255, .1); }
body[data-seite="start"] .projekt .mehr:hover { color: var(--gold-hell); }
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="impressum"]) .karte .mehr:hover { color: var(--gold-hell); }
body[data-seite="start"] .bento-k .mehr:hover { color: var(--gold-hell); }
body[data-seite="start"] .kontakt-form .feld-l { position: relative; transition: color .25s ease; }
body[data-seite="start"] .kontakt-form .feld-l input,
body[data-seite="start"] .kontakt-form .feld-l select,
body[data-seite="start"] .kontakt-form .feld-l textarea { transition: border-color .25s ease, box-shadow .25s ease, background .25s ease, transform .25s ease; }
body[data-seite="start"] .kontakt-form .feld-l::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; border-radius: 2px; background: linear-gradient(90deg, #C4A06A, color-mix(in srgb, #C4A06A 20%, transparent)); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1); }
body[data-seite="start"] .kontakt-form .feld-l:focus-within { color: color-mix(in srgb, #C4A06A 85%, #fff); }
body[data-seite="start"] .kontakt-form .feld-l input:focus,
body[data-seite="start"] .kontakt-form .feld-l select:focus,
body[data-seite="start"] .kontakt-form .feld-l textarea:focus { outline: none; border-color: color-mix(in srgb, #C4A06A 75%, transparent); background: #ffffff12; box-shadow: 0 0 0 1px color-mix(in srgb, #C4A06A 45%, transparent), 0 0 22px -4px color-mix(in srgb, #C4A06A 34%, transparent); }
body[data-seite="start"] .kontakt-form .feld-l:focus-within input,
body[data-seite="start"] .kontakt-form .feld-l:focus-within select,
body[data-seite="start"] .kontakt-form .feld-l:focus-within textarea { transform: translateY(-1px); }
body[data-seite="start"] .kontakt-form .feld-l:focus-within::after { transform: scaleX(1); }
body[data-seite="leistungen"] .bento-k:hover { transform: none; background: linear-gradient(160deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .016) 62%); }
body[data-seite="leistungen"] .bento-k { transition: translate .45s cubic-bezier(.22, 1, .36, 1), border-color .4s ease, box-shadow .4s ease; }
body[data-seite="leistungen"] .js .bento-k.einblenden { transition: opacity .9s var(--kurve) var(--v, 0s), transform .9s var(--kurve) var(--v, 0s), translate .45s cubic-bezier(.22, 1, .36, 1), border-color .4s ease, box-shadow .4s ease; }
body[data-seite="leistungen"] .bento-k:hover { translate: 0 -4px; border-color: color-mix(in srgb, #C4A06A 34%, transparent); box-shadow: 0 34px 70px -40px #000, inset 0 1px 0 #ffffff0f; }
body[data-seite="leistungen"] .bento-k:focus-visible { outline: 2px solid #C4A06A; outline-offset: 3px; }
body[data-seite="leistungen"] .bento-k .mehr:hover { color: var(--gold-hell); }
:is(body[data-seite="leistungen"], body[data-seite="seo-and-performance"], body[data-seite="wartung-and-support"], body[data-seite="uber-avyzor"], body[data-seite="datenschutz"], body[data-seite="portfolio-webentwicklung"]) .styles_op_eyw47c_fab { transition: transform .25s ease; }
body[data-seite="wartung-and-support"] .styles_op_eyw47c_fabTip { transition: opacity .2s ease, transform .2s ease; }
:is(body[data-seite="leistungen"], body[data-seite="datenschutz"]) .styles_op_eyw47c_assistant:hover { transform: translateY(-2px); border-color: #C4A06A; box-shadow: 0 16px 40px -14px color-mix(in srgb, #C4A06A 45%, transparent); }
:is(body[data-seite="leistungen"], body[data-seite="seo-and-performance"], body[data-seite="wartung-and-support"], body[data-seite="uber-avyzor"], body[data-seite="datenschutz"], body[data-seite="portfolio-webentwicklung"]) .styles_op_eyw47c_fab:hover { transform: translateY(-2px) scale(1.03); }
body[data-seite="crm-and-kundenportal"] .styles_op_eyw47c_assistant:hover { transform: translateY(-2px); border-color: #C4A06A; box-shadow: 0 16px 40px -14px #C4A06A70; }
body[data-seite="crm-and-kundenportal"] .styles_op_eyw47c_fab:hover { transform: translateY(-3px); box-shadow: 0 14px 30px #00000077; }
:is(body[data-seite="seo-and-performance"], body[data-seite="portfolio-webentwicklung"]) .styles_op_eyw47c_assistant:hover { transform: translateY(-2px); border-color: #C4A06A; box-shadow: 0 16px 40px -14px #C4A06A72; }
body[data-seite="uber-avyzor"] .styles_op_eyw47c_assistant:hover { transform: translateY(-2px); border-color: #C4A06A; box-shadow: 0 16px 40px -14px #C4A06A73; }
body[data-seite="crm-and-kundenportal"] .styles_op_eyw47c_assistant:focus-visible { outline: 2px solid #C4A06A; outline-offset: 3px; border-color: #C4A06A; }
body[data-seite="wartung-and-support"] .styles_op_eyw47c_fab:focus-visible { outline: 2px solid #E0C79B; outline-offset: 3px; }
:is(body[data-seite="uber-avyzor"], body[data-seite="portfolio-webentwicklung"]) .styles_op_eyw47c_assistant:focus-visible,
:is(body[data-seite="uber-avyzor"], body[data-seite="portfolio-webentwicklung"]) .styles_op_eyw47c_fab:focus-visible { outline: 2px solid #C4A06A; outline-offset: 3px; }
body[data-seite="wartung-and-support"] .styles_op_eyw47c_fab:hover .styles_op_eyw47c_fabTip { opacity: 1; transform: translateY(-50%) translateX(0); transition-delay: .2s; }
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-automatisierung"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="seo-and-performance"], body[data-seite="wartung-and-support"]) .paket { transition: border-color .28s ease, box-shadow .28s ease, translate .25s ease; }
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-automatisierung"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="seo-and-performance"], body[data-seite="wartung-and-support"]) .js .paket.einblenden { transition: opacity .9s var(--kurve) var(--v, 0s), transform .9s var(--kurve) var(--v, 0s), border-color .28s ease, box-shadow .28s ease, translate .25s ease; }
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-automatisierung"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="seo-and-performance"], body[data-seite="wartung-and-support"]) .paket:hover { border-color: #C4A06A44; box-shadow: 0 8px 36px #C4A06A12; translate: 0 -3px; }
:is(body[data-seite="webdesign-and-entwicklung"], body[data-seite="crm-and-kundenportal"], body[data-seite="ki-automatisierung"], body[data-seite="ki-chatbots-and-voice"], body[data-seite="seo-and-performance"], body[data-seite="wartung-and-support"]) .paket.hervor:hover { border-color: #C4A06Aaa; box-shadow: 0 0 0 1px #C4A06A44, 0 18px 56px #C4A06A28, inset 0 1px 0 #C4A06A33; translate: 0 -4px; }
body[data-seite="uber-avyzor"] .karte:hover { transform: none; }
body[data-seite="uber-avyzor"] .karte { transition: opacity .7s ease, translate .7s ease, border-color .3s ease, background .3s ease; }
body[data-seite="uber-avyzor"] .js .karte.einblenden { transition: opacity .9s var(--kurve) var(--v, 0s), transform .9s var(--kurve) var(--v, 0s), translate .7s ease, border-color .3s ease, background .3s ease; }
body[data-seite="uber-avyzor"] .karte:hover { border-color: #C4A06A55; background: #11151B; translate: 0 -4px; }
body[data-seite="impressum"] .recht-karte a { border-bottom: 1px solid transparent; transition: border-color 0.25s, color 0.25s; }
body[data-seite="impressum"] .recht-karte a:hover { color: #C4A06A; border-bottom-color: #C4A06A; }
:is(body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"], body[data-seite="kontakt"], body[data-seite="karriere"]) .anf-feld input:not([type=checkbox]),
:is(body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"], body[data-seite="kontakt"], body[data-seite="karriere"]) .anf-feld select,
:is(body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"], body[data-seite="kontakt"], body[data-seite="karriere"]) .anf-feld textarea { transition: border-color .22s ease, box-shadow .22s ease; }
:is(body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"], body[data-seite="kontakt"], body[data-seite="karriere"]) .anf-feld input:not([type=checkbox]):focus,
:is(body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"], body[data-seite="kontakt"], body[data-seite="karriere"]) .anf-feld select:focus,
:is(body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"], body[data-seite="kontakt"], body[data-seite="karriere"]) .anf-feld textarea:focus { border-color: #C4A06A88; box-shadow: 0 0 0 3px #C4A06A22; }
:is(body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"], body[data-seite="kontakt"], body[data-seite="karriere"]) .knopf.gold.anf-senden::before { display: none; }
:is(body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"], body[data-seite="kontakt"], body[data-seite="karriere"]) .knopf.gold.anf-senden { transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
:is(body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"], body[data-seite="kontakt"], body[data-seite="karriere"]) .knopf.gold.anf-senden:hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 1px 0 #ffffff66, 0 12px 30px #C4A06A44; }
:is(body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"], body[data-seite="kontakt"], body[data-seite="karriere"]) .knopf.gold.anf-senden:disabled { opacity: 0.7; cursor: default; }
:is(body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"], body[data-seite="kontakt"], body[data-seite="karriere"]) .knopf.gold:not(.kopf-cta)::before { display: none; }
:is(body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"], body[data-seite="kontakt"], body[data-seite="karriere"]) .knopf.gold:not(.kopf-cta) { transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
:is(body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"], body[data-seite="kontakt"], body[data-seite="karriere"]) .knopf.gold:not(.kopf-cta):hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 1px 0 #ffffff66, 0 12px 30px #C4A06A44; }
:is(body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"], body[data-seite="kontakt"], body[data-seite="karriere"]) .knopf.gold:not(.kopf-cta):disabled { opacity: 0.7; cursor: default; }
:is(body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"], body[data-seite="kontakt"], body[data-seite="karriere"]) .knopf.gold:not(.kopf-cta):active { transform: translateY(-1px); }
:is(body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"], body[data-seite="kontakt"], body[data-seite="karriere"]) .knopf.rand:active { transform: none; }
:is(body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"], body[data-seite="kontakt"], body[data-seite="karriere"]) .knopf.rand { transition: none; }
:is(body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"], body[data-seite="kontakt"], body[data-seite="karriere"]) .pfeil { transition: none; }
:is(body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"], body[data-seite="kontakt"], body[data-seite="karriere"]) .knopf.rand:hover { border-color: rgba(255, 255, 255, .22); background: rgba(5, 6, 12, .3); }
:is(body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"]).detail .seiten-hero .knopf.rand:hover,
:is(body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"]).detail .empfehlung .knopf.rand:hover,
:is(body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"]) .pf-cta .knopf.rand:hover,
:is(body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"]) .kt-portal .knopf.rand:hover { background: #0b0c10; border-color: rgba(255, 255, 255, .16); }
body[data-seite="kontakt"].detail .seiten-hero .knopf.rand:hover,
body[data-seite="kontakt"].detail .empfehlung .knopf.rand:hover,
body[data-seite="kontakt"] .pf-cta .knopf.rand:hover { background: #0b0c10; border-color: rgba(255, 255, 255, .16); }
:is(body[data-seite="extras-anfrage"], body[data-seite="projektanfrage"], body[data-seite="kontakt"], body[data-seite="karriere"]) .knopf:hover .pfeil { transform: none; }
body[data-seite="projektanfrage"] .anf-zustimmung a:hover { color: #E0C79B; }
:is(body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .pf-karte:hover { transform: none; }
:is(body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .pf-karte { transition: translate .3s ease, border-color .3s ease, box-shadow .3s ease; }
:is(body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .js .pf-karte.einblenden { transition: opacity .9s var(--kurve) var(--v, 0s), transform .9s var(--kurve) var(--v, 0s), translate .3s ease, border-color .3s ease, box-shadow .3s ease; }
:is(body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .pf-karte:hover { translate: 0 -3px; border-color: #C4A06A66; box-shadow: 0 24px 60px #00000055; }
:is(body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .pf-chips li { transition: translate .3s ease, border-color .3s ease, box-shadow .3s ease; }
:is(body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .js .pf-chips li.einblenden { transition: opacity .9s var(--kurve) var(--v, 0s), transform .9s var(--kurve) var(--v, 0s), translate .3s ease, border-color .3s ease, box-shadow .3s ease; }
:is(body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .pf-chips li:hover { translate: 0 -2px; border-color: #C4A06A; box-shadow: 0 0 0 1px #C4A06A55, 0 18px 40px #00000044; }
:is(body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .pf-tab { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
:is(body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .pf-tab b { transition: filter .3s ease; }
:is(body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .pf-tab:hover { transform: translateY(-3px); border-color: #C4A06A55; }
:is(body[data-seite="portfolio-webentwicklung"], body[data-seite="portfolio-shop-and-automatisierung"], body[data-seite="portfolio-webdesign-and-ki"]) .pf-tab:focus-visible { outline: 2px solid #C4A06A; outline-offset: 3px; }
body[data-seite="kontakt"] .kt-karte:hover { transform: none; }
body[data-seite="kontakt"] .kt-karte { transition: opacity .7s cubic-bezier(.22, 1, .36, 1), translate .7s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, box-shadow .3s ease, background .3s ease; }
body[data-seite="kontakt"] .kt-symbol { transition: color .3s ease, background .3s ease, border-color .3s ease; }
body[data-seite="kontakt"] .kt-pfeil { transition: color .3s ease, translate .3s ease; }
body[data-seite="kontakt"] .js .kt-karte.einblenden { transition: opacity .9s var(--kurve) var(--v, 0s), transform .9s var(--kurve) var(--v, 0s), translate .7s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, box-shadow .3s ease, background .3s ease; }
body[data-seite="kontakt"] .kt-karte:hover { border-color: #C4A06A99; background: linear-gradient( 180deg, #11141A, #0C0F14); box-shadow: 0 18px 46px #00000055, 0 0 0 1px #C4A06A22, 0 0 40px #C4A06A1f; }
body[data-seite="kontakt"] .kt-karte:hover .kt-symbol { color: #1A1408; background: linear-gradient( 135deg, #E0C79B, #C4A06A); border-color: #C4A06A; }
body[data-seite="kontakt"] .kt-karte:hover .kt-pfeil { color: #C4A06A; translate: 4px 0; }
body[data-seite="kontakt"] .kt-portal .knopf.rand::before { display: none; }
body[data-seite="kontakt"] .kt-portal .knopf.rand { transition: background .25s ease, border-color .25s ease, color .25s ease, transform .2s ease, box-shadow .25s ease; }
body[data-seite="kontakt"] .kt-portal .knopf.rand:hover { color: #1A1408; border-color: #C4A06A; background: linear-gradient( 135deg, #E0C79B, #C4A06A); transform: translateY(-1px); box-shadow: 0 10px 26px #C4A06A33; }
body[data-seite="kundenportal-login"] .pl-feld input:not([type=checkbox]) { transition: border-color .22s ease, box-shadow .22s ease, opacity .2s ease; }
body[data-seite="kundenportal-login"] .pl-feld input:not([type=checkbox]):focus { border-color: #C4A06A88; box-shadow: 0 0 0 3px #C4A06A1f; }
body[data-seite="kundenportal-login"] .pl-auge { transition: color .2s ease, background .2s ease; }
body[data-seite="kundenportal-login"] .pl-auge:hover { color: #C4A06A; background: #C4A06A14; }
body[data-seite="kundenportal-login"] .pl-auge:disabled { opacity: 0.5; cursor: not-allowed; }
body[data-seite="kundenportal-login"] .pl-zeile a { transition: color .2s ease; }
body[data-seite="kundenportal-login"] .pl-zeile a:hover { color: #E0C79B; text-decoration: underline; }
body[data-seite="kundenportal-login"] .pl-zugang a { transition: color .2s ease; }
body[data-seite="kundenportal-login"] .pl-zugang a:hover { color: #E0C79B; }
body[data-seite="kundenportal-login"] .knopf.gold:not(.kopf-cta)::before { display: none; }
body[data-seite="kundenportal-login"] .knopf.gold:not(.kopf-cta) { transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
body[data-seite="kundenportal-login"] .knopf.gold:not(.kopf-cta):hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 1px 0 #ffffff66, 0 12px 30px #C4A06A4d; }
body[data-seite="kundenportal-login"] .knopf.gold:not(.kopf-cta):disabled { cursor: not-allowed; }
body[data-seite="kundenportal-login"] .knopf.gold:not(.kopf-cta):active:not(:disabled) { transform: translateY(0); }
body[data-seite="kundenportal-login"] .pl-info { transition: opacity .7s ease, translate .7s ease, border-color .28s ease, box-shadow .28s ease; }
body[data-seite="kundenportal-login"] .js .pl-info.einblenden { transition: opacity .9s var(--kurve) var(--v, 0s), transform .9s var(--kurve) var(--v, 0s), translate .7s ease, border-color .28s ease, box-shadow .28s ease; }
body[data-seite="kundenportal-login"] .pl-info:hover { border-color: #C4A06A44; box-shadow: 0 10px 40px #C4A06A14; }
body[data-seite="kundenportal-login"] .knopf.rand { transition: none; }
body[data-seite="kundenportal-login"] .knopf.rand:hover { border-color: rgba(255, 255, 255, .22); background: rgba(5, 6, 12, .3); }
/* Animationen aus dem Original */
@keyframes styles_op_o0oxqu_sweep { 0% { left: -130%; opacity: 0; } 10% { opacity: 1; } 100% { left: 150%; opacity: 0; } }
@keyframes styles_op_1blnm2r_btnSweep { 0% { left: -70%; } 100% { left: 130%; } }
/* Sprung-Link: Original blendet ihn in 0,1 s ein */
.springen { transition: top .1s ease; }


/* Reduzierte Bewegung: keine Uebergaenge, keine Hover-Bewegung */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .knopf:hover, .knopf:active, .karte:hover, .bento-k:hover, .paket:hover, .extra-karte:hover, .projekt:hover, .pf-karte:hover,
  .pf-chips li:hover, .pf-tab:hover, .kt-karte:hover, .pl-info:hover, .fuss-spalte a:hover, .fuss-kontakt:hover, .fuss-unten a:hover,
  .kt-karte:hover .kt-pfeil {
    transform: none !important; translate: none !important; scale: none !important;
  }
}

/* Fuß-Links schieben sich beim Drüberfahren nach rechts: auf jeder Seite gleich (scripts/fuss-hover-pruefung.js prüft es für alle Seiten) */
footer .fuss-spalte a, footer .fuss-kontakt, footer a[class*="_link"], footer a[class*="Link"] { display: inline-block; transition: transform .25s ease, color .25s ease; }
footer .fuss-spalte a:hover, footer .fuss-kontakt:hover, footer a[class*="_link"]:hover, footer a[class*="Link"]:hover { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) { footer .fuss-spalte a:hover, footer .fuss-kontakt:hover, footer a[class*="_link"]:hover, footer a[class*="Link"]:hover { transform: none; } }


.sprachwahl { position: relative; font: 400 .72rem/normal var(--mono, ui-monospace, monospace); letter-spacing: .12em; }
/* Grundform = Sprachknopf der Startseite im Original (52 x 28, mono .72rem, Rand Gold 34 %, Radius 6, Pfeil 6 px); die Fassungen der Kopfzeile (bewegung/kopf-leiste.css) überschreiben sie je Seite */
.sprachwahl > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; color: #cbb184; border: 1px solid color-mix(in srgb, var(--gold, #c4a06a) 34%, transparent); border-radius: 6px; padding: 6px 10px; background: color-mix(in srgb, #05060c 40%, transparent); user-select: none; }
.sprachwahl > summary::-webkit-details-marker { display: none; }
.sprachwahl > summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-1px) rotate(45deg); transition: transform .25s ease; }
.sprachwahl[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.sprachwahl > ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 120; margin: 0; padding: 6px; list-style: none; min-width: 168px; max-height: min(70vh, 420px); overflow: auto; background: rgba(12, 13, 17, .96); border: 1px solid rgba(196, 160, 106, .28); border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
.sprachwahl > ul a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 8px; color: #d9dce4; text-decoration: none; font: 500 13px/1.2 var(--text, system-ui, sans-serif); letter-spacing: 0; }
.sprachwahl > ul a:hover, .sprachwahl > ul a:focus-visible { background: rgba(196, 160, 106, .12); color: #fff; outline: none; }
.sprachwahl > ul a[aria-current="true"] { color: var(--gold, #c4a06a); }
.sprachwahl > ul a small { color: #7f8696; font: 600 10px/1.4 var(--mono, ui-monospace, monospace); letter-spacing: .12em; }
@media (max-width: 760px) { .sprachwahl > ul { right: -4px; } }