/* =========================================================================
   San Remo — Sortenseite (sorten.html)

   Nachbau der Unterseite `/flavours` von scoopa.framer.website. Sie ist in
   der Vorlage eine **eigene Seite**, kein Sprungziel der Startseite: der
   Navigationslink zeigt auf `./flavours`, die Seite hat einen eigenen Titel
   und ist 7665 px hoch (Startseite: 12 537).

   Diese Datei ergänzt styles.css, sie ersetzt nichts. Tokens, Knöpfe, Chips,
   Aufkleber, Kopfleiste und Fußzeile kommen von dort.

   Gemessen ist alles, was ohne Kommentar dasteht. **Was nicht gemessen ist,
   steht als „UNGEMESSEN" an der Stelle** — beim Lesen der Vorlage fror der
   Browsertab ein, deshalb fehlen ausgerechnet die Zeiten der
   Scroll-Einblendungen und die Kurve der Galeriefahrt.

   Reihenfolge: Tokens · Hero · Regal · Theke · Familien · Galerie ·
   Stimmung · Besuch · Tablet · Phone · Bewegung.
   ====================================================================== */

:root {
  /* Sechzehnter Farbwert. Er steht nicht unter den 15 Tokens der
     Startseiten-Lesung, kommt auf dieser Seite aber vor: zwei Buchstaben der
     Schlagzeile tragen ihn. Ob er ein eigenes Token der Vorlage ist oder eine
     dunklere Fassung von --gelb, ist nicht geklärt. */
  --orange: #e08a00;

  /* Flächen dieser Seite, im Wortlaut gemessen. */
  --theke-flaeche: #fbe3ec;
  --karte-vorn: #fff9ef;
  --galerie-grund: #ffe8be;
  --stimmung-pille: rgba(255, 255, 255, 0.5);
  --panel-schleier: linear-gradient(rgba(20, 10, 6, 0.12) 0%, rgba(20, 10, 6, 0.55) 100%);
}

/* ------------------------------------------------------------- Hero ----- */

.sorten-hero {
  position: relative;
  padding: 102px 40px 64px;
  background: var(--grund);
  /* Der Freisteller ragt absichtlich über die Bildspalte hinaus. Auf Tablet
     reicht er dabei 10px über die Fensterkante — der Bereich schneidet ihn
     dort ab, statt das Dokument waagerecht scrollbar zu machen. */
  overflow: hidden;
}

.sorten-hero__innen { display: block; }

