/* QR-LinkScan — Token-System aus onlineklicken/visionenmaler-funnel (dunkel-first) */

:root {
  --bg:          #080c14;
  --bg2:         #0d1220;
  --surface:     #111827;
  --surface2:    #162030;
  --border:      rgba(90,130,210,0.13);
  --border2:     rgba(90,130,210,0.07);
  --text:        #e6edf8;
  --text2:       #7a8eac;
  --text3:       #4a5e7a;
  --accent1:     #00d4ff;
  --accent2:     #a855f7;
  --accent3:     #f0237a;
  --grad:        linear-gradient(130deg, #00d4ff 0%, #a855f7 52%, #f0237a 100%);
  --grad-text:   linear-gradient(130deg, #00d4ff 0%, #b06af8 50%, #f0237a 100%);
  --success:     #2fd47a;
  --danger:      #ff5468;
  --radius:      12px;
  --font-head:   'Sora', 'Inter', 'Segoe UI', sans-serif;
  --font-body:   'Inter', 'Segoe UI', sans-serif;
}
[data-theme="light"] {
  --bg:          #f2f5fc;
  --bg2:         #eaeef8;
  --surface:     #ffffff;
  --surface2:    #f5f8ff;
  --border:      rgba(80,120,200,0.18);
  --border2:     rgba(80,120,200,0.07);
  --text:        #0e1826;
  --text2:       #4e607e;
  --text3:       #8a9bb8;
  --success:     #128a4c;
  --danger:      #d22b40;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-head); font-weight: 700; line-height: 1.2; }
h1 { font-size: 1.6rem; margin-bottom: .3rem;
     background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
     -webkit-text-fill-color: transparent; width: fit-content; }
h2 { font-size: 1.1rem; margin: 1.4rem 0 .6rem; }
p { margin: .4rem 0; }
a { color: var(--accent1); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
  font-family: ui-monospace, Consolas, monospace; font-size: .85em;
  background: var(--surface2); border: 1px solid var(--border2);
  padding: .1em .4em; border-radius: 6px;
}

.container { max-width: 64rem; margin: 0 auto; padding: 0 1.25rem; }
main.container { padding-top: 2rem; padding-bottom: 4rem; }

/* Kopfleiste */
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar-inner { display: flex; align-items: center; gap: .9rem; padding: .7rem 1.25rem; flex-wrap: wrap; }
.brand {
  font-family: var(--font-head); font-weight: 800; font-size: 1.05rem;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand:hover { text-decoration: none; }
.mainnav { display: flex; gap: .9rem; }
.mainnav a { color: var(--text2); font-weight: 500; }
.mainnav a:hover { color: var(--text); text-decoration: none; }
.spacer { flex: 1; }

/* Flächen */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.pagehead .sub { color: var(--text2); font-size: .9rem; }
.row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.stat { min-width: 11rem; }
.stat .num { font-family: var(--font-head); font-size: 2rem; font-weight: 800; }

/* Tabellen */
.tablewrap { overflow-x: auto; }
table.data { border-collapse: collapse; width: 100%; font-size: .9rem; }
table.data th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text3); font-weight: 600; padding: .5rem .75rem;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.data td { padding: .55rem .75rem; border-bottom: 1px solid var(--border2); vertical-align: middle; }
table.data tr:last-child td { border-bottom: none; }
.num { font-variant-numeric: tabular-nums; }

/* Formulare */
.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; }
.field > label { font-size: .78rem; font-weight: 600; color: var(--text2); }
.field .hint { font-size: .78rem; color: var(--text3); }
input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="number"], input[type="date"], input[type="datetime-local"], select, textarea {
  font: inherit; color: var(--text);
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  padding: .5rem .65rem; width: 100%;
}
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { background: var(--surface2); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent1); outline-offset: 1px;
}
input[type="color"] { border: 1px solid var(--border); border-radius: 8px; background: var(--bg2); padding: 2px; height: 2.3rem; width: 3.4rem; }
input[type="range"] { width: 100%; accent-color: var(--accent2); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent2); width: auto; }

fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 0 0 1.25rem; }
legend { font-family: var(--font-head); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent1); padding: 0 .4rem; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font: inherit; font-weight: 600; cursor: pointer;
  border: none; border-radius: 999px;
  background: var(--grad); color: #ffffff;
  padding: .55rem 1.2rem; text-decoration: none;
}
.btn:hover { filter: brightness(1.12); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
}
.btn.ghost:hover { border-color: var(--accent1); color: var(--accent1); filter: none; }
.btn.danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.btn.small { padding: .3rem .8rem; font-size: .85rem; }

.badge {
  display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .05em;
  border: 1px solid var(--border); border-radius: 999px;
  padding: .1rem .6rem; color: var(--text2);
}
.badge.accent { border-color: var(--accent2); color: var(--accent1); }

/* Hinweise */
.notice, .error {
  border-radius: 10px; padding: .6rem .9rem; margin-bottom: 1rem;
  font-size: .9rem; border: 1px solid var(--border); background: var(--surface);
}
.notice { border-color: var(--success); color: var(--success); }
.error { border-color: var(--danger); color: var(--danger); }

/* Auth */
.auth-shell { min-height: 85vh; display: grid; place-items: center; padding: 2rem 1rem; }
.auth-card { width: 100%; max-width: 24rem; }
.auth-card .switch { margin-top: 1rem; font-size: .85rem; color: var(--text2); }

/* Editor: Vorschau auf breiten Fenstern FEST im Sichtfeld verankert
   (immer gleiche Position, unabhängig von Scrollen und Speichern);
   auf schmalen Fenstern oben im Fluss. */
.editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.5rem; align-items: start; }
.editor-grid > .preview-pane { grid-column: 2; grid-row: 1; }
.editor-grid > .editor-main { grid-column: 1; grid-row: 1; min-width: 0; }
@media (min-width: 901px) {
  .editor-grid > .preview-pane {
    position: fixed;
    top: 4.2rem;
    width: 340px;
    right: max(1.25rem, calc((100vw - 64rem) / 2 + 1.25rem));
    max-height: calc(100vh - 5.2rem);
    overflow-y: auto;
  }
  /* Seitenkopf und Meldungen nicht von der fixen Vorschau verdecken lassen */
  main.container:has(.editor-grid) > .pagehead,
  main.container:has(.editor-grid) > .notice,
  main.container:has(.editor-grid) > .error { margin-right: 360px; }
}

/* „Nach oben"-Pfeil */
#scrolltop {
  position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 50;
  width: 2.8rem; height: 2.8rem; border-radius: 50%;
  justify-content: center; font-size: 1.2rem;
  background: var(--surface); box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
