/* MeerHeimatLiebe – Tidenplaner
 * Eigenständige Designschicht auf Basis des Küstenkodex-Designsystems.
 */

.tide-page-shell {
    display: grid;
    gap: clamp(18px, 2.2vw, 28px);
    width: min(1180px, 100%);
    margin-inline: auto;
}

.tide-page-shell .tide-board,
.tide-page-shell .tide-explainer {
    border: 1px solid rgba(123, 221, 236, .22);
    border-radius: 19px;
    background: linear-gradient(
        145deg,
        rgba(8, 62, 82, .62),
        rgba(1, 29, 44, .72)
    );
    box-shadow:
        0 12px 28px rgba(0, 14, 24, .16),
        inset 0 1px 0 rgba(255, 255, 255, .03);
}

/* Hauptbereich */
.tide-page-shell .tide-board {
    padding: clamp(22px, 2.35vw, 32px) !important;
}

.tide-page-shell .tide-board__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, .38fr);
    align-items: start;
    gap: clamp(22px, 3vw, 42px);
    margin-bottom: clamp(18px, 2vw, 28px);
}

.tide-page-shell .tide-board__head h2 {
    margin: .35rem 0 .75rem;
}

.tide-page-shell .tide-board__head > div:first-child > p:not(.eyebrow):not(.tide-warning) {
    max-width: 74ch;
    color: rgba(235, 248, 250, .80);
    line-height: 1.78;
}

/* Status */
.tide-page-shell .tide-status {
    padding: 1.15rem 1.25rem;
    border: 1px solid rgba(123, 221, 236, .22);
    border-radius: 16px;
    background: rgba(1, 27, 42, .54);
}

.tide-page-shell .tide-status strong {
    display: block;
    color: #fff;
}

.tide-page-shell .tide-status span {
    display: block;
    margin-top: .4rem;
    color: rgba(231, 246, 249, .72);
    line-height: 1.55;
}

/* Warnhinweis */
.tide-page-shell .tide-warning {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin-top: 1rem;
    padding: .9rem 1rem;
    border: 1px solid rgba(242, 201, 120, .30);
    border-left: 4px solid #e5b967;
    border-radius: 0 16px 16px 0;
    color: #f4d99c;
    background: rgba(229, 185, 103, .08);
    line-height: 1.6;
}

/* Aktuelle Werte */
.tide-page-shell .tide-board__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 1.5vw, 22px) !important;
    margin-bottom: clamp(18px, 2vw, 28px);
}

.tide-page-shell .tide-now {
    min-width: 0;
    padding: clamp(22px, 2.35vw, 32px);
    border: 1px solid rgba(123, 221, 236, .22);
    border-radius: 19px;
    background: linear-gradient(
        145deg,
        rgba(8, 62, 82, .62),
        rgba(1, 29, 44, .72)
    );
    box-shadow:
        0 12px 28px rgba(0, 14, 24, .16),
        inset 0 1px 0 rgba(255, 255, 255, .03);
}

.tide-page-shell .tide-now h3 {
    margin: 0 0 1rem;
    color: #fff;
}

.tide-page-shell .tide-now dl {
    display: grid;
    gap: .7rem;
    margin: 0;
}

.tide-page-shell .tide-now dl > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-top: .7rem;
    border-top: 1px solid rgba(123, 221, 236, .14);
}

.tide-page-shell .tide-now dl > div:first-child {
    padding-top: 0;
    border-top: 0;
}

.tide-page-shell .tide-now dt {
    color: rgba(231, 246, 249, .72);
}

.tide-page-shell .tide-now dd {
    margin: 0;
    color: #fff;
    font-weight: 800;
    text-align: right;
}

/* Tabelle */
.tide-page-shell .tide-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(123, 221, 236, .22) !important;
    border-radius: 19px;
    background: rgba(1, 27, 42, .42);
}

.tide-page-shell .tide-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent !important;
}

.tide-page-shell .tide-table th,
.tide-page-shell .tide-table td {
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(123, 221, 236, .14);
    text-align: left;
}

.tide-page-shell .tide-table th {
    color: #fff;
    font-weight: 800;
    white-space: nowrap;
}

.tide-page-shell .tide-table td {
    color: rgba(231, 246, 249, .78);
}

.tide-page-shell .tide-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Erklärbereich */
.tide-page-shell .tide-explainer {
    padding: clamp(22px, 2.35vw, 32px) !important;
}

.tide-page-shell .tide-explainer > div:first-child {
    margin-bottom: clamp(18px, 2vw, 28px);
}

.tide-page-shell .tide-explainer h2 {
    margin: .35rem 0 0;
}

.tide-page-shell .tide-explainer__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.5vw, 22px);
}

