/* Stilblatt der Installationsseiten.

   Es liegt als eigene Datei und nicht als <style> im Kopf, weil die Regel
   `default-src 'none'; style-src 'self'` gilt (Master-Plan §7.1): ein Browser wirft einen
   Stilblock im Dokument damit weg, eine Datei vom eigenen Ursprung nicht.

   Keine fremde Schrift und kein Bild: `font-src` und `img-src` sind über `default-src 'none'`
   gesperrt, und ein Aufruf nach außen erzeugte einen Verweis-Kopf mit dem Token darin
   (docs/SECURITY.md §5.4). Deshalb der Schriftstapel des Geräts. Die Marke trägt Figtree; auf
   dieser Seite ist sie bewusst nicht geladen.

   Farben aus der Marke: Rot #C52330, Schrift #1D1D1B, Linien #DFDFDF.

   **Jede Fläche steht als Token**, damit der Dunkelmodus sie mitziehen kann: ein fester
   Wert in einer Regel bleibt dort stehen, während die Schrift umschaltet. Feste Werte
   gibt es nur noch dort, wo sie nicht wandern dürfen oder sollen — der weiße Grund des
   QR (Ruhezone für die Kamera) und die aufgehellten Marken- und Knopffarben im
   Dunkelmodus selbst. */

:root {
  --gc-rot: #c52330;
  --gc-text: #1d1d1b;
  --gc-linie: #dfdfdf;
  --gc-grund: #ffffff;
  /* Leise Schrift: Fußnoten und Zustände. 6,9:1 auf Weiß, AA erfüllt. */
  --gc-leise: #5a5a58;
  /* Die beiden abgesetzten Flächen. Sie sind Token und keine festen Werte, weil der
     Dunkelmodus sie sonst nicht mitzieht: eine hart notierte helle Fläche behält dort
     ihren Wert, während die Schrift auf Hell umschaltet — gemessen 1,87:1. */
  --gc-merkflaeche: #fbf4f5;
  /* Dieselbe Beige-Fläche wie der Kontoblock der Startseite (Theme, `gc-konto`).
     Der Kunde soll die beiden Flächen als denselben Ort erkennen. */
  --gc-kontoflaeche: #f3ece2;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 1.5rem 1rem 3rem;
  background: var(--gc-grund);
  color: var(--gc-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
}

.karte {
  max-width: 34rem;
  margin: 0 auto;
}

/* Der Kopfbereich. Bis zum 04.09.2026 stand hier das Wort „GURBETCICARD" in Versalien —
   ein Text, keine Marke. Jetzt traegt er die Wortmarke als Pfade (`marke.svg`).

   `color` auf `.kopf` ist kein Schmuck: die Wortmarke erbt ihre Fuellung ueber
   `currentColor`. Eine Farbaenderung hier faerbt das Zeichen mit, im Dunkelmodus
   ebenso. */
.kopf {
  margin: 0 0 1.5rem;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--gc-linie);
  color: var(--gc-rot);
}

/* Hoehe statt Breite: Das Zeichen ist knapp fuenfmal so breit wie hoch; ueber die Hoehe
   bleibt es auf jedem Geraet gleich schwer. 1,6rem entspricht rund 26 px und damit der
   Zeilenhoehe einer Ueberschrift. */
.marke__zeichen {
  display: block;
  height: 1.6rem;
  width: auto;
}

@media (min-width: 30rem) {
  .marke__zeichen {
    height: 1.85rem;
  }
}

h1 {
  margin: 0 0 0.75rem;
  font-size: 1.6rem;
  line-height: 1.25;
}

h2 {
  margin: 2rem 0 0.5rem;
  font-size: 1.15rem;
}

/* Die beiden Wege („QR-Code scannen" und „Von Hand eingeben") sind Unterpunkte des einen
   Abschnitts und keine eigenen Kapitel: eine dritte Ebene, die sich vom Fließtext abhebt,
   ohne mit den Abschnittsüberschriften zu konkurrieren. */
h3 {
  margin: 1.4rem 0 0.35rem;
  font-size: 1.02rem;
}

p {
  margin: 0 0 1rem;
}

ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

li {
  margin-bottom: 0.4rem;
}

