/* Weber Videomarketing — weber-videomarketing.com */

@font-face { font-family: "Montserrat"; font-weight: 800; font-display: swap;
  src: url("montserrat-800.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 400; font-display: swap;
  src: url("publicsans-400.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 600; font-display: swap;
  src: url("publicsans-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap;
  src: url("plexmono-400.woff2") format("woff2"); }

:root {
  --violett: #5D007F;
  --violett-tief: #43005C;
  --marker: #FFD23F;
  --tinte: #1A1023;
  --text: #2A1B36;
  --text-leise: #6A5580;
  --papier: #FAF7FC;
  --flaeche: #EFE4F6;
  --linie: #DCCBE8;
  --karte: #FFFFFF;
  --invers-grund: #1A1023;
  --invers-text: #F4ECFA;
  --invers-leise: #B49BC8;
  --cta-text: #FFFFFF;
  --schatten: 0 10px 30px rgba(93, 0, 127, .10);
  --display: "Montserrat", "Arial Black", Arial, sans-serif;
  --body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --violett: #C77DFF;
    --violett-tief: #A855F7;
    --marker: #FFD23F;
    --tinte: #F4ECFA;
    --text: #E6D9F0;
    --text-leise: #A78BBF;
    --papier: #140A1C;
    --flaeche: #221331;
    --linie: #3A2450;
    --karte: #1D1029;
    --invers-grund: #0E0714;
    --invers-text: #F4ECFA;
    --invers-leise: #A78BBF;
    --cta-text: #1A1023;
    --schatten: 0 10px 30px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  --violett: #C77DFF;
  --violett-tief: #A855F7;
  --marker: #FFD23F;
  --tinte: #F4ECFA;
  --text: #E6D9F0;
  --text-leise: #A78BBF;
  --papier: #140A1C;
  --flaeche: #221331;
  --linie: #3A2450;
  --karte: #1D1029;
  --invers-grund: #0E0714;
  --invers-text: #F4ECFA;
  --invers-leise: #A78BBF;
  --cta-text: #1A1023;
  --schatten: 0 10px 30px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}
h1, h2, h3, .k-wert { overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--violett); }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 24px; }
@media (max-width: 480px) { .wrap { padding-inline: 18px; } }

h1, h2, h3 { font-family: var(--display); color: var(--tinte); line-height: 1.08; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.4rem, 6.4vw, 4.4rem); letter-spacing: -.015em; text-transform: uppercase; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); letter-spacing: -.01em; text-transform: uppercase; }
h3 { font-size: 1.12rem; line-height: 1.3; }
p { margin: 0; max-width: 62ch; }

.eyebrow {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--violett);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0;
}
.eyebrow::before {
  content: ""; width: 0; height: 0; flex: none;
  border-left: 9px solid var(--violett);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}

/* ---------- Header ---------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}
.nav { display: flex; align-items: center; gap: 28px; padding-block: 14px; }
.nav .logo img { width: 158px; }
.nav nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.nav nav a { color: var(--text); text-decoration: none; font-weight: 600; font-size: .95rem; }
.nav nav a:hover { color: var(--violett); }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-hell { display: none; }
  :root:not([data-theme="light"]) .logo-dark { display: block; }
}
:root[data-theme="dark"] .logo-hell { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }

.btn {
  display: inline-block; background: var(--violett); color: var(--cta-text);
  font-family: var(--display); font-size: .95rem; text-transform: uppercase;
  letter-spacing: .04em; text-decoration: none;
  padding: 13px 24px; border-radius: 6px;
}
.btn:hover { background: var(--violett-tief); }
.btn:focus-visible, a:focus-visible { outline: 3px solid var(--marker); outline-offset: 2px; }
.btn.gross { font-size: 1.05rem; padding: 16px 32px; }
@media (max-width: 760px) { .nav nav a:not(.btn) { display: none; } }

/* ---------- Hero ---------- */
.hero { padding-block: 72px 84px; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.25fr .75fr; gap: 56px; align-items: center; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } }
.hero .mark { position: relative; display: inline; }
.hero .mark::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: .04em; height: .32em;
  background: var(--marker); z-index: -1;
}
.hero p.lead { margin-top: 26px; font-size: 1.16rem; }
.hero .cta-zeile { margin-top: 34px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hero .nebencta { font-weight: 600; }

/* Phone-Mock */
.phone { width: min(290px, 78vw); aspect-ratio: 9 / 16; margin-inline: auto;
  background: var(--invers-grund); border-radius: 30px; border: 1px solid var(--linie);
  position: relative; box-shadow: var(--schatten); overflow: hidden; }
.phone::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 30% 20%, rgba(93,0,127,.55), transparent 60%),
              radial-gradient(100% 80% at 80% 90%, rgba(255,210,63,.18), transparent 55%); }
