/* =====================================================================
 * grid-align.css  —  Inhalt bündig zu Kopf- und Fußzeile
 * ---------------------------------------------------------------------
 * Angelegt 2026-09-03, überarbeitet 2026-09-04.
 * Wird nach styles.css geladen (IncludeCss/setup.typoscript).
 *
 * Alle Zahlen in dieser Datei sind mit Chromium gemessen, nicht geschätzt.
 * ===================================================================== */


/* ---------------------------------------------------------------------
 * 1) Rinnen-Korrektur für die allgemeinen Rasterzeilen
 *
 * Ausgangslage (1600 px Fenster):
 *     Kopf-/Fußzeile-Container   200 … 1400
 *     Logo, Navigation, Fußtext  215 … 1385
 *       darin .column            215 …  449
 *       darin .card              230 …          <-- 15 px zu weit innen
 *
 * Die Rasterspalten haben 15 px Innenabstand als Rinne zwischen den
 * Kacheln. Bei der äußersten Spalte wirkt der nach außen. Kopf- und
 * Fußzeile setzen ihren Inhalt dagegen direkt an den Containerrand.
 * --------------------------------------------------------------------- */

@media print, screen and (min-width: 40em) {
    .grid-container > .row {
        margin-left: -0.9375rem;
        margin-right: -0.9375rem;
    }
}

@media screen and (max-width: 39.99875em) {
    .grid-container > .row {
        margin-left: -0.625rem;
        margin-right: -0.625rem;
    }
}

/* Shop-Produktlisten: eigener Betrag, weil .carousel-teaser-card eine feste
 * Breite von 20rem und 1rem Außenabstand hat. */
.grid-container > .tx-cart-products > .row {
    margin-left: -1rem;
    margin-right: -1rem;
}

/* NICHT korrigiert: .tx-cart-products > .carousel-teaser
 * Ein Versuch, auch diesen Wrapper zu verschieben, war falsch. Die Kacheln
 * darin liegen in einem Flickity-Karussell, das seine Zellen selbst
 * positioniert — und die Rinne der ersten Zelle selbst ausgleicht, sobald
 * der Inhalt überläuft. Genau dann setzt es die Klasse "is-draggable":
 *     19 Kacheln -> is-draggable, translateX(-16px) -> Kachel bei 215
 *      2 Kacheln -> keine Klasse, translateX(0)     -> Kachel bei 231
 *      1 Kachel  -> keine Klasse, translateX(0)     -> Kachel bei 231
 * Die Verschiebung des Wrappers addierte sich auf Flickitys eigene und
 * schob /shop/details um 16 px zu weit nach links. */
.carousel-teaser.flickity-enabled:not(.is-draggable)
    .flickity-slider > .carousel-teaser-card:first-child {
    margin-left: 0;
}


/* =====================================================================
 * 2) Das Icon-Raster der Kategorieseiten
 *
 * Vorgaben:
 *   a) Die äußeren Kacheln sitzen bündig am linken und rechten Rand.
 *   b) Grafik und Beschriftung stehen IMMER mittig zueinander.
 *   c) Welche der beiden die Außenkante bildet, entscheidet die Breite.
 *   d) Wird das Fenster schmaler, sinkt die Anzahl pro Zeile.
 * ===================================================================== */

.grid-container > .row.small-up-2.medium-up-5.large-up-5 {
    display: grid;
    justify-content: space-between;
    align-items: start;
    row-gap: 1.5rem;
    margin-left: 0;
    margin-right: 0;
}

