/* Website-Generator – Oberfläche (Fragebogen, Ergebnis, Admin) */
:root {
  --a: #2f6fe0; --a2: #1f55b8; --a-hell: #eaf1fd;
  --bg: #f5f7fb; --karte: #fff; --text: #1b2330; --leise: #5f6b7c; --rand: #e1e6ee;
  --ok: #1f9d55; --fehler: #d64545;
  --r: 14px;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--schrift); }
a { color: var(--a); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
.huelle { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--a); outline-offset: 2px; }

/* Kopf */
.g-kopf { background: #0f172a; color: #fff; }
.g-kopf .huelle { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; }
.g-marke { color: #fff; text-decoration: none; font-weight: 800; letter-spacing: .02em; }
.g-marke span { color: #8fb4ff; font-weight: 600; }
.g-kopf nav a { color: #cbd5e1; text-decoration: none; margin-left: 18px; font-size: .95rem; }
.g-kopf nav a:hover { color: #fff; }

.g-hero { background: radial-gradient(900px 400px at 10% -10%, rgba(47,111,224,.45), transparent 60%), #0f172a; color: #fff; padding: 56px 0 90px; }
.g-hero h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); max-width: 18ch; }
.g-hero p { max-width: 58ch; color: #cbd5e1; font-size: 1.1rem; }
.g-punkte { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 18px; color: #e2e8f0; font-size: .95rem; }
.g-punkte span::before { content: "✓ "; color: #7ee2a8; font-weight: 700; }

/* Assistent */
.assistent { position: relative; margin-top: -60px; margin-bottom: 60px; background: var(--karte); border-radius: 20px; box-shadow: 0 20px 60px rgba(15,23,42,.12); overflow: hidden; }
.fortschritt { display: flex; border-bottom: 1px solid var(--rand); overflow-x: auto; }
.fortschritt button { flex: 1; min-width: 110px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--leise); font: inherit; font-size: .85rem; cursor: pointer; }
.fortschritt button b { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg); font-size: .85rem; }
.fortschritt button.aktiv { color: var(--text); border-bottom-color: var(--a); font-weight: 600; }
.fortschritt button.aktiv b { background: var(--a); color: #fff; }
.fortschritt button.fertig b { background: var(--ok); color: #fff; }
.schritt { display: none; padding: 34px clamp(20px, 4vw, 44px) 10px; }
.schritt.aktiv { display: block; }
.schritt > h2 { font-size: 1.6rem; }
.schritt > .leise { margin-top: -6px; margin-bottom: 24px; }
.leise { color: var(--leise); }
.fuss-knoepfe { display: flex; justify-content: space-between; gap: 12px; padding: 20px clamp(20px, 4vw, 44px) 30px; border-top: 1px solid var(--rand); margin-top: 26px; }

/* Felder */
.felder { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.felder .ganz { grid-column: 1 / -1; }
label.feld { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
label.feld small { font-weight: 400; color: var(--leise); }
.eingabe, .feld input[type=text], .feld input[type=email], .feld input[type=tel], .feld input[type=url], .feld input[type=number], .feld textarea, .feld select {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--text); background: #fff; border: 1px solid var(--rand); border-radius: 10px;
}
.feld textarea { min-height: 110px; resize: vertical; }
.feld input:focus, .feld textarea:focus, .eingabe:focus { outline: 2px solid var(--a); border-color: transparent; }
.feld.fehlt input { border-color: var(--fehler); background: #fff6f6; }
.hilfe { font-size: .85rem; color: var(--leise); font-weight: 400; }

/* Auswahlkarten */
.kacheln { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.kachel { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 2px solid var(--rand); border-radius: var(--r); cursor: pointer; transition: border-color .2s, box-shadow .2s; background: #fff; }
.kachel:hover { border-color: #b9c9e6; }
.kachel input { position: absolute; opacity: 0; pointer-events: none; }
.kachel:has(input:checked) { border-color: var(--a); box-shadow: 0 0 0 4px var(--a-hell); }
.kachel:has(input:focus-visible) { outline: 3px solid var(--a); outline-offset: 2px; }
.kachel .ic { flex: 0 0 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--a-hell); color: var(--a); }
.kachel strong { display: block; }
.kachel small { color: var(--leise); }

/* Design-Karten */
.design-karte { flex-direction: column; gap: 10px; padding: 12px; }
.mini { width: 100%; height: 110px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(0,0,0,.08); display: flex; flex-direction: column; }
.mini .m-kopf { height: 18px; }
.mini .m-hero { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 12px; color: #fff; }
.mini .m-hero i { display: block; height: 9px; width: 60%; background: rgba(255,255,255,.9); border-radius: 2px; }
.mini .m-hero em { display: block; height: 6px; width: 80%; background: rgba(255,255,255,.55); border-radius: 2px; }
.mini .m-leiste { height: 26px; display: flex; gap: 6px; padding: 6px 10px; }
.mini .m-leiste span { flex: 1; border-radius: 3px; }

.farben { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.farbpunkt { width: 38px; height: 38px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--rand); cursor: pointer; padding: 0; }
.farbpunkt.aktiv { box-shadow: 0 0 0 3px var(--text); }
.farben input[type=color] { width: 46px; height: 38px; padding: 0; border: 0; background: none; cursor: pointer; }

/* Leistungen-Liste */
.leistung { display: grid; grid-template-columns: 1fr 2fr auto; gap: 10px; align-items: start; margin-bottom: 10px; }
.leistung .weg { width: 42px; height: 46px; border: 1px solid var(--rand); background: #fff; border-radius: 10px; cursor: pointer; color: var(--leise); font-size: 20px; }
.leistung .weg:hover { color: var(--fehler); border-color: var(--fehler); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 18px; }
.chip { padding: 6px 12px; border: 1px dashed #9fb6dd; border-radius: 30px; background: #fff; color: var(--a2); font: inherit; font-size: .9rem; cursor: pointer; }
.chip:hover { background: var(--a-hell); }
.chip[disabled] { opacity: .4; cursor: default; }

.zeit-zeile { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; margin-bottom: 10px; }

/* Uploads */
.upload { display: grid; gap: 8px; padding: 16px; border: 2px dashed var(--rand); border-radius: var(--r); background: #fafbfd; }
.upload:hover { border-color: #b9c9e6; }
.vorschaubilder { display: flex; flex-wrap: wrap; gap: 8px; }
.vorschaubilder figure { position: relative; margin: 0; }
.vorschaubilder img { width: 84px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--rand); }
.vorschaubilder label { position: absolute; right: 4px; top: 4px; display: flex; align-items: center; gap: 3px; padding: 1px 5px; font-size: .7rem; background: rgba(255,255,255,.92); border-radius: 6px; cursor: pointer; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--a); }

/* Live-Muster im Design-Schritt */
.muster { border: 1px solid var(--rand); border-radius: var(--r); overflow: hidden; }
.muster .mk { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-weight: 800; }
.muster .mk span { font-size: .75rem; padding: 5px 10px; border-radius: 6px; font-weight: 700; }
.muster .mh { padding: 34px 20px; color: #fff; }
.muster .mh b { display: block; font-size: 1.5rem; margin-bottom: 6px; }
.muster .mh small { opacity: .9; }
.muster .mt { padding: 18px 20px; font-size: .9rem; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border: 2px solid var(--a); border-radius: 10px; background: var(--a); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.knopf:hover { background: var(--a2); border-color: var(--a2); color: #fff; }
.knopf--rand { background: #fff; color: var(--a); }
.knopf--rand:hover { background: var(--a-hell); color: var(--a2); }
.knopf--gross { padding: 16px 28px; font-size: 1.05rem; }
.knopf[disabled] { opacity: .6; cursor: wait; }

.meldung { padding: 14px 18px; border-radius: 10px; margin: 0 0 18px; }
.meldung--fehler { background: #fdecec; color: #8a1f1f; }
.meldung--ok { background: #e6f6ea; color: #1e5e2c; }

.zusammenfassung { display: grid; gap: 8px 20px; grid-template-columns: 160px 1fr; padding: 18px; background: var(--bg); border-radius: var(--r); font-size: .95rem; }
.zusammenfassung dt { color: var(--leise); }
.zusammenfassung dd { margin: 0; font-weight: 600; }

/* Warten */
.warten { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 18px; background: rgba(15,23,42,.85); color: #fff; font-size: 1.1rem; text-align: center; padding: 20px; }
.warten.an { display: flex; }
.kreis { width: 54px; height: 54px; border: 5px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: drehen 1s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }

/* Ergebnis */
.ergebnis { padding: 36px 0 60px; }
.ergebnis-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.geraete { display: inline-flex; background: #fff; border: 1px solid var(--rand); border-radius: 10px; padding: 3px; }
.geraete button { padding: 7px 14px; border: 0; background: none; border-radius: 8px; font: inherit; font-size: .9rem; color: var(--leise); cursor: pointer; }
.geraete button.aktiv { background: var(--a); color: #fff; }
.rahmen { background: #dfe5ee; border-radius: 16px; padding: 14px; display: flex; justify-content: center; }
.rahmen iframe { width: 100%; height: 72vh; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 10px 30px rgba(15,23,42,.15); transition: width .3s; }
.rahmen.tablet iframe { width: 820px; }
.rahmen.handy iframe { width: 390px; }
.aktionen { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 24px; }
.aktion { padding: 22px; background: #fff; border: 1px solid var(--rand); border-radius: var(--r); }
.aktion h3 { font-size: 1.05rem; }
.aktion p { color: var(--leise); font-size: .92rem; }
.link-feld { display: flex; gap: 8px; }
.link-feld input { flex: 1; min-width: 0; padding: 10px 12px; font: inherit; font-size: .85rem; border: 1px solid var(--rand); border-radius: 8px; background: var(--bg); }

/* Admin */
.tabelle { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--r); overflow: hidden; font-size: .92rem; }
.tabelle th, .tabelle td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--rand); vertical-align: top; }
.tabelle th { background: #f0f3f8; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--leise); }
.tabelle form { display: inline; }
.mini-knopf { padding: 5px 10px; font: inherit; font-size: .85rem; border: 1px solid var(--rand); border-radius: 7px; background: #fff; color: var(--text); cursor: pointer; text-decoration: none; display: inline-block; }
.mini-knopf:hover { border-color: var(--a); color: var(--a); }
.mini-knopf--rot:hover { border-color: var(--fehler); color: var(--fehler); }

.g-fuss { padding: 30px 0; color: var(--leise); font-size: .9rem; text-align: center; }

@media (max-width: 720px) {
  .felder { grid-template-columns: 1fr; }
  .leistung { grid-template-columns: 1fr auto; }
  .leistung .l-text { grid-column: 1 / -1; grid-row: 2; }
  .zusammenfassung { grid-template-columns: 1fr; }
  .fortschritt button span { display: none; }
  .fortschritt button { min-width: 56px; }
  .rahmen { padding: 6px; }
  .tabelle { display: block; overflow-x: auto; }
}

/* Import einer bestehenden Website */
.import { display: grid; gap: 12px; padding: 18px 20px; margin-bottom: 18px; border: 1px solid #cfdcf5; border-radius: var(--r); background: var(--a-hell); }
.import-kopf { display: grid; gap: 2px; }
.import-zeile { display: flex; gap: 10px; }
.import-zeile .eingabe { flex: 1; min-width: 0; }
.import-laeuft { display: flex; align-items: center; gap: 10px; color: var(--leise); font-size: .92rem; }
.mini-kreis { width: 18px; height: 18px; border: 3px solid #c7d6f3; border-top-color: var(--a); border-radius: 50%; animation: drehen 0.8s linear infinite; flex: none; }
.import-oder { margin: 4px 0 14px; }
.import-info { padding: 18px clamp(20px, 4vw, 44px) 0; }
.import-info .meldung { position: relative; margin: 0; padding-right: 44px; }
.import-info ul { margin: 6px 0 0; padding-left: 20px; }
.import-zu { position: absolute; right: 10px; top: 8px; width: 28px; height: 28px; border: 0; background: none; font-size: 1.3rem; line-height: 1; color: inherit; cursor: pointer; border-radius: 6px; }
.import-zu:hover { background: rgba(0,0,0,.06); }
.vorschaubilder figure figcaption { font-size: .72rem; color: var(--leise); text-align: center; margin-top: 2px; }
.vorschaubilder figure.logo-bild img { object-fit: contain; background: #fff; }
@media (max-width: 560px) { .import-zeile { flex-direction: column; } }

/* Titelbereich-Auswahl (Bild, Zoom, Slider …) */
.kacheln--hero { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.hero-karte { flex-direction: column; gap: 10px; padding: 12px; }
.hero-mini { position: relative; display: block; width: 100%; height: 64px; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #3d5a80, #98c1d9); }
.hero-mini i { position: absolute; inset: 0; background: linear-gradient(135deg, #6b4f3a, #d4a373); opacity: 0; }
.hero-mini--bild i:first-child { opacity: 1; }
.hero-mini--zoom i:first-child { opacity: 1; animation: mini-zoom 3s ease-in-out infinite alternate; }
.hero-mini--slider i { animation: mini-wechsel 6s infinite; }
.hero-mini--slider i:nth-child(1) { background: linear-gradient(135deg, #6b4f3a, #d4a373); }
.hero-mini--slider i:nth-child(2) { background: linear-gradient(135deg, #2d6a4f, #95d5b2); animation-delay: 2s; }
.hero-mini--slider i:nth-child(3) { background: linear-gradient(135deg, #7b2cbf, #e0aaff); animation-delay: 4s; }
.hero-mini--klick i:first-child { opacity: 1; }
.hero-mini--klick::before, .hero-mini--klick::after { content: "‹"; position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); left: 6px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.85); color: #333; font: 700 14px/17px system-ui; text-align: center; }
.hero-mini--klick::after { content: "›"; left: auto; right: 6px; }
.hero-mini--farbe { background: linear-gradient(135deg, #1f4e8c, #4d8fe0); }
@keyframes mini-zoom { to { transform: scale(1.25); } }
@keyframes mini-wechsel { 0%, 30% { opacity: 1; } 36%, 94% { opacity: 0; } 100% { opacity: 1; } }
.farbpunkt { width: 34px; height: 34px; }
@media (prefers-reduced-motion: reduce) { .hero-mini i { animation: none !important; } }

/* Kontaktformular- und Breiten-Auswahl */
.kacheln--klein { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.kacheln--klein .kachel { padding: 14px; }
.breite-karte { flex-direction: column; gap: 10px; padding: 12px; }
.breite-mini { display: flex; justify-content: center; width: 100%; height: 46px; padding: 6px 0; border-radius: 6px; background: #e9edf4; }
.breite-mini i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(#9fb4d9 0 30%, #fff 30% 100%); box-shadow: 0 0 0 1px #c9d4e8; }
.breite-mini--schmal i { width: 46%; }
.breite-mini--normal i { width: 64%; }
.breite-mini--breit i { width: 82%; }
.breite-mini--voll i { width: 100%; border-radius: 0; }

/* Branchen-Suche */
.branche-suche { margin-bottom: 14px; }
.branche-suche .eingabe { max-width: 420px; padding: 11px 14px 11px 40px; border: 1px solid var(--rand); border-radius: 10px; font: inherit; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235f6b7c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center; width: 100%; }
.branche-keine { margin-top: 12px; }

/* Vorschau-Knopf auf den Branchen-Kacheln */
.kachel .vs-knopf { position: absolute; right: 10px; bottom: 10px; padding: 3px 10px; font: inherit; font-size: .78rem; font-weight: 600; color: var(--a); background: var(--a-hell); border: 0; border-radius: 20px; cursor: pointer; opacity: .85; }
.kachel .vs-knopf:hover { opacity: 1; background: var(--a); color: #fff; }
#branchen .kachel { padding-bottom: 40px; }

/* Vorschau-Fenster */
.vs-modal { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; background: rgba(15,23,42,.82); padding: 14px; }
.vs-modal[hidden] { display: none !important; }
.vs-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 14px; background: #fff; border-radius: 12px 12px 0 0; }
.vs-kopf strong { flex: 1; min-width: 160px; }
.vs-geraete { display: inline-flex; padding: 3px; background: var(--bg); border-radius: 10px; }
.vs-geraete button { padding: 6px 12px; font: inherit; font-size: .88rem; border: 0; border-radius: 8px; background: none; color: var(--leise); cursor: pointer; }
.vs-geraete button.aktiv { background: var(--a); color: #fff; }
.vs-zu { width: 38px; height: 38px; font-size: 1.5rem; line-height: 1; border: 0; border-radius: 8px; background: var(--bg); cursor: pointer; }
.vs-buehne { flex: 1; display: flex; justify-content: center; overflow: auto; background: #e8ecf3; border-radius: 0 0 12px 12px; }
.vs-buehne iframe { width: 100%; height: 100%; border: 0; background: #fff; transition: width .3s; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.vs-eigene { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--a-hell); }
@media (max-width: 640px) { .vs-modal { padding: 0; } .vs-kopf, .vs-buehne { border-radius: 0; } .vs-geraete { display: none; } }

/* Live-Vorschau des Kontaktformulars */
.fv { margin-top: 16px; border: 1px solid var(--rand); border-radius: var(--r); background: #fafbfd; overflow: hidden; }
.fv-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--rand); background: #fff; font-size: .85rem; font-weight: 700; color: var(--leise); text-transform: uppercase; letter-spacing: .06em; }
.fv-kopf .knopf { padding: 6px 12px; font-size: .85rem; text-transform: none; letter-spacing: 0; }
.fv-inhalt { padding: 18px 20px 22px; pointer-events: none; }
.fv-inhalt h3 { margin: 0 0 4px; font-size: 1.2rem; }
.fv-inhalt > p { margin: 0 0 14px; font-size: .92rem; }
.fv-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.fv-raster label { display: grid; gap: 4px; font-size: .85rem; font-weight: 600; }
.fv-raster .ganz { grid-column: 1 / -1; }
.fv-raster input, .fv-raster select, .fv-raster textarea { width: 100%; padding: 8px 10px; font: inherit; font-size: .88rem; border: 1px solid var(--rand); border-radius: 8px; background: #fff; }
.fv-raster textarea { min-height: 70px; }
.fv-senden { display: inline-block; margin-top: 14px; padding: 9px 18px; border-radius: 8px; background: var(--a); color: #fff; font-weight: 700; font-size: .9rem; }
@media (max-width: 560px) { .fv-raster { grid-template-columns: 1fr; } }

/* Aufbau-Auswahl mit Mini-Skizze */
.kacheln--aufbau { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.aufbau-karte { flex-direction: column; gap: 10px; padding: 12px; }
.ab-mini { display: flex; flex-direction: column; gap: 4px; width: 100%; height: 96px; padding: 6px; border-radius: 8px; background: #eef2f8; overflow: hidden; }
.ab-hero { position: relative; flex: 0 0 38px; border-radius: 4px; background: linear-gradient(135deg, #3d5a80, #7ea6d8); display: flex; align-items: center; padding: 0 8px; }
.ab-hero i { display: block; width: 45%; height: 6px; border-radius: 2px; background: rgba(255,255,255,.9); }
.ab-mini--mitte .ab-hero { justify-content: center; }
.ab-mini--unten .ab-hero { align-items: flex-end; padding-bottom: 6px; }
.ab-mini--geteilt .ab-hero { background: linear-gradient(90deg, #3d5a80 50%, #c9a57a 50%); }
.ab-mini--karte .ab-hero i { width: 40%; height: 20px; background: #fff; border-radius: 3px; }
.ab-block { flex: 1; display: flex; gap: 3px; padding: 3px; border-radius: 3px; background: #fff; }
.ab-block i { flex: 1; border-radius: 2px; background: #d6deeb; }
.ab-leistungen-liste, .ab-ueber-zitat, .ab-zeiten, .ab-vorteile { flex-direction: column; }
.ab-leistungen-liste i, .ab-zeiten i, .ab-vorteile i { height: 3px; flex: 1; }
.ab-leistungen-nummern i:before { content: ""; }
.ab-ueber-zitat i:not(:first-child), .ab-zeiten i:not(:first-child) { display: none; }
.ab-ueber-zitat i { margin: 2px 20%; }
.ab-zeiten { background: #dbe6f7; }
.ab-galerie-mosaik i:first-child { flex: 2; background: #c9a57a; }
.ab-galerie-raster i { background: #c9a57a; }
.ab-ueber-rechts i:last-child, .ab-ueber-links i:first-child { background: #c9a57a; }

/* Blättern im Vorschau-Fenster */
.vs-blaettern { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 220px; }
.vs-name { display: grid; line-height: 1.25; min-width: 0; }
.vs-name strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-name small { color: var(--leise); font-size: .8rem; }
.vs-pfeil { flex: none; width: 42px; height: 42px; font-size: 1.7rem; line-height: 1; border: 1px solid var(--rand); border-radius: 50%; background: #fff; color: var(--text); cursor: pointer; }
.vs-pfeil:hover { background: var(--a); border-color: var(--a); color: #fff; }
.vs-kopf .vs-name strong { flex: none; min-width: 0; }

/* ---------- Pakete (Ergebnisseite) ---------- */
.meldung--hinweis { background: #fff4e0; color: #7a4a00; }
.pakete-titel { margin: 34px 0 16px; font-size: 1.5rem; }
.pakete { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; }
.paket { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 26px 24px; background: #fff; border: 1px solid var(--rand); border-radius: var(--r); }
.paket h3 { margin: 0; font-size: 1.2rem; }
.paket .preis { margin: 4px 0; }
.paket > .knopf, .paket > p:last-child { margin-top: auto; }
.paket--empfohlen { border: 2px solid var(--a); box-shadow: 0 16px 40px rgba(47,111,224,.16); }
.paket-band { position: absolute; top: -12px; right: 18px; padding: 3px 12px; font-size: .78rem; font-weight: 700; color: #fff; background: var(--a); border-radius: 20px; }
.preis { font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.preis small { font-size: .9rem; font-weight: 500; color: var(--leise); }
.haken-liste { list-style: none; margin: 8px 0 16px; padding: 0; display: grid; gap: 6px; }
.haken-liste li { position: relative; padding-left: 24px; font-size: .95rem; }
.haken-liste li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 800; }

/* ---------- Bestellung ---------- */
.bestellung { padding: 40px 20px 70px; }
.bestell-raster { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
.bestell-paket h1 { font-size: 1.6rem; margin: 4px 0 0; }
.bestell-form h2 { font-size: 1.3rem; }
.bestell-box { max-width: 640px; margin: 20px auto; }
.bestell-box h1 { font-size: 1.6rem; }
.kicker-klein { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--a); }
.bank { margin: 16px 0; padding: 16px 18px; border-radius: 10px; background: var(--bg); line-height: 1.7; }
@media (max-width: 800px) { .bestell-raster { grid-template-columns: 1fr; } }

/* ---------- Admin ---------- */
.admin-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.kennzahlen { display: flex; flex-wrap: wrap; gap: 8px; }
.kennzahlen span { padding: 8px 14px; background: #fff; border: 1px solid var(--rand); border-radius: 10px; font-size: .9rem; }
.kennzahlen .warn { border-color: #f1c27d; background: #fff8ec; }
.warn { color: #b35c00; }
.ok { color: var(--ok); font-weight: 600; }
.filter-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.filter-leiste .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--rand); border-radius: 20px; background: #fff; color: var(--text); text-decoration: none; font-size: .88rem; }
.filter-leiste .chip i { width: 9px; height: 9px; border-radius: 50%; }
.filter-leiste .chip--aktiv { border-color: var(--a); background: var(--a-hell); font-weight: 700; }
.filter-leiste .suche { margin-left: auto; }
.filter-leiste .suche .eingabe { padding: 7px 12px; border: 1px solid var(--rand); border-radius: 10px; font: inherit; }
.leads { display: grid; gap: 10px; }
.lead { background: #fff; border: 1px solid var(--rand); border-radius: 12px; }
.lead-haupt { display: grid; grid-template-columns: 14px minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.2fr) auto; gap: 16px; align-items: center; padding: 14px 18px; }
.status-punkt { width: 12px; height: 12px; border-radius: 50%; }
.lead-name, .lead-kontakt { display: grid; gap: 2px; min-width: 0; }
.lead-name span, .lead-kontakt a { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-geld { font-size: .88rem; }
.lead-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.lead-details summary { padding: 8px 18px; border-top: 1px solid var(--rand); cursor: pointer; font-size: .88rem; color: var(--leise); }
.lead-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding: 16px 18px; font-size: .92rem; }
.lead-form { display: grid; gap: 10px; align-content: start; }
.lead-form select, .lead-form textarea, .lead-form input[type=text] { width: 100%; padding: 8px 10px; font: inherit; border: 1px solid var(--rand); border-radius: 8px; }
.lead-fuss { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 18px 16px; }
.lead-fuss form, .lead-raster form { display: inline; }
.lead-raster form.lead-form { display: grid; }
.mini-knopf--gruen { border-color: #8fd19e; color: #1e6b34; background: #effaf2; }
.einst h2 { margin-top: 30px; font-size: 1.25rem; }
.einst-pakete { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.einst fieldset { display: grid; gap: 10px; margin: 0; }
.einst select, .einst textarea { width: 100%; padding: 10px 12px; font: inherit; border: 1px solid var(--rand); border-radius: 10px; background: #fff; }
@media (max-width: 900px) {
  .lead-haupt { grid-template-columns: 14px 1fr; }
  .lead-kontakt, .lead-geld, .lead-knoepfe { grid-column: 2; justify-content: flex-start; }
  .lead-raster { grid-template-columns: 1fr; }
}

/* ---------- Schritt «Mehr Inhalte» ---------- */
.bereich { margin-bottom: 12px; border: 1px solid var(--rand); border-radius: var(--r); background: #fff; }
.bereich > summary { display: flex; gap: 10px; align-items: center; padding: 14px 18px; cursor: pointer; list-style: none; }
.bereich > summary::-webkit-details-marker { display: none; }
.bereich > summary::after { content: "+"; margin-left: auto; font-size: 1.4rem; color: var(--a); }
.bereich[open] > summary::after { content: "–"; }
.bereich[open] { padding-bottom: 16px; }
.bereich > p, .bereich > .liste, .bereich > .liste-neu { margin-left: 18px; margin-right: 18px; }
.liste { display: grid; gap: 10px; margin-bottom: 10px; }
.liste-zeile { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 44px 12px 14px; border-radius: 10px; background: var(--bg); }
.liste-zeile label { display: grid; gap: 4px; font-size: .85rem; font-weight: 600; }
.liste-zeile input, .liste-zeile textarea { width: 100%; padding: 8px 10px; font: inherit; font-weight: 400; border: 1px solid var(--rand); border-radius: 8px; background: #fff; }
.lz-breit { grid-column: span 3; }
.lz-schmal { grid-column: span 2; }
.lz-ganz { grid-column: 1 / -1; }
.lz-breit + .lz-schmal { grid-column: span 3; }
.liste[data-liste=preise] .liste-zeile > label:nth-child(3), .liste[data-liste=stimmen] .liste-zeile > label:first-child + label + label { grid-column: 1 / -1; }
.lz-foto { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px !important; }
.lz-foto img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.lz-foto input[type=file] { width: auto; border: 0; padding: 0; background: none; }
.lz-weg { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 6px; background: #fff; cursor: pointer; font-size: 1.1rem; color: var(--leise); }
.lz-weg:hover { color: var(--fehler); }
.bereich-extras { display: grid; gap: 10px; margin-top: 18px; padding: 16px 18px; border-radius: var(--r); background: var(--a-hell); }
@media (max-width: 640px) { .liste-zeile > label { grid-column: 1 / -1 !important; } }

/* ---------- Bildausschnitt ---------- */
.fokus-bild { position: relative; }
.fokus-knopf { position: absolute; left: 4px; bottom: 4px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: rgba(255,255,255,.92); cursor: pointer; font-size: 1rem; line-height: 1; }
.fokus-modal { position: fixed; inset: 0; z-index: 320; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15,23,42,.8); }
.fokus-modal[hidden] { display: none !important; }
.fokus-inhalt { max-width: 760px; width: 100%; padding: 18px; background: #fff; border-radius: 14px; }
.fokus-flaeche { position: relative; display: inline-block; max-width: 100%; }
.fokus-flaeche img { display: block; max-width: 100%; max-height: 60vh; cursor: crosshair; border-radius: 8px; }
.fokus-punkt { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px var(--a), 0 2px 8px rgba(0,0,0,.4); pointer-events: none; }
.fokus-knoepfe { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }

/* ---------- Fotobibliothek (Admin) ---------- */
.foto-raster { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.foto-raster figure { margin: 0; position: relative; }
.foto-raster img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; }
.foto-raster form { position: absolute; right: 6px; bottom: 10px; }

/* ---------- Entwurf & Pflichtangaben ---------- */
.entwurf-info { padding: 18px clamp(20px, 4vw, 44px) 0; }
.entwurf-info .meldung { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; }
.entwurf-knoepfe { display: flex; gap: 8px; margin-left: auto; }
.entwurf-knoepfe .knopf { padding: 8px 14px; }
.pflicht { margin-top: 18px; padding: 16px 18px; border-radius: 12px; background: #fff4e0; color: #7a4a00; }
.pflicht ul { margin: 8px 0; padding-left: 20px; }
.pflicht small { color: #8a6a2e; }

/* ======================================================================
   Volle Breite + Live-Vorschau
   ====================================================================== */
.g-voll .huelle { max-width: none; padding-left: clamp(16px, 2.6vw, 44px); padding-right: clamp(16px, 2.6vw, 44px); }
.g-voll .g-hero h1 { max-width: 22ch; }
.g-arbeit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.g-arbeit .assistent { min-width: 0; }

.live { display: none; flex-direction: column; min-width: 0; background: #fff; border-radius: 20px; box-shadow: 0 20px 60px rgba(15,23,42,.14); overflow: hidden; }
.live-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; border-bottom: 1px solid var(--rand); background: #fff; }
.live-titel { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: .92rem; white-space: nowrap; }
.live-punkt { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: live-puls 2s infinite; }
@keyframes live-puls { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.45); } 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.live-seiten { flex: 1; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.live-seiten::-webkit-scrollbar { display: none; }
.live-seiten button { flex: none; padding: 5px 11px; border: 1px solid transparent; border-radius: 20px; background: none; font: inherit; font-size: .85rem; color: var(--leise); cursor: pointer; white-space: nowrap; }
.live-seiten button:hover { color: var(--text); background: #f1f4f9; }
.live-seiten button.aktiv { color: var(--a2); background: var(--a-hell); font-weight: 700; }
.live-geraete { display: inline-flex; padding: 3px; border-radius: 10px; background: #eef1f6; }
.live-geraete button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: .82rem; font-weight: 600; color: var(--leise); cursor: pointer; }
.live-geraete button.aktiv { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.live-zu { display: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #eef1f6; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.live-buehne { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #e9edf3; }
.live-rahmen { position: absolute; top: 0; left: 0; transform-origin: 0 0; background: #fff; }
.live-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; visibility: hidden; }
.live-frame.aktiv { visibility: visible; }
.live--handy .live-rahmen { border-radius: 34px; box-shadow: 0 0 0 10px #111827, 0 24px 50px rgba(15,23,42,.35); overflow: hidden; }
.live-leer { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px; text-align: center; color: var(--leise); }
.live-leer svg { color: #9fb2d3; }
.live-leer strong { font-size: 1.15rem; color: var(--text); }
.live-leer span { max-width: 36ch; }
.live-laedt { position: absolute; right: 14px; bottom: 14px; display: flex; padding: 8px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(15,23,42,.18); }
.live-auf { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border: 0; border-radius: 40px; background: #0f172a; color: #fff; font: inherit; font-weight: 700; box-shadow: 0 10px 30px rgba(15,23,42,.35); cursor: pointer; }
.live-auf[hidden] { display: none; }

/* Breiter Bildschirm: Fragebogen links, Vorschau rechts (mitlaufend) */
@media (min-width: 1100px) {
  .g-arbeit { grid-template-columns: minmax(540px, 42%) minmax(0, 1fr); }
  .live { display: flex; position: sticky; top: 16px; margin-top: -60px; height: calc(100vh - 32px); }
  .live-auf { display: none !important; }
  .muster, #formular-vorschau { display: none; }   /* zeigt jetzt die Live-Vorschau */
  .g-arbeit .kacheln { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
@media (min-width: 1600px) { .g-arbeit { grid-template-columns: minmax(600px, 40%) minmax(0, 1fr); } }

/* Schmaler Bildschirm: Vorschau als Vollbild auf Knopfdruck */
@media (max-width: 1099.98px) {
  .live-offen { overflow: hidden; }
  .live-offen .live { display: flex; position: fixed; inset: 0; z-index: 80; border-radius: 0; }
  .live-zu { display: block; }
  .live-titel { display: none; }
}
@media (max-width: 560px) { .live-geraete span { display: none; } }
@media (min-width: 1100px) {
  .g-arbeit .fortschritt button { min-width: 0; padding: 12px 2px; font-size: .78rem; }
}
/* Vorschau auf dem Handy: ohne Handy-Rahmen, ganze Breite */
.live--randlos .live-rahmen { border-radius: 0; box-shadow: none; }
@media (max-width: 560px) { .live-geraete { display: none; } }