/* accordeon manuell */
.mm-accordion {
  margin: 1rem 0;
  border: 1px solid #ddd;
  border-radius: .5rem;
  background: #fff;
  overflow: hidden;
}

/* accordeon Titelzeile */
.mm-accordion > summary {
  list-style: none;           /* entfernt den Standard-Pfeil in manchen Browsern */
  cursor: pointer;
  padding: .9rem 1rem;
  font-weight: 600;
  position: relative;
  outline: none;
  user-select: none;
}

/* accordeon eigener Pfeil */
.mm-accordion > summary::after {
  content: "▸";
  position: absolute;
  right: 1rem;
  transition: transform .2s ease;
}

/* accordeon Inhalt */
.mm-accordion__content {
  padding: 0 1rem 1rem 1rem;
}

/* accordeon Fokus/Interaktion */
.mm-accordion > summary:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 120, 212, .35);
  border-radius: .25rem;
}

/* accordeon Offen-Zustand */
.mm-accordion[open] > summary::after {
  transform: rotate(90deg);
}

/* accordeon optional: sanfte Auf/Zu-Animation (progressive enhancement) */
@supports (animation-timeline: auto) {
  .mm-accordion {
    transition: all .2s ease;
  }
}



/*
  Stellt sicher, dass unser manuelles iFrame
  die Lightbox sauber ausfüllt.
*/
.featherlight .hotspot-iframe {
  border: none; /* Entfernt den Standard-Rahmen */
  width: 100%;  /* Füllt die gesamte Breite der Lightbox */
  height: 70vh; /* Setzt die Höhe auf 70% der Bildschirmhöhe */
}

.falschespasswort {
  
  color:red;
  background:#fff;
  font-size:35px;
  text-align:center;
}




.rainbow-btn .wp-block-button__link {
  display: inline-block;
  padding: 0;                    /* Grafik übernimmt Abstand */
  width: 600px;                  /* Passe Breite an dein PNG an */
  height: auto;                  /* Passe Höhe an dein PNG an */
  background: url("https://klick4all.de/wp-content/uploads/2025/07/03.K4A_LOGO_der_verfluchte_schal2-scaled.png") 
              no-repeat center/contain;
  text-shadow: none;
}


.rainbow-btn .wp-block-button__link {
  box-shadow: 0 0 0 4px rgba(255,0,0,1),
              0 0 0 6px rgba(255,127,0,1),
              0 0 0 8px rgba(255,255,0,1),
              0 0 0 10px rgba(0,255,0,1),
              0 0 0 12px rgba(0,255,255,1),
              0 0 0 14px rgba(0,0,255,1),
              0 0 0 16px rgba(75,0,130,1),
              0 0 0 18px rgba(143,0,255,1);
  transition: box-shadow 0.3s ease;
}

/* 3) Optional: beim Hover den Rand dicker oder animiert verschieben */
.rainbow-btn .wp-block-button__link:hover {
  box-shadow: 0 0 0 6px rgba(255,0,0,1),
              0 0 0 9px rgba(255,127,0,1),
              0 0 0 12px rgba(255,255,0,1),
              0 0 0 15px rgba(0,255,0,1),
              0 0 0 18px rgba(0,255,255,1),
              0 0 0 21px rgba(0,0,255,1),
              0 0 0 24px rgba(75,0,130,1),
              0 0 0 27px rgba(143,0,255,1);
}








/*
  Versteckt die Pojo Accessibility Toolbar, aber NUR auf
  Seiten, die unser iFrame-Template verwenden.
*/
body.page-template-wp-custom-template-nur-inhalt-f-r-iframe #pojo-a11y-toolbar {
  display: none !important;
}

/*
  Finaler Fix für die iFrame-Seite:
  - Hintergrund auf Weiß erzwingen
  - Admin-Leiste und Barrierefreiheitstool ausblenden
*/

