/* Active only during the 1000 ms automatic BIO-view pause. Input listeners and
 * the RAF position guard remain the source of truth; these standard properties
 * additionally stop overscroll chaining on desktop and mobile browsers. */
html.tooloon-bio-scroll-input-locked,
body.tooloon-bio-scroll-input-locked {
    overscroll-behavior: none !important;
}

body.tooloon-bio-scroll-input-locked {
    touch-action: none !important;
}

.cover-language-switcher {
    text-align: center;
    color: var(--tooloon-bio-text-color, inherit);
    font-size: 20px;
    font-weight: 500;
}


/* The biography header is one unit: language switcher plus active heading.
 * The configured Header distance is a runtime collision boundary, not permanent
 * document spacing. JavaScript activates it only for the one-time automatic BIO
 * view and later when the button Header reaches that boundary. The placeholder
 * preserves only the real fixed Header height. */
.tooloon-bio-controls-placeholder {
    display: block;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
}

.tooloon-bio-controls-frame {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 2;
    width: 100%;
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    isolation: isolate;
}

.cover-language-switcher.tooloon-bio-header-fixed .tooloon-bio-controls-frame {
    position: fixed !important;
    top: var(--tooloon-bio-fixed-top, var(--tooloon-bio-header-offset, 0px)) !important;
    left: var(--tooloon-bio-fixed-left, 0px) !important;
    width: var(--tooloon-bio-fixed-width, 100%) !important;
    margin-top: 0 !important;
    transform: translate3d(0, var(--tooloon-bio-header-end-shift, 0px), 0) !important;
    -webkit-transform: translate3d(0, var(--tooloon-bio-header-end-shift, 0px), 0) !important;
}

/* Hidden controls keep their runtime nodes. Only the dedicated FX3 viewport
 * below removes them from text flow while the credits are active. */
