/* Gestaltung der Bausteine, die aus dem Bestandsinhalt erkannt werden:
 * Sprungmarken, Preiskarten, Technikvergleich, Zeitstrahl, Hauskarten,
 * Kennzahlen, Aufklapper, Bildbetrachter.
 *
 * Erzeugt werden sie in build/bausteine.py. Farbwerte kommen wie überall
 * ausschließlich aus tokens.css. */

/* ============================================================ Sprungmarken */

/* Inhaltsverzeichnis am Kopf langer Seiten. Bei 25.000 Zeichen ist das der
   Unterschied zwischen Lesen und Suchen. */
.sprungmarken {
  margin: 0 0 var(--ab-7);
  padding: var(--ab-5) var(--ab-6);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--leitton);
  border-radius: 0 var(--radius-gross) var(--radius-gross) 0;
}

.sprungmarken__titel {
  font-family: var(--schrift-text);
  font-size: var(--grad-mini);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin: 0 0 var(--ab-3);
}

.sprungmarken ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0 var(--ab-6);
  counter-reset: marke;
}

@media (min-width: 44rem) {
  .sprungmarken ol { grid-template-columns: 1fr 1fr; }
}

.sprungmarken li { margin: 0; counter-increment: marke; }

.sprungmarken a {
  display: block;
  padding: var(--ab-2) 0;
  font-size: var(--grad-klein);
  font-weight: 600;
  color: var(--tinte);
  text-decoration: none;
  border-bottom: 1px solid var(--linie);
}

.sprungmarken a::before {
  content: counter(marke, decimal-leading-zero);
  display: inline-block;
  width: 2.2em;
  color: var(--leitton);
  font-variant-numeric: tabular-nums;
}

.sprungmarken a:hover { color: var(--leitton-tief); }

/* ============================================================= Preiskarten */

.preisraster {
  display: grid;
  gap: var(--ab-5);
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  margin: var(--ab-6) 0 var(--ab-8);
}

.preiskarte {
  display: flex;
  flex-direction: column;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  overflow: hidden;
  transition: border-color var(--dauer) var(--kurve),
              box-shadow var(--dauer) var(--kurve);
}

.preiskarte:hover {
  border-color: var(--linie-kraeftig);
  box-shadow: var(--schatten-karte);
}

/* Der Bildkasten ist ein Raster mit genau einer Zelle. Das haelt das Bild
   mittig und verhindert, dass es ueber die Karte hinauslaeuft.

   Vorher stand hier width/height 100% samt object-fit auf BEIDEN Elementen,
   auf <img> und auf <picture>. object-fit greift aber nur bei ersetzten
   Elementen; <picture> ist keines. Ergebnis: Das <picture> wurde starr auf
   Kartengroesse gezogen, das <img> darin behielt seine eigenen Masse - und ein
   Motiv stand sichtbar ueber dem Kartenrand. */
.preiskarte__bild {
  /* Weiß wie die Produktabbildungen selbst. Vorher --papier-tief: Das passte
     zum damaligen Bildgrund, aber dieselben Bilder stehen im Materialkreis in
     weißen Kreisen. Ein Grund für beide Stellen, also Weiß. */
  background: var(--flaeche);
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}

.preiskarte__bild picture { display: contents; }

/* Absolut verankert statt ueber Prozenthoehen.
   Mit height: 100% in einem Raster kam das Bild auf 204 px in einem 191 px
   hohen Kasten heraus - unsichtbar, weil abgeschnitten, aber falsch. inset: 0
   laesst dem Browser keinen Spielraum. */
.preiskarte__bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Der Preis sitzt unten, damit die Zahlen aller Karten auf einer Linie liegen,
   auch wenn die Produktnamen unterschiedlich lang sind. */
.preiskarte__text {
  padding: var(--ab-5);
  display: flex;
  flex-direction: column;
  gap: var(--ab-2);
  flex: 1;
}

.preiskarte__name {
  font-size: var(--grad-h4);
  margin: 0;
  font-family: var(--schrift-titel);
}

