/* Beute — Website „Werkstattbuch", Ausrichtung nach oldtomcapital.com (12.07.).
   Ein Grotesk (Inter) für alles, keine Serifen. Keine farbig abgesetzten
   Kästen mehr: eine ruhige Papierfläche, Inhalte durch Haarlinien und
   Weißraum getrennt (redaktionelles Raster). Scharfe Formen, flache
   Navileiste, sachliche Versal-Marken. Fotos und Videos bleiben.
   Warme Palette wie bisher (deckt sich mit dem Vorbild). */

@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Farben — Hell (warmes Papier) */
  --fond: #F7F3EB; --flaeche: #F0E9DA; --linie: #E7DECB;
  --text: #1F1C18; --text-sek: #6B6558;
  --marke-text: #8A5E0E; --akzent: #E9772E;
  --ok: #2E7D46; --warn: #C6820E; --alarm: #C23B22;

  /* Über dunklen Bühnen */
  --auf-dunkel: #EDECE7; --auf-dunkel-sek: rgba(237, 236, 231, .7);
  --dunkel-linie: rgba(237, 236, 231, .22);

  /* Typografie: EIN Grotesk */
  --grotesk: "Inter", -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Skala */
  --fs-display: clamp(2.6rem, 6.6vw, 5.4rem);
  --fs-h1: clamp(2rem, 4.4vw, 3.4rem);
  --fs-h2: clamp(1.7rem, 3.2vw, 2.6rem);
  --fs-h3: 1.35rem; --fs-body: 1.0625rem; --fs-gross: 1.25rem;
  --fs-small: .9375rem; --fs-label: .75rem; --fs-nav: .875rem;
  --lh-tight: 1.02; --lh-body: 1.6;
  --spur: .16em;   /* Versal-Marken */

  /* Raster / Formen: Inhalte redaktionell scharf, Bilder + Glas weich
     (Bild-Umgang nach Helios-Referenz, Maltes Ansage 13.07.) */
  --space: 8px; --radius: 2px; --radius-bild: 28px; --radius-glas: 20px;
  --maxw: 1200px;

  /* Glas auf Bildern (Text-Tafeln + schwebende Leiste) */
  --glas-leiste: rgba(255, 255, 255, .12);
  --glas-leiste-linie: rgba(255, 255, 255, .18);
  --glas-tafel: rgba(18, 16, 13, .4);
  --glas-chip: rgba(255, 255, 255, .14);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #1B1A16; --flaeche: #232019; --linie: #3D382F;
    --text: #EDECE7; --text-sek: #A79E8C;
    --marke-text: #E4A62E; --akzent: #F1874A;
    --ok: #58B36C; --warn: #E6A828; --alarm: #E56A50;
    --auf-dunkel: #EDECE7; --auf-dunkel-sek: rgba(237, 236, 231, .7);
    --dunkel-linie: rgba(237, 236, 231, .18);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  background: var(--fond); color: var(--text);
  font-family: var(--grotesk); font-size: var(--fs-body);
  line-height: var(--lh-body); -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05" 1, "ss01" 1; overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--grotesk); font-weight: 500; line-height: var(--lh-tight); letter-spacing: -.025em; }
a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--linie); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
img, video { max-width: 100%; display: block; }

.rahmen { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }
section { padding: clamp(56px, 8vw, 96px) 0; }

/* redaktionelle Versal-Marke (Augenbraue / Label / FIG.) */
.label, .augenbraue, .kicker {
  font-size: var(--fs-label); letter-spacing: var(--spur); text-transform: uppercase;
  font-weight: 500; color: var(--text-sek); font-feature-settings: "tnum" 1;
}

/* Sprung zum Inhalt */
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--text); color: var(--fond); padding: 12px 20px; font-weight: 500; text-decoration: none; transition: top .2s ease; }
.skip:focus { top: 16px; color: var(--fond); }

/* Scroll-Enthüllung */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
  .js [data-reveal].sichtbar { opacity: 1; transform: none; }
}

