/* ==========================================================================
   begehbaresglas.de, Ratgeberseiten (page-thema.php), 14.10.2026.

   Eigener Aufbau, nicht der von isolierglasonline und nicht der der Startseite:
   Graphitband mit Ueberschrift, das Foto ragt unten heraus, Text in einer Spalte mit
   mitlaufendem Datenblatt, Beispiele als Karten, Sicherheit nummeriert.
   Farben und Schrift aus beg.css (--beg-*), Barlow vom eigenen Server.

   Keine Linien, keine Rahmen, keine kleinen Zeilen ueber Ueberschriften, keine Kaesten mit
   farbigem Rand (Hamza 27. und 30.09.2026). Abschnitte trennen sich durch Abstand und Hintergrund.
   Zweite Knoepfe gefuellt statt umrandet.
   ========================================================================== */

.beg-rat {
    background: #ffffff;
    color: var(--beg-text);
}
.beg-rat h2 {
    font-family: var(--iso-font);
    font-size: clamp(1.6rem, 2.6vw, 2.15rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--beg-graphit);
    margin: 0 0 0.75rem;
}
.beg-rat-leise {
    color: var(--beg-leise);
    max-width: 680px;
    margin: 0 0 1.75rem;
    line-height: 1.6;
}

/* --- Brotkrumen unter dem Kopf ------------------------------------------ */
.beg-rat-pfad {
    margin-top: var(--ts-header-height, 76px);
    background: var(--beg-stein);
    font-size: 0.92rem;
    color: var(--beg-leise);
}
.beg-rat-pfad .beg-breite {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}
.beg-rat-pfad a {
    color: var(--beg-bernstein);
    font-weight: 600;
    text-decoration: none;
}
.beg-rat-pfad a:hover {
    color: var(--beg-bernstein-hover) !important;
}
/* Eine Zeile: die aktuelle Seite wird am Handy gekuerzt, statt den Strich allein stehen zu lassen */
.beg-rat-pfad .beg-breite {
    flex-wrap: nowrap;
    white-space: nowrap;
}
.beg-rat-pfad [aria-current] {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* --- Graphitband ------------------------------------------------------------ */
.beg-rat-band {
    background: var(--beg-graphit);
    color: #ffffff;
    padding: clamp(2.5rem, 5vw, 4.25rem) 0 clamp(2.5rem, 5vw, 4.25rem);
}
.beg-rat-band-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
}
.beg-rat-band-foto .beg-rat-band-raster {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: start;
}
.beg-rat-band h1 {
    font-family: var(--iso-font);
    font-size: clamp(2.1rem, 4.4vw, 3.3rem);
    font-weight: 700;
    line-height: 1.06;
    color: #ffffff;
    margin: 0 0 1.1rem;
    max-width: 640px;
}
.beg-rat-vorspann {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #d5d9dc;
    max-width: 600px;
    margin: 0 0 1.9rem;
}
.beg-rat-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
}
.beg-rat-hell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 600 1.05rem/1.2 var(--iso-font);
    color: #ffffff;
    background: #343a40;
    border-radius: 4px;
    padding: 1rem 1.4rem;
    text-decoration: none;
}
.beg-rat-hell:hover,
.beg-rat-hell:focus-visible {
    background: #454c53;
    color: #ffffff !important;
}
.beg-rat-foto {
    margin: 0;
}
.beg-rat-foto img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 18px 40px rgba(29, 33, 37, 0.28);
}

/* --- Text und Datenblatt -------------------------------------------------------- */
.beg-rat-haupt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
    padding-top: clamp(3rem, 6vw, 4.5rem);
    padding-bottom: clamp(3.5rem, 6vw, 5rem);
}
.beg-rat-fliess {
    max-width: 720px;
    font-size: 1.0625rem;
    line-height: 1.75;
}
.beg-rat-fliess > *:first-child {
    margin-top: 0;
}
.beg-rat-fliess h2 {
    margin: 2.4rem 0 0.7rem;
}
.beg-rat-fliess h3 {
    font-family: var(--iso-font);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--beg-graphit);
    margin: 1.8rem 0 0.5rem;
}
.beg-rat-fliess p {
    color: var(--beg-text);
    margin: 0 0 1.1rem;
}
.beg-rat-fliess ul {
    list-style: none;
    margin: 0 0 1.3rem;
    padding: 0;
}
.beg-rat-fliess ul li {
    position: relative;
    padding: 0 0 0 1.5rem;
    margin: 0 0 0.55rem;
}
.beg-rat-fliess ul li::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.62em;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 1px;
    background: var(--beg-licht);
}
.beg-rat-fliess a {
    color: var(--beg-bernstein);
    font-weight: 600;
    text-decoration: none;
}
.beg-rat-fliess a:hover {
    color: var(--beg-bernstein-hover) !important;
}
.beg-rat-fliess strong {
    color: var(--beg-graphit);
}

