/* Main */

.site-main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-25) var(--space-15) 4rem;
}

/* Kopfbereich aller Seiten (Home, Themenwelt, Artikel, Marken): sitzt im
   hero-Block zwischen Header und <main> (siehe partials/base.html.twig),
   daher eigener Wrapper für die Breite statt Vererbung von .site-main.
   Zwei Varianten, umschaltbar im Backend ("Foto-Hero verwenden"):
   schlicht (nur Text, Standard) oder mit Vollbild-Foto per .page-hero--photo
   (Bild liegt absolut in .page-hero__media, Text-Ebene bekommt z-index). */
.page-hero {
    position: relative;
    background: var(--color-bg);
    overflow: hidden;
}

.page-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.page-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-hero__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-25) var(--space-15) 0;
}

/* Mit Foto: mehr Luft oben/unten (wie bei einem Banner) statt der knappen
   Textkopf-Abstände, und über dem Bild positioniert. */
.page-hero--photo .page-hero__inner {
    position: relative;
    z-index: 1;
    padding: var(--space-35) var(--space-15);
}

.page-hero__content {
    max-width: 750px;
}

/* Solide Fläche statt Verlauf für Text auf dem Foto (siehe CLAUDE.md: Text
   nie direkt auf einem Foto) — verlässlicherer Kontrast unabhängig vom
   jeweiligen Bild, bewusst gewählt anstelle eines Scrims. Breite passt sich
   dem Inhalt an (fit-content), damit die Fläche nicht breiter wirkt als der
   eigentliche Text/die Pills. */
.page-hero--photo .page-hero__content {
    width: fit-content;
    padding: var(--space-1);
    background-color: rgba(255,255,255,0.5);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(8, 39, 47, 0.25);
}

.page-hero__inner h1 {
    max-width: 68ch;
    margin-bottom: 0;
}

.page-hero__content h1 {
    margin-bottom: var(--space-1);
}

.page-hero__eyebrow {
    display: inline-block;
    color: var(--color-olive);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--font-size-xs);
    margin: 0 0 var(--space-075);
}

/* Eyebrow + H2 über einer Teaser-Kachel-Reihe (Themenwelt-Kacheln auf Home,
   Artikel-Kacheln auf Themenwelt-Seiten). Eigener Block statt Teil von
   .page-hero, da er unterhalb des Hero-Bereichs sitzt. */
.section-intro {
    margin: 0 0 var(--space-15);
}

.section-intro h2 {
    margin: 0;
}

.page-hero__lead,
.page-hero__intro {
    max-width: 65ch;
    font-size: var(--font-size-lg);
    color: var(--color-slate);
}

.page-hero__lead {
    margin: 0;
}

/* Abstand nach unten nur auf der Startseite (darunter folgen Button + Themenwelt-Pills) */
.page-hero__lead--home {
    margin: 0 0 var(--space-1);
}

.page-hero__cta {
    display: inline-flex;
    margin: 0 0 var(--space-15);
}

.page-hero__intro p {
    margin: 0;
}

.page-hero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-075);
}

.page-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-05);
    padding: var(--space-05) var(--space-125);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    font-weight: 700;
    font-size: var(--font-size-sm);
    box-shadow: 0 2px 8px rgba(18, 39, 47, 0.08);
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.page-hero__pill:hover {
    border-color: var(--color-link);
    color: var(--color-link);
    text-decoration: none;
    transform: translateY(-1px);
}

.page-hero__pill-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: var(--color-link);
    flex-shrink: 0;
}

.page-hero__pill-icon svg {
    width: 100%;
    height: 100%;
}

@media (max-width: 900px) {
    .page-hero--photo .page-hero__inner {
        padding: var(--space-25) var(--space-15);
    }
}

@media (max-width: 640px) {
    .page-hero__content {
        max-width: none;
    }

    .page-hero--photo .page-hero__inner {
        padding: var(--space-2) var(--space-15);
    }
}

