/* ==========================================================================
   The Moon – Bausteine
   Ersatz für ElementsKit, Premium Addons, Happy Addons, Unlimited Elements
   und die NextGEN-Anzeigen. Keine fremden Schriften, keine fremden Server.
   ========================================================================== */

.tm-hinweis{margin:8px 0;padding:8px 12px;border-left:3px solid #C4574C;
  background:rgba(196,87,76,.08);color:#C4574C;font-size:14px}

/* ------------------------------------------------------- Schaltflächen ---
   Themes und Baukästen geben jeder <button> ein Innenmaß mit — Astra etwa
   `padding:10px 40px`. Bei `box-sizing:border-box` kann ein Kasten aber nicht
   schmaler werden als sein eigenes Innenmaß: Aus dem 44-Pixel-Kreis der
   Navigationspfeile wurde so ein 80 Pixel breites Ei. Deshalb bekommen alle
   eigenen Schaltflächen ihr Aussehen hier ausdrücklich selbst. Steht bewusst
   ganz oben, damit die Bausteine weiter unten davon abweichen dürfen. */
.tm-kar__pfeil,.tm-film__pfeil,.tm-kar__punkt,.tm-kar__lupe,
.tm-lupe__x,.tm-lupe__vor,.tm-lupe__zur,
.tm-nav__burger,.tm-nav__zu,.tm-film__zelle,
.tm-modal__ausloeser,.tm-modal__zu,.tm-akk__kopf{
  box-sizing:border-box;margin:0;padding:0;min-width:0;min-height:0;
  line-height:1;letter-spacing:normal;text-transform:none;font-weight:400;
  border-radius:0;box-shadow:none;text-shadow:none;
  -webkit-appearance:none;appearance:none}

/* --------------------------------------------------------------- Menü --- */
.tm-nav{position:relative;background:var(--tm-bg);min-height:var(--tm-hoehe);
  display:flex;align-items:center;justify-content:center;font-family:var(--tm-schrift)}
.tm-nav__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:0}
.tm-nav__list li{position:relative;margin:0;padding:0}
.tm-nav__list a{display:block;padding:6px var(--tm-abstand);color:var(--tm-farbe);
  font-size:var(--tm-groesse);font-weight:var(--tm-gewicht);line-height:1.3;
  text-decoration:none;border:0;transition:color .2s ease}
.tm-nav__list a:hover,.tm-nav__list a:focus-visible{color:var(--tm-hover)}
.tm-nav__list .current-menu-item>a,.tm-nav__list .current_page_item>a{color:var(--tm-aktiv)}
.tm-nav__list a:focus-visible{outline:2px solid var(--tm-farbe);outline-offset:2px}

.tm-nav__list .sub-menu{position:absolute;top:100%;left:0;z-index:60;
  min-width:220px;margin:0;padding:6px 0;list-style:none;
  background:rgba(8,8,9,.96);border:1px solid rgba(193,166,122,.35);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s}
.tm-nav__list li:hover>.sub-menu,.tm-nav__list li:focus-within>.sub-menu,
.tm-nav__list li.tm-offen>.sub-menu{opacity:1;visibility:visible;transform:none}
.tm-nav__list .sub-menu a{padding:8px 16px;white-space:nowrap}

.tm-nav__burger{display:none;position:relative;z-index:70;width:44px;height:44px;
  padding:10px;border:0;background:none;cursor:pointer;flex-direction:column;
  justify-content:space-between}
.tm-nav__burger span{display:block;height:2px;width:100%;background:var(--tm-burger);
  transition:transform .25s ease,opacity .2s ease}
.tm-nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(10px) rotate(45deg)}
.tm-nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.tm-nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}
.tm-nav__burger:focus-visible{outline:2px solid var(--tm-farbe);outline-offset:2px}

.tm-nav__kopf{display:none}
.tm-nav__zu{border:0;background:none;color:var(--tm-burger);
  font:400 34px/1 Georgia,serif;cursor:pointer;padding:0 6px}

