/* Der Hotelier - Landing-Page. Die Materialien der Spieloberflaeche
   "Hotelhalle" (projekt/src/stil.css, Entwurf C vom 27.09.2026): dunkle
   Eichenvertaefelung als Grund, Leinen fuer Tafeln, Messingschilder mit
   Schrauben, gruenes Emaille fuer Nummern und Knoepfe, Papier in Courier.
   Bewusst nur ein Erscheinungsbild (die Hotelhalle), kein Dunkelmodus. */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("schriften/fraunces-latin.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("schriften/fraunces-kursiv-latin.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("schriften/nunito-latin.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 200 1000; font-display: swap; src: url("schriften/nunito-kursiv-latin.woff2") format("woff2"); }

:root {
  --nuss: #2b2019;          /* Nussbaum: der Grund hinter allem (wie im Spiel) */
  --nuss-tief: #1b130d;
  --leinen: #f5eedc;        /* Tafeln */
  --papier: #fbf6ea;        /* Karten, Zettel */
  --mulde: #ebe0c6;         /* eingelassene Flaechen */
  --linie: #d2c09a;
  --kante: #a8895a;
  --messing-schrift: #8a6420;
  --messing-kante: #b88c3c;
  --messing-hell: #f3dc9a;
  --messing: linear-gradient(#f6e2a5, #d8ac52 45%, #bb8a36 55%, #e6c374);
  --gruen: #2d6a55;
  --gruen-hell: #3a806a;
  --bordeaux: #8f2c36;
  --bordeaux-hell: #b8474f;
  --tinte: #2e2218;
  --dim: #6d5842;
  --schild-schrift: #43290c;
  --nacht: #0c1220;
  --trim: inset 0 0 0 2px #b88c3c, inset 0 0 0 3px #f3dc9a, inset 0 0 0 4px #8a6420;
  --holz: url("bilder/holz.webp") 0 0 / 600px 90px, linear-gradient(#d6a567, #c08b50);
  --schatten: 0 18px 44px rgba(10, 5, 0, 0.55);
  --breite: 1240px;
  /* Schloss-Symbol der gesperrten Haeuser (als Maske, Farbe per background). */
  --schloss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 10.5V7.5a4.5 4.5 0 0 1 9 0v3' fill='none' stroke='black' stroke-width='2.4'/%3E%3Cpath fill-rule='evenodd' d='M5 10h14a1.5 1.5 0 0 1 1.5 1.5v8A1.5 1.5 0 0 1 19 21H5a1.5 1.5 0 0 1-1.5-1.5v-8A1.5 1.5 0 0 1 5 10Zm7 3.1a1.8 1.8 0 0 0-1 3.3v2.2h2v-2.2a1.8 1.8 0 0 0-1-3.3Z'/%3E%3C/svg%3E");
  --rand: clamp(16px, 4vw, 40px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--tinte);
  font: 400 17px/1.6 Nunito, "Segoe UI", system-ui, sans-serif;
  /* Die Wandvertaefelung der Hotelhalle: Eichenmaserung, tief abgedunkelt. */
  background:
    linear-gradient(rgba(27, 19, 13, 0.9), rgba(27, 19, 13, 0.93)),
    url("bilder/holz.webp") 0 0 / 1200px 180px,
    var(--nuss);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--messing-hell); outline-offset: 3px; }

.seite { padding-inline: var(--rand); }
.innen { max-width: var(--breite); margin-inline: auto; }

/* --- Messingschild mit zwei Schrauben (Fenstertitel im Spiel) -------------- */
.schild {
  position: relative; display: inline-block; margin: 0; padding: 0.42em 1.5em 0.36em;
  font: 700 clamp(26px, 3.4vw, 40px)/1.1 Fraunces, Georgia, serif; font-variation-settings: "opsz" 72;
  letter-spacing: 0.01em; color: var(--schild-schrift); text-wrap: balance;
  background: var(--messing); border-radius: 8px;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.7), 0 -1px 0 rgba(90, 55, 10, 0.3);
  box-shadow: inset 0 0 0 1px #8a6420, inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 10px rgba(0, 0, 0, 0.45);
}
.schild::before, .schild::after {
  content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff4c8, #a57a2c 65%, #5d4212);
}
.schild::before { left: 0.55em; }
.schild::after { right: 0.55em; }
.schild.klein { font-size: clamp(18px, 2vw, 22px); padding: 0.42em 1.45em 0.36em; }

.kopf { text-align: center; display: grid; justify-items: center; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); }
.kopf p { margin: 0; max-width: 40em; color: #e9dcc0; font: italic 500 clamp(17px, 1.7vw, 20px)/1.5 Fraunces, Georgia, serif; text-wrap: balance; }

/* --- Titel: Hotels in verschiedenen Zustaenden, Tag und Nacht blenden
   nacheinander ein (seite.js); Logo klein oben links. ----------------------- */
.titel { position: relative; background: var(--nacht); border-bottom: 3px solid var(--messing-kante); }
.titel-folge { aspect-ratio: 2 / 1; max-height: 900px; width: 100%; isolation: isolate; }
/* Wie .blende: das neue Bild blendet ueber dem alten ein, das alte bleibt bis
   zum Ende stehen - kein dunkles Zwischenbild. */
.titel-folge .folge-bild { object-position: 50% 55%; transition: opacity 0s linear 1.6s, transform 7s linear; }
.titel-folge .folge-bild.aktiv { transform: scale(1.04); z-index: 1; transition: opacity 1.6s ease, transform 7s linear; }
.titel-folge::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(ellipse 42% 60% at 0% 0%, rgba(10, 8, 6, 0.62), rgba(10, 8, 6, 0) 70%),
    linear-gradient(rgba(10, 8, 6, 0) 70%, rgba(10, 8, 6, 0.45));
}
.titel-ecke {
  position: absolute; z-index: 2; left: clamp(14px, 3vw, 40px); top: clamp(12px, 2.4vw, 32px);
  display: grid; justify-items: start; gap: clamp(8px, 1.2vw, 14px);
}
.titel-ecke h1 { margin: 0; }
.titel-logo { width: clamp(140px, 17vw, 250px); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.7)); }
/* YouTube und Instagram oben rechts, gegenueber dem Logo (Schilder wie im Fuss). */
.titel-kanaele {
  position: absolute; z-index: 2; right: clamp(14px, 3vw, 40px); top: clamp(12px, 2.4vw, 32px);
  display: flex; gap: 10px;
}
/* COMING 2027: gross mitten im Bild (Feedback 28.09.2026). */
.titel > .termin {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap;
  font-size: clamp(26px, 4.6vw, 66px); letter-spacing: 0.2em; padding: 0.4em 1.5em 0.32em 1.7em;
  box-shadow: inset 0 0 0 1px #8a6420, inset 0 2px 0 rgba(255, 255, 255, 0.7), 0 14px 36px rgba(0, 0, 0, 0.6);
}

