/* ============================================================
 * BaBeL DESIGN SYSTEM
 * Custom styles layered on top of Pico CSS v2
 * ============================================================ */

/* ------------------------------------------------------------
 * DESIGN TOKENS — Override Pico CSS custom properties
 * ------------------------------------------------------------ */
:root {
    /* Brand palette — Figma: BaBeL DEF */
    --babel-pink: #FFE0DF;
    /* Seitenhintergrund */
    --babel-pink-card: #EE9394;
    /* Rosa Card-Variante */
    --babel-yellow: #E6E079;
    /* Gelb-Grün Akzent */
    --babel-red: #D52600;
    /* Rot (Text auf Gelb) */
    --babel-darkred: #9A0809;
    /* Dunkelrot, Primärfarbe */
    --babel-black: #000000;
    --babel-white: #FFFFFF;
    --babel-grey-light: #F3F3F3;
    /* Footer-Hintergrund */

    /* Alias für bestehende Pico-Referenzen */
    --babel-coral: var(--babel-darkred);
    --babel-burgundy: var(--babel-red);

    /* Typografie */
    --babel-font-heading: 'League Spartan', Helvetica, Arial, sans-serif;
    --babel-font-body: 'Bitter', Georgia, 'Times New Roman', serif;

    /* Pico font overrides */
    --pico-font-family-sans-serif: var(--babel-font-heading);
    --pico-font-family: var(--babel-font-body);

    /* Border-Radius */
    --babel-radius-card: 16px;
    --babel-radius-btn: 10px;
    --babel-radius-cta: 12px;

    /* Pico overrides */
    --pico-font-size: 100%;
    /* html bleibt bei 16px; body übernimmt 1.25rem */
    --pico-line-height: 1.25;
    /* 25px / 20px */
    --pico-border-radius: 0;
    --pico-outline-width: 0;
    --pico-background-color: var(--babel-pink);
    --pico-color: var(--babel-black);
    --pico-primary: var(--babel-darkred);
    --pico-primary-hover: var(--babel-red);
    --pico-primary-focus: transparent;
    --pico-primary-background: var(--babel-darkred);
    --pico-primary-border: transparent;
    --pico-form-element-focus-color: transparent;
    --pico-primary-inverse: var(--babel-white);
    --pico-secondary: var(--babel-black);
    --pico-secondary-hover: #333333;
    --pico-secondary-inverse: var(--babel-white);

    /* Layout */
    --babel-max-width: 1400px;
    --babel-gutter: 2rem;
    --babel-nav-height: 72px;
}

/* ------------------------------------------------------------
 * SKIP LINK (WCAG 2.4.1)
 * ------------------------------------------------------------ */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    z-index: 9999;
    padding: 0.75rem 1.5rem;
    background: var(--babel-darkred);
    color: var(--babel-white);
    font-family: var(--babel-font-heading);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 var(--babel-radius-btn) 0;
}

.skip-link:focus {
    left: 0;
    top: 0;
    outline: 3px solid var(--babel-yellow);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
 * FOCUS INDIKATOREN (WCAG 2.4.3)
 * Sichtbarer Fokus-Ring für alle interaktiven Elemente.
 * ------------------------------------------------------------ */
:focus,
:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}


/* Buttons auf dunklem Hintergrund (Infobar) */
.site-infobar a:focus-visible,
.site-infobar button:focus-visible {
    outline: 3px solid var(--babel-yellow);
    outline-offset: 3px;
}

/* Text-Resize-Buttons */
.font-size-controls button:focus-visible {
    outline: 3px solid var(--babel-darkred);
    outline-offset: 2px;
    background: var(--babel-pink);
}

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

body {
    background-color: var(--babel-white);
    color: var(--babel-black);
    font-family: var(--babel-font-body);
    font-size: 1.25rem;
    /* 20px */
    font-weight: 400;
    line-height: 1.25;
    /* 25px */
    margin: 0;
}

h1,
h2,
h3 {
    color: var(--babel-darkred);
    font-family: var(--babel-font-heading);
    font-weight: 400;
    line-height: 1;
}

h4,
h5,
h6 {
    color: var(--babel-black);
    font-family: var(--babel-font-heading);
    font-weight: 400;
}

a {
    color: var(--babel-black);
}

a:hover {
    color: var(--babel-coral);
}

/* ------------------------------------------------------------
 * LAYOUT CONTAINER
 * ------------------------------------------------------------ */
.layout-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Hervorgehoben, Hilfe, Seitenleisten: max-width begrenzen */
.layout-container>section[aria-label="Hervorgehobener Inhalt"],
.layout-container>section[aria-label="Hilfe"] {
    width: 100%;
    max-width: var(--babel-max-width);
    margin-inline: auto;
    padding-inline: var(--babel-gutter);
}

.layout-container>main .layout-sidebar-first,
.layout-container>main .layout-sidebar-second {
    max-width: var(--babel-max-width);
}

/* Grid-area assignments (sidebar variants) */
.layout-container>main>a#main-content {
    grid-area: skip;
}

.layout-container>main .layout-sidebar-first {
    grid-area: left;
}

.layout-container>main .layout-content {
    grid-area: content;
}

.layout-container>main .layout-sidebar-second {
    grid-area: right;
}

/* Mobile grid */
.layout-container>main[data-layout="lr"] {
    grid-template-areas: "skip""left""content""right";
}

.layout-container>main[data-layout="l"] {
    grid-template-areas: "skip""left""content";
}

.layout-container>main[data-layout="r"] {
    grid-template-areas: "skip""content""right";
}

.layout-container>main[data-layout="n"] {
    grid-template-areas: "skip""content";
}

@media (min-width: 768px) {
    .layout-container>main[data-layout="lr"] {
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-areas: "skip skip skip""left content right";
    }

    .layout-container>main[data-layout="l"] {
        grid-template-columns: 1fr 3fr;
        grid-template-areas: "skip skip""left content";
    }

    .layout-container>main[data-layout="r"] {
        grid-template-columns: 3fr 1fr;
        grid-template-areas: "skip skip""content right";
    }
}

/* ------------------------------------------------------------
 * SITE HEADER — logo + nav in one horizontal bar
 * ------------------------------------------------------------ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1100;
    background: var(--babel-white);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    width: 100%;
    max-width: var(--babel-max-width);
    margin-inline: auto;
    padding-inline: var(--babel-gutter);
    height: var(--babel-nav-height);
    border-bottom: none;
}

/* Branding */
.site-header__branding {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.site-header__branding .site-logo img {
    height: 44px;
    width: auto;
    display: block;
}

.site-header__branding .site-name a {
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    color: var(--babel-black);
    letter-spacing: 0.03em;
}

/* Nav slot */
.site-header__nav {
    flex: 1;
    display: flex;
    align-items: center;
}

/* Accessible version button + nav toggle + burger (right side) */
.site-header__actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Figma: padding 3px 15px, border-radius 8px, League Spartan 15px */
.btn-accessible {
    display: inline-flex;
    align-items: center;
    padding: 3px 15px;
    background: var(--babel-black);
    color: var(--babel-white);
    border: 1.3px solid var(--babel-black);
    border-radius: 8px;
    font-family: var(--babel-font-heading);
    font-size: 0.9375rem;
    /* 15px */
    font-weight: 400;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1.667;
    transition: background 0.15s, color 0.15s;
}

.btn-accessible:hover {
    background: transparent;
    color: var(--babel-black);
}

/* Pfeil-Button: Nav Panel ein-/ausklappen */
.btn-nav-panel-toggle {
    display: flex;
    align-items: center;
    justify-content: right;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--babel-black);
    transition: color 0.2s;
}