.preiskarte__zusatz { font-size: var(--grad-mini); color: var(--tinte-leise); }

.preiskarte__preis {
  margin: auto 0 0;
  display: flex;
  flex-direction: column;
  padding-top: var(--ab-4);
  border-top: 1px solid var(--linie);
}

.preiskarte__zahl {
  font-family: var(--schrift-titel);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--leitton-tief);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.preiskarte__einheit { font-size: var(--grad-mini); color: var(--tinte-leise); }

/* ========================================================= Technikvergleich */

.datentabelle caption {
  caption-side: top;
  text-align: left;
  padding: var(--ab-4) var(--ab-4) var(--ab-3);
  font-size: var(--grad-mini);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

.datentabelle .zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.datentabelle tbody th { font-weight: 700; color: var(--tinte-kraeftig); white-space: nowrap; }

/* ============================================================== Zeitstrahl */

.zeitstrahl {
  list-style: none;
  margin: var(--ab-6) 0 var(--ab-8);
  padding: 0;
  position: relative;
}

/* Die durchgehende Linie liegt hinter den Nummern und verbindet die Schritte. */
.zeitstrahl::before {
  content: "";
  position: absolute;
  left: 1.35rem;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 2px;
  background: var(--leitton-schleier);
}

.schritt {
  position: relative;
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr);
  gap: var(--ab-5);
  margin: 0 0 var(--ab-7);
}

.schritt:last-child { margin-bottom: 0; }

.schritt__nummer {
  position: relative;
  z-index: var(--ebene-grund);
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background: var(--leitton);
  color: var(--tinte-auf-dunkel);
  display: grid;
  place-items: center;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 5px var(--papier);
}

.schritt__titel { margin: 0.25rem 0 var(--ab-3); font-size: var(--grad-h3); }
.schritt__titel a { color: inherit; text-decoration: none; }
.schritt__titel a:hover { color: var(--leitton-tief); text-decoration: underline; }
.schritt__text p { margin-bottom: var(--ab-3); }

@media (min-width: 56rem) {
  .schritt { grid-template-columns: 3rem minmax(0, var(--breite-satz)); }
}

/* ============================================================== Hauskarten */

.hausraster {
  display: grid;
  gap: var(--ab-5);
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  margin: var(--ab-6) 0 var(--ab-8);
}

.hauskarte {
  display: flex;
  flex-direction: column;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dauer) var(--kurve),
              box-shadow var(--dauer) var(--kurve),
              transform var(--dauer) var(--kurve);
}

.hauskarte:hover {
  border-color: var(--leitton);
  box-shadow: var(--schatten-karte);
  transform: translateY(-2px);
}

.hauskarte__bild {
  aspect-ratio: 3 / 2;
  background: var(--papier-tief);
  position: relative;
  overflow: hidden;
}

.hauskarte__bild picture { display: contents; }

.hauskarte__bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hauskarte__text { padding: var(--ab-5); display: flex; flex-direction: column; flex: 1; }
.hauskarte__name { font-size: var(--grad-h4); margin: 0 0 var(--ab-2); }

.hauskarte__art {
  font-size: var(--grad-klein);
  color: var(--tinte-gedaempft);
  margin: 0 0 var(--ab-4);
}

.hauskarte__zahlen {
  display: flex;
  gap: var(--ab-5);
  margin: auto 0 0;
  padding-top: var(--ab-4);
  border-top: 1px solid var(--linie);
}

.hauskarte__zahlen dt {
  font-size: var(--grad-mini);
  color: var(--tinte-leise);
  margin-bottom: 0.15rem;
}

.hauskarte__zahlen dd {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--tinte-kraeftig);
  font-variant-numeric: tabular-nums;
}

/* ============================================================== Kennzahlen */

.kennzahlen {
  display: grid;
  gap: var(--ab-4);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  margin: var(--ab-6) 0 var(--ab-8);
  padding: var(--ab-6);
  background: var(--papier-tief);
  border-radius: var(--radius-gross);
}

.kennzahl { display: flex; flex-direction: column; gap: 0.15rem; }