/* 1. Erzwingt einen weißen Hintergrund für die GESAMTE iFrame-Seite */
html,
body.page-template-wp-custom-template-nur-inhal-f-r-iframe {
  background: #ffffff !important;
}

/* 2. Versteckt die Admin-Leiste NUR auf diesem Template */
body.page-template-wp-custom-template-nur-inhal-f-r-iframe #wpadminbar {
  display: none !important;
}

/* 3. Setzt den oberen Rand der Seite zurück, den die Admin-Leiste hinterlässt */
body.page-template-wp-custom-template-nur-inhal-f-r-iframe html {
    margin-top: 0 !important;
}


/* --- Anpassung für Draw Attention Tooltips auf Mobilgeräten --- */


@media (max-width: 781px) {
  .leaflet-tooltip {
    /* Regeln für Größe und Umbruch bleiben gleich */
    white-space: normal !important; 
    font-size: 14px !important;
    width: 55vw;
    max-width: 240px;
    box-sizing: border-box;

    /* NEU: Animiere jetzt die 'left'-Eigenschaft statt 'transform' */
    transition: left 0.1s ease-out;
  }
}


@media (max-width: 781px) {
  form.password-protect-form {
    display: flex;
    flex-direction: column;
 
    align-items: center;
  }

  /* Fügt Abstand hinzu und sorgt dafür, dass das Eingabefeld trotzdem die volle Breite hat. */
  form.password-protect-form input#game_password {
  
    width: 100%;
    margin-bottom: 1rem;
  }
}


@media (max-width: 781px) {

  /*
    Finaler Fix: Zwingt die "Volle Breite"-Container dazu,
    sich an ihren Eltern-Container zu halten und nicht auszubrechen.
  */
  .wp-block-group.alignfull,
  .entry-content.alignfull {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle {
    position: absolute;
    top: 200px;
}

  
  /*
  Globale Regel: Entfernt das Padding links/rechts
  für ALLE Kadence Tab-Inhalte auf der Webseite.
*/
.wp-block-kadence-tabs .kt-tabs-content-wrap .wp-block-kadence-tab {
    border-top: 0px solid #ffffff;
    border-right: 0px solid #ffffff;
    border-bottom: 0px solid #ffffff;
    border-left: 0px solid #ffffff;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    padding-top: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem; 
    background: rgba(0, 0, 0, 0);
}

/*
  Sorgt für korrekten Zeilenumbruch bei langen Wörtern und Links
*/

/* 1. Automatische Silbentrennung für normale Textabsätze */
.entry-content p {
  hyphens: auto;
}

/* 2. "Notbremse" für superlange Links und andere unbrechbare Wörter */
.entry-content {
  overflow-wrap: break-word;
}
  
  
  /* Aktiviert die automatische, sprachbasierte Silbentrennung für Absätze */
p {
  -webkit-hyphens: auto; /* Für ältere Webkit-Browser */
  -ms-hyphens: auto;     /* Für Microsoft-Browser */
  hyphens: auto;
}

/* Du kannst es auch allgemeiner für den gesamten Body anwenden */
body {
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
}
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.max {
  max-width:600px;
}

@media (max-width: 600px) {
  
  /* KORREKTUR FÜR DEN HORIZONTALEN SCROLLBALKEN */
  .has-global-padding > .alignfull {
    
    /* Passt den negativen Rand an deinen neuen 2%-Seitenabstand an.
      Das behebt das Überlappen und entfernt den Scrollbalken.
    */
    margin-left: -2% !important;
    margin-right: -2% !important;
  }

}

@media (max-width: 600px){
    .has-global-padding{
        padding-left: 2% !important;
        padding-right: 2% !important;
    }
    
    .wp-block-audio {
    box-sizing: border-box;
    margin: 15px;
}
.max {
  max-width:80%;
}





}



.featherlight .featherlight-content {

    min-width: 50%!important;
}



#wp-skip-link.skip-link.screen-reader-text:focus {
    position: fixed !important;   /* nicht absolut, damit sicher sichtbar  */
    left: 1rem;
    top: 1rem;
    clip: auto !important;
    clip-path: none !important;
    width: auto !important;
    height: auto !important;
    padding: .5rem 1rem;
    background: #fff;
    color: #000;
    font-weight: 700;
    z-index: 100000;
}




.entry-content a:not(.wp-block-button__link):not(.no-rainbow)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, indigo, violet);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s ease;
  border-radius: 2px;
}
.entry-content a:not(.wp-block-button__link):not(.no-rainbow):hover::after,
.entry-content a:not(.wp-block-button__link):not(.no-rainbow):focus::after {
  transform: scaleX(1);
}


