/*
Theme Name:   H&Ö Treppenbau
Theme URI:    https://www.treppenmontagebau.de
Description:  Child-Theme von Twenty Twenty-Five für die H. & Ö. Treppen GmbH.
              Farbwelt: Anthrazit und Stahlblau – bewusst nicht die Logofarben,
              sondern die Töne, die zu Metallbau und Edelstahl passen.
Author:       H. & Ö. Treppen GmbH
Template:     twentytwentyfive
Version:      2.0.0
Requires PHP: 7.4
Text Domain:  hoe-treppenbau
*/

/* ===========================================================================
   1. GRUNDLAGEN
   =========================================================================== */

:root {
    --hoe-linie: #E2E4E7;
    --hoe-linie-dunkel: #3A4046;
    --hoe-schatten: 0 10px 30px rgb(26 29 33 / 10%);
    --hoe-schatten-stark: 0 18px 45px rgb(26 29 33 / 18%);
}

/* Tastaturfokus muss überall deutlich sichtbar sein. */
:where(a, button, input, select, textarea, summary, details,
       .wp-block-navigation-item__content):focus-visible {
    outline: 3px solid var(--wp--preset--color--accent-1);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Lange deutsche Komposita dürfen umbrechen – mit Trennstrich. */
h1, h2, h3, h4 {
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
    text-wrap: balance;
}

img {
    max-width: 100%;
    height: auto;
}

/* Abstand Kopfbereich → Inhalt. Das Eltern-Theme setzt hier 64px + 64px;
   auf dem Handy ist das ein Sechstel des Bildschirms, bevor die Überschrift
   beginnt. WordPress gibt diese Werte inline aus, daher !important. */
.wp-site-blocks > main {
    margin-block-start: 2.5rem !important;
}
.wp-site-blocks > main > .wp-block-group:first-child {
    padding-block-start: 1.5rem !important;
}
@media (max-width: 781px) {
    .wp-site-blocks > main {
        margin-block-start: 1rem !important;
    }
    .wp-site-blocks > main > .wp-block-group:first-child {
        padding-block-start: 1rem !important;
    }
}

/* ===========================================================================
   2. KOPFBEREICH
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Oberste Leiste
   Vorher standen zwei Textblöcke an den äußeren Rändern – auf 1440px klafft
   dazwischen eine große Lücke. Jetzt läuft alles als EINE zentrierte Zeile
   mit schmalen Trennpunkten; das wirkt ruhiger und bleibt auch schmal lesbar.
   --------------------------------------------------------------------------- */
.hoe-topbar a {
    text-decoration: none;
}
.hoe-topbar a:hover {
    text-decoration: underline;
}
.hoe-topbar__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 .5rem;
    line-height: 1.6;
}
.hoe-trenner {
    color: #6B7280;
    user-select: none;
}
.hoe-wa {
    font-size: .8em;
    opacity: .85;
}
.hoe-wa::before {
    content: "(";
}
.hoe-wa::after {
    content: ")";
}
.hoe-topbar strong {
    color: var(--wp--preset--color--accent-1);
}

/* Auf schmalen Geräten nur das Nötigste: Telefon, Mobil, E-Mail. */
@media (max-width: 860px) {
    .hoe-opt,
    .hoe-trenner--opt {
        display: none;
    }
}
@media (max-width: 560px) {
    .hoe-topbar__zeile {
        font-size: .8rem;
        gap: 0 .35rem;
    }
}

/* ---------------------------------------------------------------------------
   Markenzeile: Logo mittig, Aktionsknopf rechts
   Drei Spalten, bei denen die äußeren gleich breit sind – nur so liegt das
   Logo wirklich in der Mitte der Seite und nicht in der Mitte des Restplatzes.
   --------------------------------------------------------------------------- */
.hoe-markenzeile {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}
.hoe-marke {
    grid-column: 2;
    justify-self: center;
}
.hoe-header-cta {
    grid-column: 3;
    justify-self: end;
}
.hoe-marke__text .wp-block-site-title {
    line-height: 1.15;
}

