/*
Theme Name: Astra Child
Theme URI: http://andreasvogler.local
Description: Custom child theme for andreasvogler.local (migrated from Visionary, 2026-10-24)
Version: 1.0.0
Template: astra
Author: Andreas Vogler Studio
Author URI: https://andreasvogler.com
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* Import parent theme styles */
@import url('../astra/style.css');

/* ============================================
   MIGRATED STYLES FROM VISIONARY CHILD
   Migrated on 2026-10-24
   ============================================ */

/* @group Accordion */
h3.accordion-title {
    list-style: none;
    background: #e1e1e1;
    padding: 10px 15px;
    color: #666;
    font-weight: 300;
    border: 1px solid #bbb;
    border-radius: 5px;
    margin: 0;
    cursor: pointer;
}
/* @end */

/* @group General */
.rad-container, .layout_element {
    margin-top: 10px !important;
    margin-bottom: 30px !important;
}

#main_menu_area img {
    /* Filter previously applied: hue-rotate(-140deg); */
}

.ripple-underlay, .ripple {
    display: none !important;
}

#main_menu_area {
    background: #f6f6f6 !important;
}
/* @end */

/* @group Menu */
.theme-header #logo {
    top: -3px !important;
}

#mlogo img {
    margin: 8px;
    width: 77%;
}

#main_menu_area {
    border-bottom: 0;
}

#main_menu_area .skeleton {
    width: 95%;
}

.theme-header .menu > li.current_page_item {
    background: #ffffff;
}

.theme-header .menu > li:hover > a .m-el,
.theme-header .menu > li.current_page_item > a .m-el {
    border-bottom: none !important;
}

.compact-bar {
    display: none !important;
}

.theme-header .menu > li > a {
    padding: 0 45px;
}

.theme-header .menu > li:hover > a .m-el {
    color: #e20279;
}

@media (max-width: 1330px) {
    .theme-header .menu > li > a {
        padding: 0 15px;
    }
}

@media (max-width: 1050px) and (min-width: 770px) {
    #main_menu_area {
        height: auto !important;
        line-height: 50px !important;
    }

    #main_menu_area .right-area,
    #main_menu_area .left-area {
        float: none !important;
        height: 50px !important;
        line-height: 50px !important;
        margin: 10px 0;
        text-align: center !important;
    }

    #main_menu_area .main-menu-wrap {
        margin-left: 0;
        margin-bottom: 20px;
    }

    #main_menu_area .main-menu-wrap li {
        line-height: 50px;
    }

    #main_menu_area .main-menu-wrap li:first-child a {
        padding-left: 0;
    }
}
/* @end */

/* @group HOME */
.home {
    overflow: visible;
    height: auto;
    background: #fff;
}

.home #main_menu_area {
    border-bottom: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.05) !important;
}

.home #main_menu_area img {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}

.home #main_menu_area a {
    color: #fff;
}

.home .quartz div.slider-desc h1 {
    margin-top: 10px;
    line-height: 20px;
    text-transform: none;
    letter-spacing: 0;
}

.home .quartz div.slider-desc.s-c-l {
    max-width: 45%;
}

.home .fullscreen.quartz div.slider-desc.s-c-l {
    left: 88px;
}

.home .fullscreen.quartz div.slider-desc.s-c-l .title_line {
    display: none;
}

.home .quartz.fullscreen div.slider-item {
    position: absolute;
    display: none;
    opacity: 0;
}

.home .quartz.fullscreen div.slider-item:first-child {
    position: absolute;
    display: block;
    opacity: 1;
}
/* @end */

/* @group Title */
div.title-wrap {
    border-top: none !important;
    background: transparent !important;
}

.title_line {
    width: 50px;
    background: #e20279;
}
/* @end */

/* @group Footer */
#footer-menu {
    padding: 10px 0 !important;
}

#footer-menu, #footer-menu .footer-text, #footer-menu a {
    background: #eee !important;
    color: #777 !important;
    font-size: 12px !important;
}
/* @end */

/* @group Hover Effects */
.ioa-hover-fade .single-image .single-hover,
.ioa-hover-fade .hover-item .single-hover {
    background: rgba(0, 0, 0, 0.4) !important;
}

.ioa-hover-fade .single-image:hover .single-hover,
.ioa-hover-fade .hover-item:hover .single-hover {
    -webkit-animation: FadeIn 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) forwards;
    animation: FadeIn 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) forwards;
}

.grid-inner-wrap {
    background: rgba(0, 0, 0, 0.4) !important;
}

div.hover-title-area h4 {
    font-size: 22px;
}
/* @end */

/* @group Portfolio Gallery */
.pp_gallery, .pp_expand, .pp_play {
    display: none !important;
}
/* @end */

/* @group News & Posts */
.page-id-613 .image {
    width: 320px;
    height: 180px;
}

.page-id-613 .image img {
    width: 320px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -90px;
}

.page-id-3078 #content-wrap {
    width: 100%;
    max-width: 100%;
}

.three-column ul li div.inner-item-wrap h2 {
    font-size: 18px !important;
}

.page-wrapper.post {
    margin-top: 50px;
}