.btn-nav-panel-toggle svg {
    transform: rotate(180deg);
    /* geschlossen: Pfeil zeigt nach unten */
    transition: transform 0.3s ease;
}

.btn-nav-panel-toggle.is-open svg {
    transform: rotate(0deg);
    /* offen: Pfeil zeigt nach oben */
}

/* Burger button — hidden on desktop, visible on mobile */
.btn-burger {
    display: none;
    align-items: center;
    justify-content: flex-end;
    width: 48px;
    min-width: 48px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    color: var(--babel-black);
    align-self: center;
}

.btn-burger svg {
    display: block;
    flex-shrink: 0;
}

.btn-burger span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--babel-black);
    border-radius: 1px;
    transition: transform 0.2s, opacity 0.2s;
}

.btn-nav-panel-toggle {
    margin-bottom: 0px;
}

/* Mobile nav drawer — full-width, drops below header */
/* Mobile nav drawer — full-width overlay below header */
.site-header__mobile-nav {
    display: none;
    /* overridden by Alpine x-show */
    position: absolute;
    top: var(--babel-nav-height, 63px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--babel-white);
    border-bottom: 1.3px solid var(--babel-black);
    padding: 1rem var(--babel-gutter) 1.5rem;
}

.site-header__mobile-nav .region,
.site-header__mobile-nav nav,
.site-header__mobile-nav .block-menu {
    width: 100%;
    padding: 0;
    margin: 0;
}

.site-header__mobile-nav nav ul:first-of-type,
.site-header__mobile-nav nav ul:last-of-type {
    margin-left: 0;
    margin-right: 0;
}

.site-header__mobile-nav ul,
.site-header__mobile-nav .menu {
    display: flex;
    flex-direction: column;
    gap: 0rem;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.site-header__mobile-nav li {
    list-style: none;
    margin: 0;
    width: 100%;
}

.site-header__mobile-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    padding: 0.5em 1em;
    border: 1.3px solid var(--babel-black);
    border-radius: var(--babel-radius-btn);
    text-decoration: none;
    color: var(--babel-black);
    font-family: var(--babel-font-heading);
    font-size: 1.5625rem;
    /* 25px — Figma Phone Nav */
    font-weight: 400;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.site-header__mobile-nav a:hover,
.site-header__mobile-nav a[aria-current="page"] {
    background: var(--babel-black);
    color: var(--babel-white);
    border-color: var(--babel-black);
}

.site-header__mobile-nav a[href*="facebook"]:hover::after {
    filter: invert(1);
}

/* Nav-Toggle-Button (Pfeil auf/zu) */
.btn-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--babel-black);
    transition: color 0.2s;
}

.btn-nav-toggle svg {
    transition: transform 0.3s ease;
}

.btn-nav-toggle.is-open svg {
    transform: rotate(180deg);
}

.btn-nav-toggle:hover {
    color: var(--babel-darkred);
}

/* Nav Panel — volle Header-Breite, gleiche Einrückung wie site-header__inner */
.site-header__panel {
    width: 100%;
}

.site-header__panel-inner {
    display: flex;
    align-items: flex-end;
    gap: 2rem;
    width: 100%;
    max-width: var(--babel-max-width);
    background: var(--babel-white);
    border-top: none;
    margin-inline: auto;
    padding-inline: var(--babel-gutter);
    padding-block: 1rem 1.25rem;
    padding-top: 3rem;
}

/* Nav Panel – Region als Grid-Container
   Spalte 1 (links): text-resize + wasistbabel übereinander, max 880px
   Spalte 2 (rechts): socialmedia, fixe Breite */
.site-header__panel-inner .region-nav-panel {
    display: grid;
    grid-template-columns: minmax(0, 960px) auto;
    grid-template-rows: auto auto;
    column-gap: 2rem;
    row-gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.region-nav-panel .block-text-resize {
    grid-column: 1;
    grid-row: 1;
}

.region-nav-panel #block-babel-wasistbabel {
    grid-column: 1;
    grid-row: 2;
}

.region-nav-panel #block-babel-socialmedia {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: end;
}

/* Alpine.js: Flash-Prävention */
[x-cloak] {
    display: none !important;
}

/* Panel-Transition (navExpanded / klappExpanded) */
.site-panel-enter {
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-panel-enter-from {
    opacity: 0;
    transform: translateY(-12px);
}

.site-panel-enter-to {
    opacity: 1;
    transform: translateY(0);
}

/* Leave: kein transform, damit kein GPU-Layer-Konflikt mit position:sticky */
.site-panel-leave {
    transition: opacity 0.15s ease;
}

.site-panel-leave-from {
    opacity: 1;
}

.site-panel-leave-to {
    opacity: 0;
}

/* Admin toolbar offset */
body.toolbar-fixed .site-header {
    top: var(--drupal-displace-offset-top, 0px);
}

/* ------------------------------------------------------------
 * NAVIGATION — pill style
 * ------------------------------------------------------------ */
.site-header__nav ul,
.site-header__nav .menu {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 780px;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-header__nav li {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    display: flex;
    justify-content: center;
}

/* Social-Links nur mobile anzeigen */
.site-header__nav li:has(a[href*="facebook"]),
.site-header__nav li:has(a[href*="instagram"]),
.site-header__nav li:has(a[href*="whatsapp"]) {
    display: none;
}

/* Social-Links Mobile: Abstand zu normalen Links */
.site-header__mobile-nav li:has(a[href*="facebook"]),
.site-header__mobile-nav li:has(a[href*="whatsapp"]) {
    margin-top: 1rem;
}

/* Kein Extra-Abstand zwischen den Social-Links */
.site-header__mobile-nav li:has(a[href*="instagram"])+li:has(a[href*="facebook"]),
.site-header__mobile-nav li:has(a[href*="facebook"])+li:has(a[href*="instagram"]),
.site-header__mobile-nav li:has(a[href*="facebook"])+li:has(a[href*="whatsapp"]),
.site-header__mobile-nav li:has(a[href*="instagram"])+li:has(a[href*="whatsapp"]) {
    margin-top: 0;
}

/* Social-Links Mobile: Icons rechts */
.site-header__mobile-nav a[href*="instagram"],
.site-header__mobile-nav a[href*="facebook"],
.site-header__mobile-nav a[href*="whatsapp"] {
    justify-content: center;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.site-header__mobile-nav a[href*="instagram"]::after {
    content: '';
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    width: 33px;
    height: 34px;
    background: url('../images/icon-instagram-wordmark.svg') no-repeat center;
    background-size: contain;
    transition: filter 0.15s;
}

.site-header__mobile-nav a[href*="instagram"]:hover::after,
.site-header__mobile-nav a[href*="instagram"]:active::after {
    filter: invert(1);
}

.site-header__mobile-nav a[href*="facebook"]::after {
    content: '';
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: url('../images/icon-facebook-circle.svg') no-repeat center;
    background-size: contain;
    transition: filter 0.15s;
}

.site-header__mobile-nav a[href*="whatsapp"]::after {
    content: '';
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: url('../images/icon-whatsapp.svg') no-repeat center;
    background-size: contain;
    transition: filter 0.15s;
}

.site-header__mobile-nav a[href*="whatsapp"]:hover::after,
.site-header__mobile-nav a[href*="whatsapp"]:active::after {
    content: '';
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: url('../images/icon-whatsapp-hover.svg') no-repeat center;
    background-size: contain;
}

/* Neutralise Pico nav block wrappers */
.site-header__nav nav,
.site-header__nav .block,
.site-header__nav .block-menu,
.site-header__nav>div {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Figma: 162×45px, padding 10px 47px, League Spartan 25px, border-radius 10px */
.site-header__nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 45px;
    padding: 10px clamp(1rem, 2.5vw, 32px);
    border: 1.3px solid var(--babel-black);
    border-radius: 10px;
    text-decoration: none;
    color: var(--babel-black);
    font-family: var(--babel-font-heading);
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-weight: 400;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.site-header__nav a:hover,
.site-header__nav a[aria-current="page"] {
    background: var(--babel-black);
    color: var(--babel-white);
    border-color: var(--babel-black);
}

/* ------------------------------------------------------------
 * KLAPP-BAR — schmale Leiste, klappt Kontaktformular auf
 * ------------------------------------------------------------ */
.site-klapp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    height: 45px;
    padding-inline: var(--babel-gutter);
    background: var(--babel-white);
    border-top: 1px solid var(--babel-black);
    cursor: pointer;
    user-select: none;
}

.site-klapp__text {
    font-family: var(--babel-font-heading);
    font-size: 0.875rem;
    color: var(--babel-darkred);
    flex: 1;
}

.site-klapp__arrows {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--babel-pink-card);
    transition: transform 0.3s ease;
}

.site-klapp__arrows.is-open {
    transform: rotate(180deg);
}

/* Klapp-Panel: 2-spaltiges Layout (Text | Formular) */
.site-klapp__panel {
    background: var(--babel-white);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    width: 100%;
}

.site-klapp__panel-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: var(--babel-max-width);
    margin-inline: auto;
    padding-inline: var(--babel-gutter);
    padding-block: 1.5rem;
}

.site-klapp__panel-text p {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.site-klapp__form-title {
    font-family: var(--babel-font-heading);
    font-weight: 600;
    font-size: 1rem;
    margin-top: 1rem;
}

.site-klapp__form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.site-klapp__form input,
.site-klapp__form textarea {
    border: 1px solid var(--babel-black);
    font-family: var(--babel-font-body);
    padding: 0.5em 0.75em;
    font-size: 0.85rem;
    background: transparent;
    width: 100%;
}

.site-klapp__form textarea {
    resize: vertical;
}

.btn-file-upload {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--babel-black);
}

.btn-senden {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--babel-font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--babel-black);
    padding: 0;
    align-self: flex-start;
}