@media (max-width: 1023px) {
    .hoe-markenzeile {
        grid-template-columns: 1fr auto;
        gap: .75rem;
    }
    .hoe-marke {
        grid-column: 1;
        justify-self: start;
    }
    .hoe-header-cta {
        grid-column: 2;
    }
}
@media (max-width: 600px) {
    .hoe-markenzeile {
        grid-template-columns: 1fr;
    }
    .hoe-marke,
    .hoe-header-cta {
        grid-column: 1;
        justify-self: center;
    }
    .hoe-header-cta {
        width: 100%;
    }
    .hoe-header-cta .wp-block-button,
    .hoe-header-cta .wp-block-button__link {
        width: 100%;
        text-align: center;
    }
}
.hoe-tel a {
    font-weight: 700;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Logo
   Die Bildmarke ist breit und flach – bei 60px Breite ging sie unter. Sie
   bekommt mehr Fläche und eine ruhige Zone rechts, damit sie als eigenes
   Zeichen gelesen wird und nicht mit dem Schriftzug verschwimmt. Die
   Logofarben bleiben unangetastet: sie sind die Marke, nicht Teil der
   Seitenpalette.
   --------------------------------------------------------------------------- */
.hoe-logo,
.wp-block-site-logo.hoe-logo {
    margin-right: .4rem;
}
.hoe-logo img {
    width: 200px !important;
    height: auto !important;
    max-width: none;
    display: block;
}
@media (max-width: 1023px) {
    .hoe-logo img {
        width: 150px !important;
    }
}
@media (max-width: 600px) {
    .hoe-logo img {
        width: 128px !important;
    }
}
@media (max-width: 380px) {
    .hoe-logo img {
        width: 104px !important;
    }
}

/* Der Kopfbereich bleibt beim Scrollen stehen – auf langen Seiten bleibt die
   Navigation und der Angebots-Button dadurch immer erreichbar. */
.wp-site-blocks > header {
    position: sticky;
    top: 0;
    z-index: 500;
    box-shadow: 0 1px 0 var(--hoe-linie);
}
.hoe-header-main {
    border-bottom: 1px solid var(--hoe-linie);
}

/* ---------------------------------------------------------------------------
   Navigation
   Acht Hauptpunkte statt fünfzehn – das war die eigentliche Ursache dafür,
   dass das Menü auf keinem Gerät gut aussah. Die Gestaltung kann eine
   überladene Struktur nicht retten.
   --------------------------------------------------------------------------- */

.hoe-nav .wp-block-navigation-item__content {
    padding: 0.55rem 0;
    font-weight: 600;
    letter-spacing: 0.005em;
    text-decoration: none;
    position: relative;
}

/* Unterstreichung wächst beim Überfahren aus der Mitte heraus. */
.hoe-nav .wp-block-navigation-item__content::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0.15rem;
    height: 2px;
    background: var(--wp--preset--color--accent-2);
    transition: left .18s ease, right .18s ease;
}
.hoe-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.hoe-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after {
    left: 0;
    right: 0;
}

/* Untermenü: ruhige Karte mit klarer Oberkante statt schwebender Box. */
.hoe-nav .wp-block-navigation__submenu-container {
    border: 1px solid var(--hoe-linie);
    border-top: 3px solid var(--wp--preset--color--accent-2);
    border-radius: 0 0 6px 6px;
    box-shadow: var(--hoe-schatten);
    min-width: 17rem;
    padding: 0.4rem 0;
    background: #fff;
}
.hoe-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 0.5rem 1.1rem;
    display: block;
    font-weight: 500;
}
.hoe-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
    display: none;
}
.hoe-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background: var(--wp--preset--color--accent-5);
    color: var(--wp--preset--color--accent-2);
}

