/* =====================================================================
   MINILAB.PHOTO — Rechtstexte, gemeinsames Blatt
   Angelegt 25.08.2026.

   Diese Datei ist die EINZIGE Gestaltungsquelle der fuenf Rechtsseiten
   unter /legal/. Sie liegt bewusst getrennt von der Landingpage: die
   Landingpage ist eine Auftrittsflaeche, das hier sind Lesetexte. Die
   Tokens sind dieselben — sie sind aus src/prototype/2026-08-12-
   gestaltungsrichtung.html und src/landing/index.html uebernommen, nicht
   neu erfunden. Wo hier eine Zahl steht, steht sie in DESIGN_SYSTEM.md.

   Die Schrift liegt LOKAL. Kein Aufruf an einen fremden Host: die IP
   jeder Besucherin ginge sonst ohne Einwilligung an Google (LG Muenchen I,
   20.01.2022, 3 O 17493/20). deploy/ausliefern.sh bricht bei einer
   externen Adresse von selbst ab — auch fuer diese Seiten.

   Kein JavaScript. Ein Rechtstext muss ohne Skript vollstaendig lesbar
   sein; die Sprachumschaltung laeuft ueber Anker, und beide Fassungen
   stehen ohnehin untereinander auf derselben Seite.
   ===================================================================== */

@font-face{
  font-family:"Archivo";
  src:url("/assets/landing/archivo-variable.woff2") format("woff2-variations");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
}

:root{
  --bg:#141414;
  --bg-deep:#0d0d0d;
  --fg:#E2F2E6;
  --fg-70:rgba(226,242,230,.70);
  --fg-45:rgba(226,242,230,.45);
  --fg-22:rgba(226,242,230,.22);
  --rule:rgba(226,242,230,.18);
  --rule-soft:rgba(226,242,230,.09);
  --radius:10px;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:clamp(20px,4vw,56px);
  --kopf:54px;
  /* Lesebreite. Der einzige Wert dieser Datei, den die Landingpage nicht
     kennt — sie hat keinen Text dieser Laenge. 68ch liegt in dem Korridor,
     den die Lesbarkeitsforschung traegt (rund 45-75 Zeichen je Zeile). */
  --lese:68ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:"Archivo",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  font-size:16px;line-height:1.65;font-variation-settings:"wdth" 100;
  text-wrap:pretty;hanging-punctuation:first;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--fg);text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}

/* prefers-reduced-motion schaltet alles ab — Projektregel, hier gibt es
   ohnehin nur den weichen Ankersprung. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
}

/* --- Beschriftungsklassen (unveraendert aus der Landingpage) ---------- */
.label{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 700;color:var(--fg-45)}
.edge{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  font-variation-settings:"wdth" 88,"wght" 700;color:var(--fg-45)}
/* Der Abbinder ist festgelegter Wortlaut in GEMISCHTER Schreibweise
   (KANON.md, Chris 17.08.2026). Er darf deshalb nicht durch .edge laufen,
   das alles in Versalien setzt. pruefe_konsistenz.py prueft den Wortlaut. */
.credit{font-size:9.5px;letter-spacing:.14em;
  font-variation-settings:"wdth" 88,"wght" 700;color:var(--fg-45)}
.tm{font-size:.78em;vertical-align:baseline;position:relative;top:.10em;
  line-height:0;letter-spacing:0}

/* --- Sprungmarke fuer Tastatur und Screenreader ----------------------- */
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:8px;top:8px;z-index:9;background:var(--bg);color:var(--fg);
  border:1px solid var(--fg);border-radius:var(--radius);padding:10px 14px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 700}

/* --- Kopfzeile -------------------------------------------------------- */
header.top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:var(--kopf);padding:0 var(--gut);
  border-bottom:1px solid var(--rule);
}
.mark{font-size:16px;letter-spacing:.02em;text-transform:uppercase;
  font-variation-settings:"wdth" 112,"wght" 800;text-decoration:none;
  white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
.mark em{font-style:normal;font-variation-settings:"wdth" 92,"wght" 500;
  color:var(--fg-45)}
/* Ruecklink. Mindestens 44px hoch — am Telefon ist das die Untergrenze
   eines treffbaren Ziels, und diese Seiten werden am Telefon gelesen. */
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  font-variation-settings:"wdth" 88,"wght" 700;color:var(--fg-45);
  text-decoration:none;transition:color .18s var(--ease)}