.btn-senden:hover {
    color: var(--babel-darkred);
}

/* Mobile: Klapp-Panel einspaltg */
@media (max-width: 768px) {
    .site-klapp__panel-inner {
        grid-template-columns: 1fr;
    }

    .btn-nav-toggle {
        display: none;
    }

}

/* ------------------------------------------------------------
 * INFOBAR — black announcement bar
 * ------------------------------------------------------------ */
.site-infobar {
    color: var(--babel-white);
    background: var(--babel-black);
    position: sticky;
    top: var(--babel-nav-height, 72px);
    z-index: 499;
}

body.toolbar-fixed .site-infobar {
    top: calc(var(--babel-nav-height, 72px) + var(--drupal-displace-offset-top, 0px));
}

.site-infobar__inner {
    /* display: flex;*/
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    max-width: var(--babel-max-width);
    margin-inline: auto;
    padding-inline: var(--babel-gutter);
}

.site-infobar p,
.site-infobar__text {
    margin: 0;
    font-size: 1.2rem;
    color: var(--babel-white);
}

.site-infobar a {
    color: var(--babel-yellow);
    text-decoration: underline;
    font-weight: 600;
}

.site-infobar__icon svg {
    width: 1.25rem;
    height: 1.25rem;
    stroke: var(--babel-white);
}

/* ------------------------------------------------------------
 * BLOCK COLLAPSIBLE (Webformular in Infobar)
 * ------------------------------------------------------------ */

/* Block nimmt volle Breite im Infobar-Inner ein */
.site-infobar .block-collapsible {
    width: 100%;
    position: static;
}

/* Contextual Links über absolut positioniertem Panel anzeigen */
.site-infobar .contextual {
    z-index: 1010;
}

.site-infobar .contextual-links {
    z-index: 1010;
}

/* Panel aus dem Dokumentfluss nehmen – kein Layout-Shift beim Öffnen/Peek */
.site-infobar .block-collapsible__panel {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 200;
}

.block-collapsible__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    width: 100%;
    text-align: left;
}

/* Toggle-Text und Pfeil: Korall gemäss Figma (schwarzer Hintergrund) */
.site-infobar .block-collapsible__toggle {
    color: var(--babel-pink-card);
    font-family: var(--babel-font-heading);
    font-size: 0.9375rem;
    padding-block: 0.65rem;
}

.site-infobar .block-collapsible__icon svg {
    stroke: var(--babel-pink-card);
}

.block-collapsible__title {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: inherit;
}

.block-collapsible__icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.block-collapsible__icon.is-open {
    transform: rotate(180deg);
}

/* Panel – immer auf max-height:50px geclippt (nicht offen).
   Mouse-out ändert nur opacity → kein Flackern des vollen Formulars. */
.block-collapsible__panel {
    width: 100%;
    max-height: 136px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.block-collapsible__panel.is-open {
    max-height: none;
    overflow: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Hover-Peek: Panel einblenden, Clipping bleibt bei 50px (aus Basis-State) */
.site-infobar .block-collapsible:hover .block-collapsible__panel:not(.is-open) {
    opacity: 1;
    transform: translateY(0);
    pointer-events: none;
}

.site-infobar .block-collapsible__panel {
    background: var(--babel-pink-card);
    color: var(--babel-black);
    padding-block: 2rem;
    padding-inline: max(var(--babel-gutter), calc((100% - var(--babel-max-width)) / 2 + var(--babel-gutter)));
    margin-inline: unset;
    width: unset;
    left: 0;
    right: 0;
}

/* Labels und Text im Panel */
.site-infobar .block-collapsible__panel label,
.site-infobar .block-collapsible__panel legend,
.site-infobar .block-collapsible__panel p {
    color: var(--babel-black);
}

/* Formular-Eingabefelder auf Korall-Hintergrund */
.site-infobar .block-collapsible__panel input,
.site-infobar .block-collapsible__panel textarea,
.site-infobar .block-collapsible__panel select {
    background: transparent;
    border-color: var(--babel-black);
    color: var(--babel-black);
    border-radius: 16px;
}

/* Text- und Email-Inputs: nur Border-Bottom */
.site-infobar .block-collapsible__panel input.form-text,
.site-infobar .block-collapsible__panel input.form-email {
    border: none;
    border-bottom: 1px solid #000;
    border-radius: 0;
    font-size: 1.2rem;
}

.site-infobar .block-collapsible__panel input::placeholder,
.site-infobar .block-collapsible__panel textarea::placeholder,
div#webformular-panel label {
    color: #000;
    font-size: 1.2rem;
}

.site-infobar .block-collapsible__panel .form-item__description {
    font-size: 1.2rem;
}

.form-item-vorname-nachname input,
input.form-email {
    padding-left: 0px;
}

#edit-vorname-nachname {
    margin-bottom: 0px;
}


.webform-submission-form .webform-type-email,
.webform-submission-form .webform-type-textarea {
    margin-bottom: 1rem;
}

.webform-submission-form .webform-type-textfield {
    margin-bottom: 0.5rem;
}

/* ----------------------------------------------------------
 * Zweispaltiges Webformular-Layout
 * flexbox1 (links) | flexbox_01 (rechts)
 * ---------------------------------------------------------- */
.site-infobar .block-collapsible__panel .webform-submission-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 2rem;
    align-items: start;
}

