/* Gemeinsame Grundlagen der drei Konzept-Websites (Atelier Noir, Classic by Nature, Stonebridge).
   Jede Seite setzt ihre eigenen Farben und Schriften; hier stehen Reset, Zugänglichkeit und der
   Hinweis „Konzeptarbeit von nomm". */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img { display: block; max-width: 100%; }
p, h1, h2, h3, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-weight: inherit; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .2em; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.wrap { width: min(100% - 2 * var(--gut), var(--max)); margin-inline: auto; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 300; padding: .8rem 1.2rem; background: #fff; color: #111; font-weight: 700; }
.skip:focus { left: 1rem; top: 1rem; }

.kbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem 1.5rem; padding: .6rem clamp(1rem, 4vw, 2.5rem); background: #17100B; color: #F9F3EE; font: 600 .74rem/1.4 ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.kbar a { display: inline-flex; align-items: center; min-height: 1.75rem; color: #F4D2B0; font-weight: 700; }
.kbar a:hover { color: #fff; }
.kbar :focus-visible { outline-color: #F4D2B0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* KARTE-START */
/* ---------- Kartenskizze im Kontaktbereich (Abschnitt "So finden Sie uns", erzeugt von konzept_karte.py und add_karten.py) ---------- */
.kmap-sec { padding: clamp(2.4rem, 6vw, 4.5rem) 0; }
.kmap-in { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }
.kmap-sec .kmap-h { margin: 0 0 1.1rem; font-family: inherit; font-size: clamp(1.35rem, 2.6vw, 2rem); font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; color: inherit; text-box: trim-start cap alphabetic; }
.kmap { margin: 0; }
.kmap .m-svg { display: block; width: 100%; height: auto; aspect-ratio: 2.35 / 1; border-radius: 10px; box-shadow: 0 0 0 1px var(--m-edge); }
@media (max-width: 699px) { .kmap .m-svg { aspect-ratio: 4 / 3; } }
@media (min-width: 700px) { .kmap .m-svg { aspect-ratio: 2.35 / 1; } }
.kmap figcaption { margin-top: .75rem; font-size: .92rem; line-height: 1.5; color: inherit; }
.kmap-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem clamp(1.4rem, 4vw, 3.4rem); align-items: start; }
.kmap-adr { font-size: 1.1rem; line-height: 1.55; }
.kmap-adr p { margin: 0 0 1rem; }
.kmap-adr .kmap-n { font-size: 1.35rem; font-weight: 700; line-height: 1.25; margin-bottom: .55rem; }
/* Schrift neben der Karte beginnt oben bündig mit der Oberkante der Karte (Versalhöhe der ersten Zeile = Kartenrand); ältere Browser: ungefähr per negativem Abstand */
@supports not (text-box: trim-start cap alphabetic) { .kmap-adr { margin-top: -.4em; } }
.kmap-adr .kmap-lab { display: block; margin-bottom: .1rem; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.kmap-adr a { color: inherit; text-underline-offset: .2em; }
.kmap-adr .kmap-x { font-size: .95rem; opacity: .85; }
.kmap-row .kmap .m-svg { aspect-ratio: 16 / 10; }
@media (max-width: 699px) { .kmap-row { grid-template-columns: minmax(0, 1fr); } .kmap-row .kmap .m-svg { aspect-ratio: 4 / 3; } }
.kmap figcaption b { font-weight: 600; }
.kmap figcaption small { display: block; margin-top: .15rem; font-size: .8rem; opacity: .72; }
.kmap--warm { --m-land: #FAF6EA; --m-block: #E8DEC8; --m-bldg: #D8CCB1; --m-hl: #F2DEB3; --m-park: #C8D8AE; --m-tree: #A6BE88; --m-water: #B9D2DA; --m-wc: #A4BEC8; --m-t: #5B4C39; --m-tag: #FFFFFF; --m-tagt: #2A1E12; --m-edge: rgba(60, 40, 20, .22); }
.kmap--cool { --m-land: #F5F7F9; --m-block: #DFE5EA; --m-bldg: #CDD5DC; --m-hl: #D9E4F0; --m-park: #CDE0CE; --m-tree: #A8C8A9; --m-water: #BBD5E6; --m-wc: #A3C0D4; --m-t: #3E4B59; --m-tag: #FFFFFF; --m-tagt: #152230; --m-edge: rgba(20, 40, 60, .22); }
.kmap--sage { --m-land: #F6F9F3; --m-block: #E1E9DE; --m-bldg: #D0DBCB; --m-hl: #DCEBD8; --m-park: #C6DDB9; --m-tree: #9FC48C; --m-water: #B8D7DD; --m-wc: #9FC2CB; --m-t: #34503F; --m-tag: #FFFFFF; --m-tagt: #16302A; --m-edge: rgba(22, 48, 42, .22); }
.kmap--mono { --m-land: #FFFFFF; --m-block: #ECECEA; --m-bldg: #DCDCD9; --m-hl: #E4E7FF; --m-park: #DCE6D5; --m-tree: #BFD0B4; --m-water: #D5E2EB; --m-wc: #C2D3DF; --m-t: #3A3A3C; --m-tag: #FFFFFF; --m-tagt: #0B0B0C; --m-edge: rgba(0, 0, 0, .2); }
.kmap--dark { --m-land: #38281C; --m-block: #271B13; --m-bldg: #3B2B1F; --m-hl: #4A3523; --m-park: #2B3A25; --m-tree: #3F5535; --m-water: #213B44; --m-wc: #1A2F37; --m-t: #D9C7AC; --m-tag: #F6EDE2; --m-tagt: #2A130B; --m-edge: rgba(255, 255, 255, .16); }
.kmap--night { --m-land: #2A3541; --m-block: #1B232B; --m-bldg: #2B3641; --m-hl: #2A3B52; --m-park: #1F3329; --m-tree: #2F4A3A; --m-water: #1B3646; --m-wc: #152B38; --m-t: #BCCAD8; --m-tag: #FFFFFF; --m-tagt: #0E1520; --m-edge: rgba(255, 255, 255, .16); }
.kmap--grey { --m-land: #EEEEEC; --m-block: #D4D4D2; --m-bldg: #C4C4C1; --m-hl: #EDD3C9; --m-park: #C6D0BC; --m-tree: #A9BA9B; --m-water: #BCC9CE; --m-wc: #A8B8BE; --m-t: #3A3A39; --m-tag: #FFFFFF; --m-tagt: #1E1E1E; --m-edge: rgba(30, 30, 30, .22); }
:root[data-theme="dark"] .kmap--grey { --m-land: #2E2E2E; --m-block: #232323; --m-bldg: #363636; --m-hl: #46312A; --m-park: #2B3427; --m-tree: #3C4C36; --m-water: #243238; --m-wc: #1D2A2F; --m-t: #CFCFCF; --m-tag: #FDFCFB; --m-tagt: #1E1E1E; --m-edge: rgba(255, 255, 255, .16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kmap--grey { --m-land: #2E2E2E; --m-block: #232323; --m-bldg: #363636; --m-hl: #46312A; --m-park: #2B3427; --m-tree: #3C4C36; --m-water: #243238; --m-wc: #1D2A2F; --m-t: #CFCFCF; --m-tag: #FDFCFB; --m-tagt: #1E1E1E; --m-edge: rgba(255, 255, 255, .16); } }
.kmap--forest { --m-land: #22302A; --m-block: #17211C; --m-bldg: #2A3A32; --m-hl: #3A3524; --m-park: #263B2B; --m-tree: #3B5A42; --m-water: #1E3A40; --m-wc: #162D32; --m-t: #CFC7AE; --m-tag: #F4EEE2; --m-tagt: #2B2A24; --m-edge: rgba(255, 255, 255, .16); }
.kmap--lav { --m-land: #FBF8FF; --m-block: #E6DDF4; --m-bldg: #D6CAEA; --m-hl: #F8D5E5; --m-park: #CDE5D8; --m-tree: #A6D2C6; --m-water: #C3DDEB; --m-wc: #AACBDD; --m-t: #4A3B5E; --m-tag: #FFFFFF; --m-tagt: #1A1418; --m-edge: rgba(60, 40, 90, .24); }
:root[data-theme="dark"] .kmap--mono { --m-land: #2B2B2E; --m-block: #1E1E20; --m-bldg: #343437; --m-hl: #232A55; --m-park: #25302A; --m-tree: #3A4A3D; --m-water: #1E2C3A; --m-wc: #17232F; --m-t: #CFCFD2; --m-tag: #FFFFFF; --m-tagt: #0B0B0C; --m-edge: rgba(255, 255, 255, .16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kmap--mono { --m-land: #2B2B2E; --m-block: #1E1E20; --m-bldg: #343437; --m-hl: #232A55; --m-park: #25302A; --m-tree: #3A4A3D; --m-water: #1E2C3A; --m-wc: #17232F; --m-t: #CFCFD2; --m-tag: #FFFFFF; --m-tagt: #0B0B0C; --m-edge: rgba(255, 255, 255, .16); } }
.kmap-sec--cover { position: relative; z-index: 40; background: var(--bg); }
/* kleine Karte in einer Tafel auf der Bühne (ohne Beschriftung, nur Straßen, Nadel und Haltestelle) */
.hmap { display: flex; align-items: flex-end; gap: .9cqw; margin: .8cqw 0 0; }
.hmap .hours { flex: 1 1 0; min-width: 0; margin: 0; text-wrap: balance; }
.hmap .kmap--mini { flex: 0 0 8.6cqw; margin: 0; }
.kmap--mini { margin: .9rem 0 0; }
.kmap--mini .m-svg { aspect-ratio: 4 / 3; border-radius: 4px; }
.prices .kmap--mini .m-svg { border-radius: 0; border: max(2px, .28cqw) solid #111; box-shadow: .35cqw .35cqw 0 #111; }
/* Adresse links, Karte rechts daneben, Karte so hoch wie die Adresse */
.amap { display: flex; align-items: stretch; gap: .9rem; }
.amap > address { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.amap .kmap--mini { position: relative; flex: 0 0 7.4rem; margin: 0; min-height: 4.6rem; }
.amap .kmap--mini .m-svg { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
@media (max-width: 480px) { .amap .kmap--mini { flex-basis: 5.6rem; } }
.kmap--mini .m-t, .kmap--mini .m-tag, .kmap--mini .m-tt, .kmap--mini .m-cp, .kmap--mini .m-cn, .kmap--mini .m-ct, .kmap--mini .m-sc, .kmap--mini .m-st { display: none; }
@media (max-width: 699px) { .hmap { gap: .8rem; margin-top: .8rem; } .hmap .kmap--mini { flex-basis: 7.5rem; } .prices .kmap--mini .m-svg { border-width: 3px; box-shadow: 4px 4px 0 #111; } }
.m-land { fill: var(--m-land); }
.m-block { fill: var(--m-block); }
.m-block.m-hl { fill: var(--m-hl); }
.m-park { fill: var(--m-park); }
.m-tree { fill: var(--m-tree); }
.m-bldg { fill: var(--m-bldg); }
.m-house { fill: var(--m-pin); opacity: .8; }
.m-wc { fill: none; stroke: var(--m-wc); stroke-width: 40; stroke-linecap: round; }
.m-water { fill: none; stroke: var(--m-water); stroke-width: 34; stroke-linecap: round; }
.m-br { fill: none; stroke: var(--m-land); stroke-width: 12; }
.m-t { font: 600 11px var(--sans, system-ui, sans-serif); letter-spacing: .08em; text-transform: uppercase; fill: var(--m-t); paint-order: stroke; stroke: var(--m-land); stroke-width: 3px; stroke-linejoin: round; }
.m-ts { font-size: 12px; font-weight: 700; }
.m-u { fill: #D12B2B; }
.m-b { fill: #2F6FB5; }
.m-ut { font: 700 11px system-ui, sans-serif; fill: #fff; }
.m-sh { fill: rgba(0, 0, 0, .28); }
.m-pin { fill: var(--m-pin); stroke: rgba(0, 0, 0, .38); stroke-width: 1; }
.m-dot { fill: #fff; }
.m-pu { fill: var(--m-pin); opacity: .26; transform-box: fill-box; transform-origin: center; }
.m-tag { fill: var(--m-tag); stroke: var(--m-edge); }
.m-tt { font: 600 13px var(--sans, system-ui, sans-serif); fill: var(--m-tagt); }
.m-cp { fill: var(--m-land); stroke: var(--m-edge); }
.m-cn { fill: var(--m-t); }
.m-ct { font: 700 8px var(--sans, system-ui, sans-serif); fill: var(--m-t); }
.m-sc { fill: none; stroke: var(--m-t); stroke-width: 1.4; }
.m-st { font: 600 9px var(--sans, system-ui, sans-serif); fill: var(--m-t); paint-order: stroke; stroke: var(--m-land); stroke-width: 3px; }
@media (prefers-reduced-motion: no-preference) { .m-pu { animation: m-pulse 2.8s ease-out infinite; } }
@keyframes m-pulse { from { transform: scale(.7); opacity: .4; } to { transform: scale(3.2); opacity: 0; } }
/* KARTE-ENDE */