/* ---------- Knöpfe: sachliche Versal-Marken, scharfe Form ---------- */
.knopf {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px;
  padding: 0 28px; border: 1px solid var(--text); background: var(--text); color: var(--fond);
  font-family: var(--grotesk); font-size: var(--fs-nav); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  border-radius: 999px; transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.knopf:hover { background: transparent; color: var(--text); border-color: var(--text); }
.knopf.geist { background: transparent; border-color: currentColor; color: var(--auf-dunkel); }
.knopf.geist:hover { background: var(--auf-dunkel); color: #1B1A16; border-color: var(--auf-dunkel); }
.knopf-leise {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: var(--fs-nav); font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: inherit; text-decoration: none;
}
.knopf-leise::after { content: "→"; transition: transform .18s ease; }
.knopf-leise:hover::after { transform: translateX(5px); }

/* ---------- Schwebende Glas-Leiste (Helios: sehr transparent + blur) ---------- */
header.kopf { position: fixed; top: clamp(12px, 2vw, 20px); left: 0; right: 0; z-index: 50; pointer-events: none; }
.kopf .leiste {
  pointer-events: auto;
  max-width: var(--maxw); margin: 0 auto; width: calc(100% - clamp(24px, 5vw, 64px));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 8px 8px 22px; border-radius: 999px;
  background: var(--glas-leiste); border: 1px solid var(--glas-leiste-linie);
  -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px);
  transition: background .3s ease, border-color .3s ease;
}
header.kopf.gescrollt .leiste { background: color-mix(in srgb, var(--fond) 66%, transparent); border-color: color-mix(in srgb, var(--linie) 80%, transparent); }
.wortmarke { display: flex; align-items: center; gap: 12px; font-size: 1.15rem; font-weight: 500; letter-spacing: -.01em; color: var(--auf-dunkel); text-decoration: none; transition: color .3s ease; }
header.kopf.gescrollt .wortmarke, header.kopf.gescrollt nav a { color: var(--text); }
.wortmarke img { width: 26px; height: 26px; }
.kopf nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.kopf nav a { font-size: var(--fs-nav); text-decoration: none; color: var(--auf-dunkel); letter-spacing: var(--spur); text-transform: uppercase; font-weight: 500; opacity: .82; padding: 10px 0; transition: opacity .16s ease, color .3s ease; }
.kopf nav a:hover { opacity: 1; }
.kopf nav a.nav-cta {
  opacity: 1; padding: 12px 22px; border-radius: 999px;
  background: var(--glas-chip); border: 1px solid var(--glas-leiste-linie);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  transition: background .2s ease, color .3s ease, border-color .3s ease;
}
.kopf nav a.nav-cta:hover { background: var(--auf-dunkel); color: #1B1A16; border-color: var(--auf-dunkel); }
header.kopf.gescrollt nav a.nav-cta { background: var(--text); color: var(--fond); border-color: var(--text); }
header.kopf.gescrollt nav a.nav-cta:hover { color: var(--fond); }

/* ---------- Hero: volle Videobühne ---------- */
.hero { position: relative; min-height: min(94vh, 900px); display: flex; align-items: flex-end; padding: 0; color: var(--auf-dunkel); isolation: isolate; }
.hero .buehne { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero .buehne img, .hero .buehne video { width: 100%; height: 100%; object-fit: cover; }
.hero .schleier { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(15,14,11,.86) 0%, rgba(15,14,11,.5) 40%, rgba(15,14,11,.34) 70%, rgba(15,14,11,.44) 100%); }
.hero .rahmen { width: 100%; padding-top: 128px; padding-bottom: clamp(44px, 6vw, 76px); }
.hero .kicker { color: var(--auf-dunkel-sek); margin-bottom: 22px; display: block; }
.hero h1 { font-size: var(--fs-display); max-width: 15ch; margin-bottom: 24px; color: #FBFAF6; letter-spacing: -.035em; }
.hero .unterzeile { font-size: var(--fs-gross); color: var(--auf-dunkel); margin-bottom: 34px; max-width: 42ch; }
.knopfzeile { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.hero .marker { margin-top: 34px; }

/* Marker als Glas-Chips AUF dem Hero-Bild (Helios-Muster) */
.marker { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: var(--fs-label); letter-spacing: var(--spur); text-transform: uppercase; color: var(--auf-dunkel); }
.marker span {
  display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 999px;
  background: var(--glas-chip); border: 1px solid var(--glas-leiste-linie);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}

/* Glas-Infokarte im Hero (Helios: „Latest project"-Karte) */
.hero-karte {
  position: absolute; right: clamp(20px, 5vw, 56px); bottom: clamp(44px, 6vw, 76px);
  width: min(320px, 28vw);
  padding: 20px 22px; border-radius: var(--radius-glas);
  background: var(--glas-tafel); border: 1px solid var(--glas-leiste-linie);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  color: var(--auf-dunkel); text-decoration: none; display: block;
  transition: background .25s ease, transform .25s ease;
}
.hero-karte:hover { background: rgba(18, 16, 13, .55); transform: translateY(-3px); }
.hero-karte .label { color: var(--auf-dunkel-sek); display: block; margin-bottom: 10px; }
.hero-karte strong { font-size: var(--fs-gross); font-weight: 500; letter-spacing: -.015em; line-height: 1.3; display: block; }
.hero-karte .pfeil { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: var(--fs-label); letter-spacing: var(--spur); text-transform: uppercase; color: var(--auf-dunkel-sek); }
.hero-karte .pfeil::after { content: "→"; transition: transform .18s ease; }
.hero-karte:hover .pfeil::after { transform: translateX(4px); }

.scroll-hinweis { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: var(--auf-dunkel-sek); font-size: var(--fs-label); letter-spacing: var(--spur); text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scroll-hinweis::after { content: "↓"; animation: sinken 1.8s ease-in-out infinite; }
@keyframes sinken { 0%,100%{transform:translateY(0);opacity:.6} 50%{transform:translateY(5px);opacity:1} }

/* ---------- Zahlenstreifen: Haarlinien-Raster, keine Fläche ---------- */
.zahlen { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: 0; }
.zahlen .rahmen { padding-top: 24px; }
.zahlen .kopfzeile { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 22px; }
.zahlen .quelle { font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--text-sek); }
.zahlen .gitter { display: grid; grid-template-columns: repeat(4, 1fr); }
.zahlen .zelle { padding: 30px 28px 34px 0; border-top: 1px solid var(--linie); }
.zahlen .zelle + .zelle { padding-left: 28px; border-left: 1px solid var(--linie); }
.zahlen .wert { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.zahlen .etikett { display: block; margin-top: 14px; color: var(--text-sek); font-size: var(--fs-small); max-width: 22ch; }

/* ---------- Funktionen: bild-geführte Galerie ---------- */
.koennen { border-top: 1px solid var(--linie); }
.galerie-kopf { max-width: 48ch; margin-bottom: clamp(36px, 5vw, 60px); }
.galerie-kopf .label { display: block; margin-bottom: 16px; }
.galerie-kopf .lead { font-size: var(--fs-gross); color: var(--text-sek); }
.galerie { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 4vw, 64px) clamp(28px, 4vw, 64px); }
.feat:nth-child(even) { margin-top: clamp(0px, 7vw, 84px); }
.feat .rahmen-bild { position: relative; overflow: hidden; border-radius: var(--radius-bild); background: var(--flaeche); aspect-ratio: 4 / 3; }
.feat .rahmen-bild img, .feat .rahmen-bild video { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22,1,.36,1); will-change: transform; }
.feat:hover .rahmen-bild img, .feat:hover .rahmen-bild video,
.feat:focus-within .rahmen-bild img, .feat:focus-within .rahmen-bild video { transform: scale(1.045); }
.feat:focus-visible { outline: none; }
.feat:focus-visible .rahmen-bild { outline: 2px solid var(--akzent); outline-offset: 3px; }

/* Text liegt AUF dem Bild: Glas-Tafel am unteren Rand (Helios-Muster) */
.feat .tafel {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  padding: 18px 20px; border-radius: var(--radius-glas);
  background: var(--glas-tafel); border: 1px solid var(--glas-leiste-linie);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  color: var(--auf-dunkel);
}
.feat .titel { font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 500; letter-spacing: -.015em; color: #FBFAF6; }
.feat .lead { color: var(--auf-dunkel-sek); font-size: var(--fs-small); margin-top: 6px; max-width: 46ch; }
.feat .mehr { color: var(--auf-dunkel); font-size: var(--fs-small); max-width: 48ch; }
@media (hover: hover) {
  .feat .mehr { max-height: 0; opacity: 0; margin-top: 0; overflow: hidden;
    transition: max-height .6s cubic-bezier(.22,1,.36,1), opacity .45s ease, margin-top .6s cubic-bezier(.22,1,.36,1); }
  .feat:hover .mehr, .feat:focus-within .mehr { max-height: 8em; opacity: 1; margin-top: 10px; }
}
/* „Die Bilder legen sich auf die Seite" — sanftes Einschweben beim Scrollen */
@media (prefers-reduced-motion: no-preference) {
  .js .feat[data-reveal] { opacity: 0; transform: translateY(48px) rotate(-1.5deg) scale(1.035); transform-origin: 50% 100%;
    transition: opacity .95s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1); }
  .js .feat:nth-child(even)[data-reveal] { transform: translateY(48px) rotate(1.5deg) scale(1.035); }
  .js .feat[data-reveal].sichtbar { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}

/* ---------- Die Screens (echte Bildschirme, abwechselnd) ----------
   Der Screenshot steht in einem schmalen dunklen Geräterahmen: er trennt
   die helle App-Fläche von der hellen Papierfläche der Seite, sonst
   verschwimmen beide ineinander. */
.screens { border-top: 1px solid var(--linie); }
.screen {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 88px); align-items: center;
  padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--linie);
}
.screen:first-of-type { border-top: none; padding-top: 0; }
.screen.kehrseite .geraet { order: 2; }
.geraet {
  justify-self: center; width: min(300px, 78vw);
  padding: 10px; border-radius: 42px;
  background: #14120E; border: 1px solid var(--linie);
  box-shadow: 0 26px 60px -28px rgba(20, 18, 14, .55);
}
.geraet img { width: 100%; border-radius: 32px; }
.screen-text .nummer {
  display: block; font-family: var(--mono); font-size: var(--fs-label);
  letter-spacing: var(--spur); color: var(--text-sek); margin-bottom: 14px;
}
.screen-text h3 { font-size: var(--fs-h2); margin-bottom: 16px; }
.screen-text .lead { font-size: var(--fs-gross); margin-bottom: 14px; max-width: 40ch; }
.screen-text p:not(.lead) { color: var(--text-sek); max-width: 56ch; }

/* ---------- Und außerdem (Featureliste ohne Bild) ---------- */
.ausserdem { border-top: 1px solid var(--linie); }
.ausserdem .gitter {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(28px, 4vw, 56px);
}
.ausserdem .posten { padding: 26px 0 30px; border-top: 1px solid var(--linie); }
.ausserdem .posten h3 { font-size: 1.15rem; margin-bottom: 8px; }
.ausserdem .posten p { color: var(--text-sek); font-size: var(--fs-small); max-width: 34ch; }

@media (max-width: 860px) {
  .screen { grid-template-columns: 1fr; gap: 28px; justify-items: start; }
  .screen.kehrseite .geraet { order: 0; }
  .geraet { justify-self: start; }
  .ausserdem .gitter { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ausserdem .gitter { grid-template-columns: 1fr; }
}

/* ---------- Fragen (FAQ) ---------- */
.fragen { border-top: 1px solid var(--linie); }
.fragen .label { display: block; margin-bottom: clamp(24px, 3vw, 40px); }
.faq { max-width: 820px; }
.faq details { border-top: 1px solid var(--linie); padding: 20px 0; }
.faq details:last-child { border-bottom: 1px solid var(--linie); }
.faq summary { cursor: pointer; font-weight: 500; font-size: var(--fs-gross); letter-spacing: -.01em; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--text-sek); transition: transform .2s ease; line-height: 1; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--text-sek); margin-top: 14px; max-width: 68ch; }

/* ---------- Abschluss: kein Kasten, nur Linien ---------- */
.abschluss { text-align: center; border-top: 1px solid var(--linie); }
.abschluss .box { padding: clamp(20px, 3vw, 40px) 0; }
.abschluss .augenbraue { display: block; margin-bottom: 22px; }
.abschluss h2 { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 30px; max-width: 22ch; margin-inline: auto; letter-spacing: -.03em; }
.abschluss .versprechen { font-size: var(--fs-gross); max-width: 60ch; margin-inline: auto; }
.abschluss .beta { color: var(--text-sek); font-size: var(--fs-body); margin-top: 26px; }

footer { border-top: 1px solid var(--linie); padding: 44px 0; color: var(--text-sek); font-size: var(--fs-small); }
footer .rahmen { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
footer .fuss-marke { display: flex; align-items: center; gap: 10px; color: var(--text); }
footer .fuss-marke img { width: 22px; height: 22px; }
footer .fuss-links { display: flex; gap: 22px; flex-wrap: wrap; font-size: var(--fs-label); letter-spacing: var(--spur); text-transform: uppercase; }
footer a { color: var(--text-sek); text-decoration: none; }
footer a:hover { color: var(--text); }

/* ---------- Bewegung aus ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .feat:hover .rahmen-bild img, .feat:hover .rahmen-bild video { transform: none; }
  .scroll-hinweis::after { animation: none; }
}

/* ---------- Responsiv ---------- */
@media (max-width: 900px) {
  .zahlen .gitter { grid-template-columns: 1fr 1fr; }
  .zahlen .zelle:nth-child(2) { border-left: 0; }
  .zahlen .zelle:nth-child(3) { border-left: 0; }
  .galerie { grid-template-columns: 1fr; gap: clamp(40px, 9vw, 64px); }
  .feat:nth-child(even) { margin-top: 0; }
  .feat .rahmen-bild { aspect-ratio: 4 / 3; }
  .hero { min-height: 90vh; }
  .hero-karte { display: none; }
}
@media (max-width: 700px) {
  .feat .tafel { left: 8px; right: 8px; bottom: 8px; padding: 14px 16px; }
}
@media (max-width: 560px) {
  .kopf nav a:not(.nav-cta) { display: none; }
  .zahlen .gitter { grid-template-columns: 1fr; }
  .zahlen .zelle + .zelle { border-left: 0; padding-left: 0; }
  .knopfzeile { width: 100%; flex-direction: column; align-items: stretch; }
  .knopfzeile .knopf { width: 100%; justify-content: center; }
  .knopfzeile .knopf-leise { justify-content: center; }
  .scroll-hinweis { display: none; }
}


/* ---------- Der Aufriss: die App selbst, kein Nachbau ---------- */
.aufriss { padding: clamp(64px, 8vw, 120px) 0; background: var(--fond); }
.aufriss-gitter {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.aufriss-text h2 {
  font-size: var(--fs-h2); letter-spacing: -.015em; margin: 16px 0 20px;
  max-width: 18ch;
}
.aufriss-text p { color: var(--text-sek); max-width: 46ch; }
.aufriss-text p + p { margin-top: 14px; }
.aufriss-bild { margin: 0; }
.aufriss-bild img {
  width: 100%; max-width: 420px; display: block; border-radius: var(--radius-bild);
  border: 1px solid var(--linie);
}
.aufriss-bild figcaption {
  margin-top: 14px; font-size: var(--fs-small); color: var(--text-sek); max-width: 42ch;
}
@media (max-width: 900px) {
  .aufriss-gitter { grid-template-columns: 1fr; }
  .aufriss-bild img { max-width: 100%; }
}

/* Unterseiten: Impressum, Datenschutz, Hilfe (28.09.2026). Die Navileiste
   steht dort von Anfang an auf Papier, weil kein Video-Hero darunter liegt. */
.unterseite main { padding-top: clamp(112px, 14vw, 150px); }
.recht { max-width: 780px; padding-bottom: clamp(56px, 8vw, 96px); }
.recht h1 { font-size: var(--fs-h1); margin: 14px 0 18px; }
.recht .vorspann { font-size: var(--fs-gross); max-width: 62ch; }
.recht h2 { font-size: var(--fs-h3); letter-spacing: -.015em; margin: 48px 0 12px; padding-top: 24px; border-top: 1px solid var(--linie); }
.recht h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.005em; margin: 26px 0 6px; }
.recht p, .recht li { color: var(--text-sek); max-width: 68ch; }
.recht p + p { margin-top: 10px; }
.recht ul { padding-left: 20px; display: grid; gap: 6px; margin: 8px 0 10px; }
.recht address { font-style: normal; line-height: 1.7; }
.recht a { color: var(--text); text-decoration-color: var(--linie); }
.recht .faq { margin-top: 36px; }
.recht .stand { margin-top: 40px; font-size: var(--fs-small); }
.wortmarke img, footer .fuss-marke img { border-radius: 22%; }