@media (max-width: 900px) {
  .editor-grid { grid-template-columns: 1fr; }
  .editor-grid > .preview-pane, .editor-grid > .editor-main { grid-column: 1; grid-row: auto; }
  .preview-pane { position: static; }
}
.qr-frame { border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.qr-frame.top { flex-direction: column-reverse; }
.qr-frame-text { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; text-align: center; }
.qr-box { display: flex; justify-content: center; padding: 1rem; background: #ffffff; border: 1px solid var(--border); border-radius: 10px; }
.qr-box canvas, .qr-box svg { max-width: 100%; height: auto; }

/* ── Öffentliche Profilseite (Theme-Variablen aus theme.php) ── */
.pp-shell {
  min-height: 100vh;
  background: var(--pp-bg);
  display: flex;
  justify-content: center;
}
.pp {
  width: 100%; max-width: 30rem;
  padding: 3rem 1.4rem 4rem;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  color: var(--pp-ink);
  font-family: var(--pp-font);
}
.pp-langs { display: flex; gap: .4rem; margin-bottom: .8rem; }
.pp-lang {
  font-size: .75rem; font-weight: 700; letter-spacing: .05em;
  color: var(--pp-ink); text-decoration: none;
  border: 1px solid var(--pp-muted); border-radius: 999px;
  padding: .15rem .6rem; opacity: .75;
}
.pp-lang.active { background: var(--pp-accent); color: var(--pp-accent-ink); border-color: var(--pp-accent); opacity: 1; }
a.pp-lang:hover { opacity: 1; text-decoration: none; }
.pp-avatar { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 2px solid var(--pp-accent); }
.pp-avatar-fallback {
  display: grid; place-items: center;
  background: var(--pp-accent); color: var(--pp-accent-ink);
  font-weight: 700; font-size: 1.5rem; border: none;
}
.pp-name { font-size: 1.3rem; font-weight: 700; margin: .3rem 0 0; text-align: center;
  background: none; -webkit-text-fill-color: currentColor; color: var(--pp-ink); font-family: var(--pp-font); }
.pp-bio { font-size: .92rem; color: var(--pp-muted); text-align: center; margin: 0; max-width: 34ch; }
.pp-iconrow { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .9rem; }
.pp-iconbtn {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; text-decoration: none;
  color: var(--pp-btn-ink);
  background: var(--pp-btn-bg);
  border: var(--pp-btn-border);
  box-shadow: var(--pp-btn-shadow);
  backdrop-filter: blur(var(--pp-btn-blur));
  transition: transform .12s ease;
}
a.pp-iconbtn:hover { transform: translateY(-2px); }
a.pp-iconbtn:focus-visible { outline: 3px solid var(--pp-accent); outline-offset: 2px; }
.pp-iconbtn svg { display: block; }

/* Teilen-Button des Trees (oben rechts an der Gesamtfläche, wie eine Menüzeile).
   Wichtig: spezifischer als die allgemeine details.share-Regel, sonst gewinnt
   deren position:relative und der Button rutscht zentriert in den Fluss. */
.pp-shell { position: relative; }
.pp-shell details.pp-share { position: absolute; top: 1rem; right: 1rem; }
.pp-shell details.pp-share summary { cursor: pointer; }
.pp-shell details.pp-share .share-menu { right: 0; color: var(--text); }
.pp-btn-ico { display: flex; align-items: center; }
.share-menu svg { flex: 0 0 16px; }
.pp-links { width: 100%; display: flex; flex-direction: column; gap: .65rem; margin-top: 1rem; }
.pp-link { position: relative; }
.pp-link .pp-fav, .pp-link .pp-btn-ico {
  position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px;
}
.pp-link .pp-fav { border-radius: 4px; object-fit: contain; }
.pp-heading {
  text-align: center; font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--pp-muted); margin-top: .6rem;
}
.pp-link {
  display: block; width: 100%; text-align: center;
  padding: .85rem .75rem; font-weight: 600; font-size: .95rem;
  text-decoration: none; cursor: pointer;
  color: var(--pp-btn-ink);
  background: var(--pp-btn-bg);
  border: var(--pp-btn-border);
  border-radius: var(--pp-btn-radius);
  box-shadow: var(--pp-btn-shadow);
  backdrop-filter: blur(var(--pp-btn-blur));
  transition: transform .12s ease;
}
a.pp-link:hover { transform: translateY(-2px); text-decoration: none; }
a.pp-link:focus-visible { outline: 3px solid var(--pp-accent); outline-offset: 2px; }
.pp-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.1rem; }
.pp-social {
  font-size: .78rem; font-weight: 600; text-decoration: none;
  color: var(--pp-ink); border: 1px solid var(--pp-muted);
  border-radius: 999px; padding: .25rem .7rem;
}
a.pp-social:hover { border-color: var(--pp-ink); text-decoration: none; }