/* Der QR steht auf weißem Grund mit Ruhezone; ohne den weißen Rahmen lesen ihn manche
   Kameras bei dunkler Umgebung des Browsers nicht. */
.qr {
  margin: 1.25rem 0;
  padding: 0.75rem;
  background: #ffffff;
  border: 1px solid var(--gc-linie);
  border-radius: 0.5rem;
  text-align: center;
}

.qr svg {
  width: 100%;
  max-width: 15rem;
  height: auto;
}

.daten {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gc-linie);
  border-radius: 0.5rem;
}

/* Die Anleitung je Gerät. Zugeklappt, weil die Kundin genau eines der beiden Geräte hat;
   `details` braucht dafür kein Skript und läuft damit unter `default-src 'none'`. Es ist
   dasselbe Muster wie die FAQ im Laden (`theme/sections/gc-faq.liquid`).

   **Eine Trennlinie und kein Kasten**, und das ist die Korrektur aus der Designkritik
   dieser Runde: Mit Rahmen und Radius sahen die beiden Blöcke aus wie die Datenfläche
   darüber, und untereinander standen dann sechs gerahmte Flächen (QR, Daten, iPhone,
   Android, Merksatz, Konto). Ein Rahmen sagt „hier steht etwas zusammen"; diese beiden
   Zeilen sagen aber „hier kannst du tippen". Als Zeilen einer Liste sind sie das eine,
   ohne das andere zu behaupten.

   Die Zeile ist ein Tippziel und hält deshalb 44 px wie der Knopf der Übersicht (D-5).
   Der eigene Marker des Browsers ist abgeschaltet, weil er links steht und die
   Beschriftung einrückt; das Zeichen rechts trägt dieselbe Auskunft und lässt den Text
   an der Fluchtlinie der Seite. */
.geraet {
  border-top: 1px solid var(--gc-linie);
}

.geraet:last-of-type {
  border-bottom: 1px solid var(--gc-linie);
  margin-bottom: 1.5rem;
}

.geraet > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 0.5rem 0;
  cursor: pointer;
  list-style: none;
}

/* Die Beschriftung ist eine Überschrift, nicht nur fette Schrift: Ohne sie springt die
   Überschriftenliste eines Vorlesewerkzeugs von „Zwei Wege" direkt zum Merksatz und
   überspringt genau die beiden Abschnitte, die die Anleitung tragen. Größe und Gewicht
   bleiben die der Zeile, damit sich am Bild nichts ändert. */
.geraet summary h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.geraet > summary::-webkit-details-marker {
  display: none;
}

/* Plus und Minus statt Pfeil: dasselbe Zeichen wie im FAQ-Akkordeon des Ladens. Die Farbe
   ist die Markenfarbe, weil das Zeichen die einzige Bedienauskunft der Zeile ist. */
.geraet > summary::after {
  content: "+";
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--gc-linie);
  border-radius: 50%;
  color: var(--gc-rot);
  font-weight: 400;
  line-height: 1.45rem;
  text-align: center;
}

.geraet[open] > summary::after {
  content: "\2212";
}

.geraet > summary:focus-visible {
  outline: 2px solid var(--gc-rot);
  outline-offset: 2px;
}

/* Der aufgeklappte Text steht auf derselben Fluchtlinie wie der Rest der Seite. Mit dem
   Kasten war er um dessen Innenabstand eingerückt und brach die linke Kante. */
.geraet p,
.geraet ol,
.geraet ul {
  margin: 0 0 0.75rem;
}

.geraet ol,
.geraet ul {
  padding-left: 1.25rem;
}

/* Drei Rollen, drei Klassen — und genau eine davon darf laut sein.
   Bis zum 04.09.2026 trug `.hinweis` alle drei: den Merksatz, die Fußnote und die
   Einladung ins Konto. Alle drei sahen damit aus wie eine Warnung, während die
   Frist — die einzige echte Warnung der Seite — als graue Kleinschrift dastand.
   Rot trägt hier drei Rollen (Handlung, Auswahl, Fehler, DK-13); als Kante steht es
   nur da, wo etwas auf dem Spiel steht. */

