/* =========================================================================
   komponenten.css — Wiederverwendbare Bausteine (bereichsuebergreifend).
   ========================================================================= */

/* =========================================================================
   Schaltflaeche — Rahmen mit Eckpunkten
   -------------------------------------------------------------------------
   Optik und Farben nach Reys Vorlage: feine Linie, vier Eckpunkte, die
   ueber den Rahmen hinausragen, getoente Flaeche mit Lichtsaum und
   diagonalem Glanz, vierlagiger Schattenwurf.

   ALLE Knoepfe sehen gleich aus. Es gab zwischenzeitlich eine ruhige
   Variante ohne Toenung, um eine Hierarchie zu bauen — das war eine
   eigene Zutat, nicht Teil der Vorlage, und ist auf Reys Ansage wieder
   raus. Die Reihenfolge sagt jetzt, was wichtiger ist.

   Aufbau:
     .schaltflaeche__rahmen   absolut, traegt Linie, Flaeche, Glanz
     .schaltflaeche__inhalt   im Fluss — GIBT DEM KNOPF SEINE GROESSE


   Aus der Vorlage nicht uebernommen: die Blende mit Textwechsel, die
   Hilfstexte, die "Address copied"-Meldung (ihr Ausloeser war :focus —
   eine Erfolgsmeldung schon beim Antabben waere falsch) und der
   geschichtete Textschatten.
   ========================================================================= */

.schaltflaeche {
  position: relative;
  display: inline-grid;
  place-items: center;

  color: var(--knopf-text);
  font-size: var(--schrift-knopf);
  font-weight: var(--gewicht-mittel);
  letter-spacing: var(--sperrung-knopf);
  line-height: var(--zeile-knapp);
  text-decoration: none;
  cursor: pointer;

  /* Der Schatten steht fest. Er bewegt sich beim Hover NICHT — sonst
     wandert der ganze Knopf und die Geste wird unruhig.

     DIE FLACHE STUFE IST DIE VOREINSTELLUNG (26.08., Formstandard Regel 2).
     Vorher stand hier der vierlagige Wurf der Hero, und jeder Knopf auf
     einer Flaeche musste ihn einzeln abbestellen. Der Kontaktknopf hat das
     nicht getan — Reys Befund: "extrem krasser Schlagschatten ... Er ist
     kein freisitzender Button, sondern gehoert zu einer Card."

     Ein Knopf auf einer Flaeche ist der Normalfall, ein Knopf vor einem
     Foto die Ausnahme. Die Ausnahme bestellt jetzt zu, nicht ab. */
  filter: var(--knopf-abheben-flach);

  transition: color var(--dauer-mittel) var(--kurve-weich);
}

/* EIN <button> BRINGT EIGENES CHROM MIT, ein <a> nicht (26.08.).
   Bis zur Kontaktseite war jede Schaltflaeche ein Verweis. Der erste Knopf,
   der wirklich etwas ausloest, sah daneben aus wie ein Fremdkoerper — und
   nachgemessen war klar warum: Der Browser gibt ihm background
   rgb(239,239,239), border 2px outset, padding 1px 6px und appearance auto.

   DAS SCHLIMMSTE DARAN IST DER SCHATTEN. --knopf-abheben ist ein
   vierlagiger drop-shadow, und ein Filter wirft, was TATSAECHLICH deckend
   ist. Das war nicht die runde Scheibe, sondern das graue Rechteck des
   Browsers darunter — daher der Klotz, den Rey gemeldet hat ("vor allem der
   krasse Schatten"). Weg mit dem Chrom, und der Knopf ist wieder Glas. */
button.schaltflaeche {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
}

/* --- Der Hover: die Scheibe faengt Licht --------------------------------
   Nichts bewegt sich, nichts aendert seine Groesse. Vier Farbwerte
   aendern sich gleichzeitig, und zusammen sagen sie: Licht trifft auf
   das Schild.
     1. die Toenung wird satter — die Scheibe nimmt Licht auf
     2. der Lichtsaum wird kraeftiger — die Kante blitzt
     3. die Aetzung wird tiefer — dunkler, nicht heller
     4. der Glanz laeuft breiter (siehe ::after weiter unten)

   VORGESCHICHTE: Hier stand zuerst fette Schrift. Zwei Gruende dagegen.
   Optisch wirkt Fett bei 17 px klobig und kaempft gegen die Feinheit
   von Haarlinie und Lichtsaum. Technisch brauchte es einen unsichtbaren
   Fett-Platzhalter, damit der Knopf nicht breiter wird — und der liess
   im Ruhezustand Totraum stehen: gemessen 3 px bei "Ueber mich" und
   5 px bei "Mein Portfolio", wodurch die beiden Knoepfe verschieden
   grosse Abstaende zum Pfeil hatten. Reine Farbaenderung hat dieses
   Problem gar nicht erst. */