.phone .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -58%);
  width: 0; height: 0; border-left: 46px solid var(--invers-text);
  border-top: 30px solid transparent; border-bottom: 30px solid transparent;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.4)); }
.phone .chip { position: absolute; font-family: var(--mono); font-size: .72rem;
  background: rgba(20, 8, 28, .78); color: #F4ECFA; border: 1px solid rgba(199,125,255,.4);
  padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.phone .chip b { color: var(--marker); font-weight: 400; }
.phone .c1 { top: 9%; left: 8%; }
.phone .c2 { top: 72%; right: 7%; }
.phone .bar { position: absolute; left: 8%; right: 8%; bottom: 7%; height: 4px;
  background: rgba(244,236,250,.22); border-radius: 2px; }
.phone .bar i { display: block; height: 100%; width: 43%; background: var(--marker); border-radius: 2px; }
.phone .rec { position: absolute; top: 9.5%; right: 8%; font-family: var(--mono); font-size: .72rem;
  color: #F4ECFA; display: flex; gap: 6px; align-items: center; }
.phone .rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #FF4D5E; }

/* ---------- Zahlen-Protokoll ---------- */
.zahlen { background: var(--invers-grund); color: var(--invers-text); padding-block: 72px; }
.zahlen h2 { color: var(--invers-text); }
.zahlen .kopf { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.zahlen .hinweis { font-family: var(--mono); font-size: .78rem; color: var(--invers-leise); max-width: 34ch; }
.protokoll { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(180,155,200,.25); border: 1px solid rgba(180,155,200,.25); }
@media (max-width: 900px) { .protokoll { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .protokoll { grid-template-columns: 1fr; } }
.protokoll .zelle { background: var(--invers-grund); padding: 26px 22px 20px; }
.protokoll .wert { font-family: var(--display); font-size: clamp(2rem, 4vw, 2.9rem);
  color: var(--invers-text); font-variant-numeric: tabular-nums; line-height: 1; }
.protokoll .wert em { font-style: normal; color: var(--marker); }
.protokoll .was { margin-top: 10px; font-size: .95rem; color: var(--invers-text); }
.protokoll .beleg { margin-top: 14px; font-family: var(--mono); font-size: .72rem;
  color: var(--invers-leise); border-top: 1px dashed rgba(180,155,200,.35); padding-top: 10px; }
.protokoll .beleg::before { content: "BELEG · "; color: var(--marker); letter-spacing: .08em; }

/* ---------- Sektionen ---------- */
section.block { padding-block: 78px; }
section.block.getoent { background: var(--flaeche); }
.block .intro { max-width: 60ch; margin-top: 16px; color: var(--text-leise); font-size: 1.05rem; }

.leistungen { margin-top: 42px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .leistungen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .leistungen { grid-template-columns: 1fr; } }
.leistung { background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; }
.leistung.haupt { border-color: var(--violett); border-width: 2px; box-shadow: var(--schatten); }
.leistung .tag { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; color: var(--violett); text-transform: uppercase; }
.leistung p { font-size: .95rem; color: var(--text-leise); }

.ablauf { margin-top: 42px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: schritt; }
@media (max-width: 900px) { .ablauf { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ablauf { grid-template-columns: 1fr; } }
.schritt { counter-increment: schritt; border-top: 3px solid var(--violett); padding-top: 16px; }
.schritt::before { content: "Schritt " counter(schritt); font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--violett); display: block; margin-bottom: 8px; }
.schritt h3 { margin-bottom: 8px; }
.schritt p { font-size: .95rem; color: var(--text-leise); }

.gruende { margin-top: 42px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; }
@media (max-width: 760px) { .gruende { grid-template-columns: 1fr; } }
.grund { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; }
.grund::before { content: ""; margin-top: 7px; width: 0; height: 0;
  border-left: 13px solid var(--violett); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.grund b { display: block; font-family: var(--display); font-size: 1rem; text-transform: uppercase; letter-spacing: .02em; color: var(--tinte); margin-bottom: 4px; }
.grund p { font-size: .97rem; color: var(--text-leise); }

.referenz-zeilen { margin-top: 36px; display: grid; gap: 0; border-top: 1px solid var(--linie); }
.referenz-zeilen .zeile { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding-block: 18px; border-bottom: 1px solid var(--linie); align-items: baseline; }
@media (max-width: 560px) { .referenz-zeilen .zeile { grid-template-columns: 1fr; gap: 4px; } }
.referenz-zeilen .branche { font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--violett); }
.referenz-zeilen p { font-size: 1rem; max-width: none; }
.referenz-hinweis { margin-top: 22px; font-size: .92rem; color: var(--text-leise); font-style: italic; }

/* ---------- Kontakt ---------- */
.kontakt { background: var(--invers-grund); color: var(--invers-text); padding-block: 84px; }
.kontakt h2 { color: var(--invers-text); font-size: clamp(2rem, 4.6vw, 3.2rem); }
.kontakt .mark { position: relative; display: inline; }
.kontakt .mark::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: .04em; height: .3em; background: var(--marker); z-index: -1; opacity: .9; }
.kontakt h2 .mark { color: #FFFFFF; }
.kontakt .lead { margin-top: 20px; color: var(--invers-leise); font-size: 1.1rem; }
.kanaele { margin-top: 38px; display: flex; gap: 14px; flex-wrap: wrap; }
.kanal { display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  border: 1px solid rgba(180,155,200,.35); border-radius: 10px; padding: 16px 22px; min-width: 220px; }
.kanal:hover { border-color: var(--marker); }
.kanal .k-was { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--invers-leise); }
.kanal .k-wert { font-family: var(--display); font-size: 1.05rem; color: var(--invers-text); }
.kontakt .btn { background: var(--marker); color: #1A1023; margin-top: 34px; }
.kontakt .btn:hover { background: #FFDD6B; }

/* ---------- Footer ---------- */
footer.site { background: var(--invers-grund); color: var(--invers-leise); border-top: 1px solid rgba(180,155,200,.25); padding-block: 34px; }
footer.site .wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
footer.site img { width: 132px; }
footer.site nav { margin-left: auto; display: flex; gap: 20px; }
footer.site a { color: var(--invers-leise); text-decoration: none; font-size: .9rem; }
footer.site a:hover { color: var(--invers-text); }
footer.site .fein { width: 100%; font-family: var(--mono); font-size: .72rem; }

/* ---------- Unterseiten (Impressum/Datenschutz) ---------- */
.recht { padding-block: 64px; }
.recht h1 { font-size: clamp(2rem, 5vw, 3rem); }
.recht h2 { font-size: 1.25rem; margin-top: 40px; text-transform: none; }
.recht p, .recht address { margin-top: 14px; font-style: normal; }
.recht .karte { margin-top: 28px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 24px 26px; }