/* ==========================================================================
   begehbaresglas.de, eigene Fassung 30.09.2026. Kommt als letzte Datei.

   Hamza: "it looks same to old sites ... other sites also use blue so please check accordingly,
   according to what i am selling that color use". Toni 04.04.2026: "I would feel better that
   google sees all unique", 28.02.2026: Farben und Schrift muessen zur Nische passen.

   Belegt auf Tonis Seiten (gemessen 30.09.2026): pink tanzspiegel, gruen vsgscheibe und
   isolierglasonline, stahlblau esgscheibe, petrol duschscheibe, koralle spritzschutzglas, oliv
   strukturglas, hellbraun formspiegel, holzbraun naturholz und tigerwood.

   Hier: GRAPHIT und TAGESLICHT-BERNSTEIN. Begehbares Glas verkauft Tageslicht fuer das Geschoss
   darunter und Sicherheit unter den Fuessen (Rutschhemmung); Bernstein ist das Licht und die
   Farbe der Sicherheit am Bau, Graphit ist Stahl und Beton der Treppen und Stege.
   Schrift: Barlow (SIL OFL), vom eigenen Server, keine Verbindung zu Google.

   Kontrast gemessen: Graphit auf Bernstein 8,6; Bernstein-Text #8a5700 auf Weiss 6,1, auf Stein 5,5.
   ========================================================================== */

@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlow-700.woff2') format('woff2'); }

:root {
    --beg-graphit: #1d2125;
    --beg-text: #2d3338;
    --beg-leise: #5a6066;
    --beg-stein: #f5f2eb;
    --beg-stein-2: #ece6da;
    --beg-linie: #ddd6c7;
    --beg-licht: #f2b233;
    --beg-licht-hover: #e09f1a;
    --beg-bernstein: #8a5700;
    --beg-bernstein-hover: #6b4300;

    /* Die Variablen des gemeinsamen Baus auf diese Seite umstellen */
    --iso-ink: var(--beg-graphit);
    --iso-text: var(--beg-text);
    --iso-soft: var(--beg-leise);
    --iso-line: #e4dfd4;
    --iso-line-2: var(--beg-linie);
    --iso-tint: var(--beg-stein);
    --iso-dunkel: var(--beg-graphit);
    --iso-akzent: var(--beg-bernstein);
    --iso-akzent-hover: var(--beg-bernstein-hover);
    --iso-akzent-hell: #fbeccc;
    --iso-font: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --iso-radius: 4px;
}

body {
    font-family: var(--iso-font);
    font-size: 1.0625rem;
    color: var(--beg-text);
}
h1, h2, h3, h4,
.ts-calc-title {
    font-family: var(--iso-font);
    letter-spacing: -0.005em;
}

.beg-breite {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--iso-rand);
}
.beg-abschnitt-kopf {
    margin: 0 0 2.5rem;
}
.beg-abschnitt-kopf h2 {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 700;
    color: var(--beg-graphit);
    margin: 0 0 0.6rem;
    line-height: 1.1;
}
.beg-abschnitt-kopf p {
    color: var(--beg-leise);
    max-width: 680px;
    margin: 0;
    line-height: 1.6;
}

/* --- Kopfzeile und Logo ---------------------------------------------- */
.beg-logo-mark i {
    background: var(--beg-graphit) !important;
}
.beg-logo-mark i:nth-child(2) {
    background: var(--beg-licht) !important;
}
a.ts-logo.iso-logo .iso-logo-b,
.iso-logo-b {
    color: var(--beg-bernstein) !important;
}
.ts-header-phone {
    background: var(--beg-licht) !important;
    border-color: var(--beg-licht) !important;
    color: var(--beg-graphit) !important;
}
.ts-header-phone .ts-header-phone-text,
.ts-header-phone svg {
    color: var(--beg-graphit) !important;
}
.ts-header-phone:hover {
    background: var(--beg-licht-hover) !important;
    border-color: var(--beg-licht-hover) !important;
}

/* --- Knoepfe: Bernstein mit graphitfarbener Schrift ------------------------ */
.ts-btn {
    border-radius: 4px !important;
    font-weight: 600 !important;
}
.ts-btn-primary,
.ts-calc-total .ts-btn-primary {
    background: var(--beg-licht) !important;
    border: 1px solid var(--beg-licht) !important;
    color: var(--beg-graphit) !important;
}
.ts-btn-primary:hover,
.ts-calc-total .ts-btn-primary:hover {
    background: var(--beg-licht-hover) !important;
    border-color: var(--beg-licht-hover) !important;
    color: var(--beg-graphit) !important;
}
.beg-leise-knopf,
.beg-waehle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 600 1rem/1.2 var(--iso-font);
    color: var(--beg-graphit) !important;
    background: transparent;
    border: 1.5px solid var(--beg-graphit);
    border-radius: 4px;
    padding: 0.85rem 1.3rem;
    cursor: pointer;
    text-decoration: none;
}
.beg-leise-knopf:hover,
.beg-waehle:hover {
    background: var(--beg-graphit);
    color: #ffffff !important;
}

/* --- 1. Kopf: Text und Foto nebeneinander IN der Seitenbreite ------------------
   Hamza 30.09.2026 auf breitem Bildschirm: "cant you see layout of hero spacing". Vorher lief das
   Foto bis an den rechten Rand, der Text stand in der Seitenbreite, auf breiten Bildschirmen wurde das
   schief und oben eng. Jetzt beide in derselben 1200er Breite wie jeder Abschnitt, feste Abstaende. */