.kennzahl__wert {
  font-family: var(--schrift-titel);
  font-size: clamp(1.625rem, 2vw + 1rem, 2.125rem);
  font-weight: 700;
  color: var(--leitton-tief);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.kennzahl__wozu { font-size: var(--grad-klein); color: var(--tinte-gedaempft); }

/* ============================================================== Aufklapper */

.aufklapper-gruppe {
  margin: var(--ab-5) 0 var(--ab-7);
  border-top: 1px solid var(--linie);
}

.aufklapper { border-bottom: 1px solid var(--linie); }

.aufklapper summary {
  display: flex;
  align-items: flex-start;
  gap: var(--ab-4);
  padding: var(--ab-4) 0;
  cursor: pointer;
  font-family: var(--schrift-titel);
  font-size: var(--grad-h4);
  font-weight: 600;
  color: var(--tinte-kraeftig);
  list-style: none;
}

.aufklapper summary::-webkit-details-marker { display: none; }

/* Plus und Minus aus zwei Strichen, kein Sinnbild aus einer Bibliothek. */
.aufklapper summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.35rem;
  background:
    linear-gradient(var(--leitton), var(--leitton)) center / 100% 2px no-repeat,
    linear-gradient(var(--leitton), var(--leitton)) center / 2px 100% no-repeat;
  transition: transform var(--dauer) var(--kurve);
}

.aufklapper[open] summary::after {
  background: linear-gradient(var(--leitton), var(--leitton)) center / 100% 2px no-repeat;
  transform: rotate(180deg);
}

.aufklapper summary:hover { color: var(--leitton-tief); }
.aufklapper__inhalt { padding: 0 0 var(--ab-5); max-width: var(--breite-satz); }
.aufklapper__inhalt p:last-child { margin-bottom: 0; }

/* ========================================================= Abschnittsband */

/* Lange Seiten sollen nicht als eine einzige weiße Fläche wirken. Kartenraster
   bekommen deshalb einen abgesetzten Streifen hinter sich. Zurückhaltend: Es
   geht um Gliederung, nicht um Verzierung. */
.lesefluss > .preisraster,
.lesefluss > .hausraster,
.lesefluss > .kennzahlen { position: relative; }

.lesefluss > .preisraster::before,
.lesefluss > .hausraster::before {
  content: "";
  position: absolute;
  inset: calc(var(--ab-6) * -1) calc(var(--rand-seite) * -1);
  background: var(--papier-tief);
  border-radius: var(--radius-gross);
  z-index: 0;
}

.lesefluss > .preisraster > *,
.lesefluss > .hausraster > * { position: relative; z-index: var(--ebene-grund); }

/* ========================================================== Bildbetrachter */

/* Baustellenfotos in groß, ohne Fremdbibliothek. Gebaut auf <dialog>, damit
   Escape, Fokusfalle und Hintergrundsperre vom Browser kommen. */
.betrachter {
  border: 0;
  padding: 0;
  max-width: min(94vw, 1500px);
  max-height: 94vh;
  background: transparent;
  overflow: visible;
}

.betrachter::backdrop { background: rgb(11 15 28 / 88%); }

.betrachter img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  border-radius: var(--radius);
  background: var(--leitton-nacht);
}

.betrachter__leiste {
  display: flex;
  align-items: center;
  gap: var(--ab-4);
  margin-top: var(--ab-3);
  color: var(--tinte-auf-dunkel);
  font-size: var(--grad-klein);
}

.betrachter__text { flex: 1; min-width: 0; }

.betrachter button {
  background: transparent;
  border: 1px solid var(--linie-auf-dunkel);
  border-radius: var(--radius);
  color: var(--tinte-auf-dunkel);
  font: inherit;
  font-weight: 600;
  padding: var(--ab-2) var(--ab-4);
  cursor: pointer;
}

.betrachter button:hover { border-color: var(--leitton-schleier); }

/* Anfassbar machen: Nur Bilder in Strecken lassen sich vergrößern, und das
   soll man sehen. */
.bildstrecke figure img { cursor: zoom-in; }

/* ============================================================== Downloads */

