/* ============================================================
   FARBEN — hier darfst du gefahrlos Werte ändern.
   Ändere NUR die Werte rechts vom Doppelpunkt, nie die Namen.
   ============================================================ */

:root {
  /* Hintergrund (Verlauf von oben nach unten) — dunkle Lochplatte */
  --grund1: #16191B;
  --grund2: #1D1A17;
  --grund3: #121416;

  /* Schrift */
  --ton:       #EFEAE4;
  --ton-leise: rgba(239, 234, 228, .62);

  /* Ein Leitakzent: "Glut" (Handwerk). Entschieden 10.10.2026 beim Redesign —
     vorher gab es zwei Akzente (Strom Grün + Glut Orange). --strom-* zeigt
     jetzt bewusst auf dieselben Orange-Werte wie --glut-*, damit die ganze
     bestehende Seite (inkl. Check-Rechner) automatisch auf einen Akzent
     wechselt, ohne jede Stelle einzeln anfassen zu muessen. */
  --strom:      #FF8A2B;
  --strom-tief: #CC6A1A;

  --glut:  #FF8A2B;
  --funke: #FFD166;

  /* Metall — die Haken und Beschläge der Lochwand */
  --messing: #B98A4B;
  --platte1: #2C3034;
  --platte2: #1A1D20;

  /* Leuchten und Schein (durchsichtige Farben, deshalb als rgba) — alle auf Glut-Orange */
  --glut-schein:  rgba(255, 138, 43, .26);   /* Glut-Ecke im Startbereich */
  --strom-schein: rgba(255, 138, 43, .09);   /* Lichtschimmer oben links */
  --funken-glow:  rgba(255, 140, 40, .80);   /* Leuchten der Funken */
  --strom-glow:   rgba(255, 138, 43, .60);   /* Leuchten der Striche */
  --strom-hauch:   rgba(255, 138, 43, .09);   /* zarte Flaechen */
  --strom-kante:   rgba(255, 138, 43, .40);   /* Rahmen */
  --glut-hauch:    rgba(255, 138, 43, .15);
  --messing-hauch: rgba(185, 138, 75, .08);
  --messing-kante: rgba(185, 138, 75, .30);
  --funke-hauch:   rgba(255, 209, 102, .13);

  /* Lochplatte: Durchmesser und Abstand der Löcher im Hintergrund-Raster */
  --loch-groesse: 30px;
  --loch-farbe: rgba(239, 234, 228, .07);

  /* Ergaenzt beim Umbau auf die neue Startseite (13.10.2026) */
  --glut-tief:  #CC6A1A;                     /* dunklere Stufe der Glut (Verlauf im Knopf) */
  --glut-zart:  rgba(255, 138, 43, .09);
  --glut-kante: rgba(255, 138, 43, .40);
  --ton-still:  rgba(239, 234, 228, .11);    /* feine Linien */
  --ton-fein:   rgba(239, 234, 228, .06);
  --karte:      rgba(18, 20, 22, .55);       /* eingelassene Flaechen */
  --tief:       #0E1011;
  --loch:       rgba(239, 234, 228, .07);    /* Loecher im Hintergrund-Raster */
}

/* ============================================================
   BRANCHEN-LOOKS ("Skins") — vorbereitet, aber nicht in Gebrauch.
   So schaltest du einen um: im <body>-Tag der Seite die Klasse setzen,
   also z. B.  <body class="look-praxis">
   ============================================================ */

.look-praxis {
  --grund1: #0D1A1D;  --grund2: #0F2226;  --grund3: #0A1417;
  --ton: #E9F2F1;     --ton-leise: rgba(233,242,241,.62);
  --strom: #5FE3C0;   --strom-tief: #2FC9A3;
  --glut: #FFC48A;    --funke: #FFD9B0;
  --messing: #1E5F55; --platte1: #17383A; --platte2: #102528;
  --glut-schein: rgba(255,196,138,.16); --strom-schein: rgba(95,227,192,.12);
  --funken-glow: rgba(95,227,192,.70);  --strom-glow: rgba(95,227,192,.60);
  --strom-hauch: rgba(95,227,192,.10);   --strom-kante: rgba(95,227,192,.40);
  --glut-hauch: rgba(255,196,138,.14);   --messing-hauch: rgba(30,95,85,.14);
  --messing-kante: rgba(30,95,85,.45);   --funke-hauch: rgba(255,217,176,.13);
}

.look-kanzlei {
  --grund1: #10131C;  --grund2: #161A28;  --grund3: #0C0F16;
  --ton: #EAEBF2;     --ton-leise: rgba(234,235,242,.6);
  --strom: #E3B85F;   --strom-tief: #C99B3D;
  --glut: #7FA8FF;    --funke: #A9C4FF;
  --messing: #5C4A22; --platte1: #232838; --platte2: #161A26;
  --glut-schein: rgba(127,168,255,.14); --strom-schein: rgba(227,184,95,.10);
  --funken-glow: rgba(227,184,95,.75);  --strom-glow: rgba(227,184,95,.60);
  --strom-hauch: rgba(227,184,95,.10);   --strom-kante: rgba(227,184,95,.40);
  --glut-hauch: rgba(127,168,255,.14);   --messing-hauch: rgba(92,74,34,.16);
  --messing-kante: rgba(92,74,34,.50);   --funke-hauch: rgba(169,196,255,.13);
}