@media (max-width:767px){
  .tm-nav{justify-content:flex-start;min-height:56px}
  .tm-nav__burger{display:flex}
  .tm-nav__panel{position:fixed;top:0;right:0;bottom:0;z-index:65;
    width:var(--tm-panel);max-width:88vw;background:#0B0B0C;
    border-left:1px solid rgba(193,166,122,.35);padding:0 0 28px;overflow-y:auto;
    transform:translateX(102%);transition:transform .3s ease;
    box-shadow:-16px 0 44px rgba(0,0,0,.55)}
  .tm-nav.tm-auf .tm-nav__panel{transform:none}
  .tm-nav__kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:14px 16px;border-bottom:1px solid rgba(193,166,122,.25)}
  .tm-nav__logo{width:195px;height:auto;max-width:60%}
  .tm-nav__list{flex-direction:column;align-items:stretch;padding:8px 0}
  .tm-nav__list a{padding:12px 20px;font-size:1.15em}
  .tm-nav__list .sub-menu{position:static;opacity:1;visibility:visible;transform:none;
    background:none;border:0;border-left:1px solid rgba(193,166,122,.3);
    margin:0 0 4px 20px;padding:0;display:none}
  .tm-nav__list li.tm-offen>.sub-menu{display:block}
  .tm-nav__list .sub-menu a{padding:9px 18px;white-space:normal}
}

/* ---------------------------------------------------------- Karussell --- */
/* Jede Folie hat eine feste Höhe und beschneidet ihr Bild. Nur so sind alle
   Folien gleich breit UND gleich hoch — sonst sitzt die Beschriftung bei
   hochformatigen Bildern unter dem Bild statt darin. Die Mittenbetonung
   arbeitet deshalb nur noch über die Deckkraft, nicht über die Größe. */
.tm-kar{position:relative;--tm-zeigen:3;--tm-luecke:0px;--tm-fhoehe:420px}
.tm-kar__fenster{overflow:hidden}
.tm-kar__bahn{display:flex;align-items:stretch;will-change:transform;
  transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.tm-kar__folie{position:relative;flex:0 0 calc(100% / var(--tm-zeigen));
  box-sizing:border-box;padding:0 calc(var(--tm-luecke) / 2);
  display:block;text-decoration:none;color:inherit;border:0;background:none;
  transition:opacity .45s ease}
.tm-kar__rahmen{position:relative;overflow:hidden;height:var(--tm-fhoehe)}
.tm-kar--bild .tm-kar__rahmen{box-shadow:5px 5px 10px rgba(0,0,0,.5)}
/* Zwei Klassen, nicht eine: Elementor bringt `.elementor img{height:auto}`
   mit (eine Klasse plus ein Element = 0,1,1). Das schlaegt die einfache
   Klasse `.tm-kar__bild` (0,1,0). Folge: das Bild fuellte den Rahmen nicht
   mehr aus, unter ihm blieb der Grund der Seite stehen — und der Verlauf der
   Beschriftung lief statt ins Bild in dieses Gold. */
.tm-kar .tm-kar__bild{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease,filter .4s ease}
.tm-kar__folie:hover .tm-kar__bild,
.tm-kar__folie:focus-visible .tm-kar__bild{transform:scale(1.05)}
.tm-kar__folie:focus-visible{outline:2px solid #C1A67A;outline-offset:3px}
.tm-kar__folie[href],.tm-kar__folie[data-tm-gross]{cursor:pointer}

/* Beschriftung sitzt im Bild, der Verlauf reicht deutlich über die Schrift */
.tm-kar__text{position:absolute;left:0;right:0;bottom:0;
  min-height:42%;padding:1.1em 1.2em 1.2em;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:flex-end;gap:.2em}
/* Der Schleier liegt auf einem Pseudoelement, nicht auf dem Kasten selbst.
   Grund: Elementors Versuchsfunktion "Lazy Load Background Images" setzt
   `.e-con...:not(.e-lazyloaded) *{background-image:none!important}` — der
   Stern trifft Elemente, aber keine Pseudoelemente. So bleibt der Verlauf
   auch dann stehen, wenn der Container noch nicht als geladen markiert ist. */
.tm-kar__text::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.62) 42%,
    rgba(0,0,0,.28) 72%,rgba(0,0,0,0) 100%)}
/* Das Pseudoelement ist positioniert und wuerde die nicht positionierte
   Schrift sonst zudecken. Ein `position:relative` stellt die Malreihenfolge
   wieder her, ohne eine z-index-Leiter aufzumachen. */