.post .skeleton {
    width: 800px !important;
}

.read-more {
    display: none;
}
/* @end */

/* @group Portfolio */
@media (min-width: 1400px) {
    /* Portfolio layout adjustments */
}

div.selene-controls-wrap > a.autoplay-control {
    bottom: auto;
}
/* @end */

/* @group Font Styles */
div.title-wrap h1.custom-title {
    font-size: 25px;
    font-weight: 300;
    color: #333;
    text-transform: none;
}

.ioa-text-column h2 {
    font-size: 35px;
}

.ioa-text-column h4 {
    font-size: 15px;
}
/* @end */

/* @group Mobile */
.mobile-header {
    padding: 10px 0 !important;
}
/* @end */

/* @group Social Links */
.social-set {
    position: relative;
    border: none;
}

.social-set ul {
    margin: 0;
    padding: 0;
}

.social-set ul li {
    float: left;
    border-bottom: none;
    margin: 0 1px 1px 0;
    padding: 0;
    position: relative;
    list-style: none;
}

.social-set ul li a {
    border-bottom: none;
    display: block;
    width: 40px;
    height: 38px;
    margin-left: 0;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    -webkit-perspective: 2500px;
    perspective: 2500px;
}

.social-set ul li span.social-block {
    width: 40px;
    padding: 10px 0;
    font-size: 18px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: none;
    transition: none;
}

.social-set ul li span.visible-block {
    color: #000103;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    background: rgba(0, 0, 0, 0.03);
}

