/*!

Style for all Company Custom Post Types 

*/
:root {
    --dorange: #FFB424;
    --hellblau: #EDF5FF;
    --dunkelblau: #2C5669;
    --morange: #FFC85E;
    --horange: #FFEEC4;
    --cgreen: #7DE85E;
    --cred: #FF6E6E;
}

/*!

Später Löschen!!!

*/
body {
    background: #ffffff !important;
}

/*!
Breadcrumb
*/
p#breadcrumbs {
    margin-top: 1rem;
}

.allcontent {
 display: grid;
 grid-template-columns: 75% 30%;
  width: min(1200px, calc(100% - var(--seitenrand) * 2));
  margin: 0 auto;
  gap: 2rem;
}
.maincontainer {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--seitenrand);
    padding-right: var(--seitenrand);

}
/* Steht .maincontainer in .allcontent, bringt der aeussere Container den
   Seitenrand schon mit — sonst waere der Abstand doppelt. */
.allcontent .maincontainer {
    padding-left: 0;
    padding-right: 0;
}


.headercompany {
    margin-bottom: 4rem;
}

.headerbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 1200px;
    margin: 2rem 1rem 1rem 1rem;
}

.headerbox .imgfilter img,
.headerboxspec .imgfilter img {
    border-radius: 10px;
}

.content-wrapper {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
}


.buttonsheader {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

button#meinButton {
    width: 10rem; 
    max-width: 10rem;
    margin: 0.5rem;
    background-color: var(--dunkelblau);
    font-size: 1rem;
}

.buttonsheader button:nth-child(2) {
    background-color: var(--dorange) !important;
}

.buttonsheader a {
    color: white;
}
.headerbox button#meinButton a{
    color:white; 
}

/*teasertext*/

h1.teaserh1 {
    margin-bottom: 1rem;
    font-size: clamp(1.3rem, 2vw, 2rem);
}

.teasertext {
    margin: 0rem 3rem 0rem 2rem;
    display: flex;
    flex-direction: column;
}

/*Image Company*/
.imagecompany {
    width: 100%;
    height: auto;
    max-width: 145px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: solid;
    border-width: 2px;
    border-color: #cacaca;
    border-radius: 5px;
}



/*Sections*/



.navinpost {

    display: flex;
    justify-content: center;
    z-index: 5;
    justify-content: flex-start;
    border-bottom-style: solid;
    padding-bottom: 0.5rem;
    border-bottom: #e8e8e8;
    border-bottom-style: solid;
    scrollbar-color: var(--dunkelblau) #BBB;
}

.fixednav {
    position: fixed;
    top: 80px;
    position: fixed;
    left: 0;
    right: 0;
    background: white;
    height: 3rem;
    align-content: center;
    box-shadow: 0px 0px 3px 2px rgba(74, 74, 74, 0.1);
    background: #F8FBFF;
    z-index: 5;
}

.navalign {
    width: 1400px;
    justify-content: center;
    align-content: center;
    padding: 0;
    border: none;
}


/* Sprungnavigation der Detailseiten (Kurs, App, Anbieter): bleibt beim Scrollen
   oben hängen. Live macht das Theme-JS, das die Leiste ab .content-wrapper als
   .fixednav aus dem Fluss nimmt; hier ohne JS mit position: sticky, damit der
   Inhalt beim Andocken nicht springt. Wie live erst ab Tablet — darunter ist die
   Leiste eine waagerecht scrollbare Zeile im Fluss.
   Die negativen Ränder ziehen den Balken auf Fensterbreite (den Überhang
   klemmt #wrapper waagerecht ab), das Padding hält die Links auf Inhaltsbreite.
   z-index unter dem Header (#masthead: 11), damit dessen Menü-Dropdowns am
   Seitenanfang weiter über der Leiste liegen. */