/* Feldgruppen: kein Überlauf */
.site-infobar .block-collapsible__panel .js-form-item-flexbox1,
.site-infobar .block-collapsible__panel .js-form-item-flexbox-01 {
    min-width: 0;
}

/* Beobachtung-Textarea */
.site-infobar .block-collapsible__panel .js-form-item-beobachtung textarea {
    resize: vertical;
    min-height: 8rem;
}

/* Submit-Button: Icon global ausblenden */
.btn-icon {
    display: none;
}

/* Webformular-Submit: Figma «Kontakt: senden» – Icon links, Text rechts */
.site-infobar .block-collapsible__panel .form-actions {
    display: flex;
    justify-content: flex-end;
    grid-column: 1 / -1;
    margin-top: 1.25rem;
}

.site-infobar .block-collapsible__panel button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-family: 'League Spartan', sans-serif;
    font-size: 1.5625rem;
    /* 25px */
    font-weight: 300;
    line-height: 1;
    color: #000;
    background: none;
    border: 1.4px solid #000;
    border-radius: 12px;
    padding: 0 1rem;
    height: 49px;
    width: 180px;
    cursor: pointer;
    margin-left: auto;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.site-infobar .block-collapsible__panel button[type="submit"]:hover {
    background: #000;
    color: #fff;
}

.site-infobar .block-collapsible__panel button[type="submit"]:hover .btn-icon path {
    stroke: #fff;
}

@media (max-width: 768px) {
    .site-infobar .block-collapsible__panel button[type="submit"] {
        width: 100%;
        margin-left: 0;
    }
}

/* ----------------------------------------------------------
 * Datei hochladen – Figma-Design (node 67:1052)
 * Rechteck 603×85px, Border 1.3px schwarz, radius 16px
 * Text «Datei hochladen» Bitter 15px, Icon rechts
 * ---------------------------------------------------------- */
.site-infobar .block-collapsible__panel .form-managed-file {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 85px;
    border: 1.3px solid #000;
    border-radius: 16px;
    background: transparent;
    cursor: pointer;
}

/* Dateiname / Upload-Button des Browsers verstecken */
.site-infobar .block-collapsible__panel .form-managed-file input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

/* «Datei hochladen» Label-Text */
.site-infobar .block-collapsible__panel .form-managed-file::before {
    content: "Datei hochladen";
    font-family: 'Bitter', serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.333;
    color: #000;
    pointer-events: none;
    order: 2;
}

/* Upload-Icon */
.site-infobar .block-collapsible__panel .form-managed-file::after {
    content: "";
    display: block;
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='43' height='43' viewBox='0 0 43 43' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 17.7505C26.8584 18.5318 29.1762 20.6212 30.2725 23.3335C30.4405 23.7492 30.5551 24.0314 30.6572 24.2329C30.7608 24.4372 30.8181 24.4865 30.8359 24.4985C30.864 24.5174 30.9247 24.5482 31.1035 24.5659C31.2888 24.5843 31.5358 24.5845 31.9141 24.5845H33.625C36.1103 24.5845 38.125 26.5992 38.125 29.0845V31.8345C38.1247 34.3194 36.1102 36.3345 33.625 36.3345H10.7363L10.46 36.3267L10.4482 36.3257C7.34384 36.1684 4.87529 33.6027 4.875 30.4595C4.875 27.2148 7.50533 24.5845 10.75 24.5845H11.0859C11.4642 24.5845 11.7112 24.5843 11.8965 24.5659C12.0753 24.5482 12.136 24.5174 12.1641 24.4985C12.1819 24.4865 12.2392 24.4372 12.3428 24.2329C12.4449 24.0314 12.5595 23.7492 12.7275 23.3335C13.8238 20.6212 16.1416 18.5318 19 17.7505V18.7935C16.5662 19.5454 14.601 21.3661 13.6543 23.7085C13.4933 24.1068 13.3611 24.4358 13.2354 24.6841C13.1115 24.9286 12.9592 25.1686 12.7236 25.3276C12.4982 25.4796 12.2476 25.536 11.9951 25.561C11.749 25.5854 11.4438 25.5845 11.0859 25.5845H10.75C8.05761 25.5845 5.875 27.7671 5.875 30.4595L5.88086 30.7026C6.00353 33.1943 7.99735 35.1942 10.4863 35.3267H10.4873L10.7637 35.3345H33.625C35.4975 35.3345 37.0263 33.8635 37.1201 32.0142L37.125 31.8345V29.0845C37.125 27.1515 35.558 25.5845 33.625 25.5845H31.9141C31.5562 25.5845 31.251 25.5854 31.0049 25.561C30.7524 25.536 30.5018 25.4796 30.2764 25.3276C30.0408 25.1686 29.8885 24.9286 29.7646 24.6841C29.6389 24.4358 29.5067 24.1068 29.3457 23.7085C28.399 21.3661 26.4338 19.5454 24 18.7935V17.7505Z' fill='%232A2020'/%3E%3Cpath d='M21.5 5.375L21.1465 5.02145L21.5 4.66789L21.8536 5.02145L21.5 5.375ZM22 23.2917C22 23.5678 21.7762 23.7917 21.5 23.7917C21.2239 23.7917 21 23.5678 21 23.2917L21.5 23.2917L22 23.2917ZM14.3334 12.5417L13.9798 12.1881L21.1465 5.02145L21.5 5.375L21.8536 5.72855L14.6869 12.8952L14.3334 12.5417ZM21.5 5.375L21.8536 5.02145L29.0203 12.1881L28.6667 12.5417L28.3132 12.8952L21.1465 5.72855L21.5 5.375ZM21.5 5.375L22 5.375L22 23.2917L21.5 23.2917L21 23.2917L21 5.375L21.5 5.375Z' fill='%232A2020'/%3E%3C/svg%3E");
}

