/* ==========================================================================
   XAAS Cloud — Stylesheet der Landingpage
   Grundlage: Spezifikation Landingpage xaas-cloud.com 1.0, Kapitel 4.
   Farben und Schriften aus dem Corporate-Design-Manual (docs/xaas-ci.md).

   Regeln, die hier nicht verhandelbar sind und deshalb oben stehen:
     - Gelb ist nie Textfarbe auf Weiss. Gelb ist Flaeche, Text darauf schwarz.
     - Abstaende nur in Vielfachen von 8px.
     - Kein Schatten, kein Verlauf. Abgrenzung durch 1px-Linien in Schwarz.
     - ALLES ECKIG: kein border-radius groesser 0 (Change-Spezifikation v1.1,
       Ae2 - Abgleich mit xaas-it.com am 23.08.2026: das CD arbeitet mit
       harten Kanten; Rundungen wirken als Fremdkoerper).
     - Kein Grau als Ersatz fuer Schwarz: Text und Linien in #000 auf Weiss
       bzw. #FFF auf Schwarz; Abstufung nur ueber die CI-Flaechen (Ae3.2).
     - Hover invertiert (Gelb->Schwarz/Gelb, Geist->Schwarz/Weiss); keine
       Aufhellungs- oder Opacity-Hovers (Ae3.4).
     - Kein Request an eine fremde Herkunft. Schriften liegen daneben.
   ========================================================================== */

/* --- Schriften: selbst gehostet -------------------------------------------
   Archivo und Open Sans, SIL Open Font License. Lizenztexte liegen in
   schriften/. Auf den Zeichensatz dieser Seite reduziert, zusammen rund 35 KiB.
   Kein fonts.googleapis.com: das uebertraegt die IP-Adresse jedes Besuchers in
   die USA (LG Muenchen I, 20.01.2022, 3 O 17493/20) - und waere auf einer Seite
   ueber digitale Souveraenitaet ein Widerspruch im ersten Kilobyte.
   font-display: swap, damit Text sofort sichtbar ist. */
