/* ===========================================================================
   "Auf dem Teller — und im Glas": die Kreta-Sektion.

   Gewaehlt am 07.10.2026 aus musterbogen-v7.html, Fassung A.
   Vorgeschichte in einem Satz: die erste gebaute Fassung war eine Collage und
   sah damit aus wie "Das Haus" und "Die Taverne", zwischen denen sie steht.
   Jetzt ein randloses Bildband mit zwei durchscheinenden Kacheln — die
   einzige Sektion der Seite, die das macht.

   Der Zielkonflikt dieser Sektion ist nicht der Kachelstil, sondern der
   Schleier: je durchscheinender die Kachel, desto kraeftiger muss er sein,
   damit der Text traegt — und desto weniger bleibt vom Bild uebrig.
   =========================================================================== */

.k-insel { padding: 0; }

.k-insel__bild { position: relative; display: grid; align-items: center; }
.k-insel__bild > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
/* Der Schleier endet unten VOLL deckend auf --bg-0. Damit loest sich das
   Bildband in eine einfarbige Flaeche auf, und die Zackenkante zur Taverne
   setzt auf einer Farbe auf statt auf einem Foto. */
.k-insel__schleier {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgb(5 14 28 / .62), rgb(5 14 28 / .80) 86%, var(--bg-0) 100%);
}

.k-insel__wort {
  position: relative; z-index: 2;
  padding-block: clamp(56px, 7vw, 92px);
}

/* Die Vorzeile steht groesser als sonst auf der Seite (12,5 px) — auf
   Ansage vom 07.10.2026. Der Maeander waechst mit, sonst steht ein zu
   kleines Zeichen neben zu grosser Schrift. */
.k-insel .eyebrow { font-size: 16px; }
.k-insel .eyebrow .maeander { height: 16px; width: 96px; }

.k-insel__wort h2 { color: #fff; margin: 0 0 14px; }
.k-insel__lead {
  color: rgb(255 255 255 / .86); line-height: 1.75; max-width: 54ch;
  margin: 0 0 clamp(26px, 3.4vw, 40px);
}

/* ---- die beiden Kacheln ---- */
.k-insel__kacheln {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 28px);
  margin: 0 0 clamp(26px, 3vw, 36px);
}
/* Gleiche Hoehe: "Im Glas" hat vier Zeilen, "Auf dem Teller" drei. Mit
   align-items:start endete die linke Kachel sichtbar hoeher — bei zwei
   Karten nebeneinander liest sich das wie ein Fehler, nicht wie Absicht. */

.k-insel__kachel {
  min-width: 0; position: relative; overflow: hidden;
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: var(--radius-card, 14px);
  background: rgb(255 255 255 / .10);
  border: 1px solid rgb(255 255 255 / .22);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
/* Ohne Weichzeichner (aeltere Geraete, abgeschaltete Effekte) bliebe eine
   fast durchsichtige Kachel stehen. Dort steht eine einfarbige Flaeche. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .k-insel__kachel { background: rgb(8 20 40 / .78); }
}

.k-insel__kachel h3 {
  font-family: var(--font-display), Georgia, serif; font-weight: 400;
  font-size: 20px; margin: 0 0 14px; padding-bottom: 10px; color: #fff;
  border-bottom: 1px solid rgb(255 255 255 / .26);
}
.k-insel__kachel ul { list-style: none; margin: 0; padding: 0; }
.k-insel__kachel li { padding: 10px 0; }
.k-insel__kachel li + li { border-top: 1px dotted rgb(255 255 255 / .20); }
.k-insel__name {
  display: block; font-size: 15.5px; line-height: 1.35; color: #fff;
}
.k-insel__unter {
  display: block; margin-top: 4px; font-size: 13px; line-height: 1.55;
  color: rgb(255 255 255 / .72);
}

/* ---- Handy ----
   minmax(0, 1fr) statt 1fr: sonst setzt die laengste Zeile die Spaltenbreite
   und die Kachelreihe wird breiter als der Bildschirm. Am 03.10.2026 an der
   Speisekarte gemessen: 2687 px bei 390 px Fensterbreite. */
@media (max-width: 860px) {
  .k-insel__kacheln { grid-template-columns: minmax(0, 1fr); }
  .k-insel .eyebrow { font-size: 15px; }
  .k-insel .eyebrow .maeander { height: 15px; width: 90px; }
}