/* Reiseplaner, Tabs der Suchkarte und Daumenleiste (mobil, unten mittig) */
.suchkarte { position: relative; z-index: 3; max-width: 880px; margin: 0 auto; width: 100%; border-radius: 14px; background: rgba(35,38,43,.92); border: 1px solid var(--stahl-hell); backdrop-filter: blur(8px); overflow: hidden; }
.tabs { display: flex; border-bottom: 1px solid var(--stahl-hell); }
.tab { flex: 1; min-height: 52px; padding: 0 12px; border: 0; background: transparent; color: var(--text-dimm); font: 700 .8rem var(--schrift-text); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.tab[aria-selected="true"] { color: var(--bein); box-shadow: inset 0 -3px 0 var(--fuchsrot); background: rgba(230,68,21,.1); }
.tab-plan[aria-selected="false"] { color: var(--kuerbis); }
.suche { position: static; display: grid; gap: 12px; padding: 16px; max-width: none; margin: 0; background: transparent; border: 0; border-radius: 0; backdrop-filter: none; }
.suche[hidden] { display: none; }
@media (min-width: 720px) {
  .suche { align-items: end; }
  .suche-wohnen { grid-template-columns: 1fr 1fr 140px auto; }
  .suche-plan { grid-template-columns: 1.1fr 1.1fr 72px 72px auto; }
  .suche-plan > label:first-child { grid-column: 1 / -1; }
  .suche-plan > .ev-vorschlag { grid-column: 1 / -1; }
}

.nav-plan { color: var(--kuerbis) !important; }
.block-plan { background: radial-gradient(ellipse at 50% 0%, rgba(230,68,21,.18), transparent 60%), var(--stahl-tief); border-block: 1px solid var(--stahl); }
.block-plan[hidden] { display: none; }
.plan-tage { max-width: 1000px; margin: 0 auto; display: grid; gap: 16px; }
.plan-tag { display: grid; gap: 10px; padding: 18px; border-radius: var(--radius); background: rgba(25,23,28,.7); border: 1px solid var(--stahl-hell); }
.plan-tag h3 { margin: 0; color: var(--kuerbis); font-size: 1.6rem; }
.plan-zeile { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: baseline; }
.plan-zeit { font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-dimm); font-weight: 700; }
.plan-abend { border-top: 1px dashed var(--stahl-hell); padding-top: 10px; }
.plan-abend .plan-zeit { color: var(--fuchsrot); }
.plan-fuss { margin-top: 28px; display: grid; gap: 16px; justify-items: start; }

