/* ====================  css/seiten.css  ====================
   Ergaenzt welt.css um alles, was eine Website mit vielen Seiten braucht:
   das Hauptmenue in vier Zielen, die vier Tueren der Startseite, Fragen und
   Antworten, die Befund-Landeseite und den Fuss als Seitenverzeichnis.
   Dieselbe Sprache wie welt.css: Haarlinien, keine Glasflaechen, keine
   Verlaeufe ausser an h1 em, ein Radius von 2px. */

/* ---------- Hauptmenue ----------
   Vier Knoepfe, jeder oeffnet ein Popover unter sich. Popover statt Hover:
   funktioniert mit Tastatur und Finger gleich, und der Browser liefert
   Schliessen per Escape und Klick daneben selbst. */
.hauptnav{ display: flex; gap: clamp(18px, 2vw, 30px); margin-left: clamp(8px, 1.6vw, 24px) }
.nav-knopf{
  /* font: inherit reicht nicht: Chrome setzt bei <button> text-transform und
     letter-spacing im eigenen Stylesheet zurueck - die Knoepfe standen sonst in
     gemischter Schreibung neben dem versalen "Kostenloser Befund". */
  font: inherit; text-transform: inherit; letter-spacing: inherit;
  background: none; border: 0; cursor: pointer;
  padding: 0 0 4px; border-bottom: 1px solid transparent;
  color: var(--text-leise);
  transition: color .14s linear, border-color .14s linear;
}
.nav-knopf:hover, .nav-knopf:focus-visible, .nav-knopf[aria-expanded="true"]{
  color: var(--text); border-bottom-color: var(--linie);
}
.nav-knopf.ist-hier{ color: var(--text); border-bottom-color: var(--papier) }
.nav-knopf:focus-visible, .nav-menue:focus-visible{ outline: 2px solid var(--papier); outline-offset: 3px }

.nav-menue{
  display: none; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer;
  background: none; border: 1px solid var(--linie); border-radius: 2px;
  padding: 8px 14px; color: var(--text); margin-left: 20px;
}
@media (max-width: 1180px){
  .hauptnav{ display: none }
  .nav-menue{ display: block }
}
@media (max-width: 820px){ .nav-menue{ margin-left: auto } }

/* Die Klapptafel. Nicht in Versalien: hier wird gelesen, nicht beschriftet. */
.nav-tafel{
  position: fixed; inset: auto;
  position-area: bottom span-right;
  margin: 14px 0 0;
  width: min(340px, calc(100vw - 2 * var(--rand)));
  padding: 8px 20px;
  border: 1px solid var(--linie); border-radius: 2px;
  background: rgba(5,6,12,.97);
  color: var(--text); pointer-events: auto;
  opacity: 0;
  transition: opacity .16s linear, display .16s allow-discrete, overlay .16s allow-discrete;
}
.nav-tafel:popover-open{ opacity: 1 }
@starting-style{ .nav-tafel:popover-open{ opacity: 0 } }
@supports not (anchor-name: --x){
  .nav-tafel{ top: calc(var(--kopf-h) + 8px); right: var(--rand); left: auto }
}
.nav-tafel ul{ list-style: none }
.nav-tafel a, .nav-tafel .folgt{
  display: block; padding: 11px 0 11px 14px;
  border-left: 1px solid transparent; text-decoration: none;
}
.nav-tafel a b, .folgt b{ display: block; font-weight: 500; font-size: .95rem; color: var(--text) }
.nav-tafel a span, .folgt span{ display: block; font-size: .82rem; color: var(--text-leise); line-height: 1.45 }
.nav-tafel a:hover{ border-left-color: var(--linie) }
.nav-tafel a[aria-current]{ border-left-color: var(--text) }
.nav-tafel a:focus-visible{ outline: 2px solid var(--papier); outline-offset: 2px }
.folgt{ opacity: .5; cursor: default }
.folgt small{ font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise) }