.social-set ul li span.hover-block {
    background-color: #fff;
    color: white;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.social-set ul li a:hover span.visible-block {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
/* @end */

/* @group About / Portfolio */
.portfolio-columns .read-more {
    margin-top: 15px;
    text-decoration: none;
    color: #e2007a;
    border-bottom: 0px solid #4db9d1;
    color: #4db9d1;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
}

.portfolio-columns .read-more:hover {
    border-bottom: 1px solid #e2007a;
    color: #e2007a;
}

.full_width .rad-button-widget {
    margin: 0 0 30px 30px !important;
}

.full_width .ioa-text-column {
    padding-bottom: 0 !important;
}

a.ioa-button {
    background: #aaa !important;
}

a.ioa-button:hover {
    background: #777 !important;
}
/* @end */

/* @group Publications */
.image-inner-wrap img, .image-align-none img {
    width: 100%;
}
/* @end */

/* @group Custom Menu */
.ioa-menu {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0px;
    background: #eee;
    width: 100%;
    border-bottom: 1px solid #fff;
}

.ioa-menu li,
.ioa-menu span {
    border-radius: 0 !important;
    line-height: 40px;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.ioa-menu li {
    margin-right: 1px !important;
}

.ioa-menu span {
    padding: 5px 30px !important;
}

.ioa-menu li.active span,
.ioa-menu li:hover span {
    background: #e1e1e1 !important;
    color: #e2007a !important;
}

@media screen and (orientation: portrait) {
    .ioa-menu li {
        width: 100%;
    }
}

.skeleton .ioa-menu {
    margin-bottom: 10px !important;
}

.mutual-content-wrap.full-layout {
    padding-top: 40px;
}
/* @end */

/* ============================================
   ASTRA-SPEZIFISCHE ANPASSUNGEN
   ============================================ */

/* Sticky Header aktivieren - auf dem AEUSSEREN .site-header (nicht nur die
   innere primary-header-bar), damit auch Astras "Transparent Header"-Modus
   keine durchsichtige Leiste über dem Hero erzeugen kann. */
.site-header,
.ast-primary-header-bar,
.main-header-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background-color: #ffffff !important;
}

.site-header {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Transparent-Header-Feature von Astra fuer diese Seite deaktivieren -
   wir wollen durchgehend einen deckend weissen, sticky Header. */
.ast-header-break-point.ast-header-custom-item-outside,
.ast-theme-transparent-header .site-header {
    background-color: #ffffff !important;
}

/* Stelle sicher, dass Parent-Elemente Sticky nicht blockieren.
   WICHTIG: body/html duerfen KEIN overflow:hidden haben - das deaktiviert
   position:sticky in Safari komplett, egal auf welchem Nachfahren-Element. */
.site-primary-header-wrap {
    position: static !important;
    overflow: visible !important;
}

/* Echtes Full-Bleed fuer den Hero-Slider erzwingen.
   Astras "Blocks Layout"-System (.entry-content[data-ast-blocks-layout])
   setzt fuer .alignfull nur einen kleinen -20px-Rand statt des vollen
   Viewport-Breakouts - das gewinnt in der Praxis gegen die eigentliche
   Breakout-Regel. Hier direkt mit !important ueberschrieben. */
.entry-content .wp-block-spectra-slider.alignfull,
.entry-content[data-ast-blocks-layout] .wp-block-spectra-slider.alignfull {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    max-width: 100vw !important;
    width: 100vw !important;
}

/* Defensiver Fallback: Swiper-Slide-Breite per CSS erzwingen, unabhaengig
   davon ob Swiper.js korrekt initialisiert (JS setzt die Breite normalerweise
   selbst per inline-style, aber falls die Initialisierung durch ein altes
   Plugin-Skript gestoert wird, greift dieser reine CSS-Fallback trotzdem). */
.wp-block-spectra-slider .swiper-wrapper {
    width: 100% !important;
}
.wp-block-spectra-slider .swiper-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}
.wp-block-spectra-slider .swiper-slide .wp-block-spectra-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* Navigationspfeile ausblenden, nur Pagination-Punkte behalten (zusaetzlich
   zu den Block-Attributen navigation:false/displayArrows:false als
   Sicherheitsnetz). Punkte ins Bild hochziehen statt im Weissraum darunter. */
.wp-block-spectra-slider .swiper-button-next,
.wp-block-spectra-slider .swiper-button-prev {
    display: none !important;
}

.wp-block-spectra-slider .swiper-pagination {
    position: absolute !important;
    bottom: 24px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 20 !important;
}

/* Text im Hero wirklich UNTEN verankern statt vertikal zentriert.
   Spectra's eigenes "justifyContentDesktop"-Attribut wird intern nicht wie
   erwartet uebernommen (rendert als justify-content:center) - hier direkt
   per CSS erzwungen. align-items:flex-start (links) war bereits korrekt.
   WICHTIG: ersetzt weiter unten durch zwei gezielte Klassen pro Slide
   (hero-pos-bottom / hero-pos-middle), diese pauschale Regel ist daher
   wieder entfernt - siehe Kommentar bei VERSION 1.0.11. */

/* VERSION 1.0.6 Rueckbau: position:fixed fuer Header+Footer hat mehr kaputt
   gemacht als geloest (Header schrumpfte auf Inhaltsbreite ohne
   left/right:0, Footer ueberlagerte das untere Bilddrittel) - zurueckgebaut
   auf normalen Dokumentfluss. Header bleibt sticky+weiss (siehe oben),
   Footer bleibt normal nach dem Hero. */

/* Spectra setzt auf .wp-block-spectra-slider selbst standardmaessig
   "padding:20px 0" - das erzeugte die weissen Streifen oben/unten ueber
   dem Bild. Hier entfernt. */
.wp-block-spectra-slider.alignfull {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Schriftart des Originals ("Lato") uebernehmen statt Astras Standard-Font.
   Google-Font-Einbindung siehe functions.php. */
body,
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
button, input, select, textarea,
.ast-button, .ast-custom-button {
    font-family: "Lato", Helvetica, Arial, sans-serif !important;
}

/* Homepage-Hero wie im Original: Bild spannt die VOLLE Fensterhoehe (100vh),
   Header schwebt halbtransparent darueber statt es nach unten zu druecken.
   WICHTIG gegenueber dem letzten (gescheiterten) Versuch: position:fixed
   braucht IMMER explizit left/right/width - sonst schrumpft das Element auf
   seine Inhaltsbreite zusammen. Nur body.home betroffen, alle anderen
   Seiten behalten den normalen, undurchsichtigen Sticky-Header von oben. */
body.home .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Logo + Menu-Text auf der Startseite weiss, damit sie vor dunklen/hellen
   Fotos lesbar bleiben (wie im Original: Logo wird invertiert). */
body.home .site-header img.custom-logo {
    filter: brightness(0) invert(1);
}

body.home .site-header .menu-link,
body.home .site-header .site-title a {
    color: #ffffff !important;
}

/* Wenn in WP-Admin eingeloggt: WordPress schiebt die Seite per
   Admin-Toolbar (fixed, 32px/46px hoch) nach unten - Header entsprechend
   versetzen, sonst ueberlappen sich beide. Betrifft nur den eingeloggten
   Voransicht-Modus, nicht echte Website-Besucher. */
body.home.admin-bar .site-header {
    top: 32px !important;
}
@media screen and (max-width: 782px) {
    body.home.admin-bar .site-header {
        top: 46px !important;
    }
}

/* Hero nimmt jetzt die komplette Viewporthoehe ein, da der Header nicht
   mehr im Dokumentfluss steht und somit keinen Platz mehr wegnimmt. */
body.home .wp-block-spectra-slider.alignfull {
    min-height: 100vh !important;
}
body.home .wp-block-spectra-slider .wp-block-spectra-container {
    min-height: 100vh !important;
}

/* BUGFIX: Eine aeltere Regel (weiter oben, Zeile ~466) setzt auf
   .ast-primary-header-bar/.main-header-bar (den INNEREN Ebenen des Headers)
   weiterhin volldeckendes Weiss mit !important. Meine Overlay-Regel hatte
   nur den AEUSSEREN .site-header transparent gemacht - das innere Element
   lag opak-weiss darueber und verdeckte alles (inkl. des weiss-invertierten
   Logos: weiss auf weiss = unsichtbar). Hier auf allen drei Ebenen fuer
   body.home explizit transparent erzwingen, mit hoeherer Spezifitaet. */
body.home .site-header,
body.home .ast-primary-header-bar,
body.home .main-header-bar,
body.home .site-primary-header-wrap {
    background-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

/* Das <ul class="main-header-menu"> hat von Astra selbst eine eigene
   Hintergrundfarbe (var(--ast-global-color-4)), unabhaengig vom Header -
   das war der "weissliche Kasten" hinter Portfolio/About/News/etc. */
body.home .main-header-menu {
    background-color: transparent !important;
}

/* Slide-Positionierung wie im Original: Slide 1+3 Text unten-links,
   Slide 2+4 Text vertikal mittig-links (im Original "s-b-l" vs "s-c-l"
   Klassen). Ersetzt die vorherige pauschale flex-end-Regel fuer alle
   Slides durch zwei gezielte Klassen pro Slide. */
.wp-block-spectra-slider .wp-block-spectra-container.hero-pos-bottom {
    justify-content: flex-end !important;
}
.wp-block-spectra-slider .wp-block-spectra-container.hero-pos-middle {
    justify-content: center !important;
}

/* Weiterhin ein undurchsichtiger Kasten im Header sichtbar (vermutlich ein
   einzelnes, noch nicht identifiziertes Element mit eigenem Hintergrund,
   z.B. ".ast-primary-header-bar" selbst, da Astras eigene dynamische CSS
   dafuer eine Regel OHNE body.home-Scope setzt). Statt weiter einzeln zu
   suchen: hier ALLE Elemente innerhalb des Headers auf der Startseite
   pauschal transparent erzwingen (sicher, da dieser Header nur Logo+simple
   Top-Level-Links enthaelt, keine Dropdown-Submenues mit eigenem noetigen
   Hintergrund). */
body.home .site-header,
body.home .site-header * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Rand/Schatten des Headers bleibt subtil erhalten, Logo/Text-Farben von
   weiter oben (weiss) gelten weiterhin, da diese Regel nur background-*
   betrifft. */
body.home .site-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Header-Feintuning wie im Original (gilt auf ALLEN Seiten, nicht nur Home):
   - Logo/Menu immer im gleichen, festen Abstand zum Seitenrand
   - Menu-Item-Abstaende wachsen bei breiten Bildschirmen (Original: 45px ab
     1330px, 15px darunter)
   - groessere Menu-Schrift
   - Hover-Farbe Magenta (#e20279), die Original-Akzentfarbe */
/* Astras eigener .ast-container (gleiche Klasse auf diesem Element) hat
   selbst max-width:1240px - auf breiten Bildschirmen zentriert sich das
   bereits mit grossem Eigenrand, und unser Padding kam oben drauf (daher
   der riesige Gesamtabstand). max-width hier aufgehoben, damit NUR unser
   fester 40px-Abstand zum echten Fensterrand zaehlt, bei jeder Breite. */
.site-primary-header-wrap {
    max-width: 100% !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.main-header-menu .menu-link {
    font-size: 16px !important;
    letter-spacing: 0.5px;
    padding: 0 18px !important;
    text-transform: uppercase !important;
}

@media (min-width: 1330px) {
    .main-header-menu .menu-link {
        padding: 0 35px !important;
    }
}

.ast-builder-menu-1 .menu-link:hover,
.ast-builder-menu-1 .main-header-menu > .menu-item:hover > .menu-link,
.ast-builder-menu-1 .menu-item.current-menu-item > .menu-link {
    color: #e20279 !important;
}

/* ============================================
   PORTFOLIO GRID (templates/portfolio-grid.php)
   Originalgetreu: echtes Masonry (dynamische Bildhoehen, kein Zuschneiden),
   randlos von Seitenrand zu Seitenrand, Hover-Overlay mit Titel.
   ============================================ */
.portfolio-grid-page .site-main,
.portfolio-grid-page #primary {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* Randlos: gleicher Full-Bleed-Trick wie beim Hero-Slider. Hier ohne
   Astras "Blocks Layout"-Sonderregel noetig, da dieses Template nicht
   durch den Gutenberg-Block-Parser laeuft, sondern direktes PHP ist. */
.portfolio-grid {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    box-sizing: border-box;
}

/* Echtes Masonry via CSS-Spalten (Pinterest-Stil): jedes Bild behaelt
   sein natuerliches Seitenverhaeltnis statt gleichmaessig zugeschnitten
   zu werden - genau wie im Original. */
.portfolio-grid {
    column-count: 4;
    column-gap: 2px;
}

@media (max-width: 1024px) {
    .portfolio-grid { column-count: 3; }
}
@media (max-width: 680px) {
    .portfolio-grid { column-count: 2; }
}
@media (max-width: 420px) {
    .portfolio-grid { column-count: 1; }
}

.portfolio-grid-item {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    margin-bottom: 2px;
    break-inside: avoid;
}

.portfolio-grid-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.portfolio-grid-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #eee;
}

.portfolio-grid-item:hover .portfolio-grid-image img {
    transform: scale(1.05);
}

.portfolio-grid-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.portfolio-grid-item:hover .portfolio-grid-overlay {
    opacity: 1;
}

.portfolio-grid-title {
    color: #ffffff;
    font-size: 20px;
    font-weight: 300;
    text-align: center;
    padding: 0 20px;
    margin: 0;
}

/* ============================================
   SINGLE PORTFOLIO (single-portfolio.php)
   Original-Layout: Galerie links (2/3), Titel+Text rechts (1/3).
   ============================================ */
.single-portfolio-layout {
    display: flex;
    gap: 40px;
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 40px;
    align-items: flex-start;
}

.single-portfolio-gallery {
    flex: 0 0 66%;
    max-width: 66%;
}

.single-portfolio-gallery-item {
    margin: 0 0 20px 0;
}

.single-portfolio-gallery-item img {
    width: 100%;
    height: auto;
    display: block;
}

.single-portfolio-gallery-item figcaption {
    font-size: 13px;
    color: #777;
    margin-top: 6px;
}

.single-portfolio-description {
    flex: 0 0 calc(34% - 40px);
    max-width: calc(34% - 40px);
    position: sticky;
    top: 40px;
    /* Bleibt beim normalen Seiten-Scroll an Ort und Stelle (sticky), scrollt
       aber per Mausrad SEINEN EIGENEN Inhalt weiter, sobald der Text laenger
       ist als der sichtbare Bereich - kein Warten, bis die Galerie links
       komplett durchgescrollt ist. */
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    /* Abstand zwischen Text und der Scrollbar (sonst liegt die Scrollbar
       direkt am Textrand/ueberlappt ihn). */
    padding-right: 40px;
    /* Da padding-right die Box sonst breiter machen wuerde als oben per
       max-width berechnet, hier box-sizing erzwingen, damit padding
       INNERHALB der berechneten Breite bleibt statt sie zu vergroessern. */
    box-sizing: border-box;
}

/* Scrollbar in Markenfarbe (Magenta, 70% deckend). Firefox + Chrome/Safari
   brauchen jeweils eigene Syntax, daher beide. rgba() statt opacity, da
   opacity auf Scrollbar-Pseudoelementen browseruebergreifend unzuverlaessig
   unterstuetzt wird. */
.single-portfolio-description {
    scrollbar-width: thin;
    scrollbar-color: rgba(226, 2, 121, 0.7) #f0f0f0;
}
.single-portfolio-description::-webkit-scrollbar {
    width: 8px;
}
.single-portfolio-description::-webkit-scrollbar-track {
    background: #f0f0f0;
}
.single-portfolio-description::-webkit-scrollbar-thumb {
    background-color: rgba(226, 2, 121, 0.7);
    border-radius: 4px;
}
.single-portfolio-description::-webkit-scrollbar-thumb:hover {
    background-color: rgba(184, 1, 95, 0.85);
}

.single-portfolio-title {
    font-size: 28px;
    font-weight: 300;
    margin-bottom: 20px;
}

.single-portfolio-content p {
    margin-bottom: 1em;
    line-height: 1.7;
}

.single-portfolio-back {
    margin-top: 30px;
}
.single-portfolio-back a {
    color: #e20279;
    text-decoration: none;
}

@media (max-width: 900px) {
    .single-portfolio-layout {
        flex-direction: column;
        padding: 0 20px;
    }
    .single-portfolio-gallery,
    .single-portfolio-description {
        flex: 1 1 100%;
        max-width: 100%;
        position: static;
    }
}

/* Hero-Fade-Slider oben auf der Projekt-Einzelseite: randlos (volle
   Fensterbreite, kein Abstand nach oben zum Header). Gleicher Full-Bleed-
   Trick wie beim Homepage-Hero. */
.single-portfolio-page,
.single-portfolio-article {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.single-portfolio-hero-slider {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    height: 60vh;
    min-height: 400px;
    overflow: hidden;
    background: #111;
}
.single-portfolio-hero-slider .hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease;
}
.single-portfolio-hero-slider .hero-slide.is-active {
    opacity: 1;
}
.hero-slide-caption {
    position: absolute;
    color: #fff;
    padding: 30px 50px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.hero-slide-caption h2 {
    font-size: 24px;
    font-weight: 400;
    margin: 0;
    color: #fff;
}
.hero-slide-caption-s-b-l { left: 0; bottom: 0; }
.hero-slide-caption-s-t-l { left: 0; top: 0; }
.hero-slide-caption-s-b-r { right: 0; bottom: 0; text-align: right; }
.hero-slide-caption-s-t-r { right: 0; top: 0; text-align: right; }

.single-portfolio-hero-static {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    height: 60vh;
    min-height: 400px;
    background-size: cover;
    background-position: center;
}

.single-portfolio-subtitle {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #e20279;
    font-weight: 400;
    margin-bottom: 10px;
}

/* Lightbox fuer Galerie-Bilder */
.portfolio-lightbox-trigger {
    display: block;
    cursor: zoom-in;
}
.portfolio-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    cursor: zoom-out;
}
.portfolio-lightbox-overlay.is-open {
    display: flex;
}
.portfolio-lightbox-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
}
.portfolio-lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 36px;
    cursor: pointer;
}

/* Prev/Next-Navigation zwischen Projekten */
.single-portfolio-nav {
    display: flex;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto 60px auto;
    padding: 20px 40px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.single-portfolio-nav a {
    color: #333;
    text-decoration: none;
    font-size: 15px;
}
.single-portfolio-nav a:hover {
    color: #e20279;
}

/* "More Similar Projects" */
.single-portfolio-related {
    max-width: 1400px;
    margin: 0 auto 60px auto;
    padding: 0 40px;
}
.single-portfolio-related-title {
    font-size: 22px;
    font-weight: 300;
    margin-bottom: 20px;
}
.single-portfolio-related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 680px) {
    .single-portfolio-related-grid { grid-template-columns: repeat(2, 1fr); }
}
.single-portfolio-related-item {
    display: block;
    text-decoration: none;
    color: #333;
}
.single-portfolio-related-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    margin-bottom: 8px;
}
.single-portfolio-related-item-title {
    font-size: 14px;
}
.single-portfolio-related-item:hover .single-portfolio-related-item-title {
    color: #e20279;
}

/* Logo auf Portfolio-Projektseiten in reinem Prozess-Cyan (#00AEEF, CMYK
   100/0/0/0 - auf Wunsch kraeftiger als das gedaempfte Original-#4db9d1).
   Technik: Maskierung statt CSS-Filter - faerbt das PNG-Logo EXAKT in der
   Zielfarbe (Filter-Kombinationen zur Farbannaeherung waeren ungenau).
   Das Original-<img> wird unsichtbar gemacht, ein Pseudo-Element nutzt das
   Logo als Maske mit der gewuenschten Hintergrundfarbe. Logo-URL wird per
   CSS-Custom-Property aus functions.php injiziert (dynamisch, nicht
   hartkodiert). */
body.single-portfolio .site-header .custom-logo {
    opacity: 0;
}
body.single-portfolio .site-header .custom-logo-link {
    position: relative;
    display: inline-block;
}
body.single-portfolio .site-header .custom-logo-link::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #00AEEF;
    -webkit-mask-image: var(--astra-child-logo-url);
    mask-image: var(--astra-child-logo-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Logo auf den 5 Hauptseiten (Portfolio-Grid, About, News, Publications,
   Contact) in Magenta (#e20279, Hauptakzentfarbe der Seite) - war zuvor
   schwarz (unveraendertes Original-PNG). Gleiche Masken-Technik wie beim
   Cyan-Logo auf den Portfolio-Einzelseiten oben, nur andere Farbe/Seiten. */
body.page-template-portfolio-grid .site-header .custom-logo,
body.page-template-about-page .site-header .custom-logo,
body.page-template-news-grid .site-header .custom-logo,
body.page-template-publications-grid .site-header .custom-logo,
body.page-template-contact-page .site-header .custom-logo {
    opacity: 0;
}
body.page-template-portfolio-grid .site-header .custom-logo-link,
body.page-template-about-page .site-header .custom-logo-link,
body.page-template-news-grid .site-header .custom-logo-link,
body.page-template-publications-grid .site-header .custom-logo-link,
body.page-template-contact-page .site-header .custom-logo-link {
    position: relative;
    display: inline-block;
}
body.page-template-portfolio-grid .site-header .custom-logo-link::after,
body.page-template-about-page .site-header .custom-logo-link::after,
body.page-template-news-grid .site-header .custom-logo-link::after,
body.page-template-publications-grid .site-header .custom-logo-link::after,
body.page-template-contact-page .site-header .custom-logo-link::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #e20279;
    -webkit-mask-image: var(--astra-child-logo-url);
    mask-image: var(--astra-child-logo-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Credit-Zeilen am Textende (z.B. "Design Team:", "Photographer:",
   "Support and Collaboration:") in Cyan - diese sind im Beitragstext als
   <strong> ausgezeichnet. */
.single-portfolio-content strong {
    color: #00AEEF;
}

/* ============================================
   ABOUT PAGE (templates/about-page.php)
   ============================================ */
.about-page .site-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.about-section {
    margin: 60px 0;
}

.about-section-title {
    font-size: 32px;
    font-weight: 300;
    margin-bottom: 10px;
    border-bottom: 2px solid #eee;
    padding-bottom: 20px;
}

/* --- Company Profile --- */
.about-profile-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 30px;
}
@media (max-width: 800px) {
    .about-profile-columns { grid-template-columns: 1fr; }
}
.about-profile-col p {
    line-height: 1.7;
    color: #444;
}
.about-contact-link {
    color: #e20279;
    text-decoration: none;
    font-weight: 600;
}

/* --- Testimonials (statisches Grid) --- */
.about-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 30px;
}
@media (max-width: 900px) {
    .about-testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .about-testimonials-grid { grid-template-columns: 1fr; }
}
.about-testimonial-card {
    background: #f8f8f8;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease;
}
.about-testimonial-card:hover {
    background: #f1f1f1;
}
.about-testimonial-photo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 10px;
}
.about-testimonial-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about-testimonial-author {
    font-weight: 600;
    font-size: 13px;
    color: #e20279;
    margin: 0 0 8px 0;
}
.about-testimonial-quote {
    font-size: 13px;
    line-height: 1.6;
    color: #555;
    margin: 0 0 10px 0;
    font-style: italic;
    /* Standard: nur 3 Zeilen sichtbar, Rest abgeschnitten */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.about-testimonial-quote p {
    margin: 0 0 10px 0;
}
/* Beim Klick (is-expanded): Begrenzung aufheben, voller Text sichtbar */
.about-testimonial-card.is-expanded .about-testimonial-quote {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}
.about-testimonial-toggle {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    font-weight: 600;
}
.about-testimonial-card:hover .about-testimonial-toggle {
    color: #e20279;
}

/* --- Team (kompaktes Grid, Klick-Erweiterung) --- */
.about-team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 30px;
}
@media (max-width: 900px) {
    .about-team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .about-team-grid { grid-template-columns: repeat(2, 1fr); }
}
.about-team-card {
    cursor: pointer;
    text-align: center;
}
.about-team-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 14px;
    background: #eee;
}
.about-team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.about-team-card:hover .about-team-photo img {
    transform: scale(1.05);
}
.about-team-name {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px 0;
}
.about-team-role {
    font-size: 12px;
    color: #888;
    display: block;
}
.about-team-bio-hidden {
    display: none;
}

/* Team-Bio-Modal */
.about-team-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    padding: 20px;
}
.about-team-modal-overlay.is-open {
    display: flex;
}
.about-team-modal {
    background: #fff;
    border-radius: 8px;
    max-width: 500px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 40px;
    position: relative;
}
.about-team-modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    color: #999;
    line-height: 1;
}
.about-team-modal-close:hover {
    color: #e20279;
}
.about-team-modal-photo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px auto;
}
.about-team-modal-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about-team-modal h3 {
    text-align: center;
    margin: 0 0 6px 0;
}
.about-team-modal-role {
    display: block;
    text-align: center;
    color: #e20279;
    font-size: 13px;
    margin-bottom: 20px;
}
.about-team-modal-bio {
    line-height: 1.7;
    color: #444;
}
.about-team-modal-bio a {
    color: #e20279;
}

