/* ===========================================================================
   s'Kis Studio — ein Stylesheet für alle Seiten des Hauses
   (Startseite, Impressum, Datenschutz, Nutzungsbedingungen)

   Token-Block wörtlich aus CRATELAB_DESIGN_UEBERNAHME_2026-08-14.md,
   Abschnitt 2. Ergänzungen sind einzeln markiert und in
   KONZEPT_STARTSEITE_S-KIS-STUDIO_2026-08-18.md begründet.

   AUSSERHALB DIESER DATEI STEHT KEINE FARBE UND KEINE GRÖSSE.
   =========================================================================== */

:root{
  /* ---- Bühne in Studio-Braun ---- */
  --bg:            #1b110a;
  --panel:         #26190f;
  --panel-border:  #3b2c1e;
  --kante-stark:   #84705a;
  --feld:          #2d2015;
  --tief:          #150d07;

  /* ---- Schrift ---- */
  --text:      #fff9ef;
  --text-dim:  #f2ddc7;
  --heading:   #fffefb;

  /* ---- Werkstatt-Orange, eine Stimme in drei Helligkeiten ---- */
  --accent:        #e8833a;
  --accent-aktion: #b85f1f;
  --accent-text:   #f7b27b;
  --accent-dim:    rgba(232, 131, 58, 0.15);

  /* ---- Signalfarben ---- */
  --erledigt: #6fd0a0;
  --warn:     #e6b257;
  --fehler:   #ff9c8a;

  /* ---- Gold: Grafik und Schrift getrennt (Konzept 3.4, APCA gemessen) ---- */
  --gold:      #C69258;   /* Marken-GRAFIK: Logo, Kante am Seefalke-Band */
  --gold-text: #E5BE8C;   /* Gold ALS SCHRIFT — Lc 70,5 auf der Bühne */

  /* ---- Ecken-Radien ---- */
  --r-sm:    6px;
  --r-md:    8px;
  --r-lg:   10px;
  --r-xl:   12px;
  --r-2xl:  16px;
  --r-pille: 999px;

  /* ---- Abstände ---- */
  --sp-hauch:  2px;
  --sp-eng:    4px;
  --sp-knapp:  6px;
  --sp:        8px;
  --sp-weit:  10px;
  --sp-block: 16px;
  --sp-gross: 20px;
  --sp-raum:  40px;   /* + Schaufenster-Stufe: zwischen Abschnitten */
  --sp-luft:  64px;   /* + Schaufenster-Stufe: um den Aufmacher */

  /* ---- Wurzel ---- */
  font-size: 100%;                 /* Schriftgröße gehört dem Nutzer */
  font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
}
*{ box-sizing: border-box; }
body{ margin:0; }

/* Der Raum: Studio-Braun mit einem Hauch Licht über der Bühne */
body{
  background: radial-gradient(120% 70% at 50% 0%, #2e1c0e 0%, var(--bg) 62%) no-repeat;
  background-color: var(--bg);
  min-height: 100vh;
  min-height: 100svh;
}
.blatt{ max-width: 1060px; margin: 0 auto; padding: 0 var(--sp-gross); }
.blatt--schmal{ max-width: 44rem; }

/* ---------- Kopfzeile ---------- */
.kopf{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--sp-block);
  padding: var(--sp-gross) 0;
}
.marke{ display:flex; align-items:center; gap: var(--sp-weit); text-decoration:none; }
.marke img{ display:block; width:92px; height:auto; }
.marke-haus{
  /* „Studio" steht in der Schrift der Labs (Entscheidung 18.08.): dieselbe
     Optik wie „CrateLab" und „ScaleLab" in deren Kopfzeilen. Damit ist die
     Saonara-Lizenzfrage vom Tisch — gesetzt wird nur die Systemschrift,
     die gekaufte Wortmarke daneben bleibt Vektor. */
  font-size: 1.125rem;                /* 18 px — wie ein Lab-Name */
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
}
.kopf-link{
  font-size: 0.8125rem;               /* 13 px — Arbeitsgröße */
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.kopf-link:hover{ color: var(--accent-text); border-bottom-color: var(--accent); }

/* ---------- Aufmacher ---------- */
.aufmacher{ padding: var(--sp-luft) 0 var(--sp-raum); max-width: 34rem; }
h1{
  margin: 0 0 var(--sp-block);
  font-size: clamp(1.75rem, 5.2vw, 2.75rem);   /* 28 → 44 px */
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--heading);
}
.vorspann{
  margin: 0 0 var(--sp-block);
  font-size: 1.125rem;                /* 18 px */
  line-height: 1.55;
  color: var(--text-dim);
}
.vorspann strong{ color: var(--text); font-weight: 600; }

