/*
 * terminsuche – gemeinsame Effekte für alle Seiten (seit 2.5.0), Gegenstück zu common.js.
 * Wird von Terminsuche, Umfragen und Konto geladen sowie – über das Systemplugin – auf den
 * übrigen Seiten der Website (Startseite). Reine Darstellung.
 *
 * @copyright  (C) 2026 FreiLine GmbH
 * @license    GNU General Public License Version 2 or later; see LICENSE.txt
 */

/* 1. Hintergrundpartikel – überall gleich */
#particleCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.72}
/* Eigener Stapelkontext für body: Die Punkte liegen so über einem Seitenhintergrund, den das
   Template auf body setzt (z. B. Cassiopeia-Verlauf), aber weiterhin unter allen Inhalten. */
body{isolation:isolate}

/* 2. Einblenden beim Scrollen (nur wenn common.js läuft – ohne JavaScript bleibt alles sichtbar) */
html.tsu-fx .reveal{opacity:0;transform:translateY(12px);transition:transform .25s ease-out,opacity .25s ease-out}
html.tsu-fx .reveal.in{opacity:1;transform:none}

/* 3. Karten-Animation beim Scrollen auf Touch-Geräten und schmalen Bildschirmen:
      dieselbe Wirkung wie der Hover-Effekt am Desktop, gesteuert über --mobile-progress. */