/* ============================================
   NEWS GRID (templates/news-grid.php)
   ============================================ */
.news-page .site-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 60px 40px;
}

/* --- Feature (neuester Beitrag) --- */
.news-feature {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
    align-items: center;
    text-decoration: none;
    color: inherit;
    margin: 50px 0 60px 0;
    padding-bottom: 50px;
    border-bottom: 2px solid #eee;
}
@media (max-width: 800px) {
    .news-feature { grid-template-columns: 1fr; }
}
.news-feature-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 6px;
    background: #eee;
}
.news-feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.news-feature:hover .news-feature-image img {
    transform: scale(1.04);
}
.news-feature-title {
    font-size: 30px;
    font-weight: 300;
    margin: 10px 0 14px 0;
    line-height: 1.25;
}
.news-feature-excerpt {
    color: #555;
    line-height: 1.6;
    margin-bottom: 16px;
}
.news-feature-date {
    font-size: 13px;
    color: #999;
}
.news-category-tag {
    display: inline-block;
    background: #e20279;
    color: #fff;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
}

/* --- Kategorie-Filter --- */
.news-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}
.news-filter-pill {
    background: #f1f1f1;
    border: none;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    color: #555;
    transition: background 0.2s ease, color 0.2s ease;
}
.news-filter-pill:hover {
    background: #e5e5e5;
}
.news-filter-pill.is-active {
    background: #e20279;
    color: #fff;
}