/*<!-- Instagram‑Style Post -->*/
 .insta-post {
    max-width: 500px;
    background: #fff;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight:500;
    color: #262626;
    margin: 1px auto;
    overflow: hidden;
  }
  .insta-post__header {
    display: flex;
    align-items: center;
    padding: 2px;
  }
 
  
  .insta-post__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin: 10px;
  background-image: url('https://klick4all.de/wp-content/uploads/2025/07/profilfoto_Sina.png');
  background-size: cover;        /* Füllt das Div komplett */
  background-position: center;   /* Zentriert das Bild */
  background-repeat: no-repeat;   /* Kein Kacheln */
  flex-shrink: 0;                 /* Verhindert, dass das Avatar‑Div beim Flex‑Layout schrumpft */
}

  .insta-post__username {
    font-weight: bold;
    font-size: 14px;
  }
  .insta-post__image img {
    display: block;
    width: 100%;
    height: auto;
  }
  .insta-post__caption {
    padding: 12px;
    font-size: 13px;
    line-height: 18px;
  }
  


/* 1) Sämtliche Links in Kadence Tabs zurücksetzen */
.wp-block-kadence-tabs a,
.wp-block-kadence-tabs a:visited,
.wp-block-kadence-tabs a:hover,
.wp-block-kadence-tabs a:focus {
  /* Standard‑Unterstreichung wiederherstellen */
  text-decoration: underline !important;
 

  /* alle Rainbow‑Pseudo‑Unterstriche/Pseudo‑Hintergründe entfernen */

}

/* 2) Falls Kadence Tab‑Titles eigene Klassen haben */
.wp-block-kadence-tabs .kadence-tabs-title,
.wp-block-kadence-tabs .kadence-tabs-title:hover,
.wp-block-kadence-tabs .kadence-tabs-title:focus {
  text-decoration: none !important;
  background: none !important;
  background-image: none !important;
}

/* 3) Und die ::after‑Pseudo‑Elemente ausblenden, die dein Rainbow erzeugt */
.wp-block-kadence-tabs a::after,
.wp-block-kadence-tabs .kadence-tabs-title::after {
  display: none !important;
}









.wp-block-button__link {
  /* Schriftgröße */
  font-size: 32px;
  line-height: 1.2;          /* optional, für bessere Vertikal-Ausrichtung */

  /* dein Regenbogen-Rand – unverändert */
  border: 3px solid transparent;
  border-radius: 8px;
  background-image:
    linear-gradient(black, black),
    linear-gradient(
      90deg,
      red, orange, yellow, green, cyan, blue, indigo, violet
    );
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  background-size: auto, 200% 100%;
  background-position: center, 0 0;
  transition: background-position 0.6s ease;
}

.wp-block-button__link:hover {
  background-position: center, 100% 0;
}




/* nur als Fallback, falls ein Theme Outline entfernt */
.leaflet-interactive:focus {
  outline: none;            /* Outline ohnehin wirkungslos bei SVG */
}

/* Tooltip‐Box weicher einblenden (optional) */
.leaflet-rrose-content-wrapper {
  transition: opacity .15s ease;
}