/* Upload-Icon Hover */
.site-infobar .block-collapsible__panel .form-managed-file:hover::after {
    height: 47px;
    background-image: url("data:image/svg+xml,<svg width='43' height='47' viewBox='0 0 43 47' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M24 21.5164C26.9219 22.3018 29.2935 24.4287 30.4121 27.1961C30.5811 27.6142 30.6925 27.8893 30.791 28.0838C30.8917 28.2825 30.9346 28.3037 30.9199 28.2938C30.9211 28.2946 30.9295 28.3008 30.9551 28.3084C30.9853 28.3173 31.0354 28.3276 31.1182 28.3357C31.2944 28.3532 31.5327 28.3533 31.9141 28.3533H33.625C36.1931 28.3533 38.2754 30.4356 38.2754 33.0037V35.7537C38.2751 38.3215 36.193 40.4041 33.625 40.4041H10.7412L10.7314 40.4031L10.4551 40.3953H10.4404C7.25675 40.2339 4.7249 37.6022 4.72461 34.3787C4.72461 31.0512 7.42248 28.3533 10.75 28.3533H11.0859C11.4673 28.3533 11.7056 28.3532 11.8818 28.3357C11.9646 28.3276 12.0147 28.3173 12.0449 28.3084C12.0705 28.3008 12.0789 28.2946 12.0801 28.2938C12.0654 28.3037 12.1083 28.2825 12.209 28.0838C12.3075 27.8893 12.4189 27.6142 12.5879 27.1961C13.7065 24.4287 16.0781 22.3018 19 21.5164V22.869C16.63 23.6156 14.7183 25.3967 13.7939 27.6834C13.6338 28.0796 13.4986 28.4162 13.3691 28.6717C13.2423 28.9221 13.076 29.1908 12.8076 29.3719C12.5526 29.5439 12.2733 29.6026 12.0098 29.6287C11.7546 29.654 11.4407 29.6541 11.0859 29.6541H10.75C8.14045 29.6541 6.02539 31.7692 6.02539 34.3787L6.03125 34.6141C6.15021 37.0333 8.08878 38.974 10.5068 39.0965H10.5059L10.75 39.1033H33.625C35.4173 39.1033 36.881 37.6957 36.9707 35.9256L36.9746 35.7537V33.0037C36.9746 31.1536 35.4752 29.6541 33.625 29.6541H31.9141C31.5593 29.6541 31.2455 29.654 30.9902 29.6287C30.7267 29.6026 30.4474 29.5439 30.1924 29.3719C29.924 29.1908 29.7577 28.9221 29.6309 28.6717C29.5014 28.4162 29.3662 28.0796 29.2061 27.6834C28.2817 25.3967 26.37 23.6156 24 22.869V21.5164Z' fill='%232A2020'/><path d='M21.4999 0.919239L21.0403 0.459619L21.4999 -1.52417e-08L21.9595 0.459619L21.4999 0.919239ZM22.1499 18.8359C22.1499 19.1949 21.8589 19.4859 21.4999 19.4859C21.1409 19.4859 20.8499 19.1949 20.8499 18.8359L21.4999 18.8359L22.1499 18.8359ZM14.3333 8.08591L13.8736 7.62629L21.0403 0.459619L21.4999 0.919239L21.9595 1.37886L14.7929 8.54553L14.3333 8.08591ZM21.4999 0.919239L21.9595 0.459619L29.1262 7.62629L28.6666 8.0859L28.207 8.54552L21.0403 1.37886L21.4999 0.919239ZM21.4999 0.919239L22.1499 0.919239L22.1499 18.8359L21.4999 18.8359L20.8499 18.8359L20.8499 0.919239L21.4999 0.919239Z' fill='%232A2020'/></svg>");
}

/* Upload-Button (nach Dateiauswahl) ausblenden */
.site-infobar .block-collapsible__panel .form-managed-file input[type="submit"] {
    display: none;
}

/* Upload-Button permanent ausblenden (ID ist zufällig, daher data-drupal-selector) */
.site-infobar .block-collapsible__panel .form-managed-file [data-drupal-selector="edit-datei-upload-button"] {
    display: none !important;
}

