/* 📐 Layout, Container, Header, Footer, Navigation */

html { scroll-behavior: smooth; }

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

/* Anker-Offset wegen sticky Header */
section[id] { scroll-margin-top: 120px; }

/* ─── Top Contact Bar (dunkel, editorial-technisch) ─── */
.contact-bar {
    background: var(--color-bg-darker);
    color: #FFFFFF;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.contact-bar-inner {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    height: 38px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
}
.contact-bar .cb-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #FFFFFF;
    text-decoration: none;
    transition: color var(--transition-fast);
}
.contact-bar a.cb-item:hover { color: var(--color-primary); }
.contact-bar .cb-item svg {
    color: var(--color-primary);
    flex-shrink: 0;
}
.contact-bar .cb-sep {
    color: rgba(255,255,255,0.25);
    user-select: none;
}
.contact-bar .cb-spacer { flex: 1; }

/* ════════════ Öffnungs-Status-Widget (in der Kontaktleiste, oben rechts) ════════════ */
.ohs-cluster{
  --ohs-paper:#FBF7EC; --ohs-line:rgba(20,18,16,.12); --ohs-ink:#141210; --ohs-ink-soft:#5A5246; --ohs-gold-deep:#A8865F;
  --ohs-green:#2E9E5B; --ohs-amber:#E0A02E; --ohs-blue:#3E7CB1; --ohs-red:#C23A2C; --ohs-neutral:#7A7164;
  display:flex; align-items:center; gap:10px;
}
.ohs-clock{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;font-weight:500;color:rgba(255,255,255,.55);letter-spacing:.04em}
.ohs{
  --tone:var(--ohs-neutral); --tone-soft:rgba(122,113,100,.12);
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:999px; padding:4px 11px 4px 10px; position:relative; text-align:left;
}
.ohs-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--tone);position:relative;box-shadow:0 0 0 4px var(--tone-soft)}
.ohs-dot.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--tone);animation:ohsPulse 2s ease-out infinite}
@keyframes ohsPulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.6);opacity:0}}
.ohs-text{display:flex;line-height:1.2}
.ohs-label{font-family:'Roboto Condensed',system-ui,sans-serif;font-weight:600;font-size:12.5px;color:#fff}
.ohs-detail{font-size:11px;color:rgba(255,255,255,.7);font-family:'JetBrains Mono',ui-monospace,monospace}
.ohs--compact .ohs-text{align-items:baseline;gap:7px}
.ohs--compact .ohs-detail::before{content:"· "}
.ohs--open{--tone:var(--ohs-green);--tone-soft:rgba(46,158,91,.22)}
.ohs--soonclose,.ohs--break{--tone:var(--ohs-amber);--tone-soft:rgba(224,160,46,.24)}
.ohs--soonopen{--tone:var(--ohs-blue);--tone-soft:rgba(62,124,177,.24)}
.ohs--closed{--tone:var(--ohs-red);--tone-soft:rgba(194,58,44,.24)}
.ohs--ferien{--tone:var(--ohs-neutral);--tone-soft:rgba(122,113,100,.2)}
.ohs-toggle{cursor:pointer}
.ohs-caret{margin-left:1px;width:12px;height:12px;flex:none;color:rgba(255,255,255,.5);transition:transform .2s ease}
.ohs-toggle.is-open .ohs-caret{transform:rotate(180deg)}
.ohs-pop{
  position:absolute;top:calc(100% + 11px);right:0;z-index:120;width:244px;
  background:var(--ohs-paper);border:1px solid var(--ohs-line);border-radius:14px;
  box-shadow:0 18px 48px -22px rgba(20,18,16,.65);padding:14px 16px;
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:.2s ease;
  font-family:var(--font-body);
}
.ohs-toggle.is-open .ohs-pop{opacity:1;transform:none;pointer-events:auto}
.ohs-pop h4{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ohs-gold-deep);margin-bottom:9px}
.ohs-pop .row{display:flex;justify-content:space-between;font-size:12.5px;padding:5px 0;border-bottom:1px dashed var(--ohs-line)}
.ohs-pop .row:last-of-type{border-bottom:0}
.ohs-pop .row.now{font-weight:600}
.ohs-pop .row.now .day{color:var(--ohs-green)}
.ohs-pop .row .day{color:var(--ohs-ink-soft);font-family:'Roboto Condensed',sans-serif;font-weight:500}
.ohs-pop .row .hrs{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:-.02em;color:var(--ohs-ink)}
.ohs-pop .row.zu .hrs{color:var(--ohs-red)}
.ohs-pop .pop-note{font-size:11.5px;color:var(--ohs-red);margin-top:10px;padding-top:9px;border-top:1px solid var(--ohs-line);line-height:1.5}
.ohs-pop .pop-note-soft{color:var(--ohs-ink-soft);border-top:0;margin-top:5px;padding-top:0}
.ohs-pop .pop-cta{display:block;margin-top:11px;text-align:center;font-family:'Roboto Condensed',sans-serif;font-weight:600;font-size:13px;color:var(--ohs-gold-deep);text-decoration:none}

/* ─── Header (weiss) ─── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #FFFFFF;
    border-bottom: 1px solid var(--color-border);
}
.nav-toggle-input { display: none; }

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    height: var(--header-height);
}
.brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}
.brand::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, var(--color-accent) 0, var(--color-accent) 28px, transparent 28px);
    transition: background .25s ease;
}
.brand:hover::after {
    background: linear-gradient(to right, var(--color-accent) 0, var(--color-accent) 100%, transparent 100%);
}
.brand img {
    display: block;
    height: 50px;
    width: auto;
    max-height: 50px;
}

/* ─── Desktop Navigation ───────────────────────────── */
.main-nav ul {
    display: flex;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-nav a {
    position: relative;
    display: inline-block;
    color: var(--color-text);
    text-decoration: none;
    font-family: var(--font-headline);
    font-weight: var(--fw-bold);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 10px 14px;
    transition: color var(--transition-fast);
    white-space: nowrap;
}
.main-nav a::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-normal);
}
.main-nav a:hover { color: var(--color-text-strong); }
.main-nav a:hover::after,
.main-nav a.active::after {
    transform: scaleX(1);
}