@media only screen and (min-width: 769px) {
    .navcontainer {
        position: sticky;
        top: 0;
        z-index: 5;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: 0.4rem calc(50vw - 50%) 0;
        background: #F8FBFF;
        box-shadow: 0 0 3px 2px rgba(74, 74, 74, 0.1);
    }

    /* Kadence klemmt #wrapper mit overflow: clip gegen waagerechtes Überlaufen
       ab — das macht ihn zugleich zum Bezugsrahmen für sticky, in dem nichts
       scrollt. Nur die x-Achse zu klemmen behält den Schutz und gibt sticky die
       Seite als Bezugsrahmen zurück (gleiche Korrektur wie in filter-page.css). */
    #wrapper {
        overflow-x: clip;
        overflow-y: visible;
    }

    /* Sprungziele unterhalb der Leiste ausrichten, damit sie den Kopf des
       angesprungenen Abschnitts nicht verdeckt. */
    .maincontainer #overview,
    .maincontainer #features,
    .maincontainer #provider,
    .maincontainer #price,
    .maincontainer #alternativen,
    .maincontainer #test,
    .maincontainer #review {
        scroll-margin-top: 5rem;
    }
}


.inmenu-item {
    margin: 0 1rem;
    text-decoration: none;
    font-size: 1.2rem;
    white-space: nowrap;
}

.inmenu-item a:hover {
 color:#F88400;
}
.inmenu-item.active {

    text-decoration: underline;
    text-decoration-color: var(--dorange);
    text-decoration-thickness: 3px;

}

.secstyle {
    padding: 2rem;
    margin-top: 1rem;
    border-radius: 20px;
    border-style: solid;
    border-color: #D1E6FF;
    margin-bottom: 4rem;
    position: relative;
}

.secstylealt {
    padding: 0;
    border-style: none;
    display: flex;
}
.secstyle.fscroll {
    margin-bottom:8em; 
}
#alternativen::after {
    content: "";
    display: block;
    position: absolute;
    top: -16%;
    left: -38%;
    width: 2000px;
    height: 125%;
    background-color: var(--hellblau);
    z-index: -1;
}
#alternative.secstyle {
    margin-bottom: 5rem;
}
.altwrapper {
    overflow-x: auto;
    display: flex;
    align-items: stretch; /* alle Karten gleich hoch */
    white-space: nowrap; /* Inhalte in einer Zeile anzeigen */
    scrollbar-width: thin; /* Für Firefox: Dünne Scrollleiste */
    scrollbar-color: var(--dunkelblau) #f0f0f0; /* Für Firefox: Scrollbalken und Hintergrundfarbe */
    padding-bottom: 0.5rem; /* Platz für Scrollbalken, damit der Schatten nicht abgeschnitten wird */
}

.headerboxspec {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    justify-content: flex-start;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    margin: 2rem 1rem 1rem 1rem;
    align-items: center;
    flex: 0 0 320px; /* feste Kartenbreite, kein Schrumpfen im Scroll-Container */
    max-width: 350px;
    min-width: 320px;
    background-color: white;
}

/* Feste Logo-Box: unterschiedlich hohe Anbieter-Logos werden zentriert und
   verschieben die darunterliegenden Zeilen nicht mehr gegeneinander. */
.headerboxspec .imgfilter {
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem;
    width: 165px;
    height: 110px;
}

.headerboxspec .imgfilter a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.headerboxspec .imgfilter img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Titelbereich: Platz für zwei Zeilen reservieren, damit Sterne und Buttons
   aller Karten auf einer Linie liegen. */
.headerboxspec .teasertop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.6rem;
    margin-bottom: 1rem;
    text-align: center;
}

.headerboxspec .teasertop p {
    margin: 0;
    max-width: 220px;
    white-space: normal; /* hebt das nowrap des Scroll-Containers auf */
}

.headerboxspec .bottomteaser {
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 1.5rem;
}

.headerboxspec h2 {
    margin-bottom: 1rem;
}

.headerboxspec .catterm {
    padding: 13px 0px 13px 0px;
}

.headerboxspec .teasermid {
    margin: 0px;
}

.headerboxspec .glsr-summary {
    justify-content: center;
}

/* Zahl, Sterne und Zusatztext mittig unter dem Titel */
.headerboxspec .glsr-summary-text {
    text-align: center;
}

.headerboxspec .glsr-stars .glsr-star:last-child {
    margin-right: 0; /* sonst kippt die Sternreihe um 5px nach links */
}

