@charset "UTF-8";

/* ---------------------------------------------------------------
   XXL-Schnitzelhaus Menden - Stylesheet
   Schriften liegen lokal, es wird nichts von fremden Servern geladen.
   --------------------------------------------------------------- */

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/open-sans-v15-latin-regular.woff2') format('woff2'),
         url('fonts/open-sans-v15-latin-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --grund:        #000;
    --flaeche:      #111;
    --flaeche-hell: #1c1c1c;
    --linie:        #333;
    --schrift:      #e6e6e6;
    --schrift-leise:#9a9a9a;
    --akzent:       #a00f0f;
    --akzent-hell:  #c81a1a;
    --nav-hoehe:    3.5rem;
    --breite:       60rem;
    --rund:         .5rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    background: var(--grund);
}

/* Die Flammen liegen hinter der ganzen Seite und füllen immer das Fenster. */
.seiten-video {
    position: fixed;
    inset: 0;
    z-index: -2;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    object-fit: cover;
    pointer-events: none;
}

/* Schleier darüber, damit die Texte lesbar bleiben. */
.seiten-video + * ,
body::before {
    content: none;
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, .45);
    pointer-events: none;
}

body {
    margin: 0;
    padding-top: var(--nav-hoehe);
    background: var(--grund);
    background: transparent;
    color: var(--schrift);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: clamp(.95rem, .9rem + .2vw, 1.05rem);
    line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--schrift); }
a:hover, a:focus { color: #fff; }

:focus-visible {
    outline: 2px solid var(--akzent-hell);
    outline-offset: 2px;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .6em; font-weight: 700; }
h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); }
h2 { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); }

p { margin: 0 0 1em; }

.breite {
    width: 100%;
    max-width: var(--breite);
    margin-inline: auto;
    padding-inline: 1rem;
}

/* Nur fuer Vorleseprogramme und Suchmaschinen, nicht sichtbar */
.unsichtbar {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.zum-inhalt {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--akzent);
    color: #fff;
    padding: .6rem 1rem;
    z-index: 100;
}
.zum-inhalt:focus { left: 0; }

/* --- Navigation ------------------------------------------------ */

.haupt-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    background: rgba(17, 17, 17, .82);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--linie);
}

.haupt-nav .breite {
    display: flex;
    align-items: center;
    min-height: var(--nav-hoehe);
    gap: 1rem;
}

.menue {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menue a {
    display: block;
    padding: .7rem .9rem;
    border-radius: var(--rund);
    text-decoration: none;
    color: var(--schrift);
}

.menue a:hover,
.menue a:focus { background: var(--flaeche-hell); }

.menue a[aria-current="page"] {
    background: var(--akzent);
    color: #fff;
}

.menue-schalter {
    display: none;
    align-items: center;
    gap: .6rem;
    background: none;
    border: 1px solid var(--linie);
    border-radius: var(--rund);
    color: var(--schrift);
    font: inherit;
    padding: .5rem .8rem;
    cursor: pointer;
}

.menue-strich,
.menue-strich::before,
.menue-strich::after {
    display: block;
    width: 1.1rem;
    height: 2px;
    background: currentColor;
    content: "";
}
.menue-strich { position: relative; }
.menue-strich::before { position: absolute; top: -6px; }
.menue-strich::after  { position: absolute; top: 6px; }

/* --- Sprachwahl ------------------------------------------------ */

.sprache {
    position: relative;
    margin-left: auto;
}

.sprache summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    list-style: none;
    cursor: pointer;
    padding: .55rem .8rem;
    border: 1px solid var(--linie);
    border-radius: var(--rund);
    color: var(--schrift);
    white-space: nowrap;
}
.sprache summary::-webkit-details-marker { display: none; }
.sprache summary:hover,
.sprache summary:focus-visible { background: var(--flaeche-hell); }
.sprache[open] .sprache-pfeil { transform: rotate(180deg); }
.sprache-pfeil { transition: transform .2s ease; }