/* DEC-054: Der Merksatz, dass die eSIM erst im türkischen Netz aktiv wird. Er steht
   abgesetzt und nicht als weiterer Absatz — wer die drei Schritte abgearbeitet hat und
   dann ein Handy sieht, das dauerhaft „Aktivieren" anzeigt, muss die Erklärung finden,
   ohne zu suchen. Die Markenfarbe trägt hier keine Warnung, sondern Aufmerksamkeit. */
.merksatz {
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--gc-rot);
  background: var(--gc-merkflaeche);
  border-radius: 0 0.5rem 0.5rem 0;
}

.merksatz h2 {
  margin-top: 0;
}

.merksatz p:last-child {
  margin-bottom: 0;
}

/* DEC-065: Die Einladung ins Konto. Sie ist kein Alarm, sondern ein Angebot, und seit
   dem Wegfall der Erinnerungsmails der einzige Ort, an dem der Kunde seinen Stand
   nachsehen kann. Deshalb eine eigene ruhige Fläche statt der Warnfarbe. */
.konto {
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--gc-kontoflaeche);
  border-radius: 0.5rem;
  color: var(--gc-text);
}

.konto:last-child {
  margin-bottom: 0;
}

.daten dt {
  font-weight: 600;
}

.daten dd {
  margin: 0 0 0.75rem;
}

.daten dd:last-child {
  margin-bottom: 0;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Lange Werte brechen um, statt die Seite auf dem Handy breit zu machen. */
  overflow-wrap: anywhere;
}

.liste {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.liste li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--gc-linie);
}

.nummer {
  font-weight: 600;
}

/* Am 04.09.2026 war dieser Knopf 39 px hoch gemessen. Auf dem Handy ist er der einzige
   Weg zur eigenen eSIM, und 44 px ist die Mindestgröße eines Tippziels. */
.knopf {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.45rem 1rem;
  background: var(--gc-rot);
  color: #ffffff;
  border-radius: 0.35rem;
  text-decoration: none;
  font-weight: 600;
}

/* Der einzige Bedienweg dieser Seiten braucht einen sichtbaren Fokus (DESIGN-SYSTEM §5).
   Der Vorgabering des Browsers verschwindet auf der roten Fläche fast; der Abstand hebt
   ihn heraus, und ``:focus-visible`` zeigt ihn nur bei Tastaturbedienung. */
.knopf:focus-visible {
  outline: 2px solid var(--gc-text);
  outline-offset: 2px;
}

/* Die Zeile ohne Link: „Kein Link vorhanden" gehört an dieselbe Kante wie die Knöpfe
   darüber, sonst bricht die eine Zeile ohne Knopf das Raster der Liste. */
.ohne-knopf {
  margin-left: auto;
}

/* Leise: was man lesen kann, aber nicht muss. */
.fussnote,
.zustand {
  color: var(--gc-leise);
  font-size: 0.9rem;
}

.fussnote {
  margin: 0 0 0.75rem;
}

/* Die Frist ist die einzige Warnung, die diese Seiten noch tragen: seit dem Wegfall der
   Erinnerungsmails (DEC-065, Owner 04.09.2026) gibt es keine zweite Ansage mehr. Sie stand
   bis heute als graue Kleinschrift unter der Überschrift — kleiner und blasser als jeder
   normale Satz der Seite (gemessen 14,4 px gegen 16 px, 6,9:1 gegen 16:1).
   Jetzt trägt sie dieselbe rote Kante wie die Kaufbox im Theme (`.gc-frist`) — aber
   **keine Fläche**: mit Fläche sähe sie aus wie der Merksatz darunter, und zwei Kästen
   gleichen Gewichts sagen dem Auge nicht mehr, welcher der wichtigere ist. Die Kante
   zeichnet aus, die Fläche klammert mehrere Absätze zusammen; die Frist ist ein Satz. */
.frist {
  margin: 0 0 1.25rem;
  padding: 0 0 0 0.9rem;
  border-left: 3px solid var(--gc-rot);
  color: var(--gc-text);
  font-weight: 600;
}