/* 1) Default: komplett transparent 
.hotspot-default {
  fill: transparent !important;
  stroke: transparent !important;
  stroke-width: 0 !important;
}

 2) Hover/Aktiv: semitransparente Fläche + Glow-Rand
.hotspot-default:hover,
.hotspot-default.highlight-visible {
 wieder weiße Fläche, halbtransparent 
  fill: #ffffff !important;
  fill-opacity: 0.5 !important;            hier 0.5, nicht 50% 
  
   Regenbogen-Stroke + Glow 
  stroke: url(#rainbow-stroke) !important;
  stroke-width: 6px !important;
  filter: url(#rainbow-glow) !important;
  
   weiche Übergänge 
  transition: 
    fill-opacity 0.3s ease,
    stroke-width 0.3s ease,
    filter 0.3s ease;
}

*/












/* Link-Styling */
/* ---------------------------------- */
/* 1) Menü-Links (kein Default-Underline) */
/* ---------------------------------- */
nav ul li a:not(.wp-block-button__link),
nav ul li a:not(.wp-block-button__link):visited {
  text-decoration: none !important;
  position: relative;
}
nav ul li a:not(.wp-block-button__link)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    red, orange, yellow, green, cyan, blue, indigo, violet
  );
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s ease;
  border-radius: 2px;
}
nav ul li a:not(.wp-block-button__link):hover::after,
nav ul li a:not(.wp-block-button__link):focus::after {
  transform: scaleX(1);
}

/* ---------------------------------------------------- */
/* 2) Fließtext-Links (.entry-content) mit Default-Underline */
/* ---------------------------------------------------- */
/* Basis: ganz normale Unterstreichung */
.entry-content a:not(.wp-block-button__link) {
  text-decoration: underline;    /* Default */
  position: relative;            /* für das Pseudo-Element */
}

/* Unterstreichung ausblenden nur beim Hover/Focus */
.entry-content a:not(.wp-block-button__link):hover,
.entry-content a:not(.wp-block-button__link):focus {
  text-decoration: none !important;
}

/* Pseudo-Element: Regenbogen-Unterstrich */
.entry-content a:not(.wp-block-button__link)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    red, orange, yellow, green, cyan, blue, indigo, violet
  );
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s ease;
  border-radius: 2px;
}

/* Hover/Focus: Regenbogen animiert einfahren */
.entry-content a:not(.wp-block-button__link):hover::after,
.entry-content a:not(.wp-block-button__link):focus::after {
  transform: scaleX(1);
}











/* Screenreader-Only Label */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  border: 0;
}

.password-protect-form {
  display: flex;              /* Block-Flex, damit margin:auto funktioniert */
  align-items: center;
  gap: 8px;                   /* Abstand Input ↔ Button */

  width: max-content;         /* nur so breit wie Inhalt */
  margin: 1em auto;           /* oben/unten 1em, links/rechts auto */
}


/* Gemeinsames Styling für Input &amp; Button */
.styled-password-input,
.password-protect-form .wp-block-button__link {
  font-size: 24px;
  line-height: 1.2;
  padding: 12px 16px;
  border-radius: 8px;
  border: 3px solid transparent;
  text-decoration: none;
  color: white;
  background-image:
    linear-gradient(black, black),
    linear-gradient(90deg,
      red, orange, yellow, green, cyan, blue, indigo, violet
    );
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  background-size: auto, 200% 100%;
  background-position: center, 0 0;
  transition: background-position 0.6s ease;
}

/* Input-spezifisch: schwarzer Kern &amp; Flex */
.styled-password-input {
  background-color: black;
  flex: 1;
  min-width: 0;
}

/* Button-spezifisch: Link-Verhalten */
.password-protect-form .wp-block-button__link {
  display: inline-block;
  background-color: black;
}

/* Fokus/Hover: Regenbogen-Rand animieren */
.styled-password-input:focus,
.password-protect-form .wp-block-button__link:hover {
  outline: none;
  background-position: center, 100% 0;
}






.hotspots-image-container, .leaflet-container {
    background: #000;
}