.beg-rat-blatt {
    position: sticky;
    top: calc(var(--ts-header-height, 76px) + 1.25rem);
}
.beg-rat-blatt-innen {
    background: var(--beg-stein);
    border-radius: 8px;
    padding: 1.6rem 1.5rem 1.5rem;
}
.beg-rat-blatt-kopf {
    font: 700 1.2rem/1.3 var(--iso-font);
    color: var(--beg-graphit);
    margin: 0 0 1rem;
}
.beg-rat-blatt dl {
    margin: 0 0 1.4rem;
    display: grid;
    gap: 0.35rem;
}
.beg-rat-blatt dl > div {
    background: #ffffff;
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
}
.beg-rat-blatt dt {
    font-size: 0.88rem;
    color: var(--beg-leise);
    margin: 0 0 0.1rem;
}
.beg-rat-blatt dd {
    margin: 0;
    font-weight: 600;
    color: var(--beg-graphit);
    line-height: 1.4;
}
.beg-rat-blatt-wege {
    display: grid;
    gap: 0.55rem;
    margin: 0 0 1.2rem;
}
.beg-rat-blatt-wege .ts-btn {
    width: 100%;
    justify-content: center;
}
.beg-rat-anfrage {
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 1rem/1.2 var(--iso-font);
    color: #ffffff;
    background: var(--beg-graphit);
    border-radius: 4px;
    padding: 0.9rem 1rem;
    text-decoration: none;
}
.beg-rat-anfrage:hover,
.beg-rat-anfrage:focus-visible {
    background: #343a40;
    color: #ffffff !important;
}
.beg-rat-blatt-tel {
    margin: 0;
    font-size: 0.95rem;
    color: var(--beg-leise);
    line-height: 1.5;
}
.beg-rat-blatt-tel a {
    font: 700 1.3rem/1.4 var(--iso-font);
    color: var(--beg-graphit);
    text-decoration: none;
    white-space: nowrap;
}

/* --- Beispiele als Karten ------------------------------------------------------- */
.beg-rat-beispiele {
    background: var(--beg-stein);
    padding: clamp(3.5rem, 6vw, 5rem) 0;
}
.beg-rat-karten {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.beg-rat-karte {
    background: #ffffff;
    border-radius: 8px;
    padding: 1.35rem 1.35rem 1.25rem;
    display: flex;
    flex-direction: column;
}
.beg-rat-karte p {
    margin: 0;
}
.beg-rat-karte-wofuer {
    font-size: 0.92rem;
    color: var(--beg-bernstein);
    font-weight: 600;
    margin: 0 0 0.35rem !important;
}
.beg-rat-karte-mass {
    font: 700 1.4rem/1.2 var(--iso-font);
    color: var(--beg-graphit);
}
.beg-rat-karte-daten {
    color: var(--beg-leise);
    font-size: 0.97rem;
    margin: 0.3rem 0 1rem !important;
}
.beg-rat-karte-preis {
    margin: auto 0 0.9rem !important;
}
.beg-rat-preis {
    font: 700 1.65rem/1.1 var(--iso-font);
    color: var(--beg-graphit);
}
.beg-rat-uebernehmen {
    font: 600 0.98rem/1.2 var(--iso-font);
    color: var(--beg-graphit);
    background: var(--beg-stein-2);
    border: 0;
    border-radius: 4px;
    padding: 0.8rem 1rem;
    cursor: pointer;
    width: 100%;
}
.beg-rat-uebernehmen:hover,
.beg-rat-uebernehmen:focus-visible {
    background: var(--beg-licht);
}

/* --- Sicherheit und Einbau --------------------------------------------------------- */
.beg-rat-sicher {
    padding: clamp(3.5rem, 6vw, 5rem) 0;
    background: #ffffff;
}
.beg-rat-sicher-liste {
    list-style: none;
    counter-reset: beg-sicher;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 2.5rem;
}
.beg-rat-sicher-liste li {
    counter-increment: beg-sicher;
    position: relative;
    padding: 0 0 0 3.3rem;
    line-height: 1.6;
}
.beg-rat-sicher-liste li::before {
    content: counter(beg-sicher);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--beg-licht);
    color: var(--beg-graphit);
    font: 700 1rem/2.2rem var(--iso-font);
    text-align: center;
}
.beg-rat-sicher-liste strong {
    display: block;
    color: var(--beg-graphit);
    font-size: 1.08rem;
    margin: 0.2rem 0 0.25rem;
}
.beg-rat-sicher-liste span {
    color: var(--beg-text);
}