@font-face {
  font-family: 'XAAS Headline';
  src: url('schriften/xaas-headline.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'XAAS Text';
  src: url('schriften/xaas-text.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'XAAS Text';
  src: url('schriften/xaas-text-fett.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben — Corporate-Design-Manual XAAS */
  --color-yellow:     #FFED66;
  --color-black:      #000000;
  --color-white:      #FFFFFF;
  --color-sand:       #F2E9E4;
  --color-purple:     #8075FF;
  --color-green:      #52B580;
  --color-red:        #EA555C;
  --color-darkpurple: #3A405A;

  /* Schrift. N27/Bould stehen zuerst: sobald die Webfont-Lizenz geklaert ist
     (TBD-4), werden nur die Dateien getauscht, nicht diese Zeilen. */
  --font-headline: 'N27', 'XAAS Headline', 'Archivo', system-ui, sans-serif;
  --font-body: 'Bould', 'XAAS Text', 'Open Sans', system-ui, sans-serif;

  --fs-h1: clamp(2.5rem, 6vw, 4.5rem);
  --fs-h2: clamp(2rem, 4vw, 3rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
  --fs-body: 1.125rem;
  --fs-small: 0.875rem;

  --container-max: 1200px;
  --section-pad-y: clamp(64px, 10vw, 120px);
  /* 0, nicht 4px: Change-Spezifikation v1.1, Ae2. Der Token bleibt stehen,
     damit eine kuenftige Aenderung wieder genau eine Stelle hat - aber die
     Abnahme prueft, dass im ausgelieferten CSS kein Radius groesser 0 steht. */
  --radius: 0;
  --header-h: 72px;
}

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

html {
  /* Ankersprung darf nicht unter dem klebenden Kopf landen. */
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  /* clip statt hidden: hidden macht das Element zu einem Scroll-Container
     (und bricht damit position: sticky im Kopf), clip nicht. Gebraucht wird es
     fuer einen Wimpernschlag beim Schriftwechsel: solange die Ersatzschrift
     gilt, ist die Kopfzeile bei 320px Breite ein paar Pixel breiter, und ohne
     das hier blitzt eine waagerechte Bildlaufleiste auf. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  /* HIER STEHT ABSICHTLICH KEIN overflow-x.
     Gegen horizontales Scrollen wirkt 'overflow-x: clip' am html-Element
     (siehe oben). Beides zusammen - clip am html UND hidden am body - macht
     'position: sticky' im Kopf kaputt: gemessen, der Kopf scrollte weg. Jede
     Regel allein funktioniert, die Kombination nicht. */
}

h1, h2, h3, .versal {
  font-family: var(--font-headline);
  font-weight: 700;
  text-transform: uppercase;   /* Versalien per CSS: der Quelltext bleibt
                                  normal geschrieben, sonst liest ein
                                  Screenreader Buchstaben einzeln vor. */
  /* Das Manual nennt 0.9 (maximal 1.2). 0.98 statt 0.9, und das ist keine
     Nachlaessigkeit, sondern ein gemessener Befund an deutschem Text:
     versale Umlaute haben ihre Punkte OBERHALB der Versalhoehe. Bei 0.9
     stossen die Punkte von "SOUVERÄNITÄT" in die Zeile darueber - im
     Screenshot der Hero-Zeile deutlich sichtbar. Das Manual ist an
     englischen Headlines entwickelt, wo der Fall nicht auftritt.
     0.98 bleibt innerhalb der erlaubten Spanne und haelt die enge Anmutung. */
  line-height: 0.98;
  letter-spacing: 0;
  margin: 0 0 16px;
  hyphens: auto;
  /* Sicherheitsnetz: die Texte pflegt Marketing in
     content/landing.de.json. Ein einzelnes langes Wort - "SOUVERÄNITÄT",
     "ORGANISATIONSEINHEITEN" - darf die Seite nicht breiter machen als den
     Bildschirm. Gemessen bei 320px: ohne das hier war das Dokument 344px
     breit, ohne dass ein einziges Element ueber den Rand ragte. Ueberlaufende
     Schrift erzeugt keinen Rahmen, den man messen kann - nur eine
     Bildlaufleiste. */
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.1; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

a { color: var(--color-black); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* Fokus IMMER sichtbar. 'outline: none' kommt in dieser Datei nicht vor. */
:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}
.auf-dunkel :focus-visible, footer :focus-visible {
  outline-color: var(--color-yellow);
}

img, svg { max-width: 100%; height: auto; }

/* --- Bausteine ---------------------------------------------------------- */

.huelle {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  /* 16px unter 480px: bei 360px Breite blieben mit 24px zwei Pixel zu wenig
     fuer Wortmarke, Knopf und Menue - die Seite liess sich seitlich schieben.
     Gemessen, nicht geschaetzt. 16px ist auf Geraeten dieser Breite ohnehin
     das uebliche Mass. */
  padding: 0 16px;
}
@media (min-width: 480px) { .huelle { padding: 0 24px; } }
@media (min-width: 1024px) { .huelle { padding: 0 40px; } }

.abschnitt { padding: var(--section-pad-y) 0; }
.abschnitt--sand { background: var(--color-sand); }
.abschnitt--gelb { background: var(--color-yellow); }
.abschnitt--schwarz { background: var(--color-black); color: var(--color-white); }

.eyebrow {
  font-family: var(--font-headline);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--fs-small);
  margin: 0 0 24px;
}

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

.sprungmarke {
  position: absolute; left: 8px; top: -100px;
  background: var(--color-yellow); color: var(--color-black);
  padding: 12px 16px; z-index: 100;
  font-family: var(--font-headline); text-transform: uppercase;
  letter-spacing: 0.1em; text-decoration: none;
}
.sprungmarke:focus { top: 8px; }

/* Knöpfe */
.knopf {
  display: inline-block;
  font-family: var(--font-headline);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  padding: 16px 24px;
  border-radius: var(--radius);
  border: 1.5px solid var(--color-black);
  cursor: pointer;
  transition: background-color 120ms linear, color 120ms linear;
}
.knopf--primaer { background: var(--color-yellow); color: var(--color-black); }
.knopf--primaer:hover { background: var(--color-black); color: var(--color-yellow); }
.knopf--geist { background: transparent; color: var(--color-black); }
.knopf--geist:hover { background: var(--color-black); color: var(--color-white); }
.knopf--auf-gelb { background: var(--color-black); color: var(--color-yellow); }
.knopf--auf-gelb:hover { background: var(--color-white); color: var(--color-black); }
.knopf--klein { padding: 10px 16px; font-size: var(--fs-small); }
/* Knoepfe brechen nie um. Ein zweizeiliger Knopf sieht nach Fehler aus. */
.knopf { white-space: nowrap; }
@media (max-width: 359px) {
  /* 320px (iPhone SE der ersten Generation) liegt unter den Breiten, die die
     Spezifikation nennt - aber "kein horizontales Scrollen" gilt ohne
     Einschraenkung. Hier wird nur noch enger gesetzt, nichts weggelassen:
     der Knopf "Konto anlegen" bleibt sichtbar, wie gefordert. */
  .knopf--klein { padding: 7px 8px; font-size: 0.625rem; letter-spacing: 0.02em; }
  .marke { font-size: 0.8rem; }
  .marke__zusatz { margin-left: 3px; }
  .menue > summary { padding: 8px; }
  .menue__balken, .menue__balken::before, .menue__balken::after { width: 15px; }
}
@media (max-width: 479px) {
  /* Ganz schmale Geraete: engere Schrift und weniger Polster, damit
     Wortmarke, "Konto anlegen" und Menue in eine Zeile passen. Gemessen bei
     360px - dort war es vorher zu breit und die Seite liess sich seitlich
     schieben. */
  .knopf--klein { padding: 8px 10px; font-size: 0.6875rem; letter-spacing: 0.04em; }
  .marke { font-size: 0.95rem; }
  .kopf__innen { gap: 8px; }
  .menue > summary { padding: 10px; }
}

.knopfreihe { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* Karten */
.karte {
  background: var(--color-white);
  border: 1px solid var(--color-black);
  border-radius: var(--radius);
  padding: 32px;
}
.karte h3 { margin-bottom: 8px; }
/* Verlinkte Karten sind Flex-Spalten, damit Preis und Verweis unten stehen -
   sonst tanzen sie je nach Laenge der Dienstliste auf verschiedenen Hoehen,
   und die Karten sehen aus wie vier unterschiedliche Bausteine. */
a.karte { text-decoration: none; display: flex; flex-direction: column; height: 100%; }
a.karte > .dienst__preis { margin-top: auto; }
a.karte:hover { border-width: 2px; padding: 31px; }
a.karte:hover .karte__pfeil { transform: translateX(4px); }
.karte__pfeil { display: inline-block; transition: transform 120ms linear; }

.raster { display: grid; gap: 24px; }
.raster--3 { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .raster--3 { grid-template-columns: repeat(3, 1fr); } }
.raster--4 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .raster--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .raster--4 { grid-template-columns: repeat(4, 1fr); } }

/* --- Kopf --------------------------------------------------------------- */

/* Die Bruchpunkte des Kopfes sind gemessen, nicht geraten. Vorher erschienen
   bei 480px der Knopf "Anmelden", das Wort "Menü" und das groessere Polster
   GLEICHZEITIG - zusammen 124px zu viel, und die Seite liess sich seitlich
   schieben. Jetzt kommt jedes Stueck erst, wenn Platz dafuer ist:

     bis  599px : Wortmarke + "Konto anlegen" + Burger (nur Striche)
     ab   600px : Burger mit dem Wort "Menü"
     ab   768px : zusaetzlich "Anmelden"
     ab  1120px : Ankernavigation, Burger weg

   1120 und nicht 1024: bei 1040px passten Ankernavigation, "Anmelden" und
   "Konto anlegen" um 8px nicht nebeneinander. Ein Bruchpunkt aus der
   Bruchpunkt-Tabelle ist eine Konvention, kein Messwert - hier zaehlt, was
   hineinpasst.
*/

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-black);
  /* min-height, nicht height: bei 390px lief der Inhalt sonst aus dem Kopf
     heraus, weil "Konto anlegen" umbrach. Ein Kopf, der ueberlaeuft, verdeckt
     den Seitenanfang. */
  min-height: var(--header-h);
  display: flex; align-items: center;
}
@media (max-width: 767px) { :root { --header-h: 60px; } }

.kopf__innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; width: 100%; min-width: 0;
}
.marke {
  font-family: var(--font-headline);
  text-transform: uppercase;
  font-size: 1.25rem;
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.marke__x { font-style: italic; font-weight: 700; }
.marke__zusatz { font-style: normal; font-weight: 400; margin-left: 6px; }

.kopf__anker { display: none; gap: 24px; }
@media (min-width: 1120px) { .kopf__anker { display: flex; } }
.kopf__anker a {
  text-decoration: none;
  font-size: var(--fs-small);
  font-family: var(--font-headline);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.kopf__anker a:hover, .kopf__anker a[aria-current="true"] {
  border-bottom-color: var(--color-black);
}

.kopf__aktionen { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* "Anmelden" erst ab 768px. Bis dahin steht es im Menue - die Spezifikation
   verlangt nur, dass "Konto anlegen" ausserhalb des Menues sichtbar bleibt. */
.kopf__anmelden { display: none; }
@media (min-width: 768px) { .kopf__anmelden { display: inline-block; } }

/* Menue fuer kleine Bildschirme: ein <details>, damit es ohne JavaScript
   funktioniert (Spezifikation 6.5, Progressive Enhancement). */
.menue { position: relative; }
@media (min-width: 1120px) { .menue { display: none; } }
.menue > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--color-black);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-family: var(--font-headline);
  text-transform: uppercase; letter-spacing: 0.1em;
  font-size: var(--fs-small);
  white-space: nowrap;
}
.menue > summary::-webkit-details-marker { display: none; }

/* Drei Striche, in CSS gezeichnet. Kein Symbolzeichen und keine Icon-Schrift:
   das eine haengt von der Schrift ab, das andere waere ein weiterer Download. */
.menue__balken {
  display: block; width: 18px; height: 2px;
  background: var(--color-black); position: relative; flex: none;
}
.menue__balken::before, .menue__balken::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px;
  background: var(--color-black);
}
.menue__balken::before { top: -6px; }
.menue__balken::after { top: 6px; }
.menue[open] .menue__balken { background: transparent; }
.menue[open] .menue__balken::before { top: 0; transform: rotate(45deg); }
.menue[open] .menue__balken::after { top: 0; transform: rotate(-45deg); }

.menue__wort { display: none; }
@media (min-width: 600px) { .menue__wort { display: inline; } }

.menue__inhalt {
  position: fixed; inset: var(--header-h) 0 0 0;
  background: var(--color-white);
  padding: 32px 16px;
  display: flex; flex-direction: column; gap: 24px;
  overflow-y: auto;
}
@media (min-width: 480px) { .menue__inhalt { padding: 32px 24px; } }
.menue__inhalt a {
  font-family: var(--font-headline);
  text-transform: uppercase;
  font-size: var(--fs-h3);
  text-decoration: none;
  border-bottom: 1px solid var(--color-black);
  padding-bottom: 16px;
}

/* Zum Schluss die engen Geraete - sie muessen die Werte von oben
   ueberschreiben, stehen also NACH ihnen. Beim ersten Versuch standen sie
   davor und wirkten deshalb nicht: bei gleicher Spezifitaet gewinnt die
   spaetere Regel. */
@media (max-width: 479px) {
  .knopf--klein { padding: 8px 10px; font-size: 0.6875rem; letter-spacing: 0.04em; }
  .marke { font-size: 0.95rem; }
  .kopf__innen { gap: 8px; }
  .menue > summary { padding: 10px; }
}
@media (max-width: 359px) {
  /* 320px liegt unter den Breiten der Spezifikation - "kein horizontales
     Scrollen" gilt aber ohne Einschraenkung. Hier wird nur enger gesetzt,
     nichts weggelassen. */
  .knopf--klein { padding: 7px 8px; font-size: 0.625rem; letter-spacing: 0.02em; }
  .marke { font-size: 0.8rem; }
  .marke__zusatz { margin-left: 3px; }
  .menue > summary { padding: 8px; }
  .menue__balken, .menue__balken::before, .menue__balken::after { width: 15px; }
}

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

.hero { padding: clamp(48px, 8vw, 96px) 0 var(--section-pad-y); }
.hero h1 { max-width: 20ch; text-wrap: balance; }
@media (max-width: 400px) {
  /* Die Spezifikation nennt clamp(2.5rem, 6vw, 4.5rem). Der untere Wert von
     2.5rem (40px) macht "SOUVERÄNITÄT." breiter als ein 320px-Bildschirm.
     Der Token bleibt, wie er ist - hier steht nur, was auf sehr schmalen
     Geraeten daraus wird. */
  :root { --fs-h1: clamp(1.75rem, 8.5vw, 2.5rem); }
}
.hero__subline { font-size: clamp(1.125rem, 2vw, 1.375rem); max-width: 60ch; margin-bottom: 32px; }
.hero__knoepfe { margin-bottom: 40px; }

.fakten { display: flex; flex-wrap: wrap; gap: 8px 32px; list-style: none; padding: 0; margin: 0; }
.fakten li { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-small); }
.fakten li::before {
  content: "";
  /* Der Haken ist ein Rahmen, kein Zeichen: so liest ihn kein Screenreader
     als Buchstaben vor und er braucht keine Symbolschrift. */
  width: 8px; height: 14px;
  border-right: 2px solid var(--color-black);
  border-bottom: 2px solid var(--color-black);
  transform: rotate(45deg) translateY(-2px);
  flex: none;
}