/* Button immer bündig am unteren Kartenrand */
.headerboxspec .btn.btn-primary {
    margin-top: auto;
}

.teasermidalt {}

.sechead h2 {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

/*Sidebar*/

/*buttonssidebar*/


.customsidebar {
    display: none;
    position: fixed;
    left: calc(50% + 630px);
    top: 250px;
}


/*reviewsidebar*/
.reviewsidebar {
    width: 9rem;
}

/*Overview start */

#overview.secstyle {
    background-color: white;
    /* filter: drop-shadow( 8px 4px 0px  #FFC85E); */

}

.overviewwrapper {
    display: flex;

}

#overview h3 {
    margin-bottom: 1rem;
}


/*circle overview*/


.customcircle {
    display: flex;
    flex-wrap: wrap;
}

.circle {

    margin: clamp(0.2rem, 2vw, 1rem);
    position: relative;
    /* Ermöglicht die Positionierung des Hover-Textes relativ zum Kreis */
    cursor: pointer;
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;

}

.flexcircle {

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.circletext {
    font-weight: bold;
}


.hover-message {
    visibility: hidden;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 5px;

    /* Positionierung des Hover-Textes */
    position: absolute;
    bottom: 100%;
    /* Platziert den Text über dem Element */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: max-content;

    /* Transition für sanftes Einblenden */
    opacity: 0;
    transition: opacity 0.3s;
}

.circle:hover .hover-message {
    visibility: visible;
    opacity: 1;
}

.bottomoverview {
    margin: 2rem 0rem 0.5rem 0rem;
}

/*yt iframe */
.bottomoverview iframe {
    border-radius: 10px;
}

/*Overview End*/

/*Funktionen*/

.functionbackwrap {
    width: 1200px;
    position: relative;
    /* Eigenes Innenpolster statt des Außenabstands der Überschrift: der
       Abstand zur Balkenkante ist damit in jedem Layout gleich groß (im Grid
       kollabiert der Rand nicht, im Block-Layout unter 1280px schon). */
    padding-top: 3rem;
}

.functionbackwrap .sechead h2 {
    margin-top: 0;
}

.functionbackwrap h2 {
    color: white;
}

.funktionwrapper {
    display: flex;
    gap: 1vw;
    overflow-x: scroll;
}

.secfunction {
    background-color: white;
    position: relative;
}

/* Hintergrundbalken des Funktionsblocks. Er hängt am .functionbackwrap
   (Überschrift + Sektion) und wird über top/bottom aufgespannt, nicht über
   eine prozentuale Höhe: so bleibt der Abstand nach oben und unten gleich,
   egal wie hoch die Sektion ist — auch wenn "Mehr anzeigen" sie aufklappt. */
.functionbackwrap::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: -6.5rem;
    left: -38%;
    width: 2000px;
    background-color: #2C5669;
    z-index: -1;
}
.fscroll {
    max-width: 95vw;
}
.custom-list {
    list-style: none;
    /* Standard-Bulletpoints entfernen */
    padding-left: 0;
    margin-top: 1rem;

}

.custom-list li {
    display: flex;
    /* Damit das Icon und der Text nebeneinander erscheinen */
    align-items: center;
    margin-bottom: 5px;
}

.custom-icon {
    min-width: 20px;
    min-height: 20px;
    margin-right: 0.5rem;
}

/* Evtl. löschen*/
.funktion2 .custom-icon {
    display: none;
}

.funktion1,
.funktion2,
.funktion3,
.funktion4 {
    max-width: 35rem;
    font-size: 1.1rem;
    min-width: 10rem;
    margin-right: 1.5rem;
}

/* Price Section */


.pricewrapper {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.preis€ {
    font-size: clamp(1.3rem, 20vw, 1.6rem);
    margin-bottom: 10px;
}

#price.secstyle {
    border-style: none;
    padding: 0.5rem;
}

.preis1,
.preis2,
.preis3,
.preis4 {
    border-radius: 20px;
    border-style: solid;
    padding: 18px;
    flex: 1 0 10vw;
}

.preis1 {
    border-color: #c6c6c6;
}