.phone {
  position: relative;
 /*  width: min(55vh, 100vw);     passt sich Höhe &amp; Breite an */
  aspect-ratio: 300 / 600;     /* dein PNG-Verhältnis */
  margin: 2rem auto;
   background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}



/* NUR im Phone-Frame: Scrollbar ausblenden */

/* Webkit (Chrome, Safari, Opera) */
.phone-frame .scroll-feed::-webkit-scrollbar {
  width: 0;    /* keine Breite */
  height: 0;   /* keine Höhe (horizontal scrollbar) */
}

/* Firefox */
.phone-frame .scroll-feed {
  scrollbar-width: none;      /* keine sichtbare Scrollbar */
  -ms-overflow-style: none;   /* IE10+ */
}


/* 1) Frame sauber aufsetzen, kein overflow:hidden mehr von außen */
.phone-frame {
  position: relative;
  width: min(45vh, 90vw);      /* passt sich Höhe &amp; Breite an */
  aspect-ratio: 300 / 600;     /* dein PNG-Verhältnis */
  margin: 2rem auto;
 
  background-image: url('https://klick4all.de/wp-content/uploads/2025/07/mobile-scaled.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 2) Scroll-Feed als absolut positionierte Box */
.phone-frame .scroll-feed {
  position: absolute;
  background-color: #000;
  top: 10%;       /* 60px von oben (60/600*100) */
  left: 6.67%;    /* 20px von links  (20/300*100) */
  width: 86.67%;  /* 260px Breit (260/300*100) */
  height: 80%;    /* 480px Hoch (480/600*100) */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 3) Bilder ganz normal reihen */
.phone-frame .scroll-feed img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 8px;
}













.wp-block-shortcode {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-1 * ((100vw - 100%) / 2));
  margin-right: calc(-1 * ((100vw - 100%) / 2));
  padding: 0;
}


div.hotspots-image-container{
  margin:none;
}



/* Floating Chat Button */
        #chat-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background-color: #007BFF;
            color: white;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }

        #chat-container {
            position: fixed;
            bottom: 80px;
            right: 20px;
            width: 300px;
            max-height: 400px;
            background-color: #f8f9fa;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            display: none;
            flex-direction: column;
            overflow: hidden;
        }

        #chat-header {
            background-color: #007BFF;
            color: white;
            padding: 10px;
            text-align: center;
            font-size: 18px;
        }

        #chat-content {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
            display: flex;
            flex-direction: column;
        }

        .message {
            margin: 5px 0;
        }

        .question {
            align-self: flex-start;
            background-color: #d1ecf1;
            padding: 10px;
            border-radius: 10px;
            max-width: 80%;
        }

        .answer {
            align-self: flex-end;
            background-color: #c3e6cb;
            padding: 10px;
            border-radius: 10px;
            max-width: 80%;
        }

        .welcome {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }

        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #007BFF;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        #question-list {
            display: flex;
            flex-direction: column;
        }

        .question-button {
            margin: 5px 0;
            padding: 10px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            text-align: left;
        }

        .question-button:hover {
            background-color: #0056b3;
        }

        #chat-close {
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            color: white;
            font-size: 18px;
            cursor: pointer;
        }

        /* Typing animation */
        .typing {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .dot {
            width: 6px;
            height: 6px;
            background-color: #007BFF;
            border-radius: 50%;
            animation: blink 1.4s infinite;
        }

        .dot:nth-child(2) {
            animation-delay: 0.2s;
        }

        .dot:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes blink {
            0%, 80%, 100% {
                opacity: 0;
            }
            40% {
                opacity: 1;
            }
        }

        /* Smooth animations */
        #chat-container.open {
            display: flex;
            animation: fadeIn 0.3s ease-in-out;
        }

        #chat-container.close {
            animation: fadeOut 0.3s ease-in-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeOut {
            from {
                opacity: 1;
                transform: translateY(0);
            }
            to {
                opacity: 0;
                transform: translateY(20px);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation: none !important;
                transition: none !important;
            }
        }
        
        
        
        
