.r{
    color: #e53336;
}

.b{
    color: #1d5a9d;
}

button{
    white-space: nowrap;
}

.curved{
    background-image: url(/wp-content/themes/silben/assets/img/header-bg-9.webp);
    background-size: cover !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    padding-bottom: 190px !important;
    margin-bottom: 60px;
}

body .et_pb_section {
    background-color: transparent;
}

#main-menu .et-menu li
{
    font-size: 16px;
}
#main-menu .et-menu li a
{
    background: #FFF;
    border-radius: 0;
    border: 0;
    padding: 7px 20px;
    color: #1C5C96;
    border-radius: 30px;
}

#main-menu .et-menu li ul li a
{
    background: #1C5C96;
    color: #FFF;
    
}
#main-menu .et-menu > li
{
    margin: 0 !important;
}

#main-menu .et-menu li a:hover,
#main-menu .et-menu li a:active,
#main-menu .et-menu li.current-menu-item a,
#main-menu .et-menu li.current-menu-ancestor > a
{
    background: #c01e1d;
    color: #FFF;
    border-color: #c01e1d;
    opacity: 1;
}

#main-menu ul.sub-menu
{
    box-shadow: none;
    border: 0;
    background: transparent;
    padding-top: 5px;
}

#main-menu ul.sub-menu li{
    padding: 0;
    margin: 2px 0;
    white-space: nowrap;
}

.et-menu .menu-item-has-children>a:first-child:after{
    display: none;
}

#main-menu .et-menu li li a
{
    width: auto;
}

#main-menu.et_pb_menu .et_pb_menu__menu>nav>ul>li>ul {
    top: calc(100% - 1px);
    right: 11px;
    left: auto;
    width: auto;
    display: flex;
    flex-direction: column;
}

#main-menu.et_pb_menu .et_pb_menu__menu>nav>ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    background: #FFF;
    padding: 10px 3px !important;
    -webkit-box-shadow: 5px 5px 30px 5px rgba(0,0,0,0.2); 
    box-shadow: 5px 5px 30px 5px rgba(0,0,0,0.2);
    border-radius: 30px;
}

audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
  display: none;
}

.gebaerdeAudio 
{
    text-align: center;
    display: flex;
    justify-content: center;
}

.gebaerdeAudio audio{
    max-width: 95%;
    margin: 3px 0;
}

/* ---------------------------------------------------------------------------
 * Gebärden-Video (#gebaerdeVideo)
 * Feste Darstellungshöhe über das Seitenverhältnis, damit der Inhalt beim
 * Wechsel der Silbe nicht springt (das Video kollabiert sonst kurz während
 * des Nachladens der neuen Quelle).
 * ------------------------------------------------------------------------- */
#gebaerdeVideo video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: #000;
}

/* Platzhalter-Overlay, wenn keine Videoquelle vorhanden ist. Das Video bleibt
 * als Box in der Höhe erhalten, der Platzhalter deckt es ab (kein Springen). */
#gebaerdeVideo .et_pb_video_box {
    position: relative;
}

#gebaerdeVideo .gebaerde-media-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#gebaerdeVideo .gebaerde-media-placeholder[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------------
 * Gebärden-Vorschaubild (#gebaerdeBild)
 * Nimmt immer die volle Breite der vorhandenen Spalte ein (überschreibt das
 * feste width-Attribut aus Divi und den Flex-Wrap).
 * ------------------------------------------------------------------------- */
#gebaerdeBild,
#gebaerdeBild .et_pb_image_wrap {
    display: block;
    width: 100%;
    border-radius: 30px;
    overflow: hidden;
}

#gebaerdeBild img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    border-radius: 30px;
}

/* ---------------------------------------------------------------------------
 * Gebärden-Text (#gebaerdeText): Subline aus data-subline.
 * Eigene Zeile, deutlich zurückhaltender als der Haupttext.
 * ------------------------------------------------------------------------- */
#gebaerdeText .gebaerde-subline {
    display: block;
    margin-top: 4px;
    font-size: 0.8em;
    font-weight: 400;
    line-height: 1.3;
    color: #8a97a5;
}