/* ---------- Abschnitte ---------- */
section{ padding-bottom: var(--sp-raum); }
h2{
  margin: 0 0 var(--sp-block);
  font-size: 0.8125rem;               /* 13 px, Versalien — Rang über FORM */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--text-dim);
}

/* ---------- Die Lab-Karten ---------- */
.labs{
  display:grid; gap: var(--sp-block);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.labs > li{ display:flex; }          /* damit beide Karten gleich hoch sind */
.lab{
  flex: 1;
  display:flex; flex-direction:column; gap: var(--sp-weit);
  background: var(--panel);
  border: 1px solid var(--kante-stark);
  border-radius: var(--r-2xl);
  padding: var(--sp-gross);
  text-decoration: none;
  color: inherit;
}
a.lab:hover{ border-color: var(--accent); background: var(--feld); }
a.lab:focus-visible{ outline: 3px solid var(--accent); outline-offset: 3px; }
.lab-kopf{ display:flex; align-items:center; gap: var(--sp-weit); }
.lab-kopf img{ display:block; width:34px; height:34px; border-radius: var(--r-md); }
.lab-name{
  font-size: 1.125rem;                /* 18 px */
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--heading);
}
.lab-satz{ margin:0; font-size: 0.9375rem; line-height:1.5; color: var(--text-dim); }
.lab-fuss{
  margin-top: auto; padding-top: var(--sp-weit);
  display:flex; align-items:center; justify-content:space-between; gap: var(--sp);
  border-top: 1px solid var(--panel-border);
}
.lab-tuer{ font-size: 0.8125rem; font-weight:600; color: var(--accent-text); }
a.lab:hover .lab-tuer{ text-decoration: underline; }

/* Merker: sagt, woran man ist — nie im Wegweiser-Orange */
.merker{
  display:inline-flex; align-items:center; gap: var(--sp-knapp);
  font-size: 0.6875rem;               /* 11 px */
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
  color: var(--text-dim);
  background: var(--tief);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-pille);
  padding: 3px 9px;
}
.merker::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background: var(--erledigt);        /* grün: steht offen */
}
.merker--bald::before{ background: var(--warn); }   /* Bernstein: noch nicht */

/* Karte ohne Tür: sieht gleich aus, ist aber kein Link */
.lab--bald{ border-style: dashed; }
.lab--bald .lab-tuer{ color: var(--text-dim); font-weight: 400; }

/* ---------- Werkbank: was gerade geschmiedet wird ---------- */
.schmiede{
  display:grid; gap: var(--sp-weit);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin:0; padding:0; list-style:none;
}
.schmiede li{
  background: var(--tief);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-xl);
  padding: var(--sp-weit) var(--sp-block);
  font-size: 0.875rem;                /* 14 px */
  color: var(--text-dim);
}
.schmiede b{ display:block; color: var(--text); font-weight:600; font-size:0.9375rem; }

/* ---------- Das Seefalke-Band (Kasse + fertige Modelle + Guthaben) ---------- */
.seefalke{
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-2xl);
  padding: var(--sp-gross);
}
.seefalke > p{
  margin: 0 0 var(--sp-block);
  max-width: 40rem;
  font-size: 0.9375rem; line-height:1.55; color: var(--text-dim);
}
.seefalke strong{ color: var(--text); font-weight:600; }
.tueren{
  display:grid; gap: var(--sp-block);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin:0; padding:0; list-style:none;
}
.tueren > li{ display:flex; }
.tuer{
  flex:1;
  display:flex; flex-direction:column; gap: var(--sp-knapp);
  background: var(--tief);
  border: 1px solid var(--kante-stark);
  border-radius: var(--r-xl);
  padding: var(--sp-block);
  text-decoration:none; color: inherit;
}
a.tuer:hover{ border-color: var(--accent); background: var(--feld); }
a.tuer:focus-visible{ outline: 3px solid var(--accent); outline-offset: 3px; }
.tuer-name{ font-size: 1rem; font-weight:600; color: var(--heading); }
.tuer p{ margin:0; font-size: 0.875rem; line-height:1.5; color: var(--text-dim); }
.tuer-fuss{ margin-top:auto; padding-top: var(--sp-knapp); font-size:0.8125rem; font-weight:600; color: var(--accent-text); }
a.tuer:hover .tuer-fuss{ text-decoration: underline; }
.tuer--bald{ border-style: dashed; }
.tuer--bald .tuer-fuss{ color: var(--text-dim); font-weight:400; }

/* ---------- Wer wir sind ---------- */
.werkstatt p{ margin:0 0 var(--sp-weit); max-width: 38rem; font-size:0.9375rem; line-height:1.6; color: var(--text-dim); }
.werkstatt strong{ color: var(--text); font-weight:600; }