/* --- Leinentafel im Eichenrahmen (wie die Fenster im Spiel) ---------------- */
.tafel {
  border: 12px solid transparent; border-radius: 16px;
  background: linear-gradient(var(--leinen), var(--leinen)) padding-box, var(--holz) border-box;
  box-shadow: var(--trim), var(--schatten);
  padding: clamp(20px, 3vw, 34px);
}

/* Bilderrahmen: Eiche aussen, Messinglinie innen. */
.rahmen {
  margin: 0; border: 10px solid transparent; border-radius: 14px;
  background: linear-gradient(var(--nuss-tief), var(--nuss-tief)) padding-box, var(--holz) border-box;
  box-shadow: var(--schatten);
}
.rahmen img, .rahmen .vergleich { border-radius: 4px; box-shadow: 0 0 0 2px var(--messing-kante), 0 0 0 4px #3b2616; }

section { padding-block: clamp(56px, 8vw, 104px); }

/* --- Acht Schritte ------------------------------------------------------- */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(56px, 9vw, 120px); }
.schritt { position: relative; }
.schritt .rahmen { width: min(100%, 1120px); }
.schritt:nth-child(even) .rahmen { margin-left: auto; }
.schritt-karte {
  position: relative; z-index: 2; width: min(460px, 100%); margin-top: -96px; margin-left: auto; margin-right: clamp(0px, 3vw, 40px);
}
.schritt:nth-child(even) .schritt-karte { margin-left: clamp(0px, 3vw, 40px); margin-right: auto; }
.schritt-karte h3 { display: flex; align-items: center; gap: 14px; margin: 0 0 10px; font: 700 clamp(24px, 2.4vw, 30px)/1.15 Fraunces, Georgia, serif; text-wrap: balance; }
.schritt-karte p { margin: 0; }
.schritt-karte .zahlen { margin-top: 12px; color: var(--messing-schrift); font-weight: 800; font-size: 15px; }

