/* ==========================================================================
   IB Theme – Deine Anpassungen (1:1 aus „Zusätzliches CSS“ übernommen)
   --------------------------------------------------------------------------
   Diese Datei wird NACH main.css geladen und überschreibt sie daher.
   Das Theme gibt die Penci-Klassennamen aus, auf die sich diese Regeln
   beziehen (z. B. h1.penci-entry-title, .penci-entry-meta, .penci-cat-links,
   .site-header-wrapper, #menu-primary-menue), damit sie weiter greifen.
   Einzige Ausnahme: der Ken-Burns-Effekt – siehe Hinweis in main.css.
   Neue Anpassungen am besten unten anhängen.
   ========================================================================== */

/* ==========================================================================
   1. UTILITIES & HILFSKLASSEN
   ========================================================================== */

/* Farben & Text */
.orange { color: #ff6900 !important; }
.kleine-schrift p { font-size: 12px; line-height: 1.3em; }
.kein-float { float: none; }

/* Clearfix für Floats */
.clearfix::before,
.clearfix::after {
    content: " ";
    display: table;
}
.clearfix::after {
    clear: both;
}
.clearfix {
    *zoom: 1; /* Für den IE6 und IE7 */
}

/* Rahmen & Hintergründe (Helfer) */
hr { border-top: 3px dotted #999999; background: none; }
hr.dreipunkt { border: none; height: 3px !important; }

.rahmen {
    border: 1px solid #aaaaaa;
    clear: both !important;
    padding: 18px 12px 12px 12px;
    margin-bottom: 18px !important;
}
.rahmen01 {
    border: 1px solid #aaaaaa;
    background: #dfdfdf;
    padding: 12px;
}
.rahmen02 img {
    border: 1px solid #cccccc;
}
.rahmen03 {
    border-top: 5px solid orange;
    border-bottom: 5px solid orange;
    clear: both !important;
    padding: 18px 12px 12px 12px;
    margin-bottom: 18px;
    background: #dfdfdf;
}
.hintergrund { background: #cccccc; }


/* ==========================================================================
   2. TYPOGRAFIE (Überschriften, Links, Zitate)
   ========================================================================== */

h1, h2, h3, h4 {
    color: #777777 !important;
    font-weight: normal !important;
    line-height: 1.2em;
}

/* ===================================================================
   Artikel-Überschrift (H1) als moderner Kasten
   ===================================================================
   Ersetzt den bisherigen Stil (nur dünne orange Linie links, kein
   Hintergrund, mit "margin-left: -80px" in den linken Rand gezogen).
   Jetzt: heller Karten-Hintergrund, weicher Schatten, runde Ecken,
   die orange Linie bleibt als Akzent links erhalten (mit runden
   Enden). Die negative Randverschiebung wurde entfernt, damit der
   Kasten sauber mit Bildunterschrift/Fließtext abschließt.
   =================================================================== */
h1.penci-entry-title {
  color: #004467 !important;
  font-size: 2.5em !important;
  line-height: 1.25em !important;
  font-weight: bold !important;
  margin: 0 0 20px 0 !important;
  padding: 22px 28px !important;
  background: #f8f9fb;
  border-left: 6px solid #f97339 !important;
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .07), 0 2px 8px rgba(15, 23, 42, .1);
  box-sizing: border-box;
  display: block;
}


h2 {
    font-size: 1.4em !important;
    color: #004467 !important;
}

h2.penci-post-subtitle {
    font-size: 1.5em !important;
    line-height: 1.2em;
    margin-top: 18px;
}

h1.subheadline {
	font-size: 2em;
	color: #004467 !important;
}

h2.entry-title,
h2.entry-title h1 {
    font-size: 1.5em !important;
    line-height: 1.2;
}

h3 { font-size: 1.3em !important; }

h3.penci__post-title.entry-title {
    font-size: 1.2em !important;
    line-height: 1.em;
}

h3.penci_slider__title.entry-title { line-height: 0.8em; }

h3.penci-block__title { font-size: 1.2em !important; }
h3.penci-block__title a:hover { color: #bbbbbb !important; text-decoration: none; }

h4 { font-size: 1.3em; font-style: italic !important; line-height: 1.4em; }

/* ===================================================================
   Meta-Zeile unter der Überschrift (Autor, Datum, ID)
   ===================================================================
   Ersetzt die bisherigen dünnen grauen Linien oben/unten durch einen
   ruhigen, hellen Kasten mit weichem Schatten – bewusst OHNE orangene
   Akzentlinie, passend zum Wunsch, diese hier nicht zu verwenden.
   =================================================================== */
.penci-entry-meta {
  line-height: 2em;
  font-size: 1.1em;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 12px 20px;
  background: #f8f9fb;
  border: none !important;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .05), 0 2px 6px rgba(15, 23, 42, 0.1);
  color: #5b6472;
}
.penci-entry-meta a { color: #3f51b5; }
.penci-entry-meta .fa, .penci-entry-meta .la { color: #9aa2b1; margin-right: 4px; }


p a { font-weight: bold; }

/* Inhalts-Typografie */
.entry-content h3,
.entry-content h2 { color: #666666; font-weight: normal; }
.entry-content::after { content: " ..."; float: right; }
.entry-title h1,
.entry-title h3 { font-size: 16px !important; color: #0066bf !important; margin-bottom: 0px; }
.entry-date { font-weight: normal; color: #999; background: none; padding: 3px 5px; }

/* Zitate */
.entry-content blockquote.wp-block-quote p { color: #666666; }
.wp-block-quote { border-color: #f97339; }

td { padding: 8px; border: 1px solid #999999; }

/* 1. Hauptblock bereinigen */
.wp-block-quote {
    position: relative;
    padding-left: 70px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 2. Den inneren Text bereinigen */
.wp-block-quote p {
    background: transparent !important;
		font-style: italic !important;
		color: #000000 !important;
}

/* 3. Das Theme-eigene "after"-Element hart abschalten */
.wp-block-quote::after,
blockquote::after {
    display: none !important;
}

/* 4. Unser großes orangenes Anführungszeichen */
.wp-block-quote::before,
blockquote::before {
    content: "\201C" !important;
    color: #ff6600 !important;
    font-size: 160px !important;
    font-family: Georgia, serif !important;
    position: absolute !important;
    left: 0 !important;
    top: -35px !important;
    line-height: 1 !important;
    background: transparent !important;
    background-color: transparent !important;
    width: auto !important;
    height: auto !important;
}

/* 5. Verschiebung um -80px nach links */
@media (min-width: 768px) {
    .wp-block-quote {
        margin-left: -70px !important;
        margin-right: 80px;
    }
}

/* CSS für den Button Newsletter abonnieren im Footer | Link (Hellblau) */
.nl-button-wrapper a {
    color: #85c1e9 !important;
    text-decoration: none !important;
}
.nl-button-wrapper a:hover {
    color: #ffffff !important;
}


/* ==========================================================================
   3. HEADER, LOGO & NAVIGATION
   ========================================================================== */

.site-header { background: #dddddd; border-bottom: none; }

/* Neues Logo einfügen via Pseudoelement */
img.custom-logo:before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 150px;
    background-size: 100%;
    background: url("https://www.infoboard.de/wp-content/uploads/2014/11/infoboard-logo-2014.png") no-repeat;
    border: 1px solid #cccccc;
}

.header__top.header--s3 .site-branding,
.header__top.header--s4 .site-branding,
.header__top.header--s6 .site-branding { padding-top: 2px !important; }

/* Navigation Dropdowns */
.main-navigation ul ul a {
    width: 300px;
    padding: 6px 18px;
    line-height: 1.35;
    font-size: 1.3rem;
    border-bottom: 1px solid #999999;
}
.main-navigation ul ul li a:hover { background: #dddddd; }

/* Hervorgehobene Menüpunkte (Ticker & Themen) */
#menu-item-38890 a, /* Corona Ticker */
#menu-item-58849 a { color: #f97339; } /* IFA 2022 Ticker */

#menu-item-38890 a:hover,
#menu-item-58849 a:hover { background: #f97339; color: #ffffff; }

.menu-item-38890.current_page_item a,
.menu-item-58849.current_page_item a { color: #ffffff !important; background: #f97339; }

.main-navigation > ul:not(.children) > li.menu-item-38890.current_page_item > a,
.main-navigation > ul:not(.children) > li.menu-item-58849.current_page_item > a {
    background: #f97339 !important;
    color: #ffffff !important;
}

/* Menü BBQ */
#menu-item-34956 { background-color: #f97339; color: #ffffff !important; }
#menu-item-34956 a { color: #ffffff !important; }
#menu-item-34956 a:hover { color: #000000 !important; }

.hintergrund-gustorazzo, .hintergrund-bbq { color: #000000 !important; }


/* ==========================================================================
   4. LAYOUT & POST-STRUKTUR (PENCI)
   ========================================================================== */

.site-content { margin-top: 0px; }
.page .entry-content { margin-top: 0px; }
.page .penci-content-post { padding-top: 0px !important; }

/* Single View & Media Container */
.entry-media .penci-container { max-width: 1420px !important; }
.penci-page-title, .penci-entry-title { color: #666666 !important; font-size: 2em !important; }
.penci__general-meta .penci_post-meta { color: #aaa !important; }
.penci-single-featured-img { background-color: #333333; }

/* Single Styles */
.penci-single-style-3 .penci-content-post:not(.hide_featured_image) { margin-top: -120px; }
.penci-single-style-9 .penci-entry-media {
    background: #f0f0f0 !important;
    padding: 0;
    border-top: 1px solid #cccccc;
}
.penci-single-style-10 .penci-entry-media {
    background: #f0f0f0;
    padding: 0;
    border-top: none;
}
.penci-page-style-4 .penci-entry-media { padding-bottom: 0px !important; margin-bottom: 0px !important; }

/* Bildunterschriften (Mit Zoom-Effekt & Expand-Icon unten rechts) */
.penci-single-style-9 .penci-standard-format .penci-wp-caption {
    position: absolute;
    bottom: 20px;
    right: 20px !important;
    left: auto;
    background-color: #f9f9f9;
    border: 1px solid #999999;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    font-family: Arial, Helvetica, sans-serif;
    padding: 8px 24px 8px 12px !important; /* Rechter Innenabstand für das Icon */
    box-sizing: border-box;

    /* Animation & Schwebezustand vorbereiten */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform-origin: bottom right; /* Dehnt sich von unten rechts nach oben links aus */
    z-index: 10;
    cursor: pointer;
}

/* Expand-/Vergrößern-Icon (Diagonale Pfeile nach außen) unten rechts */
.penci-single-style-9 .penci-standard-format .penci-wp-caption::after {
    content: "";
    position: absolute;
    bottom: 6px;
    right: 8px;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Zoom-Effekt beim Drüberfahren */
.penci-single-style-9 .penci-standard-format .penci-wp-caption:hover {
    transform: scale(1.25); /* Vergrößert die Box um 25% */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); /* Stärkerer Schatten für Tiefe */
    z-index: 99; /* Schiebt die Box über andere Elemente */
}

/* Icon beim Zoomen sanft ausblenden */
.penci-single-style-9 .penci-standard-format .penci-wp-caption:hover::after {
    opacity: 0;
}

.penci-single-style-9 .penci-standard-format .penci-wp-caption::before {
    display: none !important;
}

.penci-wp-caption-text {
    text-align: center;
    color: var(--phplist-text, #333333) !important;
    font-size: 1.1em;
    margin: 0 !important;
}

div.penci-wp-caption {
    width: 460px !important;
    max-width: 90% !important;
}

/* ===================================================================
   Kategorien-Pills (z. B. "Topstory")
   ===================================================================
   Dunkles, abgerundetes Pill-Badge statt der bisherigen eckigen,
   kleinen grauen Fläche; Schrift etwas größer. Beim Hover Wechsel auf
   das bestehende Blau der Seite (die roten Test-Werte aus der
   vorherigen Fassung wurden entfernt).
   =================================================================== */
.penci-entry-categories { margin-top: 12px; }
.single .penci-cat-links a,
.penci-archive .penci-archive__content .penci-cat-links a {
  background: #666666 !important;
  color: #ffffff !important;
  font-size: 1.1em !important;
  font-weight: 600 !important;
  padding: 6px 16px !important;
  border-radius: 999px !important;
  display: inline-block !important;
  letter-spacing: .02em;
  height: auto !important; /* das Theme setzt hier fest "height/line-height:
                               16px" – ohne dieses Überschreiben bleibt der
                               Kasten bei größerer Schrift zu klein und der
                               Text wird oben/unten abgeschnitten */
  line-height: normal !important;
  transition: background .15s ease;
}
.single .penci-cat-links a:hover,
.page .penci-cat-links a:hover {
  background: #3f51b5 !important;
}

#mcTagMap .tagindex h4 { font-size: 36px; color: #ea6315; border-bottom: 4px solid #ea6315 !important; }

/* Kategorie Grid */
.penci-category-grid { background: #d0d0d0; }
.penci-category-grid .penci-container { max-width: 1400px !important; }

/* Block & Listenansichten */
.penci_slider__title a { color: #ffffff; font-size: 18px !important; }
.penci-post-related .item-related h4 { font-size: 1.2em; }
.penci-post-related .item-related h4 a:hover { color: #3f51b5; }
.penci-block_12 .penci_media_object { margin-bottom: 12px; border: 1px solid #aaa; }
.penci-block_12 .penci_media_object h3 { font-size: 24px !important; }
.penci-block_20 .penci-post-excerpt { font-size: 2rem; line-height: 1.3; }
.penci-block_32 .penci__post-title { color: #ffffff !important; }

/* Inline Related Posts Kasten */
.penci-inline-related-posts {
    float: left;
    width: 440px !important;
    margin-left: -180px;
    margin-right: 30px;
    margin-bottom: 36px;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #ff6600 !important;
    border-radius: 5px;
    padding: 15px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.penci-inline-related-posts.penci-irp-type-grid a {
    color: #3f51b5 !important;
    text-decoration: none !important;
    font-size: 1.2em !important;
    font-weight: normal !important;
}

.penci-inline-related-posts.penci-irp-type-grid a:hover {
    color: #3f51b5 !important;
    text-decoration: underline !important;
}

/* Schriftgröße in related Post - Grid und Liste */
.brp-post-title {
  font-size: 1.2em !important;
  margin-bottom: 4px;
	font-weight: normal;
}

/* Box um das Inhaltsverzeichnis */
div.lwptoc.lwptoc-inherit {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 15px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

.lwptoc_i {
    padding: 0px !important;
    border: none !important;
}

.lwptoc_header {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 10px 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 15px;
}

/* Footer */
.footer__bottom .footer-email-wrap { color: #ffffff; }
.site-info, .site-info a, .sub-footer-menu li a { color: #ffffff; font-size: 16px; }
.sub-footer-menu li a:hover { text-decoration: underline; }

.penci-block-vc.style-title-2 .penci-block__title,
.penci-block-vc.style-title-6:not(.footer-widget) .penci-block__title {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #ff6600;
    border-radius: 5px;
    height: auto;
    padding: 10px 15px;
    margin-top: 15px;
    margin-bottom: 15px;
    line-height: 1.5;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
}

.penci-block-vc.style-title-6:not(.footer-widget) .penci-block__title span::before,
.penci-block-vc.style-title-6:not(.footer-widget) .penci-block__title span::after {
    border: none;
}

/* Kenburns Effekt bei Post Single Headerbild */
.penci-single-featured-img.post-image {
    background-repeat: no-repeat !important;
    animation: kenBurnsSingle 20s ease-out forwards !important;
    will-change: background-size, background-position;
    overflow: hidden !important;
    transition: none !important;
}

@keyframes kenBurnsSingle {
    0% {
        background-size: 100%;
        background-position: center center;
    }
    100% {
        background-size: 115%;
        background-position: right center;
    }
}


/* ==========================================================================
   5. PORTFOLIO & ARCHIVE
   ========================================================================== */

article.portfolio.type-portfolio h1 { color: #666666 !important; }
article.portfolio.type-portfolio h2 { color: #f97339 !important; }
article.portfolio.type-portfolio h4 { color: #333333 !important; }

.single-portfolio-thumbnail { text-align: center; vertical-align: top; width: 100%; margin: auto; }
.blog-boxed .penci-archive__content .article_content { border: 1px solid #999; }
.ifa-2020 img { border: 1px solid #cccccc !important; }

/* Portfolio Filter & Kategorien */
.penci-portfolio-filter { margin-bottom: 80px; }
.penci-portfolio-filter .portfolio-subcategory { width: 100%; }
.penci-portfolio-filter .portfolio-subcategory li,
.penci-portfolio-filter .portfolio-subcategory.is-active li { height: 25px; margin-bottom: 0px; }

li.penci-pfl-cat-item.penci-pfl-hersteller-mit-produktneuheiten {
    border: 1px solid #ff6600 !important;
    padding: 0 10px !important;
}

/* Portfolio Inaktive/Aktive Aussteller Logik */
.portfolio-item img {
    opacity: 0.5 !important;
    filter: grayscale(100%);
}

#portfolio-39751 img, #portfolio-39753 img, #portfolio-42123 img, #portfolio-42160 img,
#portfolio-39967 img, #portfolio-42229 img, #portfolio-39983 img, #portfolio-42272 img,
#portfolio-42307 img, #portfolio-42354 img, #portfolio-42519 img, #portfolio-42575 img,
#portfolio-40027 img, #portfolio-39954 img, #portfolio-40006 img, #portfolio-39961 img,
#portfolio-40005 img, #portfolio-42853 img, #portfolio-40322 img, #portfolio-40013 img,
#portfolio-40021 img, #portfolio-40329 img, #portfolio-39972 img {
    border: 2px solid #ff6600 !important;
    opacity: 1 !important;
    filter: grayscale(0%);
}


/* ==========================================================================
   6. WIDGETS, BLOCKS & PLUGINS
   ========================================================================== */

.button { background: #777777; }
.widget a.penci-block-ajax-more-button { background: #777; border: none; }
.penci-post-countview, .penci-comment-count { display: none !important; }

#penci_custom_html-2, #wppas_custom_widgets-6 { padding: 0px; }

/* WPBakery / VC / Divi */
.penci-block-vc.style-title-2 .penci-block__title {
    border-bottom: 1px solid #666666;
    border-top: 1px solid #666666;
    line-height: 20px;
    height: 40px;
    margin-bottom: 12px;
    margin-top: 4px;
}
.penci-block-vc.style-title-2 .penci-block__title span {
    background: #fff !important;
    color: #666;
    padding: 0px;
    font-size: 20px !important;
}
.penci-block-vc.widget { overflow: inherit; margin-bottom: 0px; }

.vc_tta.vc_tta-shape-rounded .vc_tta-panel-heading {
    border-radius: 10px !important;
    border: 1px solid #666666 !important;
    background: #dfdfdf !important;
}
.vc_custom_1699611028928 { background-color: transparent !important; padding: 12px; }
.vc_custom_1699611028928 H1 { color: #000000 !important; }
.vc_custom_1742823587057, .vc_custom_1742988969635 { background-color: transparent !important; }

.et-db #et-boc .et_pb_row, .et-db #et-boc .et_pb_section { padding: 1% 0; }

/* Kalender (STEC) */
.stec-layout-event-inner-top-tabs-content { border: 1px solid #999; }
body .stec-layout-event-text-fontandcolor { color: #333 !important; }

/* Essential Grid */
.minimal-light .esg-navigationbutton {
    padding: 0px 16px; margin-top: 20px;
    font-size: 18px !important; color: #f97339 !important;
    border: 1px solid #f97339 !important; background: #dddddd !important;
}
a.eg-item-skin-1-element-1, a.eg-item-skin-1-element-5, .eg-item-skin-1-bearb-element-1 { color: #ffffff !important; }

/* Inhaltsverzeichnis (LWPTOC) */
.lwptoc_i { border: 1px solid #aaa; }

/* Popup */
#spu-34638 .spu-close { font-size: 42px; }
#spu-34638 .spu-close:hover { color: #dd8500; }

/* Gutenberg Blocks */
.wp-block-gallery { margin-bottom: 20px; }
ul.blocks-gallery-grid { margin-bottom: 0px; }
.wp-block-getwid-image-hotspot__dot-title { color: orange !important; }

/* Ads */
.infob-adlabel { font-size: 10px; text-align: right; padding-right: 40px; }
.unold_banner { border: 1px solid #aaaaaa; }

.page-template-default .entry-content .penci-block-vc {
    padding-left: 20px;
    padding-right: 10px;
}

/* Hinweis unter dem Beitrag, wenn er älter als eine bestimmte Zeit ist - functions.php */
.outdated-post-notice {
    background-color: #fff3e6;
    border-left: 4px solid #ff6600;
    border-right: 4px solid #ff6600;
    color: #333333;
    padding: 15px 20px;
    margin-top: 30px;
    margin-bottom: 20px;
    border-radius: 4px;
    font-size: 0.95em;
}

.outdated-post-notice p {
    margin: 0;
    line-height: 1.5;
}


/* ==========================================================================
   7. MEDIA QUERIES (Responsive Anpassungen)
   ========================================================================== */

/* Ab 1400px: Inline-Post Kasten zurück in den Textfluss */
@media only screen and (max-width: 1400px) {
    .penci-inline-related-posts {
        border: none !important;
        margin-left: 0px;
        background: #f0f0f0;
        float: none;
        width: 100% !important;
    }
    .penci-inline-related-posts.penci-irp-type-grid .penci__post-title {
        line-height: 1.2em;
        font-size: 2rem;
    }
}

/* Große Bildschirme: Verbreiterung */
@media only screen and (min-width: 1241px) {
    .single .penci-wide-content,
    .archive .penci-wide-content { max-width: calc(100% - 340px); }

    .sidebar-right .site-main .widget-area { width: 340px; margin-top: 0; }
}

/* Bis 1200px: Titel Anpassungen */
@media only screen and (max-width: 1200px) {
    h1.penci-entry-title { font-size: 2em !important; margin-left: 0px; }
}

/* Mobile & Tablets (Bis 760px) */
@media only screen and (max-width: 760px) {
    .sidebar-right .site-main .widget-area { width: 300px; margin-top: 0; }
    .wp-block-image .alignright { float: none; margin: 0 auto; }
    div.penci-wp-caption { width: 100% !important; }
}


/* ==========================================================================
   8. KI/AI IMPLEMENTIERUNG
   ========================================================================== */

/* Styling für das Icon im Text */
.eu-ai-transparency-badge {
    float: right !important; /* Rechtsbündig */
    margin: 5px 0 15px 20px !important; /* Abstand, damit der Text nicht klebt */
    display: block !important;
    clear: none !important;
    cursor: pointer !important; /* Verwandelt die Maus in eine "Klick-Hand" */
    transition: transform 0.2s ease; /* Weicher Animations-Effekt */
}

/* Leichter Vergrößerungs-Effekt beim Darüberfahren mit der Maus */
.eu-ai-transparency-badge:hover {
    transform: scale(1.1);
}

.eu-ai-transparency-badge img {
    max-width: 100px !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Das "General" Icon auf 60px begrenzen */
.eu-ai-badge-general img {
    max-width: 60px !important;
}

/* Styling für das Popup (Modal) */

/* Der dunkle, halbtransparente Hintergrund über der ganzen Website */
.eu-ai-modal-overlay {
    display: flex;
    visibility: hidden; /* Standardmäßig unsichtbar */
    opacity: 0;
    position: fixed;
    z-index: 999999; /* Ganz nach vorne legen (über PenNews-Elemente) */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    transition: visibility 0s, opacity 0.3s ease;
}

/* Klasse, die per JavaScript hinzugefügt wird, um das Popup zu zeigen */
.eu-ai-show-modal {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Die weiße Popup-Box in der Mitte */
.eu-ai-modal-box {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

/* Animation beim Öffnen */
.eu-ai-show-modal .eu-ai-modal-box {
    transform: translateY(0);
}

/* Das Schließen-X oben rechts */
.eu-ai-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    line-height: 1;
}

.eu-ai-modal-close:hover {
    color: #000;
}

/* Inhalte im Popup */
.eu-ai-modal-box img {
    max-width: 80px;
    margin: 0 auto 15px auto;
    display: block;
}

#eu-ai-modal-img {
    max-width: 140px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 20px auto !important; /* Zentriert im Popup mit Abstand zum Text darunter */
}

.eu-ai-modal-box h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 20px;
    color: #333;
}

.eu-ai-modal-box p {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #555;
}

/* Styling für die Herstellerliste */
.hersteller-alphabet-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.hersteller-buchstaben-gruppe h3 {
    border-bottom: 2px solid #ccc;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.hersteller-buchstaben-gruppe ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.hersteller-buchstaben-gruppe li {
    margin-bottom: 0px;
}


/* ===================================================================
   infoboard.de – Moderne Navigation (reines CSS, keine Theme-Änderung)
   ===================================================================
   Getestet live im Browser auf [www.infoboard.de](https://www.infoboard.de) bei 1440px, 1280px
   und 1150px Breite. Unterhalb der eigenen Mobil-Umschaltung des
   Themes (bei infoboard.de ca. < 1100px, dort übernimmt ohnehin das
   Hamburger-Menü) ist keine Anpassung nötig – die Regeln greifen nur
   im Desktop-Bereich.

   v2: In der ersten Fassung hatte ".site-header-wrapper" ein
   "overflow: hidden", um die runden Ecken sauber abzuschneiden. Das
   hat aber gleichzeitig die Dropdown- und Mega-Menüs abgeschnitten,
   da sie technisch INNERHALB dieses Bereichs liegen und über dessen
   Rand hinausragen – daher gingen die Untermenüs scheinbar nicht
   mehr auf. Jetzt wird stattdessen der Kopfbereich (Logo-Zeile) und
   die Navigationsleiste JEWEILS EINZELN abgerundet, ohne "overflow:
   hidden" auf dem gemeinsamen Wrapper. Dadurch bleibt der schwebende
   Karten-Look erhalten, aber die Dropdowns können ungehindert über
   den Rand hinaus aufklappen.

   Einbau: WordPress-Customizer → Design → "Zusätzliches CSS"
   einfügen (oder in die style.css eines Child-Themes). Kein Eingriff
   in HTML/PHP/Theme-Dateien nötig, das Original-Logo bleibt
   unverändert – es wird ja weiterhin ganz normal vom Theme
   ausgegeben.
   =================================================================== */

/* 1) Kopf- und Navigationsbereich als schwebende, abgerundete Karte
      (kein "overflow: hidden" hier – siehe Hinweis oben) */
.site-header-wrapper {
  max-width: 1360px;
  margin: 20px auto 52px; /* unten: Abstand zum Seiteninhalt, sonst
                              deckt dessen Hintergrund den Schatten
                              zu und die Headlines kleben direkt an
                              der Navigation */
  box-shadow: 0 20px 45px rgba(15, 23, 42, .20), 0 3px 10px rgba(15, 23, 42, .05);
  background: #ffffff;
  border-radius: 28px;
}
.header__top { border-radius: 28px 28px 0 0; }

/* 2) Navigationsleiste: eigene abgerundete Ecken unten + etwas Luft */
#masthead {
  border-radius: 0 0 28px 28px;
  padding: 4px 20px;
}
.main-navigation { padding: 6px 0; }

/* 3) Menüpunkte als abgerundete "Pillen" mit Hover-Effekt */
#menu-primary-menue {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}
#menu-primary-menue > li > a {
  border-radius: 14px;
  padding: 10px 16px;
  transition: background .15s ease, color .15s ease;
}
#menu-primary-menue > li:not(.menu-item-home) > a:hover,
#menu-primary-menue > li.current-menu-item:not(.menu-item-home) > a {
  background: #eef1fb;
  color: #3f51b5;
}

/* 4) Home-Icon als runder Akzent-Button (bestehendes Blau der Seite) */
#menu-primary-menue > li.menu-item-home > a {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #3f51b5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(63, 81, 181, .32);
}
#menu-primary-menue > li.menu-item-home > a:hover { background: #34459c; }
#menu-primary-menue > li.menu-item-home > a .fa-home { color: #fff; }

/* 5) "IFA 2026" als oranger Akzent-Badge (bestehende Akzentfarbe der Seite,
      z. B. vom Newsletter-Button). Falls sich die Menü-ID durch eine
      Bearbeitung im WP-Menü ändert, ersatzweise
      "#menu-primary-menue > li:last-child > a" verwenden. */
#menu-primary-menue > li.menu-item-82851 > a {
  background: #ff6600;
  color: #fff !important;
  border-radius: 999px;
  padding: 8px 16px;
}
#menu-primary-menue > li.menu-item-82851 > a:hover { background: #e65c00; }

/* 6) Dropdown- und Mega-Menüs: abgerundet mit weichem Schatten
      (bewusst KEIN "overflow: hidden" – das würde bei den
      Mega-Menüs von "Produkte"/"Tests" Inhalte abschneiden) */
.sub-menu {
  border-radius: 18px !important;
  box-shadow: 0 24px 48px rgba(15, 23, 42, .16), 0 4px 12px rgba(15, 23, 42, .06) !important;
  border: 1px solid #f0f1f4 !important;
  padding: 10px !important;
  margin-top: 10px !important;
}
.sub-menu > li > a { border-radius: 10px; }
.sub-menu > li > a:hover { background: #f3f5f9; color: #3f51b5; }

/* 7) Runde Hover-Flächen für Such- und Menü-Icon rechts */
.promagnifier, .prosettings { border-radius: 14px; }
.promagnifier:hover, .prosettings:hover { background: #f3f5f9; }

/* 8) Etwas kompakter zwischen der eigenen Mobil-Umschaltung des Themes
      und der vollen Desktop-Breite, damit "IFA 2026" nicht umbricht */
@media (max-width: 1300px) {
  #menu-primary-menue > li > a { padding: 10px 10px; }
  #menu-primary-menue { gap: 0px; }
  #menu-primary-menue > li.menu-item-82851 > a { padding: 8px 12px; }
}