.grid-container > .row.small-up-2.medium-up-5.large-up-5 > .column {
    flex: none;
    width: auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* Der Außenabstand der Grafik.
 *
 * Das Bild ist 85 px breit, trägt aber margin:16px. Seine Randbox ist damit
 * 117 px — und weil sich die Rasterspalte an der Randbox orientiert, saß das
 * sichtbare Icon 16 px innerhalb der Spalte. Die Spalte war bündig, das Icon
 * nicht. Seitlich entfernt; oben und unten bleibt der Abstand, er trägt dort
 * den senkrechten Rhythmus. Die waagerechten Abstände kommen jetzt aus
 * "space-between".
 *
 * Bei den Seitenübersichten (menu_pages) sitzt derselbe Abstand nicht am
 * Bild, sondern am Wrapper .card-image — deshalb beide Selektoren. */
.grid-container > .row.small-up-2.medium-up-5.large-up-5 .card-image,
.grid-container > .row.small-up-2.medium-up-5.large-up-5 .card-image img {
    margin-left: 0;
    margin-right: 0;
}

/* Die Kachel trägt einen 1 px breiten, DURCHSICHTIGEN Rahmen
 * (computed: rgba(0,0,0,0)). Sichtbar ist er nicht, er verschob das Icon
 * aber um genau 1 px nach innen. Kein Hover-Zustand greift darauf zu
 * (geprüft: dort ändern sich nur Farbe und Schatten). */
.grid-container > .row.small-up-2.medium-up-5.large-up-5 .card {
    border-left-width: 0;
    border-right-width: 0;
}


/* ---------------------------------------------------------------------
 * Anzahl pro Zeile und Ausrichtung, nach Bildschirmgroesse getrennt.
 *
 * Auf schmalen Geraeten sieht die Randbuendigkeit schlecht aus: bei zwei
 * Kacheln in einer 350 px breiten Zeile klaffen ueber 100 px dazwischen,
 * waehrend die Grafiken an den Aussenkanten kleben. Dort ist ein ruhiges,
 * gleichmaessiges Raster mit zentrierten Kacheln richtig.
 *
 * Buendig nach aussen wird deshalb erst ab 64em (1024 px) ausgerichtet --
 * also ab Notebook-Breite, wo Kopf- und Fusszeile ohnehin dieselbe
 * Inhaltsbreite haben und die Kante auffaellt.
 *
 * Gemessen (breiteste Kachel 163 px, Mindestluft rund 30 px):
 *     5 Spalten brauchen 5*163 + 4*30 = 935 px Inhaltsbreite
 *     4 Spalten          4*163 + 3*30 = 742 px
 *     3 Spalten          3*163 + 2*30 = 549 px
 * --------------------------------------------------------------------- */

/* --- Handy, bis 36em (575 px): 2 Spalten, gleich breit, zentriert --- */
@media screen and (max-width: 35.99875em) {
    .grid-container > .row.small-up-2.medium-up-5.large-up-5 {
        grid-template-columns: repeat(2, 1fr);
        justify-content: stretch;
        column-gap: 1rem;
    }
}

/* --- grosses Handy / Tablet hoch, 36em bis 48em: 3 Spalten --- */
@media screen and (min-width: 36em) and (max-width: 47.99875em) {
    .grid-container > .row.small-up-2.medium-up-5.large-up-5 {
        grid-template-columns: repeat(3, 1fr);
        justify-content: stretch;
        column-gap: 1rem;
    }
}

/* --- Tablet quer, 48em bis 64em: 4 Spalten --- */
@media screen and (min-width: 48em) and (max-width: 63.99875em) {
    .grid-container > .row.small-up-2.medium-up-5.large-up-5 {
        grid-template-columns: repeat(4, 1fr);
        justify-content: stretch;
        column-gap: 1.5rem;
    }
}

/* --- ab 64em (1024 px): 5 Spalten, aussen buendig --- */
@media print, screen and (min-width: 64em) {
    .grid-container > .row.small-up-2.medium-up-5.large-up-5 {
        grid-template-columns: repeat(5, auto);
        justify-content: space-between;
    }
    .grid-container > .row.small-up-2.medium-up-5.large-up-5 > .column:nth-child(5n+1) { justify-self: start; }
    .grid-container > .row.small-up-2.medium-up-5.large-up-5 > .column:nth-child(5n)   { justify-self: end;   }
}

/* Warum "justify-self" und nicht Ausrichtung des Inhalts:
 *
 * Ein CSS-Grid gibt allen Reihen dieselben Spaltenbreiten, bestimmt vom
 * laengsten Eintrag der Spalte. Kuerzere Kacheln werden in dieser Spur
 * standardmaessig auf volle Breite gedehnt, ihr Inhalt landet mittig -- also
 * nicht am Rand:
 *     Spur 1 ist 128 px breit (von "Pinnenausleger")
 *       Reihe 1  "Pinnenausleger"    215 … 343   buendig
 *       Reihe 2  "Hardware"          237 … 321   22 px innen
 *
 * "justify-self" schiebt die Kachel an den Rand der Spur, statt sie zu
 * dehnen. Sie schrumpft damit auf ihren Inhalt -- also auf das breitere von
 * Grafik und Beschriftung -- und sitzt mit dieser Kante am Rand. Innen bleibt
 * alles zentriert.
 *
 * Ein frueherer Versuch stellte stattdessen den Inhalt der Aussenspalten auf
 * links- bzw. rechtsbuendig. Das machte die Kante buendig, riss aber Grafik
 * und Beschriftung auseinander.
 */

/* =====================================================================
 * 3) Logos nicht mehr beschneiden
 * ---------------------------------------------------------------------
 * Die drei grossen Kacheln (Sonnensegel, Persenninge, Gebrauchtsegel) zeigen
 * ihre Grafik in einer Box von 358 x 110 px -- also im Verhaeltnis 3,25:1.
 * Die Grafiken selbst sind aber nahezu quadratisch (Inhalt 254 x 263 in einem
 * 100x100-viewBox). Mit "object-fit: fill" fuellt die Grafik die Hoehe der Box
 * vollstaendig aus und wird oben und unten abgeschnitten -- bei "Used Sails"
 * fehlt dadurch die untere Haelfte der Schrift.
 *
 * Gemessen (Bildschirmfoto des Elements, 2-fach):
 *     Box 716 x 220, Inhalt 234 x 220 ab Y=0 -- stoesst oben UND unten an.
 *
 * "contain" skaliert die Grafik so, dass sie vollstaendig hineinpasst.
 * ===================================================================== */
.frame-type-menu_pages .card-image img,
.frame-type-menu_subpages .card-image img,
.grid-container > .row.small-up-2.medium-up-5.large-up-5 .card-image img {
    object-fit: contain;
}

/* =====================================================================
 * 4) Handy-Kopfzeile: Zeichen statt Schriftzug
 * ---------------------------------------------------------------------
 * In der Titelleiste stand der Schriftzug "Egner Landenberger" (24 px hoch,
 * 178 px breit). Ersetzt durch das quadratische egner-Zeichen in Weiss.
 * Die Leiste ist 52 px hoch bei 8 px Innenabstand — 32 px Bildhoehe fuellt
 * sie also nicht aus und bleibt dezent.
 * ===================================================================== */
.title-bar .logo--mobile {
    display: flex;
    align-items: center;
}

.title-bar .logo--mobile {
    gap: .6rem;
}

/* Landenberger-Zeichen (Seitenverhaeltnis rund 1,7:1) */
.title-bar .logo--mobile-landenberger {
    display: block;
    line-height: 0;
}
.title-bar .logo--mobile-landenberger svg {
    height: 32px;
    width: auto;
    display: block;
}

/* egner-Zeichen, quadratisch */
.title-bar .logo--mobile-egner {
    height: 32px;
    width: 32px;
    display: block;
}

/* =====================================================================
 * 5) egner-Zeichen in der Desktop-Kopfzeile
 * ---------------------------------------------------------------------
 * Vorgabe: das egner-Zeichen soll nur erscheinen, WENN das
 * Landenberger-Logo verkleinert ist. Steht es in voller Groesse,
 * bleibt es bei einer Marke.
 *
 * Die Seite setzt beim Scrollen die Klasse "swish" auf den body und
 * skaliert das Logo mit  transform: scale(.5) translateY(-3.5rem)
 * von 224x140 auf 112x70 px. Genau daran haengt die Einblendung.
 *
 * Kein "display", sondern Deckkraft — damit der Uebergang zur
 * bestehenden 0,2-Sekunden-Bewegung des Logos passt.
 * ===================================================================== */
/* Egner-Zeichen erscheint erst, wenn das Landenberger-Logo beim Scrollen
   schrumpft. Beide Marken muessen exakt gleich hoch sein und auf einer
   gemeinsamen Mittellinie sitzen -- deshalb die Hoehe des Landenberger-SVG
   (112px breit / Seitenverhaeltnis 202.77:119.82 = 66.2px) uebernehmen und
   ueber die Mitte des Logo-Bereichs ausrichten statt ueber einen festen
   Abstand von oben. */
.logo-wrapper .logo--egner {
    position: absolute;
    /* Waagerecht: das Landenberger-Logo schrumpft per transform: scale(.5) und
       ist mit transform-origin links genau die halbe Breite des Logobereichs
       -- left: 50% ist damit seine rechte Kante, unabhaengig vom Fenster.
       Senkrecht: mittig im dunklen Menuestreifen (#header, 67.2px hoch).
       Vorher war das Zeichen oben buendig mit dem Logo und ragte unten aus
       dem Streifen heraus, wo es weiss auf hellem Foto unterging. */
    left: 50%;
    right: auto;
    margin-left: 14px;
    top: 33.6px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s;
}

.swish .logo-wrapper .logo {
    transform-origin: left center;
}

.swish .logo-wrapper .logo--egner {
    opacity: 1;
    visibility: visible;
}

.logo-wrapper .logo--egner img {
    display: block;
    /* Hoehe so gewaehlt, dass das Zeichen mit Luft im Streifen bleibt
       (67.2px minus je rund 9px oben und unten). */
    height: 50px;
    width: auto;
}

/* ---------------------------------------------------------------------
 * Handy-Menue: doppeltes Logo
 *
 * Der Hamburger blendet ueber data-responsive-toggle die DESKTOP-Menuezeile
 * (#responsive-menu) ein. Darin steckt der Logo-Bereich .column-logo, dessen
 * a.logo absolut positioniert ist -- auf dem Handy landet das grosse Logo
 * dadurch mitten im Seiteninhalt, zusaetzlich zu dem Logo, das in der
 * Titelleiste darueber ohnehin schon steht.
 *
 * Breakpoint 61.875em = mediumLandscape; darunter greift die Titelleiste
 * (.hide-for-mediumLandscape), also genau dort, wo das Handy-Menue benutzt wird.
 * ------------------------------------------------------------------ */
@media screen and (max-width: 61.874em) {
    #responsive-menu .column-logo {
        display: none;
    }
}