/* Im Bestand stand unter den Grundrissen dreimal untereinander schlicht
   "Download". Welche Datei zu welchem Geschoss gehoert, war nicht zu sehen.
   Hier steht es dran, samt Dateiart und Groesse. */
.ladeliste {
  margin: var(--ab-6) 0 var(--ab-7);
  padding: var(--ab-5);
  background: var(--papier-tief);
  border-radius: var(--radius-gross);
}

.ladeliste__titel {
  font-family: var(--schrift-text);
  font-size: var(--grad-mini);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin: 0 0 var(--ab-4);
}

.ladeliste ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ab-2);
}

.ladeliste li { margin: 0; }

.ladeliste__punkt {
  display: flex;
  align-items: center;
  gap: var(--ab-4);
  min-height: 44px;
  padding: var(--ab-3) var(--ab-4);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--tinte);
  transition: border-color var(--dauer-kurz) var(--kurve),
              transform var(--dauer-kurz) var(--kurve);
}

.ladeliste__punkt:hover {
  border-color: var(--leitton);
  color: var(--leitton-tief);
  transform: translateX(2px);
}

/* Pfeil nach unten aus Rahmenkanten, kein zusaetzliches Bild. */
.ladeliste__zeichen {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  position: relative;
}

.ladeliste__zeichen::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.1rem;
  width: 2px;
  height: 0.85rem;
  margin-left: -1px;
  background: var(--leitton);
}

.ladeliste__zeichen::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.62rem;
  width: 0.55rem;
  height: 0.55rem;
  margin-left: -0.275rem;
  border-right: 2px solid var(--leitton);
  border-bottom: 2px solid var(--leitton);
  transform: rotate(45deg);
}

.ladeliste__text { display: flex; flex-direction: column; line-height: 1.3; }
.ladeliste__name { font-weight: 600; }
.ladeliste__art { font-size: var(--grad-mini); color: var(--tinte-leise); }

/* ============================================================ Plan-Kacheln */

/* Grundriss und der Verweis auf die Zeichnung in voller Groesse gehoeren
   zusammen. Untereinander gesetzt stand der Zusatz "zum vergroessern
   anklicken" fuenfmal identisch unter fuenf Zeichnungen. */
.planraster {
  display: grid;
  gap: var(--ab-5);
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  margin: var(--ab-6) 0 var(--ab-8);
}

.plan {
  margin: 0;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.plan__bild {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--papier-tief);
  overflow: hidden;
}

.plan__bild picture { display: contents; }

.plan__bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--ab-3);
}

.plan__fuss { border-top: 1px solid var(--linie); margin-top: auto; }

.plan__verweis {
  display: flex;
  align-items: center;
  gap: var(--ab-3);
  min-height: 44px;
  padding: var(--ab-3) var(--ab-4);
  text-decoration: none;
  color: var(--tinte);
  transition: color var(--dauer-kurz) var(--kurve),
              background-color var(--dauer-kurz) var(--kurve);
}

.plan__verweis:hover { color: var(--leitton-tief); background: var(--leitton-hauch); }

/* ========================================================= Hinweis vom Haus */

/* Ausdrücklich vom Auftraggeber gewünschter Hinweis, hervorgehoben. Kein
   Ausrufezeichen, keine Signalfarbe - er soll gelesen, nicht angeschrien
   werden. */
.kundenhinweis {
  margin: var(--ab-5) 0 var(--ab-6);
  padding: var(--ab-4) var(--ab-5);
  background: var(--leitton-hauch);
  border-left: 3px solid var(--leitton);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--grad-klein);
  line-height: 1.6;
}

.kundenhinweis strong { color: var(--leitton-dunkel); }

/* ========================================================== Materialrechner */

/* Der einzige Rechner unter den Mitbewerbern, der ohne Anmeldung eine Zahl
   nennt. Deshalb steht er auffaellig: voll eingefaerbt, nicht als blasser
   Kasten am Rand. */
.rechner {
  margin: var(--ab-8) 0;
  padding: var(--ab-6);
  background: var(--leitton-hauch);
  border: 1px solid var(--leitton-schleier);
  border-radius: var(--radius-gross);
}

