/* bausteine.css: wiederverwendbare Bausteine. Nur Tokens. */

.muster-banner {
  background: var(--mk-farbe-akzent);
  color: var(--mk-farbe-auf-akzent);
  font-size: var(--mk-groesse-xs);
  font-weight: var(--mk-gewicht-mittel);
  text-align: center;
  padding: var(--mk-abstand-2) var(--mk-abstand-4);
  letter-spacing: 0.02em;
}

/* --- Kachel: traegt Zustand, verzweigt den Weg. Kein Dekor-Raster. --- */
.kachel-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mk-abstand-3);
  padding: 0;
  margin: 0;
  border: 0;
}
.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--mk-abstand-2);
  padding: var(--mk-abstand-5);
  min-height: 6.5rem;
  background: var(--mk-farbe-flaeche);
  border: var(--mk-linie-staerke) solid var(--mk-farbe-linie);
  border-radius: var(--mk-radius-m);
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--mk-dauer-kurz) var(--mk-kurve),
              box-shadow var(--mk-dauer-kurz) var(--mk-kurve);
}
.kachel__eingabe {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}
/* .kachel__titel und .karte__titel waren byte-identisch (Aufgabe 9, P4), deshalb
   zusammengefasst. Bleiben zwei Selektoren, weil Kachel und Karte laut Kommentar oben
   bewusst zwei verschiedene Bausteine mit unterschiedlicher Bedeutung sind (Zustand
   tragend vs. zustandslos), nur ihr Titel-Aussehen faellt zufaellig zusammen. */
.kachel__titel,
.karte__titel {
  font-family: var(--mk-schrift-titel);
  font-size: var(--mk-groesse-l);
  font-weight: var(--mk-gewicht-fett);
  line-height: var(--mk-zeilenhoehe-eng);
}
.kachel__text {
  font-size: var(--mk-groesse-s);
  color: var(--mk-farbe-text-gedaempft);
}
.kachel:hover { border-color: var(--mk-farbe-primaer); box-shadow: var(--mk-schatten-m); }
.kachel:has(.kachel__eingabe:focus-visible) {
  outline: var(--mk-fokus-staerke) solid var(--mk-farbe-akzent);
  outline-offset: 2px;
}
.kachel:has(.kachel__eingabe:checked) {
  border-color: var(--mk-farbe-primaer);
  box-shadow: inset 0 0 0 var(--mk-fokus-staerke) var(--mk-farbe-primaer);
}

/* --- Karte: zeigt etwas Fertiges (Referenzprojekt). Traegt KEINEN Zustand,
       im Unterschied zur Kachel. --- */
.karten-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mk-abstand-5);
}
.karte {
  display: flex;
  flex-direction: column;
  gap: var(--mk-abstand-3);
  text-decoration: none;
  color: inherit;
}
.karte__meta { font-size: var(--mk-groesse-s); color: var(--mk-farbe-text-gedaempft); }
.karte:hover .karte__titel { color: var(--mk-farbe-akzent); }

/* --- Knopf --- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;                 /* Fitts: daumentauglich */
  padding: var(--mk-abstand-3) var(--mk-abstand-6);
  font: inherit;
  font-weight: var(--mk-gewicht-mittel);
  border-radius: var(--mk-radius-s);
  border: var(--mk-linie-staerke) solid var(--mk-farbe-primaer);
  background: var(--mk-farbe-flaeche);
  color: var(--mk-farbe-primaer);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--mk-dauer-kurz) var(--mk-kurve);
}
.knopf--haupt { background: var(--mk-farbe-primaer); color: var(--mk-farbe-auf-primaer); }
.knopf--haupt:hover { background: var(--mk-farbe-primaer-hell); }
/* --- Knopf: Variante fuer dunkle Flaechen ---
   .knopf--haupt fuellt sich mit --mk-farbe-primaer. Auf einer Flaeche, die denselben
   Farbwert traegt (z.B. .hero, das --mk-farbe-flaeche-tief nutzt, welches denselben Wert
   wie --mk-farbe-primaer hat), verschmilzt der Knopf unsichtbar mit dem Untergrund
   (Kontrast 1:1, Fund nach Aufgabe 9). Diese Variante kehrt Fuellung und Textfarbe um,
   ausschliesslich mit vorhandenen Tokens, kein neuer Farbwert. Kombiniert mit
   .knopf--haupt in derselben class-Liste, muss deshalb NACH .knopf--haupt stehen: gleiche
   Spezifitaet, es gewinnt die spaetere Regel im Quelltext (Kaskaden-Regel Build-Methodik).
   border-color bleibt bewusst unveraendert (erbt --mk-farbe-primaer von .knopf), das ergibt
   einen sichtbaren dunklen Rand auf der jetzt hellen Flaeche, wie beim normalen
   nebengeordneten Knopf auf hellem Untergrund. */
