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

   Eigener Aufbau wie ein Magazin, nicht der von begehbaresglas (Graphitband, Foto ragt heraus,
   Datenblatt mitlaufend, Karten) und nicht der von isolierglasonline (geteilter Kopf):
   Ueberschrift mittig auf Creme, das Foto breit und rund darunter, ein weinrotes Band mit den
   Fakten nebeneinander, Text in einer Lesespalte, Beispiele als Zeilen, Planung in drei Spalten.
   Farben und Schrift aus gt.css (--gt-*), Manrope vom eigenen Server, runde Ecken 14 px.

   Keine Linien, keine Rahmen, keine Unterstreichung, keine kleinen Zeilen ueber Ueberschriften,
   keine Kaesten mit farbigem Rand (Hamza 27. und 30.09.2026). Getrennt wird mit Abstand und Flaeche.
   ========================================================================== */

.gt-rg {
    background: #ffffff;
    color: var(--gt-text);
}
.gt-rg h2 {
    font-family: var(--gt-font);
    font-size: clamp(1.55rem, 2.6vw, 2.1rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--gt-tinte);
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
}
.gt-rg-leise {
    color: var(--gt-leise);
    max-width: 700px;
    margin: 0 0 1.75rem;
    line-height: 1.6;
}
.gt-rg a {
    text-decoration: none !important;
}

/* --- Knoepfe: gefuellt und rund, nie umrandet ------------------------------- */
.gt-rg-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.8rem 1.6rem;
    border-radius: 999px;
    background: var(--gt-wein);
    color: #ffffff !important;
    font-weight: 700;
    font-size: 1rem;
    border: 0;
    transition: background 0.15s ease;
}
.gt-rg-knopf:hover {
    background: var(--gt-wein-dunkel);
}
.gt-rg-knopf-leise {
    background: var(--gt-sand);
    color: var(--gt-tinte) !important;
}
.gt-rg-knopf-leise:hover {
    background: var(--gt-sand-2);
}

/* --- Brotkrumen unter dem festen Kopf --------------------------------------- */
.gt-rg-pfad {
    margin-top: var(--ts-header-height, 76px);
    background: var(--gt-creme);
    font-size: 0.9rem;
    color: var(--gt-leise);
}
.gt-rg-pfad .gt-breite {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 0.55rem;
    padding-top: 1rem;
    padding-bottom: 0.25rem;
}
.gt-rg-pfad a {
    color: var(--gt-wein);
    font-weight: 700;
}
.gt-rg-pfad a:hover {
    color: var(--gt-wein-dunkel) !important;
}
.gt-rg-pfad [aria-current] {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* --- Kopf: Ueberschrift mittig, Foto breit darunter --------------------------- */
.gt-rg-kopf {
    background: linear-gradient(var(--gt-creme) 0, var(--gt-creme) 72%, #ffffff 72%);
    padding: clamp(1.75rem, 4vw, 3.25rem) 0 0;
}
.gt-rg-kopf-text {
    text-align: center;
    max-width: 860px;
}
.gt-rg-kopf h1 {
    font-family: var(--gt-font);
    font-size: clamp(2rem, 4.4vw, 3.3rem);
    font-weight: 800;
    line-height: 1.07;
    letter-spacing: -0.025em;
    color: var(--gt-tinte);
    margin: 0 0 1.1rem;
}
.gt-rg-vorspann {
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    line-height: 1.62;
    color: var(--gt-text);
    max-width: 720px;
    margin: 0 auto 1.6rem;
}
.gt-rg-knoepfe {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
}
.gt-rg-bild {
    margin: 0 auto;
}
.gt-rg-bild img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 520;
    object-fit: cover;
    border-radius: 22px;
}
.gt-rg-proben {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    background: #ffffff;
    border-radius: 22px;
    padding: 1.5rem;
    box-shadow: 0 10px 40px rgba(31, 36, 34, 0.08);
}
.gt-rg-probe svg {
    display: block;
    width: 100%;
    height: auto;
}
.gt-rg-probe p {
    margin: 0.6rem 0 0;
    font-weight: 700;
    color: var(--gt-tinte);
    text-align: center;
}

/* --- Weinrotes Band: die Fakten nebeneinander -------------------------------- */
.gt-rg-band {
    background: #ffffff;
    padding: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}
.gt-rg-band .gt-breite > * {
    background: var(--gt-wein);
    color: #ffffff;
}
.gt-rg-band-titel {
    font-size: 1.05rem !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 1.4rem 1.75rem 0;
    border-radius: 22px 22px 0 0;
    letter-spacing: 0 !important;
}
.gt-rg-fakten {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem 1.75rem;
    margin: 0;
    padding: 1.1rem 1.75rem 1.6rem;
    border-radius: 0 0 22px 22px;
}
.gt-rg-fakten dt {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 0.25rem;
}
.gt-rg-fakten dd {
    margin: 0;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.4;
    color: #ffffff;
}

/* --- Text: eine Lesespalte ---------------------------------------------------- */
.gt-rg-text {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(2.5rem, 5vw, 4rem) var(--iso-rand, 24px) clamp(2rem, 4vw, 3rem);
    font-size: 1.08rem;
    line-height: 1.72;
}
.gt-rg-text h2 {
    margin-top: 2.4rem;
}
.gt-rg-text h2:first-child {
    margin-top: 0;
}
.gt-rg-text h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--gt-tinte);
    margin: 1.75rem 0 0.5rem;
}
.gt-rg-text p,
.gt-rg-text ul,
.gt-rg-text ol {
    margin: 0 0 1.1rem;
}
.gt-rg-text ul,
.gt-rg-text ol {
    padding-left: 1.3rem;
}
.gt-rg-text li {
    margin: 0 0 0.45rem;
}
.gt-rg-text a,
a.gt-rg-wortlink {
    color: var(--gt-wein) !important;
    font-weight: 700;
    text-decoration: none !important;
}
.gt-rg-text a:hover,
a.gt-rg-wortlink:hover,
a.gt-rg-wortlink:focus-visible {
    color: var(--gt-wein-dunkel) !important;
}
.gt-rg-text a.gt-rg-knopf {
    background: var(--gt-wein);
    color: #ffffff !important;
}
.gt-rg-text a.gt-rg-knopf:hover {
    color: #ffffff !important;
}
.gt-rg-text a.gt-rg-knopf:hover {
    background: var(--gt-wein-dunkel);
}
.gt-rg-text-weg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin: 2.25rem 0 0 !important;
    padding: 1.4rem 1.5rem;
    background: var(--gt-creme);
    border-radius: var(--gt-rund);
}
.gt-rg-text a.gt-rg-anfrage {
    color: var(--gt-wein) !important;
}
.gt-rg-tel {
    color: var(--gt-leise);
    font-size: 0.98rem;
}
.gt-rg-tel a {
    white-space: nowrap;
}

