/* ============================================================
   Alex Media — Stylesheet
   Basiert auf Branding/tokens.css (Brandbook v1.1)

   Ersetzt: bootstrap.min.css, animate.css, main.css, meanmenu.css,
            nice-select.css, magnific-popup.css, font-awesome.css
   Kein Build-Step. Kein Framework. Keine Scroll-Animationen.
   ============================================================ */

/* ---------- 1. Tokens ------------------------------------- */
:root {
  /* Marke */
  --violet:        #5C30FD;
  --violet-deep:   #4A22E0;
  --violet-400:    #8760FD;
  --violet-light:  #A98CFF;
  --violet-tint:   #ECE6FF;
  --indigo:        #2B2B6B;
  --gold:          #F8BC26;

  /* Grund + Neutrale (violett-gebiast) */
  --paper:         #FBFAFF;
  --surface:       #F4F2FB;
  --surface-2:     #EEEBF8;
  --border:        #E4E0F0;
  --border-strong: #D3CDE8;
  --text:          #2E2B3F;
  --muted:         #6B6880;
  --ink:           #101828;

  /* Auf dunklem Grund */
  --on-ink:        #FFFFFF;
  --on-ink-muted:  #B8B3D0;
  --on-ink-border: rgba(255,255,255,.13);

  /* Signal */
  --ok:   #0F7B5A;  --ok-bg:   #E6F4EF;
  --warn: #A66A00;  --warn-bg: #FBF0DC;
  --bad:  #C0342B;  --bad-bg:  #FAEAE8;

  /* Typo */
  --font-display: "League Spartan", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --t-display: clamp(2.5rem, 5.6vw, 4.35rem);
  --t-h1:      clamp(2rem, 4.2vw, 3rem);
  --t-h2:      clamp(1.65rem, 3.1vw, 2.4rem);
  --t-h3:      clamp(1.15rem, 1.7vw, 1.35rem);
  --t-body:    1rem;
  --t-lead:    clamp(1rem, 1.35vw, 1.125rem);
  --t-small:   0.875rem;
  --t-micro:   0.75rem;

  /* Form */
  --r-card:  12px;
  --r-input:  9px;
  --r-pill: 100px;
  --measure: 68ch;

  --shadow:    0 1px 2px rgba(16,24,40,.04), 0 8px 28px rgba(92,48,253,.07);
  --shadow-lg: 0 2px 4px rgba(16,24,40,.05), 0 24px 60px rgba(92,48,253,.13);

  /* Raster */
  --wrap: 1200px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 7vw, 6rem);

  --nav-h: 76px;
}

/* ---------- 2. Reset -------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
p { margin: 0; }

a { color: var(--violet); text-decoration: none; }
a:hover { color: var(--violet-deep); }

:focus-visible {
  outline: 2.5px solid var(--violet);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 3. Layout-Helfer ------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .62); }
.section--surface { background: var(--surface); }
.section--ink { background: var(--ink); }

.stack   { display: flex; flex-direction: column; gap: 1rem; }
.stack-s { display: flex; flex-direction: column; gap: .55rem; }
.row     { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

.grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
/* Portfolio: bewusst nur zwei Spalten, damit die Screenshots lesbar bleiben */
.grid--works { grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); }

