/* ----------------------------------------------------------------
   SKIP TO CONTENT (Accessibility)
   ---------------------------------------------------------------- */
.tls-skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 99999;
  padding: 12px 20px; background: var(--tls-brand); color: #ffffff;
  font-family: var(--tls-font-h); font-size: 13px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none;
  border-radius: 0 0 8px 8px; transition: top .2s;
}
.tls-skip-link:focus { top: 0; }

/* ================================================================
   TONSTUDIO LEIPZIG — navigation.css v7.1.0
   Audience Selector entfernt (separates Plugin).
   ================================================================ */

:root {
  --tls-brand:        #dc2727;
  --tls-brand-h:      #c21f1f;
  --tls-brand-dk:     #dc2727;
  --tls-bg:           #282834;
  --tls-bg-deep:      #1e1e2c;
  --tls-mob-bg:       #1a1a24;
  --tls-nav-scroll:   rgba(40,40,52,.96);
  --tls-bg-light:     #f0f0f3;
  --tls-white:        #ffffff;
  --tls-muted-nav:    rgba(255,255,255,.75);
  --tls-muted-soft:   rgba(255,255,255,.50);
  --tls-border-nav:   rgba(255,255,255,.07);
  --tls-border-drop:  rgba(255,255,255,.09);
  --tls-drop-bg:      #1c1c26;
  --tls-font-h: var(--font-headers);
  --tls-font-b: var(--font-main);
  --tls-font-sub: var(--font-sub);
  --tls-ease:         cubic-bezier(.4,0,.2,1);
  --tls-dur:          .2s;
  --tls-h:            106px;
  --tls-logo-crop:    inset(0 0 0 0);
  --tls-safe-top:     env(safe-area-inset-top, 0px);
  --tls-safe-right:   env(safe-area-inset-right, 0px);
  --tls-safe-bottom:  env(safe-area-inset-bottom, 0px);
  --tls-safe-left:    env(safe-area-inset-left, 0px);
}


body.tls-menu-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
}

/* Body offset */
body.tls-nav-active { padding-top: var(--tls-h); }

/* ----------------------------------------------------------------
   SCROLL PROGRESS LINE
   ---------------------------------------------------------------- */
#tls-scroll-line {
  position: fixed; top: 0; left: 0; height: 1px; width: 0%;
  background: linear-gradient(90deg, rgba(220, 39, 39,0.55), rgba(255, 119, 107,0.45));
  z-index: 10010; transition: width .08s linear; pointer-events: none;
  opacity: 0.75;
}

/* ----------------------------------------------------------------
   PAGE LOADER
   ---------------------------------------------------------------- */
#tls-loader {
  position: fixed; inset: 0; background: #282834;
  z-index: 10000; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 40px;
  transition: opacity .7s var(--tls-ease), visibility .7s var(--tls-ease);
}
#tls-loader.tls-hidden { opacity: 0; pointer-events: none; }

.tls-ll-brand { display: flex; align-items: center; justify-content: center; }
.tls-ll-logo-wide {
  height: 56px; width: auto;
  max-width: min(340px, 72vw);
  object-fit: contain;
  filter: none;
}
@media (max-width: 420px) {
  .tls-ll-logo-wide { height: 42px; max-width: 80vw; }
}