/* Der Dunkelmodus zieht die Flächen mit. Vor dem 04.09.2026 tat er das nicht: die
   Schrift wechselte auf Hellgrau, die Kastenfläche blieb auf ihrem festen Rosa stehen —
   gemessen 1,87:1 für den Text und 1,03:1 für die Überschrift „Wichtig: Die eSIM wird
   erst in der Türkei aktiv". Das ist Weiß auf Weiß; der Merksatz aus DEC-054 war im
   Dunkelmodus unlesbar, und mit ihm der Hinweis auf das Konto. */
@media (prefers-color-scheme: dark) {
  :root {
    --gc-text: #f2f2f0;
    --gc-grund: #17171a;
    --gc-linie: #3a3a3d;
    --gc-leise: #b6b6b4;
    --gc-merkflaeche: #241b1d;
    --gc-kontoflaeche: #22201d;
  }

  /* Die Wortmarke erbt diese Farbe ueber `currentColor`. #C52330 auf #17171A ist
     2,55:1 und damit als Markenzeichen zu dunkel; #FF6B73 traegt 5,74:1. */
  .kopf {
    color: #ff6b73;
  }

  /* Rot als Kante trägt im Dunkeln zu wenig: #C52330 auf #241B1D ist 2,93:1.
     Dieselbe Aufhellung wie bei Marke und Knopf. */
  .merksatz,
  .frist {
    border-left-color: #ff6b73;
  }

  /* Dasselbe für das Plus-Zeichen der Geräteblöcke. Die Zahlen, nachgerechnet:
     #C52330 auf #17171A trägt **3,12:1** und reichte damit knapp für ein reines
     Bedienelement (WCAG 1.4.11 verlangt 3:1). Nur ist das Zeichen kein Kästchen, sondern
     ein Schriftzeichen bei 16 px, und als Text verlangt WCAG 1.4.3 **4,5:1** — die
     reißt es. #FF6B73 trägt hier **6,48:1**. Dieselbe Aufhellung wie bei Marke, Knopf
     und den beiden roten Kanten, aus demselben Grund. */
  .geraet > summary::after {
    color: #ff6b73;
  }

  .geraet > summary:focus-visible {
    outline-color: #ff6b73;
  }

  .knopf {
    background: #ff6b73;
    color: #17171a;
  }
}

/* Das Paketvolumen in der Uebersicht. Es steht bei der Nummer und traegt deren
   Gewicht nicht: die Nummer benennt die Zeile, das Volumen sagt, welche eSIM gemeint
   ist. Beide zusammen sind das Merkmal, mit dem eine Kundin ihre zweite eSIM
   wiederfindet. */
.paket {
  margin-left: 0.45rem;
  color: var(--gc-leise);
  font-weight: 400;
  white-space: nowrap;
}

/* Der Bezeichner nach DEC-068: der Name, den die kaufende Person dieser eSIM selbst
   gegeben hat. Er steht zwischen Nummer und Volumen und traegt mehr Gewicht als beide —
   er ist das Merkmal, nach dem sie sucht, waehrend Nummer und Volumen es nur belegen.
   Kein `white-space: nowrap` wie beim Volumen: ein frei gewaehlter Text kann lang sein,
   und ein Umbruch ist besser als ein Ueberlauf aus der Karte. */
