@charset "utf-8";
/* style01.css  - Erwin Gottschlich - 19.07.2026 */

/* Reset & Basics – mobile first (iPhone 12) */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    min-height: 100%;
    scroll-padding-top: 100px;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    background: #021422;
    color: #f8fafc;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: #e2c994;
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: #fff;
}

a:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Helper class for anchors */
.anchor {
    scroll-margin-top: 100px;
}


/* Layout */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Header */
.header {
    background: #021422;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 80px;
}

.header-logo {
    flex-shrink: 0;
}

.header-logo img {
    height: 70px;
    width: auto;
    border-radius: 6px;
    filter: brightness(0.9);
    transition: transform 0.3s;
}

.header-logo img:hover {
    transform: rotate(2.5deg);
}

.header-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #f8fafc;
    text-align: center;
    line-height: 1.2;
    pointer-events: none;
}

.header-title br {
    display: block;
}

.header-toggle {
    flex-shrink: 0;
    margin-left: auto;
}

/* Hamburger / Close Button */
.hamburger,
.close-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 36px;
    height: 28px;
    cursor: pointer;
    border-radius: 4px;
    padding: 0;
    background: none;
    border: none;
    transition: background 0.2s;
}

.hamburger:hover,
.close-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.hamburger span,
.close-btn span {
    display: block;
    height: 4px;
    background: #f8fafc;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.close-btn {
    display: none;
    position: relative;
    justify-content: center;
    align-items: center;
}

.close-btn span {
    position: absolute;
    width: 36px;
    height: 4px;
    background: #f8fafc;
}

.close-btn span:first-child {
    transform: rotate(45deg);
}

.close-btn span:last-child {
    transform: rotate(-45deg);
}

/* Menu trigger */
#menu-open {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

#menu-open:target~.header .hamburger {
    display: none;
}

#menu-open:target~.header .close-btn {
    display: flex;
}

/* Navigation */
.nav {
    background: #0a2a3a;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    padding: 0 1.5rem;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    /* border-radius: 0 0 16px 16px; */
    border-radius: 16px 16px 16px 16px;
}

#menu-open:target~.nav {
    max-height: 600px;
    padding: 0.99rem 1.5rem 1.25rem;
    padding: 0 1.5rem;

    /* kein Abstand oben/unten */
}

.nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.nav-list li {
    height: 30px;
    /* Menu Zeiger erwischt schon den untern Eintrag wenn zu schmall */
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-list li:last-child {
    border-bottom: none;
}

.nav-list a {
    display: flex;
    align-items: center;
    height: 70px;

    /* Höhe der Menueinträge  */
    width: 100%;
    color: #cbd5e1;
    font-weight: 500;
    font-size: 1.05rem;
    padding: 0;
    /* kein zusätzlicher Innenabstand */
    transition: color 0.2s, padding-left 0.2s;
}

.nav-list a:hover,
.nav-list a:focus {
    color: #fff;
    padding-left: 0.5rem;
}

.nav-list .arrow {
    color: #e2c994;
    margin-right: 0.6rem;
    font-weight: bold;
    transition: transform 0.2s;
}

.nav-list a:hover .arrow {
    transform: translateX(3px);


}

/* Hero – original layout (float, rotations) */
.hero-wrap {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
    overflow: hidden;
}

.box-small {
    float: left;
    width: 100%;
    position: relative;
}

.box-small .inner {
    padding-left: 20px;
}

.box-small .ocker {
    color: #e2c994;
    text-transform: uppercase;
}

.box-small .bold {
    font-weight: bold;
}

.DerSchiefsteTurm {
    text-align: left;
    font-size: 1.6rem;
    padding: 0;
    margin: 0;
    margin-top: 10px;
    /* 10px tiefer */
    line-height: 1.1;
    color: #f8fafc;
}

.DerSchiefsteTurm br {
    display: block;
    margin: 4px 0;
}

.DerSchiefsteTurm a {
    color: #e2c994;
    text-decoration: none;
    transition: color 0.2s, text-decoration 0.2s;
}

.DerSchiefsteTurm a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.DerSchiefsteTurm a:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.box-large {
    margin-top: 20px;
    float: left;
    width: 100%;
    min-height: 360px;
    background-color: #021422;
    position: relative;
    color: white;
    rotate: -2deg;
}

.black-intro-turm {
    margin: 0 auto;
    background: linear-gradient(to top, #e2c994, white);
    color: white;
    height: 280px;
    width: 280px;
    border-radius: 4px;
}

.black-intro-turm img {
    margin-top: 30px;
    margin-left: 40px;
    rotate: 6deg;
    border: 2px solid #e2c994;
    border-radius: 4px;
    width: 210px;
    height: 300px;
    transition: transform 0.3s ease;
    filter: brightness(1);
}

.black-intro-turm img:hover {
    transform: rotate(-2deg);
    filter: brightness(0.85);
}

.www-schiefsterturm-de {
    margin: 0;
    rotate: 6deg;
    text-align: left;
    margin-left: 20px;
}

.www-schiefsterturm-de:hover {
    rotate: 3deg;
}

.www-schiefsterturm-de a {
    color: #e2c994;
    text-decoration: none;
    font-size: larger;
}

.separator {
    /* optional spacing */
}

/* Cards Grid */
.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0.5rem 0 0.5rem;
    max-width: 1280px;
    margin: 0 auto;
}


/* card (Die Basis-Komponente) */
/* Diese Klasse erstellt das visuelle Grundgerüst einer "Karte". Sie sorgt für einen weißen Hintergrund,
abgerundete Ecken, einen weichen Schatten und Innenabstand. Sie macht aus einem nackten Link-Element
einen eigenständigen, rechteckigen Container. */

.card {
    background: #0f2a40;
    border-radius: 12px;
    padding: 1rem;
    border: 2px solid #2a2a2a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: box-shadow 0.25s, border 0.3s, background 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}


.card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.card:target {
    border-color: #e2c994;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
    background: #0d1a2b;
}

.card-image {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 10px;
    background: #0a1a2a;
    flex-shrink: 0;
    margin-bottom: 0.6rem;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: filter 0.3s, transform 0.3s;
    filter: brightness(0.85);
}

.card-image img:hover {
    filter: brightness(1);
    transform: scale(1.02);
}

.card h2 {
    font-size: 1.3rem;
    font-size: 1.6rem;
    margin-bottom: 0.2rem;
}

.card h2 a {
    color: #e2c994;
}

.card h2 a:hover {
    text-decoration: underline;
}

.card-list {
    list-style: none;
    width: 100%;
    text-align: left;
    margin: 0.3rem 0 0.5rem;
    padding: 0;
}

.card-list li {
    display: flex;
    align-items: center;
    padding: 0.2rem 0;
    gap: 0.4rem;
}

.card-list .icon {
    color: #e2c994;
    font-size: 1.2rem;
    width: 1.8rem;
    text-align: center;
    flex-shrink: 0;
}

.card-list a {
    color: #cbd5e1;
}

.card-list a:hover {
    color: #fff;
    text-decoration: underline;
}

.card .start-link {
    margin-top: auto;
    padding-top: 0.4rem;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.card .start-link a {
    color: #e2c994;
}

.card .start-link a:hover {
    color: #fff;
}

/* Large card (full width) */
/* card-large (Der Größen-Modifikator) */
/* Diese Klasse baut auf card auf und vergrößert die Karte. Sie erhöht den Innenabstand,
vergrößert ggf. die Schrift und verstärkt den Schatten. Dadurch wird diese Karte
prominenter dargestellt als normale Karten auf der Seite – sie eignet sich für 
Hauptbeiträge oder Call-to-Actions. */

.card-large {
    grid-column: 1 / -1;
    padding: 1rem 1rem 1.2rem;
}

.card-large h2 {
    font-size: 1.6rem;
    color: #e2c994;
    margin: 0.5rem 0 0.2rem;
}

.card-large p {
    color: #cbd5e1;
    text-align: left;
    margin: 0.3rem 0;
    font-size: 0.98rem;
    line-height: 1.6;
    width: 100%;
}

.card-large .grosses-bild {
    width: 100%;
    border-radius: 10px;
    filter: brightness(0.85);
    transition: filter 0.3s;
    margin-bottom: 0.5rem;
}

.card-large .grosses-bild:hover {
    filter: brightness(1);
}

/* Opening Hours – flexible, ohne Umbruch auf allen Bildschirmen */
.oeffnungszeiten {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 0.5rem 1rem;
    width: 100%;
    max-width: 550px;
    border: 1px solid #2a2a2a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    margin: 0.3rem auto 0.8rem;
    text-align: left;
}

.oeffnungszeiten .zeile {
    display: flex;
    flex-wrap: nowrap;
    /* verhindert Zeilenumbruch */
    gap: 0.3rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    align-items: center;
}

.oeffnungszeiten .zeile:last-of-type {
    border-bottom: none;
}

.oeffnungszeiten .label {
    font-weight: 600;
    color: #e2c994;
    font-size: clamp(0.8rem, 2.5vw, 1rem);
    /* minimal 0.8rem */
    /* dynamische Schrift */
    display: flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    flex: 0 0 auto;
    /* Label nimmt nur so viel Platz wie nötig */
}

.oeffnungszeiten .label::before {
    content: "🕐";
    font-size: clamp(0.85rem, 2vw, 1.1rem);
    /* Icon etwas größer */
}

.oeffnungszeiten .value {
    color: #f8fafc;
    font-weight: 500;
    font-size: clamp(0.8rem, 2.5vw, 1rem);
    /* minimal 0.8rem */
    /* dynamische Schrift */
    /* background: rgba(255, 255, 255, 0.06);
            border-radius: 20px; */
    padding: 0.1rem 0.6rem;
    text-align: right;
    white-space: nowrap;
    flex: 1 1 auto;
    /* Wert nimmt restlichen Platz */
    min-width: 0;
    /* erlaubt Schrumpfen unter Inhalt */
    overflow: hidden;
    text-overflow: ellipsis;
    /* bei extrem wenig Platz wird abgeschnitten */
}

.oeffnungszeiten .hinweis {
    font-size: clamp(0.6rem, 1.5vw, 0.8rem);
    color: #aaa;
    margin-top: 0.5rem;
    text-align: center;
    font-style: italic;
    /* border-top: 1px dashed rgba(255, 255, 255, 0.1); */
    padding-top: 0.5rem;
}


/* ============================================
   BOX FÜR DIE LINK-LISTE (volle Breite)
   ============================================ */

/* Die Box selbst – nimmt im Grid die volle Breite ein */
.content-card.full-width {
    grid-column: 1 / -1;
    /* volle Breite im Grid */
    background: #0f2a40;
    border-radius: 12px;
    padding: 1.5rem 2rem;
    border: 2px solid #2a2a2a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    margin-bottom: 1rem;
    text-align: left;
    /* Inhalt linksbündig */
}

/* Die Link-Liste als Grid mit 3 Spalten */
.content-card.full-width .link-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 gleichbreite Spalten */
    gap: 0.3rem 1.5rem;
    /* Zeilen‑ & Spaltenabstand */
    padding: 0;
    margin: 0;
    width: 100%;
}

/* Jeder Link – reiner Text, keine Box */
.content-card.full-width .link-list a {
    display: inline-block;
    /* bleibt im Textfluss, aber erlaubt Padding */
    color: #e2c994;
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.8;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    box-shadow: none;
}



/* Hover – Kasten mit runden Ecken, keine Unterstreichung */
.content-card.full-width .link-list a:hover {
    color: #fff;
    text-decoration: none;
    /* Unterstreichung ausgeschaltet */
    background: rgba(226, 201, 148, 0.2);
    /* dezenter goldener Hintergrund */
    border-radius: 6px;
}


/* Pfeil vor jedem Link – bleibt erhalten */
.content-card.full-width .link-list a .arrow {
    color: #e2c994;
    margin-right: 0.4rem;
    font-weight: bold;
}


/* Footer – Zentrierung für alle Bildschirme, besonders für kleine Handys */
.footer {
    text-align: center;
    /* Zentriert den gesamten Inhalt */
    padding: 1rem 0.5rem;
    /* Etwas Innenabstand oben/unten */
    background: #021422;
    /* Hintergrundfarbe (wie Header) */
    width: 100%;
    box-sizing: border-box;
}

/* Die Trennzeichen (·) bleiben erhalten, werden aber mit etwas Abstand dargestellt */
.footer .sep {
    color: rgba(226, 201, 148, 0.5);
    padding: 0 6px;
}

/* Alle Links im Footer – Farbe und Hover */
.footer a {
    color: #e2c994;
    text-decoration: none;
}

.footer a:hover {
    color: #f0ddb0;
    text-decoration: underline;
}


/* Noch testen ob so OK  */
p.center, h2.center {
    text-align: center;
}

.center img {
    display: block;
    margin: 0 auto;
}

/* Jedes Element, das über einen URL-Anker (#) angesprungen wird,
   erhält einen farbigen Hintergrund und einen Rand. */
:target {
    background: #1a3a5a !important;
    /* dezentes Blau als Hintergrund */
    border-left: 6px solid #e2c994 !important;
    /* goldener linker Rand */
    padding-left: 0.8rem !important;
    /* Abstand zum Rand */
    transition: background 0.3s ease;
    /* weicher Übergang */
    scroll-margin-top: 100px;
    /* damit es unter der fixen Navi liegt */
}


/* Tablet & Desktop (≥ 768px) */
@media (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .card-large {
        grid-column: 1 / -1;
    }

    .header-title {
        font-size: 1.4rem;
    }

    .header-logo img {
        height: 80px;
    }

    /* Hero side‑by‑side */
    .box-small {
        width: 50%;
    }

    .box-large {
        width: 350px;
        margin-top: 0;
        margin-left: 0;
        float: left;
    }

    .hero-wrap {
        display: flow-root;
    }

    .DerSchiefsteTurm {
        font-size: 1.4rem;
        margin-top: 20px;
        /* bereits 10px + 10px für den zusätzlichen Abstand? Aber wir haben schon margin-top:10px gesetzt, also bleibt es so */
        float: right;
        line-height: 1.5;
        margin-right: 20px;
    }
}

/* Desktop (≥ 1024px) */
@media (min-width: 1024px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.2rem;
    }

    .card-large {
        grid-column: 1 / -1;
    }

    .hero-wrap {
        padding: 0 2rem;
    }

    .header {
        padding: 0.5rem 2rem;
    }
}


/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Bis 600px: 1 Spalte */
@media (max-width: 600px) {
    .content-card.full-width .link-list {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
}

/* 601px – 900px: 2 Spalten */
@media (min-width: 601px) and (max-width: 900px) {
    .content-card.full-width .link-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.3rem 1rem;
    }
}


/* Extra small (≤ 400px) */
@media (max-width: 400px) {
    .header-title {
        font-size: 0.95rem;
        letter-spacing: 0.5px;
    }

    .header-logo img {
        height: 60px;
    }

    .DerSchiefsteTurm {
        font-size: 1.2rem;
        margin-top: 10px;
    }

    .black-intro-turm {
        width: 250px;
        height: 240px;
    }

    .black-intro-turm img {
        /* width: 180px; */
        /* height: 260px; */
        margin-left: 30px;
        margin-top: 20px;
    }

    .card h2 {
        font-size: 1.1rem;
        font-size: 1.4rem;
    }
}