/* Demo-Projekte und Domain-Prüfung (Startseite) */
.dm-raster { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 8px; }
.dm-raster > .dm-karte { grid-column: span 2; }
.dm-raster > .dm-karte:nth-child(4) { grid-column: 2 / span 2; }
@media (min-width: 1280px) { .dm-raster { grid-template-columns: repeat(5, 1fr); } .dm-raster > .dm-karte, .dm-raster > .dm-karte:nth-child(4) { grid-column: auto; } }
@media (max-width: 900px) { .dm-raster { grid-template-columns: 1fr 1fr; } .dm-raster > .dm-karte, .dm-raster > .dm-karte:nth-child(4) { grid-column: auto; } }
@media (max-width: 520px) { .dm-raster { grid-template-columns: 1fr; } }
.dm-karte { display: grid; grid-template-rows: auto 1fr; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid #e1e7e4; box-shadow: 0 10px 26px -14px #14323a40; transition: transform .25s, box-shadow .25s; }
.dm-karte:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -16px #14323a59; }
.dm-bild { position: relative; height: 150px; background: linear-gradient(135deg, var(--dm), #14323a); }
.dm-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-bild::after { content: ""; position: absolute; inset: auto 0 0; height: 5px; background: var(--dm); }
.dm-art { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; background: #ffffffe6; color: #14323a; font: 800 11.5px Manrope, "Segoe UI", system-ui, sans-serif; }
.dm-inhalt { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; font-family: Manrope, "Segoe UI", system-ui, sans-serif; }
.dm-inhalt small { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dm); filter: brightness(.85); }
.dm-inhalt h3 { margin: 0; font-size: 17px; color: #14323a; }
.dm-inhalt p { margin: 0 0 6px; color: #5f7177; font-size: 13.5px; line-height: 1.45; flex: 1; }
#creatorHome .dm-los { align-self: flex-start; height: 40px; padding: 0 16px; border-radius: 12px; border: 0 !important; background: #1d6d5e !important; color: #fff !important; font: 800 13.5px Manrope, "Segoe UI", system-ui, sans-serif; cursor: pointer; box-shadow: 0 6px 14px -6px #1d6d5e99 !important; }
#creatorHome .dm-los:hover { background: #24806e !important; }
#creatorHome .dm-los:disabled { opacity: .7; cursor: progress; }
#hgNav .hg-links a.dm-reiter::after { content: "neu"; margin-left: 5px; padding: 1px 6px; border-radius: 999px; background: #f1d6a8; color: #14323a; font-size: 9.5px; font-weight: 800; vertical-align: 2px; }

/* Leiste „Demoversion“ im Editor */
#dmLeiste { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2147482300; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 8px 8px 8px 10px; border-radius: 16px; background: #14323a; color: #fff; box-shadow: 0 18px 44px #0006; font: 600 13.5px Manrope, "Segoe UI", system-ui, sans-serif; }
#dmLeiste .dm-marke { flex: none; padding: 4px 9px; border-radius: 9px; background: #f1d6a8; color: #14323a; font-weight: 800; font-size: 11px; letter-spacing: .1em; }
#dmLeiste { width: min(880px, calc(100vw - 32px)); }
#dmLeiste .dm-text { flex: 1; min-width: 0; line-height: 1.4; }
#dmLeiste button { flex: none; height: 36px; padding: 0 13px; margin: 0; border: 0 !important; border-radius: 10px; background: #2a9079 !important; color: #fff !important; font: 800 13px Manrope, "Segoe UI", system-ui, sans-serif; cursor: pointer; box-shadow: none !important; min-height: 0; }
#dmLeiste button.dm-neben { background: #ffffff1f !important; }
html.dm-aktiv .at-knopf, html.dm-aktiv body.sm-studio.sm-dock-open:not(.creator-home-open) .at-knopf { bottom: 86px !important; }

/* Gastzugang auf der Anmeldeseite */
.kt-oder { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; color: #8a979c; font-size: 12.5px; font-weight: 700; }
.kt-oder::before, .kt-oder::after { content: ""; flex: 1; height: 1px; background: #dde5e1; }
#kontoTor .kt-gast { width: 100%; display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; border: 1.5px dashed #9cc7bb !important; background: #f3faf7 !important; color: #16564b !important; text-align: left; cursor: pointer; font-family: inherit; }
#kontoTor .kt-gast b { font-size: 15px; } #kontoTor .kt-gast small { color: #5f7177; font-size: 12.5px; }
#kontoTor .kt-gast:hover { background: #e9f6f0 !important; border-style: solid !important; }

@media (max-width: 640px) {
  #dmLeiste { flex-wrap: wrap; justify-content: center; text-align: center; bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) { .dd-zeile, .dd-laedt i { animation: none; } .dm-karte { transition: none; } }

/* Demo-Karten: zwei Wege + Sterne */
#creatorHome button.dm-bild { display: block; width: 100%; padding: 0; margin: 0; border: 0 !important; border-radius: 0; cursor: zoom-in; box-shadow: none !important; min-height: 0; }
.dm-auge { position: absolute; right: 12px; bottom: 14px; padding: 5px 11px; border-radius: 999px; background: #14323ae0; color: #fff; font: 800 12px Manrope, "Segoe UI", system-ui, sans-serif; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.dm-karte:hover .dm-auge, .dm-bild:focus-visible .dm-auge { opacity: 1; transform: none; }
.dm-knoepfe { display: grid; gap: 8px; margin-top: 4px; }
#creatorHome .dm-knoepfe .dm-los { align-self: stretch; width: 100%; }
#creatorHome .dm-gen { height: 38px; padding: 0 14px; border-radius: 12px; border: 1.5px solid #9cc7bb !important; background: #fff !important; color: #16564b !important; font: 800 13px Manrope, "Segoe UI", system-ui, sans-serif; cursor: pointer; box-shadow: none !important; }
#creatorHome .dm-gen:hover { background: #eef7f4 !important; }
.dm-sterne { display: flex; align-items: center; gap: 6px; min-height: 20px; font: 600 12.5px Manrope, "Segoe UI", system-ui, sans-serif; color: #5f7177; }
.dm-sterne b { color: #14323a; }
.dm-inhalt .dm-sterne small { text-transform: none; letter-spacing: 0; color: #66777d; font-weight: 600; font-size: 12px; filter: none; }
.dm-st { position: relative; display: inline-block; color: #d9dfdc; letter-spacing: 1px; font-size: 14px; line-height: 1; }
.dm-st i { position: absolute; inset: 0; width: var(--w); overflow: hidden; color: #e0a83a; font-style: normal; white-space: nowrap; }

/* Vollbild-Ansicht der fertigen Seite */
#dmAnsicht { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0e2a30; color: #fff; font: 14px/1.5 Manrope, "Segoe UI", system-ui, sans-serif; }
#dmAnsicht[open] { display: block; }
#dmAnsicht::backdrop { background: #0b1820; }
#dmAnsicht button, #dmAnsicht textarea { font-family: inherit; margin: 0; box-shadow: none; min-height: 0; }
.dma { display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); height: 100%; width: 100%; overflow: hidden; }
.dma-kopf { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: #0e2a30; border-bottom: 1px solid #ffffff1a; }
.dma-titel { display: grid; flex: none; max-width: 220px; } .dma-titel small { color: var(--dm, #f1d6a8); filter: brightness(1.5); font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; } .dma-titel b { font-size: 16px; }
.dma-seiten { display: flex; gap: 4px; overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: thin; }
#dmAnsicht .dma-seiten button { flex: none; height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid #ffffff26; background: #ffffff0f; color: #ffffffd9; font-weight: 700; cursor: pointer; }
#dmAnsicht .dma-seiten button[aria-current="true"] { background: #fff; color: #14323a; border-color: #fff; }
.dma-geraete { display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: #ffffff14; }
#dmAnsicht .dma-geraete button { height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: #ffffffcc; font-weight: 700; font-size: 12.5px; cursor: pointer; }
#dmAnsicht .dma-geraete button[aria-pressed="true"] { background: #f1d6a8; color: #14323a; }
#dmAnsicht .dma-zu { flex: none; width: 38px; height: 38px; padding: 0; border-radius: 11px; border: 1px solid #ffffff40; background: #ffffff14; color: #fff; font-size: 22px; cursor: pointer; }
.dma-mitte { display: grid; grid-template-columns: minmax(0, 1fr) 320px; min-height: 0; min-width: 0; }
.dma-buehne { min-height: 0; overflow: auto; padding: 18px; background: radial-gradient(circle at 40% 0%, #1d4a4f, #0b1f24 70%); display: flex; justify-content: center; }
.dma-rahmen { position: relative; width: 100%; height: 100%; min-height: 520px; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px #0008; transition: width .35s cubic-bezier(.2, .8, .2, 1); }
.dma-rahmen[data-geraet="tablet"] { width: 820px; max-width: 100%; border-radius: 22px; border: 10px solid #1b1f22; }
.dma-rahmen[data-geraet="handy"] { width: 390px; max-width: 100%; border-radius: 34px; border: 12px solid #1b1f22; }
.dma-rahmen iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.dma-laedt { position: absolute; inset: 0; display: grid; place-items: center; color: #5f7177; font-weight: 700; background: #fff; }
.dma-urteil { overflow-y: auto; padding: 20px 18px; background: #f6f5f0; color: #14323a; display: flex; flex-direction: column; gap: 10px; }
.dma-urteil h3 { margin: 0; font-size: 18px; } .dma-urteil p { margin: 0; color: #5f7177; font-size: 13.5px; }
.dma-sterne { display: flex; gap: 4px; }
#dmAnsicht .dma-sterne button { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: #fff; color: #d4dbd8; font-size: 28px; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px #14323a14; transition: transform .12s, color .12s; }
#dmAnsicht .dma-sterne button.an { color: #e0a83a; }
#dmAnsicht .dma-sterne button:hover { transform: scale(1.08); }
.dma-stufe { min-height: 20px; font-weight: 800; color: #8a5a2b !important; }
.dma-text { display: grid; gap: 4px; margin: 0; font-size: 12.5px; font-weight: 700; color: #34474e; }
#dmAnsicht .dma-text textarea { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1.5px solid #cfdcd6; background: #fff; color: #14323a; font-size: 14px; resize: vertical; }
#dmAnsicht .dma-text textarea:focus { outline: none; border-color: #1d6d5e; box-shadow: 0 0 0 4px #1d6d5e22; }
.dma-hinweis { font-size: 12px !important; }
#dmAnsicht .dma-senden { height: 44px; border: 0; border-radius: 12px; background: #1d6d5e; color: #fff; font-weight: 800; font-size: 14px; cursor: pointer; }
#dmAnsicht .dma-senden:disabled { opacity: .45; cursor: default; }
.dma-danke { padding: 12px 14px; border-radius: 12px; background: #e3f4ed; color: #16564b !important; font-weight: 800; }
.dma-schnitt { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #5f7177; }
.dma-schnitt b { color: #14323a; }
.dma-urteil hr { width: 100%; border: 0; border-top: 1px solid #e1e7e4; margin: 6px 0; }
#dmAnsicht .dma-gen { height: 46px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #f1d6a8, #c99a5b); color: #14323a; font-weight: 800; font-size: 14.5px; cursor: pointer; }
@media (max-width: 900px) {
  .dma-mitte { grid-template-columns: 1fr; grid-template-rows: 1fr auto; overflow-y: auto; }
  .dma-buehne { min-height: 70vh; padding: 10px; }
  .dma-kopf { flex-wrap: wrap; }
  .dma-seiten { order: 3; flex-basis: 100%; }
  .dma-urteil { padding-bottom: 28px; }
}