/* --- Raster --- */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
@media (max-width: 900px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .news-grid { grid-template-columns: 1fr; }
}
.news-card {
    display: block;
    text-decoration: none;
    color: inherit;
}
.news-card-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 6px;
    background: #eee;
    margin-bottom: 14px;
}
.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.news-card:hover .news-card-image img {
    transform: scale(1.05);
}
.news-card-title {
    font-size: 17px;
    font-weight: 600;
    margin: 10px 0 8px 0;
    line-height: 1.35;
}
.news-card-excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 10px;
}
.news-card-date {
    font-size: 12px;
    color: #999;
}

/* "Mehr laden"-Logik: zunaechst ausgeblendet, bis Button geklickt wird
   oder ein Kategorie-Filter aktiv ist (dann per JS entfernt). */
.news-card-extra {
    display: none;
}
.news-card-hidden {
    display: none;
}

.news-load-more-wrap {
    text-align: center;
    margin-top: 50px;
}
.news-load-more {
    background: #fff;
    border: 2px solid #e20279;
    color: #e20279;
    padding: 12px 34px;
    border-radius: 30px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.news-load-more:hover {
    background: #e20279;
    color: #fff;
}

/* ============================================
   PUBLICATIONS GRID (templates/publications-grid.php)
   ============================================ */
.publications-page .site-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 40px 60px 40px;
}