/* Auf dem Telefon: alle Ziele untereinander in einer Tafel. */
.nav-tafel--alles{
  /* position-area vom Desktop-Menue zuruecknehmen: solange es gilt, rechnen
     left und right innerhalb der rechten Zelle "bottom span-right" - die
     Tafel klappte als schmaler Streifen am rechten Rand auf. */
  position-area: none;
  position: fixed; top: calc(var(--kopf-h) + 6px); left: var(--rand); right: var(--rand);
  width: auto; margin: 0; max-height: calc(100svh - var(--kopf-h) - 24px); overflow-y: auto;
  padding: 10px 20px 18px;
  background: var(--raum);   /* deckend: die Tafel liegt fast ueber dem ganzen Bildschirm */
}
.nav-gruppe{
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-leise); margin: 16px 0 4px; max-width: none;
}
.nav-tat{
  display: block; margin-top: 18px; padding: 13px 16px; text-align: center;
  border: 1px solid var(--text); border-radius: 2px; color: var(--text); text-decoration: none;
}

/* ---------- Startseite: breiterer Einstieg ----------
   Die Hero-Ueberschrift traegt ein langes Wort ("Shopify-Shops"). Mit der
   62ch-Grenze von .satz brach es am Bindestrich. */
.kapitel--hero .satz{ max-width: min(100%, 1000px) }
.kapitel--hero .vorspann{ max-width: 60ch }
.knopf-reihe{ display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center }
.textlink{
  color: var(--text-leise); text-decoration: none; font-size: .94rem;
  border-bottom: 1px solid var(--linie); padding-bottom: 3px;
  transition: color .14s linear, border-color .14s linear;
}
.textlink:hover{ color: var(--text); border-bottom-color: var(--papier) }

/* ---------- Die vier Tueren ----------
   Das Menue als Inhalt: vier Ziele nebeneinander, jedes mit seinen Seiten.
   Die Farbkante traegt die Logofarben von Blau nach Violett - dieselbe
   Reihenfolge wie im Menue. */