.beg-kopf {
    background: var(--beg-stein);
    padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3.5rem, 6.5vw, 6rem);
}
.beg-kopf-raster {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--iso-rand);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4.5vw, 4.5rem);
    align-items: center;
}
.beg-kopf-text {
    padding: 0;
}
.beg-kopf-text h1 {
    font-size: clamp(2.4rem, 4.4vw, 3.9rem);
    line-height: 1.04;
    font-weight: 700;
    color: var(--beg-graphit);
    margin: 0 0 1.25rem;
}
.beg-kopf-unter {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--beg-text);
    max-width: 540px;
    margin: 0 0 1.75rem;
}
.beg-eckdaten dt {
    color: var(--beg-leise);
}
.beg-eckdaten dd {
    margin: 0;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--beg-graphit);
    font-variant-numeric: tabular-nums;
}
.beg-kopf-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin: 0;
}
.beg-kopf-bild img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    object-position: 45% 55%;
    border-radius: 4px;
}

/* --- 2. Drei Oberflaechen als Glasmuster --------------------------------- */
.beg-ausfuehrungen {
    padding: 6rem 0;
    background: #ffffff;
}
.beg-muster-reihe {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.75rem;
}
.beg-muster {
    margin: 0;
}
.beg-muster-bild {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
    background: var(--beg-stein);
}
.beg-muster-bild svg,
.beg-muster-bild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.beg-muster figcaption {
    padding: 1.35rem 0 0;
}
.beg-muster h3 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--beg-graphit);
    margin: 0 0 0.45rem;
}
.beg-muster figcaption > p {
    color: var(--beg-leise);
    line-height: 1.55;
    margin: 0 0 1rem;
}
.beg-muster figcaption > p.beg-muster-preis {
    color: var(--beg-graphit);
    font-size: 1.45rem;
    font-weight: 700;
    margin: 0 0 1.1rem;
    font-variant-numeric: tabular-nums;
}
.beg-muster-preis small {
    display: block;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--beg-leise);
}

/* --- 3. Rechner ------------------------------------------------------- */
.ts-calc-section {
    background: var(--beg-stein) !important;
    border-color: var(--beg-linie) !important;
}
.iso-kopf .ts-calc-title {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
}
.ts-piece {
    border-color: var(--beg-linie);
    border-radius: 4px;
}
.ts-piece-num {
    background: var(--beg-graphit) !important;
    color: #ffffff !important;
}
.ts-piece-pill {
    border-radius: 4px !important;
}
.ts-piece-pill.is-active {
    background: var(--beg-graphit) !important;
    border-color: var(--beg-graphit) !important;
    color: #ffffff !important;
}
.ts-calc-total {
    border-color: var(--beg-linie);
    border-radius: 4px;
    box-shadow: none !important;
    border-top: 4px solid var(--beg-licht);
}
.ts-add-piece-btn,
.ts-calc-quote-hint {
    border-radius: 4px !important;
}
.ts-calc-anruf-nummer {
    color: var(--beg-graphit) !important;
}

/* --- 4. Fotomosaik ---------------------------------------------------- */
.beg-einsatz {
    padding: 6rem 0;
    background: #ffffff;
}
.beg-mosaik {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "treppe boden licht"
        "treppe bruecke bruecke";
    gap: 2rem 1.5rem;
}
.beg-ort {
    margin: 0;
    display: flex;
    flex-direction: column;
}
.beg-ort-treppe { grid-area: treppe; }
.beg-ort-boden { grid-area: boden; }
.beg-ort-lichtschacht { grid-area: licht; }
.beg-ort-bruecke { grid-area: bruecke; }
.beg-ort img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 4px;
}
.beg-ort-treppe img {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 320px;
    height: 100%;
}
.beg-ort-bruecke img {
    aspect-ratio: 2.3 / 1;
}
.beg-ort figcaption {
    padding: 0.8rem 0 0;
    line-height: 1.45;
}
.beg-ort figcaption strong {
    display: block;
    font-size: 1.15rem;
    color: var(--beg-graphit);
}
.beg-ort figcaption span {
    color: var(--beg-leise);
}

/* --- 5. Aufbau, Planung, Sonderform ------------------------------------- */
.beg-aufbau {
    padding: 6rem 0;
    background: var(--beg-stein);
}
.beg-aufbau-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4rem;
    align-items: center;
}
.beg-aufbau-bild img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 4px;
}
.beg-aufbau-text h2 {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 700;
    color: var(--beg-graphit);
    margin: 0 0 1.6rem;
}
.beg-teile {
    list-style: none;
    counter-reset: teil;
    margin: 0 0 1.75rem;
    padding: 0;
}
.beg-teile li {
    counter-increment: teil;
    position: relative;
    padding: 0 0 0 3.1rem;
    margin: 0 0 1.2rem;
    line-height: 1.55;
    color: var(--beg-leise);
}
.beg-teile li::before {
    content: counter(teil);
    position: absolute;
    left: 0;
    top: -0.1rem;
    width: 2.05rem;
    height: 2.05rem;
    border-radius: 50%;
    background: var(--beg-licht);
    color: var(--beg-graphit);
    font-weight: 700;
    display: grid;
    place-items: center;
}
.beg-teile strong {
    display: block;
    color: var(--beg-graphit);
    font-size: 1.1rem;
}
.beg-planung {
    margin: 0;
    padding: 1.2rem 0 0;
    border-top: 1px solid var(--beg-linie);
    color: var(--beg-leise);
    font-size: 0.97rem;
    line-height: 1.6;
}
.beg-sonder {
    background: var(--beg-graphit);
    padding: 3.25rem 0;
}
.beg-sonder-reihe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem 3rem;
}
.beg-sonder h2 {
    color: #ffffff;
    font-size: clamp(1.45rem, 2.4vw, 1.9rem);
    font-weight: 700;
    margin: 0 0 0.4rem;
}
.beg-sonder-reihe p {
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
    max-width: 620px;
    line-height: 1.55;
}
.beg-sonder-reihe p.beg-sonder-wege {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
}
.beg-tel,
.beg-tel:hover {
    color: #ffffff !important;
    font-weight: 700;
    font-size: 1.15rem;
}

