/* ===========================================================================
oberflaeche.css — das Glas, und zwar NUR für die Oberflächen.
Simon am 08.08.2026: *„wie sieht es mit den anderen designs aus die wir noch für
die oberflächen der kunden haben, die website bitte im alten design lassen"*.
Also zwei Aussehen mit Absicht, und die Trennlinie ist nicht Geschmack:
WEBSITE (index, betriebe, zeit, botschafter, Rechtsseiten, 404): flach, schwarz,
Haarlinien. Sie wird einmal gelesen und soll sich nicht in den Vordergrund
spielen. Wer verkauft, darf nicht mit der eigenen Oberfläche konkurrieren.
OBERFLÄCHE (buchen, kalender, anmelden, einloggen, passwort, bestaetigt): Glas.
Das sind die Seiten, auf denen jemand ARBEITET oder einen Termin bucht, teils
täglich. Hier lohnt der Aufwand: Durchscheinende Flächen zeigen, was vorn und was
hinten liegt, und genau das braucht eine Oberfläche mit Ebenen.
SO WIRD SIE EINGEBUNDEN, immer NACH stil.css:
Diese Datei setzt nur Werte um, die stil.css schon benutzt. Sie definiert keine
neuen Klassen: Eine Oberfläche, die eigene Bausteine mitbringt, ist ein zweites
Designsystem, und dann pflegt man zwei.
VIER REGELN DES GLASES:
1. Unschärfe stark, Deckung schwach. Ein Glas, das kaum verwischt und dafür halb
deckt, sieht aus wie grauer Kunststoff.
2. Licht kommt von oben: helle Kante oben, weicher Schatten unten. Das ist der
ganze Trick; ohne die Kante schwimmen die Karten.
3. Nichts bewegt sich. Ein bewegter Hintergrund zieht den Blick von der Uhrzeit
weg, und die Uhrzeit ist hier der Zweck.
4. Mehr Luft zur Kante als im Flachen (32/30 statt 25/23 px), weil Glas die Kante
unscharf macht und Text zu nah daran halb daneben zu liegen scheint.
Die Töne stehen ebenfalls hier: ``, gesetzt von ton.js.
Sie färben nur Oberflächen. Die Website bleibt bei Platin.
=========================================================================== */
:root{
/* Wie in `stil.css`: Was der Browser selbst zeichnet, muss zur Fläche passen. Diese Datei
kann beides, deshalb steht die helle Angabe unten bei `[data-flaeche="hell"]`. */
color-scheme:dark;
--grund:#08090B;
--flaeche:rgba(255,255,255,.055);
--erhoben:rgba(255,255,255,.10);
--linie:rgba(255,255,255,.10);
--linieStark:rgba(255,255,255,.20);
--kante:rgba(255,255,255,.22);
--tinte:#FBFAF9;
--leise:rgba(255,255,255,.58);
--sehrLeise:rgba(255,255,255,.38);
--metallLeise:rgba(255,255,255,.50);
--aufMetall:#0A0A0B;
--schein1:rgba(120,150,200,.30);
--schein2:rgba(200,170,130,.22);
--schein3:rgba(140,120,190,.16);
--gut:#8FBC9C;
--warn:#D9BC7E;
--schlecht:#E39A8C;
--r-klein:10px; --r:18px; --r-gross:26px;
/* Der Glasgriff an einer Stelle, damit „etwas weniger Glas" eine Änderung ist. */
--milch:blur(26px) saturate(150%);
}
/* ---- Töne ---------------------------------------------------------------
Akzent und Lichtfarben wechseln gemeinsam: Ein warmer Knopf über kaltem Licht
sieht aufgeklebt aus. Es bleibt bei EINEM Akzent je Seite. */
[data-ton="messing"]{--metall:#D9B87C;--aufMetall:#1A1408;
--schein1:rgba(215,180,120,.30);--schein2:rgba(180,140,90,.22);--schein3:rgba(150,120,80,.16)}
[data-ton="salbei"]{--metall:#9DC4A9;--aufMetall:#0C1710;
--schein1:rgba(140,190,160,.28);--schein2:rgba(120,160,180,.20);--schein3:rgba(110,150,120,.16)}
[data-ton="ton"]{--metall:#DDA08D;--aufMetall:#1A0E09;
--schein1:rgba(220,160,140,.28);--schein2:rgba(190,140,150,.20);--schein3:rgba(160,110,100,.16)}
[data-ton="nacht"]{--metall:#A9BEDD;--aufMetall:#080D18;
--schein1:rgba(120,150,220,.32);--schein2:rgba(90,120,190,.22);--schein3:rgba(140,130,210,.18)}
body{background:var(--grund);overflow-x:hidden}
/* Die drei Lichtflecken. Fest im Bild, nicht mitscrollend: Sie sind der Raum, in dem
die Oberfläche liegt, und nicht Teil des Inhalts. */
body::after{
content:"";position:fixed;inset:-20%;z-index:0;pointer-events:none;
background:
radial-gradient(38% 34% at 18% 12%,var(--schein1),transparent 70%),
radial-gradient(34% 30% at 86% 78%,var(--schein2),transparent 70%),
radial-gradient(30% 40% at 60% 40%,var(--schein3),transparent 70%);
filter:blur(30px);
}
body::before{z-index:1;opacity:.022}
body>*{position:relative;z-index:2}
h1,h2,h3{color:var(--tinte)}
strong{color:var(--tinte)}
a:hover{color:var(--tinte)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible{outline-offset:3px}
/* ---- Kopf und Fuß: Innenkante statt gezeichneter Linie ------------------- */
.kopfleiste{background:rgba(255,255,255,.04);border-bottom:0;
box-shadow:inset 0 -1px 0 var(--linie);
-webkit-backdrop-filter:var(--milch);backdrop-filter:var(--milch)}
.marke{color:var(--tinte)}
.fussleiste{border-top:0;box-shadow:inset 0 1px 0 var(--linie)}
/* ---- Flächen ------------------------------------------------------------- */
.kasten{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-gross);
padding:32px 30px;box-shadow:inset 0 1px 0 var(--kante),0 12px 34px rgba(0,0,0,.34);
-webkit-backdrop-filter:var(--milch);backdrop-filter:var(--milch)}
.kasten.stark{background:rgba(255,255,255,.085);border-color:var(--linieStark)}
@media(max-width:520px){.kasten{padding:24px 22px}}
.wahl{border-radius:var(--r-gross);padding:30px 28px;background:var(--flaeche);
box-shadow:inset 0 1px 0 var(--kante),0 10px 28px rgba(0,0,0,.28);
-webkit-backdrop-filter:var(--milch);backdrop-filter:var(--milch)}
.wahl .preis{color:var(--tinte)}
.gepraegt{background:var(--flaeche);padding:20px 22px;box-shadow:inset 0 1px 0 var(--kante);
color:var(--tinte);-webkit-backdrop-filter:var(--milch);backdrop-filter:var(--milch)}
.schritte li::before{background:var(--erhoben);border-color:var(--linie);
box-shadow:inset 0 1px 0 var(--kante)}
/* ---- Knöpfe -------------------------------------------------------------- */
.knopf{min-height:50px;padding:13px 30px;color:var(--aufMetall);
box-shadow:0 10px 26px rgba(0,0,0,.32);transition:filter .16s ease,transform .12s ease,
border-color .16s ease,background .16s}
.knopf:hover:not(:disabled){background:var(--metall);filter:brightness(1.08)}
.knopf:disabled{box-shadow:none}
.knopf.klar{background:rgba(255,255,255,.07);color:var(--tinte);border-color:var(--linie);
box-shadow:inset 0 1px 0 var(--kante);
-webkit-backdrop-filter:var(--milch);backdrop-filter:var(--milch)}
.knopf.klar:hover:not(:disabled){background:var(--erhoben);border-color:var(--linieStark);filter:none}
/* ---- Formulare ---------------------------------------------------------- */
input,select,textarea{background:rgba(255,255,255,.05);color:var(--tinte);
border:1px solid var(--linie);border-radius:var(--r);padding:15px 17px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
-webkit-backdrop-filter:var(--milch);backdrop-filter:var(--milch)}
input:focus,select:focus,textarea:focus{border-color:var(--linieStark);
background:rgba(255,255,255,.08)}
.zustimmung input{padding:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
label{margin-bottom:8px}
td.zahl{color:var(--tinte)}
th,td{padding:13px 10px}
.platzhalter{background:rgba(217,188,126,.06);border-radius:0 var(--r) var(--r) 0;
padding:18px 22px}
.inhalt{border:0;box-shadow:inset 0 1px 0 var(--linie),inset 0 -1px 0 var(--linie);padding:18px 0}
/* ---- Hover: eine Regel, nicht zehn --------------------------------------
Simon am 08.08.2026: *„je nachdem was man hovert werden manche kästchen leicht
verfärbt aber nur bei manchen, dadurch wirkt es wie ein bug"*. Er hat recht, und
die Ursache war, dass jede Fläche ihren eigenen Hover mitgebracht hatte.
Ab hier gilt: WAS ANKLICKBAR IST, HELLT SICH UM DENSELBEN BETRAG AUF. Was nicht
anklickbar ist, reagiert überhaupt nicht. Eine Fläche, die auf den Zeiger reagiert
und dann nichts tut, ist ein Versprechen, das gebrochen wird — und genau das liest
sich als Fehler.
Der Betrag steht in --hover, damit „etwas deutlicher" eine Änderung ist. */
:root{--hover:rgba(255,255,255,.11);--hoverStark:rgba(255,255,255,.15)}
/* Die Regel hängt an den Flächen, die WIRKLICH eine Fläche sind, nicht an