@media (max-width:820px), (hover:none){
  .steps > div{
    --mobile-progress:0;
    transform:translateY(calc(-6px * var(--mobile-progress)));
    border-color:color-mix(in srgb,#6F5CFF calc(15% + 22% * var(--mobile-progress)),transparent);
    transition:border-color .2s ease;will-change:transform
  }
  .steps > div::before{opacity:var(--mobile-progress);transition:none}
  .steps > div::after{transform:scaleX(calc(.28 + .72 * var(--mobile-progress)));transition:none}

  .ts-card{
    --mobile-progress:0;
    transform:translateY(calc(-8px * var(--mobile-progress)));
    border-color:color-mix(in srgb,var(--card-tone,#6F5CFF) calc(16% + 26% * var(--mobile-progress)),transparent);
    transition:none;will-change:transform
  }
  .ts-card::before{transform:scaleX(calc(.22 + .78 * var(--mobile-progress)));transition:none}
  .ts-card::after{transform:translate(calc(-14px * var(--mobile-progress)),calc(-10px * var(--mobile-progress))) scale(calc(1 + .12 * var(--mobile-progress)));transition:none}
  .ts-card .sppb-icon,.ts-card .sppb-icon-container{transform:translateY(calc(-3px * var(--mobile-progress))) rotate(calc(-3deg * var(--mobile-progress)));transition:background-color .25s ease,color .25s ease}
  .ts-card.mobile-icon-active .sppb-icon,.ts-card.mobile-icon-active .sppb-icon-container{background:var(--card-tone,#6F5CFF)!important;color:#fff!important}
}

/* 4. Tipp-Feedback: auf Touch-Geräten sichtbar, ohne «hängenbleibende» Hover-Zustände */
.steps > div:active,.feature-card:active,.ts-card:active,.acc-item:active,.choice:active,
.add-menu button:active,.type-choice label:active,.icon-btn:active,.admin-row-btn:active{
  transform:translateY(-1px) scale(.985);transition-duration:.1s
}
.btn:active,.acc-btn:active{transform:scale(.97)}
@media (hover:none){
  html .btn:hover{transform:none}
  html .btn:active{transform:scale(.97)}
}

@media (prefers-reduced-motion:reduce){
  #particleCanvas{display:none}
  html.tsu-fx .reveal{opacity:1;transform:none;transition:none}
  .steps > div,.ts-card,.feature-card,.btn,.ts-card::before,.ts-card::after{transform:none!important;transition:none!important}
}

/* Seit 2.9.0: Teilnehmer-Link im Admin-Bereich */
.part-link{width:100%;margin:0 0 var(--s2,14px);padding:14px 16px;border:1px solid rgba(111,92,255,.28);border-radius:12px 22px 12px 12px;background:#F4F2FF}
.part-link strong{display:block;margin-bottom:2px}
.part-link .hint{display:block;margin:0 0 10px}
.part-link-row{display:flex;gap:10px;flex-wrap:wrap}
.part-link-row input{flex:1 1 220px;min-width:0;min-height:44px;font-size:16px;padding:8px 12px;border:1px solid var(--line,#d9d6ee);border-radius:10px;background:#fff}
.part-link-row .btn{min-height:44px}

/* 5. Sprachmenü (seit 2.23.0): Dropdown mit Symbol – in den Werkzeugen und im Kopf der Website-Seiten */
.ts-lang{position:relative;display:inline-block;vertical-align:middle;font-family:inherit;line-height:1}
.ts-lang-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:5px 12px 5px 6px;margin:0;border:1px solid var(--line,#e2dff3);border-radius:14px;background:#fff;color:var(--ink,var(--ts-ink,#1f2340));font:700 .85rem/1 var(--body,var(--ts-font,inherit));cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .15s ease,box-shadow .15s ease}
.ts-lang-btn:hover,.ts-lang-btn[aria-expanded="true"]{border-color:#6F5CFF;box-shadow:0 4px 14px rgba(111,92,255,.16)}
.ts-lang-btn:focus-visible,.ts-lang-menu a:focus-visible{outline:3px solid rgba(111,92,255,.45);outline-offset:2px}
.ts-lang-ico{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px 10px 10px 4px;background:rgba(111,92,255,.12);color:#6F5CFF;flex:none}
.ts-lang-cur{letter-spacing:.02em;white-space:nowrap}
.ts-lang-chev{flex:none;color:var(--ink-soft,#5a6078);transition:transform .15s ease}
.ts-lang-btn[aria-expanded="true"] .ts-lang-chev{transform:rotate(180deg)}
.ts-lang-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:1200;min-width:230px;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line,#e2dff3);border-radius:16px;box-shadow:0 16px 44px rgba(60,40,140,.2)}
.ts-lang-menu[hidden]{display:none}
.ts-lang-menu li{margin:0;padding:0;list-style:none}
.ts-lang-menu a{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 10px;border-radius:12px;color:var(--ink,var(--ts-ink,#1f2340))!important;text-decoration:none!important;font:600 .95rem/1.2 var(--body,var(--ts-font,inherit))}
.ts-lang-menu a b{display:inline-flex;align-items:center;justify-content:center;min-width:52px;padding:5px 8px;border-radius:9px 9px 9px 3px;background:rgba(111,92,255,.1);color:#6F5CFF;font-size:.78rem;font-weight:800;letter-spacing:.03em}
.ts-lang-menu a:hover{background:rgba(111,92,255,.07)}
.ts-lang-menu a[aria-current]{background:rgba(111,92,255,.12)}
.ts-lang-menu a[aria-current] b{background:#6F5CFF;color:#fff}
header .hdr-right{display:flex;align-items:center;gap:10px}
.container-nav .ts-lang{margin-left:10px}
.container-nav p{display:flex;align-items:center;gap:10px;margin:0;flex-wrap:wrap}
@media(max-width:420px){.ts-lang-cur{display:none}.ts-lang-btn{padding-right:10px}}
@media(prefers-reduced-motion:reduce){.ts-lang-btn,.ts-lang-chev{transition:none}}

/* 2.39.3 – Symbole statt Emojis: Umrissicons als Maske (Farbe = Textfarbe). Verwendung: <span class="tsi tsi-lock" aria-hidden="true"></span> */
.tsi{display:inline-block;width:1.15em;height:1.15em;flex:0 0 auto;vertical-align:-.2em;background:currentColor;-webkit-mask:var(--tsi) center/contain no-repeat;mask:var(--tsi) center/contain no-repeat}
.tsi-lock{--tsi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='3'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}
.tsi-warn{--tsi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9.5 17h-19z'/%3E%3Cpath d='M12 10v4M12 17.3h.01'/%3E%3C/svg%3E")}
.tsi-key{--tsi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M11 12l9-9M16 7l3 3'/%3E%3C/svg%3E")}
.tsi-shield{--tsi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}
.tsi-flask{--tsi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6L4.5 19a1.5 1.5 0 0 0 1.3 2.2h12.4a1.5 1.5 0 0 0 1.3-2.2L14 9V3'/%3E%3Cpath d='M7.5 15h9'/%3E%3C/svg%3E")}
.tsi-check{--tsi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8 12.5l2.7 2.7L16.3 9'/%3E%3C/svg%3E")}
.tsi-user{--tsi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E")}
.tsi-calendar{--tsi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E")}
.tsi-clip{--tsi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5l-8 8a5 5 0 0 1-7-7l8.5-8.5a3.3 3.3 0 0 1 4.7 4.7L9.5 17a1.7 1.7 0 0 1-2.4-2.4L14 7.7'/%3E%3C/svg%3E")}
.tsi-star{--tsi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.8l-5.2 2.8 1-5.8-4.3-4.1 5.9-.9z'/%3E%3C/svg%3E")}
.tsi-eye{--tsi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.beta-notice .beta-icon:empty{display:inline-block;width:1.25em;height:1.25em;background:currentColor;-webkit-mask:var(--tsi) center/contain no-repeat;mask:var(--tsi) center/contain no-repeat;--tsi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6L4.5 19a1.5 1.5 0 0 0 1.3 2.2h12.4a1.5 1.5 0 0 0 1.3-2.2L14 9V3'/%3E%3Cpath d='M7.5 15h9'/%3E%3C/svg%3E")}
.pro-badge::before,.pro-note::before{content:"";display:inline-block;width:1em;height:1em;margin-right:.4em;vertical-align:-.15em;background:currentColor;-webkit-mask:var(--tsi) center/contain no-repeat;mask:var(--tsi) center/contain no-repeat;--tsi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.8l-5.2 2.8 1-5.8-4.3-4.1 5.9-.9z'/%3E%3C/svg%3E")}
.pro-note::before{flex:0 0 auto;margin-top:.2em}
@media (prefers-reduced-motion:no-preference){.tsi{transition:transform .25s ease}.btn:hover .tsi,.note:hover>.tsi,.warn:hover>.tsi{transform:scale(1.08)}}

/* ===== Organisation (2.46.0) ===== */
.org-root{margin-top:26px}
.org-root:empty{display:none}
.org-box{margin:0}
.org-h{margin:0 0 10px}
.org-tabs{display:flex;gap:6px;margin:0 0 14px;border-bottom:1px solid var(--line,#e5e2f5)}
.org-tab{appearance:none;border:0;background:none;padding:9px 14px;font:inherit;font-weight:700;color:var(--ink-soft,#5b5875);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px}
.org-tab[aria-selected="true"]{color:var(--accent,#6f5cff);border-bottom-color:var(--accent,#6f5cff)}
.org-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.org-chip{appearance:none;border:1px solid var(--line,#e5e2f5);background:#fff;border-radius:999px;padding:7px 13px;font:inherit;font-size:.9rem;cursor:pointer;color:inherit}
.org-chip.on{background:var(--accent,#6f5cff);border-color:var(--accent,#6f5cff);color:#fff}
.org-folders .org-add{border-style:dashed}
.org-folder-tools{margin:0 0 12px;gap:8px}
.org-items .acc-item{margin-bottom:10px}
.org-items select,.org-save select{width:auto}
.org-items select,.org-new input,.org-addlink input,.org-link input{min-width:0;font:inherit;padding:8px 10px;border:1px solid var(--line,#d9d5ee);border-radius:10px;background:#fff}
.org-addlink{margin-top:18px}
.org-addlink .row,.org-new,.org-link .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.org-addlink input,.org-new input,.org-link input{flex:1 1 220px}
.org-admin h4,.org-addlink h4{margin:20px 0 8px}
.org-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:8px 0}
.org-row-actions{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.org-member{border-top:1px solid var(--line,#e5e2f5);padding:4px 0 10px}
.org-teamchecks{display:flex;flex-wrap:wrap;gap:6px 16px;padding:2px 0 4px}
.org-check{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:.92rem}
.org-link{margin:8px 0 4px}
.org-invite-out{margin-top:10px}
.org-danger{margin-top:26px;padding-top:14px;border-top:1px dashed var(--line,#e5e2f5)}
.org-priv{margin-top:18px}
.org-setup summary{cursor:pointer;font-weight:700}
.org-inv{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px}
.org-save{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.org-save select{font:inherit;padding:7px 10px;border:1px solid var(--line,#d9d5ee);border-radius:10px;background:#fff;max-width:100%}
@media(max-width:600px){.org-row-actions{margin-left:0}.org-tab{padding:9px 10px}}

/* Seit 2.48.0: Schweber-Schild (Datenschutz-Hero). Platzhalter <div class="tsh-stage" data-tsh></div> in einer Seite; common.js füllt ihn.
   Schwebt, pulsierende Kreise, 3D-Neigung bei Maus/Touch. Reine Darstellung. */
.tsh-stage{position:relative;display:block;width:clamp(150px,36vw,220px);aspect-ratio:1/1.05;margin:0 auto 12px;perspective:700px;touch-action:pan-y;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;cursor:pointer;clear:none}
@media(min-width:721px){.tsh-stage{float:right;width:clamp(180px,24vw,260px);margin:0 0 12px 28px}}
.tsh-float{position:relative;width:100%;height:100%;display:grid;place-items:center;animation:tshFloat 5.2s ease-in-out infinite}
.tsh-tilt{position:relative;width:100%;height:100%;display:grid;place-items:center;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform}
.tsh-ring{position:absolute;left:50%;top:50%;width:76%;aspect-ratio:1;margin:-38% 0 0 -38%;border-radius:50%;border:2px solid rgba(130,110,255,.65);opacity:0;animation:tshPulse 3.6s ease-out infinite;transform:translateZ(-40px)}
.tsh-ring.r2{animation-delay:1.2s}.tsh-ring.r3{animation-delay:2.4s}
.tsh-glow{position:absolute;left:50%;top:50%;width:72%;aspect-ratio:1;margin:-36% 0 0 -36%;border-radius:50%;background:radial-gradient(circle,rgba(142,124,255,.5),transparent 68%);transform:translateZ(-60px);animation:tshGlow 3.6s ease-in-out infinite}
.tsh-shield{position:relative;width:58%;height:auto;transform:translateZ(46px);filter:drop-shadow(0 14px 18px rgba(40,25,140,.45))}
@keyframes tshFloat{0%,100%{transform:translateY(-6px)}50%{transform:translateY(8px)}}
@keyframes tshPulse{0%{transform:translateZ(-40px) scale(.62);opacity:.8}100%{transform:translateZ(-40px) scale(1.5);opacity:0}}
@keyframes tshGlow{0%,100%{opacity:.65;transform:translateZ(-60px) scale(.94)}50%{opacity:1;transform:translateZ(-60px) scale(1.08)}}
@media(prefers-reduced-motion:reduce){.tsh-float,.tsh-ring,.tsh-glow{animation:none}.tsh-ring{opacity:.3}.tsh-ring.r2,.tsh-ring.r3{display:none}.tsh-tilt{transform:none!important}}

/* Seit 2.48.1: Handy-Feinschliff für die Seiten des Page Builders (Tippflächen, Lesbarkeit; reine Darstellung) */
body .ts-footer .sppb-addon-content p{font-size:.9rem;line-height:1.6}
body .ts-footer .sppb-addon-content p a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;margin:0}
body .ts-badge,body .tsd-badge{font-size:.8125rem}
body .ts-server-note{font-size:.875rem}
body .tsd details>summary{display:block;min-height:44px;padding:10px 0;box-sizing:border-box;cursor:pointer}

/* ===== Seit 2.49.0: Rechtsseiten (Impressum/Datenschutz) im Page Builder – Hero, Inhaltsverzeichnis, Karten, Spalten =====
   Reine Darstellung. Inhalte stehen als Text-Blöcke im Page Builder; Nummern und Inhaltsverzeichnis entstehen automatisch.
   Aufbau je Seite: Zeile 1 = Text-Block mit .tsh (Hero), Zeile 2 = zwei Spalten: links Block mit [data-tsl-toc], rechts Text-Blöcke mit Klasse tsl-card. */
/* Breite Ansicht: Abschnitt wird über die Seitenspalte hinaus bis fast an den Bildschirmrand verbreitert (Handy/Tablet: normale Spaltenbreite) */
@media(min-width:984px){
 .sppb-section:has(.tsh),.sppb-section:has(.tsl-card),.sppb-section:has([data-tsl-toc]){width:min(1680px,calc(100vw - 48px));margin-left:calc(50% - min(840px,calc(50vw - 24px)))!important}
}
main:has(.tsh),main:has(.tsl-card),.sp-page-builder:has(.tsh),.sp-page-builder:has(.tsl-card),.container-component:has(.tsh){min-width:0}
.tsl-toc{margin:0 0 20px}
.sppb-section:has(.tsh),.sppb-section:has(.tsl-card),.sppb-section:has([data-tsl-toc]){max-width:none}
.sppb-section:has(.tsh) .sppb-row-container,.sppb-section:has(.tsl-card) .sppb-row-container,.sppb-section:has([data-tsl-toc]) .sppb-row-container{max-width:none;padding-left:0;padding-right:0}
.sppb-section:has(.tsh) .sppb-column,.sppb-section:has(.tsl-card) .sppb-column,.sppb-section:has([data-tsl-toc]) .sppb-column{padding-left:0;padding-right:0}
.tsh{--a:#8E7CFF;--b:#5B43E8;--d1:#3A2AA8;--d2:#1B1245;position:relative;overflow:hidden;isolation:isolate;margin:0 0 28px;padding:clamp(28px,5vw,56px) clamp(20px,5vw,56px);border-radius:28px;color:#fff;background:radial-gradient(120% 120% at 15% 0%,var(--d1) 0%,var(--d2) 72%);box-shadow:0 18px 50px -22px rgba(60,40,200,.65);font-family:inherit}
.tsh *{box-sizing:border-box}
.tsh::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 60% at 85% 20%,rgba(142,124,255,.35),transparent 70%),radial-gradient(40% 50% at 5% 100%,rgba(120,90,255,.25),transparent 70%)}
.tsh-in{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr);gap:clamp(16px,4vw,48px);align-items:center;max-width:1180px;margin:0 auto}
.tsh-txt{min-width:0}
.tsh .tsh-kick{display:inline-block;margin:0 0 12px;padding:5px 14px;border-radius:99px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:#fff}
.tsh h1{margin:0 0 12px;color:#fff;font-size:clamp(1.6rem,3.5vw,2.35rem);line-height:1.1;letter-spacing:-.02em;background:linear-gradient(90deg,#fff,#D4CCFF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;overflow-wrap:break-word;hyphens:manual}
.tsh .tsh-zk{margin:0 0 18px;font-size:.98rem;line-height:1.6;color:rgba(255,255,255,.84);max-width:56ch}
.tsh .tsh-zk strong{color:#fff}
.tsh .tsh-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tsh .tsh-chips li{margin:0;padding:6px 13px;border-radius:99px;font-size:.84rem;font-weight:600;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff}
.tsh .tsh-chips li::before{content:"✓";margin-right:6px;color:#B9ACFF}
.tsh .tsh-stage{float:none;margin:0;justify-self:center;width:clamp(150px,30vw,300px);aspect-ratio:1/1.05;display:grid;place-items:center}
.tsh .tsh-shield{width:56%}
.tsh .tsh-berg{width:68%;position:relative;transform:translateZ(46px);filter:drop-shadow(0 16px 22px rgba(10,5,60,.55))}
.tsh .tsh-ring{border-color:rgba(170,150,255,.6)}
.tsh-fs{animation:tshFs 2.3s ease-in-out infinite;animation-delay:calc(var(--i)*-.07s)}
@keyframes tshFs{0%,100%{transform:translateY(calc(var(--a)*-1.3px))}50%{transform:translateY(calc(var(--a)*1.3px))}}
@media(max-width:720px){
 .tsh{border-radius:22px;padding-left:16px;padding-right:16px}
 .tsh-in{grid-template-columns:1fr;text-align:center}
 .tsh h1{font-size:clamp(1.1rem,5.7vw,2.1rem)}
 .tsh .tsh-stage{order:-1;width:clamp(140px,44vw,210px)}
 .tsh .tsh-zk{margin-left:auto;margin-right:auto}
 .tsh .tsh-chips{justify-content:center}
}
@media(prefers-reduced-motion:reduce){.tsh-fs{animation:none}}
/* Karten */
.sppb-column-addons:has(.tsl-card){column-width:26rem;column-gap:24px;orphans:3;widows:3;counter-reset:tsl}
.sppb-column-addons:has(.tsl-card)>*{break-inside:avoid;-webkit-column-break-inside:avoid}
.sppb-addon.tsl-card{position:relative;overflow:hidden;background:rgba(255,255,255,.82);border:1px solid rgba(111,92,255,.16);border-radius:20px;padding:clamp(20px,4vw,32px);margin:0 0 24px;box-shadow:0 12px 36px rgba(45,35,95,.07);transition:transform .25s ease,box-shadow .25s ease}
.sppb-addon.tsl-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#8E7CFF,#5B43E8);opacity:.7}
@media(hover:hover){.sppb-addon.tsl-card:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(45,35,95,.11)}}
@media(prefers-reduced-motion:reduce){.sppb-addon.tsl-card{transition:none}.sppb-addon.tsl-card:hover{transform:none}}
.tsl-card h2{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:1.15rem;line-height:1.3;scroll-margin-top:90px}
.tsl-card h2::before{counter-increment:tsl;content:counter(tsl);flex:0 0 auto;display:inline-grid;place-items:center;min-width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,#8E7CFF,#5B43E8);color:#fff;font-size:.95rem;font-weight:700;box-shadow:0 6px 14px -6px rgba(91,67,232,.6)}
.tsl-card h3{margin:20px 0 10px;font-size:1rem;line-height:1.3}
.tsl-card.tsl-sub h3{margin-top:0}
.tsl-card h3:first-child{margin-top:0}
.tsl-card .sppb-addon-content p,.tsl-card .sppb-addon-content li{line-height:1.65}
.tsl-card ul{margin:0 0 16px 22px;padding:0}
.tsl-card li{margin-bottom:6px}
/* Inhaltsverzeichnis (wird aus den Überschriften der Karten erzeugt) */
.tsl-toc details{background:rgba(255,255,255,.82);border:1px solid rgba(111,92,255,.16);border-radius:18px;padding:4px 16px;box-shadow:0 8px 24px rgba(45,35,95,.06)}
.tsl-toc summary{cursor:pointer;font-weight:700;font-size:1rem;padding:12px 0;min-height:44px;box-sizing:border-box;color:inherit;list-style:none}
.tsl-toc summary::-webkit-details-marker{display:none}
.tsl-toc summary::after{content:"▾";float:right;color:#6F5CFF}
.tsl-toc ol{list-style:none;margin:0;padding:0 0 10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px 16px}
.tsl-toc li{margin:0}
.tsl-toc a{display:flex;gap:10px;align-items:center;padding:8px 6px;border-radius:10px;color:#596179;text-decoration:none;font-size:.93rem;line-height:1.35;min-height:44px}
.tsl-toc a b{flex:0 0 auto;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:8px;background:rgba(111,92,255,.12);color:#6F5CFF;font-size:.8rem}
.tsl-toc a:hover,.tsl-toc a:focus-visible{background:rgba(111,92,255,.1);color:inherit}
.sppb-section:has([data-tsl-toc]) .sppb-addon-wrapper{margin:0}
@media(max-width:983px){.sppb-column-addons:has(.tsl-card){column-width:auto;column-count:1}}
@media(min-width:1180px){
 /* Spalten des Page Builders (setzen sonst je 100 %): links 25 % Inhaltsverzeichnis (klebt beim Scrollen), rechts 75 % Karten */
 .sppb-section:has([data-tsl-toc]) .sppb-row{flex-wrap:nowrap}
 .sppb-section:has([data-tsl-toc]) .sppb-row-column:has([data-tsl-toc]){flex:0 0 25%!important;max-width:25%!important;width:25%!important;padding-right:24px!important;box-sizing:border-box;position:sticky!important;top:84px;align-self:flex-start!important}
 .sppb-section:has([data-tsl-toc]) .sppb-row-column:has(.tsl-card){flex:0 0 75%!important;max-width:75%!important;width:75%!important}
 .sppb-section .tsl-toc{position:static!important;top:auto!important}
 .tsl-toc summary{cursor:default;pointer-events:none}.tsl-toc summary::after{content:none}
 .tsl-toc ol{display:block}
}

/* Seit 2.51.1: Einheitliche Fusszeile (Modul im Footer-Bereich) – Desktop mittig und in Inhaltsbreite statt linksbündig/schmal (reine Darstellung) */
footer.container-footer .mod-sppagebuilder{width:100%;max-width:1040px;margin-inline:auto}