.bezeichner {
  margin-left: 0.45rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* --- Widerrufsfläche nach § 356a BGB (gc_core/widerruf.py) -------------------------

   Dieselbe Karte, dieselben Token, dieselbe Schrift wie die Installationsseiten. Es gibt
   keinen zweiten Stil und kein zweites Stilblatt: die Kundin sieht dieselbe Marke, und
   eine zweite Datei wäre eine zweite Stelle, an der der Dunkelmodus vergessen wird.

   Neu sind nur die Regeln, die ein Formular braucht. */

/* Die Schrittzeile („Schritt 1 von 2"). Sie steht über der Überschrift, wie im
   Konfigurator des Ladens (DESIGN-SYSTEM, Maße vom 04.09.2026), und ist die einzige
   Auskunft darüber, dass noch ein Schritt folgt. */
.schrittzeile {
  margin: 0 0 0.35rem;
  color: var(--gc-leise);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.formular {
  margin: 1.5rem 0 0;
}

.formular--zurueck {
  margin-top: 0.75rem;
}

/* Beschriftung über dem Feld und nicht daneben: auf 375 px steht daneben nichts. */
.feld {
  display: block;
  margin: 0 0 1.25rem;
}

.feld__name {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.feld__hilfe {
  display: block;
  margin-top: 0.35rem;
  color: var(--gc-leise);
  font-size: 0.9rem;
}

/* 44 px Mindesthöhe wie beim Knopf (D-5) und 16 px Schriftgröße: darunter zoomt iOS beim
   Antippen in das Feld hinein und verschiebt die ganze Seite. */
.feld input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--gc-linie);
  border-radius: 0.35rem;
  background: var(--gc-grund);
  color: var(--gc-text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
}

.feld input:focus-visible {
  outline: 2px solid var(--gc-rot);
  outline-offset: 1px;
  border-color: var(--gc-rot);
}

/* Der hervorgehobene Knopf der Fläche. § 356a verlangt eine „hervorgehobene" Funktion;
   volle Breite und Markenfarbe sind hier keine Geschmacksfrage. */
.knopf--voll {
  display: flex;
  width: 100%;
  justify-content: center;
  border: none;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
}

/* Der zweite Weg („Angaben ändern") sieht aus wie ein Weg zurück und nicht wie eine
   zweite Handlung: Rot trägt auf dieser Seite die eine Handlung, die zählt. */
.knopf--leise {
  display: flex;
  width: 100%;
  justify-content: center;
  min-height: 44px;
  padding: 0.45rem 1rem;
  border: 1px solid var(--gc-linie);
  border-radius: 0.35rem;
  background: transparent;
  color: var(--gc-text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.knopf--leise:focus-visible {
  outline: 2px solid var(--gc-rot);
  outline-offset: 2px;
}

/* Designkritik 04.09.2026, erste Runde: Der Fristsatz stand als **vierzeiliger** fetter
   Block unter einer fetten Überschrift, dazu fette Feldbeschriftungen darunter. Auf der
   Installationsseite trägt `.frist` einen Satz und darf laut sein; hier ist sie ein
   Absatz, und vier fette Zeilen sind eine Wand statt einer Betonung. Die rote Kante
   trägt die Auszeichnung allein weiter. */
.frist--absatz {
  font-weight: 400;
}

/* Zweite Korrektur derselben Runde: Die Fußnote klebte ohne Abstand unter dem Knopf und
   las sich wie seine Beschriftung. Sie gehört zur Seite, nicht zum Knopf. */
.formular + .fussnote {
  margin-top: 1.5rem;
}

/* Die Fehlermeldung des Formulars. Rot als Kante, nicht als Fläche: dieselbe Regel wie
   bei der Frist, damit nicht zwei Kästen um dieselbe Aufmerksamkeit ringen. */
.fehler {
  margin: 0 0 1.25rem;
  padding: 0 0 0 0.9rem;
  border-left: 3px solid var(--gc-rot);
  font-weight: 600;
}

/* Die Lage auf der Eingangsseite ist ein normaler Absatz und bewusst nichts Lauteres:
   sie sagt, was als Nächstes geschieht, und ist keine Warnung. */
.lage {
  margin: 0 0 1.5rem;
}

/* Die Angabenliste im Merksatz trägt keinen eigenen Rahmen: sie steht schon in einem. */
.daten--blank {
  margin: 0.75rem 0 0;
  padding: 0;
  border: none;
}

/* Das Fallenfeld des Bot-Gates. **Nicht** `display: none` und nicht `hidden`: ein Feld,
   das gar nicht im Rendering steht, überspringen viele Werkzeuge, und genau die sollen
   es ausfüllen. Aus dem Blickfeld geschoben statt entfernt. */
.falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (prefers-color-scheme: dark) {
  /* Dieselbe Aufhellung wie bei Marke, Knopf und den roten Kanten: #C52330 trägt auf
     #17171A nur 2,55:1 und ist als Rahmen einer Eingabe im Fokus nicht erkennbar. */
  .feld input:focus-visible {
    outline-color: #ff6b73;
    border-color: #ff6b73;
  }

  .knopf--leise:focus-visible {
    outline-color: #ff6b73;
  }

  .fehler {
    border-left-color: #ff6b73;
  }
}