/* ---------- Fuß ---------- */
footer{
  border-top: 1px solid var(--panel-border);
  padding: var(--sp-gross) 0 var(--sp-raum);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: var(--sp-block);
}
.absender{
  margin:0;
  font-size: 0.875rem;                /* 14 px — Gold braucht eine Stufe mehr */
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gold-text);            /* Gold trägt NUR die Absenderzeile */
}
.rechtliches{ display:flex; flex-wrap:wrap; gap: var(--sp-gross); }
.rechtliches a{ font-size:0.8125rem; color: var(--text-dim); text-decoration:none; }
.rechtliches a:hover{ color: var(--accent-text); text-decoration: underline; }
.rechtliches a:focus-visible{ outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------- Textseiten (Impressum, Datenschutz, Nutzungsbedingungen) ------- */
.text{ padding: var(--sp-raum) 0 var(--sp-raum); }
.text h1{ font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: var(--sp-weit); }
.text .stand{
  margin: 0 0 var(--sp-raum);
  font-size: 0.8125rem; color: var(--text-dim);
}
.text h2{
  /* auf Textseiten ist die Überschrift eine ÜBERSCHRIFT, keine Etikettenzeile */
  margin: var(--sp-raum) 0 var(--sp-weit);
  font-size: 1.125rem;                /* 18 px */
  text-transform: none; letter-spacing: -0.01em;
  color: var(--heading);
}
.text h3{
  margin: var(--sp-gross) 0 var(--sp-knapp);
  font-size: 0.9375rem; font-weight:600; color: var(--text);
}
.text p, .text li{ font-size: 0.9375rem; line-height: 1.65; color: var(--text-dim); }
.text p{ margin: 0 0 var(--sp-weit); }
.text ul{ margin: 0 0 var(--sp-weit); padding-left: var(--sp-gross); }
.text li{ margin-bottom: var(--sp-knapp); }
.text strong{ color: var(--text); font-weight: 600; }
.text a{ color: var(--accent-text); }
.text a:focus-visible{ outline: 3px solid var(--accent); outline-offset: 2px; }
.text .kasten{
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-left: 3px solid var(--kante-stark);
  border-radius: var(--r-xl);
  padding: var(--sp-block) var(--sp-gross);
  margin: 0 0 var(--sp-gross);
}
.text .kasten p:last-child{ margin-bottom: 0; }
/* Entwurf-Kasten: sichtbar, solange ein Text noch nicht geprüft ist */
.text .entwurf{ border-left-color: var(--warn); }
.text .entwurf b{ color: var(--warn); }
.zurueck{
  display:inline-block; margin-top: var(--sp-raum);
  font-size: 0.875rem; color: var(--accent-text); text-decoration:none;
}
.zurueck:hover{ text-decoration: underline; }
.zurueck:focus-visible{ outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------- Bewegung nur, wenn sie gewünscht ist (Weißliste) ---------- */
@media (prefers-reduced-motion: no-preference){
  a.lab, a.tuer{ transition: border-color .15s ease, background-color .15s ease; }
  .kopf-link{ transition: color .15s ease, border-color .15s ease; }
}

/* ---------- Handy ---------- */
@media (max-width: 640px){
  .aufmacher{ padding-top: var(--sp-raum); }
  .kopf{ flex-wrap: wrap; gap: var(--sp-weit); }
  .seefalke{ padding: var(--sp-block); }
}

/* ---------- Tabelle auf Textseiten (Lizenz-Übersicht) ---------- */
.text .tabelle{ overflow-x: auto; margin: 0 0 var(--sp-weit); }
.text table{
  border-collapse: collapse; width: 100%; min-width: 22rem;
  font-size: 0.875rem;                /* 14 px */
}
.text th, .text td{
  text-align: left; padding: var(--sp-knapp) var(--sp-weit);
  border-bottom: 1px solid var(--panel-border);
  color: var(--text-dim);
}
.text th{ color: var(--text); font-weight: 600; }
.text td.ja, .text td.nein{ text-align: center; width: 6.5rem; }
/* Rang über FORM, nicht über Signalfarbe: Grün heißt im Haus „geschafft",
   nicht „erlaubt" — deshalb tragen ja/nein keine Ampelfarbe. */
.text td.ja{ color: var(--text); font-weight: 600; }
.text td.nein{ color: var(--text-dim); font-weight: 400; }

/* ---------- Zaehl-Pixel ---------- */
/* Liegt in jeder Seite und ruft api/zaehlen.php ab. NICHT display:none —
   ein ausgeblendetes Bild laedt nicht jeder Browser, dann faellt die
   Zaehlung still aus. Stattdessen aus dem Blickfeld geschoben. */
.zaehler{ position: absolute; left: -9999px; width: 1px; height: 1px; }