.sorten-hero__spalten {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

/* 572 : 460 bei 48px Abstand, gemessen (1080 Inhalt). */
.sorten-hero__text { flex: 0 0 572px; max-width: 572px; }

.sorten-hero__abzeichen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.sorten-hero__schlagzeile { margin-bottom: 20px; }

/* Die Schlagzeile ist buchstabenweise eingefärbt. Die Farbfolge ist aus der
   Vorlage abgelesen (dort c-o-l-o-u-r), nicht gewählt. */
.buntwort { white-space: nowrap; }

.sorten-hero__lead {
  max-width: 520px;
  margin-bottom: 26px;
}

.sorten-hero__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.sorten-hero__collage {
  position: relative;
  flex: 0 0 460px;
  max-width: 460px;
}

/* Collage der Vorlage: eine Tafel 352×430 bei top 12 / left 6, darüber der
   freigestellte Waffel-Ausschnitt 528×564 bei top 8 / left −14. Er ragt
   also über beide Kanten der 460er Spalte hinaus — deshalb steht die Höhe
   der Spalte fest und nicht am Bild.

   UNGEMESSEN: Fläche und Radius der Tafel. Die Lesung nennt ihre Maße und
   Lage, nicht ihre Farbe. Zweiter Grund und Hero-Radius sind gesetzt. */
.sorten-hero__collage { height: 580px; }

.sorten-hero__tafel {
  position: absolute;
  top: 12px;
  left: 6px;
  display: block;
  width: 352px;
  height: 430px;
  background: var(--grund-zwei);
  border-radius: var(--radius-hero);
}

/* Rundes Foto statt Freisteller. Die Vorlage legt hier ein PNG mit
   Alphakanal ueber die Tafel; das Bild dafuer war ein uebersehener Rest der
   Vorlage und ist am 04.09.2026 ersetzt. Freigestellte Aufnahmen mit
   sauberem Rand gibt es unter freier Lizenz praktisch nicht — ein rundes
   Foto ist die ehrlichere Loesung und die Sprache dieser Seite. */
.sorten-hero__waffel {
  position: absolute;
  top: 8px;
  left: -14px;
  width: 528px;
  height: 528px;
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: rgba(56, 36, 26, 0.18) 0 24px 40px;
}

/* Aufkleber 132×59, gedreht. Der genaue Winkel der Vorlage ist im
   Ruhezustand nicht abzulesen — dort stand er im Einblendzustand
   (scale 0.82, +15°). UNGEMESSEN: der Ruhewinkel; -7° ist gesetzt. */
.sorten-hero__aufkleber {
  position: absolute;
  right: 18px;
  bottom: 28px;
  padding: 12px 16px;
  background: var(--gelb);
  color: var(--dunkel);
  border-radius: 14px;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 15.6px;
  letter-spacing: 1.82px;
  transform: rotate(-7deg);
  box-shadow: var(--schatten-klein);
}

/* ------------------------------------------------------------- Regal ---- */

/* Sechs runde Deckel unter dem Hero. Fläche 1020×236, mittig. */
.regal {
  width: 1020px;
  max-width: 100%;
  margin: 56px auto 0;
  padding: 24px 30px 26px;
  background: var(--grund-zwei);
  border-radius: 30px;
}

.regal__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.regal__titel {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-variation-settings: 'wght' 800;
  font-size: 17px;
  line-height: 20.4px;
}

.regal__zeile {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.82px;
  color: var(--schrift-zwei);
}

/* Reihe 773 breit bei 30px Abstand, Einträge 105×132. */
.regal__reihe {
  display: flex;
  gap: 30px;
}

.regal__reihe a {
  display: block;
  width: 105px;
  text-align: center;
  text-decoration: none;
}

.regal__deckel {
  width: 105px;
  height: 105px;
  object-fit: cover;
  border-radius: 100%;
  transition: transform 0.3s cubic-bezier(0.44, 0, 0.56, 1);
}

.regal__reihe a:hover .regal__deckel { transform: scale(1.05); }

.regal__name {
  margin-top: 9px;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 18px;
}

/* Weiche Kante: Ellipse in Seitengrund über der Bereichsgrenze.
   2040×120 bei x −300, top −58 — im Wortlaut aus der Vorlage.

   Sie steht im dunklen Bereich, nicht am Fuß des Heros: dort beschneidet
   nichts, und die 300px, die sie an beiden Seiten übersteht, wandern in den
   waagerechten Überlauf des Dokuments. `.theke` hat `overflow: hidden` und
   schneidet sie sauber an der Fensterkante ab. */
.rundkante {
  position: absolute;
  left: -300px;
  right: -300px;
  top: -58px;
  height: 120px;
  background: var(--grund);
  border-radius: 100%;
  z-index: 1;
}

/* ------------------------------------------------------------- Theke ---- */

.theke {
  position: relative;
  padding: 140px 40px 96px;
  background: var(--dunkel);
  color: var(--grund);
  overflow: hidden;
}

.theke__innen { position: relative; z-index: 1; }

.theke__kopf {
  max-width: 1080px;
  margin: 0 auto 44px;
  text-align: center;
}

.theke__kopf .aufkleber { margin-bottom: 18px; }

/* Die zweite Satzhälfte trägt Rosa — abgelesen, nicht gewählt. */
.theke__kopf em {
  font-style: normal;
  color: var(--rosa);
}

.theke__lead {
  max-width: 720px;
  margin: 18px auto 0;
  font-size: var(--text);
  line-height: 24.8px;
  color: var(--schrift-hell-drei);
}

/* Bühne 1058 breit, Rahmen 2px in Seitengrund, Radius 34. */
.theke__buehne {
  width: 1058px;
  max-width: 100%;
  margin: 0 auto;
  padding: 26px 26px 20px;
  background: var(--theke-flaeche);
  border: 2px solid var(--grund);
  border-radius: 34px;
  overflow: hidden;
  transition: background 0.6s ease;
}

.theke__panels {
  display: flex;
  gap: 14px;
  height: 372px;
}

/* Geschlossen `flex: 1 1 0` (123px), offen `flex: 2.6 1 0` (320px).
   UNGEMESSEN: die Dauer der Breitenänderung — sie hat in der Vorlage keine
   CSS-Transition, sondern läuft über das Skript des Anbieters. 0,5s ease
   ist gesetzt, passend zu den beiden gemessenen Übergängen daneben. */
.panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-kachel);
  background: var(--dunkel);
  color: var(--grund);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: flex-grow 0.5s ease, background 0.5s ease;
}