.sprache img,
.menue-sprachen img {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
    flex: none;
}

.sprache-liste {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    min-width: 11rem;
    padding: .35rem 0;
    background: rgba(17, 17, 17, .97);
    border: 1px solid var(--linie);
    border-radius: var(--rund);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .5);
    z-index: 60;
}

.sprache-liste a,
.menue-sprachen a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem 1rem;
    color: var(--schrift);
    text-decoration: none;
    white-space: nowrap;
}
.sprache-liste a:hover,
.sprache-liste a:focus { background: var(--flaeche-hell); }
.sprache-liste a[aria-current="true"] { color: #fff; background: var(--akzent); }

/* Im aufgeklappten Handy-Menue stehen alle Sprachen als Knoepfe */
.menue .menue-sprachen { display: none; }

@media (max-width: 40rem) {
    .sprache-name { display: none; }
    .mit-js .haupt-nav .menue { order: 3; }
    .mit-js .haupt-nav.offen .menue-sprachen {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        padding-top: .75rem;
        margin-top: .5rem;
        border-top: 1px solid var(--linie);
    }
    .menue-sprachen a {
        padding: .45rem .7rem;
        border: 1px solid var(--linie);
        border-radius: var(--rund);
        font-size: .9rem;
    }
    .menue-sprachen a[aria-current="true"] { border-color: var(--akzent-hell); background: var(--akzent); color: #fff; }
}

@media (max-width: 40rem) {
    .mit-js .menue-schalter { display: inline-flex; }
    .mit-js .menue { display: none; width: 100%; }
    .mit-js .haupt-nav .breite { flex-wrap: wrap; padding-block: .5rem; }
    .mit-js .haupt-nav.offen .menue { display: block; padding-bottom: .5rem; }
}

/* --- Kopf ------------------------------------------------------ */

.kopf { background: transparent; padding: 1.5rem 0 .75rem; }
.kopf .logo-link { display: block; }
/* Logo: Schriftzug wie bisher, die Buchstaben sind weisses, leicht milchiges
   Glas, durch das die Flammen scheinen (Christian am 18.10.2026).
   Werte: Glas 14 %, Unschaerfe 5 px, Rand 69 % hell, 70 % deckend. */
.logo {
    display: block;
    width: 100%;
    max-width: 1237px;
    margin-inline: auto;
}
/* Am Rechner eine Zeile, am Handy drei Zeilen: XXL - / Schnitzelhaus / Menden
   (Christian am 18.10.2026). */
.logo-breit,
.logo-hoch {
    position: relative;
    display: block;
    width: 100%;
}
.logo-breit { aspect-ratio: 1240 / 192; }
.logo-hoch {
    display: none;
    aspect-ratio: 919.4 / 420.6;
    max-width: 30rem;
    margin-inline: auto;
}
.logo-hoch .logo-glas {
    -webkit-mask-image: url('../img/logo-form-handy.svg');
    mask-image: url('../img/logo-form-handy.svg');
}
@media (max-width: 40rem) {
    .logo-breit { display: none; }
    .logo-hoch  { display: block; }
}
.logo-glas {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, .203) 0%,
        rgba(255, 255, 255, .154) 52%,
        rgba(255, 255, 255, .098) 52%,
        rgba(255, 255, 255, .119) 100%);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    -webkit-mask: url('../img/logo-form.svg') center / 100% 100% no-repeat;
    mask: url('../img/logo-form.svg') center / 100% 100% no-repeat;
}
.logo-rand {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.logo-rand path {
    fill: none;
    stroke: rgb(175, 175, 175);
    stroke-opacity: .7;
    stroke-width: clamp(1px, .16vw, 2px);
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* Das Hintergrundvideo laeuft auf jedem Geraet, auch bei "Bewegung reduzieren"
   und im Energiesparmodus (Christian am 18.10.2026). */

/* --- Startseite ------------------------------------------------ */

.buehne {
    background: transparent;
    padding: 2rem 0;
}

.wechsler {
    position: relative;
    max-width: 60rem;
    margin-inline: auto;
    aspect-ratio: 3 / 2;
}

.wechsler img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    animation: wechseln 15s infinite;
}
.wechsler img:nth-child(2) { animation-delay: 5s; }
.wechsler img:nth-child(3) { animation-delay: 10s; }
.wechsler img:first-child  { opacity: 1; }

/* drei Bilder, je 5 s sichtbar, 1 s weiche Ueberblendung */
@keyframes wechseln {
    0%     { opacity: 0; }
    6.67%  { opacity: 1; }
    33.33% { opacity: 1; }
    40%    { opacity: 0; }
    100%   { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .wechsler img { animation: none; opacity: 1; }
    .wechsler img:not(:first-child) { display: none; }
    html { scroll-behavior: auto; }
}

.ruf-an {
    text-align: center;
    padding: 2rem 0;
}

.telefon-knopf {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    background: var(--akzent);
    color: #fff;
    text-decoration: none;
    font-size: clamp(1.1rem, 1rem + .8vw, 1.6rem);
    padding: .8rem 1.4rem;
    border-radius: var(--rund);
}
.telefon-knopf:hover,
.telefon-knopf:focus { background: var(--akzent-hell); color: #fff; }
.telefon-knopf img { width: 1.6em; height: 1.6em; }

.abschnitt { padding: 2.5rem 0; }
.abschnitt-dunkel { background: rgba(17, 17, 17, .55); }

.kachel-reihe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

.kachel {
    background: rgba(28, 28, 28, .72);
    border: 1px solid var(--linie);
    border-radius: var(--rund);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
}
.kachel h2 { margin-top: 0; }
.kachel p:last-child { margin-bottom: 0; margin-top: auto; padding-top: 1rem; }

.knopf {
    display: inline-block;
    background: var(--akzent);
    color: #fff;
    text-decoration: none;
    padding: .6rem 1.1rem;
    border-radius: var(--rund);
    border: 0;
    font: inherit;
    cursor: pointer;
}
.knopf:hover, .knopf:focus { background: var(--akzent-hell); color: #fff; }
.knopf[disabled] { background: #444; color: #999; cursor: not-allowed; }

.knopf-leise {
    display: inline-block;
    background: transparent;
    border: 1px solid var(--linie);
    color: var(--schrift);
    text-decoration: none;
    padding: .6rem 1.1rem;
    border-radius: var(--rund);
    font: inherit;
    cursor: pointer;
}
.knopf-leise:hover, .knopf-leise:focus { background: var(--flaeche-hell); }

/* --- Bildergalerie --------------------------------------------- */

.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: .75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.galerie button {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--linie);
    border-radius: var(--rund);
    background: none;
    cursor: pointer;
    overflow: hidden;
}
.galerie img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .25s ease;
}
.galerie button:hover img,
.galerie button:focus img { transform: scale(1.04); }

/* --- Ebene im selben Fenster ----------------------------------- */

.ebene {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, .96);
    padding: 1rem;
}
.ebene[hidden] { display: none; }

.ebene-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.75rem;
    margin-bottom: .75rem;
}
.ebene-titel { margin: 0; font-size: 1rem; color: var(--schrift-leise); }

.ebene-schliessen {
    flex: none;
    background: var(--flaeche-hell);
    border: 1px solid var(--linie);
    border-radius: var(--rund);
    color: #fff;
    font: inherit;
    line-height: 1;
    padding: .55rem .9rem;
    cursor: pointer;
}
.ebene-schliessen:hover,
.ebene-schliessen:focus { background: var(--akzent); }

.ebene-inhalt {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
.ebene-inhalt img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.ebene-inhalt iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
    border-radius: var(--rund);
}

.ebene-blaettern {
    display: flex;
    justify-content: center;
    gap: .5rem;
    padding-top: .75rem;
}

/* --- Speisekarte ----------------------------------------------- */

.karte-aktion {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

/* --- Formular --------------------------------------------------- */

.formular { max-width: 40rem; }

.feld { margin-bottom: 1.1rem; }
.feld label { display: block; margin-bottom: .35rem; }

.feld input,
.feld select,
.feld textarea {
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid var(--linie);
    border-radius: var(--rund);
    background: #fff;
    color: #111;
    font: inherit;
}
.feld textarea { min-height: 9rem; resize: vertical; }

.feld-zustimmung {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}
.feld-zustimmung input { width: auto; margin-top: .3rem; }

.pflichtfeld-hinweis { color: var(--schrift-leise); }

.honigtopf {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.meldung {
    border: 1px solid var(--linie);
    border-radius: var(--rund);
    padding: 1rem;
    margin-bottom: 1.25rem;
    background: rgba(28, 28, 28, .85);
}
.meldung-fehler  { border-color: var(--akzent-hell); }
.meldung-erfolg  { border-color: #2e7d32; }
.meldung ul { margin: .5rem 0 0; padding-left: 1.2rem; }

/* --- Rechtstexte ------------------------------------------------ */

.textseite {
    max-width: 48rem;
    padding-block: 2rem;
}
.textseite h1 { margin-bottom: 1.2rem; }
.textseite h2 { margin-top: 2rem; }
.textseite h3 { margin-top: 1.4rem; font-size: 1.05rem; }
.textseite dt { font-weight: 700; margin-top: .8rem; }
.textseite dd { margin: 0; }

/* --- Fussbereich ------------------------------------------------ */

.fuss {
    background: rgba(17, 17, 17, .82);
    border-top: 1px solid var(--linie);
    color: var(--schrift-leise);
    padding: 2.5rem 0 3rem;
    margin-top: 3rem;
}
.fuss h2 { font-size: 1rem; color: var(--schrift); }
.fuss a { color: var(--schrift-leise); }
.fuss a:hover, .fuss a:focus { color: #fff; }

.fuss-zeiten { margin-bottom: 2rem; }
.fuss-zeiten dl { margin: 0; display: grid; gap: .25rem; }
.fuss-zeiten .zeit {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
}
.fuss-zeiten dt { min-width: 11rem; color: var(--schrift); }
.fuss-zeiten dd { margin: 0; }

.fuss-spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 2rem;
}

.fuss-links { list-style: none; margin: 0 0 1em; padding: 0; }
.fuss-links li { margin-bottom: .3rem; }

.bildnachweis { font-size: .85em; }

/* ================================================================
   Blätterbare Speisekarte
   Übernommen aus adler-beuren.de; die Farben kommen aus den
   Variablen dieses Projekts.
   ================================================================ */

.karte-buehne {
    --gold:       #c05a5a;
    --gold-light: #e08585;
    --bordeaux:   var(--akzent);
    --cream:      #ffffff;
    --muted:      var(--schrift-leise);
    --sand:       var(--flaeche);
    --serif:      'Open Sans', Arial, sans-serif;
    --sans:       'Open Sans', Arial, sans-serif;
}

/* ---------- blaetterbare Speisekarte ---------- */
.ka-huelle{position:relative;background:var(--sand);padding:96px 0 104px;overflow:hidden}
.ka-huelle::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 45% at 50% 42%,rgba(200,162,74,.07),rgba(200,162,74,0) 70%)}
.ka-huelle > *{position:relative;z-index:1}
.ka-kopf{text-align:center;max-width:680px;margin:0 auto 54px}

.karte{max-width:820px;margin:0 auto;outline:none}
.ka-buehne{position:relative;display:flex;align-items:center;justify-content:center;gap:10px}

.ka-buch{position:relative;height:min(74vh,820px);width:auto;max-width:100%;
  aspect-ratio:1 / var(--ka-verh,1.414);margin:0 auto;overflow:hidden}
/* Am Handy ist das Buch doppelt so breit wie das Fenster - der Schieber zeigt
   mal die linke, mal die rechte Seite. */
.ka-schieber{position:absolute;inset:0;width:200%;
  transition:transform .45s cubic-bezier(.4,0,.2,1)}
.ka-buchraum{position:absolute;inset:0;
  box-shadow:0 22px 48px rgba(42,7,7,.20),0 4px 12px rgba(42,7,7,.14),0 0 0 1px rgba(90,20,20,.10)}
.ka-seite{background:#fff}
/* Falz liegt ueber den flach liegenden Seiten, aber unter dem Blatt, das umschlaegt */
.ka-falz{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(0,0,0,0) calc(50% - 62px),
    rgba(0,0,0,.03) calc(50% - 38px),
    rgba(0,0,0,.09) calc(50% - 14px),
    rgba(0,0,0,.19) calc(50% - 3px),
    rgba(42,7,7,.30) 50%,
    rgba(0,0,0,.19) calc(50% + 3px),
    rgba(0,0,0,.09) calc(50% + 14px),
    rgba(0,0,0,.03) calc(50% + 38px),
    rgba(0,0,0,0) calc(50% + 62px))}
.ka-seite canvas{width:100%;height:100%;display:block}

/* Umblaettern (StPageFlip) */
.stf__parent{position:relative;display:block;box-sizing:border-box;transform:translateZ(0);
  -ms-touch-action:pan-y;touch-action:pan-y}
.sft__wrapper{position:relative;width:100%;box-sizing:border-box}
.stf__parent canvas{position:absolute;width:100%;height:100%;left:0;top:0}
.stf__block{position:absolute;width:100%;height:100%;box-sizing:border-box;perspective:2000px}
.stf__item{display:none;position:absolute;transform-style:preserve-3d}
.stf__outerShadow,.stf__innerShadow,.stf__hardShadow,.stf__hardInnerShadow{position:absolute;left:0;top:0}

/* breite Bildschirme: aufgeschlagenes Buch mit zwei Karten */
@media(min-width:1024px) and (min-height:620px){
  .karte{max-width:1240px}
  .ka-buch{height:min(70vh,760px);aspect-ratio:2 / var(--ka-verh,1.414)}
  /* am Rechner liegt das ganze Buch im Bild */
  .ka-buch{overflow:visible}
  .ka-schieber{width:100%;transform:none !important;transition:none}
}

/* Pfeile */
.ka-pfeil{flex:0 0 auto;width:52px;height:52px;padding:0;border:1px solid var(--gold);
  border-radius:50%;background:var(--cream);cursor:pointer;color:var(--bordeaux);
  box-shadow:0 3px 10px rgba(42,7,7,.14);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .3s ease,color .25s ease,background .25s ease,transform .25s ease}
.ka-pfeil svg{width:16px;height:27px;display:block;fill:none;
  stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ka-buehne:hover .ka-pfeil{opacity:.92}
.ka-buehne .ka-pfeil:hover{opacity:1;background:var(--bordeaux);border-color:var(--bordeaux);color:var(--cream)}
.ka-pfeil.ka-links:hover{transform:translateX(-3px)}
.ka-pfeil.ka-rechts:hover{transform:translateX(3px)}
.ka-pfeil:disabled{opacity:0 !important;cursor:default}

/* Band mit Seitenzahl, Diamanten und Lupe */
.ka-band{display:flex;align-items:center;justify-content:center;gap:26px;margin:34px auto 0;
  max-width:520px;padding:11px 22px;
  border-top:1px solid rgba(200,162,74,.32);border-bottom:1px solid rgba(200,162,74,.32);
  background:linear-gradient(90deg,rgba(200,162,74,0),rgba(200,162,74,.10),rgba(200,162,74,0)),
             rgba(90,20,20,.08)}
.ka-zahl{font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.2em;
  color:var(--gold);min-width:58px;text-align:left;white-space:nowrap}
.ka-marken{display:flex;align-items:center;gap:16px;flex:1;justify-content:center}
.ka-marke{width:11px;height:11px;padding:0;border:1px solid var(--gold);background:transparent;
  transform:rotate(45deg);cursor:pointer;transition:.25s;flex:0 0 auto}
.ka-marke:hover{background:rgba(200,162,74,.4)}
.ka-marke.an{background:var(--gold);box-shadow:0 0 10px rgba(200,162,74,.6)}
.ka-lupe{width:34px;height:34px;padding:0;border:0;background:none;cursor:pointer;color:var(--gold);
  opacity:.75;transition:.25s;flex:0 0 auto}
.ka-lupe:hover{opacity:1;color:var(--gold-light)}
.ka-lupe svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}

.ka-titel{text-align:center;margin:16px 0 0;font-family:var(--serif);font-size:1.28rem;
  font-style:italic;color:var(--muted);min-height:1.6em}

/* Ladeanzeige */
.ka-laedt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  transition:opacity .4s ease}
.ka-laedt.weg{opacity:0;pointer-events:none}
.ka-ring{width:34px;height:34px;border:1px solid rgba(200,162,74,.25);border-top-color:var(--gold);
  border-radius:50%;animation:kadreh 1s linear infinite}
@keyframes kadreh{to{transform:rotate(360deg)}}
.ka-fehler{font-size:.9rem;color:var(--muted)}

/* Grossansicht */
body.ka-fest{overflow:hidden}
.ka-gross{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;padding:26px 18px 18px;
  background:rgba(20,3,3,.96);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .26s ease}
.ka-gross.da{opacity:1}
.ka-gross-flaeche{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}
.ka-gross-flaeche canvas{max-width:100%;max-height:100%;width:auto;height:auto;
  background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.7)}