/* --- 6. Schritte als Zeitleiste ------------------------------------------ */
.beg-schritte {
    padding: 6rem 0;
    background: #ffffff;
}
.beg-zeitleiste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
    position: relative;
}
.beg-zeitleiste::before {
    content: '';
    position: absolute;
    top: 1.35rem;
    left: 1.35rem;
    right: 1.35rem;
    height: 2px;
    background: var(--beg-linie);
}
.beg-schritt-nr {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    background: var(--beg-licht);
    color: var(--beg-graphit);
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0 0 1.1rem;
    box-shadow: 0 0 0 6px #ffffff;
}
.beg-zeitleiste h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--beg-graphit);
    margin: 0 0 0.4rem;
}
.beg-zeitleiste p {
    color: var(--beg-leise);
    margin: 0;
    line-height: 1.55;
}

/* --- 7. Fragen: eine Spalte in der Mitte ---------------------------------- */
.ts-faq-section {
    background: var(--beg-stein) !important;
}
@media (min-width: 960px) {
    .ts-faq-section .ts-container {
        display: block !important;
        max-width: 860px !important;
    }
    .ts-faq-section .ts-features-header {
        position: static !important;
        margin: 0 0 2.25rem !important;
    }
}
.ts-faq-section .ts-features-header h2 {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem) !important;
}
.ts-faq-items {
    background: #ffffff !important;
    border-radius: 4px !important;
}
.ts-faq-item.active .ts-faq-icon svg {
    color: var(--beg-bernstein) !important;
    stroke: var(--beg-bernstein) !important;
}

/* --- Fuss: hell, Stein ---------------------------------------------------- */
.ts-footer.iso-fuss {
    background: var(--beg-stein-2) !important;
    color: var(--beg-text) !important;
    border-top: 4px solid var(--beg-licht) !important;
}
.iso-fuss .iso-logo-a {
    color: var(--beg-graphit) !important;
}
.iso-fuss .iso-logo-b,
.ts-footer.iso-fuss .iso-logo-b {
    color: var(--beg-bernstein) !important;
}
.iso-fuss .iso-logo-mark i {
    background: var(--beg-graphit) !important;
}
.iso-fuss .iso-logo-mark i:nth-child(2) {
    background: var(--beg-licht) !important;
}
.iso-fuss .ts-footer-description,
.iso-fuss .ts-footer-copyright,
.iso-fuss .ts-footer-partner,
.iso-fuss .ts-footer-schwestern {
    color: #4d5359 !important;
}
.iso-fuss-kontakt a,
.iso-fuss-links a,
.iso-fuss-recht a,
.ts-footer.iso-fuss .ts-footer-schwestern a,
.ts-footer.iso-fuss .iso-fuss-kontakt a {
    color: var(--beg-graphit) !important;
}
.iso-fuss-kontakt a:hover,
.iso-fuss-links a:hover,
.iso-fuss-recht a:hover,
.ts-footer.iso-fuss .ts-footer-schwestern a:hover,
.ts-footer.iso-fuss .iso-fuss-kontakt a:hover {
    color: var(--beg-bernstein) !important;
    text-decoration: none !important;
}
.iso-fuss-links {
    border-color: rgba(29, 33, 37, 0.14) !important;
}