.schaltflaeche:hover,
.schaltflaeche:focus-visible { color: var(--knopf-text-hover); }

/* --- Der Rahmen --------------------------------------------------------- */
.schaltflaeche__rahmen {
  position: absolute;
  inset: 0;
  border: var(--rahmen-linie);
  /* ABGERUNDET UND OHNE ECKPUNKTE — Reys Ansage vom 25.08.

     Die vier Punkthalter waren der Kern des Bildes "Glasschild an der Wand"
     (siehe CLAUDE.md, Abschnitt Buerogaeser): Sie waren die Abstandshalter,
     und deshalb wirkten sie nicht wie Dekoration. Mit ihnen faellt dieser
     Bezug weg — der Knopf ist jetzt eine Glasflaeche, kein montiertes Schild.

     Das ist eine bewusste Entscheidung und keine Vereinfachung: Die Punkte
     standen an zwei Knoepfen in der Hero und an vier in den Karten, also
     sechsmal auf einer Seite, und sie sind das kleinteiligste Element im
     ganzen Entwurf. Die Rundung nimmt stattdessen die der Karten auf. */
  border-radius: var(--radius-m);
  /* AUF WEISZ IST DIE VOREINSTELLUNG (26.08., Glasregel + Formstandard).
     Hier stand --rahmen-flaeche, also das durchsichtige Cyan fuer Glas auf
     dem Seitengrund. Jeder Knopf auf einer hellen Flaeche musste sich
     seinen eigenen Grund geben — das Portfolio tat es, das Kontaktformular
     nicht. Reys Befund dazu: "Da kannst du mir doch jetzt nicht erzaehlen,
     das seien die gleichen Farben..." Gemessen: (201,218,220) gegen
     (179,200,202), acht Prozentpunkte heller.

     Dieselbe Umkehr wie beim Schatten eine Stunde vorher: Ein Knopf auf
     einer Flaeche ist der Normalfall, ein Knopf vor einem Foto die
     Ausnahme. Die Ausnahme bestellt zu, nicht ab. */
  background-color: var(--glas-auf-weiss);
  box-shadow: var(--rahmen-innenglanz);
  transition:
    background-color var(--dauer-mittel) var(--kurve-weich),
    box-shadow var(--dauer-mittel) var(--kurve-weich);
}

.schaltflaeche:hover .schaltflaeche__rahmen,
.schaltflaeche:focus-visible .schaltflaeche__rahmen {
  background-color: var(--glas-auf-weiss-hover);
  box-shadow: var(--rahmen-innenglanz-hover);
}

/* Diagonaler Glanz auf der Flaeche. Er laeuft beim Hover breiter — das
   ist die einzige Bewegung am Hintergrund, und sie ist die richtige:
   Licht, das ueber eine Glasscheibe wandert. Der Knopf selbst bleibt
   dabei stehen. */
.schaltflaeche__rahmen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--glanz);
  background-size: 440%;
  opacity: var(--glanz-deckkraft);
  mix-blend-mode: hard-light;
  filter: blur(1px);
  transition: background-size var(--dauer-ruhig) var(--kurve-weich);
}
.schaltflaeche:hover .schaltflaeche__rahmen::after,
.schaltflaeche:focus-visible .schaltflaeche__rahmen::after {
  background-size: 700%;
}

/* --- Beschriftung ------------------------------------------------------- */
.schaltflaeche__inhalt {
  position: relative;   /* damit sie ueber dem Rahmen liegt */
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  padding: 0.85em 2em;
}

/* --- Gedrueckt ---------------------------------------------------------- */
.schaltflaeche:active .schaltflaeche__rahmen {
  filter: contrast(1.15) brightness(0.97);
}