/* --- Problemzeile ------------------------------------------------------- */

.problem { text-align: center; }
.problem p {
  max-width: 62ch; margin: 0 auto;
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
}

/* --- Dienstkarten ------------------------------------------------------- */

.abschnitt__intro { max-width: 62ch; margin-bottom: 40px; }
.dienst__preis {
  font-family: var(--font-headline);
  text-transform: uppercase;
  font-size: 1.125rem;
  margin: 16px 0 8px;
}
.dienst__liste { list-style: none; padding: 0; margin: 0 0 16px; font-size: var(--fs-small); }
.dienst__liste li { padding: 4px 0; border-bottom: 1px solid var(--color-sand); }
.dienst__liste li:last-child { border-bottom: 0; }
.marke--vorbereitet {
  display: inline-block; font-size: 0.75rem; letter-spacing: 0.06em;
  text-transform: uppercase; border: 1px solid var(--color-darkpurple);
  color: var(--color-darkpurple); border-radius: var(--radius);
  padding: 1px 6px; margin-left: 8px; white-space: nowrap;
}
.hinweiszeile { margin-top: 32px; font-size: var(--fs-small); }

/* --- Steuerung ---------------------------------------------------------- */

.zweispaltig { display: grid; gap: 40px; }
@media (min-width: 1024px) { .zweispaltig { grid-template-columns: 3fr 2fr; align-items: start; } }
.punkte { list-style: none; padding: 0; margin: 24px 0 0; }
.punkte li {
  padding: 16px 0; border-top: 1px solid var(--color-black);
  font-family: var(--font-headline); text-transform: uppercase;
  font-size: 1rem; letter-spacing: 0.02em;
}
.punkte li:last-child { border-bottom: 1px solid var(--color-black); }