/* ---------------------------------------------------------------------------
 * Gebärden-Slider (#gebaerden) mit Pfeil-Navigation (.gebaerden-nav)
 * Horizontaler Slider aus den .gebaerde-Elementen. Blättern über die Pfeile,
 * nicht endlos – die Pfeile werden an den Enden deaktiviert.
 * ------------------------------------------------------------------------- */
.gebaerden-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 10px 0 0;
}

.gebaerden-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    background: #fff;
    color: #1C5C96;
    border: 1px solid #d5dde8;
    border-radius: 50%;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.gebaerden-arrow svg {
    display: block;
    width: 20px;
    height: 20px;
}

.gebaerden-arrow:hover:not(:disabled) {
    border-color: #1C5C96;
    box-shadow: 0 2px 8px rgba(28, 92, 150, 0.15);
}

.gebaerden-arrow:disabled {
    opacity: .35;
    cursor: default;
}

/* Passen alle Karten ohne Overflow, werden die Pfeile ausgeblendet. */
.gebaerden-nav:not(.has-overflow) .gebaerden-arrow {
    display: none;
}

/* Standard: Grid – alle Gebärden sofort sichtbar, 6 pro Zeile, gleich groß. */
#gebaerden {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 0;
    padding: 6px 0 10px;
}

/* Slider-Modus – nur aktiv, wenn JS die Klasse setzt (ENABLE_SLIDER = true).
 * Setzt #gebaerden von Grid zurück auf horizontalen Scroll-Slider. */
#gebaerden.gebaerden--slider {
    display: flex !important;
    grid-template-columns: none;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    align-items: stretch;
    margin: 0 !important;
    padding: 6px 2px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* Scrollbar ausblenden – navigiert wird über die Pfeile. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Karte: Bild-Kachel links, Silbe rechts (Aufteilung analog Screenshot). */
#gebaerden .gebaerde {
    position: relative;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: auto !important;
    min-width: 0;
    max-width: none;
    margin: 0 !important;
    padding: 10px 20px 10px 10px;
    cursor: pointer;
    background: #fff;
    color: #1C5C96;
    border: 1px solid #d5dde8;
    border-radius: 16px;
    text-align: left;
    scroll-snap-align: start;
    user-select: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Linke Spalte: Bild als kleines Thumbnail in heller, abgerundeter Kachel. */
#gebaerden .gebaerde .et_pb_image {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 6px !important;
    width: 60px !important;
    max-width: 60px !important;
    background: #f2f5f8;
    border-radius: 10px;
}

#gebaerden .gebaerde .et_pb_image .et_pb_image_wrap {
    display: block;
}

#gebaerden .gebaerde .et_pb_image img {
    display: block;
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    object-fit: cover;
}

/* Rechte Spalte: Silbe. */
#gebaerden .gebaerde .et_pb_text {
    flex: 1 1 auto;
    margin: 0 !important;
    padding: 0 !important;
}

#gebaerden .gebaerde .et_pb_text_inner p {
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
    color: inherit;
    font-weight: 600;
}

/* Im Grid (schmale, feste Spalten) darf der Silbentext umbrechen, damit lange
 * Labels nicht über den Kartenrand hinausragen. */
#gebaerden:not(.gebaerden--slider) .gebaerde .et_pb_text_inner p {
    white-space: normal;
    overflow-wrap: anywhere;
}

#gebaerden .gebaerde:hover {
    border-color: #1C5C96;
    box-shadow: 0 2px 8px rgba(28, 92, 150, 0.15);
}

#gebaerden .gebaerde:focus-visible {
    outline: 2px solid #1C5C96;
    outline-offset: 2px;
}

/* Aktiv: hervorgehobener Rahmen + Häkchen-Badge */
#gebaerden .gebaerde.aktiv,
#gebaerden .gebaerde.aktiv:hover {
    border-color: #1C5C96;
    border-width: 2px;
    padding: 9px 19px 9px 9px;
    box-shadow: 0 2px 10px rgba(28, 92, 150, 0.18);
}

#gebaerden .gebaerde.aktiv::after {
    content: "\2713";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #1C5C96;
    border-radius: 50%;
}

#gebaerden::-webkit-scrollbar {
    display: none;
}