/* ============================================================
   AKAI – Map-Popup (WP Grid Builder Map Facet)
   Eine zugewiesene Popup-Card hat in der Google-InfoWindow /
   Leaflet-Popup keine Breite -> Box kollabiert zu 0 (nur Tip+Shadow).
   Fix: dem Popup-Inhalt eine feste Breite + Innenabstand geben.
   Provider-agnostisch (Google / Leaflet-OSM / Mapbox).
   ============================================================ */
.wpgb-marker-popup .gm-style-iw-d > *,
.wpgb-marker-popup .leaflet-popup-content > *,
.wpgb-marker-popup .mapboxgl-popup-content > * {
    width: 300px;
    max-width: 300px;
}
.wpgb-marker-popup .wpgb-card-inner {
    padding: 16px 18px;
}

/* ============================================================
   AKAI – Adressarten-Liste auf der Adress-Einzelseite
   Shortcode [akai_adressarten], 28.07.2026

   Struktur:  li.akai-gruppe    = Hauptgruppe (Wohngebäude, Weitere Leistungen …)
              li.akai-leistung  = Unterpunkt der Gruppe darüber

   Die Unterpunkte werden eingerückt, damit die Zuordnung sichtbar wird.
   ============================================================ */
.akai-adressarten .akai-leistung {
    margin-left: 1.4em;
}

/* Etwas Luft vor jeder neuen Hauptgruppe – aber nicht vor der ersten,
   sonst entsteht oben ein unnötiger Abstand. */
.akai-adressarten .akai-gruppe + .akai-leistung {
    margin-top: 0;
}
.akai-adressarten .akai-leistung + .akai-gruppe {
    margin-top: .5em;
}

/* ============================================================
   AKAI – Netzwerk-Kacheln (WP Grid Builder, Card 1 "AKAI Card")
   Partner-Logos (Beitragsbild) im Kachel-Hintergrund + Layout
   06.08.2026, AKAI-Style-Runde: Logo oben, Titel unten, 200px hoch

   Die Card selbst blendet das Thumbnail per opacity:0 aus
   (generiert in uploads/wpgb/grids/G2C1C21.css). Diese Regeln
   überschreiben das gezielt – hier statt in der Card, damit
   Card-Editor-Saves die Gestaltung nicht wieder wegwerfen.
   .wpgb-card-inner in ALLEN Selektoren = nötige Extra-Spezifität
   (die generierte Grid-CSS lädt NACH dem Child-CSS).

   Kachel-HÖHE steuert NICHT dieses CSS, sondern die ratio in den
   Grid-Settings (DB h4is9_wpgb_grids id=2, Breakpoint 1200):
   Höhe = floor(Spaltenbreite / ratio) − gutter. Aktuell 13:9 ≈ 200px.
   Das height-Feld ignoriert das Metro-Layout (vertikal) komplett!
   ============================================================ */

/* Kachel-Look (Frank 06.08., Runde 3): Weiß, AKAI-roter Rahmen,
   leichter Schatten. Die data-nothumb-Variante ist nötig, weil WPGB
   für Kacheln OHNE Beitragsbild eine eigene, spezifischere
   Hintergrund-Regel mitbringt (.wpgb-metro .wpgb-card[data-nothumb]…);
   die doppelte Klasse .wpgb-card-1.wpgb-card-1 gewinnt den Patt. */
.wp-grid-builder .wpgb-card-1 .wpgb-card-inner .wpgb-card-media,
.wp-grid-builder .wpgb-metro .wpgb-card-1.wpgb-card-1[data-nothumb] .wpgb-card-inner .wpgb-card-media {
    background: #fff;
    border: 1px solid #f10545;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

/* Hover: ganze Kachel AKAI-Rot mit 50 % Transparenz (Frank-Wunsch).
   Overlay als ::after ÜBER dem Logo (z-index 1), der Titel liegt
   darüber (z-index 2) und wechselt auf Weiß. pointer-events:none,
   damit der wpgb-card-layer-link (Kachel-Link aus dem Grid Builder)
   klickbar bleibt. */
.wp-grid-builder .wpgb-card-1 .wpgb-card-inner .wpgb-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #f10545;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
    z-index: 1;
}
.wp-grid-builder .wpgb-card-1:hover .wpgb-card-inner .wpgb-card-media::after {
    opacity: .5;
}
.wp-grid-builder .wpgb-card-1 .wpgb-card-inner .wpgb-card-media-content {
    z-index: 2;
}
.wp-grid-builder .wpgb-card-1:hover .wpgb-block-2,
.wp-grid-builder .wpgb-card-1:hover .wpgb-block-2 a {
    color: #fff;
}

/* Logo-Sichtbarkeit: 1 = volle Deckkraft (Frank 06.08.).
   Abgesoftete Variante: einfach z. B. .18 eintragen. */
.wp-grid-builder .wpgb-card-1 .wpgb-card-inner .wpgb-card-media-thumbnail {
    opacity: 1;
}

/* Logo oben ausgerichtet, nie beschnitten (contain statt cover).
   Obere Zone der Kachel; untere 40 % gehören dem Firmennamen. */
.wp-grid-builder .wpgb-card-1 .wpgb-card-inner .wpgb-card-media-thumbnail div {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    top: 12%;
    right: 15%;
    bottom: 40%;
    left: 15%;
}

/* Titel (Firmenname) unten ausrichten. WPGB zentriert den
   Content-Container per margin:auto – das schlägt justify-content,
   deshalb margin-top:auto statt Flex-Ausrichtung. */
.wp-grid-builder .wpgb-card-1 .wpgb-card-inner .wpgb-card-media-content-center {
    margin-top: auto;
    margin-bottom: 0;
}

/* Das Thumbnail ist ein Lightbox-Link – ohne diese Regel würde der
   Logo-Bereich die Lightbox öffnen statt dem Kachel-Link
   (wpgb-card-layer-link) zu folgen. */
.wp-grid-builder .wpgb-card-1 .wpgb-card-inner .wpgb-card-media-thumbnail a {
    pointer-events: none;
}

/* === Mobiler Feinschliff Go-Live akais.de (06.08.2026) ===
   Große Überschriften brachen auf schmalen Screens mitten im Wort um
   („Architekte-n" im Hero). hyphens:auto trennt sauber nach deutschen
   Regeln (html lang=de). */
@media (max-width: 980px) {
    h1,
    h2 {
        hyphens: auto;
        overflow-wrap: break-word;
    }
}