.publications-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
@media (max-width: 900px) {
    .publications-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .publications-grid { grid-template-columns: 1fr; }
}

.publication-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.publication-cover {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 4px;
    background: #eee;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    margin-bottom: 16px;
}
.publication-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.publication-cover-placeholder {
    width: 100%;
    height: 100%;
    background: #eee;
}

.publication-download-overlay {
    position: absolute;
    inset: 0;
    background: rgba(226, 2, 121, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.publication-card:hover .publication-download-overlay {
    opacity: 1;
}
.publication-download-icon {
    color: #fff;
    font-size: 36px;
    line-height: 1;
}

.publication-source {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #e20279;
    font-weight: 600;
    margin-bottom: 6px;
}
.publication-title {
    font-size: 18px;
    font-weight: 300;
    margin: 0 0 8px 0;
    line-height: 1.3;
}
.publication-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* ============================================
   CONTACT PAGE (templates/contact-page.php)
   ============================================ */
.contact-page .site-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}
/* Wie bei den Projekt-Einzelseiten (siehe .single-portfolio-page weiter
   oben): kein Abstand ueber dem randlosen Hero-Bild, das Bild sitzt direkt
   unter dem Header. */
#primary.contact-page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.contact-columns {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 700px;
    gap: 60px;
    align-items: start;
    margin-top: 50px;
    margin-bottom: 60px;
}