/* ---------------------------------------------------------------------------
   Überlagerungsmenü bis einschließlich Tablet
   WordPress schaltet die Überlagerung standardmäßig erst unter 600px ein.
   Acht Hauptpunkte plus Angebots-Button passen auf einem Tablet (768px) aber
   nicht in eine Zeile: das Menü brach um, und das Untermenü des letzten
   Punktes ragte über den Bildschirmrand hinaus – das erzeugte sogar
   waagerechtes Scrollen auf der ganzen Seite. Deshalb gilt die Überlagerung
   hier bis 1023px.
   --------------------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 1023px) {
    .hoe-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }
    .hoe-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }
}

/* Sicherheitsnetz: ein Untermenü darf nie breiter als der Bildschirm werden. */
.hoe-nav .wp-block-navigation__submenu-container {
    max-width: calc(100vw - 2rem);
}

@media (max-width: 1023px) {
    .wp-block-navigation__responsive-container.is-menu-open {
        padding: 1.2rem;
    }
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
        padding-top: 1rem;
    }
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
        font-size: 1.15rem;
        font-weight: 700;
        padding: 0.75rem 0;
        display: block;
        border-bottom: 1px solid var(--hoe-linie-dunkel);
    }
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container {
        border: 0;
        box-shadow: none;
        background: transparent;
        padding-left: 0.9rem;
    }
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        font-size: 1rem;
        font-weight: 500;
        opacity: .85;
    }
    .wp-block-navigation__responsive-container-close,
    .wp-block-navigation__responsive-container-open {
        padding: 0.4rem;
    }

    .hoe-topbar .wp-block-group {
        justify-content: center;
        text-align: center;
    }
    .hoe-header-aktion {
        width: 100%;
        justify-content: space-between;
    }
    .hoe-cta .wp-block-button__link {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
        font-size: .9rem;
    }
    /* Auf dem Handy führt die feste Aktionsleiste unten zum Ziel –
       der Kopfbereich darf dafür kompakt bleiben. */
    .wp-site-blocks > header {
        position: static;
    }
}

/* ===========================================================================
   3. SLIDER
   Reines CSS mit scroll-snap: kein JavaScript, kein Framework, funktioniert
   mit Wischgeste, Mausrad und Tastatur.
   =========================================================================== */

.hoe-slider {
    position: relative;
    margin: 0 0 var(--wp--preset--spacing--60);
}
.hoe-slider__spur {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    border-radius: 8px;
    scrollbar-width: none;
}
.hoe-slider__spur::-webkit-scrollbar {
    display: none;
}
.hoe-folie {
    scroll-snap-align: start;
    position: relative;
    min-height: clamp(20rem, 46vw, 34rem);
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
}
/* Dunkler Verlauf, damit die Schrift auf jedem Foto lesbar bleibt. */
.hoe-folie::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgb(26 29 33 / 90%) 0%,
        rgb(26 29 33 / 58%) 45%,
        rgb(26 29 33 / 12%) 100%);
}
.hoe-folie__inhalt {
    position: relative;
    padding: clamp(1.5rem, 4vw, 3rem);
    color: #fff;
    max-width: 44rem;
}
.hoe-folie__inhalt h2 {
    color: #fff !important;
    margin: 0 0 .6rem;
    font-size: clamp(1.5rem, 3.4vw, 2.6rem);
    line-height: 1.12;
}
.hoe-folie__inhalt p {
    margin: 0 0 1.4rem;
    color: #D8DADD;
    font-size: clamp(.95rem, 1.3vw, 1.15rem);
    max-width: 36rem;
}
/* Rot auf Weiß statt Weiß auf Rot: #C8102E erreicht 5,9:1 Kontrast,
   das helle #E63946 nur 4,2:1 – für Fließtextgröße zu wenig. */
.hoe-folie__link {
    display: inline-block;
    background: var(--wp--preset--color--accent-2);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    padding: .9rem 1.8rem;
    border-radius: 4px;
    transition: background .18s ease, transform .18s ease;
}
.hoe-folie__link:hover {
    background: #fff;
    color: var(--wp--preset--color--contrast);
    transform: translateY(-1px);
}

