/* CMS-Demo (/cms/demo): abgespeckter Editor des Muenzlein-CMS. Jeder Baustein ist im Editor eine Karte und auf der
   Website derselbe DOM-Knoten: Beim Wechsel bekommt Baustein für Baustein die Klasse .gerendert, und Rahmen, Abstände,
   Schriftgrößen und Farben gleiten in die Website-Form („morphen“). Verhalten in /files/demo.js. */

.dm { --dm-akzent: #2f6fed; --dm-akzent-2: #ffb020; --dm-dunkel: #1b2440; --dm-kurve: cubic-bezier(.65, 0, .25, 1); --dm-dauer: .7s;
    position: relative; border-radius: 22px; overflow: hidden; background: #0d1336; border: 1px solid var(--rand-2); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9); color: #1b2440; font-family: 'Exo 2', system-ui, sans-serif; }
.dm *, .dm *::before, .dm *::after { box-sizing: border-box; }

/* Fensterleiste mit Umschalter */
.dm-leiste { display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; background: #0a0f2b; border-bottom: 1px solid rgba(255, 255, 255, .08); color: #c9d1ef; }
.dm-punkte { display: flex; gap: 6px; } .dm-punkte i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .dm-punkte i:nth-child(2) { background: #febc2e; } .dm-punkte i:nth-child(3) { background: #28c840; }
.dm-adresse { flex: 1; min-width: 0; max-width: 340px; margin: 0 auto; padding: .3rem .9rem; border-radius: 8px; background: rgba(255, 255, 255, .06); color: #8d97c0; font-size: .82rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .4s; }
.dm.vorschau .dm-adresse { color: #e3e8ff; }
.dm-modus { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); isolation: isolate; }
.dm-modus-marke { position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--gelb, #ffc61a); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.dm.vorschau .dm-modus-marke { transform: translateX(100%); }
.dm-modus button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .45rem 1rem; border: 0; background: none; color: #c9d1ef; font: 700 .86rem 'Exo 2', sans-serif; cursor: pointer; transition: color .3s; white-space: nowrap; }
.dm-modus button[aria-pressed="true"] { color: #111; }
.dm-zuruecksetzen { border: 0; background: none; color: #8d97c0; cursor: pointer; font-size: .9rem; padding: .3rem .4rem; border-radius: 8px; }
.dm-zuruecksetzen:hover { color: #fff; background: rgba(255, 255, 255, .08); }

/* Arbeitsfläche: Seitenleiste | (Werkzeugleiste über Leinwand) */
.dm-flaeche { display: grid; grid-template-columns: 240px minmax(0, 1fr); height: 720px; transition: grid-template-columns var(--dm-dauer) var(--dm-kurve); }
.dm.vorschau .dm-flaeche { grid-template-columns: 0px minmax(0, 1fr); }
.dm-seite { overflow: hidden auto; padding: 1rem .8rem; background: #0d1336; color: #c9d1ef; border-right: 1px solid rgba(255, 255, 255, .07); transition: opacity .4s; min-width: 0; }
.dm.vorschau .dm-seite { opacity: 0; pointer-events: none; }
.dm-seite h3 { margin: .2rem .4rem .5rem; color: #7d87b3; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.dm-seiten, .dm-gliederung { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 2px; }
.dm-seiten button, .dm-gliederung button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .6rem; border: 0; border-radius: 10px; background: none; color: #c9d1ef; font: 600 .9rem 'Exo 2', sans-serif; text-align: left; cursor: pointer; transition: background .2s, color .2s; }
.dm-seiten button:hover, .dm-gliederung button:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.dm-seiten button[aria-current] { background: rgba(255, 198, 26, .14); color: #fff; }
.dm-seiten i, .dm-gliederung i { width: 1.1rem; text-align: center; color: var(--gelb, #ffc61a); font-size: .85rem; }
.dm-gliederung button { font-weight: 500; font-size: .84rem; color: #a7b0d6; }
.dm-gliederung button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-gliederung li { animation: dm-rein .35s var(--dm-kurve); }

.dm-haupt { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }
.dm-palette { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dm-dauer) var(--dm-kurve), opacity .4s; background: #11184a; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.dm-palette > div { overflow: hidden; display: flex; align-items: center; gap: .45rem; padding: .7rem .9rem; overflow-x: auto; scrollbar-width: none; }
.dm.vorschau .dm-palette { grid-template-rows: 0fr; opacity: 0; border-bottom-color: transparent; }
.dm.vorschau .dm-palette > div { padding-block: 0; }
.dm-palette span { flex: none; margin-right: .3rem; color: #7d87b3; font-size: .78rem; font-weight: 700; }
.dm-palette button { flex: none; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border: 1px dashed rgba(255, 255, 255, .22); border-radius: 12px; background: rgba(255, 255, 255, .04); color: #e3e8ff; font: 600 .86rem 'Exo 2', sans-serif; cursor: pointer; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), border-color .2s, background .2s; }
.dm-palette button i { color: var(--gelb, #ffc61a); }
.dm-palette button:hover { transform: translateY(-2px); border-color: var(--gelb, #ffc61a); background: rgba(255, 198, 26, .1); }

/* Leinwand */
.dm-leinwand { position: relative; overflow: auto; background: #e9edf5; transition: background var(--dm-dauer) var(--dm-kurve); scroll-behavior: smooth; }
.dm.vorschau .dm-leinwand { background: #fff; }
.dm-blatt { max-width: 760px; margin: 0 auto; padding: 1.4rem 1.4rem 3rem; transition: max-width var(--dm-dauer) var(--dm-kurve), padding var(--dm-dauer) var(--dm-kurve); }
.dm.vorschau .dm-blatt { max-width: 820px; padding: 0 2rem 0; }

/* Kopf und Fuß der Website: im Editor zusammengeklappt */
.dm-website-kopf, .dm-website-fuss { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dm-dauer) var(--dm-kurve); }
.dm-website-kopf > div, .dm-website-fuss > div { overflow: hidden; }
.dm.vorschau .dm-website-kopf, .dm.vorschau .dm-website-fuss { grid-template-rows: 1fr; }
.dm-website-kopf nav { display: flex; align-items: center; gap: 1.4rem; padding: 1.1rem 2rem; border-bottom: 1px solid #eef1f6; opacity: 0; transform: translateY(-14px); transition: opacity .5s, transform .6s var(--dm-kurve); }
.dm.vorschau .dm-website-kopf nav { opacity: 1; transform: none; transition-delay: .25s; }
.dm-website-kopf strong { margin-right: auto; display: flex; align-items: center; gap: .55rem; color: var(--dm-dunkel); font-size: 1.15rem; font-weight: 800; }
.dm-website-kopf strong i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--dm-akzent); color: #fff; font-size: .9rem; }
.dm-website-kopf a { color: #5b6585; font-weight: 600; font-size: .92rem; cursor: pointer; }
.dm-website-kopf a[aria-current], .dm-website-kopf a:hover { color: var(--dm-akzent); }
.dm-website-fuss p { margin: 0; padding: 1.4rem 2rem; background: var(--dm-dunkel); color: #aab3d3; font-size: .85rem; text-align: center; opacity: 0; transition: opacity .6s .3s; }
.dm.vorschau .dm-website-fuss p { opacity: 1; }

/* ---------- Bausteine: Editor-Form ---------- */
.dm-b { position: relative; margin: 0 0 .9rem; padding: .9rem 1rem 1rem; border-radius: 16px; background: #fff; border: 1.5px solid #d9e0ec; box-shadow: 0 8px 22px -16px rgba(20, 30, 60, .35);
    transition: padding var(--dm-dauer) var(--dm-kurve), margin var(--dm-dauer) var(--dm-kurve), border-radius var(--dm-dauer) var(--dm-kurve), background var(--dm-dauer), border-color var(--dm-dauer), box-shadow var(--dm-dauer), transform .5s var(--dm-kurve), opacity .4s; }
.dm-b:hover { border-color: #b8c4da; }
.dm-b.fokus { border-color: var(--dm-akzent); box-shadow: 0 0 0 4px rgba(47, 111, 237, .15); }
.dm-b-kopf { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dm-dauer) var(--dm-kurve), opacity .35s; }
.dm-b-kopf > div { overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding-bottom: .6rem; transition: padding var(--dm-dauer) var(--dm-kurve); }
.dm-b-typ { display: inline-flex; align-items: center; gap: .4rem; color: #6d7896; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dm-b-typ i { color: var(--dm-akzent); }
.dm-b-akt { display: flex; gap: 2px; }
.dm-b-akt button { width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: #8a94b0; cursor: pointer; transition: background .2s, color .2s; }
.dm-b-akt button:hover { background: #eef2f8; color: var(--dm-dunkel); }
.dm-b-akt button.weg:hover { background: #fdecec; color: #c0392b; }
.dm-e { outline: 0; border-radius: 8px; transition: font-size var(--dm-dauer) var(--dm-kurve), line-height var(--dm-dauer) var(--dm-kurve), color var(--dm-dauer), padding var(--dm-dauer) var(--dm-kurve), background var(--dm-dauer), box-shadow .2s, letter-spacing var(--dm-dauer); }
.dm-e[contenteditable="true"] { cursor: text; box-shadow: inset 0 0 0 1px transparent; }
.dm-e[contenteditable="true"]:hover { box-shadow: inset 0 0 0 1px #d4dcea; }
.dm-e[contenteditable="true"]:focus { box-shadow: inset 0 0 0 2px rgba(47, 111, 237, .45); background: #f7f9ff; }
.dm-e:empty::before { content: attr(data-platzhalter); color: #a3acc4; }

.dm-b-hl .dm-e { margin: 0; padding: .2rem .35rem; font-size: 1.25rem; line-height: 1.25; font-weight: 800; color: var(--dm-dunkel); letter-spacing: -.01em; }
.dm-b-text .dm-e { margin: 0; padding: .3rem .35rem; font-size: .95rem; line-height: 1.6; color: #4a5470; }
.dm-bild { position: relative; height: 130px; border-radius: 12px; overflow: hidden; cursor: pointer; transition: height var(--dm-dauer) var(--dm-kurve), border-radius var(--dm-dauer) var(--dm-kurve), box-shadow var(--dm-dauer); }
.dm-bild::after { content: 'Motiv wechseln'; position: absolute; right: 10px; bottom: 10px; padding: .25rem .6rem; border-radius: 99px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .74rem; font-weight: 700; transition: opacity .3s; }
.dm-b-bild .dm-e { margin: .5rem 0 0; padding: .1rem .35rem; font-size: .82rem; color: #7d87a3; text-align: left; transition: font-size var(--dm-dauer), color var(--dm-dauer), text-align 0s; }
.dm-knopf { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem; border-radius: 10px; border: 1.5px dashed #b6c2d9; color: var(--dm-dunkel); font-weight: 700; font-size: .92rem; transition: padding var(--dm-dauer) var(--dm-kurve), border-radius var(--dm-dauer) var(--dm-kurve), background var(--dm-dauer), color var(--dm-dauer), border-color var(--dm-dauer), box-shadow var(--dm-dauer), font-size var(--dm-dauer); }
.dm-knopf .dm-e { padding: 0 .2rem; }
.dm-zitat { padding: .5rem .7rem; border-left: 3px solid #cbd5e6; border-radius: 6px; transition: padding var(--dm-dauer) var(--dm-kurve), border-radius var(--dm-dauer) var(--dm-kurve), background var(--dm-dauer), color var(--dm-dauer), border-color var(--dm-dauer); }
.dm-zitat .dm-e:first-child { font-size: 1rem; font-style: italic; color: var(--dm-dunkel); }
.dm-zitat .dm-e + .dm-e { margin-top: .3rem; font-size: .8rem; color: #7d87a3; font-weight: 700; }
.dm-termine { display: grid; gap: .45rem; transition: gap var(--dm-dauer) var(--dm-kurve); }
.dm-termin { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: .8rem; padding: .45rem .55rem; border-radius: 10px; background: #f3f6fb; transition: padding var(--dm-dauer) var(--dm-kurve), background var(--dm-dauer), box-shadow var(--dm-dauer), border-radius var(--dm-dauer) var(--dm-kurve); }
.dm-datum { display: grid; place-items: center; height: 48px; border-radius: 10px; background: #e2e8f3; color: var(--dm-dunkel); font-weight: 800; font-size: .82rem; line-height: 1.15; text-align: center; transition: height var(--dm-dauer) var(--dm-kurve), background var(--dm-dauer), color var(--dm-dauer), font-size var(--dm-dauer); }
.dm-datum small { display: block; font-size: .68rem; font-weight: 700; opacity: .7; }
.dm-termin .dm-e { padding: .1rem .3rem; font-weight: 700; font-size: .92rem; transition: font-size var(--dm-dauer); }
.dm-termin .dm-e + .dm-e { font-weight: 500; font-size: .8rem; color: #7d87a3; }
.dm-leer { margin: 2rem 0; padding: 2rem 1rem; border: 2px dashed #c6d0e2; border-radius: 16px; color: #7d87a3; text-align: center; transition: opacity .4s; }
.dm.vorschau .dm-leer { opacity: 0; }

/* ---------- Bausteine: Website-Form (je Baustein nacheinander .gerendert) ---------- */
.dm-b.gerendert { margin: 0; padding: .75rem 0; border-radius: 0; background: transparent; border-color: transparent; box-shadow: none; }
.dm-b.gerendert .dm-b-kopf { grid-template-rows: 0fr; opacity: 0; }
.dm-b.gerendert .dm-b-kopf > div { padding-bottom: 0; }
.dm-b.gerendert .dm-e { box-shadow: none !important; background: none !important; cursor: default; }
.dm-b-hl.gerendert { padding-top: 1.6rem; }
.dm-b-hl.gerendert .dm-e { padding: 0; font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.1; letter-spacing: -.03em; color: var(--dm-dunkel); }
.dm-b-text.gerendert .dm-e { padding: 0; font-size: 1.06rem; line-height: 1.7; color: #3d4763; }
.dm-b-bild.gerendert .dm-bild { height: 280px; border-radius: 22px; box-shadow: 0 30px 50px -30px rgba(20, 30, 60, .6); cursor: default; }
.dm-b-bild.gerendert .dm-bild::after { opacity: 0; }
.dm-b-bild.gerendert .dm-e { font-size: .86rem; color: #8a93ad; text-align: center; }
.dm-b-knopf.gerendert .dm-knopf { padding: .85rem 1.5rem; border-radius: 999px; border-color: var(--dm-akzent); background: var(--dm-akzent); color: #fff; font-size: 1rem; box-shadow: 0 14px 28px -14px rgba(47, 111, 237, .9); }
.dm-b-zitat.gerendert .dm-zitat { padding: 1.8rem 2rem; border-left-color: var(--dm-akzent-2); border-radius: 22px; background: linear-gradient(135deg, var(--dm-dunkel), #2b3a7a); color: #fff; }
.dm-b-zitat.gerendert .dm-zitat .dm-e:first-child { font-size: 1.45rem; font-weight: 700; font-style: normal; color: #fff; line-height: 1.35; }
.dm-b-zitat.gerendert .dm-zitat .dm-e + .dm-e { color: var(--dm-akzent-2); font-size: .9rem; }
.dm-b-termine.gerendert .dm-termine { gap: .8rem; }
.dm-b-termine.gerendert .dm-termin { padding: .8rem; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #e6ebf3, 0 14px 30px -22px rgba(20, 30, 60, .5); }
.dm-b-termine.gerendert .dm-datum { height: 62px; background: var(--dm-akzent); color: #fff; font-size: 1.05rem; }
.dm-b-termine.gerendert .dm-termin .dm-e { font-size: 1.02rem; }

/* Neu, entfernt, verschoben */
.dm-b.neu { animation: dm-neu .55s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes dm-neu { from { opacity: 0; transform: translateY(-12px) scale(.96); } }
.dm-b.geht { opacity: 0; transform: scale(.94); }
@keyframes dm-rein { from { opacity: 0; transform: translateX(-6px); } }
.dm-b.blitz { animation: dm-blitz .9s ease-out; }
@keyframes dm-blitz { 0% { box-shadow: 0 0 0 0 rgba(255, 176, 32, .7); } 100% { box-shadow: 0 0 0 14px rgba(255, 176, 32, 0); } }

/* Hinweisblase */
.dm-tipp { position: absolute; left: 50%; bottom: 18px; z-index: 5; transform: translateX(-50%); padding: .6rem 1rem; border-radius: 999px; background: rgba(13, 19, 54, .92); color: #fff; font-size: .86rem; font-weight: 600; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .6); white-space: nowrap; animation: dm-tipp 5s 1.2s both; pointer-events: none; }
.dm-tipp i { color: var(--gelb, #ffc61a); margin-right: .35rem; }
@keyframes dm-tipp { 0% { opacity: 0; transform: translate(-50%, 10px); } 8%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* Motive (ohne Bilddateien) */
.dm-motiv-berge { background: linear-gradient(transparent 55%, rgba(0,0,0,.08)), radial-gradient(circle at 75% 32%, #ffe08a 0 7%, transparent 7.5%), linear-gradient(160deg, transparent 52%, #3b5bdb 52.2%, #2f4fc4 70%, transparent 70.2%), linear-gradient(200deg, transparent 58%, #5c7cfa 58.2%), linear-gradient(#a5d8ff, #e7f5ff 70%); }
.dm-motiv-see { background: radial-gradient(circle at 30% 30%, #fff3bf 0 9%, transparent 9.5%), linear-gradient(transparent 58%, #339af0 58%, #1c7ed6 80%, #1971c2), linear-gradient(175deg, transparent 50%, #2b8a3e 50.3%, #2f9e44 60%, transparent 60.3%), linear-gradient(#ffd8a8, #ffe8cc 60%); }
.dm-motiv-wald { background: linear-gradient(transparent 70%, #2b8a3e 70%), repeating-linear-gradient(90deg, transparent 0 22px, rgba(43,138,62,.0) 22px 40px), conic-gradient(from 150deg at 20% 72%, transparent 0 60deg, #2f9e44 60deg 120deg, transparent 0), conic-gradient(from 150deg at 45% 70%, transparent 0 60deg, #37b24d 60deg 120deg, transparent 0), conic-gradient(from 150deg at 72% 74%, transparent 0 60deg, #2b8a3e 60deg 120deg, transparent 0), linear-gradient(#d3f9d8, #ebfbee); }

@media (max-width: 860px) {
    .dm-flaeche { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 680px; }
    .dm.vorschau .dm-flaeche { grid-template-columns: minmax(0, 1fr); }
    .dm-seite { padding: .5rem .6rem; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .07); transition: opacity .4s, max-height var(--dm-dauer) var(--dm-kurve), padding var(--dm-dauer); max-height: 80px; }
    .dm.vorschau .dm-seite { max-height: 0; padding-block: 0; }
    .dm-seite h3, .dm-gliederung, .dm-seite h3 + .dm-gliederung { display: none; }
    .dm-seiten { display: flex; margin: 0; overflow-x: auto; }
    .dm-seiten button { white-space: nowrap; }
    .dm-website-kopf nav { gap: .9rem; padding: .9rem 1rem; }
    .dm-website-kopf a { font-size: .82rem; }
    .dm-blatt, .dm.vorschau .dm-blatt { padding-inline: 1rem; }
    .dm-adresse, .dm-punkte { display: none; }
    .dm-leiste { padding: .55rem .6rem; }
    .dm-modus { flex: 1; }
    .dm-modus button { padding: .45rem .5rem; font-size: .8rem; }
    .dm-website-kopf nav { flex-wrap: wrap; row-gap: .4rem; }
    .dm-website-kopf strong { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .dm, .dm * { transition-duration: .01ms !important; animation: none !important; } }
.dm.vorschau .dm-tipp { display: none; }