.contact-title {
    font-size: 32px;
    font-weight: 300;
    margin-bottom: 24px;
}

.contact-address p {
    line-height: 1.7;
    margin-bottom: 18px;
}
.contact-address a {
    color: #e20279;
    text-decoration: none;
}
.contact-legal {
    font-size: 13px;
    color: #888;
}
/* Ueberschrift innerhalb des rechtlichen Kleingedruckten darf nicht die
   grosse Standard-Heading-Groesse erben (font-size wird von Browsern an
   h1-h6 immer explizit gesetzt, daher hier gezielt klein machen). */
.contact-legal h2 {
    font-size: 15px;
    font-weight: 700;
    color: #888;
    margin-bottom: 8px;
}

.contact-form-wrap {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}
.contact-form-title {
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 18px;
}
.contact-form-wrap .wpcf7-form p {
    margin-bottom: 16px;
}
.contact-form-wrap .wpcf7-form label,
.contact-form-wrap .wpcf7-form br {
    display: none;
}
.contact-form-wrap .wpcf7-form input[type="text"],
.contact-form-wrap .wpcf7-form input[type="email"],
.contact-form-wrap .wpcf7-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 15px;
    box-sizing: border-box;
}
.contact-form-wrap .wpcf7-form textarea {
    min-height: 130px;
    resize: vertical;
}
.contact-form-wrap .wpcf7-form input[type="submit"] {
    background: #e20279;
    color: #fff;
    border: none;
    padding: 12px 34px;
    border-radius: 30px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.contact-form-wrap .wpcf7-form input[type="submit"]:hover {
    background: #b8015f;
}
.contact-form-wrap .wpcf7-form-control-wrap {
    display: block;
}

.contact-image-col img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
}

