/* Fifth Ace Casino — Landingpage.
   Formensprache und Farben aus dem Spiel: Titel-Poster (ui_keyart, title_screen.gd),
   Haus-Platten (*_ui_panel_plate) und Hausschriften (looks.gd). */
@font-face { font-family: "Pacifico"; src: url("/fonts/Pacifico.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans-600.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "FA Spur"; src: url("/fonts/FA-Spur.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "FA Rose"; src: url("/fonts/FA-Rose.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "FA Starlite"; src: url("/fonts/FA-Starlite.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "FA Hadrians"; src: url("/fonts/FA-Hadrians.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "FA CJK Display"; src: url("/fonts/FA-CJK.woff2") format("woff2"); font-display: swap; }

:root {
  --paper: #fbf1d1;       /* Papier des Posters */
  --paper-2: #f5e6bc;
  --paper-3: #eed9a2;
  --ink: #1f3036;         /* Silhouette */
  --charcoal: #292b30;    /* Titel-Schriftzug */
  --turq: #2ab4aa;
  --turq-deep: #0e7c78;
  --tang: #ed711e;
  --tang-text: #c4520f;
  --mustard: #f2b632;
  --red: #df4d23;
  --script: "Pacifico", "Brush Script MT", cursive;
  --sans: "Open Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --wrap: 1200px;
  --shadow: 7px 7px 0 rgba(31, 48, 54, .26);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--paper); color: var(--charcoal); font: 400 17px/1.65 var(--sans); overflow-x: hidden; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--tang-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--tang); outline-offset: 3px; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0 0 .4em; font-weight: 400; line-height: 1.2; }
.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }
.ph { background: #ffe066; color: #3a2a00; padding: 0 .25em; font-weight: 600; }

/* Schriftzug wie im Titelbild: Anthrazit, Cremerand, Tangerine-Versatzschatten */
.script, .sh h2, .hero h1, .doc h1, .demo h2, .f-logo {
  font-family: var(--script); font-weight: 400; color: var(--charcoal);
  -webkit-text-stroke: .08em var(--paper); paint-order: stroke fill;
  text-shadow: .05em .05em 0 rgba(237, 113, 30, .92);
  letter-spacing: 0;
}
/* Gesperrte Versalien wie Untertitel und Menü im Spiel */
.kicker, .caps, .mainnav a, .lang, .pbtn, .era, .hnote, .sub, .badge, .h-caps, figcaption, .fine {
  font-family: var(--sans); font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
}
.kicker { font-size: .78rem; color: var(--tang-text); margin: 0 0 .5em; }
.kicker::before { content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin: -.2em .5em 0 0; vertical-align: middle; background: url("/img/mark.svg") center / contain no-repeat; }

/* ---------- Poster-Knopf (TitleScreen.PosterButton) ---------- */
.pmenu { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.pmenu-left { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 14px 40px; padding-left: 36px; }
.pbtn {
  position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 6px 16px;
  background: rgba(251, 241, 209, .92); color: var(--ink); text-decoration: none; font-size: 1.12rem; line-height: 1.2;
  box-shadow: inset 0 -2px 0 rgba(31, 48, 54, .7); transition: color .12s, box-shadow .12s, background .12s;
}
.pbtn::before {
  content: ""; position: absolute; left: -36px; top: 50%; width: 28px; height: 28px; margin-top: -14px;
  background: url("/img/mark.svg") center / contain no-repeat; opacity: 0; transform: scale(.6) rotate(-20deg); transition: opacity .15s, transform .2s;
}
.pbtn:hover, .pbtn:focus-visible { color: var(--tang-text); box-shadow: inset 0 -4px 0 var(--tang); outline: none; }
.pbtn:hover::before, .pbtn:focus-visible::before { opacity: 1; transform: none; }
.pbtn:active { background: var(--ink); color: var(--paper); box-shadow: none; }
.pbtn-main { box-shadow: inset 0 -4px 0 var(--tang); }
.pbtn-main::before { opacity: 1; transform: none; }
.pbtn-sm { min-height: 36px; font-size: .8rem; padding: 4px 12px; }
.pbtn-sm::before { display: none; }

/* ---------- Kopfleiste ---------- */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(251, 241, 209, .96); border-bottom: 2px solid var(--ink); }
.topbar .wrap { display: flex; align-items: center; gap: 22px; min-height: 60px; }
.brand { margin-right: auto; display: flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; }
.brand img { width: 32px; height: 32px; }
.brand span { font-family: var(--script); font-size: 1.35rem; color: var(--charcoal); text-shadow: 2px 2px 0 rgba(237, 113, 30, .85); line-height: 1; padding-bottom: 4px; }
.mainnav { display: flex; gap: 22px; }
.mainnav a { color: var(--ink); text-decoration: none; font-size: .74rem; padding: 6px 0; box-shadow: inset 0 -2px 0 transparent; }
.mainnav a:hover { color: var(--tang-text); box-shadow: inset 0 -2px 0 var(--tang); }
.lang { display: flex; gap: 10px; font-size: .74rem; white-space: nowrap; }
.lang a, .lang span { color: var(--ink); text-decoration: none; padding: 4px 0; }
.lang span[aria-current] { box-shadow: inset 0 -2px 0 var(--tang); color: var(--tang-text); }
.lang a:hover { color: var(--tang-text); }
.topbar .pbtn { background: transparent; }
@media (max-width: 1080px) { .mainnav { display: none; } }
@media (max-width: 480px) { .brand span { font-size: 1.12rem; } .brand img { width: 26px; height: 26px; } .topbar .wrap { gap: 12px; min-height: 54px; } .lang { gap: 8px; letter-spacing: .08em; } .topbar .pbtn-sm { padding: 4px 6px; letter-spacing: .1em; } }

/* ---------- Hero: das Titel-Poster ---------- */
.hero { position: relative; overflow: hidden; background: var(--paper); }
.hero-art img { width: 100%; }
.hero-title { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(3.4rem, 7.2vw, 8.6rem); line-height: 1.25; margin: 0; white-space: nowrap; }
.sub { margin: 0; }
.sub span, .hnote span { display: inline-block; background: rgba(251, 241, 209, .88); padding: 5px 10px; border-radius: 3px; color: var(--charcoal); }
.sub span { font-size: clamp(.9rem, 1.25vw, 1.3rem); letter-spacing: .16em; }
.hnote { margin: 0; font-size: .72rem; }
.hero .pmenu { margin: 18px 0 14px; }
.hero-star { position: absolute; z-index: -1; pointer-events: none; }

@media (min-width: 760px) {
  .hero { height: clamp(540px, min(calc(100svh - 62px), 66.67vw), 980px); }
  .hero-art img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: 50% 62%; }
  .hero-title { position: absolute; right: 4.6vw; top: clamp(24px, 6%, 90px); display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
  .hero-star { display: none; }
  .hero .pmenu .pbtn { font-size: clamp(1rem, 1.35vw, 1.45rem); min-height: clamp(44px, 3.4vw, 58px); padding-inline: 18px; }
}
@media (max-width: 759px) {
  .hero { display: flex; flex-direction: column; }
  .hero-title { order: 1; padding: 30px 18px 8px; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
  .hero h1 { font-size: clamp(2.6rem, 12.4vw, 4.2rem); }
  .hero-star { right: -18px; top: -6px; width: 190px; opacity: .95; }
  .hero-art { order: 2; margin-top: -4px; }
  .hero .pmenu { gap: 8px; margin: 16px 0 12px; }
  .hero .pmenu .pbtn { font-size: 1rem; min-height: 44px; }
  .hero .pmenu .pbtn:nth-child(4) { display: none; }
}

/* ---------- Abschnittsköpfe ---------- */
section { position: relative; }
.sh { max-width: 1000px; margin: 0 0 40px; }
.sh h2 { font-size: clamp(2.3rem, 1.4rem + 3vw, 3.9rem); line-height: 1.3; margin: 0 0 .25em; }
.sh .lead { font-size: 1.1rem; max-width: 64ch; }

/* ---------- Einleitung: Plakatfeld (poster_panel_stylebox) ---------- */
.intro { padding: 64px 0 24px; }
.poster-card { position: relative; max-width: 900px; margin-inline: auto; background: var(--paper); border: 2px solid var(--ink); box-shadow: var(--shadow); padding: 34px 40px 26px; }
.poster-card::after { content: ""; position: absolute; right: -34px; top: -40px; width: 96px; height: 96px; background: url("/img/mark.svg") center / contain no-repeat; }
.pitch { font-size: clamp(1.12rem, 1rem + .6vw, 1.42rem); line-height: 1.55; color: var(--ink); }
.fine { font-size: .72rem; color: rgba(31, 48, 54, .75); margin: 0; }
@media (max-width: 759px) { .poster-card { padding: 24px 20px 20px; } .poster-card::after { right: -8px; top: -36px; width: 64px; height: 64px; } .intro { padding-top: 48px; } }

/* ---------- Die fünf Häuser: Story-Bild + Haus-Platte ---------- */
.houses { padding: 72px 0 64px; background:
  linear-gradient(104deg, transparent 0 62%, rgba(42, 180, 170, .0) 62%),
  var(--paper); }
.houses::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 34%; background: var(--turq); clip-path: polygon(0 0, 100% 0, 62% 100%, 0 100%); opacity: .95; }
.houses .wrap { position: relative; }
.houses .sh { background: var(--paper); border: 2px solid var(--ink); box-shadow: var(--shadow); padding: 26px 30px 16px; max-width: 760px; }
.house-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 56px; counter-reset: h; }
.house { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.house .illu { margin: 0; grid-column: 1; grid-row: 1; border: 2px solid var(--ink); box-shadow: var(--shadow); background: var(--ink); }
.house .illu img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.house .plate { grid-column: 2; grid-row: 1; margin-left: -64px; position: relative; z-index: 1; padding: 30px 32px 26px; box-shadow: 6px 8px 18px rgba(31, 48, 54, .35); }
.house.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.house.flip .illu { grid-column: 2; }
.house.flip .plate { grid-column: 1; margin-left: 0; margin-right: -64px; }
.plate .yr { font-family: var(--sans); font-weight: 600; letter-spacing: .3em; font-size: .85rem; margin: 0 0 .2em; }
.plate h3 { font-size: clamp(2rem, 1.3rem + 2vw, 3rem); line-height: 1.1; margin: 0 0 .3em; }
.plate .era { font-size: .72rem; margin: 0 0 1em; opacity: .9; }
.plate .blurb { font-size: .98rem; line-height: 1.6; margin: 0; }
/* Platten und Farben aus looks.gd */
.h-spur .plate { border: 19px solid transparent; border-image: url("/img/houses/spur-plate.webp") 19 fill / 19px stretch; color: #f7ebcc; }
.h-spur h3 { font-family: "FA Spur", var(--sans); color: #f7ebcc; }
.h-spur .yr, .h-spur .era { color: #d6b885; }
.h-sunburst .plate { border: 16px solid transparent; border-image: url("/img/houses/sunburst-plate.webp") 16 fill / 16px stretch; color: #292b30; }
.h-sunburst h3 { font-family: var(--script); color: #292b30; text-shadow: .05em .05em 0 rgba(237, 113, 30, .85); line-height: 1.4; }
.h-sunburst .yr, .h-sunburst .era { color: #0e7c78; }
.h-rose .plate { border: 12px solid transparent; border-image: url("/img/houses/rose-plate.webp") 12 fill / 12px stretch; color: #f5e6c7; }
.h-rose h3 { font-family: "FA Rose", var(--sans); color: #f1d38a; }
.h-rose .yr, .h-rose .era { color: #c79e47; }
.h-starlite .plate { border: 10px solid transparent; border-image: url("/img/houses/starlite-plate.webp") 10 fill / 10px stretch; color: #f1f1ff; }
.h-starlite h3 { font-family: "FA Starlite", var(--sans); color: #f1f1ff; text-shadow: 0 0 14px rgba(190, 150, 255, .7); }
.h-starlite .yr, .h-starlite .era { color: #c9c2ee; }
.h-hadrians .plate { border: 24px solid transparent; border-image: url("/img/houses/hadrians-plate.webp") 24 fill / 24px stretch; color: #29211f; }
.h-hadrians h3 { font-family: "FA Hadrians", Georgia, serif; color: #29211f; letter-spacing: .04em; }
.h-hadrians .yr, .h-hadrians .era { color: #7d6424; }
@media (max-width: 859px) {
  .houses::before { width: 70%; clip-path: polygon(0 0, 100% 0, 20% 100%, 0 100%); opacity: .9; }
  .house, .house.flip { grid-template-columns: 1fr; }
  .house .illu, .house.flip .illu { grid-column: 1; grid-row: 1; }
  .house .plate, .house.flip .plate { grid-column: 1; grid-row: 2; margin: -34px 12px 0; padding: 20px 18px 16px; }
  .house-list { gap: 40px; }
  .houses .sh { padding: 20px 20px 10px; }
}

/* ---------- Trailer: Türkis-Fläche mit Plakatrahmen ---------- */
.trailer { background: var(--turq); padding: 72px 0 80px; overflow: hidden; }
.trailer::before { content: ""; position: absolute; right: 0; bottom: 0; width: 46%; height: 64%; background: var(--mustard); clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%); }
.trailer::after { content: ""; position: absolute; left: -4%; top: 30%; width: 30%; height: 58%; background: var(--tang); clip-path: polygon(0 12%, 100% 0, 72% 100%, 0 100%); }
.trailer .wrap { position: relative; z-index: 1; }
.trailer .sh { margin-inline: auto; text-align: center; }
.trailer .sh h2 { -webkit-text-stroke-color: var(--turq); }
.trailer .kicker { color: var(--paper); }
.frame-poster { background: var(--paper); border: 2px solid var(--ink); box-shadow: var(--shadow); padding: 14px; margin: 0; }
.trailer .frame-poster { max-width: 980px; margin-inline: auto; }
.video { position: relative; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.video > img, .video video, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.soon { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(31, 48, 54, .1), rgba(31, 48, 54, .45)); }
.soon-t { font-family: var(--script); font-size: clamp(2.2rem, 7vw, 5.4rem); color: var(--paper); text-shadow: .05em .05em 0 var(--tang); margin: 0; line-height: 1.3; }
.soon-b { margin: 0; }
.soon-b span { display: inline-block; background: var(--paper); color: var(--ink); padding: 6px 14px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; font-size: clamp(.72rem, 1.4vw, .95rem); box-shadow: inset 0 -3px 0 var(--tang); }
.play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(31, 48, 54, .25); border: 0; cursor: pointer; font: inherit; }
.play:hover .pbtn { color: var(--tang-text); }
.consent { text-align: center; font-size: .85rem; color: var(--ink); margin-top: 16px; }
.consent a { color: var(--ink); font-weight: 600; }
@media (max-width: 759px) { .frame-poster { padding: 8px; } .trailer { padding: 56px 0 60px; } .trailer::after { display: none; } }

/* ---------- Kernversprechen: Screenshots in Haus-Rahmen ---------- */
.promises { padding: 84px 0 40px; }
.promise { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; margin-bottom: 64px; }
.promise.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.promise.flip .gframe { order: 2; }
.gframe { margin: 0; box-shadow: var(--shadow); }
.gframe a { display: block; }
.gframe img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.g-hadrians { border: 22px solid transparent; border-image: url("/img/houses/hadrians-plate.webp") 24 / 22px stretch; }
.g-spur { border: 18px solid transparent; border-image: url("/img/houses/spur-plate.webp") 19 / 18px stretch; }
.g-sunburst { border: 14px solid transparent; border-image: url("/img/houses/sunburst-plate.webp") 16 / 14px stretch; }
.g-rose { border: 12px solid transparent; border-image: url("/img/houses/rose-plate.webp") 12 / 12px stretch; }
.g-starlite { border: 10px solid transparent; border-image: url("/img/houses/starlite-plate.webp") 10 / 10px stretch; }
.ptext h3 { font-family: var(--sans); font-weight: 600; font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem); color: var(--ink); line-height: 1.25; }
.ptext p { color: #33363b; }
.card { display: inline-flex; flex-direction: column; justify-content: space-between; width: 50px; height: 70px; margin-bottom: 18px; padding: 4px 6px; background: #fdf7e3; border: 2px solid var(--ink); border-radius: 6px; box-shadow: 3px 4px 0 rgba(31, 48, 54, .3); transform: rotate(-6deg); line-height: 1; }
.card b { font-family: var(--sans); font-weight: 600; font-size: 1rem; }
.card i { font-style: normal; font-size: 1.9rem; align-self: flex-end; }
.card.ink { color: var(--ink); }
.card.red { color: var(--red); }
@media (max-width: 859px) {
  .promise, .promise.flip { grid-template-columns: 1fr; gap: 22px; margin-bottom: 52px; }
  .promise.flip .gframe { order: 0; }
  .g-hadrians { border-width: 14px; border-image-width: 14px; }
  .g-spur { border-width: 12px; border-image-width: 12px; }
}

/* ---------- Galerie ---------- */
.gallery { background: var(--paper-2); padding: 76px 0 72px; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.gallery::before { content: ""; position: absolute; right: 4%; top: -48px; width: 150px; height: 150px; background: url("/img/mark.svg") center / contain no-repeat; }
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 26px; }
.grid figure { margin: 0; background: var(--paper); border: 2px solid var(--ink); box-shadow: 5px 5px 0 rgba(31, 48, 54, .24); padding: 8px 8px 0; transition: transform .15s, box-shadow .15s; }
.grid li:nth-child(3n+1) figure { transform: rotate(-.6deg); }
.grid li:nth-child(3n+2) figure { transform: rotate(.5deg); }
.grid figure:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 rgba(237, 113, 30, .6); }
.grid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.grid figcaption { font-size: .66rem; line-height: 1.45; padding: 9px 2px 10px; color: var(--ink); letter-spacing: .1em; }
@media (max-width: 1099px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid li:nth-child(9) { display: none; } }
@media (max-width: 599px) { .grid { gap: 16px 12px; } .grid figure { padding: 5px 5px 0; } .grid figcaption { font-size: .58rem; letter-spacing: .06em; padding: 6px 1px 7px; } .gallery::before { width: 90px; height: 90px; top: -30px; } }

/* ---------- Features mit Spiel-Icons ---------- */
.features { padding: 80px 0 72px; }
.flist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 44px; }
.flist li { display: flex; gap: 16px; align-items: center; padding: 8px 0 12px; border-bottom: 1px solid rgba(31, 48, 54, .35); color: var(--ink); line-height: 1.45; }
.ico { flex: 0 0 52px; height: 52px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.ico img { width: 32px; height: 32px; object-fit: contain; }
@media (max-width: 759px) { .flist { grid-template-columns: 1fr; } .ico { flex-basis: 46px; height: 46px; } .ico img { width: 28px; height: 28px; } }

/* ---------- Demo / Wunschliste ---------- */
.demo { padding: 76px 0; background: var(--paper); overflow: hidden; }
.demo::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: var(--mustard); clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%); }
.demo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: var(--turq); clip-path: polygon(0 70%, 100% 10%, 100% 100%, 0 100%); }
.demo .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.demo-art { transform: rotate(-1.2deg); }
.demo-art img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.demo-text { background: var(--paper); border: 2px solid var(--ink); box-shadow: var(--shadow); padding: 30px 32px 28px; }
.demo h2 { font-size: clamp(2rem, 1.3rem + 1.8vw, 2.8rem); line-height: 1.3; }
.badge { margin: 0 0 .6em; font-size: .72rem; }
.badge span { background: var(--ink); color: var(--paper); padding: 4px 10px; }
.demo .pmenu { margin-top: 18px; }
@media (max-width: 859px) { .demo .wrap { grid-template-columns: 1fr; gap: 30px; } .demo-text { padding: 22px 20px 20px; } }

/* ---------- Presse ---------- */
.press { padding: 40px 0 96px; background: var(--turq); margin-top: -1px; }
.press .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.h-caps { font-size: 1.1rem; margin: 0 0 .3em; color: var(--ink); }
.press p { margin: 0; color: var(--ink); }
.press .pmenu-left { padding-left: 36px; }

/* ---------- Fußzeile im Posterstil ---------- */
.site-footer { background: var(--ink); color: var(--paper); padding: 0 0 36px; font-size: .9rem; }
.docbody .press, .docbody .site-footer { }
.site-footer { position: relative; display: flow-root; }
.stripes { display: block; width: 100%; height: clamp(40px, 5vw, 72px); margin-top: calc(-1 * clamp(40px, 5vw, 72px) + 1px); position: relative; }
.site-footer .wrap { display: grid; grid-template-columns: auto 1fr; gap: 16px 48px; padding-top: 36px; align-items: start; }
.f-brand { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 0 12px; align-items: center; }
.f-brand img { grid-row: span 2; }
.f-logo { font-size: 1.7rem; color: var(--paper); -webkit-text-stroke: 0; margin: 0; line-height: 1.3; }
.f-sub { margin: 0; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: .66rem; color: var(--mustard); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: flex-end; padding-top: 12px; }
.site-footer nav a { color: var(--paper); text-decoration: none; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; padding: 4px 0; box-shadow: inset 0 -2px 0 rgba(251, 241, 209, .25); }
.site-footer nav a:hover { color: var(--mustard); box-shadow: inset 0 -2px 0 var(--tang); }
.f-legal { grid-column: 1 / -1; border-top: 1px solid rgba(251, 241, 209, .2); padding-top: 18px; color: rgba(251, 241, 209, .78); font-size: .8rem; }
.f-legal p { margin: 0 0 .35em; }
.made span { color: var(--tang); }
.site-footer .ph { color: #3a2a00; }
@media (max-width: 759px) { .site-footer .wrap { grid-template-columns: 1fr; } .site-footer nav { justify-content: flex-start; } }

/* ---------- Lightbox ---------- */
.lb { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lb::backdrop { background: rgba(20, 30, 34, .94); }
.lb figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 64px 24px; }
.lb img { max-height: calc(100vh - 130px); width: auto; border: 10px solid var(--paper); box-shadow: 8px 8px 0 rgba(237, 113, 30, .7); }
.lb figcaption { color: var(--paper); margin-top: 14px; text-align: center; font-size: .75rem; }
.lb button { position: fixed; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); width: 48px; height: 48px; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.lb button:hover { color: var(--tang-text); box-shadow: inset 0 -4px 0 var(--tang); }
.lb-close { top: 12px; right: 12px; }
.lb-prev { left: 12px; top: 50%; }
.lb-next { right: 12px; top: 50%; }
@media (max-width: 599px) { .lb figure { padding: 60px 8px 16px; } .lb img { border-width: 5px; } .lb-prev, .lb-next { top: auto; bottom: 12px; } }

/* ---------- Textseiten (Recht, Presse, 404) ---------- */
.doc { padding: 56px 0 80px; background: var(--paper); position: relative; overflow: hidden; }
.doc::before { content: ""; position: absolute; left: 0; top: 0; width: 22%; height: 520px; background: var(--turq); clip-path: polygon(0 0, 100% 0, 30% 100%, 0 100%); }
.doc::after { content: ""; position: absolute; right: 0; top: 0; width: 12%; height: 300px; background: var(--mustard); clip-path: polygon(40% 0, 100% 0, 100% 100%); }
.paper { position: relative; z-index: 1; max-width: 820px; margin-inline: auto; background: var(--paper); border: 2px solid var(--ink); box-shadow: var(--shadow); padding: 40px 48px 44px; }
.doc.wide .paper { max-width: 1060px; }
.doc h1 { font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.6rem); line-height: 1.3; margin: 0 0 .35em; }
.doc h2 { font-family: var(--sans); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: .95rem; color: var(--ink); margin: 2.2em 0 .7em; padding-bottom: .45em; border-bottom: 2px solid var(--ink); }
.doc h3 { font-family: var(--sans); font-weight: 600; font-size: 1.05rem; color: var(--ink); margin: 1.6em 0 .5em; }
.doc p, .doc li { max-width: 72ch; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li { margin-bottom: .4em; }
.doc .lead { font-size: 1.15rem; color: var(--ink); }
.doc address { font-style: normal; }
.doc table { border-collapse: collapse; width: 100%; margin: 0 0 1.5em; font-size: .95rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 9px 12px 9px 0; border-bottom: 1px solid rgba(31, 48, 54, .3); }
.doc th { width: 34%; font-weight: 600; color: var(--ink); }
.doc .pmenu-left { margin: 10px 0 24px; }
.dl-grid { list-style: none; padding: 0; margin: 0 0 1.5em; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.dl-grid a { display: block; text-decoration: none; color: var(--ink); background: var(--paper-2); border: 2px solid var(--ink); padding: 6px; font-size: .88rem; }
.dl-grid a:hover { box-shadow: 5px 5px 0 rgba(237, 113, 30, .6); }
.dl-grid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ink); }
.dl-grid img.contain { object-fit: contain; background: var(--paper-3); padding: 10px; }
.dl-grid span { display: block; padding: 8px 4px 2px; word-break: break-word; }
.dl-grid small { color: rgba(31, 48, 54, .7); }
.nf .paper { text-align: left; overflow: hidden; }
.nf-star { position: absolute; right: -30px; top: -30px; width: 180px; opacity: .95; }
@media (max-width: 759px) {
  .doc { padding: 28px 0 56px; }
  .paper { padding: 26px 18px 30px; box-shadow: 5px 5px 0 rgba(31, 48, 54, .26); }
  .doc th, .doc td { display: block; width: auto; padding: 4px 0; border: 0; }
  .doc tr { display: block; padding: 8px 0; border-bottom: 1px solid rgba(31, 48, 54, .3); }
  .nf-star { width: 110px; right: -20px; top: -20px; }
}

/* ---------- Chinesische Kurzseite ---------- */
.zh .sh h2, .cjk { font-family: "FA CJK Display", var(--sans); }
.zh .sh h2 { -webkit-text-stroke: 0; letter-spacing: .04em; }
.zh .sub span { letter-spacing: .3em; }
.zh .era, .zh .kicker { letter-spacing: .08em; }
.zh-more { padding-bottom: 110px; }
.toc { background: var(--paper-2); border-left: 4px solid var(--turq); padding: 14px 20px 8px; margin: 0 0 1.5em; font-size: .95rem; }
.toc ol { margin: 0; padding-left: 1.3em; }
.toc a { color: var(--ink); }
.toc a:hover { color: var(--tang-text); }
.doc .dl-grid { padding: 0; }