.panel[aria-expanded='true'] {
  flex: 2.6 1 0;
  background: var(--rot);
}

.panel__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.75) brightness(0.82);
  transition: filter 0.5s ease;
}

.panel[aria-expanded='true'] .panel__bild { filter: saturate(1.05); }

.panel__schleier {
  position: absolute;
  inset: 0;
  background: var(--panel-schleier);
  transition: opacity 0.5s ease;
}

.panel[aria-expanded='true'] .panel__schleier { opacity: 0; }

/* Geschlossener Zustand: der Name steht senkrecht. */
.panel__senkrecht {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  transition: opacity 0.3s ease;
}

.panel[aria-expanded='true'] .panel__senkrecht { opacity: 0; }

.panel__text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 72px 22px 24px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

/* **Der Fuss des offenen Panels wird abgedunkelt** (19.09.2026, Abnahme).
   Vorher stand der Text ohne Unterlage auf dem Bild: Der Schleier ist im
   offenen Zustand ausgeblendet, und das Bild wird dabei sogar heller
   (`saturate(1.05)` loest `brightness(0.82)` ab). Gemessen in der
   Abnahmeaufnahme unter dem Satz von „Cremig": **1,48:1** — der Text war
   nicht schlecht lesbar, er war weg. Bei „Joghurt" und „Waffeln & Becher"
   dasselbe.

   Der Verlauf ist das mildeste Mittel, das hilft: Er liegt **nur** unter dem
   Text, laeuft nach oben auf null aus und laesst die obere Haelfte des
   Bildes unberuehrt. Ein staerkerer Schleier ueber der ganzen Flaeche haette
   das Bild entwertet, eine Schriftkontur haette die Schrift veraendert. */
.panel[aria-expanded='true'] .panel__text {
  background: linear-gradient(
    to top,
    rgba(20, 10, 6, 0.93) 0%,
    rgba(20, 10, 6, 0.91) 62%,
    rgba(20, 10, 6, 0.58) 84%,
    rgba(20, 10, 6, 0) 100%
  );
}

.panel[aria-expanded='true'] .panel__text {
  opacity: 1;
  transform: none;
}

.panel__etikett {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  background: var(--grund);
  color: var(--dunkel);
  border-radius: 999px;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
}

.panel__name {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-variation-settings: 'wght' 800;
  font-size: 34px;
  line-height: 35.7px;
}

.panel__satz {
  margin-top: 8px;
  font-size: 15px;
  line-height: 21.75px;
  color: var(--grund);
}

.panel__hinweis {
  margin-top: 8px;
  font-size: 13px;
  color: var(--rand-hell-kraeftig);
}

/* Zustandsleiste: Spur 1004×10, das Segment der offenen Familie in Rot. */
.theke__leiste {
  display: flex;
  gap: 4px;
  height: 10px;
  margin-top: 20px;
  border-radius: 999px;
  background: var(--kante-stark);
  overflow: hidden;
}

.theke__leiste span {
  flex: 1;
  background: transparent;
  transition: background 0.5s ease;
}

.theke__leiste span.ist-offen { background: var(--rot); }

.theke__hinweis {
  margin-top: 26px;
  text-align: center;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--schrift-hell-drei);
}

/* Sechs unscharfe Kreise hinter der dunklen Fläche. Größen und Dauern sind
   gemessen (14,03 bis 22,41 s), die Positionen nicht — sie stehen in der
   Vorlage als Zufallswerte im Skript. UNGEMESSEN: die Positionen. */
.theke__schimmer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.theke__schimmer i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(54px);
  opacity: 0.5;
}

/* ---------------------------------------------------------- Familien ---- */

.familien {
  position: relative;
  padding: 110px 40px;
  background: var(--grund);
  overflow: hidden;
}

.familien__riesenwort {
  position: absolute;
  top: 250px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-variation-settings: 'wght' 800;
  font-size: 240px;
  line-height: 240px;
  color: rgba(56, 36, 26, 0.05);
  white-space: nowrap;
  pointer-events: none;
}

.familien__innen { position: relative; z-index: 1; }

.familien__kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 44px;
}

.familien__kopf .aufkleber { margin-bottom: 16px; }