.breadcrumb {
    font-size: var(--font-size-sm);
    color: var(--color-slate);
    margin-bottom: var(--space-1);
}

.breadcrumb__sep {
    margin: 0 var(--space-04);
}

.page__content {
    max-width: 88ch;
}

.page--landing .page__content {
    max-width: 80ch;
}

/* Generischer Modifier für volle Breite statt der schmalen 68ch-Textspalte
   — Home und Themenwelt-Seiten zeigen page.content jeweils als breiten
   Absatz unterhalb der Teaser-Kacheln, nicht als schmale Artikelspalte. */
.page__content--wide {
    max-width: none;
}

/* Fließtext-Typografie innerhalb des Artikel-Bodys */

.page__content > p:first-of-type {
    //font-size: var(--font-size-lg);
    //color: var(--color-slate);
}

.page__content h2 {
    margin-top: var(--space-25);
    padding-top: var(--space-1);
    border-top: 1px solid var(--color-border);
}

.page__content h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.page__content h3 {
    font-family: var(--font-heading);
    font-weight: 400;
    color: var(--color-primary);
    font-size: 1.15rem;
    margin: var(--space-15) 0 var(--space-05);
}

.page__content p {
    margin: 0 0 var(--space-1);
}

.page__content ul,
.page__content ol {
    margin: 0 0 var(--space-1);
    padding-left: 1.2em;
    display: flex;
    flex-direction: column;
    gap: var(--space-05);
}

.page__content li {
    padding-left: 0.3em;
}

.page__content li::marker {
    color: var(--color-olive);
}

.page__content blockquote {
    margin: var(--space-15) 0;
    padding: var(--space-1) var(--space-125);
    background: color-mix(in srgb, var(--color-olive) 10%, var(--color-white));
    border-left: 3px solid var(--color-olive);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.page__content blockquote p {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-md);
}

/* Redaktionelle Content-Blöcke: Eyebrow + Überschrift + Fließtext, optional
   mit einem schmalen Tipp-Kasten daneben (Startseite, Themenwelt-Seiten wie
   /kitesurfen). Tipp-Kasten bewusst im Blockquote-Stil (Farbfläche + linker
   Rahmen, siehe oben) statt als Icon-Chip-Karte mit Schatten, damit er sich
   ins Theme einfügt statt wie ein generisches Hinweisfeld zu wirken. */
.content-block {
    margin-top: var(--space-25);
    padding-top: var(--space-15);
    border-top: 1px solid var(--color-border);
}

.content-block:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Grid statt Flex: Text nimmt den kompletten Rest der Zeile ein (1fr),
   der Tipp-Kasten bekommt eine feste Spaltenbreite und dockt dadurch
   garantiert am rechten Rand des Containers an – mit Flex (flex-grow +
   max-width je Kind) blieb sonst ungenutzter Leerraum nach dem Kasten
   übrig, statt dass er wirklich rechtsbündig sitzt. Ohne Tipp-Kasten
   (:has()) bleibt es eine einzelne volle Spalte. */
.content-block__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
    align-items: start;
}

.content-block__row:has(.content-tip) {
    grid-template-columns: minmax(0, 1fr) 280px;
}

.content-block__text {
    min-width: 0;
}

/* Lesbare Zeilenlänge nur, wenn der Block KEINEN Tipp-Kasten daneben hat –
   sonst begrenzt bereits die feste 280px-Spalte die Textbreite sinnvoll,
   und eine zusätzliche ch-Grenze würde hier wieder ungenutzten Leerraum
   vor dem Kasten erzeugen (genau das Problem, das diese Umstellung löst). */
.content-block__row:not(:has(.content-tip)) .content-block__text {
    max-width: 68ch;
}

/* Rahmen/Abstand der generischen h2-Regel oben entfällt hier – das
   übernimmt bereits .content-block selbst zwischen den Blöcken. Gilt
   sowohl für die zweispaltige Variante (h2 in .content-block__text) als
   auch für einen einzelnen Block ohne Spalten (h2 direkt in .content-block,
   siehe Startseite). */