.tls-viz { display: flex; align-items: flex-end; gap: 3px; height: 56px; }
.tls-viz .b {
  width: 4px; border-radius: 2px 2px 0 0;
  animation: tlsViz var(--vd,.9s) ease-in-out infinite alternate var(--vdel,0s);
  transform-origin: bottom;
}
.tls-viz .b:nth-child(1) {height:14px;--vd:.72s;--vdel:.00s;background:#7a1010;}
.tls-viz .b:nth-child(2) {height:22px;--vd:.58s;--vdel:.06s;background:#9a1818;}
.tls-viz .b:nth-child(3) {height:34px;--vd:.80s;--vdel:.03s;background:#b81e1e;}
.tls-viz .b:nth-child(4) {height:44px;--vd:.50s;--vdel:.12s;background:#cc2424;}
.tls-viz .b:nth-child(5) {height:52px;--vd:.66s;--vdel:.08s;background:#dc2727;}
.tls-viz .b:nth-child(6) {height:56px;--vd:.44s;--vdel:.02s;background:#e83434;}
.tls-viz .b:nth-child(7) {height:50px;--vd:.76s;--vdel:.16s;background:#dc2727;}
.tls-viz .b:nth-child(8) {height:56px;--vd:.55s;--vdel:.05s;background:#e83434;opacity:.95;}
.tls-viz .b:nth-child(9) {height:48px;--vd:.68s;--vdel:.10s;background:#dc2727;}
.tls-viz .b:nth-child(10){height:56px;--vd:.48s;--vdel:.00s;background:#e83434;}
.tls-viz .b:nth-child(11){height:52px;--vd:.74s;--vdel:.14s;background:#dc2727;opacity:.9;}
.tls-viz .b:nth-child(12){height:56px;--vd:.52s;--vdel:.07s;background:#e83434;}
@keyframes tlsViz {
  from { transform: scaleY(.2); opacity: .45; }
  to   { transform: scaleY(1);  opacity: 1; }
}

.tls-ll-bar { width: 200px; height: 2px; background: rgba(255,255,255,.08); border-radius: 1px; overflow: hidden; }
.tls-ll-bar-fill { height: 100%; background: linear-gradient(90deg,var(--tls-brand),#ff776b); transform-origin: left; transform: scaleX(0); animation: tlsProg 1.9s ease-out forwards; }
@keyframes tlsProg { 0%{transform:scaleX(0)} 60%{transform:scaleX(.75)} 100%{transform:scaleX(1)} }

/* ----------------------------------------------------------------
   HEADER
   ---------------------------------------------------------------- */
#tls-header {
  position: fixed !important; top: 0 !important; left: 0; right: 0; z-index: 1000;
  height: var(--tls-h); background: #282834;
  transition: box-shadow var(--tls-dur) var(--tls-ease);
}
#tls-header.is-scrolled {
  background: rgba(40,40,52,.97);
  box-shadow: 0 1px 0 rgba(255,255,255,.07), 0 4px 20px rgba(0,0,0,.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.tls-nav-inner {
  max-width: 1760px; margin: 0 auto; padding: 0 48px;
  height: 100%; display: flex; align-items: center;
}

/* LOGO */
.tls-logo {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; flex-shrink: 0;
  transition: opacity var(--tls-dur); -webkit-tap-highlight-color: transparent;
}
.tls-logo:hover,
.tls-logo:focus-visible { opacity: .85; }
.tls-logo:focus-visible { outline: 2px solid rgba(220, 39, 39,.9); outline-offset: 3px; }
.tls-logo-img {
  width: var(--tls-logo-size, 46px); height: var(--tls-logo-size, 46px);
  object-fit: contain; object-position: center;
  clip-path: var(--tls-logo-crop);
  filter: none;
  transition: opacity var(--tls-dur);
}
.tls-logo-text {
  font-family: var(--tls-font-h); font-weight: 900; font-size: 14px;
  color: var(--tls-white); letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap; line-height: 1;
}
.tls-logo-text em { color: var(--tls-brand); font-style: normal; }

/* DESKTOP NAV */
.tls-nav-links {
  display: flex; align-items: center; list-style: none;
  gap: 0; flex: 1; justify-content: center; margin: 0; padding: 0;
}
.tls-nav-links > li { position: relative; }
.tls-nav-links > li > a {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 13px; font-family: var(--tls-font-h); font-weight: 600;
  font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--tls-muted-nav); text-decoration: none; position: relative;
  white-space: nowrap; min-height: 44px;
  transition: color var(--tls-dur) var(--tls-ease);
  -webkit-tap-highlight-color: transparent;
}
.tls-nav-links > li > a::after {
  content: ''; position: absolute; bottom: 4px; left: 13px; right: 13px;
  height: 2px; background: var(--tls-brand); border-radius: 1px;
  transform: scaleX(0); transform-origin: center;
  transition: transform .24s var(--tls-ease);
}
.tls-nav-links > li > a:hover { color: var(--tls-white); }
.tls-nav-links > li > a:hover::after { transform: scaleX(1); }

/* OPTIONALER EXTERN PFEIL */
.tls-menu-label { display: inline-flex; align-items: center; }
.tls-ext-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: .96em;
  height: .96em;
  margin-left: .28em;
  line-height: 1;
  opacity: .78;
  transform: translateY(-0.06em);
  transition: opacity var(--tls-dur) var(--tls-ease), transform var(--tls-dur) var(--tls-ease);
}
.tls-ext-mark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.tls-ext-mark path {
  fill: none;
  stroke: var(--tls-brand);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tls-nav-links > li > a:hover .tls-ext-mark,
.tls-drop li a:hover .tls-ext-mark,
.tls-mob-item > a:hover .tls-ext-mark,
.tls-mob-sub li a:hover .tls-ext-mark,
.tls-nav-links > li.is-active > a .tls-ext-mark,
.tls-mob-item.is-active > a .tls-ext-mark,
.tls-drop li a.tls-sub-active .tls-ext-mark,
.tls-mob-sub li a.tls-sub-active .tls-ext-mark {
  opacity: .98;
}

/* AKTIV — NUR Unterstrich, keine Box */
.tls-nav-links > li.is-active > a,
.tls-nav-links > li.current-menu-item > a,
.tls-nav-links > li.current-menu-ancestor > a {
  color: var(--tls-brand) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tls-nav-links > li.is-active > a::after,
.tls-nav-links > li.current-menu-item > a::after,
.tls-nav-links > li.current-menu-ancestor > a::after { transform: scaleX(1); }

/* CHEVRON */
.tls-chev { display: inline-flex; width: 11px; height: 11px; align-items: center; justify-content: center; transition: transform .22s var(--tls-ease); flex-shrink: 0; }
.tls-chev svg { width: 9px; height: 9px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tls-nav-links > li.tls-has-drop:hover .tls-chev,
.tls-nav-links > li.tls-has-drop.drop-open .tls-chev { transform: rotate(180deg); }

/* DROPDOWN */
.tls-drop {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 220px; background: var(--tls-drop-bg);
  border: 1px solid var(--tls-border-drop); border-radius: 12px;
  padding: 8px; list-style: none; margin: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  box-shadow: 0 16px 48px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity .18s var(--tls-ease), transform .18s var(--tls-ease), visibility 0s linear .18s;
}
.tls-drop::before {
  content: ''; position: absolute; top: -5px; left: 50%;
  transform: translateX(-50%) rotate(45deg); width: 8px; height: 8px;
  background: var(--tls-drop-bg); border-top: 1px solid var(--tls-border-drop); border-left: 1px solid var(--tls-border-drop);
}
.tls-nav-links > li.tls-has-drop.drop-open .tls-drop,
.tls-nav-links > li.tls-has-drop:hover .tls-drop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(4px);
  transition: opacity .18s var(--tls-ease), transform .18s var(--tls-ease), visibility 0s linear 0s;
}
.tls-drop li { list-style: none; }
.tls-drop li a {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  font-family: var(--tls-font-b); font-size: 14px; font-weight: 400; line-height: 1.45;
  color: var(--tls-muted-nav); text-decoration: none; border-radius: 8px; min-height: 44px;
  transition: color var(--tls-dur), background var(--tls-dur), padding-left var(--tls-dur);
  -webkit-tap-highlight-color: transparent;
}
.tls-drop li a:hover { color: var(--tls-white); background: rgba(220, 39, 39,.1); padding-left: 18px; }
.tls-drop li a:visited { color: var(--tls-muted-nav); }
.tls-drop li a:visited:hover { color: var(--tls-white); }
.tls-drop-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--tls-brand); flex-shrink: 0; opacity: 0; transition: opacity var(--tls-dur); }

.tls-drop li a:hover .tls-drop-dot { opacity: 1; }
.tls-drop-sep { height: 1px; background: rgba(255,255,255,.07); margin: 5px 8px; }

/* CTA BUTTON */
.tls-nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tls-nav-cta {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px;
  background: var(--tls-brand); color: var(--tls-white) !important;
  font-family: var(--tls-font-h); font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  border-radius: 999px; border: 2px solid var(--tls-brand);
  min-height: 44px; white-space: nowrap;
  transition: background var(--tls-dur), border-color var(--tls-dur), transform var(--tls-dur), box-shadow var(--tls-dur);
  box-shadow: 0 2px 14px rgba(220, 39, 39,.18); -webkit-tap-highlight-color: transparent;
}
.tls-nav-cta:hover { background: var(--tls-brand-h); border-color: var(--tls-brand-h); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(220, 39, 39,.28); }
.tls-nav-cta:active { transform: translateY(0); background: var(--tls-brand-dk); }
.tls-cta-arr { display: inline-flex; width: 13px; height: 13px; align-items: center; justify-content: center; transition: transform var(--tls-dur); }
.tls-nav-cta:hover .tls-cta-arr { transform: translateX(2px); }

/* HAMBURGER */
.tls-burger {
  display: none; flex-direction: column; justify-content: center;
  align-items: flex-end; gap: 5px; width: 44px; height: 44px;
  background: transparent !important; background-color: transparent !important;
  border: none !important; border-radius: 0 !important;
  padding: 10px 7px !important; margin: 0 !important;
  box-shadow: none !important;
  cursor: pointer; flex-shrink: 0;
  transition: opacity var(--tls-dur);
  -webkit-tap-highlight-color: transparent;
  appearance: none; -webkit-appearance: none;
}
.tls-burger:hover { opacity: .75; background: transparent !important; }
.tls-burger span { display: block !important; height: 2px !important; background: #ffffff !important; border-radius: 2px !important; transition: transform .28s var(--tls-ease), opacity .28s var(--tls-ease), width .28s var(--tls-ease); }
.tls-burger span:nth-child(1) { width: 22px; }
.tls-burger span:nth-child(2) { width: 22px; }
.tls-burger span:nth-child(3) { width: 14px; }
.tls-burger.is-open span:nth-child(1) { width: 22px; transform: translateY(7px) rotate(45deg); }
.tls-burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.tls-burger.is-open span:nth-child(3) { width: 22px; transform: translateY(-7px) rotate(-45deg); }

/* ----------------------------------------------------------------
   MOBILE MENU
   ---------------------------------------------------------------- */
#tls-mob-menu {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  min-height: 100vh; min-height: 100svh;
  background: #282834; z-index: 1001;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  isolation: isolate;
  padding: calc(var(--tls-safe-top) + 4px) max(0px, var(--tls-safe-right)) calc(48px + var(--tls-safe-bottom)) max(0px, var(--tls-safe-left)); display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateX(100%); pointer-events: none;
  transition: opacity .3s var(--tls-ease), transform .3s var(--tls-ease), visibility 0s linear .3s;
}
#tls-mob-menu.is-open {
  opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto;
  transition: opacity .3s var(--tls-ease), transform .3s var(--tls-ease), visibility 0s linear 0s;
}

.tls-mob-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: calc(var(--tls-safe-top) + 13px) 16px 13px 16px;
  flex-shrink: 0;
  height: var(--tls-h);
  box-sizing: border-box;
}
.tls-mob-header-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.tls-mob-header-logo-img {
  width: 38px; height: 38px; object-fit: contain; flex-shrink: 0;
  animation: none;
}
.tls-mob-header-logo-text {
  font-family: var(--tls-font-h); font-weight: 900; font-size: 14px;
  color: #ffffff !important; letter-spacing: 0.05em; text-transform: uppercase;
  line-height: 1; white-space: nowrap;
}
.tls-mob-header-logo-text em { color: var(--tls-brand); font-style: normal; }
.tls-mob-close-btn {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent !important; background-color: transparent !important;
  border: none !important; outline: none;
  border-radius: 0; padding: 0; margin: 0;
  box-shadow: none !important;
  cursor: pointer; color: #ffffff;
  transition: opacity var(--tls-dur);
  -webkit-tap-highlight-color: transparent;
  appearance: none; -webkit-appearance: none;
}
.tls-mob-close-btn:hover { opacity: .7; }
.tls-mob-close-btn svg { width: 28px !important; height: 28px !important; stroke: #ffffff !important; fill: none !important; stroke-width: 2.5 !important; stroke-linecap: round; stroke-linejoin: round; display: block; }

.tls-mob-intro { padding: 0 20px 12px; }
/* Kicker ausgeblendet - wird durch Logo ersetzt */
.tls-mob-copy { color: rgba(255,255,255,.68); font-family: var(--tls-font-b); font-size: 14px; line-height: 1.6; max-width: 34ch; margin-top: 4px; }
.tls-mob-list { flex: 1; padding: 8px 16px 24px; display: flex; flex-direction: column; gap: 2px; }
.tls-mob-item { border-radius: 10px; }
.tls-mob-item > a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; font-family: var(--tls-font-h); font-weight: 600;
  font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(255,255,255,.90); text-decoration: none; border-radius: 10px;
  min-height: 52px; transition: color var(--tls-dur), background var(--tls-dur);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.tls-mob-item > a:hover { background: rgba(255,255,255,.04); }
.tls-mob-item.is-active > a,
.tls-mob-item.current-menu-item > a {
  color: var(--tls-brand) !important;
  background: transparent !important;
  border-left: none !important;
  padding-left: 18px !important;
  font-weight: 700 !important;
}

.tls-mob-chev { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; flex-shrink: 0; margin-left: auto; transition: transform .25s var(--tls-ease); }
.tls-mob-chev svg { width: 14px; height: 14px; stroke: rgba(255,255,255,.5); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Sub-menu parent: alle Zustaende explizit - verhindert Text-Verschwinden */
.tls-mob-has-sub > a { color: rgba(255,255,255,.90) !important; }
.tls-mob-item.sub-open > a { color: #ffffff !important; background: rgba(255,255,255,.05) !important; }
.tls-mob-item.sub-open > a .tls-mob-chev { transform: rotate(180deg); }
.tls-mob-item.sub-open > a .tls-mob-chev svg { stroke: rgba(255,255,255,.95); }
/* Nach Schliessen: Farbe explizit wiederherstellen */
.tls-mob-has-sub:not(.sub-open) > a { color: rgba(255,255,255,.90) !important; background: transparent !important; }

.tls-mob-sub { list-style: none; margin: 0; padding: 4px 14px 10px 34px; display: none; }
.tls-mob-sub.is-open { display: block; animation: tlsSubFade .22s var(--tls-ease); }
@keyframes tlsSubFade { from{opacity:0;transform:translateY(-4px);} to{opacity:1;transform:translateY(0);} }
.tls-mob-sub li a {
  display: flex; align-items: center; padding: 11px 14px;
  font-family: var(--tls-font-b); font-size: 14px; font-weight: 400;
  color: rgba(255,255,255,.82); text-decoration: none; border-radius: 8px;
  min-height: 44px; transition: color var(--tls-dur), background var(--tls-dur);
  -webkit-tap-highlight-color: transparent;
}

.tls-mob-sub li a:hover { color: var(--tls-white); background: rgba(220, 39, 39,.1); }
.tls-mob-sub li a:visited { color: rgba(255,255,255,.82); }
.tls-mob-sub li a:visited:hover { color: var(--tls-white); }

.tls-mob-div { height: 1px; background: rgba(255,255,255,.07); margin: 8px 16px; }

.tls-mob-cta-wrap { padding: 16px 16px 0; flex-shrink: 0; }
.tls-mob-cta-wrap .tls-nav-cta {
  width: 100%; justify-content: center; padding: 18px 22px;
  font-size: 14px; min-height: 58px; font-weight: 700; letter-spacing: 0.07em;
  box-shadow: none;
}

/* ----------------------------------------------------------------
   SCROLL TO TOP BUTTON
   ---------------------------------------------------------------- */
#tls-top-btn {
  position: fixed; bottom: calc(24px + var(--tls-safe-bottom)); right: calc(24px + var(--tls-safe-right)); z-index: 900;
  width: 66px; background: #1e1e2a !important; border: 1px solid rgba(255,255,255,.1);
  border-radius: 13px; padding: 10px 8px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none;
  transition: opacity .3s var(--tls-ease), transform .3s var(--tls-ease),
              visibility 0s linear .3s, border-color var(--tls-dur),
              background var(--tls-dur), box-shadow var(--tls-dur);
  box-shadow: none; -webkit-tap-highlight-color: transparent;
}
#tls-top-btn.is-visible {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
  transition: opacity .3s var(--tls-ease), transform .3s var(--tls-ease),
              visibility 0s linear 0s, border-color var(--tls-dur),
              background var(--tls-dur), box-shadow var(--tls-dur);
}
#tls-top-btn:hover { background: #252535; border-color: rgba(220, 39, 39,.45); box-shadow: none; }

.tls-top-viz { display: flex; align-items: flex-end; gap: 2px; height: 24px; width: 100%; justify-content: center; }
.tls-top-viz .b { width: 3px; border-radius: 1.5px 1.5px 0 0; animation: tlsViz var(--vd,.9s) ease-in-out infinite alternate var(--vdel,0s); transform-origin: bottom; }
.tls-top-viz .b:nth-child(1){height:6px;--vd:.72s;--vdel:.00s;background:#7a1010;}
.tls-top-viz .b:nth-child(2){height:12px;--vd:.55s;--vdel:.08s;background:#b81e1e;}
.tls-top-viz .b:nth-child(3){height:18px;--vd:.44s;--vdel:.02s;background:#dc2727;}
.tls-top-viz .b:nth-child(4){height:22px;--vd:.60s;--vdel:.06s;background:#e83434;}
.tls-top-viz .b:nth-child(5){height:24px;--vd:.48s;--vdel:.00s;background:#e83434;}
.tls-top-viz .b:nth-child(6){height:22px;--vd:.66s;--vdel:.04s;background:#dc2727;}
.tls-top-viz .b:nth-child(7){height:18px;--vd:.52s;--vdel:.10s;background:#dc2727;}
.tls-top-viz .b:nth-child(8){height:12px;--vd:.75s;--vdel:.05s;background:#b81e1e;}
.tls-top-viz .b:nth-child(9){height:6px;--vd:.65s;--vdel:.12s;background:#7a1010;}

.tls-top-label { font-family: var(--tls-font-h); font-weight: 700; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,.85); line-height: 1; }
.tls-top-arrow { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(220, 39, 39,.15); transition: background var(--tls-dur), transform var(--tls-dur); }
#tls-top-btn:hover .tls-top-arrow { background: var(--tls-brand); transform: translateY(-2px); }
.tls-top-arrow svg { width: 11px; height: 11px; stroke: #dc2727; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--tls-dur); }
#tls-top-btn:hover .tls-top-arrow svg { stroke: var(--tls-white); }

/* ----------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   GENERATEPRESS BUTTON RESET — verhindert Theme-Überschreibungen
   ---------------------------------------------------------------- */
#tls-header button,
#tls-mob-menu button,
#tls-top-btn {
  background: transparent;
  border: none;
  box-shadow: none;
  color: inherit;
}
#tls-header button:hover,
#tls-mob-menu button:hover {
  background: transparent;
  color: inherit;
}

@media (max-width: 1200px) {
  .tls-nav-links > li > a { font-size: 11px; padding: 7px 10px; }
  .tls-nav-inner { padding: 0 24px; }
}
@media (max-width: 1024px) {
  .tls-nav-inner { padding: 0 20px; }
  .tls-nav-links > li > a { padding: 7px 8px; }
}
@media (max-width: 1100px) {
  .tls-nav-links { display: none; }
  .tls-nav-cta.tls-desktop-only { display: none; }
  .tls-burger { display: flex; margin-left: auto; }
  .tls-nav-right { margin-left: auto; }
  .tls-logo-text { font-size: 13px; }


  :root {
    --tls-h: calc(var(--tls-logo-h-mob) + 28px);
  }
  body.tls-nav-active { padding-top: calc(var(--tls-logo-h-mob) + 28px); }
  #tls-top-btn { bottom: 24px; right: 18px; width: 60px; }
}
@media (max-width: 768px) {
  .tls-nav-inner { padding: 0 16px; }
}
@media (max-width: 420px) {
  .tls-nav-inner { padding: 0 14px; }
}
@media (max-width: 360px) {
  .tls-logo-text { display: none; }
}

/* ----------------------------------------------------------------
   AKTIVER UNTERPUNKT — immer nur der aktuell passende Link ist rot
   ---------------------------------------------------------------- */
.tls-drop li a.tls-sub-active { color: rgba(220, 39, 39,.95) !important; }
.tls-drop li a.tls-sub-active .tls-drop-dot { opacity: 1; }
.tls-drop li a.tls-sub-active:hover { color: var(--tls-white) !important; }
.tls-mob-sub li a.tls-sub-active { color: rgba(220, 39, 39,.95) !important; }
.tls-mob-sub li a.tls-sub-active:hover { color: var(--tls-white) !important; }


/* ----------------------------------------------------------------
   BREITES LOGO — Desktop-Header
   Groessen kommen aus PHP-Konstanten via :root CSS-Vars im <head>.
   ---------------------------------------------------------------- */
.tls-logo-wide { gap: 0; }

/* Desktop > 1200px */
.tls-logo-wide-img {
  height: var(--tls-logo-h);
  width: var(--tls-logo-w);
  max-width: 42vw;
  object-fit: contain; object-position: left center;
  filter: none; transition: opacity var(--tls-dur);
}

/* Tablet 821px – 1200px */
@media (max-width: 1200px) {
  .tls-logo-wide-img {
    height: var(--tls-logo-h-tab);
    width: var(--tls-logo-w-tab);
    max-width: 44vw;
  }
}

/* Mobile Hamburger-Bar: 421px – 820px */
@media (max-width: 820px) {
  .tls-logo-wide-img {
    height: var(--tls-logo-h-mob);
    width: var(--tls-logo-w-mob);
    max-width: 58vw;
  }
}

/* Klein: 361px – 420px */
@media (max-width: 420px) {
  .tls-logo-wide-img {
    height: var(--tls-logo-h-sm);
    width: var(--tls-logo-w-sm);
    max-width: 62vw;
  }
}

/* Mini: <= 360px */
@media (max-width: 360px) {
  .tls-logo-wide-img {
    height: var(--tls-logo-h-mini);
    width: var(--tls-logo-w-mini);
    max-width: 66vw;
  }
}

/* ----------------------------------------------------------------
   BREITES LOGO — Mobile-Menue-Header (eigene Klasse)
   ---------------------------------------------------------------- */
.tls-mob-logo-wide-img {
  height: var(--tls-logo-h-mob);
  width: var(--tls-logo-w-mob);
  max-width: 58vw;
  object-fit: contain; object-position: left center;
  filter: none;
}
@media (max-width: 420px) {
  .tls-mob-logo-wide-img {
    height: var(--tls-logo-h-sm);
    width: var(--tls-logo-w-sm);
    max-width: 62vw;
  }
}
@media (max-width: 360px) {
  .tls-mob-logo-wide-img {
    height: var(--tls-logo-h-mini);
    width: var(--tls-logo-w-mini);
    max-width: 66vw;
  }
}

@media print {
  #tls-header,
  #tls-mob-menu,
  #tls-loader,
  #tls-scroll-line,
  #tls-top-btn { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  #tls-loader.tls-hidden { display: none !important; }
}


/* ---------------------------------------------------------------
   SALES TUNING
   --------------------------------------------------------------- */
@media (min-width: 1101px) {
  .tls-nav-cta { min-width: 120px; justify-content: center; }
}




.tls-nav-links > li > a:focus-visible,
.tls-drop li a:focus-visible,
.tls-nav-cta:focus-visible,
.tls-burger:focus-visible,
.tls-mob-item > a:focus-visible,
.tls-mob-sub li a:focus-visible,
.tls-mob-close-btn:focus-visible,
.tls-mob-header-logo:focus-visible,
.tls-logo:focus-visible {
  outline: 2px solid rgba(220, 39, 39,.9);
  outline-offset: 3px;
}

@media (max-width: 820px) {
  .tls-logo-img {
    width: 42px;
    height: 42px;
  }
}


/* iOS / touch stability */
html, body { overscroll-behavior-x: none; }
#tls-header { padding-top: 0; }
@supports (padding: max(0px)) {
  .tls-nav-inner { padding-left: max(48px, calc(48px + var(--tls-safe-left) * .35)); padding-right: max(48px, calc(48px + var(--tls-safe-right) * .35)); }
}

@media (max-width: 820px) {
  .tls-mob-header { height: var(--tls-h); padding-left: 16px; padding-right: 16px; }
  .tls-mob-intro { padding: 0 18px 12px; }
  .tls-nav-inner { padding-left: max(16px, calc(16px + var(--tls-safe-left) * .35)); padding-right: max(16px, calc(16px + var(--tls-safe-right) * .35)); }
  #tls-top-btn { right: calc(16px + var(--tls-safe-right)); bottom: calc(18px + var(--tls-safe-bottom)); }
}

/* GeneratePress + theme override protection */
#tls-header .tls-logo-text { color: #ffffff !important; font-family: var(--tls-font-h) !important; }
#tls-header .tls-logo-text em { color: var(--tls-brand) !important; font-style: normal !important; }
#tls-header a.tls-logo,
#tls-header a.tls-logo:hover,
#tls-header a.tls-logo:visited { color: #ffffff !important; text-decoration: none !important; }

/* Mobile CTA: kein Icon */
.tls-mob-cta-wrap .tls-nav-cta .tls-cta-arr { display: none; }


@media (max-width: 1279.98px) {
  #tls-header .tls-nav-inner > .tls-nav-cta {
    display: none !important;
  }
}

@media (max-width: 1279.98px) {
  #tls-header .tls-nav-inner > .tls-mob-toggle {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 1100px) {
  #tls-mob-menu .tls-mob-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    position: relative !important;
    height: var(--tls-h) !important;
    padding: calc(var(--tls-safe-top) + 13px) 16px 13px 16px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  #tls-mob-menu .tls-mob-header > .tls-logo {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 64px) !important;
  }

  #tls-mob-menu .tls-mob-close-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    left: auto !important;
    right: 0 !important;
    order: 99 !important;
    align-self: center !important;
  }
}

/* Logo Kontrast Fix */
#tls-header .tls-logo-wide-accent,
#tls-mob-menu .tls-logo-wide-accent,
#tls-loader .tls-logo-wide-accent {
  color: #dc2727 !important;
  -webkit-text-fill-color: #dc2727 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  -webkit-text-stroke: 0 !important;
  background: transparent !important;
  background-image: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

#tls-header .tls-logo-wide-main,
#tls-mob-menu .tls-logo-wide-main,
#tls-loader .tls-logo-wide-main {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  -webkit-text-stroke: 0 !important;
  background: transparent !important;
  background-image: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

#tls-header .tls-logo-wide-sub,
#tls-mob-menu .tls-logo-wide-sub,
#tls-loader .tls-logo-wide-sub {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  -webkit-text-stroke: 0 !important;
  background: transparent !important;
  background-image: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* TON Kreis Lockup */
.tls-logo-wide-lockup{
  display:inline-flex !important;
  align-items:flex-start !important;
  gap:0 !important;
  white-space:nowrap !important;
}

.tls-logo-wide-wordmark-toncircle{
  display:inline-grid !important;
  grid-template-columns:max-content max-content !important;
  grid-template-areas:
    "main accent"
    ". sub" !important;
  column-gap:5px !important;
  row-gap:1px !important;
  align-items:center !important;
  white-space:nowrap !important;
  line-height:1 !important;
}

.tls-logo-wide-wordmark-toncircle .tls-logo-wide-main{
  grid-area:main !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:2px !important;
  white-space:nowrap !important;
  line-height:1 !important;
}

.tls-logo-wide-wordmark-toncircle .tls-logo-wide-accent{
  grid-area:accent !important;
  align-self:center !important;
  justify-self:start !important;
  white-space:nowrap !important;
  line-height:1 !important;
  margin:0 !important;
  transform:none !important;
  font-family:var(--tls-font-h, var(--font-headers)) !important;
  font-weight:900 !important;
  font-size:28px !important;
  letter-spacing:0 !important;
  position:relative !important;
  top:0 !important;
}

.tls-logo-wide-wordmark-toncircle .tls-logo-wide-sub{
  grid-area:sub !important;
  justify-self:start !important;
  white-space:nowrap !important;
  padding-left:7.15ch !important;
  margin-top:-31px !important;
  font-family:var(--font-main, 'Hind', sans-serif) !important;
  font-weight:400 !important;
  font-size:10.5px !important;
  line-height:1.02 !important;
  letter-spacing:.012em !important;
  max-width:none !important;
  color:#fff !important;
}

.tls-logo-ton-circle{
  width:66px !important;
  height:66px !important;
  border-radius:50% !important;
  background:
    radial-gradient(
      circle at 30% 28%,
      rgba(255,255,255,.08) 0%,
      rgba(255,255,255,.03) 10%,
      rgba(255,255,255,0) 18%
    ),
    radial-gradient(
      circle at center,
      rgba(40,40,52,.00) 42%,
      rgba(40,40,52,.05) 68%,
      rgba(40,40,52,.14) 88%,
      rgba(40,40,52,.22) 100%
    ),
    #dc2727 !important;
  box-shadow: inset 0 0 0 1px rgba(40,40,52,.14), inset 0 -5px 10px rgba(40,40,52,.08), inset 0 5px 8px rgba(255,255,255,.02) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-right:-2px !important;
  position:relative !important;
  z-index:1 !important;
  flex:0 0 auto !important;

  -webkit-clip-path: inset(0 0 35% 0);
  clip-path: inset(0 0 35% 0);
}

.tls-logo-ton-text{
  font-family:var(--tls-font-h, var(--font-headers)) !important;
  font-weight:900 !important;
  font-size:28px !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  color:#ffffff !important;
  text-rendering:geometricPrecision !important;
  -webkit-font-smoothing:antialiased !important;
  -moz-osx-font-smoothing:grayscale !important;
  text-shadow:
    0 0 .01px rgba(255,255,255,.02),
    0 .35px 0 rgba(40,40,52,.22),
    0 0 1px rgba(40,40,52,.04) !important;
  text-rendering:geometricPrecision !important;
  -webkit-font-smoothing:antialiased !important;
  -moz-osx-font-smoothing:grayscale !important;
  text-shadow:0 0 .01px rgba(255,255,255,.01) !important;
  display:block !important;
  transform:none !important;
  white-space:nowrap !important;
}

.tls-logo-studio-text{
  font-family:var(--tls-font-h, var(--font-headers)) !important;
  font-weight:900 !important;
  font-size:28px !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  color:#ffffff !important;
  text-rendering:geometricPrecision !important;
  -webkit-font-smoothing:antialiased !important;
  -moz-osx-font-smoothing:grayscale !important;
  text-shadow:0 0 .01px rgba(255,255,255,.01) !important;
  display:inline-block !important;
  position:relative !important;
  z-index:2 !important;
  white-space:nowrap !important;
  transform:none !important;
  margin-left:0 !important;
}

@media (max-width:1200px){
  .tls-logo-wide-wordmark-toncircle{
    column-gap:5px !important;
    row-gap:1px !important;
  }
  .tls-logo-wide-wordmark-toncircle .tls-logo-wide-sub{
    padding-left:6.95ch !important;
    font-size:9.6px !important;
    margin-top:-27px !important;
  }
  .tls-logo-ton-circle{
    width:58px !important;
    height:58px !important;
    margin-right:-2px !important;

  -webkit-clip-path: inset(0 0 35% 0);
  clip-path: inset(0 0 35% 0);
}
  .tls-logo-ton-text{
    font-size:24px !important;
  }
  .tls-logo-studio-text,
  .tls-logo-wide-wordmark-toncircle .tls-logo-wide-accent{
    font-size:24px !important;
  }
}

@media (max-width:820px){
  .tls-logo-wide-wordmark-toncircle{
    column-gap:4px !important;
    row-gap:1px !important;
  }
  .tls-logo-wide-wordmark-toncircle .tls-logo-wide-sub{
    padding-left:6.75ch !important;
    font-size:8.7px !important;
    margin-top:-23px !important;
  }
  .tls-logo-ton-circle{
    width:50px !important;
    height:50px !important;
    margin-right:-2px !important;

  -webkit-clip-path: inset(0 0 35% 0);
  clip-path: inset(0 0 35% 0);
}
  .tls-logo-ton-text{
    font-size:21px !important;
  }
  .tls-logo-studio-text,
  .tls-logo-wide-wordmark-toncircle .tls-logo-wide-accent{
    font-size:21px !important;
  }
}

@media (max-width:520px){
  .tls-logo-wide-wordmark-toncircle{
    column-gap:3px !important;
    row-gap:1px !important;
  }
  .tls-logo-wide-wordmark-toncircle .tls-logo-wide-sub{
    padding-left:6.55ch !important;
    font-size:7.8px !important;
    margin-top:-24px !important;
  }
  .tls-logo-ton-circle{
    width:43px !important;
    height:43px !important;
    margin-right:-1px !important;

  -webkit-clip-path: inset(0 0 35% 0);
  clip-path: inset(0 0 35% 0);
}
  .tls-logo-ton-text{
    font-size:18px !important;
  }
  .tls-logo-studio-text,
  .tls-logo-wide-wordmark-toncircle .tls-logo-wide-accent{
    font-size:18px !important;
  }
}

@media (max-width:390px){
  .tls-logo-wide-wordmark-toncircle{
    column-gap:3px !important;
    row-gap:1px !important;
  }
  .tls-logo-wide-wordmark-toncircle .tls-logo-wide-sub{
    padding-left:6.35ch !important;
    font-size:6.9px !important;
    margin-top:-22px !important;
  }
  .tls-logo-ton-circle{
    width:38px !important;
    height:38px !important;
    margin-right:-1px !important;

  -webkit-clip-path: inset(0 0 35% 0);
  clip-path: inset(0 0 35% 0);
}
  .tls-logo-ton-text{
    font-size:19px !important;
  }
  .tls-logo-studio-text,
  .tls-logo-wide-wordmark-toncircle .tls-logo-wide-accent{
    font-size:19px !important;
  }
}\n\n/* Textlogo Final Clean */
.tls-logo-wide-wordmark {
  display: inline-grid !important;
  grid-template-columns: max-content max-content !important;
  grid-template-areas:
    "main accent"
    ". sub" !important;
  align-items: end !important;
  column-gap: 4px !important;
  row-gap: 5px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  text-decoration: none !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
}

.tls-logo-wide-main,
.tls-logo-wide-accent {
  font-family: var(--tls-font-h, var(--font-headers)) !important;
  font-weight: 900 !important;
  font-size: 28px !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.tls-logo-wide-main {
  grid-area: main !important;
}

.tls-logo-wide-accent {
  grid-area: accent !important;
}

.tls-logo-wide-sub {
  grid-area: sub !important;
  justify-self: start !important;
  padding-left: 5.35ch !important;
  margin-top: 1px !important;
  font-family: var(--font-main, 'Hind', sans-serif) !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  max-width: none !important;
}

.tls-ll-brand .tls-logo-wide-wordmark {
  justify-content: center !important;
}

@media (max-width: 1200px) {
  .tls-logo-wide-main,
  .tls-logo-wide-accent {
    font-size: 24px !important;
  }

  .tls-logo-wide-sub {
    padding-left: 5.15ch !important;
    font-size: 10px !important;
  }
}

@media (max-width: 820px) {
  .tls-logo-wide-wordmark {
    column-gap: 3px !important;
    row-gap: 4px !important;
  }

  .tls-logo-wide-main,
  .tls-logo-wide-accent {
    font-size: 21px !important;
    letter-spacing: .015em !important;
  }

  .tls-logo-wide-sub {
    padding-left: 4.95ch !important;
    font-size: 9px !important;
    white-space: nowrap !important;
    max-width: none !important;
  }
}

@media (max-width: 520px) {
  .tls-logo-wide-main,
  .tls-logo-wide-accent {
    font-size: 18px !important;
    letter-spacing: .01em !important;
  }

  .tls-logo-wide-sub {
    padding-left: 4.75ch !important;
    font-size: 8px !important;
    white-space: nowrap !important;
    max-width: none !important;
  }
}

@media (max-width: 390px) {
  .tls-logo-wide-main,
  .tls-logo-wide-accent {
    font-size: 16px !important;
    letter-spacing: .008em !important;
  }

  .tls-logo-wide-sub {
    padding-left: 4.55ch !important;
    font-size: 7.1px !important;
    white-space: nowrap !important;
    max-width: none !important;
  }
}

/* Logo Cable Art */
.tls-logo-wide-lockup{
  position:relative !important;
  isolation:isolate !important;
}

.tls-logo-wide-wordmark-toncircle{
  position:relative !important;
}

.tls-logo-wide-wordmark-toncircle::after{
  content:"" !important;
  position:absolute !important;
  left:36px !important;
  top:28px !important;
  width:150px !important;
  height:24px !important;
  pointer-events:none !important;
  z-index:0 !important;
  opacity:.92 !important;
  background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 24'%3E%3Cpath d='M4 4 C 16 5, 20 15, 34 15 C 48 15, 58 9, 72 9 C 88 9, 95 14, 109 14 C 120 14, 128 11, 136 10' fill='none' stroke='%23dc2727' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M4 4 C 16 5, 20 15, 34 15 C 48 15, 58 9, 72 9 C 88 9, 95 14, 109 14 C 120 14, 128 11, 136 10' fill='none' stroke='%23ff867b' stroke-opacity='.16' stroke-width='1' stroke-linecap='round' transform='translate(0 1)'/%3E%3C/svg%3E") !important;
}

.tls-logo-wide-wordmark-toncircle::before{
  content:"" !important;
  position:absolute !important;
  left:173px !important;
  top:32px !important;
  width:18px !important;
  height:6px !important;
  border-radius:3px !important;
  pointer-events:none !important;
  z-index:0 !important;
  background:
    linear-gradient(90deg,
      rgba(220, 39, 39,.96) 0 38%,
      rgba(210,210,218,.92) 38% 72%,
      rgba(48,48,58,.96) 72% 100%
    ) !important;
  box-shadow:
    3px 0 0 -1px rgba(220, 39, 39,.58),
    inset 0 0 0 1px rgba(255,255,255,.07) !important;
  transform:rotate(-7deg) !important;
  opacity:.95 !important;
}

@media (max-width:1200px){
  .tls-logo-wide-wordmark-toncircle::after{
    left:34px !important;
    top:25px !important;
    width:132px !important;
    height:22px !important;
  }
  .tls-logo-wide-wordmark-toncircle::before{
    left:154px !important;
    top:28px !important;
    width:16px !important;
    height:5px !important;
  }
}

@media (max-width:820px){
  .tls-logo-wide-wordmark-toncircle::after{
    left:29px !important;
    top:21px !important;
    width:110px !important;
    height:18px !important;
    opacity:.84 !important;
  }
  .tls-logo-wide-wordmark-toncircle::before{
    left:128px !important;
    top:23px !important;
    width:14px !important;
    height:5px !important;
    opacity:.86 !important;
  }
}

@media (max-width:520px){
  .tls-logo-wide-wordmark-toncircle::after{
    left:24px !important;
    top:18px !important;
    width:98px !important;
    height:16px !important;
    opacity:.74 !important;
  }
  .tls-logo-wide-wordmark-toncircle::before{
    left:113px !important;
    top:21px !important;
    width:12px !important;
    height:4px !important;
    opacity:.76 !important;
  }
}

@media (max-width:390px){
  .tls-logo-wide-wordmark-toncircle::after,
  .tls-logo-wide-wordmark-toncircle::before{
    display:none !important;
  }
}


/* H1 CONTROL VARS START */
:root{
  --brand-h1-font: var(--tls-font-h, 'Poppins', sans-serif);
  --brand-h1-weight: 900;
  --brand-h1-spacing: 0;
  --brand-h1-line: 1.05;
  --brand-h1-size: clamp(34px, 5vw, 56px);
  --brand-h1-accent: #dc2727;
}
/* H1 CONTROL VARS END */




/* H1 CONTROL APPLY START */
.site-main h1:not(.fg2-hero-title),
#content h1:not(.fg2-hero-title),
.content-area h1:not(.fg2-hero-title),
main h1:not(.fg2-hero-title),
.fg2-hero-title{
  font-family: var(--brand-h1-font) !important;
  font-weight: var(--brand-h1-weight) !important;
  letter-spacing: var(--brand-h1-spacing) !important;
  text-rendering: geometricPrecision !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal !important;
  font-synthesis: none !important;
  font-optical-sizing: auto !important;
}

.site-main h1:not(.fg2-hero-title) span,
#content h1:not(.fg2-hero-title) span,
.content-area h1:not(.fg2-hero-title) span,
main h1:not(.fg2-hero-title) span{
  color: var(--brand-h1-accent) !important;
  font-style: normal !important;
}

.fg2-hero-outline,
.fg2-hero-solid{
  font-family: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-rendering: inherit !important;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  font-kerning: inherit !important;
  font-synthesis: inherit !important;
  font-optical-sizing: inherit !important;
}

.fg2-hero-solid em{
  font-style: normal !important;
}
/* H1 CONTROL APPLY END */


/* OVERLINE STYLE VARS START */
:root{
  --brand-overline-font: 'Architects Daughter', cursive;
  --brand-overline-size: 18px;
  --brand-overline-weight: 600;
  --brand-overline-spacing: 0.008em;
  --brand-overline-line: 1.22;
  --brand-overline-transform: none;
}
/* OVERLINE STYLE VARS END */


/* OVERLINE STYLE APPLY START */
.tls_overline{
  font-family: var(--brand-overline-font) !important;
  font-size: var(--brand-overline-size) !important;
  font-weight: var(--brand-overline-weight) !important;
  letter-spacing: var(--brand-overline-spacing) !important;
  line-height: var(--brand-overline-line) !important;
  text-transform: var(--brand-overline-transform) !important;

  text-rendering: geometricPrecision !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  font-kerning: normal;
  font-optical-sizing: auto;}
/* OVERLINE STYLE APPLY END */


/* SECTION HEADING STYLE VARS START */
:root{
  --brand-section-font: 'Poppins', sans-serif;
  --brand-section-weight: 900;
  --brand-section-spacing: -0.02em;
  --brand-section-line: 1.15;
}
/* SECTION HEADING STYLE VARS END */


/* SECTION HEADING STYLE APPLY START */
.tls_section_heading{
  font-family: var(--brand-section-font) !important;
  font-weight: var(--brand-section-weight) !important;
  letter-spacing: var(--brand-section-spacing) !important;
  line-height: var(--brand-section-line) !important;
}
/* SECTION HEADING STYLE APPLY END */


/* H1 LOGO NUDGE START */
.site-main h1:not(.fg2-hero-title),
#content h1:not(.fg2-hero-title),
.content-area h1:not(.fg2-hero-title),
main h1:not(.fg2-hero-title),
.fg2-hero-title{
  line-height: var(--brand-h1-line) !important;
  word-spacing: -0.035em !important;
}

.fg2-hero-outline,
.fg2-hero-solid{
  line-height: inherit !important;
  word-spacing: inherit !important;
}
/* H1 LOGO NUDGE END */

/* tls-logo-sub-handwriting - Subtext in Architects Daughter */
#tls-header .tls-logo-wide-sub,
#tls-mob-menu .tls-logo-wide-sub,
#tls-loader .tls-logo-wide-sub,
.tls-logo-wide-wordmark-toncircle .tls-logo-wide-sub {
  font-family: var(--font-subheaders, 'Architects Daughter', cursive) !important;
}

/* logo-bottom-cut - horizontaler Schnitt-Effekt auf Wortmarke, laesst Kabel unberuehrt */
.tls-logo-ton-text,
.tls-logo-studio-text,
.tls-logo-wide-accent {
  clip-path: inset(0 0 7% 0) !important;
}

@media (max-width:520px){
  .tls-logo-ton-text,
  .tls-logo-studio-text,
  .tls-logo-wide-accent {
    clip-path: inset(0 0 7% 0) !important;
  }
}

/* === TLS: Menü-Link Farbe bei Rechtsklick/Active/Visited behalten (2026-07-19) === */
.fg-site-nav a:active,
.fg-site-nav a:focus,
.fg-site-nav a:visited,
.fg-site-nav .menu-item a:active,
.fg-site-nav .menu-item a:focus,
.fg-site-nav .menu-item a:visited {
  color: inherit !important;
}

/* === TLS: Menü-Link explizit weiss bei Rechtsklick (2026-07-19) === */
.fg-site-nav a:active,
.fg-site-nav a:focus,
.fg-site-nav a:visited,
.fg-site-nav .menu-item a:active,
.fg-site-nav .menu-item a:focus,
.fg-site-nav .menu-item a:visited,
header a:active,
header nav a:active,
#site-navigation a:active,
nav.fg-site-nav a:active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ==========================================================================
   Platz fuer den Schriftzug neben der Sprachschaltflaeche

   Auf Telefonen lief die Unterzeile unter den runden Knopf. Gemessen
   wurde je Breite der noetige Faktor, hier stehen die Stufen mit Reserve.
   Ab 520 Punkten passt der Schriftzug ohne Zutun.
   ========================================================================== */
@media (max-width: 519px) {
  .tls-logo-wide-lockup { zoom: .92; }
}
@media (max-width: 434px) {
  .tls-logo-wide-lockup { zoom: .83; }
}
@media (max-width: 399px) {
  .tls-logo-wide-lockup { zoom: .79; }
}
@media (max-width: 374px) {
  .tls-logo-wide-lockup { zoom: .77; }
}
@media (max-width: 344px) {
  .tls-logo-wide-lockup { zoom: .73; }
}
/* Das Verkleinern darf die Trefferflaeche nicht mitnehmen. */
@media (max-width: 519px) {
  .tls-logo, a.tls-logo-wide { min-height: 44px; display: flex; align-items: center; }
}

/* ------------------------------------------------------------------
   Feinmass der Navigationsleiste (09.09.2026)
   Vorgabe: /var/www/_daten/NAVIGATION_MASS.md

   Zwei Kleinigkeiten, die erst die Konsolenmessung ueber sechs
   Fensterbreiten gezeigt hat:
   1. Der Sprachumschalter war je nach Auftritt 44 oder 46 px breit,
      auf einem sogar nur 40 px hoch. Jetzt ueberall genau 44 x 44.
   2. Der Abstand zum Menueschalter war fliessend und wuchs mit der
      Fensterbreite von 5 auf 8 px. Jetzt ueberall fest 6 px.
   ------------------------------------------------------------------ */

.tls-lang-switch{width:44px !important;min-width:44px !important;height:44px !important}
#tls-header .tls-nav-inner{gap:6px !important}
/* Im Laden trug der Sprachumschalter zusaetzlich 6 px Aussenrand
   rechts. Zusammen mit dem Abstand von 6 px ergab das 12 px, doppelt
   so viel wie auf den anderen Auftritten. 09.09.2026. */
#tls-header .tls-lang-switch{margin-right:0 !important}
/* Der Aussenrand kam aus einer Regel mit hoeherer Spezifitaet.
   Deshalb hier ueber mehrere Wege, damit er sicher faellt. */
a.tls-lang-switch,.tls-lang-switch,#tls-header a.tls-lang-switch,
.tls-nav-inner>.tls-lang-switch{margin-right:0 !important}
/* Im Laden liegen Sprachumschalter und Menueschalter unmittelbar in der
   Leiste, nicht in einer eigenen Gruppe wie auf den anderen Auftritten.
   Beide trugen margin-left:auto und teilten sich den Restplatz, wodurch
   der Abstand je nach Fensterbreite zwischen 6 und 12 px schwankte.
   Jetzt rueckt allein der Sprachumschalter nach rechts, der
   Menueschalter folgt mit festen 6 px. 09.09.2026. */
#tls-header .tls-nav-inner>.tls-lang-switch{margin-left:auto !important;margin-right:0 !important}
#tls-header .tls-nav-inner>.tls-mob-toggle{margin-left:6px !important}
#tls-header .tls-nav-inner{gap:0 !important}
/* Nachtrag: der Aussenrand am Menueschalter liess sich nicht setzen, er
   wird an anderer Stelle auf 0 gezwungen. Der Abstand kommt deshalb vom
   Sprachumschalter, der ohnehin einen traegt. Zusammen mit gap:0 ergibt
   das die 6 px des gemeinsamen Masses. 09.09.2026. */
#tls-header .tls-nav-inner>.tls-lang-switch{margin-right:6px !important}
/* Bei sehr schmalen Schirmen setzte eine Media Query den Abstand auf
   5 px. Mit voller Selektorkette, damit er auch dort 6 px betraegt. */
html body #tls-header .tls-nav-inner>.tls-lang-switch{margin-right:6px !important}
html body #tls-header .tls-nav-inner{gap:0 !important;column-gap:0 !important}
/* ------------------------------------------------------------------
   Bündiger rechter Rand (10.09.2026)

   Der Menueschalter trug ein seitliches Polster von 7 px. Die
   Tapflaeche endete dadurch zwar bei 16 px zum Fensterrand, die
   sichtbaren Striche aber erst bei 23 px. Links beginnt das Logo bei
   16 px: die Leiste war also rechts eingerueckt, und genau das war zu
   sehen.

   Gemessen am 10.09.2026 ueber die Pixel des Bildschirmfotos, nicht
   ueber die Elementkanten. Die Elementmessung hatte 16 zu 16 gemeldet
   und den Fehler damit uebersehen.

   Oben und unten bleibt das Polster, es haelt die drei Striche
   zusammen. Nur seitlich faellt es weg.
   ------------------------------------------------------------------ */
html body #tls-header .tls-burger{padding-left:0 !important;padding-right:0 !important}

/* ------------------------------------------------------------------
   Rueckmeldung beim Antippen im Navigationsmenue (10.09.2026)

   Auf Fabians Vorgabe: wer einen Menuepunkt drueckt, sieht ihn kurz in
   Vollrot aufleuchten. Rot bleibt dabei der aktuellen Seite
   vorbehalten - das Aufleuchten dauert nur, solange der Finger oder die
   Maustaste haelt.

   Die Regel weiter oben ("iPhone und Safari Link Highlight noch haerter
   neutralisieren") setzt bei :active color:inherit. Sie wurde gegen die
   unkontrollierte graue Faerbung von iOS gesetzt, nicht gegen jede
   Rueckmeldung. Hintergrund, Schatten und Rahmen bleiben deshalb
   weiterhin unterdrueckt; nur die Schriftfarbe kommt hinzu.

   Nicht enthalten: der Kontaktknopf. Er ist selbst rot, roter Text
   darauf waere unsichtbar.
   ------------------------------------------------------------------ */
html body #tls-header .tls-nav-links > li > a:active,
html body #tls-header .tls-drop li a:active,
html body #tls-mob-menu .tls-mob-item > a:active,
html body #tls-mob-menu .tls-mob-sub li a:active{
  color:#dc2727 !important;
}


/* ------------------------------------------------------------------
   Volle Farben im Navigationsmenue (10.09.2026)

   Auf Fabians Vorgabe. Vorher standen die Menuepunkte auf Weiss mit
   75 Prozent Deckkraft am Rechner und 90 Prozent am Handy. Auf dem
   dunklen Grund ergab das ein mattes Hellgrau, das neben dem satten
   Rot des aktuellen Punkts wie ein Mischton wirkte.

   Jetzt hat jede Farbe genau eine Bedeutung:
     Weiss     alle uebrigen Punkte
     Vollrot   die Seite, auf der man steht, und der gedrueckte Punkt

   Beim Ueberfahren bleibt der Text weiss; die Rueckmeldung uebernimmt
   der rote Strich, der unter dem Wort einwaechst. Der Mechanismus dafuer
   war bereits vorhanden (::after mit transform: scaleX), er wird jetzt
   nur nicht mehr von einem gleichzeitigen Farbwechsel ueberdeckt.

   Der aktuelle Punkt ist ausgenommen: er bleibt rot.
   ------------------------------------------------------------------ */
html body #tls-header .tls-nav-links > li:not(.is-active) > a,
html body #tls-header .tls-drop li a,
html body #tls-mob-menu .tls-mob-item:not(.is-active) > a,
html body #tls-mob-menu .tls-mob-sub li a{
  color:#ffffff;
}
html body #tls-header .tls-nav-links > li:not(.is-active) > a:hover,
html body #tls-header .tls-drop li a:hover,
html body #tls-mob-menu .tls-mob-item:not(.is-active) > a:hover{
  color:#ffffff;
}


/* Nachtrag: Menuepunkte mit Untermenue tragen im Mobilmenue eine eigene
   Regel mit !important (.tls-mob-has-sub:not(.sub-open) > a), die auf
   90 Prozent Deckkraft steht. Sie wird hier mit abgedeckt, damit auch
   sie voll weiss ist. 10.09.2026. */
html body #tls-mob-menu .tls-mob-item:not(.is-active) > a,
html body #tls-mob-menu .tls-mob-has-sub:not(.is-active) > a,
html body #tls-mob-menu .tls-mob-has-sub:not(.sub-open) > a,
html body #tls-mob-menu .tls-mob-sub li a{
  color:#ffffff !important;
}
html body #tls-mob-menu .tls-mob-item.is-active > a,
html body #tls-mob-menu .tls-mob-has-sub.is-active > a{
  color:#dc2727 !important;
}


/* ------------------------------------------------------------------
   Sattes Rot im Menue, ohne farbige Saeume (10.09.2026)

   Gemessen an den Pixeln des Bildschirmfotos: der Kern der Schrift war
   rgb(216,39,39), der Unterstrich darunter exakt rgb(220,39,39) - aber
   die geglaetteten Buchstabenraender ergaben Toene wie rgb(245,118,106).
   Bei 11 Pixel grosser Versalschrift besteht ein guter Teil der
   Buchstabenflaeche aus solchen Randpixeln; deshalb wirkte das Rot
   heller und wie mit Weiss gemischt.

   Ursache ist die Subpixel-Glaettung: der Browser faerbt die Kanten in
   Rot-, Gruen- und Blauanteilen unterschiedlich. Auf dunklem Grund
   faellt das als Farbsaum auf. Graustufen-Glaettung vermeidet das, die
   Schrift wirkt dadurch etwas feiner und die Farbe sauber.

   Nur fuer die Menuepunkte gesetzt, damit sich sonst nichts aendert.
   ------------------------------------------------------------------ */
html body #tls-header .tls-nav-links > li > a,
html body #tls-header .tls-drop li a,
html body #tls-header .tls-nav-cta,
html body #tls-mob-menu .tls-mob-item > a,
html body #tls-mob-menu .tls-mob-has-sub > a,
html body #tls-mob-menu .tls-mob-sub li a{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}


/* Der aktuelle Menuepunkt bekommt mehr Gewicht (10.09.2026)

   Bei 11 Pixel grosser Schrift bestehen rund vier Fuenftel der
   Buchstabenflaeche aus geglaetteten Randpixeln. Sie mischen das Rot mit
   dem dunklen Grund, und das Wort wirkt heller als der Unterstrich
   darunter, obwohl beide dieselbe Farbe tragen: #dc2727.

   Gemessen an den Pixeln: mit Gewicht 800 steigt der Rotanteil der
   Mittelfarbe von rgb(208,82,77) auf rgb(218,90,83), die Sattheit von
   126 auf 128. Die Farbe bleibt unveraendert, es ist mehr Flaeche da,
   die sie tragen kann.

   Das ist zugleich gestalterisch richtig: die Seite, auf der man steht,
   darf kraeftiger stehen als die uebrigen. */
html body #tls-header .tls-nav-links > li.is-active > a,
html body #tls-mob-menu .tls-mob-item.is-active > a,
html body #tls-mob-menu .tls-mob-has-sub.is-active > a{
  font-weight:800;
}


/* Am Rechner war der Menueschalter selbst ausgeblendet (display:none auf
   .tls-burger), der umgebende Knopf aber nicht: er blieb als Kasten von
   44 x 0 Pixeln stehen und schob den Kontaktknopf 50 Pixel vom rechten
   Rand weg. Gemessen am 10.09.2026 bei 1440 px: Rand 98 statt 48.
   Auf den anderen Auftritten ist der Knopf ganz ausgeblendet. */
@media (min-width:1341px){
  html body #tls-header .tls-mob-toggle{display:none !important}
}

/* ==================================================================
   BEWUSSTE ENTSCHEIDUNG, NICHT "REPARIEREN"      Fabian, 10.09.2026

   Der aktuelle Menuepunkt traegt #dc2727 auf dem Leistengrund
   rgb(40,40,52). Das ergibt einen Kontrast von 3,02 zu 1; die
   Barrierefreiheitsnorm verlangt 4,5.

   DAS IST GEPRUEFT UND SO GEWOLLT. Fabian hat sich am 10.09.2026 nach
   Vorlage von drei Alternativen ausdruecklich fuer die eine
   Markenfarbe entschieden, gegen ein aufgehelltes Rot.

   Warum das vertretbar ist:
     - der aktuelle Punkt ist zusaetzlich durch einen roten Unterstrich
       gekennzeichnet. Farbe ist nicht das einzige Merkmal, und genau
       das verlangt die Norm an erster Stelle.
     - es ist der Punkt der Seite, auf der man bereits steht. Man muss
       ihn nicht lesen, um sich zurechtzufinden.
     - alle uebrigen Elemente der Leiste erfuellen die Norm deutlich:
       Menuepunkte und Sprachumschalter 14,55 zu 1, Kontaktknopf
       4,81 zu 1.

   Vor dem 10.09.2026 stand hier #f5766a ("Rot auf dunklem Grund"),
   ein aufgehelltes Rot mit 5,32 zu 1. Es erfuellte die Norm, wirkte
   aber lachsrosa und passte nicht zur Marke. Wer den Kontrastwert
   erneut anhebt, macht diese Entscheidung rueckgaengig - dann bitte
   vorher mit Fabian sprechen.

   Geprueft: der naechstbeste Kompromiss waere #fe524c gewesen,
   4,52 zu 1 bei fast gleicher Sattheit. Bewusst nicht genommen.
   ================================================================== */