/* Punkte zum Springen – echte Anker, also auch ohne JavaScript bedienbar. */
.hoe-slider__punkte {
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin-top: 1rem;
}
.hoe-slider__punkte a {
    width: 2.2rem;
    height: 4px;
    border-radius: 2px;
    background: var(--hoe-linie);
    text-indent: -9999px;
    overflow: hidden;
    transition: background .18s ease;
}
.hoe-slider__punkte a:hover,
.hoe-slider__punkte a:focus-visible {
    background: var(--wp--preset--color--accent-2);
}

/* ===========================================================================
   4. LEISTUNGSKARTEN
   =========================================================================== */

.hoe-karte {
    position: relative;
    border: 1px solid var(--hoe-linie);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.hoe-karte:hover {
    box-shadow: var(--hoe-schatten-stark);
    transform: translateY(-3px);
    border-color: var(--wp--preset--color--accent-2);
}
.hoe-karte figure.wp-block-image {
    margin: 0;
    overflow: hidden;
}
.hoe-karte figure.wp-block-image img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
    display: block;
    border-radius: 0;
    transition: transform .4s ease;
}
.hoe-karte:hover figure.wp-block-image img {
    transform: scale(1.04);
}
.hoe-karte h3 {
    margin: 1.1rem 1.1rem 0.4rem;
    line-height: 1.25;
}
.hoe-karte h3 a {
    text-decoration: none;
    color: var(--wp--preset--color--contrast);
}
.hoe-karte h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
}
.hoe-karte:hover h3 a {
    color: var(--wp--preset--color--accent-2);
}
/* WordPress gibt .has-large-font-size selbst mit !important aus. */
.hoe-karte h3.has-large-font-size,
.hoe-karte h3 {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem) !important;
}
.hoe-karte p {
    margin: 0 1.1rem 1.3rem;
    color: var(--wp--preset--color--accent-4);
}

@media (max-width: 781px) {
    .wp-block-columns .hoe-karte {
        margin-bottom: var(--wp--preset--spacing--30);
    }
}

/* ===========================================================================
   5. VERTRAUEN, ZUSAGEN, DUNKLE ABSCHNITTE
   =========================================================================== */

.hoe-zusage {
    border-left: 4px solid var(--wp--preset--color--accent-1);
    background: var(--wp--preset--color--accent-5);
    border-radius: 0 6px 6px 0;
}
.hoe-zusage p {
    margin: 0;
}
.hoe-zusage strong {
    color: var(--wp--preset--color--accent-2);
}

/* Dunkler Abschnitt – für Abschluss-Aufrufe und den Fußbereich. */
.hoe-dunkel {
    background: var(--wp--preset--color--accent-3);
    color: #fff;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
/* Feiner Lichtschimmer oben links – gibt der Fläche Tiefe, ohne zu stören. */
.hoe-dunkel::before {
    content: "";
    position: absolute;
    top: -40%;
    left: -10%;
    width: 60%;
    height: 180%;
    background: radial-gradient(ellipse at center,
        rgb(230 57 70 / 13%) 0%, transparent 65%);
    pointer-events: none;
}
.hoe-dunkel > * {
    position: relative;
}
.hoe-dunkel h2,
.hoe-dunkel h3 {
    color: #fff !important;
}
.hoe-dunkel p {
    color: #C9CCD0;
}
.hoe-dunkel a:not(.wp-block-button__link) {
    color: var(--wp--preset--color--accent-1);
}

/* ---------------------------------------------------------------------------
   Zahlenband
   Vier Kennzahlen, die alle auf der Website belegt sind: Jahre, Meister-
   betrieb, Einsatzgebiet und der eine feste Ansprechpartner.
   --------------------------------------------------------------------------- */
.hoe-fakten {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--hoe-linie);
    border: 1px solid var(--hoe-linie);
    border-radius: 10px;
    overflow: hidden;
    margin: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--50);
}
.hoe-fakten > div {
    background: #fff;
    padding: 1.6rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.hoe-fakten strong {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--wp--preset--color--accent-2);
    line-height: 1.1;
}
.hoe-fakten span {
    font-size: .9rem;
    color: var(--wp--preset--color--accent-4);
}

