/* =========================================================
   Irishdog.de – Ratgeber: Hitze beim Hund
   Nur seitenbezogene Regeln.
   Die globalen Irishdog-Styles bleiben unverändert.
   ========================================================= */

.page-hitze-hund .hero {
    --hero-image: url('/project/images/ratgeber/hitze-hund/hitze-hund-sommer.webp');
    --hero-image-mobile: url('/project/images/ratgeber/hitze-hund/hitze-hund-sommer.webp');
}

.page-hitze-hund .hero h1 {
    font-size: 3.5rem;
}

/* ---------------------------------------------------------
   SECTION-SPACING
   Verhindert das Aufaddieren großer Abstände zwischen
   aufeinanderfolgenden Content-Sektionen.
   --------------------------------------------------------- */

.page-hitze-hund .heat-section .container,
.page-hitze-hund .heat-section .container3 {
    margin-bottom: 0;
}

.page-hitze-hund .heat-section .container {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.page-hitze-hund .heat-section .container3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Zwischen direkt aufeinanderfolgenden Content-Sektionen kompakter */
.page-hitze-hund .heat-section + .heat-section .container,
.page-hitze-hund .heat-section + .heat-section .container3 {
    padding-top: 2rem;
}

/* Der Abstand zur Bildsektion soll optisch dem normalen Seitenrhythmus folgen */
.page-hitze-hund .heat-before-image .container {
    padding-bottom: 3rem;
}

.page-hitze-hund .city-content-image {
    --city-content-image-desktop: url('/project/images/ratgeber/hitze-hund/hitze-hund-turm.webp');
    --city-content-image-mobile: url('/project/images/ratgeber/hitze-hund/hitze-hund-turm.webp');
    margin: 0;
}

.page-hitze-hund .heat-after-image .container3 {
    padding-top: 3rem;
}

/* ---------------------------------------------------------
   TEMPERATURTABELLE
   --------------------------------------------------------- */

.page-hitze-hund .heat-chart-wrap {
    position: relative;
    width: 100%;
    margin: 1.6rem 0 .9rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    background: #f5f5f5;
}

.page-hitze-hund .heat-chart {
    width: 780px;
    max-width: 100%;
    min-width: 0;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0 4px;
    table-layout: fixed;
    font-size: 1.2rem;
    line-height: 1.1;
}

.page-hitze-hund .heat-chart tr {
    height: auto;
}

.page-hitze-hund .heat-chart th,
.page-hitze-hund .heat-chart td {
    height: auto;
    padding: 9px 7px;
    text-align: center;
    vertical-align: middle;
    line-height: 1.1;
    border: 0;
    border-right: 4px solid #f5f5f5;
    border-radius: 7px;
    background-clip: padding-box;
}

/* Kein sichtbarer Spalt am rechten Tabellenende */
.page-hitze-hund .heat-chart th:last-child,
.page-hitze-hund .heat-chart td:last-child {
    border-right: 0;
}

.page-hitze-hund .heat-chart thead th {
    padding: 11px 6px;
    background: #315846;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
}

.page-hitze-hund .heat-chart .outside-temp {
    background: #eef1ec;
    color: #26342b;
    font-weight: 700;
}

.page-hitze-hund .heat-chart .heat-green {
    background: #8db66b;
    color: #172416;
    font-weight: 700;
}

.page-hitze-hund .heat-chart .heat-yellow {
    background: #e9d45e;
    color: #29240e;
    font-weight: 700;
}

.page-hitze-hund .heat-chart .heat-orange {
    background: #e9a34e;
    color: #301e09;
    font-weight: 700;
}

.page-hitze-hund .heat-chart .heat-red {
    background: #d95d4f;
    color: #fff;
    font-weight: 700;
}

.page-hitze-hund .heat-chart .temp-number {
    display: block;
    margin: 0 0 5px;
    font-size: 20px;
    line-height: 1;
    font-weight: 800;
}

.page-hitze-hund .heat-chart .temp-label {
    display: block;
    margin: 0;
    font-size: 12px;
    line-height: 1.1;
    font-weight: 600;
    opacity: .95;
}

/* ---------------------------------------------------------
   STICKY AUSSENTEMPERATUR
   border-spacing horizontal = 0 verhindert, dass beim
   horizontalen Scrollen links ein Streifen der nächsten
   Tabellenzellen unter der Sticky-Spalte sichtbar wird.
   --------------------------------------------------------- */

.page-hitze-hund .heat-chart thead th:first-child,
.page-hitze-hund .heat-chart tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 5;
}

.page-hitze-hund .heat-chart thead th:first-child {
    background: #315846;
}

.page-hitze-hund .heat-chart tbody td:first-child {
    background: #eef1ec;
}

/* Eine deckende Kante verhindert zusätzlich Subpixel-Blitzer beim Scrollen */
.page-hitze-hund .heat-chart thead th:first-child::after,
.page-hitze-hund .heat-chart tbody td:first-child::after {
    content: "";
    position: absolute;
    top: 0;
    right: -4px;
    width: 4px;
    height: 100%;
    background: #f5f5f5;
    pointer-events: none;
}

/* ---------------------------------------------------------
   LEGENDE / HINWEISE
   --------------------------------------------------------- */