/* =========================================================================
   .glas — die Scheibe als Bauteil
   -------------------------------------------------------------------------
   ENTSTANDEN AM 26.08., WEIL SIE VORHER JEDES MAL NEU ZUSAMMENGESETZT WURDE.
   Reys Befund: "Es ist nicht das erste Glass gegen Weisz, dass du machst -
   und trotzdem machst du immer erst mal das Blau und ich wiederhole mich."

   Vier Dinge machen eine Scheibe aus, und alle vier gehoeren zusammen:
   die feine Linie, die getoente Flaeche, der Lichtsaum an der Oberkante und
   der diagonale Glanz. Wer drei davon nimmt, bekommt eine Karte.

   WELCHER TON, entscheidet der UNTERGRUND und nicht das Bauteil — die
   Begruendung samt Messwerten steht in tokens.css bei den --glas-Token.
   Voreingestellt ist der Seitengrund, weil dort die meisten Scheiben liegen;
   auf weiszer Flaeche kommt .glas--auf-weiss dazu.

   BEWEGUNG: Beim Ueberfahren faengt die Scheibe Licht — Toenung satter, Saum
   kraeftiger, Glanz breiter. Nichts bewegt sich, nichts wird groesser. Das
   ist die einzige Hintergrundbewegung dieser Seite und dieselbe Geste wie am
   Knopf: Licht, das ueber Glas wandert.

   NOCH NICHT ANGESCHLOSSEN: .schaltflaeche__rahmen und die Nav-Scheibe
   tragen ihre Regeln weiter selbst. Sie lesen dieselben Token, laufen also
   nicht auseinander — aber die Regeln stehen doppelt. Sie hier anzuhaengen
   heiszt, zwei abgenommene Bereiche anzufassen; das ist ein eigener Schritt
   mit eigenem Blick in den Browser.
   ========================================================================= */
.glas {
  position: relative;
  overflow: hidden;
  border: var(--rahmen-linie);
  background-color: var(--glas-auf-grund);
  box-shadow: var(--rahmen-innenglanz);
  color: var(--knopf-text);

  transition:
    background-color var(--dauer-mittel) var(--kurve-weich),
    box-shadow var(--dauer-mittel) var(--kurve-weich),
    color var(--dauer-mittel) var(--kurve-weich);
}

.glas--auf-weiss { background-color: var(--glas-auf-weiss); }

.glas::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--glanz);
  background-size: 440%;
  opacity: var(--glanz-deckkraft);
  mix-blend-mode: hard-light;
  filter: blur(1px);
  pointer-events: none;
  transition: background-size var(--dauer-ruhig) var(--kurve-weich);
}

/* Der Inhalt muss ueber den Glanz. Ohne das liegt er darunter, weil ::after
   der letzte Kindknoten ist — dieselbe Stelle wie in nav.css und bei der
   Reiterleiste. */
.glas > * { position: relative; }

/* Das Licht faengt die Scheibe auch, wenn nicht sie selbst ueberfahren wird,
   sondern das Bauteil, in dem sie sitzt: eine Karte, ein Knopf. Deshalb
   .glas-traeger am umgebenden Element. */
.glas:hover,
.glas:focus-visible,
.glas-traeger:hover .glas,
.glas-traeger:focus-visible .glas {
  background-color: var(--glas-auf-grund-hover);
  box-shadow: var(--rahmen-innenglanz-hover);
  color: var(--knopf-text-hover);
}

.glas--auf-weiss:hover,
.glas--auf-weiss:focus-visible,
.glas-traeger:hover .glas--auf-weiss,
.glas-traeger:focus-visible .glas--auf-weiss {
  background-color: var(--glas-auf-weiss-hover);
}

.glas:hover::after,
.glas:focus-visible::after,
.glas-traeger:hover .glas::after,
.glas-traeger:focus-visible .glas::after { background-size: 700%; }

/* =========================================================================
   Schrift auf Bauteilen — drei Rollen, nicht neun
   -------------------------------------------------------------------------
   Reys Befund vom 26.08.: "Ach wie die Schrift darauf abliegt. 20
   Varianten." Nachgemessen waren es neun Kombinationen aus Groesze,
   Gewicht, Sperrung und Versalien, dazu zwei Textfarben fuer dieselbe
   Aufgabe. Die Begruendung und die Stufen stehen in tokens.css.
   ========================================================================= */

/* Alles, was man bedient: Knopf, Reiter, Navigationspunkt, Schild. */
.bedienschrift {
  color: var(--knopf-text);
  font-size: var(--schrift-knopf);
  font-weight: var(--gewicht-mittel);
  letter-spacing: var(--sperrung-knopf);
  line-height: var(--zeile-knapp);
}

/* Die Vorzeile ueber einer Gruppe oder auf einer Karte. Fest bei 12 px und
   NICHT ueber --schrift-s: Ein Etikett ist keine Textgroesze der Seite und
   soll nicht mitwachsen, wenn der Fliesstext es irgendwann tut. */
.etikett {
  color: var(--vorlage-bindung);
  font-size: var(--schrift-etikett);
  font-weight: var(--gewicht-mittel);
  letter-spacing: var(--sperrung-etikett);
  text-transform: uppercase;
  line-height: var(--zeile-knapp);
}