.preis2 {
    border-color: var(--morange)
}

.preis3 {
    border-color: #C5DFFF;
}

.preis4 {
    border-color: #b6e1ff;
}

.preis_titel {
    margin-bottom: 10px;
}

.functionbackwrap ul,
#price ul {
    margin-left: 0;
}

.aktualisiert {
    margin-bottom: 1rem;
}

.secheadpreis {
    margin-top: 7rem;
}

/* Review Filter*/

.filterwrapper {
    margin: 2rem 0rem 1rem 0rem;
    background-color: var(--hellblau);
    border-radius: 5px;
    padding: 2rem 2rem 4rem 2rem;
}

.filterwrapper h3 {
    margin: 1rem;
}

.flexfilter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8rem;
    align-items: center;
}

.flex100 {
    flex-basis: 100%;
}


/* Review Boxen*/

.dreviews.secstyle {
    border-style: none;
    margin: 0;
    padding: 0;
}

.customright {
    padding: 2rem 2rem 0rem 0rem;
    flex-basis: 38vw;
    max-height: 462px;
    overflow: scroll;
}

.customleft {
    flex-basis: 20vw;
    padding: 2rem;
}

/* punkte rechts Boxen*/
.glsr-default .glsr-tag-label {
    font-size: 1.3rem;
    flex-basis: 40vw;
}

.glsr[data-form] [class^="glsr-custom-"],
.glsr[data-form] [class^="glsr-review-assigned_"] {

    margin-bottom: 3rem;
}

/* icons Boxen*/

.contact-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    margin-right: 10px;
}

.review-name {
    font-weight: 600;
    font-size: 1.4rem;


}

.main-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.glsr-review-author .glsr-tag-value {
    display: none;
}

/* Review Sterne*/


/* Sterne-Container */
.reviewbox .glsr-stars, .bottomteaser .glsr-stars, .headerbox .glsr-stars {
    display: inline-block;
    font-size: 0;
    /* Verhindert Leerzeichen zwischen den Sternen */
}


/* Gemeinsame Eigenschaften für alle Sterne */
.reviewbox .glsr-star-full,
.reviewbox .glsr-star-empty, .headerbox .glsr-star-empty, .headerbox .glsr-star-full, .bottomteaser .glsr-star-empty, .bottomteaser .glsr-star-full, .reviewbox .glsr-star-half, .headerbox .glsr-star-half, .bottomteaser .glsr-star-half {
    display: inline-block;
    width: 40px;
    /* Größe der quadratischen Box */
    height: 40px;
    margin-right: 5px;
    box-sizing: border-box;
    /* Sicherstellen, dass die Umrandung innerhalb der Box ist */
    position: relative;
    border-radius: 4px;
}
.reviewbox .glsr-star-empty, .headerbox .glsr-star-empty, .bottomteaser .glsr-star-empty{
    background-color: #cccccc;
    border: 0;
}

/* Voller Stern (weiß) */
.reviewbox .glsr-star-full::before, .headerbox .glsr-star-full::before, .bottomteaser .glsr-star-full::before  {
    content: '★';
    /* Unicode für vollen Stern */
    color: white;
    /* Weiße Farbe für volle Sterne */
    font-size: 24px;
    /* Größe des Sterns */
    position: absolute;
    top: 50%;
    /* Vertikale Zentrierung */
    left: 50%;
    /* Horizontale Zentrierung */
    transform: translate(-50%, -50%);
    /* Zentriert den Stern */
}

/* Leerer Stern (weiß) */
.reviewbox .glsr-star-empty::before, .headerbox .glsr-star-empty::before, .bottomteaser .glsr-star-empty::before,.reviewbox .glsr-star-half::before, .headerbox .glsr-star-half::before, .bottomteaser .glsr-star-half::before   {
    content: '☆';
    /* Unicode für leeren Stern */
    color: white;
    /* Weiße Farbe für leere Sterne */
    font-size: 24px;
    /* Größe des Sterns */
    position: absolute;
    top: 50%;
    /* Vertikale Zentrierung */
    left: 50%;
    /* Horizontale Zentrierung */
    transform: translate(-50%, -50%);
    /* Zentriert den Stern */
    opacity: 0.5;
    /* Leichte Transparenz für leere Sterne */
}


