/* ===========================================================================
   PREYE — interner Startbildschirm.

   This is a tool's front door, not a landing page: no persuasion, no scroll
   story. Everything the crew does lives one tap away at the top, and below it
   the numbers they would otherwise open three pages to find.

   Palette is the brand ramp from style.css, restated here so this page stands
   on its own without dragging in the map app's 3700 lines of UI.
   =========================================================================== */

:root {
  /* Die Seite läuft mit viewport-fit=cover, reicht also bis unter Status- und
     Browserleiste. Ohne diese vier Werte klebt die Leiste am Rand des
     Layout-Fensters — und damit in Safari hinter der URL-Leiste. --vv-* setzt
     viewport-insets.js. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --vv-top: 0px;
  --vv-bottom: 0px;

  --pool-deep: #045d75;
  --pool: #0b7c95;
  --sea: #0f9a78;
  --green: #2fa35f;
  --lime: #b5d33a;
  --lime-bright: #c6e03c;
  --ramp: linear-gradient(100deg,
    var(--pool-deep) 0%, var(--pool) 20%, var(--sea) 40%,
    var(--green) 62%, var(--lime) 86%, var(--lime-bright) 100%);

  /* Dieselben Neutralen wie style.css seit dem Farbkonzept vom 20.08.2026:
     ein sehr helles Grau-Grün, das an die Kopfleiste anschließt. Vorher zogen
     sie ins Teal, was für sich stimmig war, neben der Detailseite aber ein
     zweites System ergab. Die Werte stehen hier zum zweiten Mal, weil diese
     Seite style.css nicht lädt. */
  --ink: #17211c;
  --ink-soft: #526158;
  --ink-faint: #66736c;
  --paper: #ffffff;
  --tint: #f3f6f3;
  --rule: #dce5df;
  --night: #04141c;

  /* Die Aktionsfarbe — Waldgrün, wie im ganzen Rest. */
  --act: #198754;
  --act-hover: #126b45;
  --act-soft: #e8f5ed;
  --act-text: #197447;

  --alert: #e58b3a;        /* Füllfarbe — Aufmerksamkeit, nicht Standard */
  --alert-ink: #2a0d04;    /* Schrift darauf, 7,0:1 */
  --alert-text: #a75f18;   /* Orange als Schrift auf Hell, 4,9:1 */

  --gap: clamp(14px, 2.6vw, 28px);
  --shell: 1280px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tint);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: var(--night); color: #fff; padding: 10px 16px; z-index: 100; }

.muted { color: var(--ink-faint); font-size: 14px; margin: 0; }

/* ------------------------------------------------------------------- Bar */

.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
  /* Oben kommt der Rand dazu, den Statusleiste und Safari-Leiste belegen. Als
     Innenabstand, nicht als top-Versatz: so schiebt sich der Inhalt nach unten
     ins Sichtbare, während der Farbverlauf den Streifen darüber weiter
     ausfüllt. */
  padding: calc(9px + var(--safe-top) + var(--vv-top)) var(--gap) 9px;
  /* The ramp under a dark veil — full strength it would swallow the links at
     the lime end; veiled it keeps the colour and stays readable. */
  background: linear-gradient(rgba(4, 20, 28, 0.52), rgba(4, 20, 28, 0.52)), var(--ramp);
  color: #fff;
  border-bottom: 6px solid transparent;
  border-image: var(--ramp) 1;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.brand-word { font-family: "Anta", ui-sans-serif, system-ui, sans-serif; font-size: 18px; letter-spacing: 1.3px; }
.brand-mark { height: 24px; width: auto; display: block; }