.page-hitze-hund .heat-key {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 14px;
    margin: .8rem 0 1rem;
    font-size: 14px;
    line-height: 1.2;
}

.page-hitze-hund .heat-key span {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 20px;
    margin: 0;
}

.page-hitze-hund .heat-key i {
    display: inline-block;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    margin: 0;
    border-radius: 4px;
}

.page-hitze-hund .heat-key .key-green { background: #8db66b; }
.page-hitze-hund .heat-key .key-yellow { background: #e9d45e; }
.page-hitze-hund .heat-key .key-orange { background: #e9a34e; }
.page-hitze-hund .heat-key .key-red { background: #d95d4f; }

.page-hitze-hund .heat-chart-note {
    margin-top: 1.5rem;
}

.page-hitze-hund .heat-chart-note > p {
    margin: 0 0 1.35rem;
}

.page-hitze-hund .heat-chart-note > p:last-child {
    margin-bottom: 0;
}

.page-hitze-hund .heat-subheading {
    margin-top: 2rem;
    margin-bottom: .85rem;
    line-height: 1.35;
}

.page-hitze-hund .heat-subheading:first-child {
    margin-top: 0;
}

.page-hitze-hund .heat-subheading b {
    display: inline-block;
    margin: 0;
}

.page-hitze-hund .heat-source-links {
    margin-top: .35rem;
}

.page-hitze-hund .heat-source-links a {
    display: inline-block;
    margin-bottom: .45rem;
}

.page-hitze-hund .heat-source-heading {
    margin-top: 2rem;
}

/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

.page-hitze-hund .hero .cta .btn {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
}

.page-hitze-hund a.btn.source-btn {
    display: inline-block;
    width: fit-content;
    min-width: 0;
    max-width: 100%;
    flex: none;
    align-self: auto;
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .page-hitze-hund .hero::before {
        background-image:
            linear-gradient(
                135deg,
                rgba(56, 102, 65, 0.7) 0%,
                rgba(242, 232, 207, 0.5) 100%
            ),
            var(--hero-image-mobile);
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .page-hitze-hund .heat-section .container,
    .page-hitze-hund .heat-section .container3 {
        padding-top: 2.2rem;
        padding-bottom: 2.2rem;
    }

    .page-hitze-hund .heat-section + .heat-section .container,
    .page-hitze-hund .heat-section + .heat-section .container3 {
        padding-top: 1.4rem;
    }

    .page-hitze-hund .heat-before-image .container {
        padding-bottom: 2.2rem;
    }

    .page-hitze-hund .heat-after-image .container3 {
        padding-top: 2.2rem;
    }

    .page-hitze-hund .heat-chart-wrap {
        margin: 1.2rem 0 .7rem;
        padding-bottom: 4px;
    }

    .page-hitze-hund .heat-chart {
        width: 590px;
        max-width: none;
        min-width: 590px;
        margin: 0;
        border-spacing: 0 3px;
    }

    .page-hitze-hund .heat-chart th,
    .page-hitze-hund .heat-chart td {
        padding: 8px 5px;
        border-right-width: 3px;
        border-radius: 6px;
    }

    .page-hitze-hund .heat-chart thead th {
        padding: 10px 5px;
        font-size: 13px;
    }

    .page-hitze-hund .heat-chart .temp-number {
        margin-bottom: 4px;
        font-size: 19px;
    }

    .page-hitze-hund .heat-chart .temp-label {
        font-size: 12px;
    }

    .page-hitze-hund .heat-chart thead th:first-child::after,
    .page-hitze-hund .heat-chart tbody td:first-child::after {
        right: -3px;
        width: 3px;
    }

    .page-hitze-hund .heat-key {
        grid-template-columns: 1fr;
        gap: 2px;
        margin: .55rem 0 .8rem;
        font-size: 13px;
    }

    .page-hitze-hund .heat-key span {
        min-height: 18px;
        line-height: 1.15;
    }

    .page-hitze-hund .heat-key i {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
    }

    .page-hitze-hund .hero .cta {
        align-items: flex-start;
    }

    .page-hitze-hund .hero .cta .btn,
    .page-hitze-hund a.btn.source-btn {
        width: auto;
        min-width: 0;
        max-width: calc(100vw - 60px);
    }
}

/* ---------------------------------------------------------
   FIX MOBILE STICKY-SPALTE
   Verhindert, dass beim horizontalen Scrollen an der linken
   Kante farbige Zellen hinter der fixierten Außenspalte
   durch die abgerundeten Ecken sichtbar werden.
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .page-hitze-hund .heat-chart thead th:first-child,
    .page-hitze-hund .heat-chart tbody td:first-child {
        left: -1px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        background-clip: border-box;
    }

    .page-hitze-hund .heat-chart thead th:first-child::before,
    .page-hitze-hund .heat-chart tbody td:first-child::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -3px;
        width: 4px;
        pointer-events: none;
        z-index: 1;
    }

    .page-hitze-hund .heat-chart thead th:first-child::before {
        background: #315846;
    }

    .page-hitze-hund .heat-chart tbody td:first-child::before {
        background: #eef1ec;
    }
}