.familien__kopf-rechts {
  flex: none;
  text-align: right;
  font-weight: 600;
  font-size: 13px;
  line-height: 18.2px;
  color: var(--schrift-zwei);
}

/* Raster 3 × 344 bei 24px Abstand, Karte 344×360. */
.familien__raster {
  display: grid;
  grid-template-columns: repeat(3, 344px);
  gap: 24px;
  justify-content: center;
}

/* Die Bauteile der Seite sind `<span>`, weil sie in Knöpfen stecken — und ein
   Knopf darf kein `<div>` enthalten. Ein `<span>` ist aber `display: inline`,
   und dann greift weder Höhe noch Breite noch `margin-top`. Ohne diese Zeile
   ist die Wendekarte 0px breit und der Bereich sieht leer aus. */
.wendekarte__innen,
.wendekarte__inhalt,
.wendekarte__etikett,
.wendekarte__name,
.wendekarte__satz,
.wendekarte__fuss,
.wendekarte__nummer,
.wendekarte__pille,
.panel__name,
.panel__satz,
.panel__hinweis,
.regal__name { display: block; }

.wendekarte {
  display: block;
  width: 100%;
  height: 360px;
  perspective: 1200px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.wendekarte__innen {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.wendekarte[aria-pressed='true'] .wendekarte__innen { transform: rotateY(180deg); }

.wendekarte__vorn,
.wendekarte__hinten {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-block);
  backface-visibility: hidden;
  overflow: hidden;
}

.wendekarte__vorn {
  background: var(--karte-vorn);
  box-shadow: var(--schatten-karte);
}

.wendekarte__foto {
  width: 100%;
  height: 162px;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.wendekarte:hover .wendekarte__foto { transform: scale(1.04); }

/* Zwei ausgestanzte Kreise 14×14 an den Seitenkanten, auf halber Höhe —
   die Karte sieht dadurch aus wie ein abgerissenes Ticket. */
.wendekarte__vorn::before,
.wendekarte__vorn::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background: var(--grund);
  border-radius: 50%;
}
.wendekarte__vorn::before { left: -7px; }
.wendekarte__vorn::after { right: -7px; }

.wendekarte__inhalt { padding: 6px 20px 14px; }

.wendekarte__etikett {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.945px;
  text-transform: uppercase;
  color: var(--schrift-zwei);
}

.wendekarte__name {
  margin-top: 6px;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-variation-settings: 'wght' 800;
  font-size: 24px;
  line-height: 27.6px;
}

.wendekarte__satz {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 19.575px;
  color: var(--schrift-zwei);
}

.wendekarte__worte {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.wendekarte__worte span {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--chip-flaeche);
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
}

.wendekarte__fuss {
  position: absolute;
  left: 20px;
  bottom: 12px;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.945px;
  text-transform: uppercase;
  color: var(--schrift-zwei);
}

.wendekarte__hinten {
  padding: 20px 20px 14px;
  background: var(--dunkel);
  color: var(--grund);
  transform: rotateY(180deg);
}

.wendekarte__hinten-kreis {
  position: absolute;
  border-radius: 50%;
  background: var(--kreis-hell-a);
  filter: blur(18px);
  pointer-events: none;
}
.wendekarte__hinten-kreis--gross { width: 190px; height: 190px; top: -60px; right: -50px; opacity: 0.1; }
.wendekarte__hinten-kreis--klein { width: 150px; height: 150px; bottom: -50px; left: -40px; }

.wendekarte__hinten .wendekarte__name { position: relative; font-size: 23px; line-height: 25.3px; }

.wendekarte__nummer {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--schrift-hell-halb);
}

.wendekarte__block { position: relative; margin-top: 12px; }

.wendekarte__block dt {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.945px;
  text-transform: uppercase;
  color: var(--schrift-hell-halb);
}

.wendekarte__block dd {
  margin: 3px 0 0;
  font-size: 14px;
  line-height: 20.3px;
}

.wendekarte__hinten .wendekarte__worte span {
  background: var(--marke-hell);
  color: var(--grund);
}

.wendekarte__pille {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 14px;
}

.wendekarte__pille span {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--grund);
  color: var(--dunkel);
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
}

.wendekarte__pille p {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 16.875px;
  color: var(--schrift-hell-drei);
}

/* ---------------------------------------------------------- Galerie ---- */