/* Tabellen aus dem Rechner: Zeilen durch Flaeche getrennt, am Handy jede Zeile ein Block */
.gt-rg-tabelle-rahmen {
    margin: 1.4rem 0 0.5rem;
    overflow-x: auto;
}
.gt-rg-tabelle {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
    font-size: 0.98rem;
    line-height: 1.45;
}
.gt-rg-tabelle th,
.gt-rg-tabelle td {
    border: 0 !important;
    padding: 0.75rem 0.9rem;
    text-align: left;
    vertical-align: top;
}
.gt-rg-tabelle thead th {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--gt-leise);
    background: none;
    padding-top: 0;
    padding-bottom: 0.2rem;
}
.gt-rg-tabelle tbody th,
.gt-rg-tabelle tbody td {
    background: var(--gt-creme);
}
.gt-rg-tabelle tbody th {
    font-weight: 800;
    color: var(--gt-tinte);
    border-radius: 12px 0 0 12px;
}
.gt-rg-tabelle-unter {
    display: block;
    font-size: 0.88rem;
    color: var(--gt-leise);
    margin-top: 0.15rem;
}
.gt-rg-tabelle tbody td:last-child {
    border-radius: 0 12px 12px 0;
}
.gt-rg-qm {
    font-weight: 800;
    color: var(--gt-wein);
    white-space: nowrap;
}
.gt-rg-tabelle-fuss {
    font-size: 0.92rem;
    color: var(--gt-leise);
    margin: 0.2rem 0 1.4rem !important;
}

/* --- Beispiele als Zeilen ------------------------------------------------------ */
.gt-rg-beispiele {
    background: var(--gt-sand);
    padding: clamp(2.75rem, 5vw, 4.25rem) 0;
    scroll-margin-top: calc(var(--ts-header-height, 76px) + 8px);
}
.gt-rg-zeilen {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}
.gt-rg-zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1.25rem;
    background: #ffffff;
    border-radius: var(--gt-rund);
    padding: 1rem 1rem 1rem 1.4rem;
}
.gt-rg-zeile-wofuer {
    margin: 0 0 0.2rem;
    font-weight: 800;
    color: var(--gt-tinte);
    font-size: 1.05rem;
}
.gt-rg-zeile-daten {
    margin: 0;
    color: var(--gt-leise);
    font-size: 0.95rem;
}
.gt-rg-zeile-preis {
    margin: 0;
    text-align: right;
}
.gt-rg-preis {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--gt-wein);
    white-space: nowrap;
}
.gt-rg-uebernehmen {
    min-height: 44px;
    padding: 0.6rem 1.15rem;
    border: 0;
    border-radius: 999px;
    background: var(--gt-creme);
    color: var(--gt-tinte);
    font-family: var(--gt-font);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.gt-rg-uebernehmen:hover,
.gt-rg-uebernehmen:focus-visible {
    background: var(--gt-wein);
    color: #ffffff;
}

/* --- Planung und Einbau: drei Spalten ------------------------------------------ */
.gt-rg-planung {
    background: #ffffff;
    padding: clamp(2.75rem, 5vw, 4.25rem) 0;
}
.gt-rg-planung-raster {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 1.25rem;
}
.gt-rg-planung-punkt {
    background: var(--gt-creme);
    border-radius: 18px;
    padding: 1.5rem 1.5rem 1.35rem;
}
.gt-rg-planung-punkt h3 {
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--gt-wein);
    margin: 0 0 0.55rem;
}
.gt-rg-planung-punkt p {
    margin: 0;
    line-height: 1.6;
    font-size: 0.99rem;
}