.daumen { display: none; }
@media (max-width: 719px) {
  .daumen { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40; display: block; min-height: 52px; padding: 15px 30px; border-radius: 40px; background: var(--verlauf); color: #1a0c04; font: 700 .85rem var(--schrift-text); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; box-shadow: 0 8px 26px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.15); transition: opacity .2s, transform .2s; white-space: nowrap; }
  .daumen.weg { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(20px); }
  .plan-zeile { grid-template-columns: 1fr; gap: 2px; }
  body { padding-bottom: 84px; }
}

/* Abenteuerreiseplan: Fragen, übernommene Veranstaltungen, Dialog */
.chips { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 40px; background: rgba(230,68,21,.18); border: 1px solid var(--fuchsrot); color: var(--bein); font-weight: 700; }
.chip button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(0,0,0,.35); color: var(--bein); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.plan-frage { display: grid; gap: 18px; justify-items: start; }
.plan-frage fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.plan-frage legend { padding: 0; margin-bottom: 10px; font-weight: 700; color: var(--bein); }
.pille input { position: absolute; opacity: 0; }
.pille span { display: inline-block; min-height: 48px; padding: 13px 22px; border-radius: 40px; border: 1px solid var(--stahl-hell); background: var(--anthrazit); color: var(--text); font-weight: 700; cursor: pointer; }
.pille input:checked + span { background: var(--verlauf); color: #1a0c04; border-color: transparent; }
.pille input:focus-visible + span { outline: 3px solid var(--kuerbis); outline-offset: 2px; }
.tage-feld { display: grid; gap: 6px; font-weight: 700; color: var(--bein); }
.tage-feld select { height: 52px; padding: 0 12px; border: 1px solid var(--stahl-hell); border-radius: 8px; background: var(--anthrazit); color: var(--text); font: 400 1rem var(--schrift-text); color-scheme: dark; }
[data-ev] { cursor: pointer; }
dialog#planDialog { max-width: 440px; width: calc(100% - 32px); padding: 28px; border: 1px solid var(--kuerbis); border-radius: 14px; background: var(--stahl-tief); color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.7); }
dialog#planDialog::backdrop { background: rgba(10,8,12,.72); backdrop-filter: blur(3px); }
#dlgText { margin: 0 0 22px; font-size: 1.15rem; color: var(--bein); }
.dlg-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }
.knopf-leise { background: transparent; color: var(--text); border: 1px solid var(--stahl-hell); box-shadow: none; }
.knopf-leise:hover { box-shadow: none; border-color: var(--text); }

.tage-feld input[type="date"], .suche input[type="date"] { height: 52px; padding: 0 12px; border: 1px solid var(--stahl-hell); border-radius: 8px; background: var(--anthrazit); color: var(--text); font: 400 1rem var(--schrift-text); color-scheme: dark; }
.plan-wetter { margin-top: 4px; padding: 10px 14px; border-radius: 8px; background: rgba(243,148,2,.09); border-left: 3px solid var(--kuerbis); font-size: .95rem; }
.plan-wetter strong { color: var(--bein); }
.plan-tipp { display: block; margin-top: 4px; color: var(--text-dimm); }
.plan-route { color: var(--text-dimm); font-size: .9rem; }
.plan-quelle { font-size: .8rem; color: var(--text-dimm); }

/* Krone der Sagenwelt: fotorealistische Goldkrone mit blutigen Haaren, stürzt schräg ins Tal */
.krone-bild { position: relative; display: inline-block; vertical-align: middle; }
.krone-bild img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 10px rgba(230,68,21,.35)); }
.krone-bild.klein { width: 44px; height: 44px; margin-right: 8px; margin-block: -12px; }
.krone-bild.gross { width: 120px; height: 120px; margin-right: 16px; margin-block: -26px; vertical-align: middle; }
.krone-bild img { animation: kronefall 7s ease-in-out infinite; transform-origin: 50% 40%; }
@keyframes kronefall { 0%, 100% { transform: translateY(-2px) rotate(-1.5deg); } 50% { transform: translateY(3px) rotate(2deg); } }
.blut { position: absolute; width: 4px; height: 7px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(circle at 35% 30%, #ff6b6f 0 12%, #b3121b 38%, #5a0a0e 100%); opacity: 0; animation: blutfall 5.5s ease-in infinite; }
.krone-bild.klein .blut { width: 3px; height: 5px; }
.blut.b1 { left: 59%; top: 74%; }
.blut.b2 { left: 64%; top: 84%; animation-delay: 1.8s; }
.blut.b3 { left: 56%; top: 70%; animation-delay: 3.5s; }
@keyframes blutfall { 0% { opacity: 0; transform: translateY(0) scale(.6); } 12% { opacity: .95; transform: translateY(0) scale(1); } 75% { opacity: .85; transform: translateY(22px) scale(1); } 100% { opacity: 0; transform: translateY(30px) scale(.8); } }
.krone-bild.klein .blut { animation-name: blutfall-klein; }
@keyframes blutfall-klein { 0% { opacity: 0; transform: translateY(0) scale(.6); } 12% { opacity: .95; } 75% { opacity: .85; transform: translateY(9px); } 100% { opacity: 0; transform: translateY(13px) scale(.8); } }
.sage { max-width: 880px; margin: 40px auto 0; padding: 22px 24px; border-radius: var(--radius); background: linear-gradient(180deg, rgba(179,18,27,.12), rgba(25,23,28,.6)); border: 1px solid rgba(179,18,27,.45); }
.sage h3 { color: var(--kuerbis); margin: 0 0 .5em; }
.sage p { margin: 0 0 .6em; color: var(--text); }
@media (prefers-reduced-motion: reduce) { .krone-bild img, .blut, .fuchs { animation: none; } .blut { opacity: .85; } }

.suche > label, .suche input, .suche select, .suche .knopf { min-width: 0; }
.suche-plan .knopf { white-space: nowrap; }
@media (min-width: 720px) { .suche-plan .knopf { padding-inline: 22px; } }

/* Norse häufiger dort, wo es optisch trägt (Diana): Etiketten und Hauptknöpfe */
.zeile { font-family: var(--schrift-zier); font-weight: 400; font-size: 1.05rem; letter-spacing: .16em; }
.knopf { font-family: var(--schrift-zier); font-weight: 700; font-size: 1.1rem; letter-spacing: .08em; }
.stein { font-family: var(--schrift-zier); font-size: .95rem; letter-spacing: .1em; }
.tab { font-family: var(--schrift-zier); font-weight: 700; font-size: 1.05rem; letter-spacing: .1em; }

/* Einzug: Hero-Text und Suchkarte linksbündig auf der Linie des Logos; das Rudel im Bild bleibt frei */
@media (min-width: 1000px) {
  .held { padding-inline: clamp(16px, 4vw, 48px); }
  .held-inhalt { max-width: 640px; margin: 0 auto 24px 0; }
  .suchkarte { margin: 0 auto; }
  .held-inhalt h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
}

/* Fuchs-Zeichen als Marker: im Nebel verblasst, beim Draufgehen und am Ziel tauchen sie auf und leuchten wie Werwolfaugen */
.fuchs { display: inline-block; flex: none; overflow: visible; --ohr: #E2D6C4; --pin: #fff; opacity: .36; filter: grayscale(.55) blur(.6px) brightness(1.1); transform: scale(.9); transition: opacity .35s, filter .35s, transform .35s; }
.fuchs-nav { width: 12px; height: 13px; margin-right: 9px; vertical-align: -2px; }
.fuchs-ticker { width: 11px; height: 12px; margin-right: 8px; vertical-align: -2px; }
.nav a, .ticker li a { display: inline-flex; align-items: center; }
.ticker li::after { display: none; }
.ticker li { padding-right: 36px; }
.ticker-news .fuchs { --kopf: #D9D4CC; --ohr: #8C857C; --pin: #fff; opacity: .6; filter: blur(.4px); }
.nav a:hover .fuchs, .nav a:focus-visible .fuchs, .nav a.aktiv .fuchs,
.ticker li a:hover .fuchs, .ticker li a:focus-visible .fuchs,
[data-ev]:hover .fuchs, [data-ev]:focus-visible .fuchs {
  opacity: 1; filter: none; transform: scale(1.45);
  --ohr: #FF8A1F; --ohrglow: drop-shadow(0 0 3px #FF7A12) drop-shadow(0 0 8px rgba(255,100,10,.95));
  --pin: #fff; --pinglow: drop-shadow(0 0 3px #fff);
  animation: auftauchen .6s ease-out;
}
.ticker-news a:hover .fuchs, .ticker-news a:focus-visible .fuchs { --kopf: #F6EFE4; }
@keyframes auftauchen { 0% { opacity: .2; filter: blur(3px) grayscale(.8); transform: scale(.7); } 100% { opacity: 1; filter: none; transform: scale(1.45); } }
.nav a.aktiv { color: var(--bein); }
.nav a.aktiv::after { transform: scaleX(1); }
.fuchs-plakette { width: 18px; height: 19px; }
.plakette-reise { position: absolute; top: 12px; right: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 40px; background: rgba(18,16,20,.82); border: 1px solid rgba(243,148,2,.55); color: var(--bein); font: 700 .72rem var(--schrift-text); letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s; pointer-events: none; }
[data-ev]:hover .plakette-reise, [data-ev]:focus-visible .plakette-reise { opacity: 1; transform: none; }
@media (hover: none) { .plakette-reise { opacity: 1; transform: none; } }

/* Weiches Einblenden, Anheben bei Hover */
.einblenden { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.einblenden.sichtbar { opacity: 1; transform: none; }
.karte, .reihe figure { transition: transform .25s, border-color .25s, box-shadow .25s; }
.karte:hover, .reihe figure:hover { transform: translateY(-4px); border-color: var(--kuerbis); box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.tafel:hover { box-shadow: 0 14px 34px rgba(230,68,21,.28); }
.tafel img, .karte img, .reihe img { transition: transform .5s; }
.tafel:hover img, .karte:hover img, .reihe figure:hover img { transform: scale(1.05); }
.tafel, .karte, .reihe figure { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .einblenden { opacity: 1; transform: none; transition: none; } .tafel img, .karte img, .reihe img { transition: none; } }

/* Freitext-Veranstaltung, Suche, Unterkunft, Budget */
.suche input[type="text"], .suche input[type="search"] { height: 52px; padding: 0 12px; border: 1px solid var(--stahl-hell); border-radius: 8px; background: var(--anthrazit); color: var(--text); font: 400 1rem var(--schrift-text); }
.ev-vorschlag { margin: 0; font-size: .9rem; color: var(--text-dimm); }
.ev-vorschlag button { margin: 4px 6px 0 0; padding: 6px 12px; border-radius: 40px; border: 1px solid var(--kuerbis); background: transparent; color: var(--kuerbis); font: 700 .85rem var(--schrift-text); cursor: pointer; }
.ev-vorschlag[hidden] { display: none; }
.ev-filter { margin-top: 12px; width: 100%; max-width: 520px; height: 52px; padding: 0 16px; border: 1px solid var(--stahl-hell); border-radius: 40px; background: var(--anthrazit); color: var(--text); font: 400 1rem var(--schrift-text); }
.ev-leer { max-width: 880px; margin: 16px auto 0; color: var(--text-dimm); }
.treffer-verborgen { display: none !important; }
.suchknopf { margin-left: 8px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--stahl-hell); background: rgba(18,16,20,.6); color: var(--bein); cursor: pointer; }
.suchknopf:hover, .suchknopf:focus-visible { border-color: var(--kuerbis); color: var(--kuerbis); }
.sr-nur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
dialog#sucheDialog { width: min(720px, calc(100% - 32px)); max-height: 80vh; margin-top: 12vh; padding: 20px; border: 1px solid var(--kuerbis); border-radius: 14px; background: var(--stahl-tief); color: var(--text); overflow: auto; }
dialog#sucheDialog::backdrop { background: rgba(10,8,12,.78); backdrop-filter: blur(3px); }
.suche-kopf { display: flex; gap: 10px; }
.suche-kopf input { flex: 1; height: 52px; padding: 0 16px; border: 1px solid var(--stahl-hell); border-radius: 10px; background: var(--anthrazit); color: var(--text); font: 400 1.05rem var(--schrift-text); }
.treffer { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.treffer li button { width: 100%; display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: baseline; text-align: left; padding: 12px 14px; border: 1px solid var(--stahl); border-radius: 10px; background: rgba(25,23,28,.7); color: var(--text); font: 400 1rem var(--schrift-text); cursor: pointer; }
.treffer li button:hover, .treffer li button:focus-visible { border-color: var(--kuerbis); background: rgba(230,68,21,.1); }
.treffer .art { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--kuerbis); font-weight: 700; }
.treffer .ort { color: var(--text-dimm); font-size: .9rem; }

.plan-unterkunft, .plan-budget { max-width: 1000px; margin: 28px auto 0; }
.plan-unterkunft[hidden], .plan-budget[hidden] { display: none; }
.plan-unterkunft h3, .plan-budget h3 { color: var(--kuerbis); font-size: 1.7rem; margin: 0 0 .4em; }
.vorschlaege { display: grid; gap: 14px; grid-template-columns: 1fr; }
.vorschlag { padding: 18px; border-radius: var(--radius); background: rgba(25,23,28,.75); border: 1px solid var(--stahl-hell); display: grid; gap: 6px; }
.vorschlag.top { border-color: var(--fuchsrot); box-shadow: 0 0 0 1px rgba(230,68,21,.4), 0 10px 28px rgba(230,68,21,.18); }
.vorschlag .titel { font-family: var(--schrift-titel); font-size: 1.4rem; color: var(--bein); }
.vorschlag .preis { font-size: 1.5rem; font-weight: 700; color: var(--kuerbis); }
.vorschlag .klein { margin: 0; }
.marke-label { display: inline-block; padding: 3px 10px; border-radius: 6px; background: var(--fuchsrot); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; justify-self: start; }
.budget-tabelle { width: 100%; border-collapse: collapse; background: rgba(25,23,28,.75); border: 1px solid var(--stahl-hell); border-radius: var(--radius); overflow: hidden; }
.budget-tabelle th, .budget-tabelle td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--stahl); }
.budget-tabelle td:last-child, .budget-tabelle th:last-child { text-align: right; white-space: nowrap; }
.budget-tabelle .fest td { color: var(--bein); font-weight: 700; }
.budget-tabelle .summe td { font-size: 1.15rem; font-weight: 700; color: var(--kuerbis); border-bottom: 0; }
.budget-tabelle .offen td { color: var(--text-dimm); font-style: italic; }
@media (min-width: 720px) { .vorschlaege { grid-template-columns: repeat(3, 1fr); } }
.ziel { animation: ziel 2.4s ease-out; }

/* Einzüge: gemeinsame Containerbreite für Überschriften, Raster, Plan und Fuß */
:root { --container: 1200px; }
#plan { --container: 1000px; }
.spalte, .tafeln, .reihe, .karten, .sage, .plan-tage, .plan-unterkunft, .plan-budget, .fuss-inhalt { max-width: var(--container); margin-inline: auto; width: 100%; }
.sage p { max-width: 80ch; }
.berg-hinweis { max-width: var(--container); margin: 20px auto 0; color: var(--text-dimm); }
.block-berg { background: radial-gradient(ellipse at 50% 0%, rgba(230,68,21,.2), transparent 65%), var(--stahl-tief); border-block: 1px solid var(--stahl); }
.tafeln-berg { grid-template-columns: 1fr; }
@media (min-width: 720px) { .tafeln-berg { grid-template-columns: repeat(3, 1fr); } }

/* Hero: Text, Suchkarte und Planer mittig, das Rudel bleibt zwischen Überschrift und Karte sichtbar */
.held { justify-content: space-between; }
.held-video, .held-poster { object-position: center top; }
.held-inhalt, .held-inhalt h1, .held-inhalt .unter { text-align: center; margin-inline: auto; }
.held-inhalt { max-width: 1000px; margin: 0 auto; }
.held-inhalt h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
.suchkarte { margin: 0 auto; }
@media (min-width: 1000px) {
  .held { padding-inline: clamp(16px, 4vw, 48px); padding-top: calc(var(--oben) + 12px); }
  .held-inhalt { max-width: 1000px; margin: 0 auto; }
  .suchkarte { margin: 0 auto; }
}
@media (min-width: 1200px) { .nav { display: flex; } }
@media (max-width: 1199px) { .nav { display: none; } .buchen { margin-left: auto; } }

/* Kalenderauswahl: Termine eines Veranstalters (zum Beispiel Harzer Bergtheater) */
.ev-kalender { grid-column: 1 / -1; display: grid; gap: 8px; max-height: 260px; overflow: auto; padding: 4px 0; }
.ev-kalender[hidden] { display: none; }
.ev-kalender-kopf { margin: 0; font-weight: 700; color: var(--bein); }
.termin { display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--stahl-hell); border-radius: 10px; background: var(--anthrazit); color: var(--text); font: 400 1rem var(--schrift-text); cursor: pointer; }
.termin:hover, .termin:focus-visible { border-color: var(--kuerbis); background: rgba(230,68,21,.1); }
.termin .datum { font-weight: 700; color: var(--kuerbis); }
.termin .uebernehmen { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dimm); }
.dlg-termine { display: grid; gap: 8px; margin-bottom: 18px; }
.dlg-termine[hidden] { display: none; }
@media (max-width: 719px) { .termin { grid-template-columns: 1fr; gap: 2px; } }

/* Durchsichtige Karten (wie bei JCP): Kontur und Szene dahinter bleiben sichtbar */
.suchkarte { background: rgba(22,20,25,.42); backdrop-filter: blur(3px) saturate(1.1); -webkit-backdrop-filter: blur(3px) saturate(1.1); border: 1px solid rgba(240,226,204,.28); box-shadow: 0 10px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04); }
.tabs { border-bottom-color: rgba(240,226,204,.2); background: rgba(10,8,12,.25); }
.tab[aria-selected="true"] { background: rgba(230,68,21,.16); }
.suche input, .suche select, .suche input[type="text"], .suche input[type="date"] { background: rgba(12,10,14,.38); border-color: rgba(240,226,204,.28); }
.suche input:focus, .suche select:focus { background: rgba(12,10,14,.6); border-color: var(--kuerbis); outline: none; }
.suchkarte label { text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.plan-tag, .vorschlag, .budget-tabelle, .sage { background: rgba(22,20,25,.5); backdrop-filter: blur(3px); }
.plan-wetter { background: rgba(243,148,2,.07); }
.ev-kalender .termin, .termin { background: rgba(12,10,14,.45); }

/* Buttons: bei Druck erscheint oben links die schräge, freigestellte Krone mit Haaren, Blutstropfen laufen über den Button */
.knopf, .buchen { position: relative; isolation: isolate; overflow: visible; }
.knopf::before, .buchen::before { content: ""; position: absolute; left: -20px; top: -30px; width: 68px; height: 68px; z-index: 3; pointer-events: none;
  background: url("bilder/krone.webp?v=20261107165143") center / contain no-repeat; opacity: 0; transform: scale(.5) rotate(-14deg); filter: brightness(1.7) saturate(1.5) contrast(1.1) drop-shadow(0 0 8px rgba(255,190,60,.75)) drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
.knopf::after, .buchen::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; overflow: hidden; opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2016'%3E%3Cdefs%3E%3CradialGradient%20id='g'%20cx='38%25'%20cy='58%25'%20r='70%25'%3E%3Cstop%20offset='0'%20stop-color='%23e0343b'/%3E%3Cstop%20offset='.55'%20stop-color='%239c1017'/%3E%3Cstop%20offset='1'%20stop-color='%234a070b'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath%20d='M5%200C5%200%200%207.2%200%2010.6A5%205.4%200%200%200%2010%2010.6C10%207.2%205%200%205%200Z'%20fill='url%28%23g%29'/%3E%3Cellipse%20cx='3.3'%20cy='10.6'%20rx='1'%20ry='1.9'%20fill='white'%20fill-opacity='.6'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2016'%3E%3Cdefs%3E%3CradialGradient%20id='g'%20cx='38%25'%20cy='58%25'%20r='70%25'%3E%3Cstop%20offset='0'%20stop-color='%23e0343b'/%3E%3Cstop%20offset='.55'%20stop-color='%239c1017'/%3E%3Cstop%20offset='1'%20stop-color='%234a070b'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath%20d='M5%200C5%200%200%207.2%200%2010.6A5%205.4%200%200%200%2010%2010.6C10%207.2%205%200%205%200Z'%20fill='url%28%23g%29'/%3E%3Cellipse%20cx='3.3'%20cy='10.6'%20rx='1'%20ry='1.9'%20fill='white'%20fill-opacity='.6'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2016'%3E%3Cdefs%3E%3CradialGradient%20id='g'%20cx='38%25'%20cy='58%25'%20r='70%25'%3E%3Cstop%20offset='0'%20stop-color='%23e0343b'/%3E%3Cstop%20offset='.55'%20stop-color='%239c1017'/%3E%3Cstop%20offset='1'%20stop-color='%234a070b'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath%20d='M5%200C5%200%200%207.2%200%2010.6A5%205.4%200%200%200%2010%2010.6C10%207.2%205%200%205%200Z'%20fill='url%28%23g%29'/%3E%3Cellipse%20cx='3.3'%20cy='10.6'%20rx='1'%20ry='1.9'%20fill='white'%20fill-opacity='.6'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2016'%3E%3Cdefs%3E%3CradialGradient%20id='g'%20cx='38%25'%20cy='58%25'%20r='70%25'%3E%3Cstop%20offset='0'%20stop-color='%23e0343b'/%3E%3Cstop%20offset='.55'%20stop-color='%239c1017'/%3E%3Cstop%20offset='1'%20stop-color='%234a070b'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath%20d='M5%200C5%200%200%207.2%200%2010.6A5%205.4%200%200%200%2010%2010.6C10%207.2%205%200%205%200Z'%20fill='url%28%23g%29'/%3E%3Cellipse%20cx='3.3'%20cy='10.6'%20rx='1'%20ry='1.9'%20fill='white'%20fill-opacity='.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 7px 11px, 9px 14px, 6px 10px, 8px 12px;
  background-position: 20px 14px, 27px 20px, 33px 16px, 39px 23px; }
.knopf:hover::before, .buchen:hover::before, .knopf:focus-visible::before, .buchen:focus-visible::before, .knopf.blick::before, .buchen.blick::before { animation: kronenerscheinen .55s ease-out forwards; }
.knopf:hover::after, .buchen:hover::after, .knopf:focus-visible::after, .buchen:focus-visible::after, .knopf.blick::after, .buchen.blick::after { animation: blutueberbutton 2.4s ease-in infinite; }
@keyframes kronenerscheinen { 0% { opacity: 0; transform: scale(.5) rotate(-14deg); } 100% { opacity: 1; transform: scale(1) rotate(-14deg); } }
@keyframes kronenauftritt { 0% { opacity: 0; transform: scale(.5) rotate(-14deg); } 18% { opacity: 1; transform: scale(1) rotate(-14deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(.95) rotate(-14deg) translateY(2px); } }
@keyframes blutueberbutton {
  0% { opacity: 0; background-position: 20px 14px, 27px 20px, 33px 16px, 39px 23px; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; background-position: 20px 58px, 27px 66px, 33px 54px, 39px 64px; } }
.knopf-leise::before, .knopf-leise::after { display: none; }
@media (prefers-reduced-motion: reduce) { .knopf:hover::before, .buchen:hover::before, .knopf:hover::after, .buchen:hover::after, .knopf.blick::before, .buchen.blick::before, .knopf.blick::after, .buchen.blick::after { animation: none; opacity: 0; } }

/* Ton-Knopf wartet auf die erste Handlung des Gastes */
.ton.wartet { animation: tonpuls 1.8s ease-in-out infinite; border-color: var(--kuerbis); color: var(--kuerbis); }
.ton.wartet::after { content: "Ton starten"; position: absolute; right: 56px; top: 50%; transform: translateY(-50%); padding: 6px 12px; border-radius: 40px; background: rgba(18,16,20,.85); border: 1px solid var(--kuerbis); color: var(--bein); font: 700 .72rem var(--schrift-text); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
@keyframes tonpuls { 0%, 100% { box-shadow: 0 0 0 0 rgba(243,148,2,.55); } 50% { box-shadow: 0 0 0 12px rgba(243,148,2,0); } }

/* Karten noch durchsichtiger */
.suchkarte { background: rgba(22,20,25,.26); backdrop-filter: blur(2px) saturate(1.1); -webkit-backdrop-filter: blur(2px) saturate(1.1); }
.tabs { background: rgba(10,8,12,.15); }
.suche input, .suche select, .suche input[type="text"], .suche input[type="date"] { background: rgba(12,10,14,.3); }

/* Krone wie der Fuchs: im Nebel verblasst, beim Draufgehen oder am Ziel größer, goldener, Blut stärker und tropfend */
.krone-bild img { opacity: .42; filter: grayscale(.55) blur(.7px) brightness(1.05); transform: scale(.92); transition: opacity .4s, filter .4s, transform .4s; animation: none; }
.krone-bild .blut { opacity: 0; animation: none; }
.nav a:hover .krone-bild img, .nav a:focus-visible .krone-bild img, .nav a.aktiv .krone-bild img,
.krone-bild:hover img, h2:hover .krone-bild img, h2:focus-within .krone-bild img {
  opacity: 1; filter: saturate(1.5) sepia(.35) brightness(1.25) contrast(1.1) drop-shadow(0 0 8px rgba(255,190,60,.65)) drop-shadow(0 0 16px rgba(230,68,21,.55));
  transform: scale(1.38); animation: kronefall 5s ease-in-out infinite, auftauchen-krone .7s ease-out; }
.nav a:hover .krone-bild .blut, .nav a:focus-visible .krone-bild .blut, .nav a.aktiv .krone-bild .blut,
.krone-bild:hover .blut, h2:hover .krone-bild .blut { animation: blutfall-stark 2.4s ease-in infinite; }
.krone-bild.klein:hover .blut, .nav a:hover .krone-bild.klein .blut, .nav a.aktiv .krone-bild.klein .blut { animation-name: blutfall-stark-klein; }
.krone-bild .blut { width: 5px; height: 9px; }
.krone-bild.klein .blut { width: 4px; height: 7px; }
.blut.b2 { animation-delay: .8s !important; } .blut.b3 { animation-delay: 1.6s !important; }
@keyframes auftauchen-krone { 0% { opacity: .15; filter: blur(4px) grayscale(.8); transform: scale(.75); } 100% { opacity: 1; transform: scale(1.38); } }
@keyframes blutfall-stark { 0% { opacity: 0; transform: translateY(0) scale(.7); } 10% { opacity: 1; } 80% { opacity: 1; transform: translateY(34px) scale(1.1); } 100% { opacity: 0; transform: translateY(44px) scale(.8); } }
@keyframes blutfall-stark-klein { 0% { opacity: 0; transform: translateY(0) scale(.7); } 10% { opacity: 1; } 80% { opacity: 1; transform: translateY(14px) scale(1.1); } 100% { opacity: 0; transform: translateY(19px) scale(.8); } }
@media (prefers-reduced-motion: reduce) { .krone-bild img, .krone-bild .blut { animation: none !important; } }

.kopf { z-index: 40; }
.ticker-block { z-index: 30; }

/* Blutstropfen: einzelne Tropfen laufen langsam senkrecht aus dem Haar der Krone über den Button */
.knopf::after, .buchen::after { display: none !important; }
.bluttropfen { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; border-radius: inherit; }
.bluttropfen i { position: absolute; top: 14px; width: 8px; height: 14px; opacity: 0; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2020'%3E%3Cdefs%3E%3CradialGradient%20id='k'%20cx='40%25'%20cy='62%25'%20r='62%25'%3E%3Cstop%20offset='0'%20stop-color='%23a50f18'/%3E%3Cstop%20offset='.55'%20stop-color='%236e070d'/%3E%3Cstop%20offset='1'%20stop-color='%232a0306'/%3E%3C/radialGradient%3E%3CradialGradient%20id='r'%20cx='70%25'%20cy='85%25'%20r='30%25'%3E%3Cstop%20offset='0'%20stop-color='%23ff5a3c'%20stop-opacity='.55'/%3E%3Cstop%20offset='1'%20stop-color='%23ff5a3c'%20stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter%20id='s'%20x='-30%25'%20y='-30%25'%20width='160%25'%20height='160%25'%3E%3CfeGaussianBlur%20stdDeviation='.35'/%3E%3C/filter%3E%3C/defs%3E%3Cpath%20d='M6%20.6C6.5%203.4%207.4%205.4%208.5%207.4C10.7%2010.8%2011.4%2012.6%2011.4%2014A5.4%205.6%200%200%201%20.6%2014C.6%2012.6%201.3%2010.8%203.5%207.4C4.6%205.4%205.5%203.4%206%20.6Z'%20fill='url%28%23k%29'%20stroke='%231c0204'%20stroke-width='.5'/%3E%3Cpath%20d='M6%20.6C6.5%203.4%207.4%205.4%208.5%207.4C10.7%2010.8%2011.4%2012.6%2011.4%2014A5.4%205.6%200%200%201%20.6%2014C.6%2012.6%201.3%2010.8%203.5%207.4C4.6%205.4%205.5%203.4%206%20.6Z'%20fill='url%28%23r%29'/%3E%3Cpath%20d='M3.1%2011.4C3.3%209.9%204.2%208.7%205%207.9'%20stroke='white'%20stroke-opacity='.75'%20stroke-width='1.2'%20stroke-linecap='round'%20fill='none'%20filter='url%28%23s%29'/%3E%3Cellipse%20cx='4'%20cy='14.6'%20rx='.9'%20ry='1.5'%20fill='white'%20fill-opacity='.35'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.6)); }
.bluttropfen i::before { content: ""; position: absolute; left: 3px; bottom: 9px; width: 2px; height: 0; border-radius: 2px; background: linear-gradient(90deg, rgba(60,4,8,.0), #5a070d 30%, #7d0b12 55%, rgba(60,4,8,.0)); border-radius: 2px 2px 3px 3px; }
.bluttropfen i:nth-child(1) { left: 21px; }
.bluttropfen i:nth-child(2) { left: 28px; width: 9px; height: 14px; }
.bluttropfen i:nth-child(3) { left: 35px; width: 7px; height: 12px; }
.knopf:hover .bluttropfen i, .buchen:hover .bluttropfen i, .knopf:focus-visible .bluttropfen i, .buchen:focus-visible .bluttropfen i, .knopf.blick .bluttropfen i, .buchen.blick .bluttropfen i { animation: tropfenlauf 4.6s cubic-bezier(.5,0,.85,.55) infinite; }
.knopf:hover .bluttropfen i::before, .buchen:hover .bluttropfen i::before, .knopf.blick .bluttropfen i::before, .buchen.blick .bluttropfen i::before, .knopf:focus-visible .bluttropfen i::before, .buchen:focus-visible .bluttropfen i::before { animation: tropfenspur 3.8s ease-in infinite; animation-delay: inherit; }
.bluttropfen i:nth-child(2) { animation-delay: 1.3s !important; }
.bluttropfen i:nth-child(3) { animation-delay: 2.5s !important; }
@keyframes tropfenlauf { 0% { opacity: 0; transform: translateY(0) scale(.35); } 14% { opacity: 1; transform: translateY(0) scale(1); } 90% { opacity: 1; transform: translateY(44px) scale(1); } 100% { opacity: 0; transform: translateY(52px) scale(.9); } }
@keyframes tropfenspur { 0%, 14% { height: 0; } 60% { height: 16px; } 100% { height: 22px; } }
.knopf-leise .bluttropfen { display: none; }
@media (prefers-reduced-motion: reduce) { .bluttropfen i { animation: none !important; } }

/* Lesbarkeit über bewegtem Hintergrund: weicher dunkler Schleier hinter dem Textblock */
.held-inhalt { position: relative; }
.held-inhalt::before { content: ""; position: absolute; inset: -28px -8% -20px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, rgba(10,8,12,.62) 0%, rgba(10,8,12,.38) 55%, transparent 78%); }
.held-inhalt h1 { text-shadow: 0 2px 16px rgba(0,0,0,.9), 0 0 30px rgba(0,0,0,.7); }

/* Tropfen wie aus der Krone: echte, glasige Blutstropfen (Bildvorlagen) */
.bluttropfen i { background: url("bilder/tropfen-a.webp?v=20261107164840") center / contain no-repeat !important; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)) !important; width: 10px !important; height: 15px !important; }
.bluttropfen i:nth-child(2) { background-image: url("bilder/tropfen-b.webp?v=20261107164840") !important; width: 9px !important; height: 14px !important; }
.bluttropfen i::before { display: none !important; }

/* Hero-Textblock: erst weiße Schrift, dann läuft das Blut langsam senkrecht durch die Buchstaben und tropft unten heraus */
@property --f { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.held-inhalt .unter.blutschrift { position: relative; display: block; max-width: none; margin: 0 auto 28px; padding-bottom: 2px;
  font-family: var(--schrift-zier); font-weight: 700; font-size: clamp(.95rem, 1.45vw, 1.3rem); line-height: 1.55; letter-spacing: .07em; text-align: center;
  color: #F4EBDD; text-shadow: 0 2px 12px rgba(0,0,0,.85); background: none; -webkit-background-clip: border-box; background-clip: border-box; animation: none; filter: none; }
.blutschrift .wort { display: inline-block; white-space: nowrap; }
.blutschrift .bl { display: inline-block; color: transparent; text-shadow: none; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(180deg, #6e0a10 0%, #4d070b 55%, #2f0306 100%), linear-gradient(#F4EBDD, #F4EBDD);
  background-size: 100% var(--f), 100% 100%; background-repeat: no-repeat;
  animation: blutdurch var(--dauer, 6s) cubic-bezier(.35,.05,.55,1) var(--verz, 3s) forwards; filter: drop-shadow(0 2px 6px rgba(0,0,0,.7)); }
@keyframes blutdurch { from { --f: 0%; } to { --f: 100%; } }
.blutschrift .bt { position: absolute; width: 11px; height: 17px; margin-left: -5px; opacity: 0; pointer-events: none; transform-origin: 50% 0;
  background: url("bilder/tropfen-c.webp?v=20261107164840") center top / 100% 100% no-repeat; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7));
  animation: textblut 6.5s cubic-bezier(.5,0,.9,.6) infinite; animation-delay: var(--tv, 12s); }
@keyframes textblut {
  0% { opacity: 0; transform: scale(.4, .15); }
  18% { opacity: 1; transform: scale(.9, .75); }
  34% { opacity: 1; transform: scale(1, 1); }
  100% { opacity: 1; transform: translateY(110px) scale(1, 1.15); } }
@media (prefers-reduced-motion: reduce) { .blutschrift .bl { animation: none; background: none; color: #F4EBDD; } .blutschrift .bt { display: none; } }
@media (max-width: 719px) { .held-inhalt .unter.blutschrift br { display: none; } }

/* Tropfen unter der Schrift: unterschiedliche Tiefe (Vordergrund scharf und groß, Hintergrund klein und weich) */
.blutschrift .bt { width: var(--w, 11px); height: var(--h, 17px); margin-left: calc(var(--w, 11px) / -2); filter: blur(var(--weich, 0px)) drop-shadow(0 1px 2px rgba(0,0,0,.7)); opacity: 0;
  background-size: 100% 100%; background-position: center top; background-repeat: no-repeat;
  animation: textblut2 var(--dauer, 6.5s) cubic-bezier(.5,0,.9,.6) infinite; animation-delay: var(--tv, 12s); }
@keyframes textblut2 {
  0% { opacity: 0; transform: scale(.4, .15); }
  18% { opacity: var(--deck, 1); transform: scale(.9, .75); }
  34% { opacity: var(--deck, 1); transform: scale(1, 1); }
  100% { opacity: var(--deck, 1); transform: translateY(var(--fall, 110px)) scale(1, 1.15); } }

/* Karten: Krone oben links und Blut, das langsam durch das Bild läuft (wie bei den Buttons) */
.karte, .tafel, .reihe figure { position: relative; }
.tafel::before, .karte::before, .reihe figure::before { content: ""; position: absolute; left: 6px; top: 6px; width: 70px; height: 70px; z-index: 5; pointer-events: none;
  background: url("bilder/krone.webp?v=20261107165143") center / contain no-repeat; opacity: 0; transform: scale(.5) rotate(-14deg); filter: brightness(1.7) saturate(1.5) contrast(1.1) drop-shadow(0 0 8px rgba(255,190,60,.75)) drop-shadow(0 3px 6px rgba(0,0,0,.6)); transition: opacity .35s, transform .35s; }
.tafel:hover::before, .karte:hover::before, .reihe figure:hover::before, .tafel:focus-visible::before, .reihe figure:focus-visible::before { opacity: 1; transform: scale(1) rotate(-14deg); }
.bt-karte { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; border-radius: inherit; }
.bt-karte i { position: absolute; top: 46px; width: 11px; height: 17px; opacity: 0; background: url("bilder/tropfen-a.webp?v=20261107164840") center / contain no-repeat; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.bt-karte i:nth-child(1) { left: 36px; }
.bt-karte i:nth-child(2) { left: 46px; width: 9px; height: 14px; background-image: url("bilder/tropfen-b.webp?v=20261107164840"); }
.bt-karte i:nth-child(3) { left: 54px; width: 13px; height: 20px; background-image: url("bilder/tropfen-c.webp?v=20261107164840"); }
.bt-karte i:nth-child(4) { left: 42px; width: 8px; height: 12px; }
.tafel:hover .bt-karte i, .karte:hover .bt-karte i, .reihe figure:hover .bt-karte i, .tafel:focus-visible .bt-karte i, .reihe figure:focus-visible .bt-karte i { animation: karteblut 6s cubic-bezier(.45,0,.9,.55) infinite; }
.bt-karte i:nth-child(2) { animation-delay: 1.4s !important; }
.bt-karte i:nth-child(3) { animation-delay: 3s !important; }
.bt-karte i:nth-child(4) { animation-delay: 4.4s !important; }
@keyframes karteblut {
  0% { opacity: 0; transform: translateY(0) scale(.4, .2); }
  12% { opacity: 1; transform: translateY(0) scale(.9, .7); }
  22% { opacity: 1; transform: translateY(0) scale(1, 1); }
  100% { opacity: .95; transform: translateY(340px) scale(1, 1.2); } }
@media (prefers-reduced-motion: reduce) { .bt-karte i { animation: none !important; } }

/* Karten: kein Beschnitt mehr, die Krone ragt schräg oben links aus dem Kasten heraus */
.tafel, .karte, .reihe figure { overflow: visible !important; }
.tafel img, .karte img, .reihe img { transition: filter .4s; }
.tafel:hover img, .karte:hover img, .reihe figure:hover img { transform: none !important; filter: brightness(1.12) saturate(1.1); }
.karte img, .tafel img, .reihe figure img { border-radius: 10px 10px 0 0; }
.reihe figure img { border-radius: 10px; }
.tafel::before, .karte::before, .reihe figure::before { left: -26px !important; top: -34px !important; width: 78px !important; height: 78px !important; }

/* Blut läuft über das Bild, sammelt sich unten zu einem kleinen, verschmierten See und läuft aus der Box heraus */
.bt-karte { overflow: visible !important; border-radius: 0 !important; }
.bt-karte i { top: 40px !important; }
.tafel:hover .bt-karte i, .karte:hover .bt-karte i, .reihe figure:hover .bt-karte i, .tafel:focus-visible .bt-karte i, .reihe figure:focus-visible .bt-karte i { animation: karteblut2 6.5s cubic-bezier(.45,0,.9,.55) infinite !important; }
.bt-karte i:nth-child(2) { animation-delay: 1.4s !important; }
.bt-karte i:nth-child(3) { animation-delay: 3.1s !important; }
.bt-karte i:nth-child(4) { animation-delay: 4.6s !important; }
@keyframes karteblut2 {
  0% { opacity: 0; transform: translateY(0) scale(.4, .2); }
  10% { opacity: 1; transform: translateY(0) scale(.9, .7); }
  20% { opacity: 1; transform: translateY(0) scale(1, 1); }
  72% { opacity: 1; transform: translateY(var(--fallweg, 260px)) scale(1, 1.15); }
  100% { opacity: 0; transform: translateY(calc(var(--fallweg, 260px) + 60px)) scale(.9, 1.1); } }
.bt-karte .see { position: absolute; left: 30px; bottom: 6px; width: 44px; height: 10px; border-radius: 50%; opacity: 0; transform: scale(.1, .2); transform-origin: 30% 50%;
  background: radial-gradient(ellipse at 40% 40%, #5a070d 0%, #3a0408 55%, #1c0204 100%); filter: blur(.4px) drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.bt-karte .rinn { position: absolute; left: 46px; bottom: -42px; width: 5px; height: 0; opacity: 0; border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, #4a060c, #2a0307); filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.tafel:hover .bt-karte .see, .karte:hover .bt-karte .see, .reihe figure:hover .bt-karte .see { animation: seebildung 6.5s ease-out infinite; }
.tafel:hover .bt-karte .rinn, .karte:hover .bt-karte .rinn, .reihe figure:hover .bt-karte .rinn { animation: rinnsal 6.5s ease-in infinite; }
@keyframes seebildung {
  0%, 44% { opacity: 0; transform: scale(.1, .2); }
  52% { opacity: .95; transform: scale(.7, .8); }
  70% { opacity: .95; transform: scale(1.5, 1); }
  100% { opacity: 0; transform: scale(1.9, 1); } }
@keyframes rinnsal {
  0%, 58% { opacity: 0; height: 0; }
  66% { opacity: 1; height: 8px; }
  88% { opacity: 1; height: 38px; }
  100% { opacity: 0; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .bt-karte .see, .bt-karte .rinn { animation: none !important; } }

/* Blutsee genau an der Unterkante der Box: breit verschmiert auf der Kante, Rinnsal läuft darüber hinaus */
.bt-karte .see { bottom: -5px !important; left: 22px !important; width: 74px !important; height: 15px !important; transform-origin: 28% 50% !important;
  background: radial-gradient(ellipse at 35% 40%, #5c0910 0%, #3c050a 50%, #1a0204 100%), radial-gradient(ellipse at 70% 60%, #3c050a, transparent) !important; }
.bt-karte .rinn { bottom: -46px !important; left: 42px !important; width: 6px !important; }

/* Physik: Tropfen fallen nur senkrecht nach unten, schlagen auf der Unterkante auf; der See entsteht erst danach genau auf der Unterlinie; das Rinnsal läuft von der Kante nach unten */
.tafel:hover .bt-karte i, .karte:hover .bt-karte i, .reihe figure:hover .bt-karte i, .tafel:focus-visible .bt-karte i, .reihe figure:focus-visible .bt-karte i { animation: karteblut3 6.5s cubic-bezier(.5,0,.85,.6) infinite !important; }
@keyframes karteblut3 {
  0% { opacity: 0; transform: translateY(0) scale(.4, .2); }
  10% { opacity: 1; transform: translateY(0) scale(.9, .7); }
  22% { opacity: 1; transform: translateY(0) scale(1, 1); }
  62% { opacity: 1; transform: translateY(var(--fallweg, 260px)) scale(1, 1.15); }
  64% { opacity: 0; transform: translateY(var(--fallweg, 260px)) scale(1.1, .6); }
  100% { opacity: 0; transform: translateY(var(--fallweg, 260px)) scale(1, 1); } }
.bt-karte .see { top: calc(100% - 7px) !important; bottom: auto !important; left: 6px !important; width: 84px !important; height: 14px !important; transform-origin: 50% 50% !important;
  background: radial-gradient(ellipse at 50% 50%, #5c0910 0%, #3c050a 45%, rgba(28,2,4,.0) 100%) !important;
  filter: blur(.9px) !important; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 80%, transparent); }
.tafel:hover .bt-karte .see, .karte:hover .bt-karte .see, .reihe figure:hover .bt-karte .see { animation: seebildung3 6.5s ease-out infinite !important; }
@keyframes seebildung3 {
  0%, 62% { opacity: 0; transform: scale(.1, .2); }
  66% { opacity: .95; transform: scale(.45, .7); }
  84% { opacity: .95; transform: scale(.9, 1); }
  100% { opacity: 0; transform: scale(1.25, 1); } }
.bt-karte .rinn { top: calc(100% + 1px) !important; bottom: auto !important; left: 42px !important; width: 6px !important; height: 0; transform-origin: 50% 0; border-radius: 0 0 4px 4px !important; }
.tafel:hover .bt-karte .rinn, .karte:hover .bt-karte .rinn, .reihe figure:hover .bt-karte .rinn { animation: rinnsal3 6.5s ease-in infinite !important; }
@keyframes rinnsal3 {
  0%, 72% { opacity: 0; height: 0; }
  76% { opacity: 1; height: 6px; }
  96% { opacity: 1; height: 40px; }
  100% { opacity: 0; height: 44px; } }

/* Rinnsal am unteren Kartenrand: unregelmäßig, mit Wellen, wechselnder Breite und dickem Tropfenende; läuft von oben nach unten ein */
.bt-karte .rinn { top: calc(100% - 3px) !important; left: 40px !important; width: 14px !important; height: 74px !important; border-radius: 0 !important; transform-origin: 50% 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 74'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%232f0306'/%3E%3Cstop offset='.45' stop-color='%236e0a10'/%3E%3Cstop offset='1' stop-color='%23280205'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4.2 0 C5.6 6 4.4 11 5 17 C5.6 23 4.2 27 4.8 33 C5.3 39 4 44 4.9 50 C5.6 55 3.4 58 3.2 62 C3 67 5 71 7 72.6 C9.2 71 11 67 10.6 62 C10.4 58 8.4 55 8.9 49 C9.4 43 8.3 38 8.8 32 C9.2 26 8.6 22 9 16 C9.3 10 8.4 5 9.4 0 Z' fill='url(%23g)'/%3E%3Cpath d='M5.9 4 C6.4 12 5.9 20 6.3 30' stroke='%23c4585a' stroke-opacity='.35' stroke-width='.9' stroke-linecap='round' fill='none'/%3E%3Cellipse cx='5.9' cy='64' rx='.9' ry='2.2' fill='%23fff' fill-opacity='.3'/%3E%3C/svg%3E") center top / 100% 100% no-repeat !important;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.6)); clip-path: inset(0 0 100% 0); opacity: 0; }
.tafel:hover .bt-karte .rinn, .karte:hover .bt-karte .rinn, .reihe figure:hover .bt-karte .rinn { animation: rinnsal4 6.5s linear infinite !important; }
@keyframes rinnsal4 {
  0%, 70% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateX(0) scaleX(.7); }
  72% { opacity: 1; clip-path: inset(0 0 94% 0); transform: translateX(0) scaleX(.8); }
  80% { clip-path: inset(0 0 62% 0); transform: translateX(.6px) scaleX(.95); }
  88% { clip-path: inset(0 0 30% 0); transform: translateX(-.4px) scaleX(1); }
  96% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(.3px) scaleX(1); }
  100% { opacity: 0; clip-path: inset(0 0 0 0); transform: translateX(0) scaleX(1); } }

/* Rinnsal, zweite Fassung: breiter, dunkler, stark wechselnde Breite, zwei Läufe, dicker Tropfen am Ende */
.bt-karte .rinn { width: 26px !important; height: 96px !important; left: 32px !important; top: calc(100% - 4px) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 96'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23230204'/%3E%3Cstop offset='.5' stop-color='%234a0709'/%3E%3Cstop offset='1' stop-color='%231c0204'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M7 0 C9.5 7 6 12 8 19 C10 26 6.5 31 7.5 38 C8.5 45 5.5 52 6 59 C6.4 66 4.5 71 5 77 C5.4 83 6.2 88 9.2 91.4 C12.2 88.6 13.4 83 12.8 77 C12.4 71 10.4 66 11 59 C11.6 52 9.6 45 10.6 38 C11.6 31 9 26 11 19 C13 12 10.4 7 12 0 Z' fill='url(%23g)'/%3E%3Cpath d='M17.5 0 C18.6 6 16.8 10 17.8 16 C18.8 21 17 25 17.6 30 C18.2 34 17.2 37 17.5 40 C17.8 37 19 34 18.6 30 C19.2 25 20.4 21 19.6 16 C20.4 10 19.2 6 19.6 0 Z' fill='%23340406'/%3E%3Cpath d='M8.8 5 C9.4 18 8.8 32 9.6 50' stroke='%23b8454a' stroke-opacity='.28' stroke-width='1' stroke-linecap='round' fill='none'/%3E%3Cellipse cx='8.6' cy='83' rx='1.1' ry='3' fill='%23fff' fill-opacity='.28'/%3E%3C/svg%3E") center top / 100% 100% no-repeat !important; }

/* Die drei Wohnungen der Mountain View Apartments */
.wohn-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 22px 0 10px; text-align: left; }
.wohn { background: rgba(12,10,14,.45); border: 1px solid rgba(243,148,2,.35); border-radius: 10px; padding: 18px 20px; backdrop-filter: blur(6px); }
.wohn h3 { margin: 0 0 6px; }
.wohn-daten { color: var(--kuerbis, #f39402); font-size: .9rem; margin: 0 0 8px; }
.wohn-quelle { font-size: .85rem; opacity: .75; margin: 6px 0 18px; }

/* Erinnerung (3 Tage): gesehene Karten behalten den ausgelaufenen Blutsee am unteren Rand, die Funktionen bleiben unverändert */
.tafel.gesehen .bt-karte .see, .karte.gesehen .bt-karte .see, .reihe figure.gesehen .bt-karte .see { opacity: .9; transform: scale(.95, 1); }
.tafel.gesehen:not(:hover) .bt-karte .see, .karte.gesehen:not(:hover) .bt-karte .see, .reihe figure.gesehen:not(:hover) .bt-karte .see { animation: none !important; opacity: .9; transform: scale(.95, 1); }

/* Einheitliche Rundung aller Rahmen (Markus 2026-11-07): Rahmen, Bild oben und Textstreifen unten teilen denselben Radius, auch wenn die Krone überstehen darf */
:root { --rahmen-radius: 10px; }
.tafel, .karte, .reihe figure { border-radius: var(--rahmen-radius) !important; border: 1px solid var(--stahl-hell, rgba(255,255,255,.14)); background-clip: padding-box; }
.tafel img, .karte img, .reihe figure img { border-radius: calc(var(--rahmen-radius) - 1px) calc(var(--rahmen-radius) - 1px) 0 0 !important; display: block; }
.tafel .tafel-text, .karte > div, .reihe figure figcaption { border-radius: 0 0 calc(var(--rahmen-radius) - 1px) calc(var(--rahmen-radius) - 1px) !important; }
.reihe figure { background: var(--stahl, #23262b); }

/* Mobil (Markus 2026-11-08: "man kann das Video nicht richtig erkennen"): Der Film bekommt eine eigene Bühne von genau einer Bildschirmhöhe.
   Vorher füllte er die ganze, durch die Suchkarte auf rund 920 px verlängerte Fläche (starker Zuschnitt, Hochskalierung) und die Karte lag über dem Bild.
   Jetzt: Film, Überschrift und Filmknopf füllen den ersten Bildschirm, die Suchkarte schaut unten mit ihren Reitern heraus und liegt direkt darunter. */
@media (max-width: 719px) {
  :root { --karten-vorschau: 64px; --leisten-hoehe: 72px; }
  .held-video, .held-poster, .held-schleier { inset: 0 0 auto 0; height: 100vh; height: 100svh; }
  .held-schleier { background: linear-gradient(180deg, rgba(25,23,28,.55) 0%, rgba(25,23,28,.12) 32%, rgba(25,23,28,.05) 62%, rgba(25,23,28,.82) 100%); }
  .held-inhalt { min-height: calc(100vh - var(--oben) - var(--leisten-hoehe) - var(--karten-vorschau) - 36px); min-height: calc(100svh - var(--oben) - var(--leisten-hoehe) - var(--karten-vorschau) - 36px); }
  .held-inhalt::before { background: radial-gradient(ellipse at 50% 42%, rgba(10,8,12,.5) 0%, rgba(10,8,12,.28) 55%, transparent 78%); }
  .held-inhalt .unter.blutschrift { font-size: 1.05rem; }
  .held-inhalt .unter.blutschrift br + .wort { margin-left: .35em; }  /* Zeilenumbruch ist mobil ausgeblendet: Leerraum zwischen den Sätzen erhalten */
  .film-leiste { margin-bottom: 20px; }
}

/* Such-Knopf immer rund (Markus 2026-11-08: "sieht aus wie ein Ei"): in der schmalen Kopfzeile wurde er gestaucht */
.suchknopf { flex: 0 0 44px; min-width: 44px; width: 44px; height: 44px; aspect-ratio: 1 / 1; padding: 0; box-sizing: border-box; }
.ton { flex: none; aspect-ratio: 1 / 1; padding: 0; }

/* Handy: Kopfzeile, Ticker, Hero und Suchkarte so, dass alle Knöpfe sofort sichtbar und bedienbar sind (Desktop unverändert) */
@media (max-width: 719px) {
  :root { --ticker-hoehe: 44px; --kopf-hoehe: 64px; --oben: calc(var(--ticker-hoehe) + var(--kopf-hoehe)); }
  .ticker-termine { display: none; }
  .ticker-etikett { width: calc(16px + 64px); font-size: .72rem; letter-spacing: .1em; }
  .ticker { font-size: .78rem; letter-spacing: .06em; }
  .kopf { inset: var(--ticker-hoehe) 0 auto 0; gap: 6px; padding: 0 10px; }
  .marke { gap: 6px; flex: 1 1 auto; min-width: 0; }
  .marke img { width: 34px; flex: none; }
  .wortmarke { font-size: clamp(.85rem, 4.6vw, 1.2rem); letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: clip; }
  .suchknopf { margin-left: 0; }
  .buchen { flex: 0 0 auto; margin-left: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; letter-spacing: .08em; font-size: .85rem; background: var(--verlauf); border-color: transparent; color: #1a0c04; }
  .buchen::before, .buchen::after, .buchen .bluttropfen { display: none !important; }
  /* Hero-Text: hell und lesbar, das Blut-Spiel bleibt nur Dekoration ohne Textfarbe */
  .held-inhalt .unter.blutschrift { color: #F8F1E6; text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 14px rgba(0,0,0,.85); background: rgba(10,8,12,.38); border-radius: 10px; padding: 8px 10px; font-size: 1.05rem; }
  .blutschrift .bl { color: #F8F1E6 !important; -webkit-text-fill-color: #F8F1E6; background: none !important; animation: none !important; filter: none; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
  .blutschrift .bt { display: none !important; }
  .held-inhalt .zeile { text-shadow: 0 1px 6px rgba(0,0,0,.9); }
  /* Suchkarte: zwei Spalten, damit Reiter, Felder und Knopf im ersten Bildschirm liegen */
  :root { --karten-vorschau: 236px; }
  .tab { min-height: 48px; font-size: .95rem; letter-spacing: .04em; line-height: 1.1; padding: 0 6px; }
  .suche-wohnen { grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 10px 12px 12px; }
  .suche-wohnen label { font-size: .875rem; letter-spacing: .04em; gap: 2px; }
  .suche-wohnen input, .suche-wohnen select { height: 48px; min-width: 0; width: 100%; font-size: 1rem; }
  .suche-wohnen .form-fehler { grid-column: 1 / -1; }
  .suche-wohnen .knopf { grid-column: auto; min-height: 48px; align-self: end; padding: 0 10px; }
  .daumen { display: none !important; }
  button, .knopf, a.knopf { min-height: 44px; }
}
@media (max-width: 359px) {
  .marke img { display: none; }
  .buchen { padding: 0 10px; font-size: .8rem; }
}

/* Handy-Hero (Paket -7): Film im GANZEN Bild als 16:9-Band, Überschrift darüber, Untertitel darunter, direkt danach die Suchkarte.
   Nichts liegt mehr über den Figuren (Skiläufer 63-66 s, Mountainbiker 67-69 s). Desktop bleibt unverändert. */
.held-buehne { display: contents; }
@media (max-width: 719px) {
  .held { display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; padding: calc(var(--oben) + 6px) 12px 20px; }
  .held-schleier { display: none; }
  .held-inhalt { display: contents; }
  .held-inhalt::before { display: none; }
  .held-inhalt .zeile { order: 1; margin: 0 0 .3em; text-align: center; font-size: .85rem; }
  .held-inhalt h1 { order: 2; margin: 0 0 .5em; text-align: center; font-size: clamp(1.4rem, 6.6vw, 1.9rem); line-height: 1.15; }
  .held-buehne { display: block; order: 3; position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 12px; border-radius: 10px; overflow: hidden; background: #0e0c10; box-shadow: 0 6px 22px rgba(0,0,0,.5); }
  .held-buehne .held-video, .held-buehne .held-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
  .held-inhalt .unter.blutschrift { order: 4; margin: 0 0 12px; font-size: .98rem; line-height: 1.45; letter-spacing: .03em; }
  .film-leiste { order: 5; margin: 0 0 12px; }
  .suchkarte { order: 6; }
  #p-wohnen input, #p-wohnen select { height: 48px; }
}

/* Eine Button-Familie (Paket -7, Markus 2026-11-08: "jeder Button anders"):
   primär = .knopf und .buchen (Krone oben, Blut über den Button, immer aus CSS, auch bei später erzeugten Knöpfen),
   sekundär = .knopf-leise (ohne Effekt), Text = .knopf-text. Der alte Tropfen-Einschub aus spiel.js ist abgeschaltet, weil er spät erzeugte Knöpfe nie bekam.
   Auf Geräten ohne Maus (hover: none) gibt es keinen hängenden Hover-Effekt nach dem Tippen. */
.knopf::after, .buchen::after { display: block !important; }
.bluttropfen { display: none !important; }
.knopf-leise::before, .knopf-leise::after, .knopf-text::before, .knopf-text::after { display: none !important; }
.knopf, .buchen { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.knopf:active, .buchen:active { transform: translateY(1px); }
.knopf:focus-visible, .buchen:focus-visible, .buchleiste:focus-visible, .knopf-text:focus-visible { outline: 3px solid var(--bein, #F0E2CC); outline-offset: 3px; }
@media (hover: none) {
  .knopf:hover::before, .buchen:hover::before, .knopf:hover::after, .buchen:hover::after { animation: none !important; opacity: 0 !important; }
  .knopf:hover, .buchen:hover { transform: none; box-shadow: 0 6px 20px rgba(230,68,21,.35); }
}

/* Filmleiste, Teilen-Menü und Kino-Fenster (Paket -7): für diese Elemente fehlten bisher alle Stile, die Knöpfe erschienen als graue Standardknöpfe. */
.film-leiste { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; max-width: 880px; margin: 0 auto 16px; width: 100%; }
.film-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 1px solid var(--kuerbis); border-radius: 40px; background: var(--verlauf); color: #1a0c04; font: 700 .95rem/1.2 var(--schrift-text); cursor: pointer; touch-action: manipulation; box-shadow: 0 6px 20px rgba(230,68,21,.3); }
.film-knopf-leise { background: rgba(18,16,20,.6); color: var(--bein); border-color: var(--stahl-hell); box-shadow: none; }
.film-knopf:focus-visible { outline: 3px solid var(--bein); outline-offset: 3px; }
.teilen-feld { position: relative; }
.teilen-menue { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 12; display: grid; gap: 2px; min-width: 200px; padding: 6px; border: 1px solid var(--stahl-hell); border-radius: 12px; background: var(--stahl-tief, #1e2024); box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.teilen-menue[hidden] { display: none; }
.teilen-menue button, .kino-teilen button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: 400 1rem var(--schrift-text); text-align: left; cursor: pointer; }
.teilen-menue button:hover, .teilen-menue button:focus-visible { background: rgba(243,148,2,.18); }
dialog#kinoDialog { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; color: var(--text); overflow: hidden; }
dialog#kinoDialog::backdrop { background: #000; }
dialog#kinoDialog > video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.kino-zu { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 5; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1px solid var(--stahl-hell); background: rgba(18,16,20,.75); color: var(--bein); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.kino-leiste { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 10px; background: rgba(255,255,255,.18); cursor: pointer; }
.kino-leiste i { display: block; height: 100%; width: 0; background: var(--verlauf); }
.kino-marken span { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.5); }
.kino-ende { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 16px; text-align: center; background: rgba(10,8,12,.92); overflow: auto; }
.kino-ende[hidden] { display: none; }
.kino-ende-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.kino-teilen { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.kino-teilen button { border: 1px solid var(--stahl-hell); text-align: center; }

@media (max-width: 719px) {
  /* Paket -7: Suchkarte höher, Felder und Knopf liegen höchstens einen Daumenwisch unter dem Bildschirmrand */
  .held-inhalt .zeile { display: none; }
  .held-inhalt h1 { font-size: clamp(1.3rem, 6vw, 1.7rem); margin: 0 0 .4em; }
  .held-inhalt .unter.blutschrift { font-size: .92rem; margin-bottom: 8px; padding: 6px 10px; }
  .held-buehne { margin-bottom: 8px; }
  .film-leiste { margin-bottom: 8px; flex-wrap: nowrap; gap: 8px; }
  .film-knopf { padding: 0 14px; font-size: .88rem; min-height: 44px; }
  .tab { min-height: 44px; }
  .suche-wohnen { padding: 8px 10px 10px; gap: 6px 10px; }
}

/* Kopfknopf Buchen wie alle primären Knöpfe (vorher auf dem Desktop nur Rahmen, auf dem Handy gefüllt) */
.buchen { background: var(--verlauf); border-color: transparent; color: #1a0c04; }
.knopf.film-knopf { margin-left: 0; min-height: 48px; }

/* Teilen-Menü: Download-Link (Paket -8) */
.teilen-download { display: flex; align-items: center; min-height: 44px; padding: 8px 14px; border-top: 1px solid rgba(240,226,204,.14); color: var(--kuerbis); font: 700 .9rem/1.3 var(--schrift-text); text-decoration: none; }
.teilen-menue { min-width: 240px; max-width: calc(100vw - 24px); }
@media (max-width: 719px) { .teilen-menue { left: auto; right: 0; transform: none; } }

/* Ton-Knopf sitzt mobil in der unteren rechten Ecke des Film-Bandes (Paket -8), verdeckt dadurch weder Suchkarte noch Leiste */
@media (max-width: 719px) {
  .held-buehne .ton { position: absolute; right: 8px; bottom: 8px; z-index: 5; width: 44px; height: 44px; }
  .teilen-menue { bottom: auto; top: calc(100% + 8px); }
}
.film-leiste { z-index: 6; }