.content-block h2 {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.content-block__text p:last-child {
    margin-bottom: 0;
}

.content-block__eyebrow {
    display: inline-block;
    color: var(--color-olive);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--font-size-xs);
    margin: 0 0 var(--space-05);
}

.content-tip {
    max-width: 280px;
    padding: var(--space-125) var(--space-15);
    background: color-mix(in srgb, var(--color-olive) 8%, var(--color-white));
    border-left: 3px solid var(--color-olive);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.content-tip--accent {
    background: color-mix(in srgb, var(--color-accent) 8%, var(--color-white));
    border-left-color: var(--color-accent);
}

.content-tip--link {
    background: color-mix(in srgb, var(--color-link) 6%, var(--color-white));
    border-left-color: var(--color-link);
}

.content-tip__label {
    display: flex;
    align-items: center;
    gap: var(--space-05);
    margin: 0 0 var(--space-05);
    font-weight: 700;
    font-size: var(--font-size-sm);
    color: var(--color-olive-dark);
}

.content-tip__label::before {
    content: '';
    width: 1rem;
    height: 2px;
    flex-shrink: 0;
    background: currentColor;
}

.content-tip--accent .content-tip__label {
    color: var(--color-accent-dark);
}

.content-tip--link .content-tip__label {
    color: var(--color-link-hover);
}

.content-tip p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

@media (max-width: 720px) {
    .content-block__row:has(.content-tip) {
        grid-template-columns: 1fr;
    }

    .content-tip {
        max-width: none;
    }
}

.page__content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: var(--space-15) 0;
    border-radius: var(--radius);
}

.page__content table {
    display: block;
    max-width: 100%;
    margin: var(--space-15) 0;
    border-collapse: collapse;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: var(--font-size-md);
}

.page__content th,
.page__content td {
    padding: var(--space-075) var(--space-1);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.page__content th {
    font-family: var(--font-heading);
    font-weight: 400;
    color: var(--color-primary);
    letter-spacing: 0.01em;
}

/* Produktbild-Panel: Shop-Freisteller stehen auf weißer Fläche,
   deshalb kein beschnittenes Breitbild, sondern eine ruhige Bühne
   wie bei den Produktkacheln im Shop. */
.page__content .article-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 440px;
    aspect-ratio: 4 / 3;
    margin: 0 0 var(--space-25);
    padding: var(--space-1);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* picture selbst darf am Layout nicht teilnehmen, damit .article-hero__image
   weiterhin genauso als direktes Flex-Kind von .article-hero behandelt wird
   wie zuvor der einzelne <img> (Sizing/Framing unverändert). */
.page__content .article-hero picture {
    display: contents;
}

.page__content .article-hero__image {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    object-fit: contain;
}

@media (max-width: 640px) {
    .page-hero__inner {
        padding-top: var(--space-15);
    }

    .page__content .article-hero {
        max-width: none;
        margin-bottom: var(--space-15);
    }
}

/* Article layout (Guide-Artikel mit Sidebar) */

.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-3);
    align-items: start;
}

/* Bleibt beim Scrollen sichtbar, bekommt aber bewusst keine eigene
   max-height/overflow-y: Bei vielen Sidebar-Boxen (TOC + Weitere Guides +
   CTA + Testberichte) wurde die Box sonst höher als der Viewport und
   scrollte intern statt im normalen Dokumentfluss zu bleiben. Ist die Box
   höher als der sichtbare Bereich, hört position: sticky von selbst auf zu
   kleben, statt eine Scrollbar zu erzeugen. */
.article-sidebar {
    position: sticky;
    top: var(--space-15);
    display: flex;
    flex-direction: column;
    gap: var(--space-125);
}

.sidebar-box {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-125) var(--space-15);
}

.sidebar-box__title {
    font-size: 1rem;
    margin-bottom: var(--space-075);
}

.sidebar-box__text {
    font-size: var(--font-size-sm);
    color: var(--color-slate);
    margin: 0 0 var(--space-075);
}