.back:hover,.back:focus-visible{color:var(--fg)}

/* --- Seitenkoerper ---------------------------------------------------- */
main{padding:clamp(28px,5vw,64px) var(--gut) clamp(40px,7vw,96px);
  max-width:calc(var(--lese) + 2 * 56px);margin:0 auto}
h1{
  font-variation-settings:"wdth" 122,"wght" 800;
  text-transform:uppercase;line-height:.86;letter-spacing:-.005em;
  font-size:clamp(30px,5.4vw,62px);margin:0 0 16px;
  /* 🔴 Gemessen 25.08.2026: „GESCHÄFTSBEDINGUNGEN" ist ein einzelnes Wort von
     1085 px bei 62 px und „wdth" 122 — es passte in keine Textspalte und
     schob die ganze Seite auf 1409 px Breite (Fenster: 1280). Ein waagerecht
     scrollendes Rechtsdokument ist ein Fehler, kein Detail.
     Behoben wie auf der Hauptseite: Der Grad bleibt, die BREITENACHSE weicht.
     Breite und Gewicht sind in dieser Designwelt das Ausdrucksmittel — kleiner
     setzen waere der einfachere, aber falsche Weg.
     `overflow-wrap` ist nur das Sicherheitsnetz fuer den Fall, dass ein noch
     laengeres Wort dazukommt; es greift erst, wenn sonst nichts mehr geht. */
  overflow-wrap:break-word;
}
@media (max-width:1100px){ h1{font-variation-settings:"wdth" 100,"wght" 800} }
@media (max-width:700px){  h1{font-variation-settings:"wdth" 88,"wght" 800} }
.stand{margin:0 0 clamp(24px,4vw,40px);color:var(--fg-45);font-size:12px;
  line-height:1.65}

/* --- Sprachleiste — reine Anker, kein Skript -------------------------- */
.langbar{display:flex;flex-wrap:wrap;gap:10px;
  margin:0 0 clamp(28px,5vw,52px);
  padding-bottom:clamp(20px,3vw,28px);border-bottom:1px solid var(--rule)}
.langbar a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 18px;
  border:1px solid var(--fg);border-radius:var(--radius);
  color:var(--fg);text-decoration:none;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 700;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.langbar a:hover,.langbar a:focus-visible{background:var(--fg);color:var(--bg)}

/* --- Sprachabschnitt -------------------------------------------------- */
.fassung{padding-top:clamp(20px,4vw,36px)}
.fassung + .fassung{margin-top:clamp(48px,8vw,96px);
  border-top:1px solid var(--rule)}
.fassung > .label{display:block;margin:0 0 14px}

/* --- Textkoerper ------------------------------------------------------ */
h2{
  font-variation-settings:"wdth" 118,"wght" 800;
  text-transform:uppercase;letter-spacing:.01em;line-height:1.1;
  font-size:clamp(19px,2.6vw,30px);
  margin:clamp(40px,6vw,64px) 0 14px;max-width:var(--lese);
}
h3{
  font-variation-settings:"wdth" 104,"wght" 650;
  font-size:clamp(15px,1.7vw,18px);line-height:1.35;
  margin:clamp(26px,4vw,38px) 0 10px;max-width:var(--lese);
}
h2 + h3{margin-top:20px}
p,li,dd,dt{max-width:var(--lese)}
p{margin:0 0 14px}
strong{font-variation-settings:"wdth" 100,"wght" 650;color:var(--fg)}
em{font-style:italic}
ul,ol{margin:0 0 14px;padding-left:22px}
li{margin:0 0 8px}
hr{border:0;border-top:1px solid var(--rule-soft);margin:clamp(28px,5vw,44px) 0}

/* Anschriftenblock und Formular: Zeilenumbrueche stehen im Markup, nicht
   im Satz. Deshalb hier kein Fliesstext-Abstand zwischen den Zeilen. */
.adresse{margin:0 0 18px;max-width:var(--lese)}
/* 🔴 Nachfahrenselektor waere hier falsch. `.adresse span` traf am 25.08.2026
   auch das `.tm` in „AiLaik™" — das ™ wurde dadurch zum Block und stand
   allein in einer eigenen Zeile. Nur die direkten Kinder sind Zeilen.
   Gefunden am iPhone-Format, nicht am Schreibtisch. */
.adresse > span{display:block}