.contact-map-wrap {
    width: 100%;
    line-height: 0;
}
.contact-map-wrap iframe {
    display: block;
}
.contact-map-wrap .avs-consent-placeholder {
    height: 450px;
}

/* ============================================
   COOKIE-CONSENT (inc/cookie-consent.php/.js)
   ============================================ */

/* --- Klick-Platzhalter fuer YouTube/Google Maps --- */
.avs-consent-placeholder {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 220px;
    background: #111;
    overflow: hidden;
}
.single-portfolio-content .avs-consent-placeholder,
.entry-content .avs-consent-placeholder {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 220px;
}
.avs-consent-placeholder-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(1px) brightness(0.55);
}
.avs-consent-placeholder-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 30px;
    text-align: center;
    color: #fff;
}
.avs-consent-placeholder-overlay-solid {
    background: #2a2a2a;
}
.avs-consent-placeholder-overlay p {
    max-width: 480px;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.avs-consent-load-btn {
    background: #e20279;
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 30px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.avs-consent-load-btn:hover {
    background: #b8015f;
}

/* --- Banner unten --- */
.avs-cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100001;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    padding: 20px 30px;
    font-family: "Lato", Helvetica, Arial, sans-serif;
}
.avs-cookie-banner[hidden] {
    display: none;
}
.avs-cookie-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.avs-cookie-banner-text {
    flex: 1 1 480px;
}
.avs-cookie-banner-text p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}
.avs-cookie-banner-text a {
    color: #e20279;
    text-decoration: underline;
}
.avs-cookie-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 0 0 auto;
}
.avs-cookie-btn {
    border: 1px solid #ddd;
    background: #f7f7f7;
    color: #333;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease;
}
.avs-cookie-btn:hover {
    background: #eee;
}
.avs-cookie-btn-accept {
    background: #e20279;
    border-color: #e20279;
    color: #fff;
}
.avs-cookie-btn-accept:hover {
    background: #b8015f;
}
.avs-cookie-banner-settings {
    max-width: 1200px;
    margin: 18px auto 0 auto;
    padding-top: 18px;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.avs-cookie-banner-settings[hidden] {
    display: none;
}
.avs-cookie-category {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}
.avs-cookie-category input {
    margin-top: 3px;
}
.avs-cookie-banner-settings .avs-cookie-btn {
    align-self: flex-start;
}
@media (max-width: 700px) {
    .avs-cookie-banner-inner {
        flex-direction: column;
        align-items: stretch;
    }
    .avs-cookie-banner-actions {
        justify-content: stretch;
    }
    .avs-cookie-btn {
        flex: 1 1 auto;
    }
}

/* VERSION: 1.0.21 */