.rechner__kopf { margin-bottom: var(--ab-6); }
.rechner__titel { margin: 0 0 var(--ab-2); }

.rechner__vorspann {
  margin: 0;
  max-width: 44ch;
  color: var(--tinte-leise);
}

.rechner__felder {
  display: grid;
  gap: var(--ab-4);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.rechner__feld label {
  display: block;
  margin-bottom: var(--ab-2);
  font-weight: 600;
  font-size: var(--grad-klein);
  color: var(--tinte-kraeftig);
}

.rechner__eingabe {
  display: flex;
  align-items: stretch;
  background: var(--flaeche);
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--radius);
  overflow: hidden;
}

.rechner__eingabe:focus-within {
  border-color: var(--leitton);
  box-shadow: 0 0 0 3px var(--leitton-schleier);
}

.rechner__eingabe input,
.rechner__eingabe select {
  flex: 1;
  min-width: 0;
  min-height: 2.9rem;
  padding: var(--ab-3);
  border: 0;
  background: transparent;
  color: var(--tinte);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.rechner__eingabe input:focus,
.rechner__eingabe select:focus { outline: none; }

.rechner__einheit {
  display: flex;
  align-items: center;
  padding-inline: var(--ab-3);
  background: var(--papier-tief);
  border-left: 1px solid var(--linie);
  color: var(--tinte-leise);
  font-size: var(--grad-klein);
}

.rechner__hinweis {
  margin: var(--ab-2) 0 0;
  font-size: var(--grad-mini);
  line-height: 1.45;
  color: var(--tinte-leise);
}

.rechner__ergebnis {
  margin-top: var(--ab-6);
  padding-top: var(--ab-5);
  border-top: 1px solid var(--leitton-schleier);
}

.rechner__aufstellung {
  width: 100%;
  margin-bottom: var(--ab-4);
  border-collapse: collapse;
  font-size: var(--grad-klein);
}

.rechner__aufstellung th,
.rechner__aufstellung td {
  padding: var(--ab-2) var(--ab-3) var(--ab-2) 0;
  text-align: left;
  border-bottom: 1px solid var(--leitton-schleier);
}

.rechner__aufstellung th {
  font-size: var(--grad-mini);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinte-leise);
  font-weight: 600;
}

.rechner__aufstellung td:nth-child(n+2),
.rechner__aufstellung th:nth-child(n+2) { text-align: right; padding-right: 0; }
.rechner__aufstellung td:last-child { font-weight: 600; color: var(--tinte-kraeftig); }

.rechner__summe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ab-3);
  margin: 0 0 var(--ab-4);
}

.rechner__summe-wort { font-weight: 600; color: var(--tinte-kraeftig); }

.rechner__summe-zahl {
  font-family: var(--schrift-titel);
  font-size: var(--grad-h2);
  font-weight: 700;
  line-height: 1;
  color: var(--leitton-dunkel);
  font-variant-numeric: tabular-nums;
}

.rechner__fussnote {
  margin: 0;
  max-width: 62ch;
  font-size: var(--grad-mini);
  line-height: 1.5;
  color: var(--tinte-leise);
}

@media (max-width: 30rem) {
  .rechner { padding: var(--ab-5) var(--ab-4); }
  .rechner__aufstellung th:nth-child(3),
  .rechner__aufstellung td:nth-child(3) { display: none; }
}

/* =========================================================== Materialkreis */

/* Vom Auftraggeber bestellt: der 40er Stein in der Mitte, die anderen
   Materialien rotieren darum. Reines CSS - eine gedrehte Bahn, auf der die
   Stücke liegen, plus Gegendrehung im Inneren, damit die Bilder aufrecht
   bleiben. Keine Bibliothek, kein WebGL, keine Bauwerkzeuge.

   Alle Maße hängen an EINER Größe, --buehne. Anlass war die Ansage vom
   24.08.2026: "das drehende Bild ist zu tief oder zu klein. Der Interessent
   muss beim Betreten der Seite SOFORT sehen, dass es hier Schalsteine gibt."
   Vorher waren Halbmesser, Mitte und Stückbreite einzeln in rem gesetzt;
   Vergrößern hieß, vier Werte von Hand aufeinander abzustimmen. Jetzt ist es
   ein Wert, und die Verhältnisse stimmen bei jeder Größe.

   Die Verhältnisse stammen aus der Fassung, die geprüft war:
       Halbmesser  0,36 · Bühne      Mitte   0,41 · Bühne
       Stückbreite 0,26 · Bühne      Bild    0,21 · Bühne */