.galerie {
  padding: 70px 0 0;
  background: var(--galerie-grund);
}

/* Der Block ist höher als die Bühne — die Differenz ist der Scrollweg, über
   den die Reihe waagerecht durchfährt. 2200 − 700 = 1500 px, gemessen. */
.galerie__block { height: 2200px; }

.galerie__buehne {
  position: sticky;
  top: 90px;
  height: 700px;
  overflow: hidden;
}

.galerie__kopf { padding-bottom: 26px; }

.galerie__kopf .chip { margin-bottom: 14px; }

.galerie__lead {
  max-width: 560px;
  margin-top: 8px;
}

/* Reihe 3188 breit, neun Kacheln bei 26px Abstand, 60px Polster an beiden
   Enden. Die Oberkanten sind gestaffelt — die Staffelung setzt sorten.js. */
.galerie__reihe {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  padding: 0 60px;
  width: max-content;
  will-change: transform;
}

.galerie__kachel { position: relative; flex: none; }

.galerie__kachel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Drei Formen, aus der Vorlage abgelesen: Bogen oben, voller Kreis, weiche
   Ecke. Sie wechseln sich über die neun Kacheln ab. */
.galerie__kachel--bogen img { border-radius: 220px 220px 28px 28px; }
.galerie__kachel--kreis img { border-radius: 50%; }
.galerie__kachel--ecke img { border-radius: 28px; }

.galerie__etikett {
  margin-top: 12px;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 15.6px;
  color: var(--schrift-zwei);
}

/* --------------------------------------------------------- Stimmung ---- */

.stimmung {
  position: relative;
  padding: 110px 40px;
  background: var(--grund);
}

.stimmung__innen {
  width: 880px;
  max-width: 100%;
  margin: 0 auto;
}

.stimmung__kopf {
  margin-bottom: 34px;
  text-align: center;
}

.stimmung__kopf .aufkleber { margin-bottom: 16px; }

.stimmung__liste {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Pillen 800×63. In der Vorlage sind sie **nicht** klickbar — reine
   Textzeilen, deshalb hier auch kein Link und kein Knopf. */
.stimmung__zeile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px 14px 14px;
  background: var(--stimmung-pille);
  border-radius: 999px;
}

.stimmung__sticker {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 37px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--dunkel);
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 16.8px;
  white-space: nowrap;
  transform: rotate(-1deg);
}

.stimmung__satz {
  font-size: var(--text);
  line-height: 24.8px;
  letter-spacing: var(--text-sperrung);
  color: var(--schrift-zwei);
}

/* ----------------------------------------------------------- Besuch ---- */

.sorten-besuch {
  padding: 170px 40px 110px;
  background: var(--rosa-hell);
  border-radius: var(--radius-gross) var(--radius-gross) 0 0;
}

/* Karte 1080×550, Copy 540 : Foto 380 bei 48px Abstand. */
.sorten-besuch__karte {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 56px;
  background: var(--dunkel);
  color: var(--grund);
  border-radius: var(--radius-karte);
}

.sorten-besuch__text { flex: 0 0 540px; max-width: 540px; }

.sorten-besuch__text .aufkleber { margin-bottom: 18px; }

.sorten-besuch__adresse,
.sorten-besuch__telefon {
  display: block;
  margin-top: 18px;
  font-size: var(--lead);
  line-height: var(--lead-zeile);
}

.sorten-besuch__telefon { text-decoration: none; }
.sorten-besuch__telefon:hover { color: var(--rosa); }

.sorten-besuch__zeile {
  margin-top: 10px;
  font-size: 13px;
  line-height: 18.2px;
  color: var(--schrift-hell-drei);
}

.sorten-besuch__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.sorten-besuch__bild { flex: 0 0 380px; }

.sorten-besuch__bild img {
  width: 380px;
  height: 420px;
  object-fit: cover;
  border-radius: 190px 190px 28px 28px;
  box-shadow: var(--schatten-bogen);
}

/* ============================================ Tablet 810–1199.98px ==== */

/* ================================================= Alle Sorten ======= */
/* Neunzehn runde Kacheln, nach Familie gruppiert. Sie stehen zwischen den
   Familienkarten und der Galerie: Wer die Familie verstanden hat, will als
   Nächstes wissen, was darin steht.

   Der Grund ist `--grund-zwei`, damit sich der Bereich von den Familien
   darüber (`--grund`) absetzt, ohne eine Linie zu brauchen. */
