/* Bewertungen: ein Karteikasten auf dem Tisch. Fünf Karteikarten stehen
   hintereinander, seitlich sitzt ein Drehknopf — eine Umdrehung, die
   nächste Karte kippt nach vorn. Der Kasten ist graues Stahlblech, nicht
   Holz: das Mahagoni gehört auf dieser Seite allein der Kasse.
   Karussell-Logik in js/karteikasten.js, hier steht nur, wie es aussieht.

   Wichtig für die Ehrlichkeit der Seite: über dem Kasten stehen die
   echte Gesamtnote, die Gesamtzahl und der Link zum Google-Profil.
   Die Karten sind eine Auswahl — das steht auch so da. */

/* Diese Sektion tritt kleiner auf als die anderen: schmalere Überschrift,
   weniger Innenabstand. Sie steht zwischen zwei starken Bildern
   (Musterbuch, Kasse) und soll ihnen nicht die Schau stehlen. */
.sektion.bewertungen {
  padding-block: var(--raum-5) var(--raum-5);
}
.sektion.bewertungen h2 {
  font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.1rem);
}
.sektion.bewertungen .sektion__kopf {
  margin-bottom: var(--raum-3);
}

.bewertungen__kopfzahl {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--raum-2);
  margin-bottom: var(--raum-4);
  font-size: var(--t-klein);
  color: var(--hell-leise);
}
.bewertungen__note {
  font-family: var(--schrift-serif);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--hell);
}
.bewertungen__sterne {
  color: var(--garn);
  letter-spacing: 0.08em;
}
.bewertungen__kopfzahl a {
  color: var(--faden-hell);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Das Möbel ---------- */
/* Der Kasten liegt quer auf dem Tisch: breit und flach, so wie ein
   Karteikasten wirklich steht. Er soll auch nicht die Sektion tragen —
   die Bewertungen sind ein Beleg, kein Hauptkapitel. */
.karteikasten {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--raum-4);
  max-width: 900px;
  margin-inline: auto;   /* liegt mittig auf dem Tisch, nicht am linken Rand */
}

.karteikasten__kasten {
  position: relative;
  padding: 30px 24px 30px;
  border-radius: 6px 6px 10px 10px;
  /* Stahlblech: kalter Grauton mit einem Lichtstreif oben links */
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.16) 0%, transparent 42%),
    linear-gradient(180deg, #6f6a61 0%, #574f47 55%, #423b35 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 6px rgba(0, 0, 0, 0.45),
    0 26px 34px -18px rgba(0, 0, 0, 0.7);
}
/* Die Blechkante vorn, über die man die Karten hinweg liest */
.karteikasten__kasten::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #4b443d 0%, #322c27 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
/* ---------- Der Kartenstapel ---------- */
/* Alle Karten liegen in derselben Rasterzelle übereinander. Dadurch ist
   der Stapel immer so hoch wie die längste Karte — ohne feste Höhe und
   ohne Messen. Vorher standen die Karten absolut und brauchten eine
   Zahl; bei langem Text hing die Namenszeile unten über die Kante. */
.karteikasten__stapel {
  position: relative;
  display: grid;
  perspective: 1100px;
}

.karte {
  grid-area: 1 / 1;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 20px 24px 18px;
  border-radius: 3px;
  /* Karteikarte, Jahrzehnte im Kasten: der Karton ist nachgedunkelt, an
     den Rändern mehr als in der Mitte, dazu ein paar Stockflecken. Die
     blauen Linien sind verblasst, der rote Kopfstrich ausgebleicht. */
  background-color: #e8dcc0;
  background-image:
    radial-gradient(circle at 88% 18%, rgba(150, 105, 40, 0.20) 0 5px, transparent 6px),
    radial-gradient(circle at 12% 76%, rgba(150, 105, 40, 0.16) 0 7px, transparent 9px),
    radial-gradient(circle at 62% 92%, rgba(150, 105, 40, 0.13) 0 4px, transparent 6px),
    linear-gradient(180deg, rgba(168, 62, 46, 0.42) 0 2px, transparent 2px),
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(70, 110, 160, 0.11) 27px 28px),
    radial-gradient(115% 95% at 50% 45%, rgba(255, 250, 235, 0.55) 0%, rgba(190, 160, 110, 0.30) 78%, rgba(120, 92, 52, 0.42) 100%);
  background-position: 0 0, 0 0, 0 0, 0 52px, 0 52px, 0 0;
  box-shadow: 0 12px 20px -10px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  transform-origin: 50% 100%;
  transition: transform var(--dauer-kurz) var(--kurve), opacity var(--dauer-kurz) var(--kurve);
  /* --pos = Platz im Stapel: 0 ist vorn, alles dahinter rutscht nach
     oben weg und wird kleiner — der Blick in den offenen Kasten. */
  transform: translateY(calc(var(--pos) * -13px)) scale(calc(1 - var(--pos) * 0.04));
  opacity: 1;
  z-index: calc(10 - var(--pos));
}
/* Ab der vierten Karte ist nichts mehr zu sehen (karteikasten.js setzt
   die Klasse) — sonst stapeln sich unsichtbare Kanten übereinander */