/* Emaille-Nummer der Schritte. */
.nummer {
  flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  font: 700 24px/1 Fraunces, Georgia, serif; color: var(--leinen);
  background: linear-gradient(var(--gruen-hell), var(--gruen));
  box-shadow: inset 0 0 0 2px var(--messing-hell), 0 0 0 3px #e9d9a8, 0 2px 4px rgba(0, 0, 0, 0.35);
}

/* Kleines Bild in der Karte (Baustelle). */
.einschub { margin: 14px 0 0; }
.einschub img { border-radius: 6px; box-shadow: 0 0 0 2px var(--messing-kante), 0 6px 14px rgba(40, 20, 0, 0.35); }
.einschub figcaption { margin-top: 6px; font-size: 14px; color: var(--dim); }

/* --- Vorher/Nachher: zwei deckungsgleiche Spielbilder, Regler dazwischen ---- */
.vergleich { position: relative; overflow: hidden; --teil: 50%; touch-action: pan-y; }
.vergleich img { width: 100%; }
.vergleich .vorher { position: absolute; inset: 0; height: 100%; object-fit: cover; clip-path: inset(0 calc(100% - var(--teil)) 0 0); }
.vergleich input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3;
}
.vergleich .griff {
  position: absolute; top: 0; bottom: 0; left: var(--teil); width: 4px; margin-left: -2px; z-index: 2; pointer-events: none;
  background: var(--messing); box-shadow: 0 0 0 1px #6d4e16, 0 0 12px rgba(0, 0, 0, 0.5);
}
.vergleich .griff::after {
  content: "◀ ▶"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  font: 700 13px/1 Nunito, sans-serif; letter-spacing: 2px; color: var(--schild-schrift);
  background: var(--messing); box-shadow: inset 0 0 0 2px #8a6420, inset 0 2px 0 rgba(255, 255, 255, 0.7), 0 4px 10px rgba(0, 0, 0, 0.5);
}
.vergleich:has(input:focus-visible) { outline: 3px solid var(--messing-hell); outline-offset: 4px; }
.marke {
  position: absolute; top: 14px; z-index: 2; pointer-events: none; padding: 5px 14px 4px; border-radius: 6px;
  font: 800 13px/1.2 Nunito, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--schild-schrift);
  background: var(--messing); box-shadow: inset 0 0 0 1px #8a6420, 0 2px 6px rgba(0, 0, 0, 0.45);
}
.marke.links { left: 14px; }
.marke.rechts { right: 14px; }

/* --- Bildfolgen: Zustaende blenden nacheinander ein (seite.js). Ohne
   Skript steht das Bild mit der Klasse aktiv da. -------------------------- */
.folge { position: relative; overflow: hidden; aspect-ratio: 2 / 1; }
/* Zimmer: 4:3-Ausschnitt aus dem quadratischen Bild - oben 13,5 %, unten
   11,5 % weg (nur Wandspitze und Bodenecke, die Moebel bleiben ganz). */
.folge.zimmerbild { aspect-ratio: 4 / 3; }
.folge.zimmerbild .folge-bild { object-position: 50% 54%; }
/* Gast-Szenen: die Spielszene ohne Leisten (1920 x 930). */
.folge.szenenbild { aspect-ratio: 64 / 31; }
.folge-bild {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.55s ease;
}
.folge-bild.aktiv { opacity: 1; }
.rahmen .folge .folge-bild { box-shadow: none; border-radius: 0; }
/* Weiche Blende (Zimmer): Das neue Bild blendet ueber dem alten ein, das alte
   bleibt bis zum Ende der Blende stehen - so hellt die Mitte nicht auf. */
