/* bohrskulpturen.de – V1, nah am Original (Themeco Pro): Nachtblau-Kopf, Lato, weiße Inhaltsfläche.
   Hell als Standard, Dunkel über Umschalter oder Systemeinstellung. */

@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('/fonts/lato-v25-latin_latin-ext-regular.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('/fonts/lato-v25-latin_latin-ext-700.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap;
    src: url('/fonts/lato-v25-latin_latin-ext-900.woff2') format('woff2'); }
@font-face { font-family: 'Special Elite'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('/fonts/special-elite-400.woff2') format('woff2'); }

:root {
    --nacht: #162536;
    --nacht-hell: #1f3550;
    --text: #1c1c1c;
    --text-leise: #5b5b5b;
    --grund: #ffffff;
    --flaeche: #f3f3f3;
    --linie: #d5d5d5;
    --link: #16801f;
    --link-hover: #d62f2f;
    --hinweis: #8b0000;
    --fuss: #ffffff;
    --schatten: 0 .15em 2em rgba(0, 0, 0, .15);
    --breite: 1200px;
    color-scheme: light;
}
:root[data-theme="dark"] {
    --text: #e6e6e6; --text-leise: #a9a9a9; --grund: #121821; --flaeche: #0d131b; --linie: #33414f;
    --link: #6fd17a; --link-hover: #ff8a80; --hinweis: #ff9c8f; --fuss: #0f1620; --schatten: 0 .15em 2em rgba(0, 0, 0, .5);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --text: #e6e6e6; --text-leise: #a9a9a9; --grund: #121821; --flaeche: #0d131b; --linie: #33414f;
        --link: #6fd17a; --link-hover: #ff8a80; --hinweis: #ff9c8f; --fuss: #0f1620; --schatten: 0 .15em 2em rgba(0, 0, 0, .5);
        color-scheme: dark;
    }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; overflow-x: clip; font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 1rem; line-height: 1.6;
    color: var(--text); background: var(--grund); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 1000; padding: .5rem 1rem; background: #fff; color: #000; }
.skip-link:focus { top: .5rem; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: clamp(2rem, 1.4rem + 2vw, 2.85rem); letter-spacing: -.035em; margin-bottom: .8em; }
h2.titel { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); letter-spacing: -.03em; margin-top: 1.2em; }
.text h2, .text h3 { font-size: 1.5rem; letter-spacing: -.02em; margin-top: 1.2em; }
.text h4 { font-size: 1.25rem; letter-spacing: -.01em; margin-top: 1em; }
.text h5 { font-size: 1.1rem; }
.text h6 { font-size: .95rem; text-transform: uppercase; letter-spacing: .03em; }
.text > :first-child { margin-top: 0; }
p { margin: 0 0 1em; }
.rechts { text-align: right; }
.hinweis { color: var(--hinweis); }
hr { border: 0; border-top: 1px solid var(--linie); margin: 2.5rem 0; }