/* Editor: Handy-Vorschau + Block-Zeilen */
.preview-label {
  font-family: var(--font-head); font-weight: 700; font-size: .85rem;
  text-align: center; color: var(--text2); margin-bottom: .5rem;
}
.phone-frame {
  width: 320px; max-width: 100%; margin: 0 auto;
  border: 10px solid #000; border-radius: 34px;
  overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.35);
  background: #000;
}
[data-theme="light"] .phone-frame { border-color: #1a1a1e; background: #1a1a1e; }
.phone-frame .pp-shell { min-height: 560px; }
.phone-frame .pp { padding: 2rem 1.1rem 2.5rem; }
.block-row { border-top: 1px solid var(--border2); padding: .8rem 0; }
.block-row:first-of-type { border-top: none; }

/* Adressfeld mit fester Vorsilbe */
.slug-group { display: flex; align-items: stretch; }
.slug-prefix {
  display: flex; align-items: center;
  background: var(--surface2); border: 1px solid var(--border); border-right: none;
  border-radius: 8px 0 0 8px; padding: 0 .6rem;
  color: var(--text2); font-size: .85rem; white-space: nowrap;
}
.slug-group input { border-radius: 0 8px 8px 0; }

.pp-legal { display: flex; gap: 1rem; margin-top: 2rem; }
.pp-imprint {
  font-size: .72rem; color: var(--pp-muted);
  text-decoration: none; border-bottom: 1px solid var(--pp-muted);
}
a.pp-imprint:hover { color: var(--pp-ink); text-decoration: none; }

/* Eingabemasken „+ hinzufügen" */
.add-mask {
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 10px; padding: .9rem 1rem; margin-top: .6rem;
}
[data-theme="light"] .add-mask { background: var(--surface2); }

/* Block-Karten: klare Abgrenzung, einklappbar, verschiebbar */
.block-card {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: .55rem .8rem; margin-bottom: .6rem;
}
.block-card.dragging { opacity: .45; border-style: dashed; }
.block-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.block-head .spacer { flex: 1; }
.block-title { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }
.drag-handle { cursor: grab; color: var(--text3); font-size: 1rem; user-select: none; }
.collapse-btn {
  font: inherit; background: none; border: none; cursor: pointer;
  color: var(--accent1); font-size: .95rem; padding: 0 .2rem;
}
.block-body { margin-top: .7rem; border-top: 1px solid var(--border2); padding-top: .7rem; }
.icon-preview { display: inline-flex; align-items: center; min-width: 2rem; padding-bottom: .5rem; }
.icon-preview .pp-fav, .icon-preview .pp-btn-ico {
  position: static; transform: none; width: 24px; height: 24px;
}
.badge.chip { text-transform: none; letter-spacing: 0; margin: .1rem .2rem .1rem 0; display: inline-block; text-decoration: none; }
a.badge.chip:hover { border-color: var(--accent1); color: var(--accent1); text-decoration: none; }

/* Typ-Angaben ohne Button-Umrandung + Häkchen in Übersichten */
.type-label { color: var(--text2); font-size: .88rem; text-decoration: none; }
.tick {
  color: var(--accent1); font-weight: 700; font-size: 1rem;
  text-decoration: none; margin-right: .2rem; display: inline-block;
}
a.tick:hover { color: var(--accent2); text-decoration: none; }
.tick.muted { color: var(--text3); }

/* Einklappbare Fieldsets (Sprachen) */
.legend-toggle {
  font: inherit; font-family: var(--font-head); font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent1);
  background: none; border: none; cursor: pointer; padding: 0;
}
.legend-toggle .caret { color: var(--text2); }

/* Teilen-Dropdown */
details.share { position: relative; }
details.share summary { list-style: none; cursor: pointer; }
details.share summary::-webkit-details-marker { display: none; }
.share-menu {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: .4rem; min-width: 11rem; box-shadow: 0 8px 24px rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: .15rem;
}
.share-menu a, .share-menu button {
  display: flex; align-items: center; gap: .55rem;
  font: inherit; font-size: .88rem; color: var(--text); text-align: left;
  background: none; border: none; cursor: pointer;
  padding: .45rem .6rem; border-radius: 7px; text-decoration: none;
}
.share-menu a:hover, .share-menu button:hover { background: var(--surface2); text-decoration: none; }
.share-ico {
  width: 16px; height: 16px; flex: 0 0 16px;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

/* Statistik-Meter */
.meter-row {
  display: grid; grid-template-columns: 8.5rem 1fr 5.5rem;
  gap: .6rem; align-items: center; margin-bottom: .45rem; font-size: .85rem;
}
.meter-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meter-bar {
  background: var(--bg2); border-radius: 3px; overflow: hidden; height: 12px;
}
.meter-bar > span { display: block; height: 100%; background: var(--grad); }
.meter-val { text-align: right; color: var(--text2); }

/* Druck (PDF-Reports über den Browser-Druckdialog) */
@media print {
  .topbar, .no-print, .btn, .mainnav { display: none !important; }
  body { background: #ffffff; color: #111111; }
  main.container { padding-top: 0; max-width: none; }
  .card { border-color: #bbbbbb; break-inside: avoid; background: #ffffff; }
  h1 { -webkit-text-fill-color: #111111; background: none; }
  .meter-bar > span { background: #555555; }
  a { color: inherit; text-decoration: none; }
}

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