/* ================================================================
   GEZEITEN.CSS — Modernes Design für die Gezeitenkalender-Seite
   ================================================================
   Wird NUR auf gezeiten.html geladen.
   Globale Basisstile (Navbar, Footer, Farben) sind in style.css.

   Abschnitte:
     1.  Reset
     2.  Hero-Abschnitt (Stationsauswahl + Glasmorphismus-Karte)
     3.  Gezeitendiagramm (SVG-Klassen)
     4.  Nächste-Ereignisse-Karten
     5.  Tabellen-Abschnitt
     6.  Info-Abschnitt
     7.  Responsive Design
   ================================================================ */


/* ================================================================
   1. RESET
   ================================================================ */

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    display: inline-block;
}


/* ================================================================
   2. SUB-HEADER — auf der Gezeiten-Seite schlanker als die 40vh-Vorgabe
   ================================================================ */

#nordapart-header.sub-header {
    height: 20vh;
    box-sizing: border-box;
}

#nordapart-header .page-title {
    margin-top: 10vh;
}


/* ================================================================
   3. HERO-ABSCHNITT
   Blauer Verlaufshintergrund, Stationsauswahl, Glasmorphismus-Karte,
   Wellenübergang am unteren Rand.
   ================================================================ */

.tide-hero {
    background: linear-gradient(to bottom, #041f52 0%, #073d8a 55%, #072d80 100%);
    padding: 2.5rem 0 0;
    color: #fff;
    overflow: hidden;
}

.tide-hero .container {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Stationsauswahl-Dropdown */
.tide-station-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 2.5rem;
}

.tide-station-inner {
    position: relative;
    display: inline-block;
}

.tide-station-select {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: #fff;
    padding: 0.72rem 3rem 0.72rem 1.1rem;
    border-radius: 10px;
    font-size: 1rem;
    cursor: pointer;
    min-width: 300px;
    outline: none;
    transition: background 0.2s, border-color 0.2s;
}

.tide-station-select:hover,
.tide-station-select:focus {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.55);
}

.tide-station-select option {
    background: #08468e;
    color: #fff;
}

/* Pfeil-Icon rechts im Dropdown */
.tide-station-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.65rem;
}

/* Glasmorphismus-Karte */
.tide-status-card {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 2.5rem 2rem 2.2rem;
    text-align: center;
    max-width: 440px;
    margin: 0 auto 2.5rem;
}

.tide-event-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    opacity: 0.6;
    margin-bottom: 0.35rem;
}

.tide-event-next {
    font-size: 1.08rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    opacity: 0.92;
    min-height: 1.5em;
}

.tide-countdown-label {
    font-size: 0.82rem;
    opacity: 0.7;
    margin-bottom: 0.15rem;
}

/* Fettgedruckter Ereignistyp (Hoch-/Niedrigwasser) im Countdown */
.tide-countdown-label strong {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    opacity: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 0.2rem;
    margin-bottom: 0.35rem;
}

/* Große, tabellarische Countdown-Uhr */
.tide-countdown {
    font-size: 3.8rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
}

/* Wellenförmiger Übergang (Hero → Chart-Abschnitt) */
.tide-hero-wave {
    line-height: 0;
    margin-top: 1.5rem;
    margin-bottom: -2px; /* verhindert 1px-Lücke durch Sub-Pixel-Rendering */
}

.tide-hero-wave svg {
    display: block;
    width: 100%;
}


/* ================================================================
   3. GEZEITENDIAGRAMM
   ================================================================ */

.tide-chart-sect {
    background: #f5f7fc;
    padding: 3rem 0 2.5rem;
}

.tide-chart-sect .container {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.tide-chart-sect h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a2a4a;
    margin-bottom: 1rem;
}

/* Horizontales Scrollen auf kleinen Bildschirmen */
.tide-chart-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tide-chart-wrap {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #dde6f5;
    padding: 0.5rem;
    box-shadow: 0 2px 14px rgba(8, 70, 142, 0.07);
    min-width: 480px;
}

