/* ============================================================
   Rimnex – öffentliche Startseite
   Dunkel & technisch, ein Akzent (Signalorange). Keine externen Ressourcen.
   ============================================================ */

@font-face {
  font-family: "Inter";
  src: url("/panel/assets/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --grund: #0b0d10;
  --flaeche: #12161b;
  --flaeche-2: #171c22;
  --linie: #232a33;
  --linie-hell: #2e3742;
  --text: #e8ecf1;
  --gedaempft: #8a96a3;
  --akzent: #ff6b1a;
  --akzent-hell: #ff8540;
  --akzent-schwach: rgba(255, 107, 26, 0.12);
  --gruen: #3ecf8e;
  --blau: #5aa9ff;
  --radius: 14px;
  --radius-klein: 8px;
  --breite: 1180px;
  --schatten: 0 20px 60px -20px rgba(0, 0, 0, 0.7);
  --schrift: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 16px/1.65 var(--schrift);
  font-feature-settings: "cv11", "ss01";
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }

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

.sprunglink {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--akzent); color: var(--grund); padding: 10px 16px; border-radius: var(--radius-klein);
  font-weight: 700; text-decoration: none;
}
.sprunglink:focus { top: 12px; }

.nur-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container { width: min(100% - 40px, var(--breite)); margin-inline: auto; }

/* ------------------------------------------------------------ Typografie */

h1, h2, h3 { margin: 0 0 .5em; line-height: 1.1; letter-spacing: -0.025em; font-weight: 780; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.12rem; letter-spacing: -0.01em; font-weight: 700; }

.akzent { color: var(--akzent); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--akzent); margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }

.einleitung { color: var(--gedaempft); font-size: 1.12rem; max-width: 62ch; }

.wortmarke {
  font-weight: 850; letter-spacing: .14em; font-size: 1.15rem; text-decoration: none; white-space: nowrap;
}
.wortmarke span { color: var(--akzent); }

/* ------------------------------------------------------------ Knöpfe */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 10px; border: 1px solid transparent;
  font: 650 .98rem/1 var(--schrift); text-decoration: none; cursor: pointer;
  transition: background-color .18s, border-color .18s, transform .18s, color .18s;
}
.knopf:active { transform: translateY(1px); }
.knopf-primaer { background: var(--akzent); color: #120800; }
.knopf-primaer:hover { background: var(--akzent-hell); }
.knopf-sekundaer { border-color: var(--linie-hell); color: var(--text); background: rgba(255,255,255,.02); }
.knopf-sekundaer:hover { border-color: var(--gedaempft); background: rgba(255,255,255,.05); }
.knopf-klein { padding: 9px 15px; font-size: .9rem; }
.knopf svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------ Kopfleiste */

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 13, 16, .78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.kopf.gescrollt { border-bottom-color: var(--linie); }
.kopf-innen { display: flex; align-items: center; gap: 28px; height: 68px; }
.kopf nav { margin-left: auto; }
.kopf nav ul { list-style: none; display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; }
.kopf nav a:not(.knopf) { text-decoration: none; color: var(--gedaempft); font-size: .94rem; font-weight: 520; }
.kopf nav a:not(.knopf):hover { color: var(--text); }

.menue-knopf {
  display: none; margin-left: auto; background: none; border: 1px solid var(--linie-hell);
  color: var(--text); border-radius: 10px; width: 44px; height: 44px; cursor: pointer;
  align-items: center; justify-content: center;
}
.menue-knopf svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .menue-knopf { display: inline-flex; }
  .kopf nav {
    position: fixed; inset: 68px 0 auto 0; background: var(--grund);
    border-bottom: 1px solid var(--linie); padding: 12px 20px 22px;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .kopf nav.offen { opacity: 1; transform: none; visibility: visible; }
  .kopf nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .kopf nav a:not(.knopf) { display: block; padding: 12px 4px; font-size: 1.05rem; }
  .kopf nav .knopf { margin-top: 10px; width: 100%; }
}

/* ------------------------------------------------------------ Hero */

.hero { position: relative; padding: 76px 0 90px; overflow: hidden; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 60% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 30%, #000 30%, transparent 75%);
}
.hero::after {
  content: ""; position: absolute; z-index: -1; width: 780px; height: 780px; right: -220px; top: -260px;
  background: radial-gradient(circle, rgba(255,107,26,.22), transparent 62%);
  pointer-events: none;
}
.hero-raster { display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: center; }
.hero h1 { margin-bottom: 22px; }
.hero .einleitung { font-size: clamp(1.05rem, 1.6vw, 1.22rem); margin-bottom: 32px; }
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.hero-hinweis { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--gedaempft); font-size: .92rem; }
.hero-hinweis span { display: inline-flex; align-items: center; gap: 7px; }
.hero-hinweis svg { width: 17px; height: 17px; color: var(--gruen); }