/* --- Kasten fuer das Muster-Widerrufsformular ------------------------- */
.formular{
  border:1px solid var(--rule);border-radius:var(--radius);
  padding:clamp(18px,3vw,28px);margin:0 0 18px;max-width:var(--lese);
}
.formular p{margin:0 0 12px}
.formular p:last-child{margin-bottom:0}
.formular .zeile{color:var(--fg-45)}

/* --- Hinweis auf die Uebersetzung ------------------------------------- */
.cvnote{
  border:1px solid var(--rule);border-radius:var(--radius);
  padding:14px 16px;margin:0 0 clamp(24px,4vw,36px);max-width:var(--lese);
}
.cvnote .label{display:block;margin:0 0 6px}
.cvnote p{margin:0;font-size:13.5px;line-height:1.6;color:var(--fg-70)}

/* --- Offene Stelle aus der Quelle ------------------------------------- */
/* Eckige Klammern stehen in der geprueften Fassung selbst. Sie werden hier
   NICHT gefuellt — sie werden sichtbar gemacht, damit niemand sie fuer
   fertigen Text haelt. */
.offen{border-bottom:1px dashed var(--fg-45);color:var(--fg-70)}

/* --- Redaktioneller Hinweis ------------------------------------------- */
.hinweis{
  border-left:1px solid var(--rule);
  padding:2px 0 2px 16px;margin:0 0 18px;max-width:var(--lese);
  font-size:12px;line-height:1.65;color:var(--fg-45);
}
.hinweis p{margin:0 0 6px;font-size:inherit;line-height:inherit}
.hinweis p:last-child{margin-bottom:0}

/* --- Fusszeile -------------------------------------------------------- */
footer{
  border-top:1px solid var(--rule);
  padding:20px var(--gut) calc(20px + env(safe-area-inset-bottom));
  display:flex;flex-wrap:wrap;gap:16px 22px;justify-content:space-between;
  align-items:center;
}
.legalnav{display:flex;flex-wrap:wrap;gap:4px 18px}
.legalnav a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  font-variation-settings:"wdth" 88,"wght" 700;
  color:var(--fg-45);text-decoration:none;
  transition:color .18s var(--ease);
}
.legalnav a:hover,.legalnav a:focus-visible{color:var(--fg)}
.legalnav a[aria-current="page"]{color:var(--fg)}

/* --- Telefonfassung --------------------------------------------------- */
@media (max-width:760px){
  header.top{flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
  main{padding-left:20px;padding-right:20px}
  footer{flex-direction:column;align-items:flex-start;gap:8px}
  .legalnav{gap:0 16px}
}

/* =====================================================================
   DRUCK

   Anwaeltinnen und Kunden drucken diese Seiten — das ist der Grund,
   warum es diesen Block gibt und nicht bloss ein `filter:invert`.
   Umgeschaltet werden die TOKENS, nicht die Regeln: so bleibt jede
   Deckungsstufe an ihrer Stelle und kein Wert wird doppelt gepflegt.
   Navigation und Sprachleiste verschwinden — auf Papier gibt es keinen
   Sprung und keinen Ruecklink.
   ===================================================================== */
@media print{
  :root{
    --bg:#fff; --bg-deep:#fff;
    --fg:#000;
    --fg-70:#333;
    --fg-45:#555;
    --fg-22:#999;
    --rule:#000;
    --rule-soft:#bbb;
    --lese:none;
  }
  html,body{background:#fff;color:#000}
  body{font-size:10.5pt;line-height:1.5}
  header.top,footer .legalnav,.langbar,.skip,.back{display:none !important}
  main{max-width:none;margin:0;padding:0}
  p,li,h2,h3,.adresse,.formular,.cvnote,.hinweis{max-width:none}
  h1{font-size:22pt;margin-bottom:4pt}
  h2{font-size:13pt;margin:16pt 0 6pt}
  h3{font-size:11pt;margin:12pt 0 4pt}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  p,li{orphans:3;widows:3}
  .fassung + .fassung{break-before:page;page-break-before:always;
    margin-top:0;border-top:0;padding-top:0}
  .formular,.cvnote,.hinweis{break-inside:avoid;page-break-inside:avoid}
  footer{border-top:1px solid #000;padding:8pt 0 0;margin-top:16pt}
  /* Auf Papier ist ein Link ohne Ziel wertlos — die Adresse wird gesetzt. */
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555}
  a{color:#000;text-decoration:none}
}