.knopf--auf-dunkel { background: var(--mk-farbe-flaeche); color: var(--mk-farbe-primaer); }
.knopf--auf-dunkel:hover { background: var(--mk-farbe-flaeche-gedaempft); }
.knopf[disabled] { opacity: 0.45; cursor: not-allowed; }

/* --- Formularfeld --- */
.feld { display: flex; flex-direction: column; gap: var(--mk-abstand-2);
        margin-bottom: var(--mk-abstand-5); }
.feld__marke { font-size: var(--mk-groesse-s); font-weight: var(--mk-gewicht-mittel); }
.feld__eingabe {
  font: inherit;
  min-height: 3rem;
  padding: var(--mk-abstand-3);
  border: var(--mk-linie-staerke) solid var(--mk-farbe-linie);
  border-radius: var(--mk-radius-s);
  background: var(--mk-farbe-flaeche);
  color: var(--mk-farbe-text);
}
.feld__hilfe { font-size: var(--mk-groesse-xs); color: var(--mk-farbe-text-gedaempft); }
.feld--fehler .feld__eingabe { border-color: var(--mk-farbe-fehler); }
.feld--fehler .feld__hilfe { color: var(--mk-farbe-fehler); }

/* --- Stufenleiste --- */
.stufenleiste { list-style: none; margin: 0; padding: 0;
                display: flex; flex-direction: column; gap: var(--mk-abstand-1); }
.stufe {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--mk-abstand-3);
  align-items: start;
  padding: var(--mk-abstand-3) 0;
  color: var(--mk-farbe-text-gedaempft);
}
.stufe__punkt {
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  border: 2px solid var(--mk-farbe-linie);
  background: var(--mk-farbe-flaeche);
}
.stufe--erledigt { color: var(--mk-farbe-text); }
.stufe--erledigt .stufe__punkt { background: var(--mk-farbe-erfolg);
                                 border-color: var(--mk-farbe-erfolg); }
.stufe--aktiv { color: var(--mk-farbe-text); font-weight: var(--mk-gewicht-mittel); }
.stufe--aktiv .stufe__punkt { border-color: var(--mk-farbe-primaer);
                              box-shadow: inset 0 0 0 var(--mk-fokus-staerke) var(--mk-farbe-primaer); }

/* --- Platzhalter statt Stockfoto --- */
.platzhalter {
  display: grid;
  place-items: center;
  text-align: center;
  aspect-ratio: 4 / 3;
  padding: var(--mk-abstand-4);
  background: var(--mk-farbe-flaeche-gedaempft);
  border: 1px dashed var(--mk-farbe-linie);
  border-radius: var(--mk-radius-m);
  font-size: var(--mk-groesse-xs);
  color: var(--mk-farbe-text-gedaempft);
}

/* --- Hinweis --- */
.hinweis { padding: var(--mk-abstand-4); border-radius: var(--mk-radius-s);
           background: var(--mk-farbe-flaeche-gedaempft);
           border-left: 4px solid var(--mk-farbe-primaer); }
.hinweis--fehler { border-left-color: var(--mk-farbe-fehler); }

/* --- Vertrauensband --- */
.marke-band { display: flex; flex-wrap: wrap; gap: var(--mk-abstand-5);
              justify-content: center; text-align: center; }
.marke-band__wert { font-size: var(--mk-groesse-xl);
                    font-weight: var(--mk-gewicht-fett);
                    font-family: var(--mk-schrift-titel); }
.marke-band__marke { font-size: var(--mk-groesse-xs);
                     color: var(--mk-farbe-text-gedaempft); }

/* Media-Queries am DATEIENDE */
@media (min-width: 48rem) {
  .kachel-raster { grid-template-columns: repeat(2, 1fr); gap: var(--mk-abstand-4); }
  .karten-raster { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .kachel-raster { grid-template-columns: repeat(4, 1fr); }
  .karten-raster { grid-template-columns: repeat(3, 1fr); }
}