/* --- Tablet und Handy ---------------------------------------------------- */
@media (max-width: 960px) {
    .beg-kopf-raster {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }
    .beg-kopf-bild img {
        aspect-ratio: 16 / 10;
    }
    .beg-muster-reihe {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .beg-muster {
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
        gap: 1.5rem;
        align-items: start;
    }
    .beg-muster figcaption {
        padding: 0;
    }
    .beg-mosaik {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "treppe boden"
            "treppe licht"
            "bruecke bruecke";
    }
    .beg-aufbau-raster {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}
@media (max-width: 620px) {
    .beg-ausfuehrungen,
    .beg-einsatz,
    .beg-aufbau,
    .beg-schritte {
        padding: 4rem 0;
    }
    .beg-eckdaten {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }
    .beg-muster {
        display: block;
    }
    .beg-muster-bild {
        aspect-ratio: 16 / 9;
    }
    .beg-muster figcaption {
        padding: 1.1rem 0 0;
    }
    .beg-mosaik {
        grid-template-columns: 1fr;
        grid-template-areas:
            "treppe"
            "boden"
            "licht"
            "bruecke";
    }
    .beg-ort-treppe img,
    .beg-ort-bruecke img {
        aspect-ratio: 3 / 2;
        min-height: 0;
        height: auto;
    }
    .beg-zeitleiste {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
    .beg-zeitleiste::before {
        top: 1.35rem;
        bottom: 1.35rem;
        left: 1.34rem;
        right: auto;
        width: 2px;
        height: auto;
    }
    .beg-zeitleiste li {
        padding-left: 4rem;
        position: relative;
    }
    .beg-schritt-nr {
        position: absolute;
        left: 0;
        top: 0;
    }
}

/* --- Nachbesserungen nach der Sichtpruefung 30.09.2026 -------------------- */
.ts-footer.iso-fuss a.ts-footer-logo,
.ts-footer.iso-fuss a.ts-footer-logo:hover {
    color: var(--beg-graphit) !important;
}
.ts-calc-quote-hint-btn {
    color: var(--beg-graphit) !important;
    border-color: var(--beg-graphit) !important;
    background: #ffffff !important;
}
.ts-calc-quote-hint-btn:hover {
    color: #ffffff !important;
    background: var(--beg-graphit) !important;
}
/* Preis und Knopf der drei Muster auf einer Linie, egal wie lang der Satz ist */
.beg-muster {
    display: flex;
    flex-direction: column;
}
.beg-muster figcaption {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.beg-muster figcaption > p.beg-muster-preis {
    margin-top: auto;
}
@media (max-width: 960px) and (min-width: 621px) {
    .beg-muster {
        display: grid;
    }
}

/* ==========================================================================
   KEINE LINIEN. Hamza 30.09.2026: "i hate lines". Keine Trennlinien, keine farbigen Streifen,
   keine Rahmen um Kaesten, keine Zeitleisten-Linie. Getrennt wird nur ueber Abstand und
   Hintergrundfarbe. Eingabefelder sind gefuellt statt umrandet. Pruefen mit begbau/linien.mjs.
   ========================================================================== */
.ts-header,
.ts-header.scrolled {
    border-bottom: 0 !important;
}
.ts-header.scrolled {
    box-shadow: 0 6px 20px rgba(29, 33, 37, 0.06) !important;
}
.ts-header-phone,
.ts-btn,
.ts-btn-primary,
.ts-calc-total .ts-btn-primary,
.ts-back-to-top,
.ts-cookie-btn,
.ts-cookie-inner {
    border: 0 !important;
}
.ts-cookie-inner {
    box-shadow: 0 12px 40px rgba(29, 33, 37, 0.14) !important;
}
a:not(.ts-btn) {
    border-bottom: 0 !important;
}

/* Eckdaten im Kopf als drei ruhige Felder statt Linie darueber */
.beg-eckdaten {
    border-top: 0;
    padding: 0;
    gap: 0.75rem;
}
.beg-eckdaten > div {
    background: #ffffff;
    border-radius: 4px;
    padding: 0.8rem 1rem;
}

/* Zweitknoepfe gefuellt statt umrandet */
.beg-leise-knopf,
.beg-waehle,
.ts-calc-quote-hint-btn,
.ts-add-piece-btn {
    border: 0 !important;
}
.beg-leise-knopf {
    background: #ffffff;
}
.beg-waehle {
    background: var(--beg-stein-2);
}
.ts-calc-quote-hint-btn {
    background: var(--beg-stein-2) !important;
}
.ts-add-piece-btn {
    background: #ffffff !important;
}

/* Rechner: weisse Flaechen auf Stein, gefuellte Felder, keine Rahmen und Trennlinien */
.ts-calc-section {
    border: 0 !important;
}
.ts-piece,
.ts-calc-quote-hint,
.ts-calc-total {
    border: 0 !important;
    box-shadow: none !important;
}
.ts-piece-head,
.ts-piece-subtotal,
.ts-calc-row,
.ts-calc-row-big,
.ts-calc-total-rows,
.ts-calc-total-actions,
.ts-calc-anruf {
    border: 0 !important;
}
.ts-calc-row-big {
    margin-top: 0.6rem;
    padding-top: 0.6rem !important;
}
.ts-piece-subtotal {
    background: var(--beg-stein);
    border-radius: 4px;
    padding: 0.7rem 0.9rem !important;
    margin-top: 1rem;
}
.ts-piece-input,
.ts-piece-color,
.ts-piece input,
.ts-piece select {
    border: 0 !important;
    background-color: var(--beg-stein) !important;
    box-shadow: none !important;
}
.ts-piece-pill {
    border: 0 !important;
    background: var(--beg-stein) !important;
    color: var(--beg-graphit) !important;
}
.ts-piece-pill.is-active {
    background: var(--beg-graphit) !important;
    color: #ffffff !important;
}
.ts-piece-pill.is-unavailable {
    background: #f7f5f0 !important;
    color: #9aa0a6 !important;
}

/* Aufbau und Planung */
.beg-planung {
    border-top: 0;
    padding-top: 0.5rem;
}

/* Zeitleiste ohne Linie */
.beg-zeitleiste::before {
    display: none !important;
}
.beg-schritt-nr {
    box-shadow: none;
}

/* Fragen: jede Frage ein eigenes Feld mit Abstand, keine Trennlinien */
.ts-faq-section {
    border: 0 !important;
}
.ts-faq-category-header {
    border: 0 !important;
}
.ts-faq-items {
    background: transparent !important;
    display: flex !important;
    flex-direction: column;
    gap: 0.5rem !important;
}
.ts-faq-item,
.ts-faq-item:hover,
.ts-faq-item:last-child,
.ts-faq-item:last-child:hover {
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 4px !important;
}
.ts-faq-question {
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
}
.ts-faq-answer p {
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
}

/* Fuss ohne Streifen und ohne Linien um die Links */
.ts-footer.iso-fuss {
    border-top: 0 !important;
}
.iso-fuss-links,
.iso-fuss .ts-footer-bottom {
    border: 0 !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
.ts-piece-unit {
    color: var(--beg-leise) !important;
}
.ts-faq-items {
    padding: 0 !important;
    margin: 0 !important;
}

/* Kopfzeile genau so breit wie der Inhalt: Logo und Telefon stehen auf derselben Kante wie Text und Fuss */
.ts-header .ts-container {
    max-width: 1200px !important;
    padding-left: var(--iso-rand) !important;
    padding-right: var(--iso-rand) !important;
}
/* Knopf in Inhaltsseiten (404, Rechtstexte): Schrift graphit auf Bernstein */
.ts-entry-content a.ts-btn-primary,
.ts-entry-content a.ts-btn-primary:hover {
    color: var(--beg-graphit) !important;
}

/* --- Ausrichtung und Gleichgewicht, Sichtpruefung in 7 Breiten 30.09.2026 ----------------- */

/* Eckdaten: ein ruhiges weisses Feld mit drei Zeilen, Name links, Wert rechts. Bricht in keiner
   Breite unschoen um (vorher drei Kaestchen, die bei 1024 px zwei- und dreizeilig wurden). */
.beg-eckdaten {
    display: block !important;
    max-width: 440px;
    background: #ffffff;
    border-radius: 4px;
    padding: 0.35rem 1.1rem !important;
    margin: 0 0 2rem !important;
}
.beg-eckdaten > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.55rem 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}
.beg-eckdaten dt {
    margin: 0 !important;
    font-size: 0.95rem !important;
}
.beg-eckdaten dd {
    white-space: nowrap;
    text-align: right;
}

/* Rechner: die Auswahl der Ausfuehrung so breit wie die Zeile darueber */
.ts-piece-field-wide,
.ts-piece-field-wide select,
.ts-piece .ts-piece-color {
    width: 100% !important;
    max-width: none !important;
}
/* Drei Aufbau-Knoepfe immer in einer Reihe, auch auf dem kleinen Handy */
.ts-piece-pills {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.ts-piece-pill {
    padding-left: 0.3rem !important;
    padding-right: 0.3rem !important;
}

/* Drei Muster auf dem Tablet nebeneinander statt drei hohe Reihen */
@media (max-width: 960px) and (min-width: 700px) {
    .beg-muster-reihe {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 1.5rem !important;
    }
    .beg-muster,
    .iso-karten-drei .iso-karte {
        display: flex !important;
        flex-direction: column !important;
    }
    .beg-muster figcaption {
        padding: 1rem 0 0 !important;
    }
    .beg-muster-bild {
        aspect-ratio: 1 / 1 !important;
    }
    .beg-waehle {
        width: 100%;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
        font-size: 0.92rem;
    }
}
@media (max-width: 699px) {
    .beg-muster {
        display: block !important;
    }
    .beg-muster-bild {
        aspect-ratio: 16 / 9 !important;
    }
    .beg-muster figcaption {
        padding: 1.1rem 0 0 !important;
    }
}
/* Aufbau-Foto untereinander nicht bildschirmhoch, sondern flach */
@media (max-width: 960px) {
    .beg-aufbau-bild img {
        aspect-ratio: 16 / 9;
    }
}

/* Fragen auf derselben linken Kante wie alle anderen Abschnitte, die vier Gruppen in zwei
   gleich hohen Spalten (vorher eine Spalte in der Mitte, stand eingerueckt gegen den Rest) */
.ts-faq-section .ts-container {
    max-width: 1200px !important;
    padding-left: var(--iso-rand) !important;
    padding-right: var(--iso-rand) !important;
}
@media (min-width: 900px) {
    .ts-faq-section .ts-container {
        display: block !important;
    }
    .ts-faq-categories {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 3rem;
        align-items: start;
    }
}

/* Die feste Kopfzeile liegt ueber dem Seitenanfang: ihr Platz kommt zum oberen Abstand dazu, damit
   oben und unten gleich viel Luft ist (gemessen 30.09.2026: vorher 12 px oben, 96 px unten). */
.beg-kopf {
    padding-top: calc(var(--ts-header-height, 76px) + clamp(2.5rem, 5.5vw, 5.5rem)) !important;
    padding-bottom: clamp(3rem, 5.5vw, 5.5rem) !important;
}

/* ==========================================================================
   Eigene Fusszeile (30.09.2026): Marke | Kontakt mit grosser Nummer | zwei Linkgruppen,
   darunter eine dunklere Leiste mit Rechtlichem und Schwester-Shops. Keine Linien.
   ========================================================================== */
.ts-footer.beg-fuss {
    background: var(--beg-stein-2) !important;
    color: var(--beg-text) !important;
    border: 0 !important;
    padding: 0 !important;
}
.beg-fuss-raster {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem 3.5rem;
    padding-top: 4rem;
    padding-bottom: 3.5rem;
    align-items: start;
}
.beg-fuss-marke p {
    color: #4d5359;
    line-height: 1.6;
    margin: 1rem 0 0;
    max-width: 360px;
}
.beg-fuss .ts-footer-logo,
.beg-fuss .ts-footer-logo:hover {
    color: var(--beg-graphit) !important;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1.35rem;
    text-decoration: none !important;
}
.beg-fuss-titel {
    margin: 0 0 0.6rem;
    font-weight: 700;
    color: var(--beg-graphit);
    font-size: 1rem;
}
.beg-fuss-kontakt p {
    color: #4d5359;
    line-height: 1.6;
    margin: 0.5rem 0 0;
}
a.beg-fuss-tel,
a.beg-fuss-tel:hover {
    display: inline-block;
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    font-weight: 700;
    color: var(--beg-graphit) !important;
    text-decoration: none !important;
    font-variant-numeric: tabular-nums;
}
a.beg-fuss-tel:hover {
    color: var(--beg-bernstein) !important;
}
.beg-fuss-seiten {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}
.beg-fuss-seiten a {
    display: block;
    color: var(--beg-graphit) !important;
    text-decoration: none !important;
    padding: 0.28rem 0;
}
.beg-fuss-seiten a:hover,
.beg-fuss-recht a:hover,
.beg-fuss-schwestern a:hover {
    color: var(--beg-bernstein) !important;
}
.beg-fuss-leiste {
    background: #e2dbcc;
    padding: 1.2rem 0;
}
.beg-fuss-leiste-raster {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem 2.5rem;
}
.beg-fuss-recht {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    font-size: 0.92rem;
    color: #4d5359;
}
.beg-fuss-recht a {
    color: var(--beg-graphit) !important;
    text-decoration: none !important;
}
.beg-fuss-schwestern {
    text-align: right;
}
.beg-fuss-schwestern .ts-footer-schwestern,
.beg-fuss-schwestern .ts-footer-partner {
    opacity: 1 !important;
    color: #4d5359 !important;
    font-size: 0.88rem !important;
    margin: 0 0 0.2rem !important;
    line-height: 1.6 !important;
}
.beg-fuss-schwestern .ts-footer-schwestern a {
    color: var(--beg-graphit) !important;
    text-decoration: none !important;
}
@media (max-width: 960px) {
    .beg-fuss-raster {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .beg-fuss-marke {
        grid-column: 1 / -1;
    }
}
@media (max-width: 620px) {
    .beg-fuss-raster {
        grid-template-columns: 1fr;
        padding-top: 3rem;
        padding-bottom: 2.5rem;
    }
    .beg-fuss-leiste-raster {
        display: block;
    }
    .beg-fuss-schwestern {
        text-align: left;
        margin-top: 0.75rem;
    }
}
@media (min-width: 961px) {
    .beg-fuss-raster {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1.25fr);
    }
}
.beg-fuss-seiten a {
    white-space: normal;
    overflow-wrap: anywhere;
}
/* Fuss: alle drei Spalten beginnen auf derselben Hoehe, die untere Leiste auf dem Tablet untereinander */
.beg-fuss .ts-footer-logo {
    height: 1.6rem;
    line-height: 1;
}
.beg-fuss-titel {
    line-height: 1.6rem;
    height: 1.6rem;
    margin-top: 0 !important;
}
@media (max-width: 960px) {
    .beg-fuss-leiste-raster {
        display: block;
    }
    .beg-fuss-schwestern {
        text-align: left;
        margin-top: 0.75rem;
    }
}
.beg-fuss .ts-footer-logo {
    display: flex !important;
    width: max-content;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center;
}
.beg-fuss-kontakt p.beg-fuss-titel {
    color: var(--beg-graphit);
}
/* Auf der dunkleren Leiste ein dunkleres Bernstein beim Drueberfahren (4,42 war zu wenig) */
.beg-fuss-leiste a:hover,
.beg-fuss-leiste .ts-footer-schwestern a:hover {
    color: var(--beg-bernstein-hover) !important;
}

/* ==========================================================================
   ANFRAGE-FENSTER, 01.10.2026. Es trug noch das Gruen und die Rahmen von isolierglasonline
   (gefunden beim Durchgang nach dem Anschalten). Keine Linien, Felder gefuellt, Bernstein statt Gruen.
   Mit #ts-quote-modal davor, weil quote-modal.css nach dieser Datei kommt und selbst !important setzt.
   ========================================================================== */
#ts-quote-modal {
    --ts-accent: var(--beg-bernstein);
}
#ts-quote-modal .ts-quote-modal-container,
#ts-quote-modal .ts-quote-modal-close,
#ts-quote-modal .ts-quote-summary,
#ts-quote-modal .ts-quote-piece-card,
#ts-quote-modal .ts-quote-phone-contact,
#ts-quote-modal .ts-quote-file-label,
#ts-quote-modal .ts-quote-cancel,
#ts-quote-modal input,
#ts-quote-modal textarea,
#ts-quote-modal select {
    border-color: transparent !important;
}
#ts-quote-modal .ts-quote-modal-header {
    border-bottom-color: transparent !important;
}
#ts-quote-modal .ts-quote-piece-head {
    border-right-color: transparent !important;
}
#ts-quote-modal .ts-quote-piece-price {
    border-top-color: transparent !important;
}
#ts-quote-modal .ts-quote-summary,
#ts-quote-modal .ts-quote-phone-contact,
#ts-quote-modal .ts-quote-modal-close {
    background: var(--beg-stein) !important;
}
#ts-quote-modal .ts-quote-piece-card {
    background: #ffffff !important;
}
#ts-quote-modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#ts-quote-modal textarea,
#ts-quote-modal .ts-quote-file-label {
    background: var(--beg-stein) !important;
}
#ts-quote-modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
#ts-quote-modal textarea:focus {
    background: #ffffff !important;
    border-color: var(--beg-licht) !important;
    box-shadow: none !important;
}
#ts-quote-modal .ts-quote-cancel {
    background: var(--beg-stein-2) !important;
    color: var(--beg-graphit) !important;
}