/* --- Fragen ------------------------------------------------------------------------ */
.beg-rat-fragen {
    padding: clamp(3.5rem, 6vw, 5rem) 0;
    background: #ffffff;
}
.beg-rat-fragen-raster {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: 2.5rem;
    align-items: start;
}
.beg-rat-fragen-liste {
    display: grid;
    gap: 0.6rem;
}
.beg-rat-frage {
    background: var(--beg-stein);
    border-radius: 8px;
}
.beg-rat-frage summary {
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--beg-graphit);
    padding: 1.05rem 3rem 1.05rem 1.25rem;
    position: relative;
    line-height: 1.45;
}
.beg-rat-frage summary::-webkit-details-marker {
    display: none;
}
/* Plus und Minus als zwei gezeichnete Balken, nicht als Schriftzeichen: das "+" der Schrift sass
   unter der Mitte des Kreises (Hamza 14.10.2026: "alignment"). So liegt es immer genau in der Mitte. */
.beg-rat-frage summary::after {
    content: "";
    position: absolute;
    right: 1.15rem;
    top: 50%;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    border-radius: 50%;
    background:
        linear-gradient(var(--beg-graphit), var(--beg-graphit)) center / 12px 2px no-repeat,
        linear-gradient(var(--beg-graphit), var(--beg-graphit)) center / 2px 12px no-repeat,
        #ffffff;
}
.beg-rat-frage[open] summary::after {
    background:
        linear-gradient(var(--beg-graphit), var(--beg-graphit)) center / 12px 2px no-repeat,
        var(--beg-licht);
}
.beg-rat-antwort {
    padding: 0 1.25rem 1.1rem;
    line-height: 1.7;
}
.beg-rat-antwort p {
    margin: 0 0 0.6rem;
}
.beg-rat-antwort p:last-child {
    margin: 0;
}

/* --- Weiterlesen ------------------------------------------------------------------- */
/* Weiss wie die Fragen darueber: so endet die Seite wie die Startseite, und ueber dem beigen Fuss liegt
   kein zweites Beige (Hamza 14.10.2026: "strange vibe ... colors"). Karten fuellen die Reihe. */
.beg-rat-weiter {
    background: #ffffff;
    padding: clamp(3rem, 5vw, 4.25rem) 0 clamp(3.5rem, 6vw, 5rem);
}
.beg-rat-fragen + .beg-rat-weiter {
    padding-top: 0;
}
.beg-rat-weiter-reihe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}
.beg-rat-weiter-karte {
    display: block;
    position: relative;
    background: var(--beg-stein);
    border-radius: 8px;
    padding: 1.3rem 4rem 1.3rem 1.4rem;
    text-decoration: none;
    color: var(--beg-text);
}
.beg-rat-weiter-karte strong {
    display: block;
    color: var(--beg-graphit);
    font-size: 1.12rem;
    margin: 0 0 0.3rem;
}
.beg-rat-weiter-karte::after {
    content: "\2192";
    position: absolute;
    right: 1.3rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--beg-licht);
    color: var(--beg-graphit);
    font: 700 1.1rem/2.2rem var(--iso-font);
    text-align: center;
}
.beg-rat-weiter-karte:hover,
.beg-rat-weiter-karte:focus-visible {
    background: var(--beg-stein-2);
    color: var(--beg-text) !important;
}