@media (max-width: 980px) {
  .hero { padding: 48px 0 64px; }
  .hero-raster { grid-template-columns: 1fr; gap: 48px; }
}

/* ------------------------------------------------------------ Attrappe (Panel) */

.buehne { position: relative; }
.attrappe {
  position: relative; background: var(--flaeche); border: 1px solid var(--linie-hell);
  border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden;
}
.attrappe-leiste {
  display: flex; align-items: center; gap: 7px; padding: 12px 14px;
  border-bottom: 1px solid var(--linie); background: var(--flaeche-2);
}
.attrappe-leiste i { width: 10px; height: 10px; border-radius: 50%; background: var(--linie-hell); }
.attrappe-leiste b { margin-left: 10px; font-size: .74rem; font-weight: 600; color: var(--gedaempft); letter-spacing: .02em; }
.attrappe-inhalt { display: grid; grid-template-columns: 52px 1fr; min-height: 318px; }
.attrappe-seite { border-right: 1px solid var(--linie); padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.attrappe-seite i { width: 22px; height: 6px; border-radius: 3px; background: var(--linie-hell); }
.attrappe-seite i.aktiv { background: var(--akzent); }
.attrappe-haupt { padding: 16px 18px; min-width: 0; }
.attrappe-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 10px; }
.attrappe-kopf strong { font-size: .92rem; }
.attrappe-kopf em { font-style: normal; font-size: .72rem; color: var(--gedaempft); }
.kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.kennzahl { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; }
.kennzahl small { display: block; font-size: .68rem; color: var(--gedaempft); }
.kennzahl strong { font-size: 1.25rem; font-weight: 760; letter-spacing: -.02em; }
.zeilen { display: grid; gap: 6px; }
.zeile {
  display: grid; grid-template-columns: 58px 1fr auto auto; gap: 10px; align-items: center;
  font-size: .76rem; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.02);
}
.zeile code { color: var(--gedaempft); font: 600 .72rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.zeile span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile b { font-weight: 650; color: var(--gedaempft); }
.pille {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px;
  font-size: .66rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.pille::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pille-gruen { color: var(--gruen); background: rgba(62,207,142,.1); }
.pille-orange { color: var(--akzent); background: var(--akzent-schwach); }
.pille-grau { color: var(--gedaempft); background: rgba(138,150,163,.12); }

.schwebekarte {
  position: absolute; background: rgba(23,28,34,.92); border: 1px solid var(--linie-hell);
  border-radius: 12px; padding: 12px 14px; box-shadow: var(--schatten); font-size: .8rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.schwebekarte small { display: block; color: var(--gedaempft); font-size: .7rem; }
.schwebekarte strong { font-weight: 700; }
.schwebe-bestellung { right: -24px; bottom: -40px; display: flex; gap: 11px; align-items: center; }
.schwebe-bestellung svg { width: 30px; height: 30px; color: var(--gruen); flex-shrink: 0; }
.schwebe-sync { left: -30px; top: -34px; }
.fortschritt { height: 5px; background: var(--linie); border-radius: 3px; margin-top: 8px; width: 150px; overflow: hidden; }
.fortschritt i { display: block; height: 100%; width: 82%; background: var(--akzent); border-radius: 3px; }

.buehne { margin: 34px 30px 40px 30px; }
.felge {
  position: absolute; width: 250px; height: 250px; right: -92px; top: -104px; z-index: -1;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.65));
}
.felge .speichen { transform-origin: 100px 100px; animation: drehen 48s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  .buehne { margin: 40px 16px 30px; }
  .schwebe-sync { left: -6px; top: -30px; }
  .schwebe-bestellung { right: -6px; bottom: -30px; }
  .felge { width: 190px; height: 190px; right: -40px; top: -80px; }
}
@media (max-width: 520px) {
  .kennzahlen { grid-template-columns: repeat(2, 1fr); }
  .kennzahl:nth-child(3) { display: none; }
  .zeile { grid-template-columns: 1fr auto; }
  .zeile code, .zeile b { display: none; }
  .schwebe-sync { display: none; }
  .attrappe-kopf em { display: none; }
}

/* ------------------------------------------------------------ Vertrauensleiste */

.vertrauen { border-block: 1px solid var(--linie); background: rgba(255,255,255,.012); }
.vertrauen ul {
  list-style: none; margin: 0; padding: 22px 0; display: grid; gap: 14px 28px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.vertrauen li { display: flex; align-items: center; gap: 12px; font-size: .92rem; color: var(--gedaempft); }
.vertrauen svg { width: 22px; height: 22px; color: var(--akzent); flex-shrink: 0; }
.vertrauen strong { color: var(--text); font-weight: 650; }
@media (max-width: 900px) { .vertrauen ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .vertrauen ul { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ Abschnitte */

.abschnitt { padding: 104px 0; }
.abschnitt-kopf { max-width: 760px; margin-bottom: 52px; }
.abschnitt-kopf.mittig { margin-inline: auto; text-align: center; }
.abschnitt-kopf.mittig .einleitung { margin-inline: auto; }
.abschnitt-dunkel { background: linear-gradient(180deg, var(--flaeche) 0%, var(--grund) 100%); border-top: 1px solid var(--linie); }
@media (max-width: 700px) { .abschnitt { padding: 72px 0; } .abschnitt-kopf { margin-bottom: 36px; } }

/* ------------------------------------------------------------ Funktionen */

.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.karte {
  position: relative; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 26px 24px 24px; transition: border-color .2s, transform .2s, background-color .2s;
}
.karte:hover { border-color: var(--linie-hell); background: var(--flaeche-2); transform: translateY(-2px); }
.karte-symbol {
  width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 18px;
  background: var(--akzent-schwach); color: var(--akzent); border: 1px solid rgba(255,107,26,.25);
}
.karte-symbol svg { width: 22px; height: 22px; }
.karte p { color: var(--gedaempft); font-size: .95rem; margin: 0; }
.karte ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.karte li { color: var(--gedaempft); font-size: .9rem; padding-left: 18px; position: relative; }
.karte li::before {
  content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--linie-hell);
}
.karte-bald { border-style: dashed; background: transparent; }
.karte-bald .karte-symbol { background: rgba(138,150,163,.08); color: var(--gedaempft); border-color: var(--linie-hell); }
.marke-bald {
  position: absolute; top: 22px; right: 20px; font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gedaempft); border: 1px solid var(--linie-hell);
  padding: 4px 8px; border-radius: 999px;
}

/* ------------------------------------------------------------ Ablauf */

.ablauf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: schritt; }
.ablauf li { position: relative; padding-top: 64px; }
.ablauf li::before {
  counter-increment: schritt; content: counter(schritt, decimal-leading-zero);
  position: absolute; top: 0; left: 0; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; font-weight: 800; font-size: .95rem;
  background: var(--flaeche); border: 1px solid var(--linie-hell); color: var(--akzent);
}
.ablauf li:not(:last-child)::after {
  content: ""; position: absolute; top: 23px; left: 58px; right: -8px; height: 1px;
  background: linear-gradient(90deg, var(--linie-hell), transparent);
}
.ablauf p { color: var(--gedaempft); font-size: .95rem; }
@media (max-width: 900px) {
  .ablauf { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .ablauf li::after { display: none; }
}
@media (max-width: 520px) { .ablauf { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ Zweispaltig (eBay, Sicherheit) */

.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.zweispaltig.umgekehrt > :first-child { order: 2; }
@media (max-width: 980px) {
  .zweispaltig { grid-template-columns: 1fr; gap: 40px; }
  .zweispaltig.umgekehrt > :first-child { order: 0; }
}

.hakenliste { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.hakenliste li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; color: var(--gedaempft); }
.hakenliste svg { width: 22px; height: 22px; color: var(--gruen); margin-top: 2px; }
.hakenliste strong { color: var(--text); font-weight: 650; }

.hinweis-box {
  margin-top: 26px; padding: 14px 16px; border-radius: 10px; font-size: .9rem; color: var(--gedaempft);
  background: rgba(90,169,255,.06); border: 1px solid rgba(90,169,255,.22);
  display: grid; grid-template-columns: 20px 1fr; gap: 10px;
}
.hinweis-box svg { width: 20px; height: 20px; color: var(--blau); margin-top: 2px; }

.sync-karte { background: var(--flaeche); border: 1px solid var(--linie-hell); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; }
.sync-kopf { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--linie); }
.sync-kopf strong { font-size: .95rem; }
.sync-liste { list-style: none; margin: 0; padding: 8px; }
.sync-liste li {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center;
  padding: 11px 12px; border-radius: 10px; font-size: .88rem;
}
.sync-liste li + li { border-top: 1px solid var(--linie); border-radius: 0; }
.sync-liste .sync-symbol { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--flaeche-2); color: var(--gedaempft); }
.sync-liste .sync-symbol svg { width: 18px; height: 18px; }
.sync-liste small { display: block; color: var(--gedaempft); font-size: .76rem; }
.sync-fuss { display: flex; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--linie); background: var(--flaeche-2); font-size: .8rem; color: var(--gedaempft); }

.schild-grafik {
  position: relative; aspect-ratio: 1 / .78; border-radius: var(--radius); border: 1px solid var(--linie);
  background:
    radial-gradient(circle at 50% 45%, rgba(255,107,26,.16), transparent 58%),
    var(--flaeche);
  display: grid; place-items: center; overflow: hidden;
}
.schild-grafik svg { width: 62%; height: auto; }

/* ------------------------------------------------------------ Zielgruppen */

.gruppen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gruppe { padding: 28px 26px; border-radius: var(--radius); border: 1px solid var(--linie); background: var(--flaeche); }
.gruppe h3 { display: flex; align-items: center; gap: 10px; }
.gruppe h3 svg { width: 22px; height: 22px; color: var(--akzent); }
.gruppe p { color: var(--gedaempft); font-size: .95rem; margin: 0; }
@media (max-width: 900px) { .gruppen { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ FAQ */

.faq { max-width: 820px; margin-inline: auto; display: grid; gap: 10px; }
.faq details { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; }
.faq details[open] { border-color: var(--linie-hell); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 56px 18px 22px; font-weight: 620; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--gedaempft); border-bottom: 2px solid var(--gedaempft);
  transform: rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details > div { padding: 0 22px 20px; color: var(--gedaempft); }
.faq details > div p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ Zugang / Formular */

.zugang-raster { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
@media (max-width: 980px) { .zugang-raster { grid-template-columns: 1fr; gap: 36px; } }

.testphase {
  margin-top: 28px; padding: 22px; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255,107,26,.16), rgba(255,107,26,.03));
  border: 1px solid rgba(255,107,26,.3);
}
.testphase strong { display: block; font-size: 1.6rem; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 6px; }
.testphase p { color: var(--gedaempft); margin: 0; font-size: .95rem; }

.formular { background: var(--flaeche); border: 1px solid var(--linie-hell); border-radius: var(--radius); padding: 30px; box-shadow: var(--schatten); }
@media (max-width: 520px) { .formular { padding: 22px 18px; } }
.feld-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .feld-raster { grid-template-columns: 1fr; } }
.feld { display: grid; gap: 7px; }
.feld-voll { grid-column: 1 / -1; }
.feld-unten { align-content: end; padding-bottom: 10px; }
.feld label { font-size: .88rem; font-weight: 600; }
.feld label em { font-style: normal; color: var(--akzent); }
.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"], .feld select, .feld textarea {
  width: 100%; font: 400 1rem/1.4 var(--schrift); color: var(--text);
  background: var(--grund); border: 1px solid var(--linie-hell); border-radius: 10px; padding: 12px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.feld textarea { min-height: 116px; resize: vertical; }
.feld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gedaempft) 50%), linear-gradient(135deg, var(--gedaempft) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-schwach); }
.feld input::placeholder, .feld textarea::placeholder { color: #5d6875; }
.auswahl { display: flex; gap: 11px; align-items: flex-start; font-size: .92rem; color: var(--gedaempft); cursor: pointer; }
.auswahl input { width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--akzent); flex-shrink: 0; }
.auswahl a { color: var(--text); }
.formular .knopf-primaer { width: 100%; margin-top: 22px; padding: 15px; }
.formular-fuss { margin: 12px 0 0; font-size: .82rem; color: var(--gedaempft); text-align: center; }
.honigtopf { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.meldung { border-radius: 12px; padding: 14px 16px; margin-bottom: 20px; font-size: .95rem; display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.meldung svg { width: 22px; height: 22px; }
.meldung ul { margin: 4px 0 0; padding-left: 18px; }
.meldung-ok { background: rgba(62,207,142,.08); border: 1px solid rgba(62,207,142,.3); }
.meldung-ok svg { color: var(--gruen); }
.meldung-fehler { background: rgba(255,90,90,.08); border: 1px solid rgba(255,90,90,.3); }
.meldung-fehler svg { color: #ff6b6b; }

/* ------------------------------------------------------------ Fuß */

.fuss { border-top: 1px solid var(--linie); padding: 48px 0 40px; color: var(--gedaempft); font-size: .9rem; }
.fuss-raster { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: flex-start; }
.fuss p { margin: 10px 0 0; max-width: 40ch; }
.fuss nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.fuss nav a { text-decoration: none; }
.fuss nav a:hover { color: var(--text); }
.fuss-unten { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--linie); font-size: .82rem; }

/* ------------------------------------------------------------ Rechtsseiten */

.rechtstext { max-width: 780px; padding: 64px 0 96px; }
.rechtstext h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 28px; }
.rechtstext h2 { font-size: 1.3rem; margin: 40px 0 12px; letter-spacing: -.01em; }
.rechtstext h3 { font-size: 1.02rem; margin: 26px 0 8px; }
.rechtstext p, .rechtstext li { color: #c3cbd4; }
.rechtstext a { color: var(--akzent); }
.rechtstext address { font-style: normal; color: #c3cbd4; line-height: 1.8; }
.rechtstext .stand { color: var(--gedaempft); font-size: .9rem; margin-top: 48px; }

/* ------------------------------------------------------------ Einblenden beim Scrollen */

.js .einblenden { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .einblenden.sichtbar { opacity: 1; transform: none; }

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