/* ---------- 4. Typografie-Bausteine ----------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--violet);
}
.eyebrow--on-ink { color: var(--violet-light); }

.display { font-size: var(--t-display); letter-spacing: -.032em; font-weight: 800; line-height: .99; }
.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -.008em; }

.lead {
  font-size: var(--t-lead);
  color: var(--muted);
  line-height: 1.62;
  max-width: 58ch;
}
.lead--on-ink { color: var(--on-ink-muted); }

.muted { color: var(--muted); }
.measure { max-width: var(--measure); }

.section-head { display: flex; flex-direction: column; gap: .85rem; margin-bottom: clamp(2rem, 4vw, 3.1rem); }
.section-head .lead { margin-top: .1rem; }

/* ---------- 5. Buttons ------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--font-body);
  font-size: .935rem;
  font-weight: 500;
  line-height: 1.2;
  padding: .82rem 1.5rem;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn .icon { width: 17px; height: 17px; }

.btn--primary { background: var(--violet); color: #fff; }
.btn--primary:hover { background: var(--violet-deep); color: #fff; }

.btn--ghost { background: transparent; color: var(--violet); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--violet-tint); border-color: var(--violet); color: var(--violet-deep); }

.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--indigo); color: #fff; }

.btn--on-ink { background: #fff; color: var(--ink); }
.btn--on-ink:hover { background: var(--violet-tint); color: var(--ink); }

.btn--ghost-on-ink { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.btn--ghost-on-ink:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); color: #fff; }

.btn--block { width: 100%; }

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--violet);
}
.link-arrow .icon { width: 16px; height: 16px; transition: transform .18s ease; }
.link-arrow:hover .icon { transform: translateX(3px); }

/* ---------- 6. Pills / Badges ----------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--violet-tint);
  color: var(--violet-deep);
  border-radius: var(--r-pill);
  padding: .38rem .9rem;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .04em;
}
.pill .icon { width: 14px; height: 14px; }

.pill--on-ink {
  background: rgba(169,140,255,.14);
  border: 1px solid rgba(169,140,255,.3);
  color: #CBB6FF;
}

/* Standort-Marker: eckige weisse Box, violette Schrift — bewusst nicht rund */
.locbox {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: #fff;
  color: var(--violet);
  border-radius: 6px;
  padding: .46rem .8rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
}
.locbox .icon { width: 15px; height: 15px; stroke-width: 2.2; }

/* ---------- 7. Icons -------------------------------------- */
.icon {
  width: 24px;
  height: 24px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--fill { fill: currentColor; stroke: none; }

.icon-box {
  width: 48px;
  height: 48px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--violet-tint);
  color: var(--violet);
  flex: none;
}
.icon-box .icon { width: 23px; height: 23px; }
.icon-box--ink { background: rgba(169,140,255,.13); color: var(--violet-light); }

/* ---------- 8. Header / Navigation ------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(251,250,255,.88);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  height: var(--nav-h);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--ink);
  margin-right: auto;
}
.nav__brand svg { width: 34px; height: 34px; flex: none; }
.nav__brand b {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -.028em;
  /* League Spartan hat viel Oberlaenge und kaum Unterlaenge — mit der
     geerbten Zeilenhoehe sitzt der Schriftzug sonst sichtbar zu hoch.
     line-height:1 legt die Box eng um die Versalien, der Rest ist
     optischer Ausgleich auf die Mitte der Bildmarke. */
  line-height: 1;
  display: block;
  transform: translateY(0.06em);
}

.nav__links { display: none; align-items: center; gap: .3rem; }
@media (min-width: 940px) { .nav__links { display: flex; } }

.nav__links a {
  display: block;
  padding: .5rem .82rem;
  border-radius: 8px;
  font-size: .93rem;
  font-weight: 400;
  color: var(--text);
  transition: background-color .16s ease, color .16s ease;
}
.nav__links a:hover { background: var(--surface); color: var(--ink); }
.nav__links a[aria-current="page"] { color: var(--violet); font-weight: 500; }

.nav__cta { display: none; }
@media (min-width: 940px) { .nav__cta { display: inline-flex; } }

.nav__toggle {
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 9px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
@media (min-width: 940px) { .nav__toggle { display: none; } }

/* Mobiles Menü */
.nav__drawer {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--paper);
  padding: .8rem var(--gutter) 1.4rem;
}
.nav__drawer[data-open="true"] { display: block; }
@media (min-width: 940px) { .nav__drawer { display: none !important; } }