/* Sprachwahl im Handy-Menue: sass sonst ohne Hintergrund auf dem Kopfbild
   und wirkte wie versehentlich stehengeblieben. Gehoert optisch zur weissen
   Menueflaeche darueber. */
@media screen and (max-width: 61.874em) {
    #responsive-menu .column-language {
        background: #fff;
        width: 100%;
        padding: .5rem 1rem 1rem;
    }

    #responsive-menu .column-language .menu_lang {
        margin: 0;
    }
}

/* Nachtrag: die Sprachlinks sind fuer den dunklen Kopf weiss eingefaerbt und
   waren auf der weissen Flaeche unsichtbar. Farbe und Ausrichtung an die
   Menuepunkte darueber angleichen. */
@media screen and (max-width: 61.874em) {
    #responsive-menu .column-language {
        text-align: left;
    }

    #responsive-menu .column-language .menu_lang a,
    #responsive-menu .column-language .menu_lang a span {
        color: #3d3c90;
    }

    #responsive-menu .column-language .menu_lang li.active a,
    #responsive-menu .column-language .menu_lang li.active a span {
        text-decoration: underline;
    }
}

/* ---------------------------------------------------------------------
 * Warenkorb in der Handy-Titelleiste
 *
 * Die Schale in .title-bar-right ist die Zweitfassung; die Erstfassung liegt
 * in der Desktop-Menuezeile und ist auf dem Handy nur bei geoeffnetem Menue
 * sichtbar. Deshalb: unterhalb des Umbruchs die Titelleisten-Fassung zeigen,
 * darueber ausblenden, damit der Warenkorb nicht doppelt erscheint.
 * ------------------------------------------------------------------ */