.beispiel {
  background: var(--color-yellow);
  color: var(--color-black);
  border-radius: var(--radius);
  padding: 32px;
  font-size: clamp(1.125rem, 1.6vw, 1.25rem);
}

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

.schritte { list-style: none; counter-reset: schritt; padding: 0; margin: 0; display: grid; gap: 32px; }
@media (min-width: 1024px) { .schritte { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.schritte li { counter-increment: schritt; }
.schritte li::before {
  content: counter(schritt);
  display: flex; align-items: center; justify-content: center;
  /* Gelbes QUADRAT, 44x44, kein Kreis: Change-Spezifikation v1.1, Ae2 -
     das CD kennt keine runden Formen. 44px ist zugleich die Mindestgroesse
     fuer Touch-Ziele, auch wenn die Nummer keines ist. */
  width: 44px; height: 44px;
  background: var(--color-yellow); color: var(--color-black);
  font-family: var(--font-headline); font-size: 1.25rem;
  margin-bottom: 16px;
  border: 1px solid var(--color-black);
}
.abschluss { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--color-black); max-width: 70ch; }

/* --- Tabelle Sicherheit ------------------------------------------------- */

.tabellenhuelle { overflow-x: auto; }
table.beleg { width: 100%; border-collapse: collapse; text-align: left; font-size: 1rem; }
table.beleg th, table.beleg td { border: 1px solid var(--color-black); padding: 16px; vertical-align: top; }
table.beleg thead th {
  background: var(--color-black); color: var(--color-white);
  font-family: var(--font-headline); text-transform: uppercase; letter-spacing: 0.06em;
}
table.beleg tbody tr:nth-child(even) { background: var(--color-white); }
table.beleg tbody tr:nth-child(odd) { background: var(--color-sand); }
table.beleg tbody th { width: 30%; font-weight: 600; font-family: var(--font-body); text-transform: none; }

/* Auf kleinen Bildschirmen wird aus der Tabelle eine Liste. Eine Tabelle, die
   man seitlich schieben muss, liest niemand. */
@media (max-width: 640px) {
  table.beleg thead { display: none; }
  table.beleg, table.beleg tbody, table.beleg tr, table.beleg th, table.beleg td { display: block; width: auto; }
  table.beleg tr { border: 1px solid var(--color-black); margin-bottom: 16px; }
  table.beleg th, table.beleg td { border: 0; padding: 8px 16px; }
  table.beleg tbody th { padding-top: 16px; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.06em; }
  table.beleg tbody td { padding-bottom: 16px; }
}

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

.faq { border-top: 1px solid var(--color-black); }
.faq details { border-bottom: 1px solid var(--color-black); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 24px 40px 24px 0; position: relative;
  font-family: var(--font-headline); text-transform: uppercase;
  font-size: var(--fs-h3); line-height: 1.1;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 24px;
  font-size: 1.5rem; line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details > div { padding: 0 0 24px; max-width: 75ch; }

/* --- Formular: entfallen -------------------------------------------------
   Das Kontaktformular ist mit Change-Spezifikation v1.1 (Ae1) entfernt,
   samt Feld-, Fehler- und Meldungsstilen. Kontakt laeuft ueber
   xaas-it.com/kontakt/ - diese Seite hat keine Eingabefelder mehr. */

/* --- Fuss --------------------------------------------------------------- */

footer { background: var(--color-black); color: var(--color-white); padding: 64px 0 32px; }
footer a { color: var(--color-white); }
footer .raster--3 { gap: 40px; }
footer h2 {
  font-size: 1rem; letter-spacing: 0.1em; margin-bottom: 16px;
}
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { padding: 4px 0; font-size: var(--fs-small); }
.fuss__absender {
  margin-top: 48px; padding-top: 24px;
  /* Weiss, nicht rgba(255,255,255,0.35): kein Grau als Ersatz fuer
     Schwarz/Weiss - Linien auf Schwarz sind weiss (Ae3.2). */
  border-top: 1px solid var(--color-white);
  font-size: var(--fs-small);
}
.fuss__marke { display: inline-block; margin-bottom: 24px; color: var(--color-white); text-decoration: none; }

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

.rechtstext {
  max-width: 75ch;
  /* padding-block, NICHT padding: 'padding' wuerde das seitliche Polster von
     .huelle ueberschreiben, und der Text klebte am linken Bildschirmrand.
     Genau das ist beim ersten Versuch passiert. */
  padding-block: 48px 96px;
}
/* Kleiner als auf der Startseite. Grund, gemessen: "DATENSCHUTZERKLÄRUNG"
   sind 21 Zeichen; in einer Spalte von 75ch und mit der Hero-Groesse passt das
   Wort nicht in eine Zeile und wurde vom Sicherheitsnetz mitten im Wort
   umgebrochen ("DATENSCHUTZER / KLÄRUNG"). Eine Rechtsseite ist ohnehin ein
   Dokument und keine Buehne. */
/* Die Groessen der Rechtsseiten-Ueberschriften sind AUSGEMESSEN, nicht
   geschaetzt. Deutsche Komposita in versalen Headlines sind der Grund:

     Datenschutzbeauftragter  23 Zeichen, Breite bei 100px Schrift: 1605px
     Datenschutzerklärung     20 Zeichen,                          1411px

   Bei 320px Bildschirmbreite bleiben 288px Textspalte. Das laengste Wort
   passt dort also bis 17px Schriftgroesse (288 / 16,05), das laengste in einer
   h1 bis 20px. Alles darueber bricht mitten im Wort - und ohne
   Trennwoerterbuch ohne Trennstrich, was schlicht nach Fehler aussieht.

   Gemessen wurde im Browser mit einem unsichtbaren Messelement, nicht mit
   einer Faustformel je Zeichen. */
.rechtstext h1 { font-size: clamp(1.1875rem, 6vw, 2.75rem); margin-bottom: 24px; }
.rechtstext h2 { font-size: clamp(1.0625rem, 5.2vw, 1.75rem); hyphens: auto; }
.rechtstext h3 { font-size: clamp(1rem, 3.4vw, 1.25rem); }
/* Lange Adressen und Kennungen in <code> duerfen die Spalte nicht sprengen. */
.rechtstext code { overflow-wrap: anywhere; }
/* Abstaende. Die Groessen stehen weiter oben und werden hier NICHT erneut
   gesetzt - beim ersten Versuch stand an dieser Stelle noch ein zweites
   font-size, und weil es spaeter kam, gewann es. Der Browser hat das brav
   gemacht, gemessene 24px statt der berechneten 20px, und die Woerter brachen
   weiter mitten durch. Zwei Regeln fuer dieselbe Eigenschaft sind eine Falle. */
.rechtstext h2 { margin-top: 48px; }
.rechtstext h3 { margin-top: 32px; }
.rechtstext ul, .rechtstext ol { padding-left: 24px; }
.rechtstext li { margin-bottom: 8px; }
.rechtstext table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.rechtstext th, .rechtstext td { border: 1px solid var(--color-black); padding: 8px 12px; text-align: left; vertical-align: top; }
.rechtstext .tabellenhuelle { overflow-x: auto; }

/* Die Tabellen der Rechtsseiten sind Schluessel-Wert-Paare (Angabe/Wert).
   Unter 640px werden daraus gestapelte Zeilen - eine Tabelle, die man
   seitlich schieben muss, liest niemand, und der Scroll-Behaelter allein
   macht sie nur benutzbar, nicht gut. */
@media (max-width: 640px) {
  .rechtstext table, .rechtstext tbody, .rechtstext tr,
  .rechtstext th, .rechtstext td { display: block; width: auto; }
  .rechtstext tr { border: 1px solid var(--color-black); margin-bottom: 16px; }
  .rechtstext th, .rechtstext td { border: 0; }
  .rechtstext th {
    font-size: var(--fs-small); text-transform: uppercase;
    letter-spacing: 0.06em; padding-bottom: 0;
  }
}
.rechtstext dt { font-weight: 600; margin-top: 16px; }
.rechtstext code { font-size: 0.9375em; background: var(--color-sand); padding: 1px 4px; }

/* Datumszeile unter der Ueberschrift. */
.rechtstext .stand { font-size: var(--fs-small); margin-bottom: 32px; }

/* Sichtbarer Hinweis, dass ein Text noch nicht juristisch geprueft ist.
   Bewusst auffaellig und bewusst nicht rot: es ist keine Fehlermeldung,
   sondern eine Angabe zum Stand. Sie muss stehenbleiben, bis die Pruefung
   vorliegt (Backlog B1) - eine Rechtsseite ohne diesen Hinweis behauptet
   Verbindlichkeit, die sie nicht hat. */
.rechtstext .entwurf {
  border: 1.5px solid var(--color-black);
  border-left: 6px solid var(--color-yellow);
  background: var(--color-sand);
  padding: 24px;
  margin: 0 0 32px;
  border-radius: var(--radius);
}
.rechtstext .entwurf > :first-child { margin-top: 0; }
.rechtstext .entwurf > :last-child { margin-bottom: 0; }
.rechtstext dd { margin: 4px 0 0; }

/* --- Bewegung sparsam --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Druck -------------------------------------------------------------- */

@media print {
  .kopf, .menue, .abschnitt--gelb, .sprungmarke { display: none !important; }
  body { font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}