.glsr-default .glsr-review {
    margin-top: 1rem;
    border-color: #eee;
    border-style: solid;
    padding: 15px;
    border-radius: 23px;
}
/* halbe Stern  */
.reviewbox .glsr-star-half, .headerbox .glsr-star-half, .bottomteaser .glsr-star-half {
    background-image: linear-gradient(to right, #FFB424 50%, #cccccc 50%);
    background-size: 100% 100%;
    background-position: left center;
}
.custom.icon {
    margin-top: 2rem;
}

.glsr-review-title {
    margin-bottom: 2rem;
}


/* Review Formular */
.reviewform {
    display: flex;
    flex-direction: column;
    margin-top: 3rem;
    align-items: center;
    background-color: var(--hellblau);
    border-radius: 15px;
    padding: 2rem 0 2rem 0;
    margin-bottom: 3rem;
}

.reviewform span {
    font-size: 1.1rem;
}

.reviewform h2 {
    margin-bottom: 1rem;
    padding-right:2rem; 
    padding-left:2rem; 
}

.glsr-default form.glsr-form input.glsr-input:not(.wp-block-search__input),
.glsr-default form.glsr-form select.glsr-select,
.glsr-default form.glsr-form textarea.glsr-textarea {

    width: 45vw;

}

/*Categories*/
.content-wrapper1 {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-start;
}


/*filtersite -Termpage*/



.tax-apps .imgfilter {
    min-width: 7vw; 
    max-width: 145px;
}

.term-lernapps.tax-apps .imgfilter {
    align-self: flex-start;
  min-width: 85px; 
  max-width:85px; 
  margin-top: 0rem; 
}
.bottomteaser {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.catterm {
    margin: auto;
  margin-top: 58px;
}

.listcontainer {
    display: flex;
}

.listcontainer .custom-list {
    margin-right: 5rem;
}

/*Tabelle*/

.comparison-table1 {
    width: 100%;
    max-width: 1000px;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    table-layout: fixed;
}

.comparison-table1 th {
    background-color: var(--dunkelblau);
    color: white;
    padding: 15px;
    text-align: center;
    font-size: 1.2em;
}

.comparison-table1 td {
    padding: 12px 15px;
    border-bottom: 1px solid #ddd;
    word-wrap: break-word;
    width: 50%; 
}

.comparison-table1 tr:nth-child(even) {
    background-color: #f8f9fa;
}

.comparison-table1 tr:hover {
    background-color: #f5f5f5;
}

.pros {
    background-color: #e8f5e9;
}

.cons {
    background-color: #fbe9e7;
}

.icon {
    font-weight: bold;
    margin-right: 10px;
}

.pros .icon {
    color: #2e7d32;
}

.cons .icon {
    color: #c62828;
}

/* Style for Taxonomie Sprachlernapps  */
.tax-apps h1 {
    margin-bottom: 1.3rem;
}

.tax-apps h2,
.tax-apps h3 {
    margin: 1.8rem 0rem 2rem 0;
}
.tax-apps .imgfilter {
    margin-top: 2rem;
}
.tax-apps .glsr-summary
{margin: 1rem 1rem 1rem 0rem; 

}

.tax-apps div.headerbox .teasermid p {
    margin-top:1rem; 
}

 .term-sprachlernapps .catterm{
    margin-top: 14px;
} 
.spapp-text,
.spapp-text2 {
    margin: 1rem 0rem 1.2rem 0rem;
}
.spapp-text p {
    margin-top: 2rem;
  }
/* Farben Container */
.spapp-container1,
.spapp-container6 {
    border-style: solid;
    border-color: #ffeca0;
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.spapp-container2,
.spapp-container7 {
    border-style: solid;
    border-color: var(--hellblau);
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.spapp-container3,
.spapp-container8 {
    border-style: solid;
    border-color: #ffdffa;
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.spapp-container4,
.spapp-container9 {
    border-style: solid;
    border-color: var(--cgreen);
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.spapp-container5,
.spapp-container10 {
    border-style: solid;
    border-color: var(--dunkelblau);
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.headerbox h3,
.headerbox h2 {
    margin: 0rem;
}

.headerbox .catdesign, .headerboxspec .catdesign {
    background-color: var(--morange);
    border-radius: 10px;
     padding: 5px;
     text-decoration: none;
     padding-left: 10px;
     font-size:12px; 
     position: relative;
     right:70px;
}
/* Coding App*/ 
a.catterm.catdesign[href="http://localhost/eprelaunch/wordpress/apps/lernapps/coding-apps/"] {
    background-color: #4105ea;
    color: white; 
}
a.catterm.catdesign[href="http://localhost/eprelaunch/wordpress/apps/lernapps/coding-apps/"]:hover{
    color:grey; 
}
.headerboxspec .catterm{
    margin-top: 15px;
  margin-bottom: 25px;
}
.event-template-default.single.single-event .catdesign {
    right:0px; 
    position: relative;
}
.headerbox .catdesign, .headerboxspec .catdesign  {
color:black; 
}  
.catterm.catdesign:hover, .headerboxspec.catdesign:hover {
    color: #fff;
}
 .tax-apps .headerbox, .tax-weiterbildung .headerbox, .tax-anbieter div.headerbox
 {
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    margin:0rem;
    margin-bottom: 2rem;
}



.tax-apps .secstyle {
    margin-bottom: 0.5rem;
}

.teastext {
    margin: 1rem 0rem 1rem 0rem;
}

/*Sidebar*/

.tocside {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    background-color:var(--horange);
    border-radius: 10px;
    padding: 1.3rem;
    height: 28rem;
    padding-left: 1rem;
    position: sticky;
    top: 188px;
}

.tocside1 {
    margin-bottom: 1rem;
}
.title-menu {
    margin-left: -1.2rem;
}
.title-menu ul {
    list-style: none;
}
.removesidebar {
    display: none;
}

.title-menu ul li {
    padding-bottom: 1rem;
}

.title-menu ul a {
    color: #242323;
    text-decoration: none;
}

.title-menu ul a:hover {
    color: rgb(170, 170, 170);
}

/* Aktuelles Kapitel (Scrollspy aus ShortcodeInteractions.tsx) */
.title-menu ul li.active > a {
    color: var(--mblau);
    font-weight: 700;
}

.bigtext {
    font-size: 1.5rem;
}
/* Post Content */

.post-content h2 {
    margin: 1.5em 0 .5em;
}
.post-content .p {
    margin-top: 0;
    margin-bottom: var(--global-md-spacing);
}

/*Filter*/ 

#rating-filter-form {
    position: sticky;
    top: 7rem;
  }
  .rating-group, .sort-group {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
}
  .checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
    flex-direction: column;
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    border: solid;
  padding: 1rem;
  border-radius: 10px;
  width: 182px;
}

.checkbox-label input[type="checkbox"] {
    margin-right: 8px;
    cursor: pointer;
}

.checkbox-text {
    font-size: 14px;
}
.aside-container #category-filter-form.filter-sort-form {
position: sticky;
  top: 10rem;
  padding: 1rem;
  border-color: var(--hellblau)!important;
  border-radius: 10px;
  border: solid;
}
.aside-container #category-filter-form.filter-sort-form h3 {
margin: 0.3rem 0rem 0.5rem 0rem; 
}



.checkbox-group .checkbox-label:nth-child(2){
border-color:#4105ea; 
}
.checkbox-group .checkbox-label:nth-child(3){
    border-color: var(--dorange); 
    }
/* Optional: Custom checkbox styling */
.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #007bff;
}


/*Filter posts smartphone*/ 
.mobile-filter-button {
    display: none;
    position: fixed;
    bottom: 50px;
    right: 20px;
    z-index: 5;
}

.mobile-filter-button button {
    background-color: #D1E3FB;
    color: var(--dunkelblau);
    padding: 12px 24px;
    border: none;
    border-radius: 25px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Filter Overlay */
.filter-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 99;
    overflow-y: auto;
}

.filter-overlay-content {
    background-color: white;
    width: 90%;
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 8px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.close-filters {
    position: absolute;
    right: 10px;
    top: 10px;
    background: none;
    border: none;
    font-size: 2rem; 
    color:black; 
    cursor: pointer;
    z-index: 2;
}
.teaservergleich {
    margin-bottom:1.3rem; 
}

/* Media Queries nav  */

@media only screen and (min-width: 1768px) {



    .sidebarvisible {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 4;
        background-color: white;
        padding: 10px 3px 3px 3px;
        border-radius: 10px;
    }

    .removesidebar {
        display: none;
    }
}

/* Media Queries desktop */

@media only screen and (min-width: 1280px) {

    .flexcircle {
        flex-direction: row;
        display: flex;
        flex-wrap: wrap;
    }

    .customcircle {
        flex: 3 0 35vw;
    }

    .flexkontakt {
        flex: 0 3 25vw;
    }

    .flexkontakt ul,
    .deviceli ul {
        margin-top: 2rem;
    }

    .ytvideo {
        flex: 3 0 35vw;
    }

    .deviceli {
        flex: 0 3 25vw;
    }


    .sechead h2 {
        margin-top: 6rem;
    }

    /*Sterne */
    .glsr-summary-wrap {
        margin-top: 1rem;
    }

    /*Sammelseiten */
    .teasermid {
        margin-left: 2rem;
    }


}


/*Media Queries tablet*/
@media only screen and (max-width: 1280px) {

    /*Sidebar*/
    .customsidebar {
        display: none;
    }
    .allcontent {
        display: block;
       width: min(1200px, calc(100% - var(--seitenrand) * 2));
}
}

/*Media Queries sm*/
@media only screen and (max-width: 768px) {

    /*headersection*/
    .headerbox {
        flex-wrap: wrap;
        margin: 2rem 1rem 0rem 1rem;
    }
.headerbox .catdesign, .headerboxspec .catdesign {
    right:0px; 
    margin:auto; 
    margin-top:1rem; 
}
    .teasertext {
        margin: 0rem;

    }

    .teasertext1 {
        order: 3;
        margin: 2em 0 2em -6em;
    }

    .headercompany {
        margin-bottom: 0.5rem;
    }

    .navcontainer {
        background-color: #EDF5FF;
        margin-left: -1rem;
        margin-right: -1rem;
    }


    .inmenu-item {
        margin: 1rem;
        white-space: nowrap;
    }

    /* Der Funktionsblock ist fest 1200px breit. Auf dem Handy ragt er damit
       weit über den Rand hinaus, und die Spalten daneben werden im waagerecht
       scrollenden .funktionwrapper mitten im Wort abgeschnitten ("Kategorien
       und Then…"). Volle Breite plus umbrechende Spalten stellt die Blöcke
       stattdessen untereinander. */
    .functionbackwrap {
        width: 100%;
    }

    .funktionwrapper {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .funktionwrapper > .funktion {
        flex: 1 1 100%;
        min-width: 0;
    }

    .content-wrapper {
        width: 100%;
        margin-bottom: 20px;
        flex: 1 1 800px;
        align-items: none;
    }

    .h1.teaserh1 {
        order: 1;
    }

    .glsr-summary {
        order: 2;
    }

    .imagecompany {

        align-self: flex-start;
        min-width: 80px;
        margin: 3rem 1rem 0rem 0rem;
    }

    .buttonsheader {
        position: fixed;
        background: white;
        z-index: 3;
        justify-content: center;
        flex-direction: row;
        bottom: 0px;
        width: 103%;
    }

    button#meinButton {
        margin: 1rem 0.5rem 1.1rem 0.5rem;
        min-height: 4.5rem;
    }

    /*circle*/

    .customcircle {

        justify-content: center;
    }

    .circle {

        flex: 0 1 calc(50% - 1rem);
        max-width: 7rem;
    }

    .dcircle svg {
        width: 30vw;
    }

    .overviewwrapper {
        display: flex;
        flex-wrap: wrap;
    }

    /*Overview Listen */
    .deviceli,
    .flexkontakt {
        margin-top: 1.2rem;
    }

    /* Als Flex-Elemente duerfen schrumpfen: ohne min-width: 0 setzt das
       laengste Wort der Ueberschrift ("Kontaktinformationen") die Mindestbreite
       des Kastens, auf 320px-Geraeten ragte er dadurch ueber den Rand. */
    .deviceli,
    .flexkontakt {
        min-width: 0;
    }

    /*Preis boxes*/
    .preis1,
    .preis2,
    .preis3,
    .preis4 {
        flex: 1 0 100%;
    }

    /*review form */
    .glsr-default form.glsr-form {
        margin: 3rem 0rem 3rem 10%;
    }

    .customright,
    .customleft {
        overflow: none;
        flex-basis: 100vw;
        padding: 1rem 0rem 0rem 1rem;

    }

    .customright {
        padding: 1rem;
        max-height: none;
    }

    /*review filter */
    .glsr .glsr-filters form.glsr-filters-form {
        margin: 0rem;
    }

    .glsr-default form.glsr-form input.glsr-input:not(.wp-block-search__input),
    .glsr-default form.glsr-form select.glsr-select,
    .glsr-default form.glsr-form textarea.glsr-textarea {

        width: 80vw;

    }

    .comparison-table1 {
        font-size: 14px;
        margin-left: 0rem;
    }

    .comparison-table1 th,
    .comparison-table1 td {
        padding: 8px;
    }
.glsr-default .wp-block-button {
margin-right: 10rem!important;

}

.providerbox1 {
justify-content: center;
  display: flex;
  padding-bottom: 5rem;

}
.provider-image {
    margin-right: 1rem;
}
.providerbox1 .glsr-default {
    margin-top: 3rem;
}
    /*Sprachlernapps */

    .listcontainer,
    .bottomteaser {
        flex-wrap: wrap;
    }

    .listcontainer .custom-list {
        margin-right: 1rem;
    }
 
    .catterm {
        padding-top: 5px;
    }
    .reviewbox .glsr-star-full,
    .reviewbox .glsr-star-empty, .headerbox .glsr-star-empty, .headerbox .glsr-star-full, .bottomteaser .glsr-star-empty, .bottomteaser .glsr-star-full, .reviewbox .glsr-star-half, .headerbox .glsr-star-half, .bottomteaser .glsr-star-half {
        width: 30px;
  height: 30px;
    }
    .teasermid {

        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0rem 1rem 0rem 1rem;
    }

    .headerbox {
        justify-content: center;
    }

#alternativen {
    width: 101%;
  }


  .tocside {
    display:none;
  }
  .allcontent {
    display: block;
   width: min(1200px, calc(100% - var(--seitenrand) * 2));
}
.tax-apps .headerbox, .tax-anbieter .headerbox {
margin:0rem 1rem 1rem 1rem;
}
/*Filter apps*/

.mobile-filter-button {
    display: block;
}

.aside-container {
    display: none;
}

.filter-overlay .aside-container {
    display: block;
}

/* Anpassungen für Filter-Formular im Overlay */
.mobile-filter-button {
    display: block;
}

#filter-container {
    display: none;
}

.filter-overlay #filter-container {
    display: block;
}

.filter-overlay .filter-sort-form {
    margin: 0;
}

.filter-overlay .rating-group,
.filter-overlay .sort-group,
.filter-overlay .filter-group {
    margin-bottom: 20px;
}

.filter-overlay select {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
}

.filter-overlay .checkbox-group {
    max-height: 300px;
    overflow-y: auto;
}

/* Die Sprungnavigation lief bisher in einem waagerecht scrollenden Streifen
   aus dem Bild: der letzte Punkt ("Bewertungen") war angeschnitten, ohne
   sichtbaren Hinweis zum Wischen. Auf dem Handy bricht sie stattdessen um. */
.navinpost {
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
}

.navinpost .inmenu-item {
    margin: 0.5rem 0.9rem;
}
/*Yt Box*/ 
.ytvideo {
    width: 100%;
}

/*breadcrumbs*/
p#breadcrumbs {
  margin-top: 1rem;
  border-bottom: solid;
  border-color:var(--dunkelblau);
  padding-bottom: 10px;
}
}