.bar-nav { display: flex; gap: clamp(10px, 1.6vw, 22px); margin-left: auto; }
.bar-nav a {
  color: #e4efec;
  text-decoration: none;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.05em;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.bar-nav a:hover { color: #fff; border-bottom-color: var(--lime); }

.bar-season {
  font-size: 12px;
  color: #edf5f2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.burger span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; margin: 3px 0; }

/* ------------------------------------------------------------------ Band */

.board { max-width: var(--shell); margin: 0 auto; padding: var(--gap) var(--gap) 40px; }

/* Das Seitenverhältnis ist an das Video gebunden (1920x460). Vorher stand hier
   eine feste Höhe — mit object-fit: cover schnitt das Band von einem
   16:9-Video nur den mittleren Fünftel heraus, also alles außer Himmel und
   ferner Waldkante. Waagerecht beschneiden ist gratis, weil die Szene
   periodisch durchläuft; senkrecht zerstört es die Komposition. */
.band {
  position: relative;
  aspect-ratio: 2.8 / 1;
  max-height: 460px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--night);
  margin-bottom: var(--gap);
}

/* Ken Burns: langsamer Zoom mit Schwenk. Das ist der übliche Weg, einem
   stehenden Bild Leben zu geben — ein pulsierender Weichzeichner, wie er
   manchmal vorgeschlagen wird, liest sich dagegen als Ladezustand.

   Erster Anlauf war 1,075× über 44 s. Das lief nachweislich, war aber mit
   etwa 1 px/s Randversatz unter der Schwelle, ab der das Auge Bewegung
   überhaupt registriert — technisch animiert, gefühlt stillstehend. Jetzt
   1,13× über 26 s, also gut 3 px/s: sichtbar, ohne zu zappeln.

   `alternate` fährt die Bewegung zurück statt zu springen. */
.band-media { position: absolute; inset: 0; }
.band-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 62% 34%;   /* zwischen Adler und Lichtung, so bleiben beide im Bild */
  animation: kenburns 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-2.2%, -1.6%, 0); }
}

/* Driftender Dunst darüber: ein sehr weicher, breiter Schleier, der quer
   zieht. Zum Motiv passend und billiger als jede zweite Bilddatei. */
.band-haze {
  position: absolute;
  inset: -10% -40%;
  background:
    radial-gradient(60% 90% at 20% 55%, rgba(198, 224, 200, 0.16), transparent 70%),
    radial-gradient(45% 80% at 62% 40%, rgba(214, 236, 228, 0.13), transparent 72%),
    radial-gradient(55% 85% at 88% 62%, rgba(190, 220, 205, 0.10), transparent 70%);
  animation: haze 38s linear infinite;
  pointer-events: none;
}
@keyframes haze {
  from { transform: translate3d(-10%, 0, 0); }
  to   { transform: translate3d(10%, 0, 0); }
}