.tueren{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 44px); position: relative;
}
@media (max-width: 1100px){ .tueren{ grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 640px){ .tueren{ grid-template-columns: minmax(0, 1fr) } }
.tuer{ border-top: 2px solid var(--blau); padding-top: 20px; position: relative }
.tuer:nth-child(2){ border-top-color: var(--blau-tief) }
.tuer:nth-child(3){ border-top-color: #7830f8 }
.tuer:nth-child(4){ border-top-color: var(--violett) }
.tuer .kapitel-nr{ margin-bottom: 8px }
.tuer h3{ font-size: clamp(1.25rem, 1.7vw, 1.55rem); text-transform: uppercase; letter-spacing: -.01em }
.tuer > p{ margin: .7em 0 1.1em; color: var(--text-leise); font-size: .96rem }
.tuer ul{ list-style: none }
.tuer li a, .tuer li span{
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--linie);
  color: var(--text); text-decoration: none; font-size: .95rem;
}
.tuer li a::after{ content: "→"; color: var(--text-leise); transition: transform .14s ease-out }
.tuer li a:hover::after{ transform: translateX(3px) }
.tuer li span{ color: var(--text-leise) }
.tuer li span::after{ content: "folgt"; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase }
.tueren::before{
  content: ""; position: absolute; inset: -4vh -5vw; z-index: -1; pointer-events: none;
  background: radial-gradient(110% 92% at 50% 50%, rgba(5,6,12,.95) 0%, rgba(5,6,12,.82) 52%, transparent 84%);
}

/* ---------- Fragen und Antworten ---------- */
.faq{ border-top: 1px solid var(--linie); position: relative }
.faq details{ border-bottom: 1px solid var(--linie) }
.faq summary{
  cursor: pointer; list-style: none; position: relative;
  padding: 20px 44px 20px 0; font-size: 1.05rem; color: var(--text);
}
.faq summary::-webkit-details-marker{ display: none }
.faq summary::after{
  content: "+"; position: absolute; right: 4px; top: 16px;
  font-size: 1.4rem; line-height: 1; color: var(--text-leise);
}
.faq details[open] summary::after{ content: "–" }
.faq summary:focus-visible{ outline: 2px solid var(--papier); outline-offset: 3px }
.faq details p{ padding: 0 0 22px; color: var(--text-leise); max-width: 64ch }
.faq::before{
  content: ""; position: absolute; inset: -4vh -5vw; z-index: -1; pointer-events: none;
  background: radial-gradient(115% 92% at 35% 50%, rgba(5,6,12,.95) 0%, rgba(5,6,12,.82) 52%, transparent 84%);
}

/* ---------- Befund: Landeseite der Meta-Anzeigen ----------
   Das Formular steht im ersten Bildschirm. Wer von einer Anzeige kommt, hat
   keine Geduld fuer vier Kapitel. */
.befund-kopf{
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
@media (max-width: 900px){ .befund-kopf{ grid-template-columns: minmax(0, 1fr) } }
/* Neben dem Formular ist die Spalte halb so breit wie ein normaler Einstieg -
   in voller Hero-Groesse (99px) lief "DURCHGESEHEN." aus der Spalte. */
.befund-kopf h1{ font-size: clamp(2.4rem, 4vw, 4.2rem) }
@media (max-width: 480px){ .befund-kopf h1{ font-size: clamp(2rem, 8.6vw, 2.6rem) } }
.formular--kasten{
  margin: 0; max-width: none;
  border: 1px solid var(--linie); border-radius: 2px;
  padding: clamp(22px, 3vw, 34px);
}
.formular--kasten .formular-kopf{
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-leise);
}
.formular .hinweis{ font-size: .8rem; color: var(--text-leise); line-height: 1.5 }
.formular .hinweis a{ color: var(--text-leise) }

/* ---------- Fuss als Seitenverzeichnis ----------
   Jede Leistungsseite ist von jeder Seite aus zwei Klicks entfernt - und
   Suchmaschinen finden hier alle auf einmal. */
.fuss{ display: block }
.fuss-spalten{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px; padding-bottom: 32px; margin-bottom: 22px; border-bottom: 1px solid var(--linie);
}
@media (max-width: 760px){ .fuss-spalten{ grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.fuss-kopf{ font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-leise); margin-bottom: 10px }
.fuss-spalten ul{ list-style: none; display: grid; gap: 6px }
.fuss-spalten a{ color: var(--text-leise); text-decoration: none }
.fuss-spalten a:hover{ color: var(--text) }
.fuss-spalten span{ color: var(--text-fern) }
.fuss-zeile{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px }
.fuss-zeile p{ max-width: none }
.fuss-zeile a{ color: var(--text-leise) }
.fuss-zeile nav{ display: flex; gap: 24px }

/* ---------- Telefon ----------
   Die h1 aus welt.css beginnt bei 2.6rem (41,6px). Lange Versalwoerter wie
   "DURCHGESEHEN." oder "SHOPIFY-SHOPS," liefen damit bei 375px ueber den
   Rand. Unter 480px daher kleiner, und als letzte Sicherung darf ein Wort
   umbrechen statt die Seite zu verbreitern. */
@media (max-width: 480px){
  h1{ font-size: clamp(2rem, 8.6vw, 2.6rem); overflow-wrap: break-word }
}

/* Die Befund-Seite ist die Landeseite der Meta-Anzeigen. 22vh Abstand ueber
   der Ueberschrift schoben den Absenden-Knopf unter den ersten Bildschirm. */
@media (max-width: 900px){
  .kapitel--hero:has(.befund-kopf){ padding-top: calc(var(--kopf-h) + 36px); min-height: 0 }
  .befund-kopf .vorspann{ font-size: 1rem }
}

/* ---------- Passt dazu: drei verwandte Leistungen am Seitenende ----------
   Hilft Besuchern weiter und verbindet die Seiten fuer Suchmaschinen. */
.verwandt{ margin-top: clamp(40px, 6vh, 64px); position: relative }
.verwandt .kapitel-nr{ margin-bottom: 14px }
.verwandt ul{ list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px }
@media (max-width: 760px){ .verwandt ul{ grid-template-columns: minmax(0, 1fr) } }
.verwandt a{
  display: block; padding: 14px 0; border-top: 1px solid var(--linie);
  color: var(--text); text-decoration: none;
}
.verwandt a b{ display: block; font-weight: 500 }
.verwandt a span{ display: block; font-size: .86rem; color: var(--text-leise) }
.verwandt a:hover b{ color: #fff }
.verwandt a::after{ content: "→"; float: right; margin-top: -1.6em; color: var(--text-leise) }

/* Lange Versalwoerter in Ueberschriften brechen notfalls um, statt die Seite
   zu verbreitern. Gewollte Trennstellen stehen als &shy; im Text. */
h1, h2{ overflow-wrap: break-word }

/* ---------- Formular: Falle, Meldungen, Fehlerzustand ---------- */
.feld-falle{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.formular-meldung{ font-size: .88rem; line-height: 1.5; padding: 10px 12px; border-radius: 2px; max-width: none }
.formular-meldung[data-art="fehler"]{ color: #ffb4a8; border: 1px solid rgba(224,72,58,.5); background: rgba(224,72,58,.08) }
.feld input[aria-invalid="true"]{ border-bottom-color: var(--rot) }
.formular-danke{ font-size: 1.1rem; color: var(--text); line-height: 1.5; max-width: none }
.formular .knopf:disabled{ opacity: .6; cursor: wait }

/* ---------- Rechtstexte: Impressum, Datenschutz, AGB ----------
   Hier wird gelesen, nicht geblaettert: der Text beginnt oben statt in der
   Mitte des Bildschirms, steht in einer ruhigen Spalte, und die
   Ueberschriften bleiben in normaler Schreibung. Dahinter liegt ein
   Abdunkler mit weichen Raendern - kein Kasten, aber auf ganzer Laenge
   lesbar, auch wenn die Punktwolke hinter dem Absatz hell wird. */
.kapitel--text{
  min-height: 0; align-content: start;
  padding: calc(var(--kopf-h) + clamp(40px, 9vh, 110px)) var(--rand) clamp(72px, 12vh, 140px);
}
.rechtstext{ position: relative; max-width: 74ch }
.rechtstext::before{
  content: ""; position: absolute; inset: -5vh -7vw; z-index: -1; pointer-events: none;
  background: rgba(5,6,12,.9);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent),
                      linear-gradient(transparent, #000 5vh, #000 calc(100% - 5vh), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent),
              linear-gradient(transparent, #000 5vh, #000 calc(100% - 5vh), transparent);
  mask-composite: intersect;
}
.rechtstext h1{ font-size: clamp(2rem, 4.6vw, 3.6rem); margin: 12px 0 clamp(22px, 4vh, 36px) }
.rechtstext h2{
  font-size: clamp(1.06rem, 1.5vw, 1.25rem); line-height: 1.3;
  text-transform: none; letter-spacing: -.005em; text-wrap: pretty;
  margin: 2.3em 0 .75em; color: var(--text);
  scroll-margin-top: calc(var(--kopf-h) + 40px);
}
.rechtstext p, .rechtstext li{ color: var(--text-leise); max-width: 70ch; line-height: 1.65 }
.rechtstext p + p{ margin-top: .9em }
.rechtstext a{ color: var(--text); text-underline-offset: 3px; overflow-wrap: anywhere }
.rechtstext-vorspann{ font-size: 1.05rem }

.rechtstext ol.absaetze{ list-style: none; counter-reset: absatz }
.rechtstext ol.absaetze > li{ counter-increment: absatz; position: relative; padding-left: 2.4em }
.rechtstext ol.absaetze > li + li{ margin-top: .75em }
.rechtstext ol.absaetze > li::before{
  content: "(" counter(absatz) ")"; position: absolute; left: 0;
  color: var(--text-fern); font-variant-numeric: tabular-nums;
}
/* Nur ein Absatz: keine Nummer, wie im Gesetzestext. */
.rechtstext ol.absaetze > li:only-child{ padding-left: 0 }
.rechtstext ol.absaetze > li:only-child::before{ content: none }

.rechtstext-inhalt{ margin-top: 28px; padding: 18px 0; border-block: 1px solid var(--linie) }
.rechtstext-inhalt ol{
  list-style: none; counter-reset: p;
  columns: 2 240px; column-gap: 32px;
}
.rechtstext-inhalt li{ counter-increment: p; padding: 4px 0; break-inside: avoid }
.rechtstext-inhalt li::before{ content: "§ " counter(p) "  "; white-space: pre; color: var(--text-fern); font-variant-numeric: tabular-nums }
.rechtstext-inhalt a{ color: var(--text-leise); text-decoration: none }
.rechtstext-inhalt a:hover{ color: var(--text); text-decoration: underline }

.rechtstext-fuss{ margin-top: 3em; padding-top: 1.4em; border-top: 1px solid var(--linie); font-size: .92rem }