.materialkreis {
  --buehne: min(27rem, 86vw);
  display: grid;
  gap: var(--ab-7);
  align-items: center;
  margin: var(--ab-8) 0;
  padding: var(--ab-7) var(--ab-6);
  border-radius: var(--radius-gross);
  /* Fläche in EINEM Ton, kein Verlauf: Die Produktbilder sind auf genau
     diese Farbe montiert. */
  background: var(--leitton-hauch);
  border: 1px solid var(--leitton-schleier);
}

/* ---------------------------------------------------------------- Bühne */

.materialkreis__buehne {
  position: relative;
  display: block;
  width: var(--buehne);
  max-width: 100%;
  aspect-ratio: 1;
  margin-inline: auto;
}

.materialkreis__bahn,
.materialkreis__liste {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: 50%;
}

.materialkreis__bahn {
  border: 1px dashed var(--linie-kraeftig);
  animation: materialkreis-drehen 44s linear infinite;
}

@keyframes materialkreis-drehen {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes materialkreis-gegendrehen {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ------------------------------------------------------------------ Stücke */

.materialkreis__stueck {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--buehne) * 0.26);
  margin: 0;
  /* In die Umlaufstellung drehen, nach außen schieben, zurückdrehen - sonst
     stünde das Stück schräg auf der Bahn. */
  transform: translate(-50%, -50%)
             rotate(var(--stelle))
             translateY(calc(var(--buehne) * -0.36))
             rotate(calc(-1 * var(--stelle)));
}

/* Die Gegendrehung sitzt am INNEREN Element.
 *
 * Am Stück selbst wäre sie falsch: dessen Ursprung liegt durch
 * translate(-50%,-50%) nicht dort, wo das Bild erscheint - das Bild würde um
 * einen Punkt kreisen statt sich zu drehen. Das innere Element hat seinen
 * Ursprung in seiner eigenen Mitte und dreht dort sauber gegen die Bahn. */
.materialkreis__verweis {
  display: block;
  text-align: center;
  text-decoration: none;
  color: var(--tinte);
  animation: materialkreis-gegendrehen 44s linear infinite;
}

.materialkreis__stueck--1 { --stelle:   0deg; }
.materialkreis__stueck--2 { --stelle:  90deg; }
.materialkreis__stueck--3 { --stelle: 180deg; }
.materialkreis__stueck--4 { --stelle: 270deg; }

.materialkreis[data-stuecke="5"] .materialkreis__stueck--1 { --stelle:   0deg; }
.materialkreis[data-stuecke="5"] .materialkreis__stueck--2 { --stelle:  72deg; }
.materialkreis[data-stuecke="5"] .materialkreis__stueck--3 { --stelle: 144deg; }
.materialkreis[data-stuecke="5"] .materialkreis__stueck--4 { --stelle: 216deg; }
.materialkreis[data-stuecke="5"] .materialkreis__stueck--5 { --stelle: 288deg; }

/* Kein Kasten, kein Rahmen, kein Schatten. Das Produkt steht frei auf dem
   Feld - die Bilder tragen genau dessen Farbe als Grund. */
.materialkreis__bild {
  display: block;
  width: calc(var(--buehne) * 0.21);
  aspect-ratio: 4 / 3;
  margin: 0 auto var(--ab-2);
  overflow: hidden;
  transition: transform var(--dauer-kurz) var(--kurve);
}

.materialkreis__bild img { width: 100%; height: 100%; object-fit: contain; }