@media (max-width: 781px) {
    .hoe-fakten {
        grid-template-columns: repeat(2, 1fr);
    }
    .hoe-fakten > div {
        padding: 1.2rem .6rem;
    }
}

/* ===========================================================================
   6. BILDER UND GALERIE
   Das Vergrößern beim Klick übernimmt die Lightbox aus dem WordPress-Kern
   (in theme.json aktiviert) – kein zusätzliches Skript nötig.
   =========================================================================== */

.wp-block-gallery.has-nested-images figure.wp-block-image img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    border-radius: 6px;
}
.wp-block-image img {
    border-radius: 6px;
}

/* Hinweis, dass ein Bild sich vergrößern lässt. */
.wp-lightbox-container button.lightbox-trigger {
    opacity: 0;
    transition: opacity .2s ease;
}
.wp-lightbox-container:hover button.lightbox-trigger,
.wp-lightbox-container button.lightbox-trigger:focus-visible {
    opacity: 1;
}
figure.wp-block-image:has(.lightbox-trigger) {
    cursor: zoom-in;
}

/* ===========================================================================
   7. FAQ
   =========================================================================== */

.hoe-faq {
    margin-top: var(--wp--preset--spacing--60);
    padding-top: var(--wp--preset--spacing--50);
    border-top: 1px solid var(--hoe-linie);
}
.hoe-faq h2 {
    margin-top: 0;
}
.hoe-faq-eintrag {
    border-bottom: 1px solid var(--hoe-linie);
}
.hoe-faq-eintrag summary {
    cursor: pointer;
    padding: 1rem 2rem 1rem 0;
    position: relative;
    font-weight: 700;
    line-height: 1.4;
    list-style: none;
}
.hoe-faq-eintrag summary::-webkit-details-marker {
    display: none;
}
.hoe-faq-eintrag summary::after {
    content: "";
    position: absolute;
    right: .4rem;
    top: 1.35rem;
    width: .6rem;
    height: .6rem;
    border-right: 2px solid var(--wp--preset--color--accent-2);
    border-bottom: 2px solid var(--wp--preset--color--accent-2);
    transform: rotate(45deg);
    transition: transform .18s ease;
}
.hoe-faq-eintrag[open] summary::after {
    transform: rotate(-135deg);
    top: 1.6rem;
}
.hoe-faq-eintrag summary:hover {
    color: var(--wp--preset--color--accent-2);
}
.hoe-faq-antwort {
    padding: 0 0 1rem;
}
.hoe-faq-antwort p {
    margin: 0;
}
.hoe-faq-rest {
    margin-top: var(--wp--preset--spacing--40);
    font-size: .95rem;
}

/* ===========================================================================
   8. FORMULAR
   =========================================================================== */

.fluentform .ff-el-input--label label {
    font-weight: 600;
}
.fluentform input[type=text],
.fluentform input[type=email],
.fluentform textarea,
.fluentform select {
    border: 1px solid var(--hoe-linie) !important;
    border-radius: 4px !important;
    padding: .7rem .9rem !important;
}
.fluentform input:focus,
.fluentform textarea:focus,
.fluentform select:focus {
    border-color: var(--wp--preset--color--accent-2) !important;
    box-shadow: 0 0 0 3px rgb(200 16 46 / 15%) !important;
}

/* ===========================================================================
   9. FUSSBEREICH
   =========================================================================== */

.wp-site-blocks > footer a:hover {
    color: var(--wp--preset--color--accent-1) !important;
}

/* ===========================================================================
   10. BEWEGUNG REDUZIEREN
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .hoe-karte:hover {
        transform: none;
    }
    .hoe-karte:hover figure.wp-block-image img {
        transform: none;
    }
}