/* Lehm-Holz-Kunst – Seitenrahmen und obere Navigation (ersetzt die Seitenleiste der Vorlage) */

:root {
    --topbar-h: 64px;
    --seite-max: 1600px;  /* maximale Breite der Seite („Blatt“) */
    --inhalt-max: 1280px; /* maximale Breite des Inhalts */
    --rand: 2em;          /* Rand links/rechts */
    --leiste: #222729;
}

/* sticky funktioniert nicht, wenn ein Vorfahr overflow: hidden hat (Vorlage setzt das mobil) */
html, body { overflow-x: clip; }
html { scroll-padding-top: var(--topbar-h); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html, #topnav ul { scroll-behavior: auto; }
}

/* Die Seite liegt als „Blatt“ in der Mitte, außen ruhiger Lehm-Hintergrund */
html { background: #2a211b; }
@media screen and (min-width: 1601px) { /* Foto nur laden, wenn der Rand überhaupt sichtbar ist */
    html { background: #2a211b url("../../images/allgemein/lehm-hintergrund.jpg") center / cover fixed; }
}
body { background: transparent; }
.seite {
    max-width: var(--seite-max);
    margin: 0 auto;
    background: var(--sand-1);
}
@media screen and (min-width: 1601px) {
    .seite { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 48px rgba(0, 0, 0, 0.55); }
}

/* Einheitliche Inhaltsbreite (die Stufen der Vorlage waren für die Seitenleiste gedacht) */
.container { width: auto; max-width: calc(var(--inhalt-max) + 2 * var(--rand)); padding-left: var(--rand); padding-right: var(--rand); }

/* Seitenleisten-Abstände der Vorlage aufheben */
#main, #footer { margin-left: 0; }
#main:focus { outline: none; }

/* „Zum Inhalt springen“ – nur bei Tastaturfokus sichtbar */
.sprunglink {
    position: absolute;
    left: 1em;
    top: -100px;
    z-index: 1001;
    padding: 0.6em 1em;
    border: 0;
    border-radius: 0 0 0.35em 0.35em;
    background: #fff;
    color: var(--leiste);
    font-weight: 600;
}
.sprunglink:focus { top: 0; color: var(--leiste); }

#topbar {
    margin: 0; /* Vorlage gibt <header> einen Abstand nach unten */
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--leiste) url("images/overlay.png");
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}
.topbar-inner {
    display: flex;
    align-items: stretch;
    gap: 1em;
    max-width: calc(var(--inhalt-max) + 2 * var(--rand)); /* bündig mit dem Inhalt darunter */
    height: var(--topbar-h);
    margin: 0 auto;
    padding: 0 var(--rand);
}

/* Logo + Name */
.marke { display: flex; align-items: center; gap: 0.7em; flex-shrink: 0; border: 0; color: #fff; text-decoration: none; }
.marke:hover { color: #fff; }
.marke img { width: 44px; height: auto; }
.marke-text { font-weight: 600; font-size: 18px; line-height: 1.15em; white-space: nowrap; }
.marke-text small {
    display: block;
    font-weight: 400;
    font-size: 0.7em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

/* Menüpunkte – die Leiste ist seitlich scrollbar, falls sie nicht in eine Zeile passt */
#topnav { position: relative; flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; }
#topnav ul {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
#topnav ul::-webkit-scrollbar { display: none; }
#topnav li { padding: 0; flex-shrink: 0; }
#topnav a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 0.5em;
    border: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 16px; /* fest statt relativ: die Grundschrift der Vorlage wächst auf großen Bildschirmen stark */
    font-weight: 400; /* Vorlage nutzt 300 (Light) – in der dunklen Leiste zu dünn */
    line-height: 1.2em;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    position: relative;
    transition: color 0.2s ease, background-color 0.2s ease;
}
#topnav a::after { /* Unterstreichung des aktiven Punkts */
    content: "";
    position: absolute;
    left: 0.5em;
    right: 0.5em;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--lehm-hell);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}
#topnav a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
#topnav a[aria-current] { color: #fff; }
#topnav a[aria-current]::after { transform: scaleX(1); }

/* Fokus immer deutlich sichtbar (Tastatur) */
.marke:focus-visible, #topnav a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
    border-radius: 0.3em;
}

/* Wisch-Hinweise: Pfeil mit Verlauf am Rand, nur wenn dort noch Menüpunkte versteckt sind.
   Die Pfeile sind für Maus/Touch gedacht; per Tastatur erreicht man alle Punkte ohnehin mit Tab. */
.nav-pfeil {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 44px;
    height: auto;
    padding: 0 !important;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #fff !important;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.nav-pfeil-links { left: 0; background: linear-gradient(to right, var(--leiste) 45%, rgba(34, 39, 41, 0)) !important; }
.nav-pfeil-rechts { right: 0; background: linear-gradient(to left, var(--leiste) 45%, rgba(34, 39, 41, 0)) !important; }
.nav-pfeil::before { /* Chevron */
    content: "";
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -5px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}
.nav-pfeil-links::before { left: 14px; transform: rotate(-135deg); }
.nav-pfeil-rechts::before { right: 14px; transform: rotate(45deg); }
.nav-pfeil:hover { color: var(--lehm-hell) !important; }
#topnav.mehr-links .nav-pfeil-links,
#topnav.mehr-rechts .nav-pfeil-rechts { opacity: 1; visibility: visible; transition: opacity 0.2s ease; }

/* Einmaliger Hinweis beim ersten Besuch: Pfeil stupst nach rechts */
@keyframes stupsen {
    0%, 100% { transform: translateX(0) rotate(45deg); }
    50% { transform: translateX(5px) rotate(45deg); }
}
#topnav.hinweis .nav-pfeil-rechts::before { animation: stupsen 0.6s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) {
    #topnav.hinweis .nav-pfeil-rechts::before { animation: none; }
}

/* Titelbereich */
#main > section.cover { padding: 7em 0; }
#top h1 { color: #fff; font-size: 2.4em; font-weight: 600; letter-spacing: -0.5px; line-height: 1.2em; margin: 0.15em 0 0.45em; }

/* Etwas enger auf kleineren Laptops, damit alles in eine Zeile passt */
@media screen and (max-width: 1366px) {
    #topnav a { padding: 0 0.4em; font-size: 15px; }
    #topnav a::after { left: 0.4em; right: 0.4em; }
}

/* Schmaler: Menüpunkte einzeilig, Leiste reicht bis zum rechten Rand */
@media screen and (max-width: 1180px) {
    .topbar-inner { gap: 0.75em; padding-right: 0; }
    #topnav { justify-content: flex-start; }
    #topnav ul { width: 100%; padding-right: 1em; }
    #topnav a { font-size: 15px; }
}

/* Handy: etwas größere Leiste und Schrift, Name steckt im aria-label des Logos */
@media screen and (max-width: 736px) {
    :root { --topbar-h: 60px; --rand: 1em; }
    .topbar-inner { gap: 0.25em; }
    .marke img { width: 40px; }
    .marke-text { display: none; }
    #topnav a { padding: 0 0.85em; font-size: 16px; }
    #topnav a::after { left: 0.85em; right: 0.85em; height: 4px; }
    #main > section.cover { padding: 4em 0; }
    #top h1 { font-size: 1.8em; letter-spacing: 0; }
    #top .untertitel { font-size: 1em; }
}