.nav__drawer a {
  display: block;
  padding: .72rem .2rem;
  font-size: 1.02rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.nav__drawer a[aria-current="page"] { color: var(--violet); font-weight: 500; }
.nav__drawer .btn { margin-top: 1.1rem; }

/* ---------- 9. Hero --------------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--on-ink);
  overflow: hidden;
  isolation: isolate;
}

.hero__mark {
  position: absolute;
  right: -7%;
  top: 50%;
  transform: translateY(-50%);
  width: min(52%, 560px);
  opacity: .1;
  color: var(--violet-light);
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 900px) { .hero__mark { right: -26%; width: 82%; opacity: .07; } }

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(3.4rem, 8vw, 6.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}

.hero h1 { color: #fff; max-width: 17ch; }
.hero h1 em { font-style: normal; color: var(--violet-light); }

.hero .lead { max-width: 48ch; }

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 3rem;
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--on-ink-border);
  width: 100%;
}
.hero__facts div { display: flex; flex-direction: column; gap: .1rem; }
.hero__facts .k {
  font-size: 1.65rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.hero__facts .v { font-size: var(--t-small); color: var(--on-ink-muted); }

/* ---------- 10. Karten ------------------------------------ */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: clamp(1.25rem, 2vw, 1.6rem);
  display: flex;
  flex-direction: column;
  gap: .7rem;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card--link:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.card h3 { margin-top: .25rem; }
.card p { font-size: .935rem; color: var(--muted); line-height: 1.6; }
.card .link-arrow { margin-top: auto; padding-top: .5rem; }

.card--ink {
  background: #171B2A;
  border-color: rgba(255,255,255,.09);
}
.card--ink h3 { color: #fff; }
.card--ink p { color: var(--on-ink-muted); }

/* ---------- 10b. Leistungsblock --------------------------- */
.svc { display: flex; flex-direction: column; gap: clamp(1.4rem, 2.6vw, 2.1rem); }
.svc__head { display: flex; gap: 1.1rem; align-items: flex-start; }
.svc__head .icon-box { width: 54px; height: 54px; border-radius: 13px; }
.svc__head .icon-box .icon { width: 26px; height: 26px; }
.svc__head h2 { margin-bottom: .55rem; }

.checks { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.checks li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .6rem;
  align-items: start;
  font-size: .935rem;
  color: var(--muted);
  line-height: 1.55;
}
.checks li::before {
  content: "";
  width: 19px; height: 19px;
  margin-top: .15rem;
  border-radius: 50%;
  background: var(--violet-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C30FD' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

/* ---------- 11. Prozess-Schritte -------------------------- */
.steps { counter-reset: step; display: grid; gap: 1rem; }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.15rem 1.3rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.step__n {
  counter-increment: step;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--violet-tint);
  color: var(--violet-deep);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.step__n::before { content: counter(step, decimal-leading-zero); }
.step h3 { font-size: 1.05rem; margin-bottom: .2rem; }
.step p { font-size: .93rem; color: var(--muted); }

/* ---------- 12. Portfolio --------------------------------- */
.work {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.work:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-2px); }

/* Demo-Ansichten sind keine Links — kein Hover-Anheben */
.work--static { cursor: default; }
.work--static:hover { border-color: var(--border); box-shadow: none; transform: none; }

.work__shot {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.work__badge {
  position: absolute;
  top: .7rem;
  left: .7rem;
  background: var(--warn-bg);
  color: var(--warn);
  border: 1px solid #E8C98A;
  border-radius: 6px;
  padding: .25rem .55rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.work__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.work__body { padding: 1.05rem 1.2rem 1.25rem; display: flex; flex-direction: column; gap: .45rem; }
.work__tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.work__tag {
  font-size: var(--t-micro);
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: .17rem .6rem;
}
.work h3 { font-size: 1.08rem; }
.work p { font-size: .9rem; color: var(--muted); }

/* Platzhalter, solange kein Screenshot vorliegt */
.work__shot--empty {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--violet-tint), var(--surface-2));
  color: var(--violet-400);
}
.work__shot--empty .icon { width: 42px; height: 42px; opacity: .5; }

/* ---------- 12b. Personen --------------------------------- */
.person {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 1.3rem;
}
.person__photo {
  width: 104px;
  height: 104px;
  border-radius: 11px;
  flex: none;
  overflow: hidden;
  background: var(--surface-2);
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Platzhalter, solange keine Fotos vorliegen — bewusst als Initialen,
   nicht als Stock-Portrait. */
.person__photo--empty {
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--violet), var(--violet-400));
}
.person__photo--empty span {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
}

.person__body { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.person__role { font-size: .84rem; font-weight: 500; color: var(--violet); }
.person__body > p:not(.person__role) { font-size: .935rem; color: var(--muted); line-height: 1.6; }
.person .link-arrow { margin-top: .25rem; word-break: break-word; }

/* Personenkarte auf dunklem Grund */
.person--ink { background: #171B2A; border-color: rgba(255,255,255,.09); }
.person--ink h3 { color: #fff; }
.person--ink .person__role { color: var(--violet-light); }
.person--ink .person__body > p:not(.person__role) { color: var(--on-ink-muted); }
.person--ink .person__photo { width: 84px; height: 84px; }

@media (max-width: 460px) {
  .person { flex-direction: column; }
  .person__photo { width: 82px; height: 82px; }
}

/* ---------- 13. Formular ---------------------------------- */
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-size: var(--t-small); font-weight: 500; color: var(--ink); }
.field .hint { font-size: var(--t-micro); color: var(--muted); }

.input, .select, .textarea {
  width: 100%;
  padding: .72rem .9rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-input);
  background: #fff;
  color: var(--text);
  font-size: .95rem;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(92,48,253,.13);
}
.textarea { min-height: 148px; resize: vertical; }
.select { appearance: none; background-image: none; cursor: pointer; }

.field[data-invalid="true"] .input,
.field[data-invalid="true"] .select,
.field[data-invalid="true"] .textarea { border-color: var(--bad); }
.field__error { font-size: var(--t-micro); color: var(--bad); display: none; }
.field[data-invalid="true"] .field__error { display: block; }

/* Auswahlfeld mit eigenem Pfeil (kein nice-select mehr) */
.select-wrap { position: relative; display: block; }
.select-wrap .icon {
  position: absolute;
  right: .8rem;
  top: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px;
  color: var(--muted);
  pointer-events: none;
}
.select-wrap .select { padding-right: 2.4rem; }

.form-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.field--full { grid-column: 1 / -1; }

.contact-grid {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-list { display: flex; flex-direction: column; gap: 1rem; margin-top: .3rem; }
.contact-list li { display: flex; gap: .85rem; align-items: center; }
.contact-list .icon-box { width: 40px; height: 40px; border-radius: 10px; }
.contact-list .icon-box .icon { width: 19px; height: 19px; }
.contact-list b { display: block; font-size: .78rem; color: var(--muted); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.contact-list a, .contact-list span { font-size: .95rem; color: var(--text); }
.contact-list a { color: var(--violet); }

.mini-steps { counter-reset: ms; display: flex; flex-direction: column; gap: .85rem; margin-top: .3rem; }
.mini-steps li { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; }
.mini-steps li::before {
  counter-increment: ms;
  content: counter(ms);
  width: 25px; height: 25px;
  border-radius: 50%;
  background: var(--violet-tint);
  color: var(--violet-deep);
  display: grid;
  place-items: center;
  font-size: .78rem;
  font-weight: 600;
  font-family: var(--font-display);
  margin-top: .1rem;
}
/* ::before, <b> und <span> sind drei Grid-Kinder — beide Textzeilen
   gehoeren in Spalte 2, sonst rutscht der Beschreibungstext in Spalte 1. */
.mini-steps b { grid-column: 2; font-size: .93rem; color: var(--ink); font-weight: 600; }
.mini-steps span { grid-column: 2; font-size: .86rem; color: var(--muted); line-height: 1.5; }

.form-note {
  border-radius: var(--r-input);
  padding: .8rem 1rem;
  font-size: var(--t-small);
  margin-bottom: 1.1rem;
  display: none;
}
.form-note[data-state="ok"]  { display: block; background: var(--ok-bg);  color: var(--ok); }
.form-note[data-state="bad"] { display: block; background: var(--bad-bg); color: var(--bad); }

/* ---------- 14. Footer ------------------------------------ */
.site-footer {
  background: var(--ink);
  color: var(--on-ink-muted);
  padding-block: clamp(2.8rem, 5vw, 4rem) 1.6rem;
}
.site-footer h4 {
  color: #fff;
  font-size: .82rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .9rem;
}
.site-footer a { color: var(--on-ink-muted); font-size: .93rem; }
.site-footer a:hover { color: #fff; }

.footer__grid {
  display: grid;
  gap: 2.2rem clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.footer__brand { display: flex; flex-direction: column; gap: .9rem; max-width: 34ch; }
.footer__brand .nav__brand { color: #fff; margin-right: 0; }
.footer__brand p { font-size: .93rem; line-height: 1.6; }

.footer__social { display: flex; gap: .55rem; }
.footer__social a {
  width: 38px; height: 38px;
  border-radius: 9px;
  border: 1px solid var(--on-ink-border);
  display: grid; place-items: center;
  color: var(--on-ink-muted);
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.footer__social a:hover { color: #fff; border-color: var(--violet-light); background: rgba(169,140,255,.1); }
.footer__social .icon { width: 18px; height: 18px; }

.footer__bar {
  margin-top: 2.6rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--on-ink-border);
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.6rem;
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-small);
}
.footer__bar nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* ---------- 15. Breadcrumb -------------------------------- */
.crumb {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(2.2rem, 4.5vw, 3.4rem);
}
.crumb h1 { margin-bottom: .5rem; }
.crumb ol { display: flex; flex-wrap: wrap; gap: .45rem; font-size: var(--t-small); color: var(--muted); }
.crumb ol li { display: flex; align-items: center; gap: .45rem; }
.crumb ol li + li::before { content: "/"; color: var(--border-strong); }

/* ---------- 16. Cookie-Banner ----------------------------- */
.cc {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  width: min(100% - 2rem, 660px);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  padding: 1.15rem 1.25rem 1.25rem;
  z-index: 90;
  display: none;
}
.cc[data-open="true"] { display: block; }
.cc h2 { font-size: 1.02rem; margin-bottom: .4rem; }
.cc p { font-size: var(--t-small); color: var(--muted); line-height: 1.6; }
.cc__actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.cc__actions .btn { padding: .62rem 1.15rem; font-size: .875rem; flex: 1 1 auto; }
.cc__detail { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); display: none; }
.cc__detail[data-open="true"] { display: block; }
.cc__opt { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem 0; }
.cc__opt input { margin-top: .28rem; accent-color: var(--violet); width: 17px; height: 17px; }
.cc__opt b { display: block; font-size: .9rem; color: var(--ink); }
.cc__opt span { font-size: var(--t-micro); color: var(--muted); }

/* ---------- 17. Back to top ------------------------------- */
.to-top {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s, background-color .18s ease;
  z-index: 55;
}
.to-top[data-show="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--violet-deep); }
.to-top .icon { width: 19px; height: 19px; }

/* ---------- 18. Hilfsklassen ------------------------------ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  left: .6rem; top: -100px;
  z-index: 100;
  background: var(--violet); color: #fff;
  padding: .6rem 1rem; border-radius: 0 0 8px 8px;
  transition: top .16s ease;
}
.skip-link:focus { top: 0; color: #fff; }

.prose p + p { margin-top: .9rem; }
.prose h2 { margin: 2.2rem 0 .7rem; }
.prose h3 { margin: 1.7rem 0 .5rem; }
.prose ul { margin: .7rem 0; padding-left: 1.2rem; list-style: disc; }
.prose li { margin-bottom: .35rem; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* Rechtstexte: eine schmale Spalte, klare Gliederung */
.legal { max-width: 74ch; }
.legal h2 { font-size: 1.5rem; margin: 2.6rem 0 .8rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal h3 { font-size: 1.15rem; margin: 1.9rem 0 .55rem; }
.legal h4 { font-size: .98rem; font-weight: 600; margin: 1.3rem 0 .35rem; color: var(--ink); font-family: var(--font-display); }
.legal p, .legal li { font-size: .95rem; line-height: 1.72; color: var(--text); }
.legal p + p { margin-top: .8rem; }
.legal ul { margin: .7rem 0 .9rem; padding-left: 1.25rem; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--violet); word-break: break-word; }

/* ---------- 19. Bewegung reduziert ------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- 20. Druck ------------------------------------- */
@media print {
  .site-header, .site-footer, .cc, .to-top, .hero__mark { display: none !important; }
  body { background: #fff; color: #000; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}