.tm-kar__titel,.tm-kar__unter,.tm-kar__frei{position:relative}
.tm-kar--text .tm-kar__rahmen{height:auto}
.tm-kar--text .tm-kar__text{position:static;min-height:0;padding:1.2em}
.tm-kar--text .tm-kar__text::before{content:none}
.tm-kar__titel{margin:0;font-family:"PT Serif",Georgia,serif;font-size:1.35em;
  font-weight:400;line-height:1.2;color:#C1A67A}
.tm-kar__unter{margin:0;font-size:1.05em;line-height:1.3;color:#EFE9DE}
.tm-kar__frei{color:#EFE9DE}

/* Lupe, wenn die Folie vergrößert statt verlinkt */
.tm-kar__lupe{position:absolute;top:14px;right:14px;z-index:2;color:#EFE9DE;
  opacity:0;transition:opacity .3s ease;pointer-events:none;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.7))}
.tm-kar__folie:hover .tm-kar__lupe,
.tm-kar__folie:focus-visible .tm-kar__lupe{opacity:1}

/* Dauerlauf: das Band wandert gleichmaessig nach links. Den Versatz setzt
   das Skript Bild fuer Bild; die weiche Ueberblendung des Schrittbetriebs
   muss dafuer aus, sonst laeuft die Bewegung gegen die Ubergangszeit an. */
.tm-kar--lauf .tm-kar__bahn{transition:none}
.tm-kar--lauf .tm-kar__folie{transition:none}

/* Mittenbetonung: abgeschaltet.
   Die seitlichen Folien standen auf 62 Prozent Deckkraft; beim Weiterblättern
   wirkte das Bild dadurch halbdurchsichtig statt nur "nicht in der Mitte".
   Alle Folien sind jetzt voll deckend. Die Klasse tm-kar--mitte bleibt am
   Kasten stehen — falls die Betonung je zurückkommen soll, genügt hier ein
   Wert unter 1. */
.tm-kar--mitte .tm-kar__folie{opacity:1}

.tm-kar__pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(0,0,0,.5);color:#C1A67A;font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:color .2s ease,background .2s ease}
.tm-kar__pfeil:hover{color:#fff;background:rgba(0,0,0,.75)}
.tm-kar__pfeil:disabled{opacity:.25;cursor:default}
.tm-kar__pfeil--links{left:-23px}
.tm-kar__pfeil--rechts{right:-23px}
.tm-kar__punkte{display:flex;justify-content:center;gap:8px;margin-top:14px}
.tm-kar__punkt{width:9px;height:9px;border:0;border-radius:50%;padding:0;cursor:pointer;
  background:rgba(193,166,122,.35)}
.tm-kar__punkt.is-aktiv{background:#C1A67A}

@media (max-width:1024px){
  .tm-kar{--tm-fhoehe:var(--tm-fhoehe-tab,340px)}
  .tm-kar__folie{flex-basis:calc(100% / var(--tm-zeigen-tab,2))}
  .tm-kar__pfeil--links{left:-8px}
  .tm-kar__pfeil--rechts{right:-8px}
}
@media (max-width:767px){
  .tm-kar{--tm-fhoehe:var(--tm-fhoehe-handy,300px)}
  .tm-kar__folie{flex-basis:calc(100% / var(--tm-zeigen-handy,1))}
  .tm-kar__titel{font-size:1.25em}
  /* Pfeile bleiben auch am Telefon 44 x 44 - das ist das Mindestmass fuer
     eine Flaeche, die man mit dem Finger sicher trifft. Vorher schrumpften
     sie hier auf 38 und waren damit kleiner als die des Filmstreifens. */
  .tm-kar__pfeil--links{left:2px}
  .tm-kar__pfeil--rechts{right:2px}
}

/* ------------------------------------------------------------ Galerie --- */
.tm-gal{--tm-sp:3;--tm-h:400px;--tm-luecke:0px;--tm-gal-titel:1.7em;--tm-gal-titel-handy:1.35em}
.tm-gal__filter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 22px}
.tm-gal__knopf{border:1px solid rgba(193,166,122,.5);background:transparent;
  color:#C1A67A;padding:7px 18px;font-size:.95em;letter-spacing:.04em;cursor:pointer;
  transition:background .2s ease,color .2s ease}
.tm-gal__knopf:hover{color:#EFE9DE;border-color:#EFE9DE}
.tm-gal__knopf.is-aktiv{background:#C1A67A;color:#000;border-color:#C1A67A}
.tm-gal__gitter{display:grid;grid-template-columns:repeat(var(--tm-sp),minmax(0,1fr));
  gap:var(--tm-luecke)}
.tm-gal__zelle{margin:0;position:relative;overflow:hidden;min-width:0}
.tm-gal__zelle.tm-versteckt{display:none}
.tm-gal__flaeche{display:block;position:relative;width:100%;height:var(--tm-h);
  padding:0;border:0;background:none;cursor:pointer;overflow:hidden;
  color:inherit;text-decoration:none}
.tm-gal__flaeche img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease,filter .4s ease}
.tm-gal--grau .tm-gal__flaeche img{filter:saturate(0)}
.tm-gal__flaeche:hover img,.tm-gal__flaeche:focus-visible img{filter:none;transform:scale(1.04)}
.tm-gal__text{position:absolute;left:0;right:0;bottom:0;
  min-height:42%;padding:16px 18px 18px;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:flex-end;gap:.18em;text-align:left;
  background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.62) 40%,
    rgba(0,0,0,.26) 70%,rgba(0,0,0,0) 100%)}
.tm-gal__titel{font-family:"PT Serif",Georgia,serif;font-size:var(--tm-gal-titel);line-height:1.15;
  color:#C1A67A}
.tm-gal__unter{font-size:1.15em;line-height:1.2;color:#EFE9DE}
.tm-gal__fuss{display:flex;justify-content:center;margin-top:26px}
.tm-gal__mehr{border:1px solid #C1A67A;background:transparent;color:#C1A67A;
  padding:11px 30px;letter-spacing:.06em;cursor:pointer;transition:background .2s,color .2s}
.tm-gal__mehr:hover{background:#C1A67A;color:#000}

@media (max-width:1024px){
  .tm-gal__gitter{grid-template-columns:repeat(var(--tm-sp-tab,2),minmax(0,1fr))}
  .tm-gal__flaeche{height:var(--tm-h-tab,300px)} }
@media (max-width:767px){
  .tm-gal__gitter{grid-template-columns:repeat(var(--tm-sp-handy,1),minmax(0,1fr))}
  .tm-gal__flaeche{height:var(--tm-h-handy,220px)}
  .tm-gal__titel{font-size:var(--tm-gal-titel-handy)} .tm-gal__unter{font-size:1em} }

/* --------------------------------------------------------- Logoleiste --- */
/* Freigestellte, einfarbige Logos auf schwarzem oder durchsichtigem Grund.
   Keine weißen Kacheln, keine Graustufen — die Logodateien sind bereits
   freigestellt und eingefärbt (uploads/logos/weiss|creme|gold|farbe). */
.tm-logos{--tm-zeigen:5;--tm-abstand:35px;--tm-hoehe:90px;--tm-tempo:40s;
  --tm-grund:transparent;--tm-ruhe:.78;
  position:relative;overflow:hidden;background:var(--tm-grund)}
/* Der Ausblendverlauf an den Raendern liegt auf dem Fenster, nicht auf der Leiste
   selbst - sonst blendet er auch den farbigen Grund aus, und links und rechts
   scheint der Seitenhintergrund durch (Sir Richard, 8.9.2026: „heller"). */
.tm-logos__fenster{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.tm-logos__bahn{display:flex;align-items:center}
.tm-logos--lauf .tm-logos__bahn{width:max-content;
  animation:tm-lauf var(--tm-tempo) linear infinite}
.tm-logos--lauf:hover .tm-logos__bahn,
.tm-logos--lauf:focus-within .tm-logos__bahn{animation-play-state:paused}
.tm-logos--fest .tm-logos__bahn{justify-content:center;flex-wrap:wrap}
.tm-logos__zelle{flex:0 0 auto;height:var(--tm-hoehe);
  padding:0 calc(var(--tm-abstand) / 2);
  display:flex;align-items:center;justify-content:center}
.tm-logos__zelle a{display:flex;align-items:center;height:100%}
.tm-logos__zelle img{max-height:100%;width:auto;max-width:none;display:block;
  background:none;opacity:var(--tm-ruhe);
  transition:opacity .3s ease,transform .3s ease}
.tm-logos__zelle:hover img{opacity:1;transform:scale(1.04)}
/* Schwarze Logos ohne eigene Dateien: brightness(0) setzt jeden sichtbaren
   Bildpunkt auf Schwarz, die Durchsichtigkeit bleibt unberuehrt. */
.tm-logos--schwarz .tm-logos__zelle img{filter:brightness(0)}
.tm-logos__zelle a:focus-visible img{opacity:1;outline:2px solid #C1A67A;outline-offset:6px}
@keyframes tm-lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:767px){ .tm-logos{--tm-hoehe:64px;--tm-abstand:24px} }
@media (prefers-reduced-motion:reduce){
  .tm-logos--lauf .tm-logos__bahn{animation:none;justify-content:center;flex-wrap:wrap;width:auto}
  .tm-logos__zelle img{transition:none} }

/* ------------------------------------------------------ Klappfenster --- */
.tm-modal{--tm-breite:90%;--tm-maxh:800px;display:inline-block;max-width:100%}
.tm-modal__ausloeser{position:relative;display:block;padding:0;border:0;
  background:none;cursor:pointer;overflow:hidden;width:100%}
.tm-modal__ausloeser--bild img{display:block;width:100%;height:auto;
  transition:transform .5s ease,filter .4s ease}
.tm-modal__ausloeser--bild:hover img{transform:scale(1.04);filter:brightness(.75)}
.tm-modal__lupe{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#EFE9DE;opacity:0;transition:opacity .3s ease;pointer-events:none}
.tm-modal__ausloeser--bild:hover .tm-modal__lupe,
.tm-modal__ausloeser--bild:focus-visible .tm-modal__lupe{opacity:1}
.tm-modal__beschriftung{position:absolute;left:0;right:0;bottom:0;
  min-height:45%;padding:16px 16px 18px;box-sizing:border-box;
  display:flex;align-items:flex-end;justify-content:center;
  font-family:"PT Serif",Georgia,serif;font-size:1.35em;color:#C1A67A;text-align:center;
  background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.62) 40%,
    rgba(0,0,0,.26) 70%,rgba(0,0,0,0) 100%)}
.tm-modal__ausloeser--knopf{border:1px solid #C1A67A;color:#C1A67A;
  padding:11px 28px;letter-spacing:.06em;width:auto;transition:background .2s,color .2s}
.tm-modal__ausloeser--knopf:hover{background:#C1A67A;color:#000}

.tm-modal__huelle{position:fixed;inset:0;z-index:9000;display:flex;
  align-items:center;justify-content:center;padding:20px}
.tm-modal__huelle[hidden]{display:none}
.tm-modal__schleier{position:absolute;inset:0;background:rgba(0,0,0,.49);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.tm-modal__kasten{position:relative;z-index:1;width:var(--tm-breite);max-width:1400px;
  max-height:var(--tm-maxh);display:flex;flex-direction:column;
  background:#000;color:#EFE9DE;box-shadow:0 0 10px rgba(0,0,0,.25);
  border:1px solid rgba(193,166,122,.35)}
.tm-modal__kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;border-bottom:1px solid rgba(193,166,122,.25)}
.tm-modal__titel{margin:0;font-family:"PT Serif",Georgia,serif;font-size:1.4em;
  font-weight:400;color:#C1A67A}
.tm-modal__x{border:0;background:none;color:#C1A67A;font:400 32px/1 Georgia,serif;
  cursor:pointer;padding:0 4px}
.tm-modal__x:hover{color:#fff}
.tm-modal__inhalt{padding:20px;overflow:auto;flex:1 1 auto}
.tm-modal__fuss{padding:14px 20px;background:#000;text-align:right;
  border-top:1px solid rgba(193,166,122,.25)}
.tm-modal__zu{border:1px solid #C1A67A;background:transparent;color:#C1A67A;
  padding:9px 24px;cursor:pointer;transition:background .2s,color .2s}
.tm-modal__zu:hover{background:#C1A67A;color:#000}
@media (max-width:767px){ .tm-modal__kasten{width:100%;max-height:92vh} }

/* ------------------------------------------------------ Filmstreifen --- */
.tm-film{position:relative;--tm-h:340px;--tm-luecke:6px}
.tm-film__bahn{display:flex;gap:var(--tm-luecke);overflow-x:auto;overflow-y:hidden;
  scroll-behavior:smooth;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;padding-bottom:6px}
.tm-film__bahn::-webkit-scrollbar{height:6px}
.tm-film__bahn::-webkit-scrollbar-thumb{background:rgba(193,166,122,.5)}
.tm-film__bahn::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}
.tm-film__zelle{flex:0 0 auto;height:var(--tm-h);padding:0;border:0;background:none;
  cursor:zoom-in;overflow:hidden;scroll-snap-align:start;position:relative}
.tm-film__zelle img{height:100%;width:auto;display:block;
  transition:transform .5s ease,filter .4s ease}
.tm-film__zelle:hover img{transform:scale(1.05);filter:brightness(.8)}
.tm-film__zelle:focus-visible{outline:2px solid #C1A67A;outline-offset:2px}
.tm-film--seitlich .tm-film__zelle{height:var(--tm-h)}
.tm-film__pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(0,0,0,.5);color:#C1A67A;font-size:20px;
  display:flex;align-items:center;justify-content:center;
  transition:color .2s,background .2s,opacity .2s}
.tm-film__pfeil:hover{color:#fff;background:rgba(0,0,0,.75)}
.tm-film__pfeil:disabled{opacity:.2;cursor:default}
.tm-film__pfeil--links{left:-23px}
.tm-film__pfeil--rechts{right:-23px}
@media (max-width:1024px){
  .tm-film__zelle{height:var(--tm-h-tab,250px)}
  .tm-film__pfeil--links{left:2px} .tm-film__pfeil--rechts{right:2px} }
@media (max-width:767px){
  .tm-film__zelle{height:var(--tm-h-handy,200px)} }

/* -------------------------------------------------------------- Video --- */
/* [tm_video]: Vorschaubild vom eigenen Server, darüber der Startknopf und
   der Hinweis, was der Klick auslöst. Nach dem Klick füllt das iframe den
   Kasten; das Seitenverhältnis kommt aus dem style-Attribut (Vorgabe 16:9). */
.tm-video{position:relative;width:100%;background:#000;overflow:hidden;color:#fff}
/* .elementor img{height:auto} wiegt schwerer als eine Klasse allein - daher zwei. */
.tm-video .tm-video__bild{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
/* Zwei Klassen: Elementors Kit stylt „button" als .elementor-kit-13 button (0,1,1)
   und legte den Knopf sonst deckend in Gold über das Bild.                    */
.tm-video .tm-video__start{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;
  border-radius:0;box-shadow:none;background:transparent;background-image:none;color:#fff;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6em;
  font:inherit;line-height:1.3;text-transform:none;letter-spacing:normal;transition:background .2s}
.tm-video .tm-video__start:hover,.tm-video .tm-video__start:focus-visible{background:rgba(0,0,0,.2);
  background-image:none;color:#fff;border:0;outline:none;transform:none}
.tm-video__play{width:72px;height:72px;border-radius:50%;background:var(--tm-farbe,#C1A67A);
  position:relative;box-shadow:0 2px 12px rgba(0,0,0,.4)}
.tm-video__play::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);
  border-style:solid;border-width:14px 0 14px 24px;border-color:transparent transparent transparent #000}
.tm-video__text{font-size:1rem;letter-spacing:.04em;text-shadow:0 1px 4px rgba(0,0,0,.6)}
/* knopf="nein": kein Kreis, keine Beschriftung - das Bild selbst ist die
   Schaltflaeche. Beim Zeigen wird es nur leicht dunkler; fuer die Tastatur
   muss ein Rahmen sichtbar bleiben, sonst waere der Knopf unauffindbar. */
.tm-video.tm-video--knopf-nein .tm-video__start:hover{background:rgba(0,0,0,.12)}
.tm-video.tm-video--knopf-nein .tm-video__start:focus-visible{background:rgba(0,0,0,.12);
  outline:3px solid var(--tm-farbe,#C1A67A);outline-offset:-3px}
/* Der Hinweis stand in Weiss und stach zu hart heraus. Jetzt in der globalen
   Farbe "Hinweis" (#E0D3BD, helles Gold). Damit er auch vor einem hellen
   Vorschaubild lesbar bleibt, ist der Streifen etwas dichter (72 % Schwarz):
   selbst im ungünstigsten Fall bleibt der Kontrast bei 6,3:1, auf dem dunklen
   Vorspannbild bei 12,9:1 - beides über der Forderung von 4,5:1. */
.tm-video__hinweis{position:absolute;left:0;right:0;bottom:0;margin:0;padding:.6em 1em;
  font-size:.8rem;line-height:1.35;text-align:center;background:rgba(0,0,0,.72);
  color:var(--tm-hinweis,#e0d3bd);pointer-events:none}
.tm-video__hinweis a{color:var(--tm-hinweis,#e0d3bd);text-decoration:underline;pointer-events:auto}
.tm-video.tm-video--laeuft iframe{position:absolute;inset:0;width:100%;height:100%;max-width:none;border:0;display:block}

/* -------------------------------------------------------- Großansicht --- */
.tm-lupe{position:fixed;inset:0;z-index:9500;display:none;
  align-items:center;justify-content:center;background:rgba(0,0,0,.92)}
.tm-lupe.is-auf{display:flex}
.tm-lupe__bild{max-width:94vw;max-height:88vh;width:auto;height:auto;display:block;
  box-shadow:0 0 60px rgba(0,0,0,.8)}
.tm-lupe__x,.tm-lupe__vor,.tm-lupe__zur{position:absolute;border:0;background:rgba(0,0,0,.45);
  color:#C1A67A;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:color .2s,background .2s}
.tm-lupe__x:hover,.tm-lupe__vor:hover,.tm-lupe__zur:hover{color:#fff;background:rgba(0,0,0,.75)}
.tm-lupe__x{top:18px;right:18px;width:48px;height:48px;border-radius:50%;font:400 30px/1 Georgia,serif}
.tm-lupe__zur,.tm-lupe__vor{top:50%;transform:translateY(-50%);width:52px;height:52px;
  border-radius:50%;font-size:24px}
.tm-lupe__zur{left:18px} .tm-lupe__vor{right:18px}
.tm-lupe__zaehler{position:absolute;bottom:18px;left:0;right:0;text-align:center;
  color:#EFE9DE;font-size:14px;letter-spacing:.08em}

@media (prefers-reduced-motion:reduce){
  .tm-kar__bahn,.tm-nav__panel,.tm-nav__list .sub-menu,.tm-nav__burger span,
  .tm-gal__flaeche img,.tm-film__zelle img,.tm-modal__ausloeser--bild img{transition:none}
  .tm-film__bahn{scroll-behavior:auto}
}

/* ---------------------------------------------------------- Knopfpaar --- */
.tm-knoepfe{--tm-abstand:40px;--tm-farbe:#C1A67A;--tm-schrift:#000;
  --tm-hover:#000;--tm-hover-schrift:#C1A67A;--tm-aus:center;
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--tm-abstand);
  justify-content:var(--tm-aus)}
.tm-knopf{display:inline-block;padding:.75em 1.8em;border-radius:3px;
  background:var(--tm-farbe);color:var(--tm-schrift);
  font-size:1.2em;font-weight:500;letter-spacing:.03em;text-transform:uppercase;
  text-decoration:none;line-height:1.2;
  box-shadow:2px 2px 5px rgba(0,0,0,.5);
  transition:background .25s ease,color .25s ease}
.tm-knopf:hover,.tm-knopf:focus-visible{background:var(--tm-hover);color:var(--tm-hover-schrift)}
.tm-knopf:focus-visible{outline:2px solid var(--tm-farbe);outline-offset:3px}
.tm-knoepfe__mitte{color:var(--tm-farbe);font-size:1.1em;letter-spacing:.05em}
@media (max-width:767px){
  .tm-knoepfe{flex-direction:column;gap:calc(var(--tm-abstand) * .4)}
  .tm-knopf{width:60%;text-align:center}
}

/* ---------------------------------------------------------- Akkordeon --- */
.tm-akk{--tm-titel:#C1A67A;--tm-text:#EFE9DE;--tm-linie:rgba(193,166,122,.3)}
.tm-akk__falte{border-bottom:1px solid var(--tm-linie)}
.tm-akk__kopf{list-style:none;cursor:pointer;position:relative;
  padding:1em 2.4em 1em 0;
  font-family:"PT Serif",Georgia,serif;font-size:20px;line-height:1.5;
  color:var(--tm-titel);transition:color .2s ease}
.tm-akk__kopf::-webkit-details-marker{display:none}
.tm-akk__kopf::after{content:"";position:absolute;right:.4em;top:1.35em;
  width:10px;height:10px;border-right:2px solid var(--tm-titel);
  border-bottom:2px solid var(--tm-titel);
  transform:rotate(45deg);transition:transform .25s ease}
.tm-akk__falte[open] .tm-akk__kopf::after{transform:rotate(-135deg)}
.tm-akk__kopf:hover{color:#fff}
.tm-akk__kopf:focus-visible{outline:2px solid var(--tm-titel);outline-offset:2px}
.tm-akk__inhalt{padding:0 2.4em 1.4em 0;color:var(--tm-text);font-size:1em;line-height:1.65}
.tm-akk__inhalt p:first-child{margin-top:0}
.tm-akk__inhalt p:last-child{margin-bottom:0}
@media (max-width:767px){ .tm-akk__kopf{font-size:1em} }
@media (prefers-reduced-motion:reduce){
  .tm-knopf,.tm-akk__kopf,.tm-akk__kopf::after{transition:none} }

/* ------------------------------------------------------------- Tabelle --- */
.tm-tabelle{--tm-kopf-grund:#C1A67A;--tm-kopf-schrift:#000;--tm-schrift:#C1A67A;
  --tm-linie:#C1A67A;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tm-tabelle table{width:100%;border-collapse:collapse;color:var(--tm-schrift);
  min-width:560px}
.tm-tabelle thead th{background:var(--tm-kopf-grund);color:var(--tm-kopf-schrift);
  font-family:"Poiret One",Georgia,serif;font-size:1.3em;font-weight:500;
  text-transform:uppercase;letter-spacing:.03em;padding:.7em .6em;text-align:center;
  border:1px solid var(--tm-linie)}
.tm-tabelle tbody th,.tm-tabelle tbody td{padding:.65em .6em;text-align:center;
  border:1px solid var(--tm-linie);line-height:1.4}
.tm-tabelle tbody th{text-align:left;font-weight:400}
.tm-tabelle tbody tr:nth-child(odd){background:rgba(255,255,255,.07)}
.tm-tabelle tbody tr:nth-child(even){background:#000}
@media (max-width:767px){
  .tm-tabelle thead th{font-size:1em;padding:.5em .4em}
  .tm-tabelle tbody th,.tm-tabelle tbody td{padding:.5em .4em;font-size:.9em}
}

/* ------------------------------------------------------- Kontaktdaten ---- */
/* Verschleierte Adressen/Rufnummern: bis das Skript sie freischaltet, ist
   das <a> ohne href - danach ein ganz normaler Link.                        */
.tm-kontakt[href]{cursor:pointer}
.tm-kontakt:not([href]){cursor:default}

/* --------------------------------- Startseite: „Ihre Private Galerie" ---- */
/* Drei Karten (Bild · Überschrift · Text) in der Reihe b0f4465. Weil die
   Überschriften unterschiedlich viele Zeilen brauchen, begannen die Texte
   auf verschiedener Höhe und die Knorr-Karte wirkte kürzer. Ab 768 px wird
   die Reihe ein Raster, jede Karte ein Unter-Raster über dieselben drei
   Zeilen: Bilder, Überschriften und Texte liegen damit über alle Karten auf
   gleicher Höhe, oben bündig - egal, wie eine Überschrift umbricht.
   Darunter (gestapelt) bleibt Elementors Flex-Verhalten unverändert.         */
@media (min-width:768px){
  .elementor-71 .elementor-element-b0f4465{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto;align-items:start}
  .elementor-71 .elementor-element-b0f4465 > .e-con{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-items:start;width:auto;max-width:none}
  /* Der goldene Kasten der Überschrift füllt die ganze Zeile, der Text bleibt oben. */
  .elementor-71 .elementor-element-b0f4465 > .e-con > .elementor-widget-heading{align-self:stretch}
  .elementor-71 .elementor-element-b0f4465 > .e-con > .elementor-widget-heading > .elementor-widget-container{height:100%;box-sizing:border-box}
}

/* ------------------------------ Datenschutzerklärung (DSGVO AIO) ---------- */
/* Der Vorlagentext des Plugins gliedert die Begriffe und Betroffenenrechte
   als Listen, deren Punkte selbst Überschriften (a) …, b) …) tragen. Die
   Vorlage schaltet die Aufzählungszeichen per style-Attribut ab; das
   Plugin streift dieses Attribut beim Speichern ab. Also hier.               */
.dsgvoaio_policy_shortcode ul{list-style:none;padding-left:0;margin-left:0}

/* ------------------------------------ Cookie-Banner (DSGVO AIO) ---------- */
/* „Ablehnen" muss so leicht sein wie „Akzeptieren". Das Plugin gibt dem
   Ablehnen-Knopf per style-Attribut die Farbe der Nebenknöpfe (weiß); hier
   bekommt er dieselbe Farbe wie „Akzeptieren" - gleiche Größe hat er schon.  */
#tarteaucitronAlertBig .dsgvonoticebtnsinner .tarteaucitronCloseBtn{background:#79b51f !important;color:#fff !important}

/* ------------------------------------------- Formular „Ihre Meinung" ------ */
/* Skalenfragen (1–5) im CF7-Formular: Randbeschriftungen und Auswahl in einer
   Reihe, ohne Rahmen des Theme-Fieldsets.                                    */
.wpcf7 .tm-skala{border:0;padding:0;margin:0 0 1.4em;min-width:0}
.wpcf7 .tm-skala legend{padding:0;margin:0 0 .5em;float:none;width:auto}
.wpcf7 .tm-skala .wpcf7-form-control-wrap{display:inline-block;vertical-align:middle}
.wpcf7 .tm-skala .wpcf7-radio{display:inline-flex;gap:.9em;margin:0 .8em;vertical-align:middle}
.wpcf7 .tm-skala .wpcf7-list-item{margin:0}
.wpcf7 .tm-skala__rand{font-size:.85em;opacity:.8;vertical-align:middle}