.materialkreis__verweis:hover .materialkreis__bild,
.materialkreis__verweis:focus-visible .materialkreis__bild {
  transform: scale(1.06);
}

.materialkreis__name {
  display: block;
  font-size: var(--grad-mini);
  font-weight: 600;
  line-height: 1.2;
  color: var(--tinte-kraeftig);
}

/* ------------------------------------------------------------------- Mitte */

.materialkreis__mitte {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ab-1);
  width: calc(var(--buehne) * 0.41);
  aspect-ratio: 1;
  padding: calc(var(--buehne) * 0.03);
  text-align: center;
  text-decoration: none;
  color: var(--tinte);
  background: var(--leitton-hauch);
  border: 2px solid var(--leitton);
  border-radius: 50%;
  transition: border-color var(--dauer-kurz) var(--kurve);
}

.materialkreis__mitte-bild { display: block; width: 76%; }
.materialkreis--schau .materialkreis__mitte-bild { width: 80%; }
.materialkreis__mitte-bild img { width: 100%; }

.materialkreis__mitte-name {
  display: block;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: var(--grad-klein);
  line-height: 1.15;
  color: var(--leitton-dunkel);
}

.materialkreis__mitte-zusatz {
  display: block;
  font-size: var(--grad-mini);
  color: var(--tinte-leise);
}

.materialkreis__mitte:hover,
.materialkreis__mitte:focus-visible { border-color: var(--leitton-tief); }

/* Anhalten, sobald jemand hinsieht oder mit der Tastatur hineingeht: Wer
   klicken will, soll nicht auf ein wanderndes Ziel zielen müssen. */
.materialkreis__buehne:hover .materialkreis__bahn,
.materialkreis__buehne:hover .materialkreis__verweis,
.materialkreis__buehne:focus-within .materialkreis__bahn,
.materialkreis__buehne:focus-within .materialkreis__verweis {
  animation-play-state: paused;
}

/* -------------------------------------------------------------------- Text */

.materialkreis__titel { margin-top: 0; }
.materialkreis__wegweiser { margin-bottom: 0; margin-top: var(--ab-5); }

@media (min-width: 62rem) {
  .materialkreis { grid-template-columns: minmax(0, 29rem) minmax(0, 1fr); }
}

@media (max-width: 34rem) {
  .materialkreis { padding: var(--ab-6) var(--ab-4); }
}

/* Wer keine Bewegung will, bekommt keine. Der Kreis steht still und bleibt
   vollständig bedienbar - es sind ganz gewöhnliche Verweise. */
@media (prefers-reduced-motion: reduce) {
  .materialkreis__bahn,
  .materialkreis__verweis { animation: none; }
}

/* ------------------------------------------- Materialkreis im Titelbereich */

/* Ansage des Auftraggebers vom 24.08.2026: "das drehende Bild ist zu tief oder
   zu klein. Der Interessent muss beim Betreten der Seite SOFORT sehen, dass es
   hier Schalsteine gibt."

   Deshalb steht der Kreis jetzt rechts im Titelbereich statt weiter unten im
   Text, und er ist deutlich größer. Kein eigenes Feld, kein Rahmen, kein
   Textteil - er sitzt direkt auf dem Seitengrund neben Überschrift und
   Vorspann. */