/* --- Schmale Bildschirme -------------------------------------------------------------- */
@media (max-width: 960px) {
    .beg-rat-band-foto .beg-rat-band-raster,
    .beg-rat-haupt,
    .beg-rat-fragen-raster {
        grid-template-columns: minmax(0, 1fr);
    }
    .beg-rat-blatt {
        position: static;
    }
    .beg-rat-fragen-raster {
        gap: 1.25rem;
    }
}
@media (max-width: 1000px) {
    .beg-rat-karten {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .beg-rat-karten {
        grid-template-columns: minmax(0, 1fr);
    }
    .beg-rat-sicher-liste {
        grid-template-columns: minmax(0, 1fr);
    }
    .beg-rat-knoepfe .ts-btn,
    .beg-rat-hell {
        width: 100%;
    }
    .beg-rat-vorspann {
        font-size: 1.06rem;
    }
}

/* --- Oberflaechen als Muster statt Foto (zeichnung:klar,pixel,matrix) -------------------- */
.beg-rat-muster {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}
.beg-rat-muster-feld {
    margin: 0;
}
.beg-rat-muster-feld svg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    background: #ffffff;
}
.beg-rat-muster-feld p {
    margin: 0.55rem 0 0;
    color: #d5d9dc;
    font-size: 0.95rem;
    font-weight: 600;
}

/* --- Tabellen im Text ([beg_preistabelle], [beg_aufbau_tabelle]), ohne Linien ------------- */
.beg-rat-tabelle-rahmen {
    margin: 1.4rem 0 1.6rem;
    overflow-x: auto;
}
.beg-rat-tabelle {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.35rem;
    font-size: 0.98rem;
    line-height: 1.45;
}
.beg-rat-tabelle thead th {
    text-align: left;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--beg-leise);
    padding: 0 0.9rem 0.2rem;
    white-space: nowrap;
}
.beg-rat-tabelle tbody th,
.beg-rat-tabelle tbody td {
    background: var(--beg-stein);
    padding: 0.75rem 0.9rem;
    text-align: left;
    vertical-align: top;
}
.beg-rat-tabelle tbody th {
    font-weight: 700;
    color: var(--beg-graphit);
    white-space: nowrap;
    border-radius: 6px 0 0 6px;
}
.beg-rat-tabelle tbody td:last-child {
    border-radius: 0 6px 6px 0;
}
.beg-rat-qm {
    font-weight: 600;
    color: var(--beg-graphit);
    white-space: nowrap;
}
@media (max-width: 760px) {
    .beg-rat-tabelle,
    .beg-rat-tabelle tbody,
    .beg-rat-tabelle tr,
    .beg-rat-tabelle tbody th,
    .beg-rat-tabelle tbody td {
        display: block;
        width: auto;
    }
    .beg-rat-tabelle thead {
        display: none;
    }
    .beg-rat-tabelle tbody tr {
        background: var(--beg-stein);
        border-radius: 8px;
        padding: 0.7rem 0.9rem;
        margin: 0 0 0.6rem;
    }
    .beg-rat-tabelle tbody th,
    .beg-rat-tabelle tbody td {
        background: transparent;
        padding: 0.2rem 0;
        border-radius: 0;
        white-space: normal;
        display: flex;
        justify-content: space-between;
        gap: 1rem;
    }
    .beg-rat-tabelle tbody th {
        font-size: 1.08rem;
        padding-bottom: 0.4rem;
    }
    .beg-rat-tabelle tbody td::before {
        content: attr(data-titel);
        color: var(--beg-leise);
        font-weight: 400;
    }
    .beg-rat-tabelle tbody td {
        text-align: right;
    }
}

/* Worte auf der Startseite, die auf eine Ratgeberseite verlinken (beg_rat_link) */
a.beg-rat-wortlink {
    color: var(--beg-bernstein) !important;
    font-weight: 600;
    text-decoration: none !important;
}
a.beg-rat-wortlink:hover,
a.beg-rat-wortlink:focus-visible {
    color: var(--beg-bernstein-hover) !important;
}

@media(max-width:380px){.beg-rat-band h1{font-size:clamp(1.6rem,8.4vw,1.9rem)}}

#qm-preise{scroll-margin-top:calc(var(--ts-header-height) + 24px)}