.ka-gross-band{display:flex;align-items:center;gap:26px;flex:0 0 auto}
.ka-gross-band .ka-gzahl{font-size:.72rem;letter-spacing:.2em;color:var(--gold);text-transform:uppercase}
.ka-gpfeil{width:40px;height:44px;padding:0;border:0;background:none;color:var(--gold);cursor:pointer;opacity:.7}
.ka-gpfeil:hover{opacity:1;color:var(--gold-light)}
.ka-gpfeil svg{width:16px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ka-zu{position:absolute;top:18px;right:20px;width:42px;height:42px;padding:0;border:0;background:none;
  color:var(--gold);cursor:pointer;opacity:.75;transition:.25s}
.ka-zu:hover{opacity:1;transform:rotate(90deg)}
.ka-zu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}

@media(max-width:860px){
  .ka-huelle{padding:72px 0 80px}
  /* Am Handy liegen die Knoepfe auf den Seitenraendern der Karte */
  .ka-pfeil{display:flex;position:absolute;top:50%;z-index:30;
    width:46px;height:46px;opacity:.9;
    background:rgba(250,247,241,.94);box-shadow:0 2px 10px rgba(42,7,7,.22);
    transform:translateY(-50%)}
  .ka-pfeil.ka-links{left:4px}
  .ka-pfeil.ka-rechts{right:4px}
  .ka-pfeil svg{width:13px;height:22px}
  .ka-buehne:hover .ka-pfeil{opacity:.9}
  .ka-pfeil.ka-links:hover,.ka-pfeil.ka-rechts:hover{transform:translateY(-50%)}
  .ka-pfeil:disabled{opacity:.28}
  .ka-buch{height:auto;width:100%;max-width:100%}
  .ka-band{gap:18px;max-width:100%;padding:10px 6px}
  .ka-marken{gap:13px}
  .ka-titel{font-size:1.1rem}
  .ka-buchraum{box-shadow:0 14px 30px rgba(42,7,7,.18),0 0 0 1px rgba(90,20,20,.10)}
}

/* Bei vielen Seiten passen die Seitenmarken am Handy nicht in eine Zeile. */
@media (max-width: 860px) {
    .ka-band { flex-wrap: wrap; }
    .ka-marken { flex-wrap: wrap; gap: 12px 10px; }
    .ka-zahl { min-width: 0; }
}