/* Kopf */
.kopf { background: var(--nacht); color: #fff; position: relative; z-index: 50; }
.kopf-innen { max-width: var(--breite); margin: 0 auto; padding: 0 2rem; min-height: 10rem; display: flex; align-items: stretch; gap: 1rem; }
.kopf-logo { display: flex; align-items: center; margin-right: auto; }
.kopf-logo img { width: 240px; }
.kopf-nav ul { list-style: none; margin: 0; padding: 0; display: flex; height: 100%; }
.kopf-nav li { display: flex; }
.kopf-nav a {
    display: flex; align-items: center; padding: 0 1.25rem; color: #fff; font-size: .75rem; letter-spacing: .35em;
    text-transform: uppercase; margin-right: -.35em; transition: background-color .3s;
}
.kopf-nav a:hover, .kopf-nav a[aria-current] { background: rgba(41, 128, 185, .14); color: #fff; text-decoration: none; }
.thema-knopf {
    align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem;
    border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; flex: none;
}
.thema-knopf:hover { background: rgba(255, 255, 255, .1); }
.thema-knopf .i-sonne { display: none; }
.thema-knopf[aria-pressed="true"] .i-sonne { display: block; }
.thema-knopf[aria-pressed="true"] .i-mond { display: none; }
.nav-toggle { display: none; }
.kopf-nav a, .marke, .marke-zeile { white-space: nowrap; }

/* Inhalt */
.inhalt { max-width: var(--breite); margin: 0 auto; padding: 3rem 2rem 4rem; }
.sektion { margin-bottom: 2.5rem; }
.reihe { margin-bottom: 1.5rem; }
.reihe--spalten { display: grid; grid-template-columns: var(--raster); gap: 2rem; align-items: start; }
.seite-aktuelles .reihe--bild-text { align-items: end; }
.reihe--eins .bild img { width: 100%; }
.spalte > * + * { margin-top: 1.2rem; }
.bild { margin: 0; }
.bild a { display: block; }
.text { font-size: .95rem; }
.text figure { margin: 0; }
.text ol, .text ul { padding-left: 1.4em; }
.seite-ausstellungen .text p { margin-bottom: 1.1em; line-height: 1.5; }

/* Galerie (The Grid „justified“ → Zeilen mit gleicher Höhe) */
.galerie { display: flex; flex-wrap: wrap; gap: 4px; margin: 1rem 0 2rem; }
.galerie figure { margin: 0; flex: calc(var(--q) * 200) 1 calc(var(--q) * 200px); min-width: 0; position: relative; }
.galerie img { width: 100%; height: 200px; object-fit: cover; transition: opacity .25s; }
.galerie a:hover img { opacity: .85; }
.galerie figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .3rem .5rem; font-size: .75rem; color: #fff;
    background: linear-gradient(transparent, rgba(0, 0, 0, .65)); opacity: 0; transition: opacity .25s; pointer-events: none; }
.galerie figure:hover figcaption { opacity: 1; }
.galerie::after { content: ''; flex-grow: 1000; }

/* Zwei-Klick-Abspieler */
.abspieler { margin: 0; }
.abspieler-start { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #000; cursor: pointer; color: #fff; text-align: left; }
.abspieler-start img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .7; transition: opacity .25s; }
.abspieler-start:hover img, .abspieler-start:focus-visible img { opacity: .5; }
.abspieler-text { position: absolute; inset: auto 0 0 0; display: flex; gap: .9rem; align-items: center; padding: 1rem 1.1rem; font-weight: 700; line-height: 1.3;
    background: linear-gradient(transparent, rgba(0, 0, 0, .75)); }
.abspieler-text small { display: block; font-weight: 400; font-size: .8rem; opacity: .85; }
.abspieler-knopf { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: #e62117; font-size: 1.1rem; padding-left: .2rem; }
.abspieler iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.abspieler-link { margin: .4rem 0 0; font-size: .85rem; }
.abspieler--audio .abspieler-start { display: flex; align-items: center; background: var(--nacht); }
.abspieler--audio .abspieler-start img { width: 110px; aspect-ratio: 1; opacity: 1; }
.abspieler--audio .abspieler-text { position: static; background: none; }
.abspieler--audio iframe { aspect-ratio: auto; height: 166px; }

/* Kontakt */
.adresse { font-size: 1.05rem; }
.formular label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .25rem; }
.formular input[type=text], .formular input[type=email], .formular textarea {
    width: 100%; padding: .7rem .8rem; font: inherit; color: var(--text); background: var(--grund);
    border: 1px solid var(--linie); border-radius: 2px;
}
.formular input:focus, .formular textarea:focus { outline: 2px solid var(--nacht-hell); border-color: var(--nacht-hell); }
.formular-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.formular-einwilligung { display: flex; gap: .6rem; align-items: flex-start; }
.formular-einwilligung input { margin-top: .35rem; }
.formular-einwilligung label { font-weight: 400; }
.formular-lock { position: absolute; left: -9999px; }
.formular-meldung { padding: .8rem 1rem; background: var(--flaeche); border-left: 0; }
.formular-meldung.fehler { color: var(--hinweis); }
.knopf {
    display: inline-block; padding: .85rem 1.6rem; border: 0; background: var(--nacht); color: #fff; font: inherit;
    font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; cursor: pointer;
}
.knopf:hover { background: var(--nacht-hell); color: #fff; text-decoration: none; }
:root[data-theme="dark"] .knopf { background: #2b4a6e; }
.karte { position: relative; height: 420px; background: var(--flaeche); border: 1px solid var(--linie); overflow: hidden; }
.karte-hinweis { padding: 3rem 1.5rem; text-align: center; font-size: .9rem; }
.karte-link { margin: .5rem 0 1.5rem; font-size: .9rem; }
.karte-gross { padding: 0; border: none; background: none; font: inherit; color: var(--link); text-decoration: underline; cursor: pointer; }
.karte-dialog { margin: auto; width: min(96vw, 1200px); max-width: 96vw; height: min(92dvh, 860px); max-height: 92dvh; padding: 0; border: none;
    background: var(--grund); color: var(--text); overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.karte-dialog:not([open]) { display: none; }
.karte-dialog::backdrop { background: rgba(10, 18, 28, .9); }
.karte-dialog-kopf { display: flex; align-items: center; gap: 1rem; padding: .5rem 1rem; border-bottom: 1px solid var(--linie); }
.karte-dialog-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.karte-dialog-schliessen { display: inline-flex; padding: .25rem; border: none; background: transparent; color: inherit; cursor: pointer; }
.karte-dialog-karte { min-height: 0; }

/* Foto-Modal */
.modal { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100dvh; width: 100vw; height: 100dvh; margin: 0; }
.modal::backdrop { background: rgba(8, 12, 18, .94); }
.modal figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3.5rem 4rem 1.5rem; }
.modal img { max-width: 100%; max-height: calc(100dvh - 7rem); width: auto; height: auto; object-fit: contain; }
.modal figcaption { color: #eee; font-size: .9rem; margin-top: .6rem; text-align: center; }
.modal-zu { position: absolute; top: .6rem; right: .8rem; z-index: 2; width: 2.75rem; height: 2.75rem; border: 0; background: none; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; }
.modal-pfeil { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 3rem; height: 4rem; border: 0; background: rgba(255, 255, 255, .08); color: #fff; font-size: 2.4rem; cursor: pointer; }
.modal-zurueck { left: .5rem; }
.modal-weiter { right: .5rem; }
.modal--einzeln .modal-pfeil { display: none; }

/* Fuß wie im Original: weiße Leiste mit Schatten */
.fuss { background: var(--fuss); box-shadow: var(--schatten); padding: 4rem 2rem; text-align: center; position: relative; }
.fuss ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 2.2rem; margin: 0 0 1.4rem; padding: 0; }
.fuss a { color: var(--text); font-weight: 700; font-size: .875rem; letter-spacing: .035em; }
.fuss a:hover { color: var(--link-hover); }
.fuss-copy { margin: 0; color: var(--text-leise); font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; }
.start .fuss .thema-knopf { margin-top: 1.4rem; color: var(--text); border-color: var(--linie); }

/* Startseite: Weggabelung wie der Slider (ATELIER links, LUNDALAND rechts) */
.start { background: var(--grund); }
.weggabelung { max-width: 1240px; margin: 0 auto; padding: 3.5rem 2rem 4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; }
.weg { position: relative; display: block; color: inherit; }
.weg:hover { text-decoration: none; }
.weg-bild { display: block; transition: transform .3s; }
.weg-bild img { width: 100%; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.weg--bohr .weg-bild { transform: rotate(1deg); margin-top: 58px; }
.weg--lunda .weg-bild { transform: rotate(-2deg); }
.weg:hover .weg-bild, .weg:focus-visible .weg-bild { transform: rotate(0deg) scale(1.02); }
.weg-logo { position: absolute; z-index: 2; display: block; }
.weg--bohr .weg-logo { left: 57px; top: -6px; transform: rotate(3deg); }
.weg--bohr .weg-logo img { width: 292px; }
:root[data-theme="dark"] .weg--bohr .weg-logo img { filter: invert(1); }
.weg--lunda .weg-logo { right: -24px; top: 45px; transform: rotate(-2deg); }
.weg--lunda .weg-logo img { width: 145px; }
.weg-text { display: block; font-family: 'Special Elite', 'Courier New', monospace; font-size: 30px; line-height: 1.2; margin-top: 1.6rem; }
.weg--bohr .weg-text { color: var(--text); transform: rotate(-1deg); margin-left: 73px; }
.weg--lunda .weg-text { color: #e60fbf; transform: rotate(3deg); margin-left: 120px; }
.weg:hover .weg-text { text-decoration: underline; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .weg--bohr .weg-logo img { filter: invert(1); } }

/* Mobil */
/* Kopf: Hamburger-Menü, sobald die sechs Punkte nicht mehr in eine Zeile passen */
@media (max-width: 74.99em) {
    .kopf-innen { min-height: 5.5rem; padding: 0 1rem; align-items: center; flex-wrap: wrap; }
    .kopf-logo img { width: 190px; }
    .nav-toggle {
        display: inline-flex; align-items: center; justify-content: center; order: 3; width: 2.75rem; height: 2.75rem;
        border: 0; background: transparent; color: #fff; cursor: pointer;
    }
    .nav-toggle-strich, .nav-toggle-strich::before, .nav-toggle-strich::after {
        display: block; width: 24px; height: 2px; background: currentColor; position: relative; transition: transform .2s;
    }
    .nav-toggle-strich::before, .nav-toggle-strich::after { content: ''; position: absolute; left: 0; }
    .nav-toggle-strich::before { top: -7px; }
    .nav-toggle-strich::after { top: 7px; }
    .nav-toggle[aria-expanded="true"] .nav-toggle-strich { background: transparent; }
    .nav-toggle[aria-expanded="true"] .nav-toggle-strich::before { transform: translateY(7px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .nav-toggle-strich::after { transform: translateY(-7px) rotate(-45deg); }
    .thema-knopf { order: 2; }
    .kopf-nav { order: 4; flex-basis: 100%; display: none; }
    .nav-offen .kopf-nav { display: block; }
    .kopf-nav ul { flex-direction: column; padding-bottom: 1rem; }
    .kopf-nav a { padding: .9rem .5rem; border-top: 1px solid rgba(255, 255, 255, .1); }
    .kopf-nav li { display: block; }
    .kopf-nav a { display: block; }
}
@media (max-width: 61em) {
    .inhalt { padding: 2rem 1rem 3rem; }
    .reihe--spalten { grid-template-columns: 1fr; gap: 1.2rem; }
    .weggabelung { grid-template-columns: 1fr; gap: 3rem; padding: 1.5rem 1.25rem 3rem; }
    .weg--bohr .weg-bild { margin-top: 40px; }
    .weg--bohr .weg-logo { left: 8%; top: -10px; }
    .weg--bohr .weg-logo img { width: 220px; }
    .weg--lunda .weg-logo { right: -6px; top: 18px; }
    .weg--lunda .weg-logo img { width: 90px; }
    .weg-text { font-size: 24px; margin-left: 10% !important; }
    .galerie img { height: 140px; }
    .formular-zeile { grid-template-columns: 1fr; }
    .karte { height: 320px; }
    .modal figure { padding: 3.5rem .5rem 1rem; }
}
@media print {
    .kopf-nav, .nav-toggle, .thema-knopf, .abspieler-start, .karte, .formular { display: none !important; }
    .kopf { background: none; color: #000; }
    .fuss { box-shadow: none; }
}