/* SVG-Klassen (werden von drawTideChart() per class-Attribut gesetzt) */
.tide-grid              { stroke: #e8eef8; stroke-width: 0.8; }
.tide-axis-lbl          { font-size: 9px; fill: #aaa; font-family: inherit; }
.tide-marker-high       { fill: #08468e; stroke: #fff; stroke-width: 1.5; }
.tide-marker-low        { fill: #0097a7; stroke: #fff; stroke-width: 1.5; }
.tide-marker-high-txt   { font-size: 9px; fill: #08468e; font-weight: 700; font-family: inherit; }
.tide-marker-low-txt    { font-size: 9px; fill: #0097a7; font-weight: 700; font-family: inherit; }
.tide-marker-alt        { fill: #4a90c4; stroke: #fff; stroke-width: 1; opacity: 0.55; }
.tide-now-line          { stroke: #e53935; stroke-width: 1.5; stroke-dasharray: 4, 3; }
.tide-now-dot           { fill: #e53935; stroke: #fff; stroke-width: 1.5; }
.tide-now-lbl           { font-size: 9px; fill: #e53935; font-weight: 700; font-family: inherit; }
.tide-legend-lbl        { font-size: 8px; fill: #444; font-family: inherit; }
.tide-legend-alt        { fill: #4a90c4; }


/* ================================================================
   4. NÄCHSTE-EREIGNISSE-KARTEN
   ================================================================ */

.tide-upcoming-sect {
    background: #fff;
    padding: 3rem 0;
}

.tide-upcoming-sect .container {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.tide-upcoming-sect h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a2a4a;
    margin-bottom: 1rem;
}

/* Karten-Raster: 3 Spalten auf Desktop */
.tide-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    overflow: visible;
    padding: 0.25rem 0.25rem 0.5rem;
}

/* T-Form bei genau 4 Ereignissen: 3 oben, 1 zentriert unten */
.tide-grid-4 .tide-event-card:nth-child(4) {
    grid-column: 2;
}

.tide-event-card {
    background: #fff;
    border-radius: 14px;
    padding: 1.25rem 1rem;
    text-align: center;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
    border-top: 4px solid transparent;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tide-event-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.11);
}

/* Hervorgehobene erste Karte (nächstes Ereignis) */
.tide-card-next {
    transform: scale(1.05);
    transform-origin: top center;
    box-shadow: 0 8px 30px rgba(8, 70, 142, 0.2);
    border-top-width: 5px;
    position: relative;
    z-index: 1;
}

.tide-card-next:hover {
    transform: scale(1.05) translateY(-2px);
}

/* "Nächstes"-Badge auf der ersten Karte */
.tec-badge {
    display: inline-block;
    padding: 0.12rem 0.6rem;
    border-radius: 20px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #fff;
    margin-bottom: 0.55rem;
}

.tide-card-high .tec-badge { background: #08468e; }
.tide-card-low  .tec-badge { background: #0097a7; }

/* Farbige Oberkante je nach Ereignistyp */
.tide-card-high { border-top-color: #08468e; }
.tide-card-low  { border-top-color: #0097a7; }

/* Karten-Inhaltsklassen */
.tec-type {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.tide-card-high .tec-type { color: #08468e; }
.tide-card-low  .tec-type { color: #0097a7; }

.tec-time {
    display: block;
    font-size: 2.1rem;
    font-weight: 800;
    color: #1a2a4a;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    margin-bottom: 0.45rem;
}

.tec-date {
    display: block;
    font-size: 0.82rem;
    color: #555;
    margin-bottom: 0.25rem;
}

.tec-countdown {
    display: block;
    font-size: 0.77rem;
    color: #999;
}


/* ================================================================
   5. TABELLEN-ABSCHNITT
   ================================================================ */

.setab {
    background: #f5f7fc;
    padding: 3rem 0;
}

.setab .container {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.setab h3 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a2a4a;
    margin-bottom: 1rem;
}

/* Datumsfilter-Zeile */
.tide-filter-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.tide-filter-label {
    font-size: 0.95rem;
    color: #08468e;
    font-weight: 500;
    margin: 0;
}

.dateFilter {
    padding: 0.5rem 0.75rem;
    border: 1px solid #dde6f5;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #1a2a4a;
    outline: none;
    cursor: pointer;
    background: #fff;
}

.dateFilter:focus {
    border-color: #08468e;
    box-shadow: 0 0 0 2px rgba(8, 70, 142, 0.12);
}

/* Hinweis-/Fehlertext unter dem Filter */
#info {
    color: #e53935;
    font-size: 0.85rem;
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}

/* Tabellen-Design */
table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 1rem;
    background: #fff; /* Basis-Weiß, damit gerade Zeilen sauber abgrenzen */
}

th, td {
    border: 1px solid #dde6f5;
    padding: 10px 14px;
    text-align: left;
}

th {
    background: #08468e;
    color: #fff;
    font-weight: 600;
}

td {
    color: #1a2a4a;
}

/* Abwechselnde Zeilen: ungerade = weiß, gerade = deutliches Blaugrau */
tr:nth-child(odd)  td { background: #fff; }
tr:nth-child(even) td { background: #dce8f7; }

tr:hover td {
    background: #c7dbf2;
}


/* ================================================================
   6. INFO-ABSCHNITT
   ================================================================ */

.sein {
    background: #fff;
    padding: 3rem 0;
}

.sein .container {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.sein h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #08468e;
    margin-bottom: 1rem;
}

.sein p {
    margin-bottom: 1rem;
    line-height: 1.75;
    color: #333;
}

.sein .disclaimer {
    font-size: 0.85rem;
    color: #c62828;
    margin-top: 1.5rem;
}


/* ================================================================
   7. RESPONSIVE DESIGN
   ================================================================ */

/* Mittlere Bildschirme: 2 Spalten für Karten */
@media (max-width: 992px) {
    .tide-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Wochentag-Kürzel: Desktop zeigt vollen Namen, Mobile nur Kürzel */
.weekday-short { display: none; }

/* Tablets und kleinere Smartphones */
@media (max-width: 768px) {
    /* Sub-Header: auf Mobile etwas höher */
    #nordapart-header.sub-header {
        height: 25vh;
        min-height: 170px;
    }

    /* Titel auf Mobile: ans untere Ende des Flex-Containers, 15pt Abstand */
    #nordapart-header .page-title {
        margin-top: auto;
        margin-bottom: 15pt;
    }

    .tide-countdown {
        font-size: 3.2rem;
    }

    .tide-station-select {
        min-width: unset;
        width: 90vw;
        max-width: 340px;
    }

    /* Diagramm: min-width aufheben → passt sich der Bildschirmbreite an */
    .tide-chart-wrap {
        min-width: unset;
    }

    /* Diagramm-Schrift auf Mobile deutlich größer */
    .tide-axis-lbl        { font-size: 16px; }
    .tide-marker-high-txt { font-size: 15px; }
    .tide-marker-low-txt  { font-size: 15px; }
    .tide-now-lbl         { font-size: 15px; }
    .tide-legend-lbl      { font-size: 13px; }

    /* Wochentag: auf Mobile nur Kürzel (Mo, Di, Mi…) */
    .weekday-full  { display: none; }
    .weekday-short { display: inline; }

    th, td {
        padding: 8px 10px;
        font-size: 0.9rem;
    }
}

/* Kleine Smartphones */
@media (max-width: 480px) {
    .tide-hero .container {
        padding: 0 0.75rem;
    }

    /* Alle anderen Sektionen auf dieselbe Breite wie Hero/Dropdown */
    .tide-chart-sect .container,
    .tide-upcoming-sect .container,
    .setab .container,
    .sein .container {
        padding: 0 0.75rem;
    }

    .tide-status-card {
        width: 100%;
        box-sizing: border-box;
        padding: 1.75rem 1rem 1.5rem;
        border-radius: 16px;
        margin: 0 0 2rem;
    }

    .tide-countdown {
        font-size: 2.8rem;
    }

    .tec-time {
        font-size: 1.8rem;
    }

    th, td {
        padding: 7px 8px;
        font-size: 0.82rem;
    }
}

/* Sehr kleine Bildschirme: 1 Spalte für Karten */
@media (max-width: 360px) {
    .tide-cards-grid {
        grid-template-columns: 1fr;
    }
}