/* ==========================================================================
   Servus Gelting — Kaffeesorten (/sorten)

   1:1 nach dem Canvas-Rendering. Quellen:
   canvas/roesterei/seite-sorten-varianten.jsx — PageShell und SeiteSortenK3
   canvas/roesterei/seite-sorten.jsx           — KParts (Eyebrow, Roast)
   canvas/roesterei/unterseiten-shared.jsx     — SubHeader, K_WORLDS, monoK

   Achtung bei den Farben: Diese Seite nutzt K_WORLDS, nicht die
   ca/cb-Werte aus shared.jsx. K_WORLDS trägt die Briefing-Werte —
   dieselben, die auch im Design System stehen.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Hero — K · Hero, Abschnitt 320px
   -------------------------------------------------------------------------- */

.sorten-hero {
  height: 320px;
  padding-top: 72px;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 60px;
  align-items: end;
}

.sorten-hero .eyebrow { display: block; margin-bottom: 16px; }

.sorten-hero__titel {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 76px;
  line-height: .98;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: var(--espresso);
}

.sorten-hero__rechts { padding-bottom: 8px; }

.sorten-hero__rechts p {
  margin-bottom: 18px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted-brown);
}

/* Sechs Farbtupfer, einer je Welt. Bruno hat noch keine und steht
   deshalb als gestrichelter Umriss. */
.sorten-hero__welten { display: flex; gap: 8px; }

.sorten-hero__welten span {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(30, 22, 16, .15);
  background: var(--welt, transparent);
}

.sorten-hero__welten span.ist-offen {
  background: none;
  border: 1.5px dashed var(--muted-brown);
}


/* --------------------------------------------------------------------------
   2. Poster-Wand — K3 · Galerie, 3er-Raster
   -------------------------------------------------------------------------- */

.posterwand {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 40px;
  padding-bottom: 56px;
}

.poster {
  position: relative;
  height: 600px;
  padding: 30px 32px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  /* Je Sorte gesetzt: --welt (Fläche), --welt-mark (Wasserzeichen),
     --poster-text (Schriftfarbe), --poster-linie (Trennlinie) */
  background: var(--welt);
  color: var(--poster-text, var(--cream));
}

/* Wasserzeichen quer über der Karte */
.poster__mark {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 210px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 118px;
  line-height: .8;
  letter-spacing: -.015em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--welt-mark);
  user-select: none;
  pointer-events: none;
}

/* Bruno: kein Farbwert, nur Kontur */
.poster--offen .poster__mark {
  color: transparent;
  -webkit-text-stroke: 2px rgba(246, 238, 223, .3);
}