.tide-page-shell .tide-explainer__grid article {
    min-width: 0;
    padding: clamp(22px, 2.35vw, 32px);
    border: 1px solid rgba(123, 221, 236, .22);
    border-radius: 19px;
    background: linear-gradient(
        145deg,
        rgba(8, 62, 82, .62),
        rgba(1, 29, 44, .72)
    );
    box-shadow:
        0 12px 28px rgba(0, 14, 24, .16),
        inset 0 1px 0 rgba(255, 255, 255, .03);
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.tide-page-shell .tide-explainer__grid article:hover {
    transform: translateY(-2px);
    border-color: rgba(123, 221, 236, .42);
    background: linear-gradient(
        145deg,
        rgba(10, 72, 94, .70),
        rgba(2, 35, 51, .80)
    );
}

.tide-page-shell .tide-explainer__grid .icon {
    color: #82e3ee;
    margin-bottom: .65rem;
}

.tide-page-shell .tide-explainer__grid h3 {
    margin: .25rem 0 .6rem;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
}

.tide-page-shell .tide-explainer__grid p {
    margin: 0;
    color: rgba(231, 246, 249, .76);
    line-height: 1.7;
}

/* r222 – Tidenplaner auf die breite Seitenfläche des Küstenkodex bringen */
.tide-page-shell {
    width: min(calc(100% - clamp(20px, 3vw, 56px)), 1720px) !important;
    max-width: 1720px !important;
    margin-inline: auto !important;
}


/* =========================================================
   r222 – Tide Page Header
   Der komplette Seitenkopf sitzt wie beim Küstenkodex
   in einem eigenen großen, abgerundeten Kartenkasten.
   ========================================================= */

.tide-page-shell > .tide-page-header {
    width: 100% !important;
    box-sizing: border-box !important;

    margin: 0 !important;
    padding: clamp(28px, 3.2vw, 52px) !important;

    border: 1px solid rgba(123, 221, 236, .22) !important;
    border-radius: 19px !important;

    background:
        linear-gradient(
            135deg,
            rgba(3, 48, 65, .92),
            rgba(2, 27, 40, .94)
        ) !important;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .035) !important;

    overflow: hidden !important;
}

.tide-page-shell > .tide-page-header .page-header {
    margin: 0 !important;
    padding: 0 !important;
}

.tide-page-shell > .tide-page-header .page-header__inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.tide-page-shell > .tide-page-header .page-header__content {
    max-width: none !important;
}


/* =========================================================
   r222 – Tidenplaner Page-Header als Kartenkasten
   ========================================================= */

.tide-page-header-shell {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    box-sizing: border-box !important;

    margin: 0 0 clamp(22px, 2.2vw, 30px) !important;
    padding: clamp(28px, 3vw, 48px) !important;

    border: 1px solid rgba(123, 221, 236, .22) !important;
    border-radius: 19px !important;

    background:
        linear-gradient(
            135deg,
            rgba(3, 48, 65, .93),
            rgba(2, 27, 40, .95)
        ) !important;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .035) !important;

    overflow: hidden !important;
}


/*
 * Der vorhandene Page-Header bleibt funktional erhalten.
 * Nur seine äußere Geometrie wird neutralisiert.
 */

.tide-page-header-shell > .page-header {
    width: 100% !important;
    max-width: none !important;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    transform: none !important;
}


/*
 * Inhalt innerhalb des Kastens breit nutzen.
 */

.tide-page-header-shell .page-header__copy {
    max-width: 1050px !important;
}

.tide-page-header-shell .page-header h1 {
    margin-top: .25rem !important;
}

.tide-page-header-shell .page-header__actions {
    margin-top: 1.4rem !important;
}


/*
 * Icon rechts wie beim Küstenkodex.
 */

.tide-page-header-shell .page-header__icon {
    width: 86px !important;
    height: 86px !important;
    border-radius: 24px !important;
}


/*

 */


/*

 */


/* =========================================================
   r222 – Tidenplaner Page-Header als Kartenkasten
   CSS-only – Blade bleibt unverändert
   ========================================================= */

/*
 * Der bestehende <x-page-header> wird nur auf der
 * Tidenplaner-Seite als Kartenfläche dargestellt.
 *
 * :has(.tide-board) grenzt die Regel sicher auf
 * die Tidenplaner-Seite ein.
 */

main.site-main:has(.tide-board) > .page-header {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 0 clamp(20px, 2.2vw, 30px) !important;

    padding: clamp(28px, 3vw, 48px) !important;

    box-sizing: border-box !important;

    border: 1px solid rgba(123, 221, 236, .22) !important;
    border-radius: 19px !important;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(91, 211, 225, .10),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(7, 49, 66, .97),
            rgba(3, 35, 50, .96)
        ) !important;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .035) !important;

    overflow: hidden !important;
}

/*
 * Der Page-Header selbst darf keine eigene
 * zusätzliche Kartenfläche erzeugen.
 */
main.site-main:has(.tide-board) > .page-header .page-header__inner {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

/*
 * Inhalt innerhalb des Kastens vollständig ausnutzen.
 */
main.site-main:has(.tide-board) > .page-header .page-header__content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

/*
 * Keine zusätzliche Transformation oder Verschiebung.
 */
main.site-main:has(.tide-board) > .page-header {
    transform: none !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
}

/*
 * Buttons / Actions bleiben innerhalb der Karte.
 */
main.site-main:has(.tide-board) > .page-header .page-header__actions {
    max-width: 100% !important;
}

/*

 */