.folge.blende { isolation: isolate; }
.folge.blende .folge-bild { transition: opacity 0s linear 1.2s; }
.folge.blende .folge-bild.aktiv { z-index: 1; transition: opacity 1.2s ease-in-out; }
/* Stoss wie im Trailer (Renovieren und anbauen): harter Schnitt, das neue Bild
   setzt 3,5 % groesser ein und federt in 0,32 s zurueck (easeOutCubic) - kein
   dunkles Zwischenbild. Laeuft auch bei reduzierter Bewegung: der Browser der
   Claude-App meldet sie, und der Stoss ist kurz und klein. */
.folge.stoss .folge-bild { transition: none; }
.folge.stoss .folge-bild.aktiv { animation: stoss 0.32s cubic-bezier(0.33, 1, 0.68, 1); }
@keyframes stoss { from { transform: scale(1.035); } to { transform: scale(1); } }
.rahmen .folge { border-radius: 4px; box-shadow: 0 0 0 2px var(--messing-kante), 0 0 0 4px #3b2616; }

/* --- Schritt mit quadratischem Bild: grosses Bild, die Karte ueberlappt es
   leicht und sitzt oben. Spalten: Karte | Ueberlappung | Bild, bei
   ungeraden Schritten gespiegelt (Bild links wie bei den anderen). ------ */
.schritt.seitlich {
  display: grid; grid-template-columns: minmax(300px, 368fr) 72px minmax(0, 748fr);
  width: 100%; max-width: 1188px; margin-inline: auto; align-items: start;
}
.schritt.seitlich .rahmen { grid-row: 1; grid-column: 2 / 4; width: 100%; margin: 0; }
.schritt.seitlich .schritt-karte { grid-row: 1; grid-column: 1 / 3; width: 100%; margin: clamp(32px, 6.5vw, 80px) 0 0; }
.schritt.seitlich:nth-child(odd) { grid-template-columns: minmax(0, 748fr) 72px minmax(300px, 368fr); }
.schritt.seitlich:nth-child(odd) .rahmen { grid-column: 1 / 3; }
.schritt.seitlich:nth-child(odd) .schritt-karte { grid-column: 2 / 4; }

/* --- Bewerbungen: Portraets aus dem Spiel auf Papier, im Eichenrahmen ---- */
.bewerbungen {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px);
  padding: clamp(16px, 2.4vw, 30px) clamp(14px, 2vw, 26px) clamp(110px, 10vw, 120px);
  border-radius: 4px; background: var(--holz); box-shadow: 0 0 0 2px var(--messing-kante), 0 0 0 4px #3b2616, inset 0 2px 0 rgba(255, 235, 190, 0.5);
}
.bewerbung {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 14px;
  background: var(--papier); border-radius: 3px; box-shadow: 0 0 0 1px #d8c9a4, 0 8px 18px rgba(40, 20, 0, 0.45);
  font: 400 13px/1.4 "Courier New", Courier, monospace; color: #2b2217; transform: rotate(var(--dreh, 0deg));
}
.bewerbung:nth-child(1) { --dreh: -1.2deg; }
.bewerbung:nth-child(2) { --dreh: 0.8deg; }
.bewerbung:nth-child(3) { --dreh: -0.6deg; }
.bewerbung:nth-child(4) { --dreh: 1.1deg; }
.bew-foto {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain; object-position: 50% 100%;
  background: radial-gradient(circle at 50% 38%, #fbf1d9, #e3d2ac 72%, #d3bd8e); border-radius: 2px; box-shadow: inset 0 0 0 1px #c8b387;
}
.rahmen .bewerbung .bew-foto { box-shadow: inset 0 0 0 1px #c8b387; border-radius: 2px; }
.bewerbung h4 { margin: 6px 0 0; font: 700 16px/1.2 "Courier New", Courier, monospace; letter-spacing: 0.02em; }
.bew-beruf { margin: 0; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #6b5a44; }
.bew-werte { margin: 4px 0 2px; display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; align-items: center; font-size: 11px; }
.bew-werte dt { color: #6b5a44; }
.bew-werte dd { margin: 0; }
.punkte { display: inline-grid; grid-template-columns: repeat(5, 9px); gap: 2px; vertical-align: middle; }
.punkte i { width: 9px; height: 9px; background: #e5d8b8; box-shadow: inset 0 0 0 1px #b9a57c; }
.punkte i.an { background: #3b2d1c; box-shadow: none; }
.bew-plus, .bew-minus { margin: 0; font-size: 12px; line-height: 1.35; }
.bew-plus { color: var(--gruen); }
.bew-minus { color: var(--bordeaux); }
.bew-lohn { margin: auto 0 0; padding-top: 6px; border-top: 1px dashed #b9a57c; font-weight: 700; font-size: 13px; }

/* --- Lichtbild am Meldeschein -------------------------------------------- */
.meldeschein { position: relative; }
.meldeschein h3, .meldeschein dl { margin-right: 190px; }
.lichtbild {
  position: absolute; top: -26px; right: 22px; width: 170px; margin: 0; padding: 8px 8px 26px; z-index: 1;
  background: #fffdf6; transform: rotate(3.5deg); box-shadow: 0 10px 22px rgba(40, 20, 0, 0.45), 0 0 0 1px #e7dcc0;
}
.lichtbild img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.lichtbild::before {
  /* Buroklammer aus Messing */
  content: ""; position: absolute; top: -14px; left: 24px; width: 16px; height: 46px; border-radius: 8px;
  border: 3px solid #b88c3c; border-bottom-color: #8a6420; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* --- Im Haus: Bildraster mit Messingschildern --------------------------- */
.haus-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 36px); }
.haus-raster figure { margin: 0; display: grid; gap: 14px; align-content: start; }
.haus-raster figcaption { color: #e9dcc0; font-size: 16px; max-width: 34em; }
.haus-raster figcaption b { display: block; margin-bottom: 4px; color: var(--leinen); font: 700 21px/1.25 Fraunces, Georgia, serif; }
.haus-raster .breit { grid-column: 1 / -1; }

/* --- Die Haeuser: Schluesselbrett ----------------------------------------- */
.brett {
  position: relative; border-radius: 14px; padding: 30px clamp(12px, 3vw, 34px) 34px;
  background: var(--holz);
  box-shadow: inset 0 2px 0 rgba(255, 235, 190, 0.5), inset 0 -4px 0 rgba(80, 45, 15, 0.45), var(--schatten);
}
.haken { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 14px; }
.haken li { flex: none; }
.anhaenger {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 8px; margin-inline: auto;
  width: 106px; min-height: 142px; padding: 46px 6px 20px; border-radius: 10px 10px 46px 46px;
  font: 800 clamp(13px, 3.4vw, 16px)/1.2 Nunito, sans-serif; color: var(--schild-schrift); text-align: center;
  background: var(--messing); text-shadow: 0 1px 0 rgba(255, 240, 200, 0.7);
  box-shadow: inset 0 0 0 2px #8a6420, inset 0 2px 0 rgba(255, 255, 255, 0.7), 0 5px 8px rgba(0, 0, 0, 0.45);
  transform: rotate(var(--dreh, 0deg)); transform-origin: 50% -16px; transition: transform 0.2s ease;
}
.anhaenger::before {
  content: ""; position: absolute; left: 50%; top: 14px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%;
  background: #3b2616; box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.6), 0 0 0 3px #8a6420;
}
.anhaenger small { font: 700 11px/1.2 Nunito, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #6b4a1c; }
.anhaenger.fertig small { color: var(--bordeaux); font-weight: 800; }
.haken li:nth-child(4n + 1) .anhaenger { --dreh: -3deg; }
.haken li:nth-child(4n + 2) .anhaenger { --dreh: 2deg; }
.haken li:nth-child(4n + 3) .anhaenger { --dreh: -1deg; }
.haken li:nth-child(4n + 4) .anhaenger { --dreh: 3deg; }
.anhaenger:hover { transform: rotate(0deg) translateY(-3px); }
/* Gesperrte Haeuser (TBA): Marke ausgegraut, Schloss vor dem TBA. */
.anhaenger.gesperrt { filter: grayscale(1) brightness(0.9) contrast(0.92); }
.anhaenger.gesperrt small { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; letter-spacing: 0.18em; color: #4a3a22; }
.anhaenger.gesperrt small::before {
  content: ""; flex: none; width: 13px; height: 13px; background: currentColor;
  -webkit-mask: var(--schloss) center / contain no-repeat; mask: var(--schloss) center / contain no-repeat;
}

.hotel { margin-top: clamp(48px, 7vw, 88px); display: grid; gap: clamp(20px, 3vw, 32px); }
.hotel-kopf { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: stretch; }
.hotel-kopf .tafel { display: flex; flex-direction: column; justify-content: center; }
.hotel-kopf .tafel h3 { margin: 0 0 4px; font: 700 clamp(26px, 2.8vw, 34px)/1.15 Fraunces, Georgia, serif; text-wrap: balance; }
.steckbrief { margin: 16px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 16px; }
.steckbrief dt { color: var(--dim); font-weight: 700; }
.steckbrief dd { margin: 0; font-variant-numeric: tabular-nums; }
.motto { margin: 0; color: var(--messing-schrift); font: italic 600 18px/1.4 Fraunces, Georgia, serif; }
.galerie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.galerie img { border-radius: 6px; box-shadow: 0 0 0 2px var(--messing-kante), 0 0 0 4px #3b2616, 0 8px 18px rgba(0, 0, 0, 0.45); }

.weitere { margin-top: clamp(40px, 6vw, 72px); }
.weitere h3 { margin: 0 0 20px; text-align: center; color: var(--leinen); font: 700 clamp(22px, 2.4vw, 28px)/1.2 Fraunces, Georgia, serif; }
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.karte {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px;
  background: var(--papier); border-radius: 10px; box-shadow: var(--trim), 0 6px 16px rgba(0, 0, 0, 0.4);
}
.karte img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; box-shadow: 0 0 0 2px var(--messing-kante); }
.karte b { display: block; font: 700 17px/1.25 Fraunces, Georgia, serif; }
.karte span { display: block; font-size: 14px; color: var(--dim); line-height: 1.45; }
/* Gesperrt: Karte ausgegraut, das Hausbild unscharf mit Schloss darueber. */
.karte.gesperrt { filter: grayscale(1); align-items: center; }
.karte.gesperrt b { color: #5a534b; }
.karte.gesperrt div span { color: #8a8379; }
.karte-bild { position: relative; display: block; width: 96px; height: 96px; overflow: hidden; border-radius: 6px; box-shadow: 0 0 0 2px var(--messing-kante); }
.karte-bild img { box-shadow: none; border-radius: 0; filter: blur(3.5px); transform: scale(1.12); opacity: 0.8; }
.karte-bild::before, .karte-bild::after { content: ""; position: absolute; inset: 0; margin: auto; }
.karte-bild::before { width: 50px; height: 50px; border-radius: 50%; background: rgba(32, 26, 20, 0.82); box-shadow: 0 0 0 2px rgba(240, 228, 200, 0.55); }
.karte-bild::after { width: 24px; height: 24px; background: var(--leinen); -webkit-mask: var(--schloss) center / contain no-repeat; mask: var(--schloss) center / contain no-repeat; }

/* --- Kontakt: der Meldeschein (Papier bleibt Courier) --------------------- */
.meldeschein {
  max-width: 640px; margin-inline: auto; padding: clamp(24px, 4vw, 40px);
  background: var(--papier); border-radius: 4px; transform: rotate(0.6deg);
  box-shadow: 0 0 0 1px #d8c9a4, 0 18px 40px rgba(0, 0, 0, 0.55);
  font: 400 17px/1.55 "Courier New", Courier, monospace; color: #2b2217;
}
.meldeschein h3 { margin: 0 0 18px; font: 700 15px/1.2 "Courier New", Courier, monospace; letter-spacing: 0.24em; text-transform: uppercase; border-bottom: 2px solid #2b2217; padding-bottom: 10px; }
.meldeschein dl { margin: 0; display: grid; grid-template-columns: minmax(7.5em, auto) 1fr; gap: 10px 16px; }
.meldeschein dt { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #6b5a44; padding-top: 3px; }
.meldeschein dd { margin: 0; padding-bottom: 6px; border-bottom: 1px dashed #b9a57c; }
.meldeschein dd a { color: var(--bordeaux); text-underline-offset: 3px; }
.meldeschein .stempel {
  display: inline-block; margin-top: 22px; padding: 6px 14px; border: 3px double var(--bordeaux); border-radius: 6px;
  color: var(--bordeaux); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; transform: rotate(-4deg);
}

/* --- Fuss: das Eichenbrett ------------------------------------------------ */
.fuss {
  margin-top: clamp(24px, 4vw, 40px); padding: 22px var(--rand); background: var(--holz);
  box-shadow: inset 0 3px 0 rgba(255, 235, 190, 0.5), inset 0 -3px 0 rgba(80, 45, 15, 0.45);
  color: #3b2410; font-weight: 700; font-size: 15px; text-align: center;
}
.fuss p { margin: 0; }
/* Kanaele als Messingschilder mit Symbol. */
.kanaele { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; margin-bottom: 16px !important; }
.kanal {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 18px 7px 14px; border-radius: 8px; text-decoration: none;
  font: 800 15px/1 Nunito, sans-serif; letter-spacing: 0.06em; color: var(--schild-schrift); background: var(--messing);
  box-shadow: inset 0 0 0 1px #8a6420, inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 3px 8px rgba(0, 0, 0, 0.45);
}
.kanal svg { width: 20px; height: 20px; flex: none; }
.kanal:hover, .kanal:focus-visible { filter: brightness(1.08); }

/* --- Schmale Bildschirme -------------------------------------------------- */
@media (max-width: 1000px) {
  .bewerbungen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .titel-folge { aspect-ratio: 3 / 2; }
}
@media (max-width: 860px) {
  .hotel-kopf { grid-template-columns: minmax(0, 1fr); }
  .schritt.seitlich, .schritt.seitlich:nth-child(odd) { grid-template-columns: minmax(0, 1fr); }
  .schritt.seitlich .rahmen, .schritt.seitlich:nth-child(odd) .rahmen,
  .schritt.seitlich .schritt-karte, .schritt.seitlich:nth-child(odd) .schritt-karte { grid-column: 1; grid-row: auto; }
  .schritt.seitlich .schritt-karte { margin: -40px auto 0; width: calc(100% - 24px); }
  .bewerbungen { padding-bottom: 56px; }
  .meldeschein h3, .meldeschein dl { margin-right: 0; }
  .lichtbild { position: relative; top: auto; right: auto; width: 150px; margin: 0 auto 22px; transform: rotate(2deg); }
  .haus-raster { grid-template-columns: minmax(0, 1fr); }
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schritt-karte, .schritt:nth-child(even) .schritt-karte { margin: -40px auto 0; width: calc(100% - 24px); }
}
@media (max-width: 600px) {
  .titel-folge { aspect-ratio: 1 / 1; }
}
@media (max-width: 480px) {
  body { font-size: 16px; }
  .haken { gap: 22px 10px; }
  .anhaenger { width: 96px; min-height: 132px; }
  .titel-kanaele .kanal { padding: 9px; }
  .titel-kanaele .kanal span { display: none; }
  .vergleich .griff::after { width: 46px; height: 46px; }
  .marke { top: 8px; font-size: 11px; padding: 4px 9px 3px; }
  .marke.links { left: 8px; }
  .marke.rechts { right: 8px; }
  .tafel { border-width: 9px; }
  .bewerbungen { gap: 10px; padding-inline: 10px; }
  .bewerbung { padding: 8px 8px 10px; }
  .bewerbung h4 { font-size: 14px; }
  .bew-werte { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .bew-werte dd { margin-bottom: 3px; }
  .meldeschein dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .meldeschein dt { padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Die Blenden bleiben, nur der langsame Zoom im Titel entfaellt. */
  .titel-folge .folge-bild { transition: opacity 0s linear 1.6s; }
  .titel-folge .folge-bild.aktiv { transform: none; transition: opacity 1.6s ease; }
  .anhaenger { transition: none; }
}