/* === Basisschrift === */
body {
  font-family: 'Bega', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1.6;

}

/* === Überschriften === */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Bega', sans-serif;
  font-style: normal;
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.2;
  color: #fff;
}

h1 {
  font-weight: 900;
  font-size: 3.5rem;
}

h2 {
  font-weight: 700;
  font-size: 2rem;
}

h3 {
  font-weight: 500;
  font-size: 1.75rem;
}

h4 {
  font-weight: 400;
  font-size: 1.5rem;
}

h5 {
  font-weight: 400;
  font-size: 1.25rem;
}

h6 {
  font-weight: 400;
  font-size: 1.1rem;
}

/* === Kursiv für Zitate etc. === */
em, i, blockquote {
  font-style: italic;
  font-weight: 300;
}

/* === Fett im Fließtext === */
strong, b {
  font-weight: 600;
}

/* === Optional: Button oder Navigation === */
.nav, .button {
  font-family: 'Bega', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}




 @font-face {
  font-family: 'Bega';
  src: url('/wp-content/themes/twentytwentyfive/fonts/Bega-Light.woff2') format('woff2'),
       url('/wp-content/themes/twentytwentyfive/fonts/Bega-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bega';
  src: url('/wp-content/themes/twentytwentyfive/fonts/Bega-LightItalic.woff2') format('woff2'),
       url('/wp-content/themes/twentytwentyfive/fonts/Bega-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Bega';
  src: url('/wp-content/themes/twentytwentyfive/fonts/Bega-ThinItalic.woff2') format('woff2'),
       url('/wp-content/themes/twentytwentyfive/fonts/Bega-ThinItalic.woff') format('woff');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Bega';
  src: url('/wp-content/themes/twentytwentyfive/fonts/Bega-SemiboldItalic.woff2') format('woff2'),
       url('/wp-content/themes/twentytwentyfive/fonts/Bega-SemiboldItalic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Bega';
  src: url('/wp-content/themes/twentytwentyfive/fonts/Bega-MediumItalic.woff2') format('woff2'),
       url('/wp-content/themes/twentytwentyfive/fonts/Bega-MediumItalic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Bega';
  src: url('/wp-content/themes/twentytwentyfive/fonts/Bega-Extralight.woff2') format('woff2'),
       url('/wp-content/themes/twentytwentyfive/fonts/Bega-Extralight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bega';
  src: url('/wp-content/themes/twentytwentyfive/fonts/Bega-Thin.woff2') format('woff2'),
       url('/wp-content/themes/twentytwentyfive/fonts/Bega-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bega';
  src: url('/wp-content/themes/twentytwentyfive/fonts/Bega-ExtralightItalic.woff2') format('woff2'),
       url('/wp-content/themes/twentytwentyfive/fonts/Bega-ExtralightItalic.woff') format('woff');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Bega';
  src: url('/wp-content/themes/twentytwentyfive/fonts/Bega-BoldItalic.woff2') format('woff2'),
       url('/wp-content/themes/twentytwentyfive/fonts/Bega-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Bega';
  src: url('/wp-content/themes/twentytwentyfive/fonts/Bega-Regular.woff2') format('woff2'),
       url('/wp-content/themes/twentytwentyfive/fonts/Bega-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bega';
  src: url('/wp-content/themes/twentytwentyfive/fonts/Bega-Italic.woff2') format('woff2'),
       url('/wp-content/themes/twentytwentyfive/fonts/Bega-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Bega';
  src: url('/wp-content/themes/twentytwentyfive/fonts/Bega-Medium.woff2') format('woff2'),
       url('/wp-content/themes/twentytwentyfive/fonts/Bega-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bega';
  src: url('/wp-content/themes/twentytwentyfive/fonts/Bega-Black.woff2') format('woff2'),
       url('/wp-content/themes/twentytwentyfive/fonts/Bega-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bega';
  src: url('/wp-content/themes/twentytwentyfive/fonts/Bega-Bold.woff2') format('woff2'),
       url('/wp-content/themes/twentytwentyfive/fonts/Bega-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bega';
  src: url('/wp-content/themes/twentytwentyfive/fonts/Bega-BlackItalic.woff2') format('woff2'),
       url('/wp-content/themes/twentytwentyfive/fonts/Bega-BlackItalic.woff') format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Bega';
  src: url('/wp-content/themes/twentytwentyfive/fonts/Bega-Semibold.woff2') format('woff2'),
       url('/wp-content/themes/twentytwentyfive/fonts/Bega-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}






/* --- Basis: Positionierung der Tabs --- */
.kt-tab-title {
  position: relative !important;
  display: inline-block !important;
}

/* --- Icon‑Swap --- */
.kt-tab-title .inactive-icon { display: inline-block !important; }
.kt-tab-title .active-icon   { display: none           !important; }
.kt-tab-title[aria-selected="true"] .inactive-icon { display: none           !important; }
.kt-tab-title[aria-selected="true"] .active-icon   { display: inline-block !important; }

/* beim Hover eines inaktiven Tabs: aktives Icon einblenden */
.kt-tab-title:hover:not([aria-selected="true"]) .inactive-icon { display: none           !important; }
.kt-tab-title:hover:not([aria-selected="true"]) .active-icon   { display: inline-block !important; }

/* Echter Tooltip‑Span: größere Schrift &amp; volle Deckkraft */
.kt-tab-tooltip {
  position: absolute;
  top: 100%;    /* direkt unter dem Tab */
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0px !important;             /* etwas mehr Abstand */
  background: #000 !important;  /* volles Schwarz, keine Transparenz */
  color: #fff;
  padding: 6px 10px;            /* etwas mehr Polster für größere Schrift */
  border-radius: 4px;
  white-space: nowrap;
  font-size: 14px !important;   /* statt 12px */
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease-in-out;
  z-index: 9999;
}

/* Tooltip einblenden beim Hover */
.kt-tab-title:hover .kt-tab-tooltip {
  opacity: 1;
}







/* Exclusion class: remove rainbow underline and backgrounds */
.no-rainbow,
.no-rainbow a,
.no-rainbow a::before,
.no-rainbow a::after {
  text-decoration: underline !important;
  background: none !important;
  background-image: none !important;
}

/* Den Link standardmäßig verstecken */
.skip-link.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important; /* Wichtig für die Positionierung */
  width: 1px;
  word-wrap: normal !important;
}

/* Den Link beim Fokussieren sichtbar machen und alle anderen Stile überschreiben */
.skip-link.screen-reader-text:focus {
  position: fixed !important;
  top: 10px !important;
  left: 10px !important;
  background: #000000 !important;
  color: #ffffff !important;
  padding: 15px 23px !important;
  z-index: 100001 !important; /* Über fast allem */
  height: auto !important;
  width: auto !important;
  display: block !important;
  text-decoration: none !important;
  clip: auto !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  border-radius: 3px;
}

/*
FINALE, SICHERE LÖSUNG FÜR KADENCE TABS

*/
@media (max-width: 781px) {
  .kt-tabs-layout-vtabs.kt-tab-alignment-center > .kt-tabs-title-list {
    justify-content: center !important;
  }
}

@media (max-width: 781px) {
  
  /*
    SCHRITT 1: Inhalts-Container reparieren
    Hebt den "Volle Breite"-Effekt für den Hauptinhalt auf Mobilgeräten auf.
  */
  .entry-content.alignfull {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /*
    SCHRITT 2: Button-Container zentrieren
    Nachdem der übergeordnete Container repariert ist, funktioniert die Zentrierung.
  */
  .wp-block-buttons.is-content-justification-center {
    justify-content: center !important;
  }

}