/* ─── Dropdown-Untermenü (Desktop) ──────────────────── */
.main-nav .has-submenu { position: relative; }
.submenu-caret {
    margin-left: 4px;
    vertical-align: -1px;
    transition: transform var(--transition-fast);
}
.main-nav .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 190px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    z-index: 1100;
}
.main-nav .has-submenu:hover .submenu,
.main-nav .has-submenu:focus-within .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.main-nav .has-submenu:hover .submenu-caret { transform: rotate(180deg); }
.main-nav .submenu a {
    display: block;
    padding: 9px 12px;
    font-size: 12px;
    letter-spacing: 0.6px;
    border-radius: var(--radius-sm);
}
.main-nav .submenu a::after { display: none; }
.main-nav .submenu a:hover { background: var(--color-surface, #F5EFDF); color: var(--color-text-strong); }

.header-cta { white-space: nowrap; flex-shrink: 0; }

/* ─── Hamburger-Button (nur Mobile sichtbar) ────────── */
.nav-burger {
    display: none;
    cursor: pointer;
    align-items: center;
    gap: 9px;
    height: 40px;
    padding: 0 6px;
    background: transparent;
    border: 0;
}
.nav-burger-lines {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 24px;
}
.nav-burger-label {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-strong);
}
.nav-burger-lines span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text-strong);
    border-radius: 2px;
    transition: transform var(--transition-normal), opacity var(--transition-fast);
}

/* ─── Tablet-Stufen: Text wird kleiner BEVOR Burger kommt ─── */
@media (max-width: 1200px) {
    .main-nav a { padding: 10px 10px; font-size: 12px; letter-spacing: 0.8px; }
    .header-cta { padding: 10px 18px; font-size: 13px; }
}
@media (max-width: 1024px) {
    .main-nav a { padding: 10px 6px; font-size: 11px; letter-spacing: 0.6px; }
    .header-cta { padding: 8px 14px; font-size: 12px; }
    .header-inner { gap: var(--space-md); }
}
@media (max-width: 880px) {
    .main-nav a { padding: 10px 4px; font-size: 10.5px; letter-spacing: 0.4px; }
}

/* ─── Mobile (< 760px): Hamburger einblenden ────────── */
@media (max-width: 760px) {
    .nav-burger { display: flex; }
    .header-cta { display: none; }

    /* Drawer: full-screen Overlay unter dem Header */
    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #FFFFFF;
        border-top: 1px solid var(--color-border);
        box-shadow: var(--shadow-lg);
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition-normal) ease;
    }
    .main-nav ul {
        flex-direction: column;
        gap: 0;
        padding: var(--space-md) 0;
    }
    .main-nav a {
        display: block;
        padding: 14px var(--space-md);
        font-size: 14px;
        border-bottom: 1px solid var(--color-border);
    }
    .main-nav a::after { display: none; }
    .main-nav li:last-child a { border-bottom: 0; }

    /* Untermenü im Drawer: statisch, eingerückt, immer sichtbar */
    .main-nav .submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        padding: 0;
        background: var(--color-surface, #F5EFDF);
    }
    .main-nav .submenu a {
        padding-left: calc(var(--space-md) + 16px);
        font-size: 13px;
        border-bottom: 1px solid var(--color-border);
    }
    .main-nav .submenu-caret { display: none; }
    .nav-toggle-input:checked ~ .container .main-nav { max-height: 760px; }

    /* Geöffnet via Checkbox-Hack */
    .nav-toggle-input:checked ~ .container .main-nav {
        max-height: 500px;
    }
    /* Burger zu X morphen */
    .nav-toggle-input:checked ~ .container .nav-burger-lines span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .nav-toggle-input:checked ~ .container .nav-burger-lines span:nth-child(2) {
        opacity: 0;
    }
    .nav-toggle-input:checked ~ .container .nav-burger-lines span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
    /* Label „Menü" weg, wenn offen → nur noch X */
    .nav-toggle-input:checked ~ .container .nav-burger-label { display: none; }

    .contact-bar-inner { font-size: 11px; gap: var(--space-sm); }
    .contact-bar .cb-hours { display: none; }
    .contact-bar .cb-item.cb-mail span { display: none; }
}
@media (max-width: 480px) {
    .contact-bar .cb-item span { display: none; }
    .contact-bar .cb-sep { display: none; }
    .contact-bar-inner { justify-content: center; gap: var(--space-md); }
}

/* ─── Footer (schwarz) ─── */
.site-footer {
    background: var(--color-bg-darker);
    color: var(--color-text-on-dark);
    padding-block: var(--space-2xl) var(--space-lg);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}
.footer-grid strong {
    display: block;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
    font-family: var(--font-headline);
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.footer-grid a {
    color: var(--color-text-on-dark);
    text-decoration: none;
}
.footer-grid a:hover { color: var(--color-primary); }
.footer-grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-grid li { margin-block: 4px; }
.footer-meta {
    grid-column: 1 / -1;
    border-top: 1px solid var(--color-border-dark);
    padding-top: var(--space-md);
    color: var(--color-text-on-dark-muted);
}
.footer-meta a { color: var(--color-text-on-dark-muted); }

@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* ─── Main ─── */
#content-main {
    min-height: calc(100vh - var(--header-height));
}