/* ==========================================================================
   UNTERE LEISTE, 03.10.2026. Hamza: "this part design is fucked?" Rechts stand die Liste der
   Schwester-Shops dreizeilig und rechtsbuendig neben einer einzeiligen Rechtsleiste, mit einem
   Punkt am Zeilenende. Jetzt zwei ruhige Zeilen ueber die volle Breite: oben Rechtliches links und
   Naturholz rechts, darunter die Shops in einer Zeile, ohne Trennpunkte, nur mit Abstand.
   ========================================================================== */
.beg-fuss-leiste-raster {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.55rem 2rem;
}
.beg-fuss-partner {
    margin: 0;
    max-width: none;
    font-size: 0.92rem;
    color: #4d5359;
    text-align: right;
    white-space: nowrap;
}
.beg-fuss-schwestern {
    grid-column: 1 / -1;
    text-align: left !important;
    margin: 0 !important;
}
.beg-fuss-schwestern .ts-footer-schwestern {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 1.25rem;
    margin: 0 !important;
    max-width: none !important;
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
}
.beg-fuss-schwestern .ts-footer-schwestern span[aria-hidden="true"] {
    display: none;
}
@media (max-width: 620px) {
    .beg-fuss-leiste-raster {
        grid-template-columns: 1fr;
    }
    .beg-fuss-partner {
        text-align: left;
        white-space: normal;
    }
}
/* Der runde Nach-oben-Knopf sitzt fest unten rechts (30 px vom Rand, 50 px breit). Am Seitenende lag er
   unter 1200 px Breite auf dem Text der Leiste. Rechts Platz lassen, auf dem Handy unten. */