/* --- Fragen -------------------------------------------------------------------- */
.gt-rg-fragen {
    background: #ffffff;
    padding: clamp(2.75rem, 5vw, 4.25rem) 0;
    scroll-margin-top: calc(var(--ts-header-height, 76px) + 8px);
}
.gt-rg-schmal {
    max-width: 860px;
}
.gt-rg-frage {
    background: var(--gt-creme);
    border-radius: var(--gt-rund);
    margin: 0 0 0.6rem;
}
.gt-rg-frage summary {
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 3.2rem 1.1rem 1.4rem;
    font-weight: 700;
    color: var(--gt-tinte);
    position: relative;
    font-size: 1.04rem;
}
.gt-rg-frage summary::-webkit-details-marker {
    display: none;
}
.gt-rg-frage summary::after {
    content: '+';
    position: absolute;
    right: 1.3rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gt-wein);
}
.gt-rg-frage[open] summary::after {
    content: '\2212';
}
.gt-rg-antwort {
    padding: 0 1.4rem 1.15rem;
    line-height: 1.65;
}
.gt-rg-antwort p {
    margin: 0 0 0.6rem;
}

/* --- Weiterlesen mit Bild ------------------------------------------------------- */
.gt-rg-weiter {
    background: var(--gt-creme);
    padding: clamp(2.75rem, 5vw, 4.25rem) 0;
}
.gt-rg-weiter-reihe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: 1.25rem;
}
.gt-rg-weiter-karte {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    color: var(--gt-text) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gt-rg-weiter-karte:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(31, 36, 34, 0.1);
}
.gt-rg-weiter-karte img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.gt-rg-weiter-karte strong {
    display: block;
    padding: 1.1rem 1.25rem 0.3rem;
    font-size: 1.08rem;
    color: var(--gt-wein);
}
.gt-rg-weiter-karte span {
    display: block;
    padding: 0 1.25rem 1.25rem;
    line-height: 1.55;
    font-size: 0.97rem;
}

/* --- Schmale Fenster ------------------------------------------------------------- */
@media (max-width: 900px) {
    .gt-rg-planung-raster {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 700px) {
    .gt-rg-kopf-text {
        text-align: left;
    }
    .gt-rg-vorspann {
        margin-left: 0;
    }
    .gt-rg-knoepfe {
        justify-content: flex-start;
    }
    .gt-rg-bild img {
        aspect-ratio: 4 / 3;
        border-radius: 16px;
    }
    .gt-rg-band-titel {
        padding: 1.2rem 1.25rem 0;
    }
    .gt-rg-fakten {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        padding: 1rem 1.25rem 1.35rem;
        gap: 1rem 1.1rem;
    }
    .gt-rg-zeile {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 1rem 1.1rem;
        gap: 0.6rem 1rem;
    }
    .gt-rg-zeile-was {
        grid-column: 1 / -1;
    }
    .gt-rg-zeile-preis {
        text-align: left;
    }
    .gt-rg-tabelle thead {
        display: none;
    }
    .gt-rg-tabelle,
    .gt-rg-tabelle tbody,
    .gt-rg-tabelle tr,
    .gt-rg-tabelle th,
    .gt-rg-tabelle td {
        display: block;
        width: auto;
    }
    .gt-rg-tabelle {
        border-spacing: 0;
    }
    .gt-rg-tabelle tr {
        background: var(--gt-creme);
        border-radius: 12px;
        margin: 0 0 0.6rem;
        padding: 0.4rem 0;
    }
    .gt-rg-tabelle tbody th,
    .gt-rg-tabelle tbody td,
    .gt-rg-tabelle tbody td:last-child {
        background: none;
        border-radius: 0;
        padding: 0.3rem 1rem;
        white-space: normal;
    }
    .gt-rg-tabelle tbody td::before {
        content: attr(data-titel) ': ';
        color: var(--gt-leise);
        font-weight: 600;
    }
}
@media (max-width: 420px) {
    .gt-rg-fakten {
        grid-template-columns: minmax(0, 1fr);
    }
}