.tooloon-bio-controls-frame.tooloon-bio-header-menu-hidden {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.cover-language-switcher[data-active-layout-effect="fx2"] .tooloon-bio-text-stage {
    overflow: hidden;
    flex: 0 0 auto;
    box-sizing: border-box;
}


.language-buttons {
    position: relative;
    z-index: 3;
    margin-bottom: 20px;
}

/* Custom button design is scoped so Theme Standard can remove it completely. */
.tooloon-bio-plugin .cover-language-switcher.tooloon-buttons-custom-design .language-buttons button {
    all: unset !important;
    display: inline-block !important;
    padding: 6px 12px !important;
    margin: 0 4px !important;
    border: 1px solid var(--tooloon-button-border, #ffffff) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: visible !important;
    border-radius: var(--tooloon-button-radius, 4px) !important;
    -webkit-border-radius: var(--tooloon-button-radius, 4px) !important;
    background-image: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    background: var(--tooloon-button-background, transparent) !important;
    background-color: var(--tooloon-button-background, transparent) !important;
    background-clip: padding-box !important;
    color: var(--tooloon-button-text, #ffffff) !important;
    cursor: pointer !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 22px !important;
    letter-spacing: normal !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: background-color 160ms ease-in-out, border-color 160ms ease-in-out, color 160ms ease-in-out !important;
}


.tooloon-bio-plugin .cover-language-switcher.tooloon-buttons-custom-design .language-buttons button::before,
.tooloon-bio-plugin .cover-language-switcher.tooloon-buttons-custom-design .language-buttons button::after,
.tooloon-bio-plugin .cover-language-switcher.tooloon-buttons-custom-design .tooloon-bio-read-toggle::before,
.tooloon-bio-plugin .cover-language-switcher.tooloon-buttons-custom-design .tooloon-bio-read-toggle::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

.tooloon-bio-plugin .cover-language-switcher.tooloon-buttons-custom-design .language-buttons button[aria-pressed="false"]:hover,
.tooloon-bio-plugin .cover-language-switcher.tooloon-buttons-custom-design .language-buttons button[aria-pressed="false"]:focus-visible {
    background: var(--tooloon-button-background, transparent) !important;
    background-color: var(--tooloon-button-background, transparent) !important;
    background-image: linear-gradient(var(--tooloon-button-hover-overlay, rgba(252,142,45,1)), var(--tooloon-button-hover-overlay, rgba(252,142,45,1))) !important;
    border-color: var(--tooloon-button-hover-border, var(--tooloon-button-border, #ffffff)) !important;
    color: var(--tooloon-button-hover-text, var(--tooloon-button-text, #ffffff)) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.tooloon-bio-plugin .cover-language-switcher.tooloon-buttons-custom-design .language-buttons button[aria-pressed="false"]:active,
.tooloon-bio-plugin .cover-language-switcher.tooloon-buttons-custom-design .language-buttons button.active,
.tooloon-bio-plugin .cover-language-switcher.tooloon-buttons-custom-design .language-buttons button[aria-pressed="true"] {
    background: var(--tooloon-button-background, transparent) !important;
    background-color: var(--tooloon-button-background, transparent) !important;
    background-image: linear-gradient(var(--tooloon-button-active-overlay, rgba(252,142,45,1)), var(--tooloon-button-active-overlay, rgba(252,142,45,1))) !important;
    border-color: var(--tooloon-button-active-border, var(--tooloon-button-border, #ffffff)) !important;
    color: var(--tooloon-button-active-text, var(--tooloon-button-text, #ffffff)) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.tooloon-bio-plugin .cover-language-switcher.tooloon-buttons-custom-design .language-buttons button:focus-visible {
    outline: 1px solid var(--tooloon-button-border, #ffffff) !important;
    outline-offset: 2px !important;
}

/* Fixed area: it never belongs to the animated language body. */
.tooloon-bio-fixed-heading {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 1px;
    color: var(--tooloon-bio-text-color, inherit);
}

.tooloon-bio-heading-language {
    width: 100%;
    color: inherit;
}

.tooloon-bio-heading-language[hidden] {
    display: none !important;
}

.tooloon-bio-heading-language.active {
    display: block !important;
}

.tooloon-bio-heading-language > :first-child {
    margin-top: 0;
}

.tooloon-bio-heading-language > :last-child {
    margin-bottom: 0;
}

/* The Bio text keeps its measured layout but is not painted before the first
 * real FX starts. The language/heading header and all header calculations stay
 * active. JavaScript removes this class synchronously when startEffect() runs. */
.cover-language-switcher.tooloon-bio-text-awaiting-fx .cover-language-text {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.tooloon-bio-text-stage {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 1px;
}

.cover-language-text {
    --tooloon-bio-panel-clip-top: 0px;
    display: none;
    color: var(--tooloon-bio-text-color, inherit);
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    clip-path: inset(var(--tooloon-bio-panel-clip-top, 0px) 0 0 0);
    -webkit-clip-path: inset(var(--tooloon-bio-panel-clip-top, 0px) 0 0 0);
}

.cover-language-text.active {
    display: block;
}

.cover-language-text,
.cover-language-text p,
.cover-language-text h1,
.cover-language-text h2,
.cover-language-text h3,
.cover-language-text h4,
.cover-language-text h5,
.cover-language-text h6,
.cover-language-text li,
.cover-language-text strong,
.cover-language-text em,
.tooloon-bio-fixed-heading,
.tooloon-bio-fixed-heading h1,
.tooloon-bio-fixed-heading h2,
.tooloon-bio-fixed-heading h3,
.tooloon-bio-fixed-heading h4,
.tooloon-bio-fixed-heading h5,
.tooloon-bio-fixed-heading h6 {
    color: inherit;
}

.cover-language-text a {
    color: var(--tooloon-bio-link-color, inherit);
}

.cover-language-text a:hover,
.cover-language-text a:focus {
    color: var(--tooloon-bio-link-hover-color, var(--tooloon-bio-link-color, inherit));
}

.tooloon-bio-plugin .tooloon-bio-links-underline .cover-language-text a {
    text-decoration: underline !important;
}

.tooloon-bio-plugin .tooloon-bio-links-no-underline .cover-language-text a {
    text-decoration: none !important;
}

/* The plain rules above stay unscoped/without !important on purpose, so an
 * unset colour keeps quietly inheriting the active theme. The custom
 * property is only ever present inline when the admin actually enabled a
 * custom colour (see templates/bio.php), so these attribute-gated rules
 * force it over the theme's own link/paragraph colours exactly like the
 * existing button-design overrides already do - without touching anything
 * when the feature is left off. */
.tooloon-bio-plugin .cover-language-switcher[style*="--tooloon-bio-text-color"],
.tooloon-bio-plugin .cover-language-switcher[style*="--tooloon-bio-text-color"] .tooloon-bio-fixed-heading,
.tooloon-bio-plugin .cover-language-switcher[style*="--tooloon-bio-text-color"] .cover-language-text,
.tooloon-bio-plugin .cover-language-switcher[style*="--tooloon-bio-text-color"] .cover-language-text p {
    color: var(--tooloon-bio-text-color) !important;
}

.tooloon-bio-plugin .cover-language-switcher[style*="--tooloon-bio-link-color"] .cover-language-text a {
    color: var(--tooloon-bio-link-color) !important;
}

.tooloon-bio-plugin .cover-language-switcher[style*="--tooloon-bio-link-hover-color"] .cover-language-text a:hover,
.tooloon-bio-plugin .cover-language-switcher[style*="--tooloon-bio-link-hover-color"] .cover-language-text a:focus {
    color: var(--tooloon-bio-link-hover-color) !important;
}

.tooloon-typewriter-running::after {
    content: "";
    display: inline-block;
    width: 0.08em;
    height: 1em;
    margin-left: 0.08em;
    vertical-align: -0.12em;
    background: currentColor;
    animation: tooloon-caret-blink 0.75s steps(1, end) infinite;
}

@keyframes tooloon-caret-blink {
    0%, 45% { opacity: 1; }
    46%, 100% { opacity: 0; }
}

.cover-language-text[hidden],
.cover-language-text[aria-hidden="true"] {
    display: none !important;
}

.cover-language-text.active[aria-hidden="false"] {
    display: block !important;
}

/* Central paragraph presentation for every current and future language effect.
 * Paragraph structure comes from the shared backend HTML, never from an FX. */
.tooloon-bio-plugin .cover-language-text p {
    color: var(--tooloon-bio-text-color, inherit);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 1.5em;
}

/* Short/Long Bio controls. The animated text remains inside the same language panel. */
.tooloon-bio-read-control[hidden] {
    display: none !important;
}

/* Park inactive live shortcode DOM without adding its rendered height to the
 * document. The store remains in the DOM and keeps a full content width, so
 * live nodes, event listeners and JavaScript state survive every language and
 * Short/Long FX change. The zero-height clipped box prevents parked Short/Long
 * and multilingual content from extending the page's scrollable overflow. */
.tooloon-bio-plugin .tooloon-bio-content-store {
    position: absolute !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: -100000px !important;
    display: block !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Shortcode output is treated as one live FX unit. display:contents avoids an
 * extra visual box while preserving the actual plugin DOM and functionality. */
.tooloon-bio-embedded-shortcode {
    display: contents;
}

.tooloon-bio-embedded-shortcode.tooloon-bio-shortcode-fx-hidden {
    visibility: hidden !important;
}

.tooloon-bio-animation-target {
    width: 100%;
    color: inherit;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.cover-language-text.tooloon-fx1-door-target {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

.cover-language-text.tooloon-fx5-flight-target {
    will-change: transform, opacity;
}

.cover-language-switcher.tooloon-fx5-active {
    overflow: visible !important;
}
.cover-language-switcher.tooloon-fx5-active .tooloon-bio-text-stage {
    overflow: hidden !important;
}

/* Outside the dedicated FX3 credits viewport the nearest cover/background
 * container keeps its established fluid behavior and may grow with a biography
 * taller than the browser viewport. */
.tooloon-bio-fluid-cover {
    min-height: 100vh !important;
    min-height: 100svh !important;
    height: auto !important;
    box-sizing: border-box !important;
    background-size: cover !important;
    overflow: visible !important;
    overflow-anchor: none;
}

.cover-language-switcher.tooloon-controls-layout-locked {
    overflow-anchor: none;
}

.tooloon-bio-read-control {
    margin-top: 18px;
    text-align: center;
}

.tooloon-bio-plugin .cover-language-switcher.tooloon-buttons-custom-design .tooloon-bio-read-toggle {
    all: unset !important;
    display: inline-block !important;
    padding: 6px 12px !important;
    border: 1px solid var(--tooloon-button-border, #ffffff) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: visible !important;
    border-radius: var(--tooloon-button-radius, 4px) !important;
    -webkit-border-radius: var(--tooloon-button-radius, 4px) !important;
    background-image: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    background: var(--tooloon-button-background, transparent) !important;
    background-color: var(--tooloon-button-background, transparent) !important;
    background-clip: padding-box !important;
    color: var(--tooloon-button-text, #ffffff) !important;
    cursor: pointer !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 22px !important;
    letter-spacing: normal !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: background-color 160ms ease-in-out, border-color 160ms ease-in-out, color 160ms ease-in-out !important;
}

.tooloon-bio-plugin .cover-language-switcher.tooloon-buttons-custom-design .tooloon-bio-read-toggle:hover,
.tooloon-bio-plugin .cover-language-switcher.tooloon-buttons-custom-design .tooloon-bio-read-toggle:focus-visible {
    border-color: var(--tooloon-button-hover-border, var(--tooloon-button-border, #ffffff)) !important;
    background: var(--tooloon-button-background, transparent) !important;
    background-color: var(--tooloon-button-background, transparent) !important;
    background-image: linear-gradient(var(--tooloon-button-hover-overlay, rgba(252,142,45,1)), var(--tooloon-button-hover-overlay, rgba(252,142,45,1))) !important;
    color: var(--tooloon-button-hover-text, var(--tooloon-button-text, #ffffff)) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.tooloon-bio-plugin .cover-language-switcher.tooloon-buttons-custom-design .tooloon-bio-read-toggle:active {
    border-color: var(--tooloon-button-active-border, var(--tooloon-button-border, #ffffff)) !important;
    background: var(--tooloon-button-background, transparent) !important;
    background-color: var(--tooloon-button-background, transparent) !important;
    background-image: linear-gradient(var(--tooloon-button-active-overlay, rgba(252,142,45,1)), var(--tooloon-button-active-overlay, rgba(252,142,45,1))) !important;
    color: var(--tooloon-button-active-text, var(--tooloon-button-text, #ffffff)) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.tooloon-bio-plugin .cover-language-switcher.tooloon-buttons-custom-design .tooloon-bio-read-toggle:focus-visible {
    outline: 1px solid var(--tooloon-button-border, #ffffff) !important;
    outline-offset: 2px !important;
}

/* Editor layouts shared by every language, Short/Long Bio and current/future FX. */
.tooloon-bio-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
}
.tooloon-bio-layout.tooloon-bio-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tooloon-bio-layout.tooloon-bio-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tooloon-bio-column,
.tooloon-bio-full-width { min-width: 0; box-sizing: border-box; }
.tooloon-bio-layout > .tooloon-bio-full-width,
.tooloon-bio-full-width { grid-column: 1 / -1; width: 100%; }
.tooloon-bio-animation-target img {
    max-width: 100%;
    height: auto;
}

/* Bildausrichtung im Bio-Text.
 *
 * WordPress und die meisten Themes setzen .alignleft/.alignright mit float, der
 * Folgetext umfliesst das Bild dann. Auf tooloon.com wurde am 2026-08-29 live
 * gemessen: .alignleft = float:left + 20px Abstand rechts, .alignright =
 * float:right + 20px Abstand links. Fuer die Biografie ist auf ausdruecklichen
 * Nutzerwunsch das Blockverhalten gewollt: Das Bild bleibt auf einer eigenen
 * Zeile und wird nur nach links, in die Mitte oder nach rechts gerueckt.
 * Deshalb wird der Float hier bewusst mit !important abgeraeumt - die
 * Theme-Regeln stehen sonst gleichauf oder hoeher. Die Regeln gelten NUR
 * innerhalb des Bio-Textes, ausserhalb bleibt das Theme unveraendert. */
.tooloon-bio-animation-target img.alignleft,
.tooloon-bio-animation-target img.aligncenter,
.tooloon-bio-animation-target img.alignright,
.tooloon-bio-animation-target img.alignnone,
.tooloon-bio-animation-target figure.alignleft,
.tooloon-bio-animation-target figure.aligncenter,
.tooloon-bio-animation-target figure.alignright,
.tooloon-bio-animation-target figure.alignnone,
.tooloon-bio-animation-target .wp-caption.alignleft,
.tooloon-bio-animation-target .wp-caption.aligncenter,
.tooloon-bio-animation-target .wp-caption.alignright,
.tooloon-bio-animation-target .wp-caption.alignnone {
    display: block !important;
    float: none !important;
    clear: both !important;
    max-width: 100% !important;
    height: auto;
}
.tooloon-bio-animation-target figure.alignleft,
.tooloon-bio-animation-target figure.aligncenter,
.tooloon-bio-animation-target figure.alignright,
.tooloon-bio-animation-target figure.alignnone,
.tooloon-bio-animation-target .wp-caption.alignleft,
.tooloon-bio-animation-target .wp-caption.aligncenter,
.tooloon-bio-animation-target .wp-caption.alignright,
.tooloon-bio-animation-target .wp-caption.alignnone {
    width: -moz-fit-content;
    width: fit-content;
}
.tooloon-bio-animation-target img.alignleft,
.tooloon-bio-animation-target figure.alignleft,
.tooloon-bio-animation-target .wp-caption.alignleft,
.tooloon-bio-animation-target img.alignnone,
.tooloon-bio-animation-target figure.alignnone,
.tooloon-bio-animation-target .wp-caption.alignnone {
    margin-left: 0 !important;
    margin-right: auto !important;
}
.tooloon-bio-animation-target img.aligncenter,
.tooloon-bio-animation-target figure.aligncenter,
.tooloon-bio-animation-target .wp-caption.aligncenter {
    margin-left: auto !important;
    margin-right: auto !important;
}
.tooloon-bio-animation-target img.alignright,
.tooloon-bio-animation-target figure.alignright,
.tooloon-bio-animation-target .wp-caption.alignright {
    margin-left: auto !important;
    margin-right: 0 !important;
}
.tooloon-bio-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.tooloon-bio-table td,
.tooloon-bio-table th {
    vertical-align: top;
    padding: 8px;
}



/* FX 4 – Book: the visible biography is split vertically at 50%. The page
 * half folds across the centre; its reverse side is deliberately empty. */
.tooloon-fx4-book-overlay {
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
    width: 100%;
    overflow: visible;
    perspective: 1600px;
    -webkit-perspective: 1600px;
    pointer-events: none;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    contain: layout paint style;
}
.tooloon-fx4-book-half {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
.tooloon-fx4-book-half-left { left: 0; }
.tooloon-fx4-book-half-right { right: 0; }
.tooloon-fx4-book-page {
    z-index: 2;
    box-shadow: 0 0 22px rgba(0, 0, 0, 0.22);
}
.tooloon-fx4-book-stationary { z-index: 1; }
.tooloon-fx4-book-rtl .tooloon-fx4-book-page {
    transform-origin: 0 50%;
    -webkit-transform-origin: 0 50%;
}
.tooloon-fx4-book-ltr .tooloon-fx4-book-page {
    transform-origin: 100% 50%;
    -webkit-transform-origin: 100% 50%;
}
.tooloon-fx4-book-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
.tooloon-fx4-book-front { transform: rotateY(0deg); -webkit-transform: rotateY(0deg); }
.tooloon-fx4-book-back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    background: rgba(255, 255, 255, 0.035);
}
@supports (background: color-mix(in srgb, white 5%, transparent)) {
    .tooloon-fx4-book-back { background: color-mix(in srgb, currentColor 5%, transparent); }
}
.tooloon-fx4-book-content-clone {
    margin: 0 !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* FX 3: continuous cinema-credit viewport and independent mini controls. */
.cover-language-switcher.tooloon-fx3-active .tooloon-bio-text-stage {
    position: relative;
    height: min(65vh, 720px);
    min-height: 320px;
    overflow: hidden;
}
.cover-language-switcher.tooloon-fx3-active .cover-language-text.active {
    position: relative;
    height: 100%;
    overflow: hidden;
}
.cover-language-switcher.tooloon-fx3-active .tooloon-bio-animation-target {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}
.cover-language-switcher.tooloon-fx3-active .tooloon-bio-read-control {
    position: static;
    z-index: auto;
    margin: 22px 0;
    pointer-events: auto;
}
.cover-language-switcher.tooloon-fx3-active .tooloon-bio-read-control-fx3-start { margin-top: 0; margin-bottom: 22px; }
.cover-language-switcher.tooloon-fx3-active .tooloon-bio-read-control-fx3-end { margin-top: 22px; margin-bottom: 0; }
.cover-language-switcher.tooloon-fx3-active .tooloon-bio-read-toggle { pointer-events: auto; }

/* Schreibweise der Mehr lesen/Weniger lesen-Beschriftung.
 *
 * Gilt nur fuer diesen einen Button, nicht fuer die Sprachbuttons. Die
 * gespeicherte Beschriftung aus den Spracheinstellungen bleibt unveraendert,
 * nur die Darstellung wird umgestellt. !important ist noetig, weil Themes ihren
 * Buttons haeufig selbst ein text-transform geben. Ohne gesetzte Klasse
 * (Auswahl "Normal") gibt es hier keine Regel, dann gilt weiter das Theme.
 *
 * Die Selektoren tragen bewusst den Praefix "html body" und nennen zusaetzlich
 * beide Button-Design-Zustaende. Grund: Die Regel fuer das eigene Button-Design
 * (weiter oben in dieser Datei) setzt fuer denselben Button
 * "text-transform: none !important" bei GLEICHER Spezifitaet. Ohne den Praefix
 * gewinnt die Schreibweise nur ueber die Reihenfolge im Stylesheet - und die
 * ist nicht garantiert, sobald ein Cache- oder Optimierungs-Plugin CSS
 * zusammenfasst, minifiziert oder umsortiert. Mit dem Praefix gewinnt sie ueber
 * die Spezifitaet und damit unabhaengig von Reihenfolge UND unabhaengig davon,
 * ob das Theme-Button-Design an oder aus ist. Dasselbe Muster nutzt diese Datei
 * bereits fuer das FX-3-Menue. */
html body .tooloon-bio-plugin .cover-language-switcher.tooloon-bio-read-toggle-lowercase .tooloon-bio-read-toggle,
html body .tooloon-bio-plugin .cover-language-switcher.tooloon-buttons-custom-design.tooloon-bio-read-toggle-lowercase .tooloon-bio-read-toggle,
html body .tooloon-bio-plugin .cover-language-switcher.tooloon-buttons-theme-default.tooloon-bio-read-toggle-lowercase .tooloon-bio-read-toggle {
    text-transform: lowercase !important;
}
html body .tooloon-bio-plugin .cover-language-switcher.tooloon-bio-read-toggle-uppercase .tooloon-bio-read-toggle,
html body .tooloon-bio-plugin .cover-language-switcher.tooloon-buttons-custom-design.tooloon-bio-read-toggle-uppercase .tooloon-bio-read-toggle,
html body .tooloon-bio-plugin .cover-language-switcher.tooloon-buttons-theme-default.tooloon-bio-read-toggle-uppercase .tooloon-bio-read-toggle {
    text-transform: uppercase !important;
}
.tooloon-bio-fx3-menu,
.tooloon-bio-fx3-menu[hidden] {
    display: none !important;
}
.cover-language-switcher.tooloon-fx3-active .tooloon-bio-fx3-menu:not([hidden]) {
    display: flex !important;
}
.tooloon-bio-fx3-menu {
    position: fixed;
    z-index: 99999;
    flex-direction: column;
    gap: 4px;
    width: var(--tooloon-fx3-menu-size, 44px);
    padding: 4px;
    border-radius: 6px;
    background: var(--tooloon-fx3-menu-background, transparent);
    box-sizing: border-box;
}
.tooloon-bio-fx3-menu button {
    display: grid !important;
    place-items: center !important;
    position: relative !important;
    width: 100% !important;
    height: calc(var(--tooloon-fx3-menu-size, 44px) - 8px) !important;
    aspect-ratio: 1 / 1;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid currentColor !important;
    border-radius: 4px !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--tooloon-fx3-menu-color, #ffffff) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    font-family: inherit !important;
    font-size: calc(var(--tooloon-fx3-menu-size, 44px) * 0.46) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-align: center !important;
    text-decoration: none !important;
    text-indent: 0 !important;
    text-orientation: mixed !important;
    text-shadow: none !important;
    text-transform: none !important;
    writing-mode: horizontal-tb !important;
    overflow: hidden !important;
    box-shadow: none !important;
    cursor: pointer;
}
html body .tooloon-bio-plugin .cover-language-switcher .tooloon-bio-fx3-menu::before,
html body .tooloon-bio-plugin .cover-language-switcher .tooloon-bio-fx3-menu::after,
html body .tooloon-bio-plugin .cover-language-switcher .tooloon-bio-fx3-menu button::before,
html body .tooloon-bio-plugin .cover-language-switcher .tooloon-bio-fx3-menu button::after {
    content: none !important;
    display: none !important;
}
.tooloon-bio-fx3-menu button:hover,
.tooloon-bio-fx3-menu button:focus-visible,
.tooloon-bio-fx3-menu button[aria-pressed="true"] {
    background: color-mix(in srgb, currentColor 22%, transparent);
}
@supports not (background: color-mix(in srgb, white 20%, transparent)) {
    .tooloon-bio-fx3-menu button:hover,
    .tooloon-bio-fx3-menu button:focus-visible,
    .tooloon-bio-fx3-menu button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.18); }
}
.tooloon-bio-fx3-position-right-top { top: 16%; right: 16px; }
.tooloon-bio-fx3-position-right-middle { top: 50%; right: 16px; transform: translateY(-50%); }
.tooloon-bio-fx3-position-right-bottom { right: 16px; bottom: 16%; }
.tooloon-bio-fx3-position-left-top { top: 16%; left: 16px; }
.tooloon-bio-fx3-position-left-middle { top: 50%; left: 16px; transform: translateY(-50%); }
.tooloon-bio-fx3-position-left-bottom { bottom: 16%; left: 16px; }

@media (max-width: 782px) {
    .tooloon-bio-layout.tooloon-bio-columns-2,
    .tooloon-bio-layout.tooloon-bio-columns-3 { grid-template-columns: minmax(0, 1fr); }
    .cover-language-switcher.tooloon-fx3-active .tooloon-bio-text-stage {
        height: 60vh;
        min-height: 280px;
    }
    .tooloon-bio-fx3-position-right-top,
    .tooloon-bio-fx3-position-right-middle,
    .tooloon-bio-fx3-position-right-bottom { right: 8px; }
    .tooloon-bio-fx3-position-left-top,
    .tooloon-bio-fx3-position-left-middle,
    .tooloon-bio-fx3-position-left-bottom { left: 8px; }
}

/* Only FX3 owns a browser-bound credits viewport. JavaScript stores the real
 * remaining height after the Cover has been aligned below the site/plugin
 * Header, so the Cover ends at the visible browser edge instead of one full
 * viewport below its own document position. */
.tooloon-bio-fluid-cover.tooloon-bio-fx3-viewport-cover {
    height: var(--tooloon-bio-fx3-viewport-height, 100vh) !important;
    min-height: var(--tooloon-bio-fx3-viewport-height, 100vh) !important;
    max-height: var(--tooloon-bio-fx3-viewport-height, 100vh) !important;
    overflow: hidden !important;
}

.tooloon-bio-fx3-viewport-cover .wp-block-cover__inner-container,
.tooloon-bio-fx3-viewport-cover .tooloon-bio-plugin,
.cover-language-switcher.tooloon-bio-fx3-viewport {
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

.cover-language-switcher.tooloon-bio-fx3-viewport {
    position: relative;
    display: flex;
    flex-direction: column;
}

.cover-language-switcher.tooloon-bio-fx3-viewport[data-header-menu-hidden="1"] .tooloon-bio-controls-placeholder {
    flex: 0 0 0;
    height: 0 !important;
}

.cover-language-switcher.tooloon-bio-fx3-viewport .tooloon-bio-controls-frame.tooloon-bio-header-menu-hidden {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
}

.cover-language-switcher.tooloon-bio-fx3-viewport .tooloon-bio-text-stage {
    flex: 1 1 0;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    overflow-anchor: none;
}

.cover-language-switcher.tooloon-bio-fx3-viewport[data-header-menu-hidden="1"] .tooloon-bio-text-stage {
    margin-top: 0 !important;
}

html.tooloon-bio-fx2-writing,
body.tooloon-bio-fx2-writing {
    overflow-anchor: none !important;
}