.alle-sorten {
  padding: 96px 40px;
  background: var(--grund-zwei);
}

.alle-sorten__kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 52px;
}

.alle-sorten__kopf .aufkleber { margin-bottom: 16px; }

.alle-sorten__kopf-rechts {
  flex: none;
  max-width: 280px;
  text-align: right;
  /* Der Umbruch steht als \n in den Daten und wird mit `textContent`
     gesetzt — ein <br> im Text waere dort sichtbares Markup. */
  white-space: pre-line;
  font-weight: 600;
  font-size: 13px;
  line-height: 18.2px;
  color: var(--schrift-zwei);
}

.alle-sorten__gruppen {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

/* Die Familienzeile: Name links, dünne Linie bis zur Zahl rechts. Sie
   ersetzt eine Überschrift — die Gruppen sind Teil einer Liste, keine
   eigenen Kapitel, und sechs weitere <h3> würden die Gliederung der Seite
   unnötig tief machen. */
.alle-sorten__zeile {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 22px;
}

.alle-sorten__name {
  flex: none;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 28px;
  color: var(--dunkel);
}

.alle-sorten__linie {
  flex: 1;
  height: 1px;
  /* Feste Farbe statt `currentColor`: siehe die Begruendung in sorten.js. */
  background: var(--dunkel);
  opacity: 0.18;
}

.alle-sorten__zahl {
  flex: none;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--schrift-zwei);
}

/* Automatisches Raster statt fester Spaltenzahl: die Gruppen sind
   unterschiedlich groß (sieben, sechs, zwei) und sollen alle bündig links
   anfangen, nicht je nach Anzahl anders umbrechen. */
.alle-sorten__kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 28px 20px;
}

.alle-sorten__kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.alle-sorten__kachel img {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  /* Der helle Ring hebt die Kachel vom Grund ab, ohne einen Schatten zu
     setzen — die Seite kennt keine Schatten. */
  box-shadow: 0 0 0 6px var(--karte-creme);
}

.alle-sorten__sorte {
  font-weight: 600;
  font-size: 14px;
  line-height: 19px;
  color: var(--dunkel);
  /* Lange Namen wie „Joghurt-Erdbeer-Schoko" brechen am Bindestrich, statt
     die Spalte zu sprengen. */
  overflow-wrap: anywhere;
}

.alle-sorten__fuss {
  margin-top: 48px;
  font-size: 14px;
  line-height: 22.4px;
  color: var(--schrift-zwei);
}

@media (max-width: 1199.98px) {
  .alle-sorten { padding: 84px 32px; }
  .alle-sorten__kacheln { gap: 24px 18px; }

  .sorten-hero { padding: 96px 32px 54px; }
  .sorten-hero__spalten { gap: 30px; }
  .sorten-hero__text { flex: 1 1 auto; max-width: none; }
  /* Collage 360×470 gemessen. Tafel und Freisteller wandern im selben
     Verhältnis mit — die Lage ist gemessen, die Zwischengrößen sind
     heruntergerechnet, nicht abgelesen. */
  .sorten-hero__collage { flex: 0 0 360px; max-width: 360px; height: 490px; }
  .sorten-hero__tafel { top: 10px; left: 4px; width: 276px; height: 336px; }
  .sorten-hero__waffel { top: 6px; left: -11px; width: 413px; height: 413px; }

  .regal { padding: 20px 22px 22px; }
  .regal__reihe { gap: 18px; }
  .regal__reihe a { width: 92px; }
  .regal__deckel { width: 92px; height: 92px; }

  .theke { padding: 120px 32px 80px; }
  .theke__buehne { width: 100%; }
  /* UNGEMESSEN — die Lesung nennt für das Akkordeon keine eigene
     Tablet-Regel. Die Panels bleiben nebeneinander, werden aber schmaler. */
  .theke__panels { height: 340px; }
  .panel__name { font-size: 28px; line-height: 30px; }

  .familien { padding: 90px 32px; }
  .familien__riesenwort { top: 200px; font-size: 160px; line-height: 160px; }
  .familien__raster { grid-template-columns: repeat(2, minmax(280px, 1fr)); }

  .stimmung { padding: 90px 32px; }

  .sorten-besuch { padding: 80px 32px 90px; }
  .sorten-besuch__karte { gap: 32px; padding: 40px; }
  .sorten-besuch__text { flex: 1 1 auto; max-width: none; }
  .sorten-besuch__bild { flex: 0 0 280px; }
  /* 309 statt 340: 280 x 309 ist 0.905, das Verhaeltnis der Vorlage
     (380:420). Bei 340 war der Rahmen hochkantiger als das Bild, und
     `object-fit: cover` schnitt die Eiswanne seitlich an. */
  .sorten-besuch__bild img { width: 280px; height: 309px; border-radius: 140px 140px 28px 28px; }
}