/* Offenes Panel: Viewport-Höhe begrenzen + intern scrollbar machen */
.site-infobar .block-collapsible__panel.is-open {
    max-height: calc(100dvh - var(--babel-nav-height, 72px) - 4rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Responsive: ab < 768px einspaltig */
@media (max-width: 768px) {
    .site-infobar .block-collapsible__panel .webform-submission-form {
        grid-template-columns: 1fr;
    }

    .site-infobar .block-collapsible__panel.is-open {
        max-height: calc(100dvh - var(--babel-nav-height, 63px));
        padding-bottom: 4rem;
    }
}


/* ------------------------------------------------------------
 * HIGHLIGHTED (Status Messages)
 * Drupal rendert den Fallback-Div immer — Section nur anzeigen
 * wenn der Fallback die Klasse .hidden NICHT mehr trägt.
 * ------------------------------------------------------------ */
section:has([data-drupal-messages-fallback].hidden) {
    display: none;
}

/* ------------------------------------------------------------
 * MAIN CONTENT
 * ------------------------------------------------------------ */
main[role="main"] {
    flex: 1;
}

.layout-content {
    width: 100%;
    max-width: var(--babel-max-width);
    margin-inline: auto;
    padding-inline: var(--babel-gutter);
    padding-block: 3rem;
    background: var(--babel-pink);
    padding-bottom: 6rem;
}

/* Canvas-Seiten: Hintergrund auf main (volle Viewport-Breite),
   layout-content transparent — Inhalt bleibt in max-width
   -------------------------------------------------------------------------- */
body.canvas-page:not(.canvas-page--kontakt):not(.canvas-page--home) main[role="main"] {
    background-color: var(--babel-pink);
}

body.canvas-page .layout-content {
    background-color: transparent;
}

/* Spacer-Komponente: weisser Hintergrund, volle Breite von .layout-content
   -------------------------------------------------------------------------- */
.path-frontpage .babel-spacer {
    background-color: #fff;
    margin-inline: calc(-1 * var(--babel-gutter, 2rem));
}

@media (max-width: 767px) {
    .babel-spacer {
        height: 0.5rem !important;
    }
}

/* ------------------------------------------------------------
 * HEADINGS
 * ------------------------------------------------------------ */
.page-title h1,
h1.page-title {
    font-size: 2.5rem;
    color: var(--babel-darkred);
    margin-bottom: 2rem;
}

/* ------------------------------------------------------------
 * CANVAS COMPONENT TEXTFARBEN
 * Rosa Hintergrund → dunkelrot (#9A0809)
 * Gelber Hintergrund → rot (#D52600)
 * ------------------------------------------------------------ */

/* Rosa (Standard-Inhaltsbereich): Textfelder dunkelrot
   p/li explizit ansprechen, da Pico CSS color direkt auf p setzt */
.babel-card__text,
.babel-card__text p,
.babel-card__text li,
.mein-block__text,
.mein-block__text p,
.mein-block__text li,
.text-block,
.text-block p,
.text-block li,
.bild-text-block__text,
.bild-text-block__text p,
.bild-text-block__text li {
    color: var(--babel-darkred);
}

body:not(.canvas-page--kontakt) .text-block a,
.bild-text-block__text a,
.bild-links-text-rechts__text a,
.mein-block__text a,
.babel-card__text a {
    color: var(--babel-darkred);
    text-decoration: none;
    border-bottom: 1px solid var(--babel-darkred);
}

.text-block a:hover,
.bild-text-block__text a:hover,
.bild-links-text-rechts__text a:hover,
.mein-block__text a:hover,
.babel-card__text a:hover {
    border-bottom-width: 2px;
}

/* Gelber Hintergrund (Kontakt-Seite): Titel und Textfelder rot */
.page-kontakt .babel-card__titel,
.page-kontakt .mein-block__titel,
.page-kontakt .text-block__titel,
.page-kontakt .bild-text-block__titel,
.page-kontakt h2,
.page-kontakt h3 {
    color: var(--babel-red);
}

.page-kontakt .babel-card__text,
.page-kontakt .babel-card__text p,
.page-kontakt .babel-card__text li,
.page-kontakt .mein-block__text,
.page-kontakt .mein-block__text p,
.page-kontakt .mein-block__text li,
.page-kontakt .text-block,
.page-kontakt .text-block p,
.page-kontakt .text-block li,
.page-kontakt .bild-text-block__text,
.page-kontakt .bild-text-block__text p,
.page-kontakt .bild-text-block__text li {
    color: var(--babel-red);
}

/* ------------------------------------------------------------
 * CARD GRID
 * ------------------------------------------------------------ */
.babel-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-block: 2rem;
}

.babel-card {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    min-height: 280px;
    border-radius: var(--babel-radius-card);
}

.babel-card--yellow {
    background: var(--babel-yellow);
    color: var(--babel-red);
}

.babel-card--pink {
    background: var(--babel-pink-card);
    color: var(--babel-darkred);
}

.babel-card--darkred {
    background: var(--babel-darkred);
    color: var(--babel-pink-card);
}

.babel-card--yellow h2,
.babel-card--yellow h3,
.babel-card--yellow p {
    color: var(--babel-red);
}

.babel-card--pink h2,
.babel-card--pink h3,
.babel-card--pink p {
    color: var(--babel-darkred);
}

.babel-card--darkred h2,
.babel-card--darkred h3,
.babel-card--darkred p {
    color: var(--babel-pink-card);
}

/* Legacy alias */
.babel-card--burgundy {
    background: var(--babel-darkred);
    color: var(--babel-white);
}

.babel-card--burgundy h2,
.babel-card--burgundy h3,
.babel-card--burgundy p {
    color: var(--babel-white);
}

.babel-card--image {
    padding: 0;
    overflow: hidden;
}

.babel-card--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ------------------------------------------------------------
 * EVENT LIST
 * ------------------------------------------------------------ */
.event-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.event-list__item {
    display: grid;
    grid-template-columns: 56px auto 1fr auto;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    text-decoration: none;
    color: var(--babel-black);
}

.event-list__item:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.event-list__date {
    text-align: center;
    line-height: 1;
}

.event-list__date .day {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
}

.event-list__date .month {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.event-list__location {
    font-size: 0.8rem;
    opacity: 0.65;
}

.event-list__title {
    font-weight: 600;
}

.event-list__arrow {
    font-size: 1.25rem;
}

/* ------------------------------------------------------------
 * FOOTER
 * Figma "BaBeL DEF – Footer": #F3F3F3, 1310px, 330px
 * Regionen: footer_left (25%) | footer_center (25%) | footer_right (50%)
 * ------------------------------------------------------------ */
.site-footer {
    background: #F3F3F3;
    margin-top: 0.5rem;
}

.site-footer__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2.5rem 2rem 6rem 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    /* 25% | 25% | 50%
       gap: 1rem damit die 50%-Spalte mit dem 2-spaltigen Main-Layout
       (gap: 2rem) bündig liegt: gap_footer = gap_main / 2 */
    gap: 1rem;
    align-items: start;
}

/* Blocktitel in Footer ausblenden */
.site-footer__col .block-title {
    display: none;
}

/* h2-Titel in Footer in Textfarbe (nicht dunkelrot) */
.site-footer h2 {
    color: var(--babel-black);
}

/* Alle Footer-Links */
.site-footer a {
    color: #000000;
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: none !important;
}

/* Zone links: Adresse + Impressum/Datenschutz
   ------------------------------------------------------------ */
.site-footer__inner p {
    font-family: 'Bitter', serif;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.533;
    color: #000000;
    margin: 0 0 1rem;
}

.site-footer__col--left a {
    font-family: 'Bitter', serif;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.533;
    display: block;
}

/* Zone Mitte: Archiv
   ------------------------------------------------------------ */
.site-footer__col--center a {
    font-family: 'Bitter', serif;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.533;
    display: block;
}

/* Zone rechts: Newsletter-Formular
   Figma node 1:447 — Webform #webform-submission-newsletter-anmeldung-add-form
   ------------------------------------------------------------ */

/* Titel "Newsletter abonnieren"
   Wird via ::before injiziert, da kein Block-Label im DOM vorhanden.
   Alternativ: Block-Label in Drupal aktivieren und CSS-Regel unten anpassen. */
/* #block-babel-webformular-2::before {
    content: 'Newsletter abonnieren';
    display: block;
    font-family: 'League Spartan', sans-serif;
    font-size: 1.5625rem;
    font-weight: 400;
    line-height: 0.92;
    color: #000000;
    margin-bottom: 1.5rem;
} */

/* Formular-Wrapper */
.webform-submission-newsletter-anmeldung-add-form {
    display: block;
}

/* Jedes Feld: Unterlinien-Stil, kein Box-Rand */
.webform-submission-newsletter-anmeldung-add-form .form-item {
    border-bottom: 1px solid #000000;
    margin-bottom: 1.25rem;
}

.webform-submission-newsletter-anmeldung-add-form .form-item-markup {
    border-bottom: none;
}

/* Labels ausblenden (title_display: invisible — Placeholder übernimmt) */
.webform-submission-newsletter-anmeldung-add-form .form-item label {
    display: none;
}

/* Eingabefelder */
.webform-submission-newsletter-anmeldung-add-form input[type="text"],
.webform-submission-newsletter-anmeldung-add-form input[type="email"] {
    width: 100%;
    font-family: 'Bitter', serif;
    font-size: 1.2rem;
    font-weight: 400;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0.25rem 0;
    color: #000000;
}

.webform-submission-newsletter-anmeldung-add-form input::placeholder {
    color: #000000;
    font-size: 1.2rem;
    opacity: 1;
}

/* Button-Bereich: rechtsbündig */
.webform-submission-newsletter-anmeldung-add-form .form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

/* Submit-Button */
.webform-submission-newsletter-anmeldung-add-form .webform-button--submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-family: 'League Spartan', sans-serif;
    font-size: 1.5625rem;
    font-weight: 300;
    line-height: 1;
    color: #000000;
    background: none;
    border: 1.4px solid #000000;
    border-radius: 12px;
    padding: 0 1rem;
    height: 49px;
    width: 180px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.webform-submission-newsletter-anmeldung-add-form .webform-button--submit:hover {
    background: #000000;
    color: #F3F3F3;
}

.webform-submission-newsletter-anmeldung-add-form .webform-button--submit:hover .btn-icon path {
    stroke: #F3F3F3;
}

/* ------------------------------------------------------------
 * RESPONSIVE — mobile (≤ 768px)
 * Figma: BaBeL Phone DEF — 393px frame, 63px nav
 * ------------------------------------------------------------ */
@media (max-width: 768px) {
    :root {
        --babel-gutter: 1.25rem;
        --babel-nav-height: 63px;
    }

    /* Nav-Panel auf Mobile: nur wasistbabel-Block zeigen, Rest ausblenden */
    #nav-panel .block-text-resize,
    #nav-panel #block-babel-socialmedia {
        display: none;
    }

    #nav-panel .site-header__panel-inner .region-nav-panel {
        display: block;
    }

    /* Hide desktop pill-nav, show burger */
    .site-header__nav {
        display: none;
    }

    .btn-burger {
        display: flex;
    }

    .btn-nav-panel-toggle {
        display: flex;
    }

    #btn-accessible-toggle {
        display: none;
    }

    .btn-accessible {
        font-size: 0.7rem;
        padding: 0.35em 0.75em;
    }

    /* Mobile nav drawer visible (Alpine.js removes display:none) */
    .site-header__mobile-nav {
        display: block;
        /* Alpine.js uses display:none to hide; when shown, use block */
    }

    /* Full-width cards */
    .babel-cards {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Headings */
    h1,
    .page-title h1 {
        font-size: 2.5rem;
        /* Figma: 40px on mobile same as desktop */
        line-height: 1;
    }

    h2 {
        font-size: 1.5625rem;
    }

    /* 25px */
    h3 {
        font-size: 1.5625rem;
    }

    /* Events list — stacked layout on mobile */
    .event-list__item {
        grid-template-columns: 48px 1fr auto;
        grid-template-areas:
            "date title arrow"
            "date location arrow";
        gap: 0.5rem 1rem;
    }

    .event-list__location {
        grid-area: location;
    }

    .event-list__title {
        grid-area: title;
    }

    .event-list__arrow {
        grid-area: arrow;
    }

    /* Footer — einspaltig auf Mobile, Newsletter zuerst */
    .site-footer__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem 1.25rem;
    }

    .site-footer__col--right {
        order: 1;
    }

    .site-footer__col--center {
        order: 2;
    }

    .site-footer__col--left {
        order: 3;
    }
}

div#block-babel-socialmedia div.field__item img {
    width: 37px;
    height: 37px;
    display: block;
}