.materialkreis--schau {
  /* Zwei Grenzen zugleich, die kleinere gewinnt:
       38rem            - Obergrenze für sehr breite Schirme
       40vw             - Anteil der Fensterbreite, hält ihn in seiner Spalte
       100vh - 260px    - DAMIT ER ÜBER DER FALZ BLEIBT

     Die Höhengrenze ist absolut, nicht anteilig. Mit 64vh blieb sie zu groß:
     Über dem Kreis stehen Kopfzeile und Abstand (rund 120 px), unter ihm ragen
     die Stücke etwa 30 px über die Bühne hinaus. Bei 960x600 lag die Unterkante
     dadurch 21 px unter der Falz. Die 260 px decken beides plus Reserve - und
     auf hohen Schirmen ist die Grenze großzügiger als 64vh es war: bei 1440x900
     sind es 576 statt 547 px. */
  --buehne: min(38rem, 40vw, calc(100vh - 260px));
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

/* Auf dem Seitengrund statt auf dem blauen Feld: Die Produktbilder sind auf
   --leitton-hauch montiert, deshalb bekommen Mitte und Stücke hier einen
   eigenen, deckenden Kreis in genau dieser Farbe. Sonst zeichnete sich das
   Bildrechteck wieder als Kasten ab. */
.materialkreis--schau .materialkreis__bild {
  /* 0,19 statt 0,24.
     Ein quadratischer Bildkreis von 0,24 macht das Stueck so hoch, dass die
     Bedingung "Bahnhalbmesser minus halbe Stueckhoehe groesser als
     Mitte-Halbmesser" erst ab rund 570 px Buehne aufgeht - gemessen ragten
     die Stuecke bei 1024 px Fensterbreite in den Mittelkreis. Mit 0,19 geht
     sie ab 333 px auf, also ueberall. */
  width: calc(var(--buehne) * 0.23);
  aspect-ratio: 1;
  padding: calc(var(--buehne) * 0.012);
  background: var(--leitton-hauch);
  border-radius: 50%;
}

.materialkreis--schau .materialkreis__bild img { object-fit: contain; }

.materialkreis--schau .materialkreis__bahn {
  border-color: var(--leitton-schleier);
}

/* Bis 46rem steht der Kreis über der Überschrift.
   Auf dem Handy zuerst das Material, dann der Text - genau die Reihenfolge,
   die der Auftraggeber verlangt hat. */
/* Bahn und Mitte mit festem Zuschlag statt reiner Verhältnisse.
 *
 * Reine Verhältnisse gehen hier nicht auf, weil EINE Größe nicht mitskaliert:
 * die Höhe der Beschriftung. "Schalstein 30 und 25" braucht seine zwei bis
 * drei Zeilen, ob die Bühne nun 250 oder 544 px misst. Bei kleiner Bühne wird
 * das Stück dadurch anteilig viel höher und ragt in den Mittelkreis - gemessen
 * bei 320x568 und bei 900x700, also auch auf einem breiten, aber niedrigen
 * Fenster, wo die Höhengrenze die Bühne klein hält.
 *
 * Deshalb bekommt die Bahn 14 px Zuschlag nach außen und die Mitte 18 px
 * Abzug. Beides fällt bei großer Bühne kaum ins Gewicht und rettet die kleine.
 * Der freie Abstand zwischen Stück und Mitte ist damit rechnerisch
 * 0,06 x Bühne + 3 px, also bei jeder Größe positiv. */
.materialkreis--schau .materialkreis__stueck {
  width: calc(var(--buehne) * 0.28);
  transform: translate(-50%, -50%)
             rotate(var(--stelle))
             translateY(calc(var(--buehne) * -0.375 - 16px))
             rotate(calc(-1 * var(--stelle)));
}

.materialkreis--schau .materialkreis__mitte {
  width: calc(var(--buehne) * 0.44 - 18px);
}

@media (max-width: 56rem) {
  /* Schwelle bei 56rem, nicht bei 46rem: Genau dort wird der Titelbereich
     zweispaltig. Zwischen 46 und 56 rem stand er einspaltig, die Bühne wurde
     aber weiter über 34vw begrenzt - klein, obwohl die ganze Breite frei war. */
  /* 80vw, nicht 86.
     Die Stücke ragen über die Bühne hinaus; die äußere Ausdehnung ist
     2 x (Bahnhalbmesser + halbe Stückbreite), bei 86vw also 391 px auf einem
     390-px-Schirm. Dazu nimmt die senkrechte Bildlaufleiste rund 15 px weg -
     gemessen 8 px Überlauf. Mit 80vw und schmaleren Stücken sind es 360 px
     bei 375 px Platz. */
  .materialkreis--schau { --buehne: min(27rem, 80vw); }
  .materialkreis--schau .materialkreis__name { font-size: 0.75rem; }
  .materialkreis--schau .materialkreis__stueck {
    width: calc(var(--buehne) * 0.30);
  }
}