:root {
  --bg: #f4f6fb; --card: #ffffff; --ink: #1c2233; --muted: #6b7280; --line: #e3e7f0;
  --accent: #3b6cf6; --accent-ink: #ffffff; --mine: #dbe7ff; --theirs: #ffffff; --danger: #d64545; --ok: #1f9d55;
  --radius: 14px; --font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #10141f; --card: #1a2030; --ink: #e8ecf5; --muted: #98a2b8; --line: #2a3346; --accent: #6b8cff; --mine: #2b3d6e; --theirs: #1f2739; }
}
:root[data-theme="dark"] { --bg: #10141f; --card: #1a2030; --ink: #e8ecf5; --muted: #98a2b8; --line: #2a3346; --accent: #6b8cff; --mine: #2b3d6e; --theirs: #1f2739; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; overscroll-behavior-y: none; }
/* Safe-Area (Notch, Home-Indicator) + echte Viewport-Höhe auf allen Smartphones */
:root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); --vh: 100vh; }
@supports (height: 100dvh) { :root { --vh: 100dvh; } }
h1 { font-size: 1.25rem; margin: 0; } h2 { font-size: 1rem; margin: 0 0 .5rem; } h3 { margin: 0 0 .5rem; font-size: 1rem; }
button { font: inherit; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 10px; padding: .6rem .9rem; min-height: 44px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
button.danger { color: var(--danger); border-color: var(--danger); background: transparent; }
button.small { padding: .35rem .7rem; font-size: .9rem; min-height: 36px; }
button.icon { padding: .4rem .7rem; }
/* 16px verhindert das automatische Hineinzoomen bei iOS beim Fokussieren */
input, select, textarea { font: inherit; font-size: 16px; width: 100%; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); margin-bottom: .5rem; min-height: 44px; }
.muted { color: var(--muted); } .center { text-align: center; }
.app { max-width: 760px; margin: 0 auto; padding: calc(12px + var(--sat)) calc(16px + var(--sar)) calc(12px + var(--sab)) calc(16px + var(--sal)); min-height: var(--vh); position: relative; }
.screen { display: flex; flex-direction: column; gap: 14px; }
header { display: flex; align-items: center; gap: 10px; }
header h1 { flex: 1; }
.status { font-size: .75rem; color: var(--muted); padding: .2rem .5rem; border: 1px solid var(--line); border-radius: 999px; }
.status.on { color: var(--ok); border-color: var(--ok); }
section, .members, .info { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; background: none; border: 0; padding: 0; }
.two form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
@media (max-width: 560px) { .two { grid-template-columns: 1fr; } }
.bubble-card { display: flex; justify-content: space-between; width: 100%; text-align: left; margin-bottom: 8px; padding: .8rem 1rem; }
.bname { font-weight: 600; } .brole { color: var(--muted); font-size: .85rem; }
.chat { height: calc(var(--vh) - 24px - var(--sat) - var(--sab)); }
.chat .body { flex: 1; display: flex; gap: 12px; min-height: 0; }
.messages { flex: 1; overflow-y: auto; padding: 4px; display: flex; flex-direction: column; gap: 8px; }
.members { width: 260px; overflow-y: auto; flex-shrink: 0; }
/* Auf dem Handy: Mitglieder-Panel als Bottom-Sheet über dem Chat, scrollbar, mit Safe-Area */
@media (max-width: 640px) {
  .members { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: min(78vh, calc(var(--vh) - 70px)); border-radius: 18px 18px 0 0; padding: 14px calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal)); z-index: 20; box-shadow: 0 -10px 30px rgba(0,0,0,.25); }
  .members::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: -4px auto 10px; }
  .msg { max-width: 88%; }
  section, .two form, .info { padding: 12px; }
  h1 { font-size: 1.15rem; }
}
.members ul { list-style: none; padding: 0; margin: 0 0 .5rem; } .members li { display: flex; justify-content: space-between; align-items: center; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.members button { width: 100%; margin-top: .5rem; } .members li button { width: auto; margin: 0; }
.msg { max-width: 78%; background: var(--theirs); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .75rem; align-self: flex-start; }
.msg.mine { background: var(--mine); align-self: flex-end; }
.msg .meta { font-size: .72rem; color: var(--muted); margin-bottom: 2px; } .msg .text { white-space: pre-wrap; word-break: break-word; } .msg .err { color: var(--muted); font-style: italic; }
.composer { display: flex; gap: 8px; } .composer input { margin: 0; min-width: 0; } .composer button { flex-shrink: 0; }
.code { margin: .6rem 0; padding: .6rem; border: 1px dashed var(--accent); border-radius: 10px; font-family: ui-monospace, Menlo, monospace; word-break: break-all; font-size: clamp(.85rem, 3.6vw, 1rem); }
.code small { display: block; font-family: var(--font); color: var(--muted); margin: .4rem 0; }
.toast { position: fixed; left: 50%; bottom: calc(24px + var(--sab)); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: .6rem 1rem; border-radius: 999px; z-index: 50; max-width: 90%; }
.back { font-size: 1.3rem; line-height: 1; padding: .2rem .7rem; }
.info p { margin: .5rem 0 0; color: var(--muted); line-height: 1.5; }
/* Demo-Modus: mehrere "Geräte" in einem Fenster */
.demo-bar { max-width: 760px; margin: 0 auto; padding: 16px 16px 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.demo-bar .tab { border-radius: 999px; } .demo-bar .tab.active { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.demo-note { max-width: 760px; margin: 0 auto; padding: 8px 16px 0; color: var(--muted); font-size: .85rem; line-height: 1.45; }
/* Admin-Konto / Pakete */
.account h2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.account .links { display: flex; gap: 12px; flex-wrap: wrap; }
button.link { border: 0; background: none; color: var(--accent); padding: .3rem 0; text-decoration: underline; }
.pkg { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: .6rem 0; border-top: 1px solid var(--line); flex-wrap: wrap; } .pkg > div { min-width: 0; flex: 1 1 200px; }
.purchases { list-style: none; padding: 0; margin: 0 0 .75rem; color: var(--muted); }
.purchases li { padding: .25rem 0; }
.err { color: var(--danger); }
label.check { display: flex; gap: 8px; align-items: center; margin: .6rem 0; }
label.check input { width: auto; margin: 0; }
/* Kinderschutz, PWA, Rechtliches */
.warnbox { background: #fff4d6; color: #5a3d00; border: 1px solid #f0c36d; border-radius: 10px; padding: .6rem .8rem; font-size: .9rem; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .warnbox { background: #3a2f12; color: #ffe2a3; border-color: #7a5a1a; } }
:root[data-theme="dark"] .warnbox { background: #3a2f12; color: #ffe2a3; border-color: #7a5a1a; }
.warnbox button { margin-left: 4px; }
button.tiny { font-size: .72rem; padding: 0; }
.report { border-top: 1px solid var(--line); padding: .4rem 0; } .report .meta { font-size: .75rem; color: var(--muted); }
.members label { display: block; margin: .5rem 0 .25rem; font-size: .9rem; } .members select, .members input[type=time] { font: inherit; padding: .4rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); width: auto; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.update-bar { position: fixed; top: calc(12px + var(--sat)); left: 50%; transform: translateX(-50%); background: var(--card); color: var(--ink); border: 1px solid var(--accent); border-radius: 12px; padding: .6rem .9rem; z-index: 60; max-width: 92%; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
footer.small { font-size: .8rem; text-align: center; padding: 8px 0 20px; } footer a { color: var(--muted); }
.legal { line-height: 1.55; } .legal h2 { margin-top: 1.2rem; } .legal ul { padding-left: 1.2rem; }

/* Sehr schmale Geräte (≤ 360 px) und Querformat */
@media (max-width: 360px) { body { font-size: 15px; } .app { padding-left: calc(12px + var(--sal)); padding-right: calc(12px + var(--sar)); } .status { display: none; } }
@media (max-height: 480px) and (orientation: landscape) { .chat { height: calc(var(--vh) - 12px); } .app { padding-top: 6px; padding-bottom: 6px; } }
.warnbox { line-height: 1.5; } .warnbox button { margin: 4px 4px 0 0; }
.account h2 { flex-wrap: wrap; } .account h2 button { flex-shrink: 0; }
details summary { cursor: pointer; padding: .4rem 0; min-height: 44px; display: flex; align-items: center; }
.members form label .row input[type=time] { flex: 1 1 120px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sheet-head h3 { margin: 0; } .sheet-head button { width: auto; margin: 0; }
@media (min-width: 641px) { .sheet-head button { display: none; } }
@media (max-width: 640px) {
  .two form button.primary, .account form button.primary, [data-form=pin] button.primary, [data-form=rkconfirm] button.primary { width: 100%; }
  .toast { bottom: calc(84px + var(--sab)); }
}

/* ===================== Themes (Aussehen) ===================== */
:root { --deco: none; --title-emoji: '🫧'; --avatar-bg: var(--accent); --avatar-ink: #fff; --tab: var(--accent); }
header h1::before { content: var(--title-emoji) ' '; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--avatar-bg); color: var(--avatar-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; flex-shrink: 0; }
.msg { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; }
.msg.mine { grid-template-columns: 1fr; } .msg.mine .avatar { display: none; }
.msg .mbody { min-width: 0; }
.bg-deco { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--deco); }
body { position: relative; }
.looks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.look { border: 2px solid var(--line); border-radius: 14px; padding: 10px 8px; text-align: center; cursor: pointer; background: var(--card); min-height: 44px; font-size: .9rem; }
.look.active { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.look .sw { display: flex; gap: 4px; justify-content: center; margin-bottom: 6px; } .look .sw i { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }
@media (max-width: 400px) { .looks { grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .look { padding: 8px 4px; font-size: .8rem; } }

/* ---- Verspielte Grundform für alle Designs: runde Ecken, Sticker-Blasen, Emoji-Avatare, weiche Schatten ---- */
:root[data-look] { --font: "Nunito", "Quicksand", "Varela Round", "Comic Neue", ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif; --radius: 22px; --pop: 0 6px 0 -1px color-mix(in srgb, var(--accent) 35%, transparent), 0 10px 22px rgba(0,0,0,.10); --tail: var(--theirs); }
:root[data-look] body { letter-spacing: .01em; }
:root[data-look] h1 { font-size: 1.45rem; font-weight: 900; letter-spacing: .02em; }
:root[data-look] header h1::before { font-size: 1.5rem; display: inline-block; animation: bc-wiggle 3.2s ease-in-out infinite; }
:root[data-look] h2 { font-weight: 800; font-size: 1.08rem; }
:root[data-look] section, :root[data-look] .members, :root[data-look] .info, :root[data-look] .two form { border-width: 3px; border-radius: 24px; box-shadow: 0 8px 24px rgba(0,0,0,.07); }
:root[data-look] button { border-radius: 999px; font-weight: 800; border-width: 2px; transition: transform .12s ease, box-shadow .12s ease; }
:root[data-look] button.primary { box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 55%, #000 15%), 0 8px 18px color-mix(in srgb, var(--accent) 35%, transparent); }
:root[data-look] button.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 55%, #000 15%); }
:root[data-look] button:not(.primary):not(.link):not(.tiny):active { transform: scale(.96); }
:root[data-look] input, :root[data-look] select, :root[data-look] textarea { border-radius: 999px; border-width: 2px; padding-left: 1rem; padding-right: 1rem; }
:root[data-look] textarea { border-radius: 18px; }
:root[data-look] .status { border-radius: 999px; border-width: 2px; font-weight: 800; }
:root[data-look] .bubble-card { border-radius: 20px; border-width: 3px; font-size: 1.05rem; }
:root[data-look] .bubble-card .bname::before { content: '🫧 '; }
:root[data-look] .messages { gap: 12px; padding: 6px 4px; }
:root[data-look] .msg { border-width: 2.5px; border-radius: 24px 24px 24px 6px; box-shadow: var(--pop); padding: .6rem .9rem; position: relative; }
:root[data-look] .msg:last-child { animation: bc-pop .25s cubic-bezier(.2,1.4,.5,1) both; }
:root[data-look] .msg.mine { border-radius: 24px 24px 6px 24px; --tail: var(--mine); }
:root[data-look] .msg .meta { font-weight: 800; font-size: .74rem; }
:root[data-look] .msg .text { font-size: 1.04rem; line-height: 1.4; }
:root[data-look] .avatar { width: 42px; height: 42px; font-size: 0; box-shadow: 0 3px 0 rgba(0,0,0,.12); border: 2.5px solid #fff; margin-top: 2px; }
:root[data-look] .avatar::before { content: var(--av, '😊'); font-size: 1.45rem; line-height: 1; }
:root[data-look] .msg:nth-child(3n+1) { --av: var(--av1); } :root[data-look] .msg:nth-child(3n+2) { --av: var(--av2); } :root[data-look] .msg:nth-child(3n) { --av: var(--av3); }
:root[data-look] .composer { background: var(--card); border: 3px solid var(--line); border-radius: 999px; padding: 6px 6px 6px 10px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
:root[data-look] .composer input { border: 0; background: transparent; min-height: 40px; padding: .4rem .6rem; }
:root[data-look] .composer button { min-height: 40px; padding: .4rem 1rem; }
:root[data-look] .composer button::after { content: ' 🚀'; }
:root[data-look] .looks { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
:root[data-look] .look { border-radius: 20px; border-width: 3px; font-weight: 800; transition: transform .15s ease; }
:root[data-look] .look:hover { transform: translateY(-2px) rotate(-1deg); }
:root[data-look] .look.active { transform: scale(1.04); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent), 0 8px 20px rgba(0,0,0,.12); }
:root[data-look] .look .sw i { width: 20px; height: 20px; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
:root[data-look] .toast { border-radius: 999px; font-weight: 800; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
:root[data-look] .code { border-radius: 18px; border-width: 2px; }
:root[data-look] .members::before { width: 48px; height: 6px; border-radius: 3px; }
:root[data-look] .members li { border-bottom-style: dashed; }
:root[data-look] .members li > span:first-child { font-weight: 800; }
:root[data-look] .warnbox { border-radius: 18px; border-width: 2px; }
:root[data-look] details.info summary::before { content: ''; }
/* schwebende Deko-Emojis im Hintergrund (pro Design gesetzt) */
:root[data-look] .bg-deco::before, :root[data-look] .bg-deco::after { position: absolute; font-size: 1.7rem; line-height: 2.6; white-space: pre-wrap; opacity: .5; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.08)); }
:root[data-look] .bg-deco::before { content: var(--deco1, ''); left: 6%; top: 8%; width: 40%; animation: bc-float 7s ease-in-out infinite; }
:root[data-look] .bg-deco::after { content: var(--deco2, ''); right: 5%; bottom: 9%; width: 42%; text-align: right; animation: bc-float 9s ease-in-out infinite reverse; }
@keyframes bc-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes bc-wiggle { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-12deg); } 94% { transform: rotate(10deg); } 97% { transform: rotate(-6deg); } }
@keyframes bc-pop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { :root[data-look] * { animation: none !important; transition: none !important; } }

/* 1 Freundlich & Bunt */
:root[data-look="bunt"] { --deco1: '🌈 ☁️  ⭐\A   🎈'; --deco2: '🎨   🌟\A 🍀  🎉 ☁️'; --av1: '🐥'; --av2: '🦊'; --av3: '🐸'; }
:root[data-look="bunt"] { --bg: #eaf6ff; --card: #ffffff; --ink: #1f2a44; --muted: #5d6b85; --line: #d7e6f7; --accent: #2f7cf6; --mine: #fff1c2; --theirs: #ffffff; --avatar-bg: #ff8a4c; --title-emoji: '🌈';
  --deco: radial-gradient(circle at 12% 88%, rgba(255,209,102,.55) 0 60px, transparent 61px), radial-gradient(circle at 90% 10%, rgba(255,255,255,.9) 0 34px, transparent 35px), radial-gradient(circle at 82% 14%, rgba(255,255,255,.9) 0 26px, transparent 27px),
    linear-gradient(180deg, #cfeaff 0%, #eaf6ff 55%, #dff5d8 100%); }
:root[data-look="bunt"] .app { background: transparent; }
:root[data-look="bunt"] .msg:nth-child(3n+1) .avatar { background: #ff8a4c; } :root[data-look="bunt"] .msg:nth-child(3n+2) .avatar { background: #3ec18f; } :root[data-look="bunt"] .msg:nth-child(3n) .avatar { background: #b55cf5; }
:root[data-look="bunt"] button.primary { background: linear-gradient(135deg, #2f7cf6, #22b8f0); }
:root[data-look="bunt"] .status.on { background: #e5ffe9; }

/* 2 Weltraum */
:root[data-look="weltraum"] { --deco1: '🪐   ✨\A 🌙  ⭐\A    👽'; --deco2: '🚀  ✨\A 🛸   🌟'; --av1: '👩‍🚀'; --av2: '👽'; --av3: '🤖'; }
:root[data-look="weltraum"] { --bg: #0b1230; --card: #141c44; --ink: #e9efff; --muted: #9aa8d6; --line: #26306a; --accent: #6da8ff; --accent-ink: #0b1230; --mine: #2a3b8f; --theirs: #172252; --avatar-bg: #8f7bff; --danger: #ff7a7a; --ok: #5ee0a0; --title-emoji: '🚀';
  --deco: radial-gradient(circle at 80% 92%, rgba(255,214,120,.95) 0 46px, rgba(255,214,120,.25) 47px 70px, transparent 71px),
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 28% 62%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 44% 30%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 66% 14%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 78% 48%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 90% 26%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 20% 84%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 58% 76%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 36% 92%, #fff 50%, transparent 51%),
    linear-gradient(180deg, #060a20 0%, #0b1230 60%, #141c50 100%); }
:root[data-look="weltraum"] .toast { background: #6da8ff; color: #0b1230; }
:root[data-look="weltraum"] input, :root[data-look="weltraum"] select { background: #0f1738; }
:root[data-look="weltraum"] .warnbox { background: #3a2f12; color: #ffe2a3; border-color: #7a5a1a; }
:root[data-look="weltraum"] .msg:nth-child(3n+1) .avatar { background: #8f7bff; } :root[data-look="weltraum"] .msg:nth-child(3n+2) .avatar { background: #38c8e8; } :root[data-look="weltraum"] .msg:nth-child(3n) .avatar { background: #ff8fb1; }

/* 3 Tiere */
:root[data-look="tiere"] { --deco1: '🐾  🐰\A 🌼   🐾'; --deco2: '🐶   🐾\A 🐱  🌻'; --av1: '🐶'; --av2: '🐱'; --av3: '🐰'; }
:root[data-look="tiere"] { --bg: #fbf3e3; --card: #fffaf0; --ink: #4a3421; --muted: #8a6d52; --line: #ecdcc0; --accent: #4f9a4b; --mine: #e6f3d6; --theirs: #fffaf0; --avatar-bg: #e8a04c; --title-emoji: '🐾';
  --deco: radial-gradient(circle at 8% 92%, rgba(79,154,75,.22) 0 90px, transparent 91px), radial-gradient(circle at 94% 88%, rgba(232,160,76,.25) 0 70px, transparent 71px), linear-gradient(180deg, #fbf3e3, #f7ecd5); }
:root[data-look="tiere"] .msg:nth-child(3n+1) .avatar { background: #e8a04c; } :root[data-look="tiere"] .msg:nth-child(3n+2) .avatar { background: #4f9a4b; } :root[data-look="tiere"] .msg:nth-child(3n) .avatar { background: #c76a3f; }
:root[data-look="tiere"] button.primary { background: #4f9a4b; }
:root[data-look="tiere"] .status.on { background: #e9f5e3; }

/* 4 Unterwasser */
:root[data-look="ozean"] { --deco1: '🫧  🐠\A   🫧  🐚'; --deco2: '🐙  🫧\A 🐬   🌊'; --av1: '🐠'; --av2: '🐙'; --av3: '🐢'; }
:root[data-look="ozean"] { --bg: #0e5f8a; --card: #12709f; --ink: #f2fbff; --muted: #b5dcef; --line: #2a86b5; --accent: #38c6e0; --accent-ink: #063246; --mine: #1b8fb8; --theirs: #12709f; --avatar-bg: #ffb347; --avatar-ink: #3a2400; --danger: #ff8a80; --ok: #7ee8a5; --title-emoji: '🐠';
  --deco: radial-gradient(circle at 15% 20%, rgba(255,255,255,.14) 0 10px, transparent 11px), radial-gradient(circle at 22% 45%, rgba(255,255,255,.12) 0 6px, transparent 7px), radial-gradient(circle at 80% 30%, rgba(255,255,255,.14) 0 14px, transparent 15px), radial-gradient(circle at 70% 70%, rgba(255,255,255,.1) 0 8px, transparent 9px),
    radial-gradient(ellipse at 50% 108%, rgba(20,120,90,.7) 0 30%, transparent 55%), linear-gradient(180deg, #1c8fc2 0%, #0e5f8a 55%, #083f60 100%); }
:root[data-look="ozean"] .app { background: transparent; }
:root[data-look="ozean"] input, :root[data-look="ozean"] select { background: #0b537a; }
:root[data-look="ozean"] .toast { background: #38c6e0; color: #063246; }
:root[data-look="ozean"] .warnbox { background: #5a3d10; color: #ffe2a3; border-color: #8a6320; }
:root[data-look="ozean"] .msg:nth-child(3n+1) .avatar { background: #ffb347; } :root[data-look="ozean"] .msg:nth-child(3n+2) .avatar { background: #ff7a9e; color: #fff; } :root[data-look="ozean"] .msg:nth-child(3n) .avatar { background: #8de89a; }

/* 5 Dino & Dschungel */
:root[data-look="dino"] { --deco1: '🌴  🦕\A 🍃   🌿'; --deco2: '🦖   🌴\A 🥚  🍃'; --av1: '🦖'; --av2: '🦕'; --av3: '🐊'; }
:root[data-look="dino"] { --bg: #eef7e6; --card: #ffffff; --ink: #1f3a22; --muted: #5f7a5e; --line: #cfe4c3; --accent: #1f5b34; --mine: #dff5c0; --theirs: #ffffff; --avatar-bg: #7cc242; --avatar-ink: #163a1a; --title-emoji: '🦖';
  --deco: radial-gradient(ellipse at 0% 100%, rgba(31,91,52,.35) 0 120px, transparent 121px), radial-gradient(ellipse at 100% 100%, rgba(124,194,66,.35) 0 110px, transparent 111px), radial-gradient(circle at 88% 8%, rgba(242,177,52,.7) 0 30px, transparent 31px), linear-gradient(180deg, #f6fbef 0%, #eef7e6 60%, #d9edc8 100%); }
:root[data-look="dino"] .app { background: transparent; }
:root[data-look="dino"] button.primary { background: linear-gradient(135deg, #1f5b34, #3f8f4f); }
:root[data-look="dino"] .status.on { background: #e3f5db; }
:root[data-look="dino"] .msg:nth-child(3n+1) .avatar { background: #7cc242; } :root[data-look="dino"] .msg:nth-child(3n+2) .avatar { background: #f2b134; } :root[data-look="dino"] .msg:nth-child(3n) .avatar { background: #3f8f4f; color: #fff; }

/* 6 Einhorn (Pastell) */
:root[data-look="einhorn"] { --deco1: '✨  🦄\A 🌸   💫'; --deco2: '🌈  ✨\A 🍬   🦋'; --av1: '🦄'; --av2: '🧚'; --av3: '🐱'; }
:root[data-look="einhorn"] { --bg: #fff0f7; --card: #ffffff; --ink: #4a2c5a; --muted: #8f6fa3; --line: #f0d3e6; --accent: #b46cff; --mine: #ffe1f0; --theirs: #f3ecff; --avatar-bg: #c9a7ff; --avatar-ink: #3a2050; --title-emoji: '🦄';
  --deco: radial-gradient(circle at 10% 15%, rgba(255,255,255,.9) 0 3px, transparent 4px), radial-gradient(circle at 30% 70%, rgba(255,255,255,.9) 0 2px, transparent 3px), radial-gradient(circle at 75% 25%, rgba(255,255,255,.95) 0 3px, transparent 4px), radial-gradient(circle at 88% 78%, rgba(255,255,255,.9) 0 2px, transparent 3px), radial-gradient(circle at 55% 45%, rgba(255,255,255,.9) 0 2px, transparent 3px),
    linear-gradient(160deg, #ffd6ec 0%, #e9d8ff 40%, #d2f0ff 75%, #fff4c2 100%); }
:root[data-look="einhorn"] .app { background: transparent; }
:root[data-look="einhorn"] button.primary { background: linear-gradient(135deg, #ff7ab8, #b46cff); }
:root[data-look="einhorn"] .msg:nth-child(3n+1) .avatar { background: #ff9ccb; } :root[data-look="einhorn"] .msg:nth-child(3n+2) .avatar { background: #a2e8ff; } :root[data-look="einhorn"] .msg:nth-child(3n) .avatar { background: #c9a7ff; }

/* 7 Piraten */
:root[data-look="piraten"] { --deco1: '⚓  🦜\A 🗺️   🌴'; --deco2: '💰  ☠️\A ⛵   🐚'; --av1: '🏴‍☠️'; --av2: '🦜'; --av3: '🧭'; }
:root[data-look="piraten"] { --bg: #f3e2bf; --card: #fbf1dc; --ink: #3a2414; --muted: #7d5c3e; --line: #dcc39a; --accent: #8c4a2b; --mine: #ffe7b3; --theirs: #fbf1dc; --avatar-bg: #c62f2f; --danger: #b32020; --title-emoji: '🏴‍☠️';
  --deco: radial-gradient(circle at 85% 10%, rgba(255,220,120,.9) 0 34px, transparent 35px), linear-gradient(180deg, transparent 0 78%, rgba(60,140,180,.35) 79% 82%, rgba(60,140,180,.55) 83% 100%), linear-gradient(180deg, #f7ead0 0%, #f3e2bf 60%, #e7d0a2 100%); }
:root[data-look="piraten"] .app { background: transparent; }
:root[data-look="piraten"] section, :root[data-look="piraten"] .info, :root[data-look="piraten"] .msg { border-color: #cfae7c; }
:root[data-look="piraten"] button.primary { background: #8c4a2b; }
:root[data-look="piraten"] .status.on { background: #ece3c8; }
:root[data-look="piraten"] .msg:nth-child(3n+1) .avatar { background: #c62f2f; } :root[data-look="piraten"] .msg:nth-child(3n+2) .avatar { background: #8c4a2b; } :root[data-look="piraten"] .msg:nth-child(3n) .avatar { background: #2b6e8c; }

/* 8 Sport (Fußball) */
:root[data-look="sport"] { --deco1: '⚽  🏆\A 🥅   🎽'; --deco2: '🏅  ⚽\A 🎉   📣'; --av1: '⚽'; --av2: '🏆'; --av3: '🥇'; }
:root[data-look="sport"] { --bg: #1a7f3c; --card: #ffffff; --ink: #14281a; --muted: #5a7a62; --line: #cfe6d5; --accent: #1a7f3c; --mine: #fff3b0; --theirs: #ffffff; --avatar-bg: #ffcc00; --avatar-ink: #14281a; --title-emoji: '⚽';
  --deco: repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 40px, transparent 40px 80px), linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(255,255,255,.55) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), radial-gradient(circle at 50% 50%, transparent 0 58px, rgba(255,255,255,.55) 59px 61px, transparent 62px), linear-gradient(180deg, #1f8f44, #1a7f3c); }
:root[data-look="sport"] .app { background: transparent; }
:root[data-look="sport"] .screen > header, :root[data-look="sport"] .screen > header .status { color: #fff; }
:root[data-look="sport"] .screen > header .status.on { color: var(--ok); }
:root[data-look="sport"] .screen > p, :root[data-look="sport"] .screen > .muted, :root[data-look="sport"] footer a { color: #dff3e4; }
:root[data-look="sport"] section, :root[data-look="sport"] .info, :root[data-look="sport"] .two form { border: 2px solid #ffffff; }
:root[data-look="sport"] .toast { background: #14281a; color: #fff; }
:root[data-look="sport"] button.primary { background: #14281a; color: #ffcc00; }
:root[data-look="sport"] .status.on { background: #e5ffe9; }
:root[data-look="sport"] .msg:nth-child(3n+1) .avatar { background: #ffcc00; } :root[data-look="sport"] .msg:nth-child(3n+2) .avatar { background: #14281a; color: #fff; } :root[data-look="sport"] .msg:nth-child(3n) .avatar { background: #e63946; color: #fff; }

/* 9 Süßigkeiten */
:root[data-look="candy"] { --deco1: '🍭  🍬\A 🧁   🍩'; --deco2: '🍦  🍪\A 🍰   🍬'; --av1: '🧁'; --av2: '🍭'; --av3: '🍩'; }
:root[data-look="candy"] { --bg: #fff4fa; --card: #ffffff; --ink: #4a2038; --muted: #9a6b86; --line: #ffd3e6; --accent: #ff6fa8; --mine: #fff4b8; --theirs: #e6fbf3; --avatar-bg: #8de6c9; --avatar-ink: #163a2c; --title-emoji: '🍭';
  --deco: repeating-linear-gradient(135deg, rgba(255,111,168,.16) 0 22px, transparent 22px 44px, rgba(141,230,201,.18) 44px 66px, transparent 66px 88px), linear-gradient(180deg, #fff9fc, #fff0f7); }
:root[data-look="candy"] .app { background: transparent; }
:root[data-look="candy"] section, :root[data-look="candy"] .info, :root[data-look="candy"] .two form { border: 2px dashed #ffb3d1; }
:root[data-look="candy"] button.primary { background: linear-gradient(135deg, #ff6fa8, #ff9a62); }
:root[data-look="candy"] .status.on { background: #e6fbf3; }
:root[data-look="candy"] .msg:nth-child(3n+1) .avatar { background: #8de6c9; } :root[data-look="candy"] .msg:nth-child(3n+2) .avatar { background: #ff9ccb; } :root[data-look="candy"] .msg:nth-child(3n) .avatar { background: #ffd166; }

/* 10 Nacht (ruhig, dunkel, augenschonend) */
:root[data-look="nacht"] { --deco1: '🌙  ✨\A ⭐   💤'; --deco2: '🦉  ⭐\A 🌟   🌙'; --av1: '🦉'; --av2: '🐻'; --av3: '🐨'; }
:root[data-look="nacht"] { --bg: #15171c; --card: #1f2229; --ink: #e8eaf0; --muted: #9aa3b5; --line: #2f3440; --accent: #8ab4f8; --accent-ink: #0d1420; --mine: #2b3a52; --theirs: #262a33; --avatar-bg: #5a6a8a; --danger: #ff8a80; --ok: #7ee8a5; --title-emoji: '🌙';
  --deco: radial-gradient(circle at 88% 8%, rgba(255,241,200,.9) 0 22px, rgba(255,241,200,.12) 23px 34px, transparent 35px), radial-gradient(1.5px 1.5px at 20% 22%, #d8dde8 50%, transparent 51%), radial-gradient(1.5px 1.5px at 40% 12%, #d8dde8 50%, transparent 51%), radial-gradient(1.5px 1.5px at 65% 30%, #d8dde8 50%, transparent 51%), linear-gradient(180deg, #101218, #15171c); }
:root[data-look="nacht"] .app { background: transparent; }
:root[data-look="nacht"] input, :root[data-look="nacht"] select { background: #14161b; }
:root[data-look="nacht"] .toast { background: #8ab4f8; color: #0d1420; }
:root[data-look="nacht"] .warnbox { background: #3a2f12; color: #ffe2a3; border-color: #7a5a1a; }
:root[data-look="nacht"] .msg:nth-child(3n+1) .avatar { background: #5a6a8a; } :root[data-look="nacht"] .msg:nth-child(3n+2) .avatar { background: #6a8a6e; } :root[data-look="nacht"] .msg:nth-child(3n) .avatar { background: #8a6a7a; }
.order { border: 1px dashed var(--accent); border-radius: 10px; padding: .6rem .8rem; margin: .5rem 0; line-height: 1.5; } .order button { margin-top: .4rem; }