div#block-babel-socialmedia a[href*="instagram"] img {
    content: url('../images/icon-instagram.svg');
}

div#block-babel-socialmedia a[href*="instagram"]:hover img {
    content: url('../images/icon-instagram-hover.svg');
}

div#block-babel-socialmedia a[href*="facebook"] img {
    content: url('../images/icon-facebook.svg');
}

div#block-babel-socialmedia a[href*="facebook"]:hover img {
    content: url('../images/icon-facebook-hover.svg');
}

div#block-babel-socialmedia a[href*="whatsapp"] img {
    content: url('../images/icon-whatsapp.svg');
}

div#block-babel-socialmedia a[href*="whatsapp"]:hover img {
    content: url('../images/icon-whatsapp-hover.svg');
}

div#block-babel-socialmedia a {
    display: inline-flex;
    border-radius: 50%;
}

div#block-babel-socialmedia .field--name-field-beschreibung {
    display: flex;
    justify-content: flex-end;
}

div#block-babel-socialmedia .field--name-field-beschreibung .field__items {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
}

div#block-babel-socialmedia .field--name-field-beschreibung .field__item {
    display: flex;
}

div#block-babel-socialmedia .field--name-field-beschreibung ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1rem;
}

div#block-babel-socialmedia .field--name-field-beschreibung ul li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

div#block-babel-socialmedia .field--name-field-beschreibung ul li p {
    margin: 0;
    line-height: 0;
}

div#block-babel-socialmedia .field--name-field-beschreibung article {
    margin: 0px;
    box-shadow: none;
    background: transparent;
}

.font-size-controls {
    display: block !important;
}

div#block-babel-webformular button {
    margin-bottom: 0px;
}

div#block-babel-webformular button.block-collapsible__toggle span {
    font-weight: normal;
    font-size: 16px;
}

h1.text-block__titel {
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1;
    margin: 0;
    padding: 2rem 2rem 1.5rem 0rem;
}

div.site-footer__inner div.field__item p a {
    text-decoration: var(--pico-text-decoration);
}

div.site-footer__inner div.field__item h2,
div.site-footer__inner div.field__item h3,
div.site-footer__inner div.field__item h1 {
    color: var(--color--black);
}

button.events-filter-calendar__trigger {
    border: 0px;
    margin-bottom: 0px;
    padding-left: 0px;
    padding-right: 4rem;
}

.path-frontpage .block-views-blocknews-latest {
    margin-inline: calc(50% - 50vw);
    margin-top: -3rem;
    padding-inline: calc(50vw - 50%);
    padding-block: 4rem;
    background: var(--babel-pink);
}

.path-frontpage .layout-content {
    padding-bottom: 0px;
}

.path-frontpage .block-views-blockevents-upcoming {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    background: var(--babel-yellow);
}

.path-frontpage .block-views-blockevents-upcoming .view-events--upcoming {
    margin-inline: 0;
    padding-inline: 0;
}

.path-frontpage .view-events--upcoming {
    padding-top: 4rem;
}

.path-frontpage .view-events--upcoming .events-list {
    padding-bottom: 4rem;
}

.path-frontpage .view-events--upcoming .events-upcoming__footer {
    padding-bottom: 8rem;
    margin-top: 0px
}

/*
#main-content .layout-content {
    margin-bottom: .5rem;
}
    */

#webformular-panel {
    padding-top: .5rem;

}

#webformular-panel h2 {
    color: var(--babel-black);
    font-size: 2.5rem;
}

/* ------------------------------------------------------------
 * KONTAKT-SEITE
 * ------------------------------------------------------------ */
body.canvas-page--kontakt main {
    background-color: #E6E079;
}

body.canvas-page--kontakt .layout-content {
    background-color: transparent;
    color: #D52600;
}

body.canvas-page--kontakt .layout-content a {
    color: #D52600;
    text-decoration: underline;
    text-decoration-color: #D52600;
}

body.canvas-page--kontakt .leaflet-bar a {
    text-decoration: none !important;
}

body.canvas-page--kontakt .layout-content a:hover {
    color: #D52600;
    text-decoration: none;
}

body.canvas-page--kontakt .leaflet-tile-pane {
    filter: grayscale(1) brightness(0.7) sepia(0.8) hue-rotate(15deg);
}

body.canvas-page--kontakt .zwei-spalten__rechts .zwei-spalten {
    margin-top: 1rem;
}

body.canvas-page--kontakt .leaflet-marker-icon {
    background: transparent !important;
    border: none !important;
    filter: hue-rotate(140deg) saturate(3) brightness(0.6);
}

/* ------------------------------------------------------------
 * KONTAKT-SEITE: Formular (wie Infobar-Formular)
 * ------------------------------------------------------------ */
body.canvas-page--kontakt .zwei-spalten__links label,
body.canvas-page--kontakt .zwei-spalten__links legend,
body.canvas-page--kontakt .zwei-spalten__links p {
    color: #D52600;
}

body.canvas-page--kontakt .zwei-spalten__links input,
body.canvas-page--kontakt .zwei-spalten__links textarea,
body.canvas-page--kontakt .zwei-spalten__links select {
    background: transparent;
    border-color: #D52600;
    color: #D52600;
    border-radius: 16px;
}

body.canvas-page--kontakt .zwei-spalten__links input.form-text,
body.canvas-page--kontakt .zwei-spalten__links input.form-email {
    border: none;
    border-bottom: 1px solid #D52600;
    border-radius: 0;
    font-size: 1.2rem;
}

body.canvas-page--kontakt .zwei-spalten__links input::placeholder,
body.canvas-page--kontakt .zwei-spalten__links textarea::placeholder {
    color: #D52600;
    font-size: 1.2rem;
}

body.canvas-page--kontakt .zwei-spalten__links .form-item__description {
    font-size: 1.2rem;
    color: #D52600;
}

body.canvas-page--kontakt .zwei-spalten__links .webform-submission-form {
    display: block;
}

body.canvas-page--kontakt .zwei-spalten__links .form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

body.canvas-page--kontakt .zwei-spalten__links button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-family: 'League Spartan', sans-serif;
    font-size: 1.5625rem;
    font-weight: 300;
    line-height: 1;
    color: #D52600;
    background: none;
    border: 1.4px solid #D52600;
    border-radius: 12px;
    padding: 0 1rem;
    height: 49px;
    width: 180px;
    cursor: pointer;
    margin-left: auto;
    transition: background-color 0.15s ease, color 0.15s ease;
}

body.canvas-page--kontakt .zwei-spalten__links button[type="submit"]:hover {
    background: #D52600;
    color: #E6E079;
}

body.canvas-page--kontakt .zwei-spalten__links button[type="submit"]:hover .btn-icon path {
    stroke: #E6E079;
}

body.canvas-page--kontakt .zwei-spalten__links .form-managed-file {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 85px;
    border: 1.3px solid #D52600;
    border-radius: 16px;
    background: transparent;
    cursor: pointer;
}

body.canvas-page--kontakt .zwei-spalten__links .form-managed-file input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

body.canvas-page--kontakt .zwei-spalten__links .form-managed-file::before {
    content: "Datei hochladen";
    font-family: 'Bitter', serif;
    font-size: 15px;
    font-weight: 400;
    color: #D52600;
    pointer-events: none;
    order: 2;
}