@media (max-width: 1200px) {
    .beg-fuss-leiste .beg-fuss-leiste-raster {
        padding-right: 92px;
    }
}
@media (max-width: 620px) {
    .beg-fuss-leiste .beg-fuss-leiste-raster {
        padding-right: 16px;
    }
    .beg-fuss-leiste {
        padding-bottom: 5.5rem;
    }
}
/* Unter 960 px untereinander, sonst bricht "Cookies" allein in die zweite Zeile. */
@media (max-width: 960px) {
    .beg-fuss-leiste .beg-fuss-leiste-raster {
        grid-template-columns: 1fr;
    }
    .beg-fuss-partner {
        text-align: left;
    }
}

/* --- 09.10.2026: Tonis Bilder und der Block Sicherheit und Einbau ----------
   Mosaik bekommt unten eine fuenfte, breite Kachel (Glasweg im Garten). Der Sicherheitsblock
   steht unter dem Aufbau: vier weisse Felder auf dem Stein, Abstand statt Linien. */
.beg-mosaik {
    grid-template-areas:
        "treppe boden licht"
        "treppe bruecke bruecke"
        "aussen aussen aussen";
}
.beg-ort-aussen { grid-area: aussen; }
.beg-ort-aussen img { aspect-ratio: 3 / 1; }
.beg-sicher {
    margin-top: 4.5rem;
}
.beg-sicher h3 {
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 700;
    color: var(--beg-graphit);
    margin: 0 0 1.5rem;
}
.beg-sicher-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}
.beg-sicher-liste li {
    background: #ffffff;
    border-radius: 4px;
    padding: 1.5rem 1.4rem;
    line-height: 1.55;
    color: var(--beg-leise);
    font-size: 0.97rem;
}
.beg-sicher-liste strong {
    display: block;
    color: var(--beg-graphit);
    font-size: 1.08rem;
    margin: 0 0 0.5rem;
}
@media (max-width: 960px) {
    .beg-mosaik {
        grid-template-areas:
            "treppe boden"
            "treppe licht"
            "bruecke bruecke"
            "aussen aussen";
    }
    .beg-ort-aussen img { aspect-ratio: 2.3 / 1; }
    .beg-sicher-liste {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 620px) {
    .beg-mosaik {
        grid-template-areas:
            "treppe"
            "boden"
            "licht"
            "bruecke"
            "aussen";
    }
    .beg-ort-aussen img { aspect-ratio: 3 / 2; }
    .beg-sicher {
        margin-top: 3rem;
    }
    .beg-sicher-liste {
        grid-template-columns: 1fr;
    }
}

/* --- 09.10.2026: neues Logo -------------------------------------------------
   Hamza: "the current logo looks fucked? and not accordingly to this site?" Die drei Balken sahen
   neben dem Menueknopf am Handy aus wie ein zweiter Menueknopf, die Schrift war nicht Barlow.
   Jetzt eine dicke Glasplatte von der Ecke: Oberseite Bernstein, an der Seite die drei Glaslagen
   (Hamza waehlte Variante B). Name in Barlow, "Glas" im Bernsteinbraun. */
a.ts-logo.iso-logo,
.ts-footer a.iso-logo {
    gap: 0.6rem !important;
    font-family: 'Barlow', var(--iso-font) !important;
}
.beg-logo-zeichen {
    display: block;
    flex: none;
    width: 30px;
    height: 30px;
}
.beg-logo-zeichen svg {
    display: block;
    width: 100%;
    height: 100%;
}
a.iso-logo .beg-logo-wort {
    font-family: 'Barlow', var(--iso-font) !important;
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
    color: var(--beg-graphit) !important;
}
a.iso-logo .beg-logo-wort b {
    font-weight: 600 !important;
    color: var(--beg-bernstein) !important;
}
@media (max-width: 620px) {
    .beg-logo-zeichen {
        width: 28px;
        height: 28px;
    }
    a.iso-logo .beg-logo-wort {
        font-size: 1.3rem !important;
    }
}
/* Menue und Telefonknopf in der Kopfzeile ebenfalls in Barlow (header.css setzt dort die alte Schrift). */
.ts-header .ts-nav-menu a,
.ts-header .ts-header-phone,
.ts-header .ts-header-phone-text,
.ts-mobile-menu a {
    font-family: 'Barlow', var(--iso-font) !important;
}

/* Worte unter einer Mosaik-Kachel, die auf ihre Ratgeberseite verlinken (14.10.2026). Ohne Unterstrich, wie die Links im Ratgeber. */
.beg-ort figcaption a {
    color: var(--beg-bernstein) !important;
    font-weight: 600;
    text-decoration: none !important;
}
.beg-ort figcaption a:hover,
.beg-ort figcaption a:focus-visible {
    color: var(--beg-bernstein-hover) !important;
}

/* Worte auf der Startseite, die auf eine Ratgeberseite verlinken (beg_rat_link, 14.10.2026) */
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;
}