.poster__kennung {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.poster--offen .poster__kennung { color: var(--tan); }

.poster__name {
  margin: 12px 0 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  text-transform: uppercase;
}

.poster__claim {
  font-style: italic;
  font-size: 15px;
  opacity: .9;
}

.poster__bild {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.poster__bild img {
  height: 252px;
  width: auto;
  filter: drop-shadow(0 24px 28px rgba(30, 12, 0, .3));
}

.poster--offen .poster__bild img {
  filter: drop-shadow(0 24px 28px rgba(30, 12, 0, .3)) grayscale(.25);
}

.poster__daten {
  padding-top: 16px;
  margin-bottom: 16px;
  border-top: 1px solid var(--poster-linie, rgba(246, 238, 223, .35));
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .02em;
  line-height: 1.8;
}

.poster__fuss { display: flex; }


/* --------------------------------------------------------------------------
   3. Abbinder — K · Abbinder, Abschnitt 240px
   -------------------------------------------------------------------------- */

/* Läuft randlos durch, deshalb kein .abschnitt-Container außen —
   der sitzt innen. */
/* Höhe sitzt außen, damit die beiden Rahmenlinien mit hineinzählen —
   so rechnet auch das Artboard. */
.sorten-abbinder {
  height: 240px;
  background: var(--flaeche-karte);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}

.sorten-abbinder .container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-inline: clamp(20px, 6.667vw, 96px);
}

.sorten-abbinder .eyebrow { display: block; margin-bottom: 14px; }

.sorten-abbinder__satz {
  margin-bottom: 22px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 38px;
  line-height: 1.06;
  text-transform: uppercase;
  color: var(--espresso);
}


/* --------------------------------------------------------------------------
   4. Schmalere Fenster

   Zwei Stufen: bis 1200px bricht die Desktop-Fassung sauber um. Ab
   767px gilt das Mobil-Artboard „02 · Kaffeesorten — Mobile 390"
   (SeiteSortenK3Mobile) mit eigenen Maßen.
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .posterwand { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .sorten-hero {
    height: auto;
    grid-template-columns: 1fr;
    gap: 28px;
    padding-block: 56px 0;
  }
  .sorten-hero__titel { font-size: clamp(44px, 9vw, 76px); }
  .posterwand { grid-template-columns: 1fr; }
  .sorten-abbinder { height: auto; }
  .sorten-abbinder .container { padding-block: 64px; }
  .sorten-abbinder__satz { font-size: clamp(26px, 5.5vw, 38px); }
}


/* --------------------------------------------------------------------------
   Mobil — Artboard „02 · Kaffeesorten — Mobile 390"
   Gemessen gegen die eigenständige Artboard-Ausgabe des Kunden.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  /* --- Hero -------------------------------------------------------- */
  .sorten-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 44px 24px 8px;
  }

  .sorten-hero .eyebrow { font-size: 10.5px; letter-spacing: .26em; margin-bottom: 12px; }
  .sorten-hero__titel { font-size: 40px; line-height: .98; letter-spacing: .01em; }
  .sorten-hero__rechts { padding: 0; }
  .sorten-hero__rechts p { font-size: 15px; line-height: 1.6; margin: 16px 0 14px; }
  .sorten-hero__welten { margin-top: 0; }

  /* --- Poster-Wand -------------------------------------------------- */
  /* Ein Poster je Zeile, 16px dazwischen. Das Raster der Desktop-Fassung
     weicht einer einfachen Spalte. */
  .posterwand {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px 20px 44px;
  }

  /* --- Poster ------------------------------------------------------- */
  .poster {
    height: auto;
    padding: 24px 24px 26px;
    border-radius: 12px;
  }

  /* Das Wasserzeichen sitzt hinter dem Produktbild, nicht über der
     Kennung — im Artboard 158px unter der Posterkante. */
  .poster__mark { top: 158px; font-size: 88px; }
  .poster__kennung { font-size: 12px; }
  .poster__name { font-size: 34px; margin: 10px 0 5px; }
  .poster__claim { font-size: 14.5px; }

  .poster__bild { height: 236px; flex: 0 0 auto; }
  .poster__bild img { height: 236px; }

  /* 11px statt 11.5 und Zeilenhöhe 1.75: Mit 11.5px brach die zweite
     Zeile um und der Block war 77px hoch statt 53. */
  .poster__daten {
    padding-top: 14px;
    margin-bottom: 16px;
    font-size: 11px;
    line-height: 1.75;
  }

  /* Knopf über die volle Breite, wie im Artboard */
  .poster__fuss .btn {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 15px 26px;
    font-size: 13px;
    letter-spacing: .1em;
    border-radius: 8px;
  }

  /* Bruno trägt statt des Knopfes die Marke „Kommt bald" */
  .poster__fuss .marke { font-size: 11.5px; padding: 8px 18px; }

  /* --- Abbinder ----------------------------------------------------- */
  .sorten-abbinder { height: auto; }
  .sorten-abbinder .container {
    display: block;
    padding: 44px 24px;
    text-align: center;
  }
  .sorten-abbinder .eyebrow {
    font-size: 10.5px;
    letter-spacing: .26em;
    margin-bottom: 12px;
  }
  .sorten-abbinder__satz { font-size: 24px; line-height: 1.1; margin-bottom: 20px; }
  .sorten-abbinder .btn {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 15px 26px;
    font-size: 13px;
    letter-spacing: .1em;
    border-radius: 8px;
  }
}