.karte--tief {
  opacity: 0;
}
/* Die Karte, die gerade nach hinten kippt */
.karte--kippt {
  transform: rotateX(-72deg) translateY(-34px);
  opacity: 0;
  z-index: 20;
}

.karte__sterne {
  color: #c8952c;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
}
/* Getippt, nicht gesetzt: die Karten sehen aus, als hätte jemand sie
   an der Maschine geschrieben. Etwas kleiner als der Fließtext, dafür
   luftiger — Schreibmaschine baut sonst eine Mauer. */
.karte__text {
  margin: 0;
  font-family: var(--schrift-bon-klein);
  font-size: 1rem;
  line-height: 1.65;
  color: #3a2a1d;
  max-width: 62ch;   /* der Kasten ist breit, die Zeile darf es nicht sein */
}
.karte__wer {
  margin: 0;
  font-family: var(--schrift-bon-klein);
  font-size: 0.9375rem;
  color: #6f5b4f;
}

/* ---------- Die Glasscheibe ----------
   Vor den Karten sitzt eine Scheibe, die seit Jahren keiner geputzt hat:
   ein grünlicher Altglas-Ton, zwei schräge Lichtbahnen, Staub und
   Schlieren. Sie liegt über allem, lässt aber Klicks durch — sonst wäre
   der Kasten nicht mehr bedienbar. */
.karteikasten__glas {
  position: absolute;
  inset: 22px 16px 22px;
  z-index: 15;
  pointer-events: none;
  border-radius: 2px;
  background-image:
    /* Staub und Schlieren */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.09' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23s)' opacity='0.22'/%3E%3C/svg%3E"),
    /* Zwei Lichtbahnen, wie von der Lampe über dem Tisch */
    linear-gradient(118deg, transparent 12%, rgba(255, 255, 255, 0.16) 20%, rgba(255, 255, 255, 0.03) 27%, transparent 34%),
    linear-gradient(118deg, transparent 52%, rgba(255, 255, 255, 0.09) 58%, transparent 64%),
    /* Wischspuren in der unteren Hälfte */
    radial-gradient(70% 40% at 30% 85%, rgba(255, 255, 255, 0.07), transparent 70%),
    /* Der Grünstich von altem Glas, an den Kanten am stärksten */
    radial-gradient(120% 100% at 50% 50%, rgba(150, 175, 150, 0.05) 0%, rgba(96, 122, 96, 0.16) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}
/* Der Rahmen, in dem die Scheibe sitzt */
.karteikasten__glas::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 8px solid #453e37;
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    0 1px 0 rgba(255, 255, 255, 0.10);
}

/* ---------- Der Drehknopf ---------- */
.karteikasten__bedienung {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding-bottom: 34px;
}
.drehknopf {
  position: relative;
  width: 66px;
  height: 66px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  /* Gedrehtes Metall: Ringe von der Drehbank */
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 4px),
    radial-gradient(circle at 38% 32%, #9a9086 0%, #6d645b 45%, #3f3830 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.3),
    inset 0 -3px 6px rgba(0, 0, 0, 0.5),
    0 10px 18px -8px rgba(0, 0, 0, 0.8);
  /* --dreh zählt die Umdrehungen hoch (karteikasten.js) */
  transform: rotate(calc(var(--dreh, 0) * 72deg));
  transition: transform 520ms var(--kurve);
}
/* Die Kerbe im Knopf — ohne sie sieht man das Drehen nicht */
.drehknopf::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 5px;
  height: 22px;
  margin-left: -2.5px;
  border-radius: 3px;
  background: linear-gradient(180deg, #2a241f, #575049);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* Der Griff, an dem die Hand dreht */
.drehknopf::after {
  content: "";
  position: absolute;
  right: 11px;
  bottom: 14px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #cdb99a 0%, #8d7554 55%, #4c3d2a 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.drehknopf:hover { filter: brightness(1.08); }
.drehknopf:active { transform: rotate(calc(var(--dreh, 0) * 72deg + 6deg)); }

/* Kleiner Hebel zurück — dieselbe Mechanik, andere Richtung */
.karteikasten__zurueck {
  padding: 6px 14px;
  border: 1px solid rgba(242, 234, 221, 0.28);
  border-radius: 999px;
  background: transparent;
  color: var(--hell-leise);
  font-family: var(--schrift-sans);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: color 180ms ease-out, border-color 180ms ease-out;
}
.karteikasten__zurueck:hover {
  color: var(--hell);
  border-color: var(--hell);
}

.bewertungen__hinweis {
  margin-top: var(--raum-3);
  max-width: 58ch;
  font-size: var(--t-klein);
  color: var(--hell-leise);
}
.bewertungen__hinweis a { color: var(--faden-hell); text-decoration: underline; text-underline-offset: 3px; }

/* Eingang: der Kasten wird auf den Tisch gestellt */
.karteikasten.wartet .karteikasten__kasten { opacity: 0; transform: translateY(18px); }
.karteikasten__kasten { transition: opacity 700ms var(--kurve), transform 700ms var(--kurve); }

@media (max-width: 620px) {
  .karteikasten {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
  .karteikasten__bedienung {
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
    gap: var(--raum-3);
    padding-bottom: 0;
    padding-top: var(--raum-3);
  }
  .drehknopf { width: 64px; height: 64px; }
}