/* Guide navigation shares the current site typography and colors. */
.ts-nav{gap:24px}.ts-nav-menu{gap:24px}
.beg-guide-menu{position:relative;color:var(--beg-graphit,#1d2125);font-family:'Barlow',sans-serif}
.beg-guide-menu summary{display:flex;align-items:center;gap:9px;list-style:none;cursor:pointer;padding:8px 0;font-size:.9rem;font-weight:500;white-space:nowrap}
.beg-guide-menu summary::-webkit-details-marker{display:none}
.beg-guide-menu summary::after{content:'';width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin-top:-4px}
.beg-guide-menu[open] summary::after{transform:rotate(225deg);margin-top:3px}
.beg-guide-menu summary:focus-visible,.beg-guide-links a:focus-visible{outline:2px solid #8a5700;outline-offset:4px}
.beg-guide-links{position:absolute;top:calc(100% + 18px);left:0;margin:0;padding:8px 0;min-width:260px;max-height:70vh;overflow:auto;list-style:none;background:#fff;box-shadow:0 10px 28px #1d21251c;border:1px solid #e6e2d9;border-radius:4px;z-index:10010}
.beg-guide-links a{display:block;color:#1d2125;text-decoration:none;font-size:.95rem;line-height:1.35;padding:11px 16px}
.beg-guide-links a:hover{background:#f5f1e8;color:#8a5700}
.ts-mobile-nav-inner .beg-guide-menu{margin-top:12px;border-bottom:1px solid #e6e2d9}
.ts-mobile-nav-inner .beg-guide-menu summary{justify-content:flex-start;padding:16px 0;font-size:1.125rem;font-weight:600}
.ts-mobile-nav-inner .beg-guide-links{position:static;min-width:0;max-height:none;margin:0 0 16px;border:0;box-shadow:none;background:transparent}
.ts-mobile-nav-inner .beg-guide-links a{text-align:left;padding:11px 16px}

/* 23 October 2026: compact surface comparison and readable planning context. */
.beg-surface-comparison{padding:4.5rem 0}
.beg-surface-comparison .beg-abschnitt-kopf{margin-bottom:2rem}
.beg-surface-comparison .beg-muster-reihe{gap:2rem}
.beg-surface-comparison .beg-muster-bild{aspect-ratio:4/3!important}
.beg-surface-comparison .beg-muster-bild img{object-fit:cover}
.beg-surface-comparison .beg-muster h3{line-height:1.3}
.beg-surface-comparison .beg-muster figcaption>p{margin-bottom:1rem}
.beg-surface-comparison .beg-muster figcaption>p.beg-muster-preis{margin-top:auto}
.beg-surface-comparison .beg-waehle{min-height:44px;max-width:100%;white-space:normal}
.beg-surface-delivery{font-size:.94rem;line-height:1.5;color:var(--beg-leise);margin:1.5rem 0 0;max-width:74ch}
.beg-surface-disclosure{font-size:.84rem;line-height:1.5;color:var(--beg-leise);margin:.5rem 0 0;max-width:74ch}
.beg-plan-hint{font-size:.9rem;line-height:1.5;color:var(--beg-leise);margin:.5rem 0 0}
.beg-surface-comparison .beg-waehle:focus-visible,.ts-piece-color:focus-visible,.ts-piece-pill:focus-visible{outline:2px solid var(--beg-bernstein-hover,#8a5700);outline-offset:3px}
@media(max-width:960px) and (min-width:700px){
 .beg-surface-comparison .beg-muster-reihe{gap:1.5rem!important}
 .beg-surface-comparison .beg-muster-bild{aspect-ratio:4/3!important}
}
@media(max-width:699px){
 .beg-surface-comparison{padding:3rem 0}
 .beg-surface-comparison .beg-abschnitt-kopf{margin-bottom:1.75rem}
 .beg-surface-comparison .beg-muster-reihe{gap:2rem}
 .beg-surface-comparison .beg-muster{display:grid!important;grid-template-columns:96px minmax(0,1fr);gap:1rem;align-items:start}
 .beg-surface-comparison .beg-muster-bild{aspect-ratio:1/1!important}
 .beg-surface-comparison .beg-muster figcaption{padding:0!important;display:block}
 .beg-surface-comparison .beg-muster h3{font-size:1.125rem;line-height:1.3;margin:0 0 .4rem}
 .beg-surface-comparison .beg-muster figcaption>p{font-size:.95rem;line-height:1.5;margin:0}
 .beg-surface-comparison .beg-muster figcaption>p.beg-muster-preis{font-size:1.25rem;line-height:1.3;margin:.8rem 0}
 .beg-surface-comparison .beg-muster-preis small{font-size:.8rem;margin-top:.25rem}
 .beg-surface-comparison .beg-waehle{font-size:.9rem;padding:.75rem 1rem}
 .beg-surface-delivery{margin-top:1.5rem;font-size:.88rem}
}
@media(max-width:359px){.beg-surface-comparison .beg-muster{grid-template-columns:80px minmax(0,1fr);gap:.75rem}}