/* Abschließender Sammel-Link unter einer Liste im Sidebar-Kasten */
.sidebar-box__more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--font-size-sm);
}

.sidebar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-06);
}

.sidebar-nav a {
    font-size: var(--font-size-md);
    color: var(--color-text);
}

.sidebar-nav a:hover {
    color: var(--color-link);
}

.sidebar-nav li.is-active a {
    color: var(--color-link);
    font-weight: 600;
}

/* Beratungs-CTA-Box: Hintergrundfoto der Themenwelt (volle Breite, nicht
   zugeschnitten — bestimmt dadurch selbst die Höhe der Box, siehe
   category-cta in category.css fürs gleiche Prinzip auf den
   Themenwelt-Seiten), Text + Button liegen als Overlay darüber. */
.sidebar-box--cta {
    position: relative;
    overflow: hidden;
    padding: 0;
    background: var(--color-primary);
    color: var(--color-white);
}

.sidebar-cta__media {
    display: block;
    width: 100%;
    height: auto;
}

.sidebar-cta__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-075);
    padding: var(--space-15);
}

.sidebar-cta__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-05);
    color: var(--color-sand);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--font-size-xs);
}

.sidebar-cta__eyebrow::before {
    content: '';
    width: 1.1rem;
    height: 2px;
    background: currentColor;
}

.sidebar-cta__title {
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.05;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--color-white) 0%, color-mix(in srgb, var(--color-link) 55%, white) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sidebar-cta__text {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-sand);
}

.sidebar-box--cta .sidebar-box__cta {
    width: 100%;
    justify-content: center;
    margin-top: auto;
}

@media (max-width: 900px) {
    .article-layout {
        grid-template-columns: 1fr;
    }

    .article-sidebar {
        position: static;
    }

    /* Touch-Fläche auf Mobile/Tablet: Text bleibt gleich groß, klickbare Fläche wächst auf 44px */
    .sidebar-nav a {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    .sidebar-nav {
        gap: 0;
    }
}

/* Passende Produkte aus dem Shop (Produkt-Feed) */

.shop-products {
    margin-top: var(--space-3);
    padding-top: var(--space-25);
    border-top: 1px solid var(--color-border);
}

.shop-products__title {
    margin: 0 0 var(--space-15);
}

.shop-products__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-125);
}

.shop-product-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    color: var(--color-text);
    background: var(--color-white);
    transition: border-color 0.15s ease;
}

.shop-product-card:hover {
    border-color: var(--color-olive);
    text-decoration: none;
}

.shop-product-card:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.shop-product-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: var(--space-1);
}

.shop-product-card__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.shop-product-card__body {
    display: flex;
    flex-direction: column;
    padding: var(--space-075) var(--space-1) var(--space-1);
    border-top: 1px solid var(--color-border);
}

.shop-product-card__brand {
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-olive);
    margin-bottom: var(--space-04);
}

.shop-product-card__name {
    display: -webkit-box;
    margin-bottom: var(--space-04);
    font-size: var(--font-size-sm);
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shop-product-card__price {
    margin-top: auto;
    font-weight: 700;
    color: var(--color-primary);
}

/* Article grid (Themenwelt-Übersichten, Sub-Guides) */

.article-grid {
    margin-top: var(--space-25);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-125);
}

.article-card {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-15) var(--space-15) var(--space-125);
    color: var(--color-text);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.article-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-olive);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}

.article-card:hover {
    border-color: var(--color-olive);
    transform: translateY(-2px);
    text-decoration: none;
}

.article-card:active {
    transform: translateY(0) scale(0.99);
}

.article-card:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.article-card:hover::before {
    transform: scaleX(1);
}

.article-card h2 {
    font-size: 1.05rem;
    margin-bottom: var(--space-04);
    color: var(--color-primary);
}

.article-card p {
    margin: 0;
    font-size: var(--font-size-md);
    color: var(--color-slate);
}