body.canvas-page--kontakt .zwei-spalten__links .form-managed-file::after {
    content: "";
    display: block;
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='43' height='43' viewBox='0 0 43 43' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 17.7505C26.8584 18.5318 29.1762 20.6212 30.2725 23.3335C30.4405 23.7492 30.5551 24.0314 30.6572 24.2329C30.7608 24.4372 30.8181 24.4865 30.8359 24.4985C30.864 24.5174 30.9247 24.5482 31.1035 24.5659C31.2888 24.5843 31.5358 24.5845 31.9141 24.5845H33.625C36.1103 24.5845 38.125 26.5992 38.125 29.0845V31.8345C38.1247 34.3194 36.1102 36.3345 33.625 36.3345H10.7363L10.46 36.3267L10.4482 36.3257C7.34384 36.1684 4.87529 33.6027 4.875 30.4595C4.875 27.2148 7.50533 24.5845 10.75 24.5845H11.0859C11.4642 24.5845 11.7112 24.5843 11.8965 24.5659C12.0753 24.5482 12.136 24.5174 12.1641 24.4985C12.1819 24.4865 12.2392 24.4372 12.3428 24.2329C12.4449 24.0314 12.5595 23.7492 12.7275 23.3335C13.8238 20.6212 16.1416 18.5318 19 17.7505V18.7935C16.5662 19.5454 14.601 21.3661 13.6543 23.7085C13.4933 24.1068 13.3611 24.4358 13.2354 24.6841C13.1115 24.9286 12.9592 25.1686 12.7236 25.3276C12.4982 25.4796 12.2476 25.536 11.9951 25.561C11.749 25.5854 11.4438 25.5845 11.0859 25.5845H10.75C8.05761 25.5845 5.875 27.7671 5.875 30.4595L5.88086 30.7026C6.00353 33.1943 7.99735 35.1942 10.4863 35.3267H10.4873L10.7637 35.3345H33.625C35.4975 35.3345 37.0263 33.8635 37.1201 32.0142L37.125 31.8345V29.0845C37.125 27.1515 35.558 25.5845 33.625 25.5845H31.9141C31.5562 25.5845 31.251 25.5854 31.0049 25.561C30.7524 25.536 30.5018 25.4796 30.2764 25.3276C30.0408 25.1686 29.8885 24.9286 29.7646 24.6841C29.6389 24.4358 29.5067 24.1068 29.3457 23.7085C28.399 21.3661 26.4338 19.5454 24 18.7935V17.7505Z' fill='%232A2020'/%3E%3Cpath d='M21.5 5.375L21.1465 5.02145L21.5 4.66789L21.8536 5.02145L21.5 5.375ZM22 23.2917C22 23.5678 21.7762 23.7917 21.5 23.7917C21.2239 23.7917 21 23.5678 21 23.2917L21.5 23.2917L22 23.2917ZM14.3334 12.5417L13.9798 12.1881L21.1465 5.02145L21.5 5.375L21.8536 5.72855L14.6869 12.8952L14.3334 12.5417ZM21.5 5.375L21.8536 5.02145L29.0203 12.1881L28.6667 12.5417L28.3132 12.8952L21.1465 5.72855L21.5 5.375ZM21.5 5.375L22 5.375L22 23.2917L21.5 23.2917L21 23.2917L21 5.375L21.5 5.375Z' fill='%232A2020'/%3E%3C/svg%3E");
}

body.canvas-page--kontakt .zwei-spalten__links .form-managed-file [data-drupal-selector="edit-datei-upload-button"] {
    display: none !important;
}

@media (max-width: 768px) {
    body.canvas-page--kontakt .zwei-spalten__links .webform-submission-form {
        grid-template-columns: 1fr;
    }

    body.canvas-page--kontakt .zwei-spalten__links button[type="submit"] {
        width: 100%;
        margin-left: 0;
    }

    .webform-submission-newsletter-anmeldung-add-form .webform-button--submit {
        width: 100%;
    }
}

body.canvas-page--kontakt .zwei-spalten__rechts .zwei-spalten .zwei-spalten__rechts .text-block p {
    color: #D52600;
}

body.canvas-page--kontakt .text-block h1.text-block__titel {
    color: #D52600;
}

body.canvas-page--kontakt .text-block a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

body.canvas-page--kontakt .text-block a:hover {
    color: inherit;
    border-bottom-width: 2px;
}

body.canvas-page--kontakt .zwei-spalten__links input.form-text {
    padding-left: 0;
}

body.path-ueber #block-babel-standorte-block {
    background-color: #E6E079;
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
}

/*body.path-ueber #block-babel-content {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50% + var(--babel-gutter));
}
*/
body.canvas-page--kontakt .geolocation-map-container {
    border-radius: 16px;
    overflow: hidden;
}

div.leaflet-control-zoom.leaflet-bar.leaflet-control a {
    padding: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: black;
}

/* Leaflet-Popup — global (Standorte + Kontakt + alle Karten)
   ------------------------------------------------------------ */
.leaflet-container .leaflet-popup-content-wrapper {
    border-radius: 8px;
    font-family: 'Bitter', serif;
    background-color: #E6E079 !important;
    color: #D52600 !important;
    font-size: 1rem;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.leaflet-container .leaflet-popup-content {
    color: #D52600 !important;
    font-family: 'Bitter', serif;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0.75rem 1rem;
}

.leaflet-container .leaflet-popup-content p {
    color: #D52600 !important;
    margin: 0;
}

.leaflet-container .leaflet-popup-content a {
    color: #D52600 !important;
    text-decoration: underline;
}

.leaflet-container .leaflet-popup-content a:hover {
    text-decoration: none;
}

.leaflet-container .leaflet-popup-tip {
    background-color: #E6E079 !important;
}

a.leaflet-popup-close-button {
    display: none;
}

div#block-babel-team-block .view-team,
div#block-babel-views-block-team-block-1 .view-team,
div#block-babel-views-block-mitglieder-block-mitglieder .view-mitglieder {
    padding-top: 5rem;
}

.block-views-blockstandorte-karte-block-standorte h2 {
    margin-bottom: 2rem
}

div.leaflet-control-attribution.leaflet-control a {
    color: var(--babel-red);
}

#event-anmeldung-form {
    border: 1px solid var(--babel-red);
    border-radius: 1rem;
    padding: 2rem;
}

/* All in One Accessibility Widget */
#aioa-trigger-button {
    display: block !important;
}

.view-events--upcoming,
.view-events--page {
    margin-bottom: 0px;
}

/* Pico article-Background auf Node-Detailseiten zurücksetzen */
.node--type-leitsatz.node--view-mode-full,
.node--type-mitglieder.node--view-mode-full {
    background: none;
    box-shadow: none;
    padding: 0;
}


input#edit-email--3,
input#edit-nachname,
input#edit-vorname {
    margin: 0px;
}

#webformular-panel {
    border-bottom: 1px solid black;
}

/* ------------------------------------------------------------
 * WEBFORM SUBMIT BUTTON — Icon-Crossfade on hover
 * Normal: altes Papierflugzeug (.btn-icon--default)
 * Hover:  neues Send-Icon   (.btn-icon--hover)
 * ------------------------------------------------------------ */
.btn-icon-wrap {
    display: none;
}

.webform-submission-form button[type="submit"] .btn-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 24px;
}

.webform-submission-form button[type="submit"] .btn-icon-wrap .btn-icon {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.15s ease;
}

.webform-submission-form button[type="submit"] .btn-icon--default { opacity: 1; }
.webform-submission-form button[type="submit"] .btn-icon--hover   { opacity: 0; }

.webform-submission-form button[type="submit"]:hover .btn-icon--default { opacity: 0; }
.webform-submission-form button[type="submit"]:hover .btn-icon--hover   { opacity: 1; }



.frc-captcha {
    border-radius: 12px;
}