.band-copy {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(14px, 2.4vw, 26px);
  color: #fff;
  /* Nach links gewichtet statt flächig nach unten: die Schrift steht links,
     der Hirsch in der Mitte. Ein durchgehender Bodenverlauf hat ihn verschluckt. */
  background:
    linear-gradient(90deg, rgba(4, 20, 28, 0.88) 0%, rgba(4, 20, 28, 0.42) 24%, rgba(4, 20, 28, 0) 46%),
    linear-gradient(0deg, rgba(4, 20, 28, 0.52) 0%, rgba(4, 20, 28, 0.08) 32%, rgba(4, 20, 28, 0) 58%);
}
.band-copy h1 {
  margin: 0;
  font-size: clamp(1.4rem, 3.4vw, 2.3rem);
  font-weight: 780;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.band-copy p { margin: 3px 0 0; font-size: 14px; color: #cfe1de; }

@media (prefers-reduced-motion: reduce) {
  /* Wer Bewegung abgestellt hat, bekommt dasselbe Bild, nur still. */
  .band-img, .band-haze { animation: none; }
}

/* ----------------------------------------------------------------- Tiles */

.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: var(--gap);
}
.tile {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 4px;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.14s, transform 0.1s, box-shadow 0.14s;
}
.tile:hover {
  border-color: var(--sea);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -22px rgba(6, 32, 43, 0.6);
}
.tile-icon {
  width: 46px;
  height: 46px;
  object-fit: contain;
  object-position: left center;
  display: block;
  margin-bottom: 2px;
}
.tile b { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.tile span:last-child { font-size: 13px; color: var(--ink-faint); line-height: 1.35; }
.tile--alert:hover { border-color: var(--alert); }

/* ---------------------------------------------------------------- Panels */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: start;
}
.panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
}
.panel--next { grid-column: span 2; }

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  background: #fafcfc;
}
.panel-head h2 {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.panel-link { font-size: 12.5px; font-weight: 650; color: var(--pool); text-decoration: none; white-space: nowrap; }
.panel-link:hover { text-decoration: underline; }
.panel-body { padding: 14px 16px 16px; }

.big {
  margin: 0 0 12px;
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.big small { font-size: 13px; font-weight: 600; color: var(--ink-faint); letter-spacing: 0; }

/* --- Next hunt ----------------------------------------------------------- */

.next-title { margin: 0 0 2px; font-size: 1.25rem; font-weight: 760; letter-spacing: -0.015em; }
.next-when { margin: 0 0 12px; font-size: 14px; color: var(--ink-soft); }
.next-when b { color: var(--ink); }
.next-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px 16px;
  margin-bottom: 14px;
}
.next-meta div { display: grid; gap: 1px; }
.next-meta dt, .next-meta .k {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.next-meta .v { font-size: 14.5px; font-variant-numeric: tabular-nums; }

.rsvp { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
.chip--yes { background: #eaf6ec; border-color: #bfe0c6; color: #1d6b32; }
.chip--open { background: #fdf6e4; border-color: #e6d5a8; color: #7a5a10; }
.chip--no { background: #fbeceb; border-color: #ecc6c0; color: #8f3a22; }

.btnrow { display: flex; gap: 8px; flex-wrap: wrap; }
.btn {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  padding: 9px 15px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid var(--ink);
  color: var(--ink);
}
.btn:hover { background: var(--ink); color: #fff; }
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: #0b3240; border-color: #0b3240; }

/* --- Lists --------------------------------------------------------------- */

.species, .toplist, .huntlist, .openlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.species li { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: baseline; }
.species .n { font-size: 14.5px; font-weight: 650; }
.species .c { font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* Not `.bar` — that name belongs to the sticky header above, and this would
   quietly inherit its padding and flex layout. */
.species .meter { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--tint); overflow: hidden; }
.species .meter i { display: block; height: 100%; background: var(--ramp); border-radius: 999px; }
.species .split { grid-column: 1 / -1; font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.bars { display: grid; gap: 9px; }
.bars .row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; }
.bars .row span { font-size: 13.5px; color: var(--ink-soft); }
.bars .row b { font-size: 14px; font-variant-numeric: tabular-nums; }
.bars .row::after {
  content: "";
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 999px;
  background: var(--ramp);
  width: calc(var(--w) * 1%);
  min-width: 8px;
}

.sub-head {
  margin: 16px 0 10px;
  padding-top: 13px;
  border-top: 1px solid var(--rule);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.toplist li { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; align-items: baseline; }
.toplist .a {
  grid-column: 1 / -1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sea);
}
.toplist .s { font-size: 14.5px; font-weight: 620; }
.toplist .c { font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; }

.huntlist li { border-top: 1px solid var(--rule); padding-top: 9px; }
.huntlist li:first-child { border-top: none; padding-top: 0; }
.huntlist a { text-decoration: none; color: var(--ink); display: grid; gap: 1px; }
.huntlist a:hover .h-name { color: var(--pool); }
.h-when { font-size: 11.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.h-name { font-size: 14.5px; font-weight: 650; }
.h-where { font-size: 12.5px; color: var(--ink-faint); }

.openlist li {
  border-left: 3px solid var(--alert);
  padding: 2px 0 2px 10px;
  display: grid;
  gap: 1px;
}
.openlist .o-head { font-size: 14px; font-weight: 650; }
.openlist .o-meta { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.ok-note { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); }
.ok-note::before {
  content: "";
  width: 13px; height: 7px;
  border-left: 2.5px solid var(--green);
  border-bottom: 2.5px solid var(--green);
  transform: rotate(-45deg) translateY(-2px);
  flex: none;
}

/* ---------------------------------------------------------------- Footer */

.foot {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gap) 28px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-faint);
}

/* ----------------------------------------------------------------- Phone */

@media (max-width: 1000px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .panel--next { grid-column: span 2; }
}

@media (max-width: 680px) {
  /* Auf dem Handy gäbe 3:1 ein zu flaches Band; hier lieber etwas höher und
     seitlich beschneiden. */
  .band { aspect-ratio: auto; height: 170px; }

  .bar { flex-wrap: wrap; }
  .bar-season { display: none; }
  .burger { display: block; margin-left: auto; }
  .bar-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    display: none;
    flex-direction: column;
    gap: 0;
  }
  .bar-nav.is-open { display: flex; }
  .bar-nav a { padding: 11px 2px; border-bottom: 1px solid #143240; }
  .tiles { grid-template-columns: 1fr; }
  .grid { grid-template-columns: 1fr; }
  .panel--next { grid-column: span 1; }
}

/* ------------------------------------------------------- Revier-Auswahl */

.page-head { margin: 4px 0 var(--gap); }
.page-head h1 {
  margin: 0 0 4px;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 780;
  letter-spacing: -0.022em;
}
.page-head p { margin: 0; color: var(--ink-soft); font-size: 15px; }

.reviere { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.revier {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: clamp(18px, 2.6vw, 26px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink);
}
a.revier,
.revier:has(.revier-pano[href]) { transition: border-color 0.14s, transform 0.1s, box-shadow 0.14s; }
a.revier:hover,
.revier:has(.revier-pano[href]:hover),
.revier:has(.revier-go:hover) {
  border-color: var(--sea);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -24px rgba(6, 32, 43, 0.55);
}
/* A Revier without stands cannot be entered — it says so instead of pretending. */
.revier--soon { background: #f7fafa; border-style: dashed; }

.revier-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.revier-head b { font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-weight: 770; letter-spacing: -0.015em; }
.revier-state {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--ink-faint);
  border: 1px solid var(--rule);
}
.revier-state--live { background: #eaf6ec; border-color: #bfe0c6; color: #1d6b32; }

.revier-sub { margin: 0; font-size: 13.5px; color: var(--ink-faint); }

.revier-stats {
  margin: 4px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 10px 12px;
}
.revier-stats div { display: grid; gap: 1px; }
.revier-stats dt {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.revier-stats dd { margin: 0; font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.revier-note {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.revier-go { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--pool); }
/* Beide Wege aus der Karte sehen gleich aus — vorher war der eine unterstrichen
   und der andere nicht, was wie zwei verschiedene Dinge aussah. */
a.revier-go { text-decoration: none; }
a.revier-go:hover { text-decoration: underline; }

/* Peenwerder hat zwei Ziele — die Karte und seine Drückjagden. Sie stehen
   nebeneinander, bis der Platz eng wird; dann untereinander. Der Trenner ist
   ein Rand, keine Pipe, damit er beim Umbruch von selbst verschwindet. */
.revier-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
}
.revier-links .revier-go { margin-left: 0; margin-right: 0; }
.revier-links .revier-go + .revier-go {
  padding-left: 16px;
  border-left: 1px solid var(--rule);
}
/* Auf dem Handy untereinander. Ein border-left als Trenner weiß nichts vom
   Umbruch und stünde sonst als loser Strich vor dem zweiten Link. */
@media (max-width: 560px) {
  .revier-links { flex-direction: column; gap: 10px; }
  .revier-links .revier-go + .revier-go { border-left: 0; padding-left: 0; }
}

.reviere-foot { margin: var(--gap) 0 0; font-size: 13px; color: var(--ink-faint); max-width: 62ch; }

@media (max-width: 820px) { .reviere { grid-template-columns: 1fr; } }
/* 3+1 sieht aus wie ein Fehler; zwei Reihen zu zweit lesen sich als Block. */
@media (max-width: 560px) { .revier-stats { grid-template-columns: repeat(2, 1fr); } }

/* A band across the grid: the panels under it hold one Revier's numbers, and
   with a second Revier coming that has to be said, not assumed. */
.grid-band {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 -2px;
  padding-bottom: 8px;
  border-bottom: 2px solid transparent;
  border-image: var(--ramp) 1;
}
.grid-band-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.grid-band-link { font-size: 12.5px; font-weight: 650; color: var(--pool); text-decoration: none; }
.grid-band-link:hover { text-decoration: underline; }

/* --- Revierkarten mit Panorama ------------------------------------------- */

/* Das Bild bringt seinen Namen mit, deshalb liegt das Panorama oben in der
   Karte und die Kachel verliert ihre eigene Überschrift. Für Vorleseprogramme
   bleibt sie als .sr-only stehen. */
.revier { padding: 0; overflow: hidden; gap: 0; }
.revier-pano { position: relative; line-height: 0; }
.revier-pano img { width: 100%; height: auto; display: block; }
.revier-pano .revier-state {
  position: absolute;
  top: 10px;
  right: 10px;
  line-height: 1.5;   /* der Bildzeile ihr line-height: 0 wieder abnehmen */
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
}
.revier--soon .revier-pano img { filter: saturate(0.55) brightness(0.94); }

.revier-sub,
.revier-stats,
.revier-note,
.revier-links,
.revier-go { margin-left: clamp(18px, 2.6vw, 26px); margin-right: clamp(18px, 2.6vw, 26px); }
.revier-sub { margin-top: 14px; }
.revier-stats { margin-top: 12px; }
.revier-go { display: inline-block; margin-top: 14px; margin-bottom: clamp(18px, 2.6vw, 26px); }
.revier-note { margin-top: 12px; }
.revier-links { margin-top: 14px; margin-bottom: clamp(18px, 2.6vw, 26px); }
.revier-links .revier-go { margin-top: 0; margin-bottom: 0; }
.revier-pano[href] { display: block; text-decoration: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Die Marke darf neben dem Wortzeichen etwas mehr Gewicht haben. */
.brand-mark { height: 28px; }

/* Panorama fehlt: statt des kaputten Bildsymbols der Farbverlauf mit dem
   Namen. aspect-ratio hält den Platz frei, damit beim Austausch nichts
   springt. */
.revier-pano--blank {
  position: relative;
  aspect-ratio: 1600 / 264;
  display: grid;
  place-items: center;
  background: linear-gradient(rgba(4, 20, 28, 0.52), rgba(4, 20, 28, 0.52)), var(--ramp);
}
.revier-pano--blank::after {
  content: attr(data-name);
  color: #fff;
  font-weight: 800;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  letter-spacing: -0.01em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

/* Die Kachel zum Anlegen. Gestrichelt, damit sie sich als Angebot liest und
   nicht als Revier. */
.revier--neu {
  border-style: dashed;
  background: transparent;
  display: grid;
  place-items: center;
  min-height: 200px;
  text-decoration: none;
  color: var(--ink-faint);
  transition: border-color 0.14s, color 0.14s;
}
.revier--neu:hover { border-color: var(--sea); color: var(--ink); }
/* .revier setzt padding: 0 und stellt es über eine Liste von Kindklassen
   wieder her (siehe unten). Diese Kachel hat keins davon, also hier. */
.revier-neu-body {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: clamp(18px, 2.6vw, 26px);
  text-align: center;
}
.revier-neu-plus { font-size: 30px; line-height: 1; font-weight: 300; }
.revier-neu-body b { font-size: 1.05rem; font-weight: 750; }
.revier-neu-body span:last-child { font-size: 13px; }