.cart-preview--mobile {
    display: none;
}

@media screen and (max-width: 61.874em) {
    .title-bar-right {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .cart-preview--mobile {
        display: block;
    }

    /* Nur das Symbol mit Zaehler, der Text "Produkte im Warenkorb" wuerde
       die Leiste sprengen. */
    .cart-preview--mobile .infotext {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* Das Wagensymbol haengt in der Vorlage an der id #cart-preview und greift
   deshalb bei der zweiten Schale in der Titelleiste nicht. Hier dieselben
   Werte auf die Klasse, in der Groesse der 52px hohen Titelleiste. */
@media screen and (max-width: 61.874em) {
    .cart-preview--mobile .cart-preview-content {
        display: block;
        position: relative;
        width: 40px;
        height: 40px;
        background-image: url("/fileadmin/Resources/Public/Images/Warenkorb_25x20px.svg");
        background-repeat: no-repeat;
        background-size: 80%;
        background-position: 13% 65%;
    }

    /* Zaehler als Plakette oben rechts auf dem Wagen, wie in der
       Desktop-Fassung weisser Kreis mit schwarzer Zahl. */
    .cart-preview--mobile .cart-preview-count {
        position: absolute;
        top: -2px;
        right: -2px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        border-radius: 10px;
        background: #fff;
        color: #000;
        font-size: 13px;
        text-align: center;
    }
}

/* Der Warenkorb stand mittig, weil .title-bar-right die restliche Breite
   einnimmt und der Wagen an deren linker Kante sass. Nach rechts schieben,
   damit er direkt neben dem Ausklappmenue steht. */
@media screen and (max-width: 61.874em) {
    .title-bar-right {
        justify-content: flex-end;
        /* Der Hamburger ist absolut positioniert (320-390px) und liegt damit
           ausserhalb des Flex-Flusses. Ohne reservierten Platz schiebt sich
           der Wagen darunter. */
        padding-right: 78px;
    }
}