/* ================================================= Phone bis 809.98px == */

@media (max-width: 809.98px) {
  /* Der Kopf steht untereinander, der rechte Satz rueckt nach links —
     rechtsbuendig neben einer linksbuendigen Ueberschrift sieht auf dem
     Telefon nach Versehen aus. */
  .alle-sorten { padding: 64px 20px; }
  .alle-sorten__kopf { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 36px; }
  .alle-sorten__kopf-rechts { max-width: none; text-align: left; }
  .alle-sorten__gruppen { gap: 34px; }
  .alle-sorten__name { font-size: 19px; line-height: 25px; }
  /* 104px statt 132: vier Kacheln nebeneinander bei 360px Fensterbreite.
     Das Bild bleibt 132px gross geladen, also auf dem Telefon ueber die
     volle Pixeldichte. */
  .alle-sorten__kacheln { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 22px 14px; }
  .alle-sorten__kachel img { width: 104px; height: 104px; box-shadow: 0 0 0 4px var(--karte-creme); }
  .alle-sorten__sorte { font-size: 13px; line-height: 17.6px; }
  .alle-sorten__fuss { margin-top: 34px; }

  .sorten-hero { padding: 47px 20px 44px; }
  .sorten-hero__spalten { flex-direction: column; gap: 34px; }
  .sorten-hero__text { text-align: center; }
  .sorten-hero__abzeichen { justify-content: center; }
  .sorten-hero__lead { margin-left: auto; margin-right: auto; }
  .sorten-hero__knoepfe { flex-direction: column; gap: 10px; }
  .sorten-hero__knoepfe .knopf { width: 100%; justify-content: center; }
  /* Auf dem Telefon ist die Spalte so breit wie das Fenster. Der Freisteller
     wird mittig gesetzt statt links überhängend — ein Überhang von 14px
     wäre bei 390px Breite ein waagerechter Überlauf. Entscheidung. */
  .sorten-hero__collage { flex: 1 1 auto; width: 100%; max-width: none; height: 430px; }
  .sorten-hero__tafel {
    top: 10px;
    left: 50%;
    width: 250px;
    height: 305px;
    margin-left: -125px;
  }
  .sorten-hero__waffel {
    top: 6px;
    left: 50%;
    width: 375px;
    height: 400px;
    margin-left: -188px;
  }

  .regal {
    border-radius: var(--radius-kachel);
    padding: 18px 16px 20px;
  }
  .regal__kopf { flex-direction: column; align-items: flex-start; gap: 4px; }
  .regal__reihe { flex-wrap: wrap; justify-content: center; gap: 14px; }
  .regal__reihe a { width: 84px; }
  .regal__deckel { width: 84px; height: 84px; }

  .theke { padding: 104px 16px 64px; }
  .theke__buehne { padding: 16px 16px 14px; border-radius: var(--radius-kachel); }
  /* UNGEMESSEN — wie sich das Akkordeon auf dem Telefon verhält, war nicht
     abzulesen. Ein waagerechtes Akkordeon aus sechs Panels ist bei 390px
     unbedienbar; deshalb stehen die Panels hier untereinander und öffnen
     über die Höhe. Das ist eine Entscheidung, keine Messung. */
  .theke__panels { flex-direction: column; height: auto; gap: 10px; }
  .panel { flex: none; height: 84px; transition: height 0.5s ease, background 0.5s ease; }
  .panel[aria-expanded='true'] { flex: none; height: 320px; }
  .panel__senkrecht {
    writing-mode: horizontal-tb;
    left: 20px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) rotate(0deg);
  }
  .panel__name { font-size: 26px; line-height: 28px; }

  .familien { padding: 72px 20px; }
  .familien__riesenwort { font-size: 84px; line-height: 84px; top: 160px; }
  .familien__kopf { flex-direction: column; align-items: flex-start; gap: 16px; }
  .familien__kopf-rechts { text-align: left; }
  .familien__raster { display: flex; flex-direction: column; gap: 16px; }
  .wendekarte { height: 340px; }

  .galerie { padding: 36px 0 0; }
  /* Die Reihe fährt auch auf dem Telefon scrollgetrieben. Hier stand bis zum
     31.08.2026 eine Wischleiste — meine Entscheidung, nicht die der Vorlage:
     deren Media-Queries schalten die klebende Bühne nicht ab. Der Betreiber
     hat gemeldet, dass sich nichts bewegt, und er hat recht.

     UNGEMESSEN: Bühnenhöhe und Scrollweg auf dem Telefon. Die Vorlage nennt
     dafür keine eigenen Werte; 520 und 1800 sind heruntergerechnet aus den
     gemessenen 700 und 2200 des Desktops. */
  .galerie__block { height: 1800px; }
  /* Die Buehne nimmt die Hoehe, die das Geraet wirklich hat, statt fester
     520px — `svh` und nicht `vh`, damit die Leiste des Browsers sie nicht
     nachtraeglich kuerzt. 96px sind die Kopfleiste plus Luft. */
  .galerie__buehne { top: 76px; height: calc(100svh - 96px); min-height: 520px; }
  /* Die Kacheln auf 74 %. Auf dem Telefon beginnt die Reihe erst bei 198px
     in der Buehne, weil Titel und Lead darueber zweizeilig laufen; die
     hoechste Kachel misst 528px, zusammen also 726px. Auf einem 690px hohen
     Geraet stehen aber nur rund 594px zur Verfuegung. 0.73 ist der Faktor,
     bei dem auch dort nichts mehr abgeschnitten wird: 198 + 528 x 0.73 = 583.
     Bei 0.74 fehlten auf einem 690px hohen Geraet noch zwei Pixel.
     Die Bilder sind in doppelter Aufloesung geladen und bleiben scharf. */
  .galerie__reihe { padding: 0 20px; --kachel: 0.73; }

  .stimmung { padding: 72px 20px; }
  .stimmung__zeile {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    border-radius: 24px;
    padding: 16px 18px 18px 16px;
  }

  .sorten-besuch {
    padding: 60px 16px 72px;
    border-radius: 40px 40px 0 0;
  }
  .sorten-besuch__karte {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px 32px;
    border-radius: var(--radius-block);
  }
  .sorten-besuch__knoepfe .knopf { width: 100%; justify-content: center; }
  .sorten-besuch__bild { flex: none; width: 100%; }
  /* `aspect-ratio` statt fester Hoehe. Die Breite ist hier 100%, also vom
     Geraet abhaengig; eine feste Hoehe von 300px ergab daraus je nach
     Telefon ein anderes Verhaeltnis — bei 390px Breite 1.033, waehrend das
     Bild 0.905 misst. `cover` schnitt den Rest weg, und die Eiswanne war
     nicht mehr ganz zu sehen. Mit dem Verhaeltnis der Vorlage folgt der
     Rahmen dem Bild statt umgekehrt. */
  .sorten-besuch__bild img {
    width: 100%;
    height: auto;
    aspect-ratio: 380 / 420;
    border-radius: 140px 140px 22px 22px;
  }
}

/* ---------------------------------------------------------- Bewegung --- */

/* Die sechs Schimmerkreise. Dauern gemessen (14,03 / 14,24 / 16,47 / 19,41 /
   19,86 / 22,41 s), Kurve ease-in-out, Keyframe bei 50 % — im Wortlaut aus
   der Vorlage. */
@keyframes schimmern {
  50% { transform: translate3d(var(--x), var(--y), 0) scale(var(--s)); }
}

/* Die Einblendungen beim Scrollen: die Anfangswerte sind abgelesen, die
   Zeiten nicht. UNGEMESSEN — Dauer, Kurve, Versatz und Auslösepunkt. Die
   Werte unten sind aus der Startseite übernommen, damit sich beide Seiten
   gleich anfühlen; sie sind nicht aus der Vorlage gemessen. */
.anim {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.anim.ist-sichtbar {
  opacity: 1;
  transform: none;
}

/* Hier stand bis zum 31.08.2026 ein `prefers-reduced-motion`-Block, der
   Schimmerkreise, Einblendungen und die Galeriefahrt stillgelegt hat. Der
   Betreiber hat ihn abbestellt — Begründung und Weg zurück stehen an
   derselben Stelle in styles.css. */