@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
/* ═══ SYNTERA · NEWSLETTER · ADMIN ═════════════════════════════════════ */
:root{
--void:#05060a; --ink:#0a0c12; --ink-2:#0f1219;
--carbon:#141823; --carbon-2:#1a1f2c; --graphite:#212636;
--slate:#2a3041; --steel:#3a4156;
--paper:#f5f0e2; --paper-2:#ebe4d0;
--gold-pale:#f4e3b8; --gold-light:#e6cf8a; --gold:#c9a961;
--gold-mid:#b89045; --gold-deep:#8a6d2a; --gold-shadow:#5d491c;
--line:rgba(201,169,97,.18);
--line-strong:rgba(201,169,97,.42);
--line-bright:rgba(230,207,138,.7);
--line-cool:rgba(245,241,232,.08);
--line-cool-strong:rgba(245,241,232,.16);
--ivory:#f5f1e8;
--text:rgba(245,241,232,.92);
--text-soft:rgba(245,241,232,.74);
--text-muted:rgba(245,241,232,.54);
--text-dim:rgba(245,241,232,.34);
--signal-red:#d34256;
--signal-amber:#e7a93d;
--signal-green:#5fb98d;
--signal-blue:#5db1e2;
--f-display:"Cormorant Garamond","EB Garamond",Georgia,serif;
--f-body:"Inter","Helvetica Neue",system-ui,sans-serif;
--f-mono:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
--ease:cubic-bezier(.2,.7,.2,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--t-fast:160ms; --t-med:280ms;
--shadow-deep:0 30px 80px -20px rgba(0,0,0,.65),0 8px 24px -8px rgba(0,0,0,.5);
--shadow-card:0 18px 42px -22px rgba(0,0,0,.7),0 2px 0 rgba(201,169,97,.06) inset;
}
/* ─── RESET & BASE ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
background:
radial-gradient(1200px 600px at 80% -10%, rgba(201,169,97,.06), transparent 60%),
radial-gradient(900px 500px at -10% 30%, rgba(93,177,226,.04), transparent 60%),
linear-gradient(180deg,#06070c 0%,#0a0c12 30%,#0a0c12 70%,#060709 100%);
background-attachment:fixed;
color:var(--text);
font-family:var(--f-body);
font-size:15px; line-height:1.55; letter-spacing:.005em;
min-height:100vh; position:relative;
}
body::before{
content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
background-image:url("data:image/svg+xml;utf8,");
opacity:.5;mix-blend-mode:overlay;
}
body::after{
content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
background-image:
linear-gradient(90deg,rgba(201,169,97,.035) 1px,transparent 1px),
linear-gradient(0deg,rgba(245,241,232,.015) 1px,transparent 1px);
background-size:120px 120px,120px 120px;
mask-image:radial-gradient(ellipse at center,#000 30%,transparent 85%);
}
h1,h2,h3,h4{
font-family:var(--f-display); font-weight:500; letter-spacing:-.005em;
line-height:1.15; color:var(--ivory); margin:0 0 .5em;
}
h1{font-size:clamp(2rem,3.6vw,2.6rem)}
h2{font-size:clamp(1.5rem,2.4vw,1.9rem)}
h3{font-size:1.2rem;font-weight:600;font-family:var(--f-body)}
p{margin:0 0 1em}
a{color:var(--gold-light);text-decoration:none;transition:color var(--t-fast) var(--ease)}
a:hover{color:var(--gold-pale)}
code,kbd,pre{font-family:var(--f-mono);font-size:.88em}
code{background:rgba(201,169,97,.08);padding:2px 6px;border:1px solid var(--line);border-radius:2px;color:var(--gold-pale)}
pre{background:rgba(5,6,10,.6);padding:12px 14px;border:1px solid var(--line-cool);overflow-x:auto;margin:8px 0}
pre code{background:none;border:none;padding:0;color:var(--gold-light)}
::selection{background:rgba(201,169,97,.35);color:var(--ivory)}
/* A11y */
.skip-link{position:absolute;top:-100px;left:8px;padding:8px 14px;background:var(--gold);color:var(--ink);font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.18em;z-index:9999}
.skip-link:focus{top:8px}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.muted{color:var(--text-muted);font-size:.95em}
.hint{color:var(--text-dim);font-weight:400;font-size:.85em}
.ok{color:var(--signal-green)}
.mono{font-family:var(--f-mono);font-size:.88em}
.right{text-align:right}
.nowrap{white-space:nowrap}
/* ─── INSTALL WIZARD ────────────────────────────────────────────────── */
body.is-install{display:flex;justify-content:center;align-items:flex-start;padding:48px 24px}
.install-shell{position:relative;z-index:2;width:100%;max-width:720px;display:flex;flex-direction:column;gap:32px}
.install-header{text-align:center;padding:16px 0 0}
.install-mark{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.36em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.install-mark-bullet{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);animation:pulse-dot 1.6s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:.6;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}
.install-title{margin:0;font-style:italic;color:var(--gold-pale)}
.install-sub{color:var(--text-muted);margin:8px 0 0;font-size:1rem}
.install-steps{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:rgba(20,24,35,.4);backdrop-filter:blur(8px)}
.install-step{display:flex;align-items:center;gap:10px;padding:14px 18px;border-right:1px solid var(--line);color:var(--text-dim);position:relative;transition:color var(--t-med) var(--ease),background var(--t-med) var(--ease)}
.install-step:last-child{border-right:none}
.install-step-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;font-family:var(--f-mono);font-size:11px;font-weight:600;border:1px solid currentColor;border-radius:50%;flex-shrink:0}
.install-step-label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.install-step.is-active{color:var(--gold);background:linear-gradient(180deg,rgba(201,169,97,.1),rgba(201,169,97,.02))}
.install-step.is-active .install-step-num{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.install-step.is-done{color:var(--text-soft)}
.install-step.is-done .install-step-num{background:transparent;color:var(--gold-deep);border-color:var(--gold-deep)}
.install-card{background:linear-gradient(180deg,rgba(15,18,25,.9),rgba(10,12,18,.85));border:1px solid var(--line);padding:40px 44px;box-shadow:var(--shadow-deep);position:relative}
.install-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--line-strong) 20%,var(--line-strong) 80%,transparent)}
.install-card h2{font-style:italic;color:var(--gold-pale);margin-bottom:8px}
.install-foot{text-align:center;padding:8px 0 24px;display:flex;justify-content:center;align-items:center;gap:10px;color:var(--text-dim)}
.install-foot-mono{font-family:var(--f-mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase}
.install-foot-dot{color:var(--gold-deep)}
.install-note{margin-top:24px;padding:20px 22px;background:rgba(93,177,226,.03);border:1px solid rgba(93,177,226,.2);border-left:3px solid var(--signal-blue)}
.install-note h3{margin-top:0;color:var(--signal-blue);font-family:var(--f-body);font-weight:600;font-size:.95em;text-transform:uppercase;letter-spacing:.1em}
.install-note ol,.install-note ul{padding-left:22px;margin:0}
.install-note li{margin-bottom:10px}
.install-note ul{padding-left:20px;margin:8px 0 0}
.install-form{margin-top:24px;display:flex;flex-direction:column;gap:16px}
.env-table{width:100%;border-collapse:collapse;margin:20px 0 0;font-size:.92em}
.env-table tr{border-bottom:1px solid var(--line-cool)}
.env-table tr:last-child{border-bottom:none}
.env-table td{padding:11px 8px;vertical-align:middle}
.env-label{color:var(--text);font-weight:500;width:42%}
.env-status{width:90px;text-align:center}
.env-detail{color:var(--text-muted);font-family:var(--f-mono);font-size:.85em}
/* ─── PILLS ─────────────────────────────────────────────────────────── */
.pill{display:inline-block;padding:3px 10px;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;border:1px solid currentColor;border-radius:2px}
.pill-ok{color:var(--signal-green)}
.pill-fail{color:var(--signal-red)}
/* ─── KV (key-value list) ──────────────────────────────────────────── */
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:20px 0;padding:16px 18px;border:1px solid var(--line-cool);background:rgba(10,12,18,.5);font-family:var(--f-mono);font-size:.85em}
.kv dt{color:var(--text-muted);font-size:.82em;text-transform:uppercase;letter-spacing:.1em;margin:0}
.kv dd{margin:0;color:var(--gold-light)}
.kv dd em{color:var(--text-dim);font-style:normal}
.kv--wide{grid-template-columns:180px 1fr;gap:10px 24px}
/* ─── FIELDS & INPUTS ──────────────────────────────────────────────── */
.field{display:block;margin-bottom:4px}
.field-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);font-weight:500}
.field-label > span:first-child{display:inline}
.field-hint-link{font-size:10.5px;font-family:var(--f-mono);letter-spacing:.1em;color:var(--gold);text-transform:none}
.field-help{display:block;margin-top:6px;color:var(--text-muted);font-size:.85em}
.input, .textarea, .select{
display:block;width:100%;padding:12px 14px;
background:rgba(5,6,10,.6);
border:1px solid var(--line-cool-strong);border-radius:2px;
color:var(--ivory);font-family:var(--f-body);font-size:15px;
transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
-webkit-appearance:none;appearance:none;
}
.textarea{min-height:110px;resize:vertical;line-height:1.6}
.input:hover,.textarea:hover,.select:hover{border-color:var(--line-strong)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--gold);background:rgba(5,6,10,.85);box-shadow:0 0 0 3px rgba(201,169,97,.14)}
.input::placeholder,.textarea::placeholder{color:var(--text-dim)}
.select{background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(-45deg,transparent 50%,var(--gold) 50%);background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px}
.input-otp{font-family:var(--f-mono);font-size:24px;letter-spacing:.7em;text-align:center;padding:14px 0 14px 24px}
.input-with-toggle{position:relative}
.input-with-toggle .input{padding-right:44px}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);padding:8px;cursor:pointer;border-radius:2px;display:inline-flex;align-items:center;justify-content:center;transition:color var(--t-fast) var(--ease)}
.pw-toggle:hover{color:var(--gold-light)}
.pw-toggle.is-on{color:var(--gold)}
/* Password strength meter */
.pw-meter{margin-top:10px}
.pw-meter-fill{height:3px;background:rgba(245,241,232,.08);position:relative;overflow:hidden;border-radius:2px}
.pw-meter-fill::before{content:"";position:absolute;top:0;left:0;bottom:0;width:0%;background:var(--signal-red);transition:width var(--t-med) var(--ease),background var(--t-med) var(--ease)}
.pw-meter[data-score="0"] .pw-meter-fill::before{width:15%;background:var(--signal-red)}
.pw-meter[data-score="1"] .pw-meter-fill::before{width:30%;background:var(--signal-amber)}
.pw-meter[data-score="2"] .pw-meter-fill::before{width:55%;background:var(--signal-amber)}
.pw-meter[data-score="3"] .pw-meter-fill::before{width:80%;background:var(--gold)}
.pw-meter[data-score="4"] .pw-meter-fill::before{width:100%;background:var(--signal-green)}
.pw-meter-label{margin-top:6px;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.checkbox-row{display:flex;align-items:center;gap:10px;font-size:.95em;margin:4px 0 14px;cursor:pointer}
.checkbox-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--gold);cursor:pointer}
.checkbox-row .hint{margin-left:auto;font-family:var(--f-mono)}
.toggle-row{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;border:1px solid var(--line-cool);margin-bottom:10px;cursor:pointer;transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.toggle-row:hover{border-color:var(--line);background:rgba(201,169,97,.02)}
.toggle-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--gold);margin-top:2px;flex-shrink:0}
.toggle-row input[type=checkbox]:disabled{opacity:.7;cursor:not-allowed}
.toggle-title{color:var(--ivory);font-weight:500;margin:0 0 4px;display:flex;align-items:center;gap:10px}
.toggle-desc{color:var(--text-muted);font-size:.88em;margin:0;line-height:1.5}
.field-row{display:flex;gap:16px;flex-wrap:wrap}
.field-row .field{margin-bottom:4px}
/* ─── BUTTONS ──────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 24px;font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;border:1px solid var(--line-strong);background:transparent;color:var(--gold-light);text-decoration:none;cursor:pointer;transition:all var(--t-fast) var(--ease);border-radius:0;position:relative;user-select:none}
.btn:hover{background:rgba(201,169,97,.1);border-color:var(--gold);color:var(--gold-pale);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.btn-primary{background:linear-gradient(180deg,var(--gold-light),var(--gold));color:#0c0d12;border-color:var(--gold-deep);font-weight:700;box-shadow:0 8px 20px -6px rgba(201,169,97,.4)}
.btn-primary:hover{background:linear-gradient(180deg,var(--gold-pale),var(--gold-light));color:#0c0d12;box-shadow:0 12px 28px -8px rgba(201,169,97,.55)}
.btn-danger{color:var(--signal-red);border-color:rgba(211,66,86,.4)}
.btn-danger:hover{background:rgba(211,66,86,.1);border-color:var(--signal-red);color:var(--signal-red)}
.btn-ghost{border-color:var(--line-cool-strong);color:var(--text-soft)}
.btn-ghost:hover{background:rgba(245,241,232,.04);border-color:var(--line-strong);color:var(--ivory)}
.btn-sm{padding:8px 14px;font-size:10px;letter-spacing:.18em}
.btn-arrow{display:inline-block;transition:transform var(--t-fast) var(--ease)}
.btn:hover .btn-arrow{transform:translateX(4px)}
/* ─── FLASH ────────────────────────────────────────────────────────── */
.flash-stack{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.flash{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid;background:rgba(10,12,18,.85);position:relative;animation:flash-in .4s var(--ease-out)}
@keyframes flash-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.flash-icon{width:10px;height:10px;border-radius:50%;background:currentColor;flex-shrink:0;box-shadow:0 0 10px currentColor}
.flash-text{color:var(--text);font-size:.95em;flex:1}
.flash-close{background:none;border:none;color:var(--text-dim);font-size:18px;cursor:pointer;padding:4px 8px;transition:color var(--t-fast) var(--ease)}
.flash-close:hover{color:var(--ivory)}
.flash--success{border-color:rgba(95,185,141,.35);color:var(--signal-green)}
.flash--error{border-color:rgba(211,66,86,.4);color:var(--signal-red)}
.flash--info{border-color:rgba(93,177,226,.3);color:var(--signal-blue)}
.flash--warning{border-color:rgba(231,169,61,.35);color:var(--signal-amber)}
/* ─── LOGIN PAGE ───────────────────────────────────────────────────── */
body.is-login{display:flex;justify-content:center;align-items:center;padding:40px 24px;min-height:100vh}
.login-shell{position:relative;z-index:2;width:100%;max-width:440px;text-align:center}
.login-logo{width:88px;height:88px;margin:0 auto 24px;object-fit:contain;opacity:.95}
.login-kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.36em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.login-kicker-bullet{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}
.login-title{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:clamp(2rem,4vw,2.4rem);color:var(--gold-pale);margin:0 0 32px}
.login-card{background:linear-gradient(180deg,rgba(15,18,25,.92),rgba(10,12,18,.88));border:1px solid var(--line);padding:32px;box-shadow:var(--shadow-deep);text-align:left;position:relative}
.login-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold) 70%,transparent);opacity:.6}
.login-card .field{margin-bottom:16px}
.login-card .btn{width:100%;margin-top:8px}
.login-foot{margin-top:24px;font-family:var(--f-mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--text-dim)}
/* ─── ADMIN LAYOUT ─────────────────────────────────────────────────── */
body.is-admin{padding:0}
.admin-shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh;position:relative;z-index:2}
.sidebar{background:linear-gradient(180deg,rgba(10,12,18,.95),rgba(6,7,12,.98));border-right:1px solid var(--line);padding:26px 0 0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:30}
.sidebar-brand{display:flex;align-items:center;gap:12px;padding:0 22px 24px;margin-bottom:14px;border-bottom:1px solid var(--line-cool)}
.sidebar-brand img{width:34px;height:34px;object-fit:contain}
.sidebar-brand-text{display:flex;flex-direction:column;line-height:1.15}
.sidebar-brand-name{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:1.15rem;color:var(--gold-pale)}
.sidebar-brand-sub{font-family:var(--f-mono);font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.sidebar-nav{flex:1;overflow-y:auto;padding:0 12px 20px;display:flex;flex-direction:column;gap:2px}
.sidebar-section-title{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--text-dim);padding:14px 10px 8px;margin-top:8px}
.sidebar-link{display:flex;align-items:center;gap:12px;padding:10px 12px;color:var(--text-soft);border-left:2px solid transparent;font-size:.95em;transition:all var(--t-fast) var(--ease);border-radius:0}
.sidebar-link:hover{background:rgba(201,169,97,.05);color:var(--gold-light);border-left-color:var(--gold-deep)}
.sidebar-link.is-active{background:linear-gradient(90deg,rgba(201,169,97,.1),transparent);color:var(--gold-pale);border-left-color:var(--gold)}
.sidebar-link-icon{width:16px;height:16px;flex-shrink:0;opacity:.85}
.sidebar-foot{padding:0;border-top:1px solid var(--line-cool);position:relative}
/* User-Menu-Dropdown */
.user-menu{position:relative}
.user-menu summary{list-style:none;cursor:pointer}
.user-menu summary::-webkit-details-marker{display:none}
.user-menu-trigger{display:flex;align-items:center;gap:10px;padding:14px 18px;font-size:.85em;transition:background var(--t-fast) var(--ease)}
.user-menu-trigger:hover{background:rgba(201,169,97,.04)}
.sidebar-user-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--gold-deep),var(--gold));color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:11px;font-weight:700;flex-shrink:0}
.sidebar-user-info{flex:1;min-width:0}
.sidebar-user-name{color:var(--text);font-weight:500;font-size:.92em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-user-email{color:var(--text-dim);font-size:.76em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-menu-caret{color:var(--text-dim);font-size:14px;transition:transform var(--t-fast) var(--ease)}
.user-menu[open] .user-menu-caret{transform:rotate(180deg)}
.user-menu-panel{position:absolute;bottom:calc(100% + 4px);left:8px;right:8px;background:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-deep);padding:6px;z-index:40}
.user-menu-panel a{display:flex;align-items:center;gap:10px;padding:8px 12px;color:var(--text-soft);font-size:.88em;border-radius:2px;transition:all var(--t-fast) var(--ease)}
.user-menu-panel a:hover{background:rgba(201,169,97,.08);color:var(--gold-light)}
.user-menu-panel hr{border:none;border-top:1px solid var(--line-cool);margin:6px 0}
.user-menu-panel .user-menu-danger:hover{background:rgba(211,66,86,.1);color:var(--signal-red)}
.user-menu-icon{width:16px;text-align:center;opacity:.8;font-size:12px}
.admin-main{padding:0;min-width:0}
.admin-topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 36px;border-bottom:1px solid var(--line-cool);background:rgba(10,12,18,.6);backdrop-filter:blur(12px);position:sticky;top:0;z-index:10}
.topbar-left{display:flex;align-items:center;gap:14px}
.topbar-title{display:flex;flex-direction:column;gap:4px}
.topbar-kicker{font-family:var(--f-mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.topbar-heading{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:1.7rem;color:var(--ivory);margin:0;line-height:1.1}
.topbar-actions{display:flex;gap:10px;align-items:center}
.nav-toggle{display:none;background:none;border:1px solid var(--line-strong);color:var(--gold);padding:8px 12px;cursor:pointer;border-radius:0;font-family:var(--f-mono);font-size:14px}
.admin-body{padding:32px 36px 80px;max-width:1400px}
.admin-body > section + section{margin-top:36px}
.admin-body > .panel + .panel,
.admin-body > .tabs + .panel{margin-top:24px}
/* ─── STAT CARDS ───────────────────────────────────────────────────── */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.stat-card{background:linear-gradient(180deg,rgba(20,24,35,.6),rgba(10,12,18,.7));border:1px solid var(--line-cool);padding:20px 22px;position:relative;overflow:hidden;transition:border-color var(--t-med) var(--ease),transform var(--t-med) var(--ease)}
.stat-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--line) 30%,var(--line) 70%,transparent)}
.stat-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.stat-label{font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted);margin:0 0 10px}
.stat-value{font-family:var(--f-display);font-weight:500;font-size:2.4rem;color:var(--gold-pale);line-height:1;margin:0}
.stat-sub{margin-top:6px;color:var(--text-muted);font-size:.85em}
/* ─── PANEL ────────────────────────────────────────────────────────── */
.panel{background:linear-gradient(180deg,rgba(15,18,25,.7),rgba(10,12,18,.8));border:1px solid var(--line-cool);padding:28px 32px;position:relative}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line-cool)}
.panel-title{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:1.3rem;color:var(--ivory);margin:0}
.panel-sub{color:var(--text-muted);font-size:.9em;margin:4px 0 0}
/* ─── EMPTY STATE ──────────────────────────────────────────────────── */
.empty-state{text-align:center;padding:60px 24px;color:var(--text-muted)}
.empty-state-icon{width:48px;height:48px;margin:0 auto 18px;border:1px solid var(--line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--gold);font-family:var(--f-display);font-size:1.4rem}
.empty-state-title{color:var(--text);font-size:1.05em;margin:0 0 8px;font-family:var(--f-body);font-weight:500}
.empty-state-text{margin:0 0 20px}
/* ─── TABLES ───────────────────────────────────────────────────────── */
.table{width:100%;border-collapse:collapse;font-size:.92em}
.table th{text-align:left;padding:11px 14px;font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--line);font-weight:600}
.table td{padding:13px 14px;border-bottom:1px solid var(--line-cool);color:var(--text);vertical-align:top}
.table tbody tr:hover td{background:rgba(201,169,97,.03)}
/* ─── CHECKLIST (dashboard) ────────────────────────────────────────── */
.checklist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.checklist-item{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;border:1px solid var(--line-cool);background:rgba(10,12,18,.4);transition:border-color var(--t-fast) var(--ease)}
.checklist-item:hover{border-color:var(--line)}
.checklist-check{width:22px;height:22px;border-radius:50%;border:1px solid var(--line-strong);display:inline-flex;align-items:center;justify-content:center;color:var(--gold);font-family:var(--f-mono);font-size:11px;flex-shrink:0}
.checklist-item.is-done .checklist-check{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.checklist-item.is-done .checklist-text{color:var(--text-muted);text-decoration:line-through;text-decoration-color:var(--gold-deep)}
.checklist-content{flex:1}
.checklist-text{color:var(--text);font-weight:500;margin:0}
.checklist-desc{color:var(--text-muted);margin:4px 0 0;font-size:.88em}
.checklist-action{margin-top:10px}
/* ─── TABS ─────────────────────────────────────────────────────────── */
.tabs{display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:flex-start}
.tabs-nav{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line-cool);background:rgba(15,18,25,.5);padding:6px;position:sticky;top:88px}
.tab{display:flex;flex-direction:column;gap:2px;padding:10px 14px;color:var(--text-soft);border-left:2px solid transparent;transition:all var(--t-fast) var(--ease);border-radius:0}
.tab:hover{background:rgba(201,169,97,.04);color:var(--gold-light)}
.tab.is-active{background:linear-gradient(90deg,rgba(201,169,97,.1),transparent);border-left-color:var(--gold);color:var(--gold-pale)}
.tab-label{font-size:.95em;font-weight:500}
.tab-desc{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);font-weight:400}
.tab.is-active .tab-desc{color:var(--gold-mid)}
.tab-panel{min-width:0;display:flex;flex-direction:column;gap:24px}
/* ─── FORM HELPERS ─────────────────────────────────────────────────── */
.form-stack{display:flex;flex-direction:column;gap:16px;max-width:520px}
.form-stack.form-wide{max-width:100%}
.form-actions{display:flex;gap:10px;justify-content:flex-start;padding-top:6px}
/* ─── 2FA ──────────────────────────────────────────────────────────── */
.twofa-setup{display:flex;flex-direction:column;gap:20px}
.twofa-setup h3{font-family:var(--f-display);font-style:italic;font-size:1.3rem;color:var(--gold-pale);margin:0 0 8px;font-weight:500}
.twofa-qr{display:flex;gap:24px;align-items:center;padding:20px;background:rgba(5,6,10,.6);border:1px solid var(--line-cool);flex-wrap:wrap}
.twofa-qr img{background:var(--ivory);padding:10px;border:1px solid var(--line-strong);display:block}
.twofa-manual{flex:1;min-width:220px}
.twofa-manual-label{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.twofa-manual code{font-size:.95em;padding:10px 14px;display:block;text-align:center;letter-spacing:.08em}
.numbered-steps{list-style:none;padding:0;margin:0;counter-reset:steps}
.numbered-steps > li{counter-increment:steps;padding-left:46px;position:relative;margin-bottom:24px}
.numbered-steps > li::before{content:counter(steps);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-weight:600;font-size:13px}
.backup-codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;padding:16px;background:rgba(5,6,10,.6);border:1px solid var(--line);margin-bottom:16px}
.backup-codes code{display:block;padding:8px 10px;text-align:center;font-size:1.05em;letter-spacing:.1em;background:rgba(15,18,25,.8);border:1px solid var(--line-cool)}
/* ─── CONFIRM SECTION (collapsible danger) ────────────────────────── */
.confirm-section summary{list-style:none;display:inline-block}
.confirm-section summary::-webkit-details-marker{display:none}
/* ─── DELIVERABILITY ───────────────────────────────────────────────── */
.deliv-box{display:flex;flex-direction:column;border:1px solid var(--line-cool);background:rgba(10,12,18,.5)}
.deliv-row{display:grid;grid-template-columns:260px 1fr;gap:24px;padding:20px 22px;border-bottom:1px solid var(--line-cool)}
.deliv-row:last-child{border-bottom:none}
.deliv-label strong{display:block;color:var(--ivory);font-weight:600}
.deliv-label .hint{display:block;margin-top:4px}
.deliv-status{display:flex;flex-direction:column;gap:10px}
.deliv-value{display:block;font-family:var(--f-mono);font-size:.78em;color:var(--gold-light);padding:8px 10px;background:rgba(5,6,10,.5);border:1px solid var(--line-cool);word-break:break-all;max-width:100%}
.deliv-help{color:var(--text-muted);font-size:.9em}
.deliv-help p{margin:0 0 .5em}
.deliv-help pre{background:rgba(5,6,10,.7);padding:10px 12px;font-size:.82em;margin:6px 0;overflow-x:auto}
.check-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.check-list li{display:flex;align-items:center;gap:12px;color:var(--text-soft);padding:10px 0;border-bottom:1px solid var(--line-cool)}
.check-list li:last-child{border-bottom:none}
.check-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.check-dot.ok{background:var(--signal-green);box-shadow:0 0 8px rgba(95,185,141,.4)}
/* ─── FOOTER PREVIEW ───────────────────────────────────────────────── */
.footer-preview{padding:24px;background:rgba(5,6,10,.7);border:1px solid var(--line-cool)}
.footer-preview-box{font-family:Georgia,serif;color:var(--text-soft);font-size:13px;line-height:1.7;text-align:center;max-width:500px;margin:0 auto;padding:16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.footer-preview-box a{color:var(--gold-light)}
.footer-preview-box strong{color:var(--ivory)}
/* ─── TOAST ────────────────────────────────────────────────────────── */
.toast-stack{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:10px;z-index:100;max-width:360px}
.toast{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--ink);border:1px solid var(--line-strong);box-shadow:var(--shadow-deep);animation:toast-in .35s var(--ease-out);font-size:.92em}
@keyframes toast-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
.toast.is-closing{animation:toast-out .25s var(--ease) forwards}
@keyframes toast-out{to{opacity:0;transform:translateX(20px)}}
.toast-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.toast--success .toast-dot{background:var(--signal-green);box-shadow:0 0 8px var(--signal-green)}
.toast--error .toast-dot{background:var(--signal-red);box-shadow:0 0 8px var(--signal-red)}
.toast--info .toast-dot{background:var(--signal-blue);box-shadow:0 0 8px var(--signal-blue)}
/* ─── CONFIRM DIALOG ───────────────────────────────────────────────── */
.confirm-backdrop{position:fixed;inset:0;background:rgba(5,6,10,.75);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:200;animation:fade-in .2s var(--ease)}
.confirm-backdrop[hidden]{display:none}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.confirm-dialog{background:var(--ink);border:1px solid var(--line);padding:28px 32px;max-width:440px;box-shadow:var(--shadow-deep);position:relative}
.confirm-dialog::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold) 70%,transparent);opacity:.6}
.confirm-dialog h3{font-family:var(--f-display);font-style:italic;font-size:1.35rem;color:var(--ivory);margin:0 0 12px}
.confirm-dialog p{color:var(--text-soft);margin:0 0 20px}
.confirm-actions{display:flex;gap:10px;justify-content:flex-end}
/* ─── RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width: 1000px){
.tabs{grid-template-columns:1fr}
.tabs-nav{position:static;flex-direction:row;overflow-x:auto;padding:4px}
.tab{flex-shrink:0;border-left:none;border-bottom:2px solid transparent;padding:10px 16px}
.tab.is-active{border-left:none;border-bottom-color:var(--gold)}
.deliv-row{grid-template-columns:1fr;gap:12px}
}
@media (max-width: 900px){
.admin-shell{grid-template-columns:1fr}
/* Sidebar im Mobile/PWA-Modus:
- top:0 + padding-top für iOS-Statusbar-Höhe, damit das Brand-Logo und
die obersten Menüeinträge nicht unter der Zeitanzeige verschwinden.
- env(safe-area-inset-top) holt die präzise Statusbar-Höhe vom OS
(Notch-Geräte: ~44-47px, ohne Notch: ~20px). */
.sidebar{position:fixed;left:-100%;top:0;width:280px;z-index:50;transition:left var(--t-med) var(--ease);box-shadow:var(--shadow-deep);padding-top:calc(26px + env(safe-area-inset-top))}
.sidebar.is-open{left:0}
.admin-body{padding:24px 20px 60px}
.admin-topbar{padding:16px 20px}
.install-card{padding:28px 22px}
.install-step{padding:10px 8px;gap:6px}
.install-step-label{font-size:9px;letter-spacing:.1em}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px}
.field-row{flex-direction:column;gap:16px}
.field-row .field{flex:1 !important}
.toast-stack{bottom:12px;right:12px;left:12px;max-width:none}
.backup-codes{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 520px){
.admin-body{padding:20px 14px 60px}
.panel{padding:22px 20px}
.install-card{padding:22px 18px}
}
/* ─── UTILITY ──────────────────────────────────────────────────────── */
.stack-sm > * + *{margin-top:8px}
.stack-md > * + *{margin-top:16px}
.stack-lg > * + *{margin-top:24px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.grow{flex:1}
/* ═══ ETAPPE 2: LISTS & SUBSCRIBERS ═══════════════════════════════════ */
/* Breadcrumb */
.breadcrumb{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--text-muted);margin-bottom:18px;text-transform:uppercase}
.breadcrumb a{color:var(--gold)}
.breadcrumb-sep{color:var(--text-dim)}
/* Tab-Bar (oben auf Listen-Übersicht) */
.tabbar{display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--line-cool)}
.tabbar-item{padding:10px 18px;color:var(--text-muted);border-bottom:2px solid transparent;font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;transition:all var(--t-fast) var(--ease);margin-bottom:-1px}
.tabbar-item:hover{color:var(--gold-light)}
.tabbar-item.is-active{color:var(--gold-pale);border-bottom-color:var(--gold)}
/* Panel-Variante: flush (Tabellen ohne Seitenpadding) */
.panel--flush{padding:0}
.panel--flush .subtable-header{padding:18px 24px;border-bottom:1px solid var(--line-cool);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.panel--flush .table{margin:0}
.panel--flush .table th:first-child,.panel--flush .table td:first-child{padding-left:24px}
.panel--flush .table th:last-child,.panel--flush .table td:last-child{padding-right:24px}
.panel--flush .pagination{padding:18px 24px;border-top:1px solid var(--line-cool)}
.subtable-meta{color:var(--text-muted);font-size:.92em}
/* Filter-Bar */
.filter-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px;padding:14px;background:rgba(15,18,25,.5);border:1px solid var(--line-cool)}
.filter-bar .input,.filter-bar .select{min-width:0;padding:10px 12px;font-size:14px}
.filter-bar .input{flex:1;min-width:200px}
/* Status-Pills für Subscriber */
.status-pill{display:inline-flex;align-items:center;padding:3px 10px;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;border:1px solid;border-radius:2px}
.status-pill.status-active {color:var(--signal-green); border-color:rgba(95,185,141,.4); background:rgba(95,185,141,.08)}
.status-pill.status-pending {color:var(--signal-amber); border-color:rgba(231,169,61,.4); background:rgba(231,169,61,.08)}
.status-pill.status-unsubscribed{color:var(--text-muted); border-color:var(--line); background:rgba(5,6,10,.3)}
.status-pill.status-bounced {color:var(--signal-red); border-color:rgba(211,66,86,.4); background:rgba(211,66,86,.08)}
.status-pill.status-complained {color:var(--signal-red); border-color:var(--signal-red); background:rgba(211,66,86,.15)}
/* Row-Actions */
.row-actions{display:inline-flex;gap:6px;align-items:center;justify-content:flex-end}
.row-action{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--line-cool);color:var(--text-soft);transition:all var(--t-fast) var(--ease);text-decoration:none;font-size:15px;cursor:pointer;background:transparent}
.row-action:hover{border-color:var(--gold);color:var(--gold-light);background:rgba(201,169,97,.05)}
/* Row-Action-Menu (details/summary als dropdown) */
.row-action-menu{position:relative;display:inline-block}
.row-action-menu summary{list-style:none}
.row-action-menu summary::-webkit-details-marker{display:none}
.row-action-panel{position:absolute;right:0;top:calc(100% + 4px);background:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-deep);padding:6px;min-width:200px;z-index:20;display:flex;flex-direction:column;gap:1px}
.row-action-panel button,.row-action-panel form button{width:100%;text-align:left;padding:8px 12px;background:none;border:none;color:var(--text-soft);font-family:var(--f-body);font-size:.9em;cursor:pointer;transition:all var(--t-fast) var(--ease)}
.row-action-panel button:hover{background:rgba(201,169,97,.08);color:var(--gold-light)}
.row-action-panel hr{border:none;border-top:1px solid var(--line-cool);margin:4px 0}
.row-action-panel button.danger{color:var(--signal-red)}
.row-action-panel button.danger:hover{background:rgba(211,66,86,.1)}
.row-action-panel form{display:block}
/* Selectable table */
.table-selectable input[type=checkbox]{width:16px;height:16px;accent-color:var(--gold);cursor:pointer}
.table-selectable tbody tr.is-selected td{background:rgba(201,169,97,.08)}
/* Bulk bar */
.bulk-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bulk-count{color:var(--gold-light);font-family:var(--f-mono);font-size:.88em}
.bulk-action-select{width:auto !important;padding:8px 32px 8px 12px !important;font-size:13px !important}
.bulk-ids-container{display:none}
/* Pagination */
.pagination{display:flex;justify-content:center;align-items:center;gap:10px;padding:18px 0}
/* Checkbox-Gruppe (für CSV-Import Zielliste) */
.check-group{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;padding:12px;border:1px solid var(--line-cool);background:rgba(5,6,10,.3)}
.check-item{display:flex;align-items:center;gap:10px;padding:6px 10px;cursor:pointer;transition:background var(--t-fast) var(--ease)}
.check-item:hover{background:rgba(201,169,97,.04)}
.check-item input[type=checkbox]{width:16px;height:16px;accent-color:var(--gold);cursor:pointer}
/* Inline-Add-List-Formular in Abonnent-Detail */
.inline-add-list{display:flex;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line-cool);flex-wrap:wrap}
.inline-add-list .select{min-width:0;flex:1}
/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(5,6,10,.8);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:100;padding:24px;animation:fade-in .2s var(--ease)}
.modal-backdrop[hidden]{display:none}
.modal{background:var(--ink);border:1px solid var(--line);padding:28px 32px;max-width:480px;width:100%;box-shadow:var(--shadow-deep);position:relative;max-height:90vh;overflow-y:auto}
.modal::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold) 70%,transparent);opacity:.6}
.modal h3{font-family:var(--f-display);font-style:italic;font-size:1.4rem;color:var(--gold-pale);margin:0 0 6px;font-weight:500}
.modal-close{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--text-muted);font-size:24px;cursor:pointer;padding:4px 10px;line-height:1;transition:color var(--t-fast) var(--ease)}
.modal-close:hover{color:var(--ivory)}
/* ═══ ETAPPE 3: FORMS / EMBED ═══════════════════════════════════════ */
/* Theme-Picker (im Form-Editor) */
.theme-picker {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.theme-picker-3 {
grid-template-columns: repeat(3, 1fr);
}
.theme-picker-4 {
grid-template-columns: repeat(4, 1fr);
}
.theme-option {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px;
border: 1px solid var(--line-cool);
background: rgba(10, 12, 18, .3);
cursor: pointer;
transition: all var(--t-fast) var(--ease);
position: relative;
}
.theme-option:hover { border-color: var(--line); }
.theme-option.is-active,
.theme-option:has(input:checked) {
border-color: var(--gold);
background: rgba(201, 169, 97, .05);
}
.theme-option input[type="radio"] { position: absolute; opacity: 0; }
.theme-preview {
height: 90px;
border: 1px solid var(--line-cool);
padding: 14px 12px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
.theme-preview-dark {
background: linear-gradient(180deg, #0f1219, #0a0c12);
}
.theme-preview-paper {
background: linear-gradient(180deg, #ffffff, #f5f0e2);
}
.theme-preview-minimal {
background:
repeating-linear-gradient(45deg,
rgba(255,255,255,.02),
rgba(255,255,255,.02) 8px,
rgba(245,241,232,.04) 8px,
rgba(245,241,232,.04) 16px);
border-style: dashed;
justify-content: center;
}
.theme-preview-custom {
background:
radial-gradient(circle at 30% 30%, rgba(201,169,97,.18) 0%, transparent 55%),
radial-gradient(circle at 70% 70%, rgba(138,109,42,.22) 0%, transparent 55%),
linear-gradient(180deg, #1a1610 0%, #0f1219 100%);
border: 1px solid rgba(201,169,97,.45);
justify-content: center;
align-items: center;
position: relative;
}
.theme-preview-custom .theme-preview-star {
font-size: 26px;
color: var(--gold-light, #c9a961);
text-shadow: 0 0 16px rgba(201,169,97,.5);
line-height: 1;
}
.theme-option-custom.is-active,
.theme-option-custom:has(input:checked) {
border-color: var(--gold-light, #c9a961);
background:
linear-gradient(180deg, rgba(201,169,97,.08), rgba(201,169,97,.03));
box-shadow: 0 0 0 1px rgba(201,169,97,.25), 0 4px 18px rgba(201,169,97,.08);
}
.theme-preview-title {
height: 10px;
width: 50%;
background: rgba(201, 169, 97, .3);
margin: 0 auto 2px;
}
.theme-preview-paper .theme-preview-title {
background: rgba(138, 109, 42, .35);
}
.theme-preview-field {
height: 20px;
background: rgba(245, 241, 232, .06);
border: 1px solid rgba(201, 169, 97, .2);
}
.theme-preview-paper .theme-preview-field {
background: rgba(255, 255, 255, .7);
border-color: rgba(138, 109, 42, .3);
}
.theme-preview-minimal .theme-preview-field {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(201, 169, 97, .4);
}
.theme-preview-button {
height: 16px;
background: linear-gradient(180deg, #e6cf8a, #c9a961);
border: 1px solid #8a6d2a;
width: 50%;
align-self: center;
}
.theme-name {
font-weight: 500;
color: var(--ivory);
font-size: .95em;
}
.theme-desc {
color: var(--text-muted);
font-size: .82em;
line-height: 1.5;
}
/* Code-Block mit Copy-Button */
.code-block {
position: relative;
background: rgba(5, 6, 10, .6);
border: 1px solid var(--line-cool);
}
.code-block pre {
margin: 0;
padding: 16px 20px;
padding-right: 100px;
overflow-x: auto;
color: var(--gold-light);
font-family: var(--f-mono);
font-size: 12.5px;
line-height: 1.6;
background: transparent;
border: none;
}
.code-block code {
background: transparent;
border: none;
padding: 0;
color: inherit;
font-size: inherit;
}
.code-copy {
position: absolute;
top: 10px;
right: 10px;
padding: 6px 12px;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 600;
background: rgba(201, 169, 97, .1);
color: var(--gold-light);
border: 1px solid var(--line);
cursor: pointer;
transition: all var(--t-fast) var(--ease);
z-index: 2;
}
.code-copy:hover {
background: var(--gold);
color: var(--ink);
}
/* Form-Preview-Box (wo iframe drin rendert) */
.form-preview-box {
padding: 32px 24px;
border: 1px dashed var(--line);
position: relative;
}
.form-preview-box::before {
content: "IHRE WEBSITE (synterarealms.de)";
position: absolute;
top: -10px;
left: 18px;
padding: 0 8px;
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: .22em;
color: var(--text-dim);
background: var(--ink);
text-transform: uppercase;
}
.form-preview-dark { background: linear-gradient(180deg, rgba(5, 6, 10, .4), rgba(10, 12, 18, .6)); }
.form-preview-paper { background: linear-gradient(180deg, #f5f0e2, #ebe4d0); }
/* Responsive: theme picker single-column auf Mobile */
@media (max-width: 780px) {
.theme-picker-3 { grid-template-columns: 1fr 1fr; }
.theme-picker-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
.theme-picker, .theme-picker-3, .theme-picker-4 { grid-template-columns: 1fr; }
.code-block pre { padding-right: 20px; padding-top: 48px; }
.code-copy { top: 10px; left: 10px; right: auto; }
}
/* ═══ ETAPPE 4: TEMPLATE EDITOR & TEMPLATES LIST ═══════════════════ */
/* Templates-Übersicht als Karten-Grid */
.template-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.template-card {
background: linear-gradient(180deg, rgba(15, 18, 25, .8), rgba(10, 12, 18, .9));
border: 1px solid var(--line-cool);
overflow: hidden;
transition: all var(--t-fast) var(--ease);
}
.template-card:hover {
border-color: var(--line-strong);
transform: translateY(-2px);
box-shadow: var(--shadow-card);
}
.template-card-preview {
height: 240px;
overflow: hidden;
position: relative;
background: #0a0c12;
border-bottom: 1px solid var(--line-cool);
}
/* Inneres Preview-Wrapper-Div mit fester Newsletter-Breite */
.template-card-preview a {
display: block;
width: 100%;
height: 100%;
position: relative;
}
.template-card-preview iframe {
/* Newsletter-native Breite 600px; per JS wird transform: scale(…) gesetzt,
das der Container-Breite entspricht. Fallback: ~0.5 */
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 900px;
border: 0;
transform: scale(0.47);
transform-origin: top left;
pointer-events: none;
background: #0a0c12;
}
.template-card-overlay {
position: absolute;
inset: 0;
background: rgba(5, 6, 10, 0);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all var(--t-med) var(--ease);
pointer-events: none;
}
.template-card:hover .template-card-overlay {
background: rgba(5, 6, 10, .7);
opacity: 1;
}
.template-card-overlay span {
padding: 10px 20px;
background: rgba(201, 169, 97, .15);
border: 1px solid var(--gold);
color: var(--gold-pale);
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
}
.template-card-body {
padding: 20px 22px;
}
.template-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
margin-bottom: 8px;
}
.template-card-name {
font-family: var(--f-display);
font-style: italic;
font-weight: 500;
font-size: 1.2rem;
margin: 0;
line-height: 1.15;
}
.template-card-name a {
color: var(--ivory);
border-bottom: none;
}
.template-card-name a:hover { color: var(--gold-pale); }
.template-card-desc {
color: var(--text-muted);
font-size: .88em;
line-height: 1.55;
margin: 0 0 12px;
}
.template-card-meta {
display: flex;
gap: 6px;
color: var(--text-dim);
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .12em;
text-transform: uppercase;
margin-bottom: 14px;
}
.template-card-meta .dot { color: var(--gold-deep); }
.template-card-actions {
display: flex;
gap: 6px;
padding-top: 14px;
border-top: 1px solid var(--line-cool);
}
/* ─── EDITOR-LAYOUT ─────────────────────────────────────────────── */
.tpl-editor {
display: grid;
grid-template-columns: 1fr 520px;
gap: 20px;
align-items: flex-start;
}
.tpl-editor-left {
min-width: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.tpl-editor-right {
position: sticky;
top: 88px;
}
/* Block-Liste */
.tpl-blocks {
display: flex;
flex-direction: column;
gap: 10px;
}
.tpl-block {
background: linear-gradient(180deg, rgba(15, 18, 25, .7), rgba(10, 12, 18, .85));
border: 1px solid var(--line-cool);
transition: border-color var(--t-fast) var(--ease);
}
.tpl-block:hover { border-color: var(--line); }
.tpl-block-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 16px;
background: rgba(201, 169, 97, .04);
border-bottom: 1px solid var(--line-cool);
}
.tpl-block-type {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--gold-light);
font-weight: 600;
}
.tpl-block-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border: 1px solid var(--line);
color: var(--gold);
font-family: var(--f-mono);
font-weight: 500;
font-size: 14px;
letter-spacing: 0;
}
.tpl-block-actions {
display: flex;
gap: 4px;
}
.tpl-block-actions .row-action {
width: 28px;
height: 28px;
font-size: 12px;
}
.tpl-block-body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 14px;
}
.tpl-block-body .field { margin-bottom: 0; }
/* Palette zum Hinzufügen */
.tpl-add-row { padding: 8px 0; }
.tpl-add { width: 100%; }
.tpl-add > summary {
list-style: none;
width: 100%;
display: flex;
justify-content: center;
cursor: pointer;
}
.tpl-add > summary::-webkit-details-marker { display: none; }
.tpl-add > summary.btn { width: 100%; }
.tpl-palette {
margin-top: 12px;
padding: 16px;
border: 1px solid var(--line);
background: rgba(15, 18, 25, .6);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 8px;
}
.tpl-palette-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 14px 10px;
background: rgba(10, 12, 18, .5);
border: 1px solid var(--line-cool);
color: var(--text-soft);
cursor: pointer;
font-family: var(--f-body);
transition: all var(--t-fast) var(--ease);
}
.tpl-palette-item:hover {
border-color: var(--gold);
background: rgba(201, 169, 97, .06);
color: var(--gold-pale);
transform: translateY(-1px);
}
.tpl-palette-icon {
font-size: 1.4rem;
font-family: var(--f-mono);
color: var(--gold);
line-height: 1;
margin-bottom: 2px;
}
.tpl-palette-label {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .16em;
text-transform: uppercase;
font-weight: 500;
}
/* Hilfekasten */
.tpl-help {
margin-top: 12px;
padding: 12px 16px;
background: rgba(93, 177, 226, .04);
border: 1px solid rgba(93, 177, 226, .2);
border-left: 3px solid var(--signal-blue);
color: var(--text-muted);
font-size: 12.5px;
line-height: 1.7;
}
.tpl-help strong {
color: var(--signal-blue);
font-weight: 600;
display: block;
margin-bottom: 4px;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
}
.tpl-help code {
display: inline-block;
margin: 2px 2px 2px 0;
padding: 1px 8px;
font-size: 11px;
}
/* Live-Preview */
.tpl-preview-wrap {
border: 1px solid var(--line);
background: #0a0c12;
overflow: hidden;
box-shadow: var(--shadow-card);
}
.tpl-preview-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 16px;
background: rgba(201, 169, 97, .06);
border-bottom: 1px solid var(--line);
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
}
.tpl-preview-label { color: var(--gold); font-weight: 600; }
.tpl-preview-hint { color: var(--text-dim); }
.tpl-preview-frame {
width: 100%;
height: 720px;
border: 0;
background: #0a0c12;
display: block;
}
/* Responsive */
@media (max-width: 1200px) {
.tpl-editor { grid-template-columns: 1fr; }
.tpl-editor-right { position: static; }
.tpl-preview-frame { height: 500px; }
}
/* ─── Markdown-Toolbar über Textareas ───────────────────────────── */
.md-toolbar {
display: flex;
align-items: center;
gap: 4px;
padding: 4px;
background: rgba(5, 6, 10, .4);
border: 1px solid var(--line-cool);
border-bottom: none;
margin-bottom: -1px;
}
.md-toolbar button {
width: 30px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
color: var(--text-soft);
border: 1px solid transparent;
cursor: pointer;
font-family: var(--f-body);
font-size: 13px;
transition: all var(--t-fast) var(--ease);
}
.md-toolbar button:hover {
background: rgba(201, 169, 97, .08);
border-color: var(--line);
color: var(--gold-light);
}
.md-toolbar .md-hint {
margin-left: auto;
font-family: var(--f-mono);
font-size: 10px;
color: var(--text-dim);
letter-spacing: .08em;
padding: 0 8px;
}
.tpl-block-body textarea + .md-toolbar,
.md-toolbar + textarea {
border-top-color: var(--line-cool);
}
/* ─── Bild-Upload-Control ──────────────────────────────────────── */
.image-upload-wrap {
display: flex;
align-items: stretch;
gap: 6px;
}
.image-upload-wrap input[type="url"] {
flex: 1;
min-width: 0;
}
.image-upload-btn {
padding: 0 14px;
background: rgba(201, 169, 97, .1);
border: 1px solid var(--line);
color: var(--gold-light);
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: .14em;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition: all var(--t-fast) var(--ease);
}
.image-upload-btn:hover:not(:disabled) {
background: var(--gold);
color: var(--ink);
border-color: var(--gold);
}
.image-upload-btn:disabled {
opacity: .5;
cursor: wait;
}
.image-upload-status {
display: inline-flex;
align-items: center;
padding: 0 10px;
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: .08em;
color: var(--text-muted);
background: rgba(0, 0, 0, .3);
border: 1px solid var(--line-cool);
}
.image-upload-status:empty { display: none; }
.image-upload-status.is-ok { color: var(--signal-green); border-color: rgba(95, 185, 141, .4); }
.image-upload-status.is-error { color: var(--signal-red); border-color: rgba(211, 66, 86, .4); }
.image-thumb {
margin-top: 8px;
}
.image-thumb img {
display: block;
max-width: 200px;
max-height: 140px;
border: 1px solid var(--line-cool);
padding: 3px;
background: rgba(0, 0, 0, .3);
}
/* ─── Color-Picker + Bg-Clear ──────────────────────────────────── */
.color-input {
padding: 2px 4px !important;
height: 36px;
cursor: pointer;
}
.bg-color-wrap {
display: flex;
align-items: stretch;
gap: 2px;
}
.bg-color-wrap input[type="color"] {
flex: 1;
min-width: 0;
}
.bg-color-wrap.is-empty input[type="color"] {
opacity: .35;
}
.bg-clear {
width: 32px;
background: rgba(5, 6, 10, .4);
color: var(--text-muted);
border: 1px solid var(--line-cool);
cursor: pointer;
font-size: 12px;
transition: all var(--t-fast) var(--ease);
}
.bg-clear:hover {
color: var(--signal-red);
border-color: rgba(211, 66, 86, .4);
background: rgba(211, 66, 86, .08);
}
/* ─── Block-Kollaps ────────────────────────────────────────────── */
.tpl-block-head {
cursor: pointer;
user-select: none;
}
.tpl-block.is-collapsed .tpl-block-body {
display: none;
}
.tpl-block.is-collapsed .tpl-block-head {
border-bottom: none;
}
.tpl-block.is-collapsed::after {
content: "";
display: block;
height: 2px;
background: linear-gradient(90deg, transparent, var(--line), transparent);
}
/* Input/Range: den Track-Stil fürs Overlay-Opacity-Slider hübscher */
input[type="range"].input {
padding: 0;
height: 24px;
background: transparent;
border: none;
cursor: pointer;
}
/* Detail view grid responsive */
@media (max-width: 1100px){
div[style*="grid-template-columns:2fr 1fr"]{grid-template-columns:1fr !important}
}
@media (max-width: 700px){
.filter-bar{flex-direction:column;align-items:stretch}
.filter-bar .input,.filter-bar .select{width:100%;max-width:none !important}
.panel--flush .table{font-size:.85em}
.panel--flush .table th,.panel--flush .table td{padding:10px 8px}
.panel--flush .table th:first-child,.panel--flush .table td:first-child{padding-left:16px}
.panel--flush .table th:last-child,.panel--flush .table td:last-child{padding-right:16px}
.subtable-header{padding:14px 16px}
.row-action-panel{right:auto;left:0}
}
/* ═══ ETAPPE 5: KAMPAGNEN ═══════════════════════════════════════════ */
/* Pill-Status-Varianten */
.pill-count {
display: inline-block;
margin-left: 4px;
padding: 1px 6px;
background: rgba(255,255,255,.08);
border-radius: 8px;
font-family: var(--f-mono);
font-size: 9px;
color: var(--text-soft);
}
.pill-active { border-color: var(--gold) !important; color: var(--gold-pale) !important; background: rgba(201,169,97,.08) !important; }
/* Campaign-Grid (Editor) */
.campaign-grid {
display: grid;
grid-template-columns: 1fr 360px;
gap: 20px;
align-items: flex-start;
}
.campaign-grid > div:first-child > .panel { margin-bottom: 16px; }
.campaign-grid > div:first-child > .panel:last-child { margin-bottom: 0; }
@media (max-width: 1200px) {
.campaign-grid { grid-template-columns: 1fr; }
.campaign-send-panel { position: static !important; }
}
/* Template Picker */
.template-picker {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
}
.template-pick {
display: flex;
flex-direction: column;
gap: 8px;
padding: 8px;
border: 1px solid var(--line-cool);
background: rgba(10,12,18,.3);
cursor: pointer;
transition: all var(--t-fast) var(--ease);
position: relative;
}
.template-pick:hover { border-color: var(--line); }
.template-pick.is-active,
.template-pick:has(input:checked) {
border-color: var(--gold);
background: rgba(201,169,97,.06);
}
.template-pick input { position: absolute; opacity: 0; }
/* Preview-Wrapper: fester Aspect, JS skaliert iframe proportional auf 600px */
.template-pick-preview {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
border: 1px solid var(--line-cool);
background: #0a0c12;
}
.template-pick-preview iframe {
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 800px;
border: 0;
transform: scale(0.35);
transform-origin: top left;
pointer-events: none;
}
.template-pick-name {
font-family: var(--f-body);
font-weight: 500;
color: var(--ivory);
font-size: .92em;
text-align: center;
}
/* List Picker */
.list-picker {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 8px;
}
.list-pick {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--line-cool);
cursor: pointer;
transition: all var(--t-fast) var(--ease);
}
.list-pick:hover { border-color: var(--line); }
.list-pick:has(input:checked) {
border-color: var(--gold);
background: rgba(201,169,97,.05);
}
.list-pick input { accent-color: var(--gold); margin-top: 2px; }
.list-pick-name { font-weight: 500; color: var(--ivory); margin-bottom: 2px; }
/* Send-Panel (sticky) */
.campaign-send-panel { min-width: 0; }
.campaign-recipients-estimate {
padding: 16px;
text-align: center;
background: rgba(201,169,97,.05);
border: 1px solid var(--line-cool);
}
.recipients-count {
font-family: var(--f-display);
font-style: italic;
font-size: 2.6rem;
color: var(--gold-pale);
line-height: 1.1;
}
/* Radio-Options im Send-Panel */
.radio-option {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--line-cool);
cursor: pointer;
font-size: 14px;
}
.radio-option:hover { border-color: var(--line); }
.radio-option:has(input:checked) { border-color: var(--gold); background: rgba(201,169,97,.05); }
.radio-option input { accent-color: var(--gold); }
/* Progress Bars */
.progress-bar {
width: 100%;
height: 6px;
background: rgba(255,255,255,.06);
overflow: hidden;
border-radius: 0;
}
.progress-bar-lg { height: 10px; }
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-pale));
transition: width .5s var(--ease);
}
/* Campaigns-Table (Übersicht) */
.campaigns-table .row-title {
color: var(--ivory);
font-weight: 500;
border-bottom: none;
}
.campaigns-table .row-title:hover { color: var(--gold-pale); }
.campaigns-table .row-sub { font-size: 12.5px; margin-top: 2px; }
/* Campaign-View-Grid */
.campaign-view-grid {
display: grid;
grid-template-columns: 320px 1fr;
gap: 20px;
align-items: flex-start;
}
@media (max-width: 1000px) {
.campaign-view-grid { grid-template-columns: 1fr; }
}
.campaign-hero {}
.campaign-hero-status { margin-bottom: 14px; }
.campaign-hero-title {
font-family: var(--f-display);
font-style: italic;
font-weight: 500;
color: var(--gold-pale);
font-size: 1.5rem;
line-height: 1.2;
margin: 0 0 8px;
}
.campaign-hero-preheader { font-size: 13px; margin: 0 0 16px; }
.campaign-facts {
margin: 16px 0 0;
display: grid;
grid-template-columns: 100px 1fr;
gap: 8px 14px;
font-size: 13px;
}
.campaign-facts dt {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--text-dim);
padding-top: 2px;
}
.campaign-facts dd { margin: 0; color: var(--text); word-break: break-word; }
.tag {
display: inline-block;
padding: 2px 8px;
margin: 0 4px 4px 0;
border: 1px solid var(--line);
background: rgba(201,169,97,.05);
color: var(--gold-light);
font-size: 11.5px;
text-decoration: none;
}
.tag:hover { background: rgba(201,169,97,.12); border-color: var(--gold); color: var(--gold-pale); border-bottom: 1px solid var(--gold); }
/* Stats-Grid */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
}
.stat-card {
padding: 18px 20px;
background: linear-gradient(180deg, rgba(15,18,25,.6), rgba(10,12,18,.8));
border: 1px solid var(--line-cool);
border-top: 2px solid var(--gold);
}
.stat-card-blue { border-top-color: var(--signal-blue); }
.stat-card-gold { border-top-color: var(--gold-pale); }
.stat-card-err { border-top-color: var(--signal-red); }
.stat-value {
font-family: var(--f-display);
font-style: italic;
font-weight: 500;
font-size: 2rem;
color: var(--ivory);
line-height: 1.1;
}
.stat-card-err .stat-value { color: var(--signal-red); }
.stat-label {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 6px;
}
/* Live-Dot für aktive Kampagnen */
.live-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--signal-green);
box-shadow: 0 0 0 0 rgba(95,185,141,.6);
margin-right: 6px;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(95,185,141,.6); }
70% { box-shadow: 0 0 0 6px rgba(95,185,141,0); }
100% { box-shadow: 0 0 0 0 rgba(95,185,141,0); }
}
.table-slim th { font-size: 10px; padding: 8px 12px; }
.table-slim td { padding: 10px 12px; }
/* ═══ MEDIEN-BIBLIOTHEK ══════════════════════════════════════════════ */
.media-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.media-stats {
font-family: var(--f-mono);
font-size: 11.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text-soft);
}
.media-stats strong { color: var(--gold-pale); font-weight: 600; }
.media-searchrow { flex: 1; max-width: 340px; min-width: 200px; }
.media-search { width: 100%; }
/* Dropzone */
.media-dropzone {
position: relative;
padding: 28px 24px;
border: 1.5px dashed var(--line);
background: linear-gradient(180deg, rgba(15,18,25,.4), rgba(10,12,18,.6));
margin-bottom: 24px;
text-align: center;
transition: all var(--t-fast) var(--ease);
}
.media-dropzone.is-hover {
border-color: var(--gold);
background: linear-gradient(180deg, rgba(201,169,97,.06), rgba(201,169,97,.02));
}
.media-dropzone-icon {
font-size: 1.8rem;
color: var(--gold);
margin-bottom: 8px;
}
.media-dropzone-title {
font-family: var(--f-display);
font-style: italic;
font-size: 1.3rem;
color: var(--gold-pale);
margin-bottom: 4px;
}
.media-dropzone-sub {
color: var(--text-muted);
font-size: 13px;
}
.link-btn {
background: none;
border: none;
color: var(--gold-light);
cursor: pointer;
text-decoration: underline;
font: inherit;
padding: 0;
}
.link-btn:hover { color: var(--gold-pale); }
.media-upload-queue {
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 4px;
}
.media-upload-queue:empty { display: none; }
.media-upload-row {
display: flex;
justify-content: space-between;
padding: 6px 12px;
background: rgba(5,6,10,.4);
border-left: 3px solid var(--line-cool);
font-size: 12px;
font-family: var(--f-mono);
}
.media-upload-row.is-ok { border-left-color: var(--signal-green); color: var(--signal-green); }
.media-upload-row.is-error { border-left-color: var(--signal-red); color: var(--signal-red); }
.media-upload-name { color: var(--text); }
.media-upload-status { color: inherit; opacity: .8; }
/* Grid */
.media-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 14px;
}
.media-item {
background: rgba(10,12,18,.6);
border: 1px solid var(--line-cool);
cursor: pointer;
transition: all var(--t-fast) var(--ease);
display: flex;
flex-direction: column;
}
.media-item:hover {
border-color: var(--gold);
transform: translateY(-2px);
box-shadow: 0 8px 20px -8px rgba(0,0,0,.5);
}
.media-item-thumb {
aspect-ratio: 1;
background: #0a0c12 url("data:image/svg+xml;utf8,");
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.media-item-thumb img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.media-item-meta {
padding: 10px 12px;
border-top: 1px solid var(--line-cool);
}
.media-item-name {
color: var(--ivory);
font-size: 12.5px;
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.media-item-sub {
font-family: var(--f-mono);
font-size: 10px;
color: var(--text-dim);
letter-spacing: .06em;
}
.media-item-sub .dot { color: var(--gold-deep); }
/* Media-Modal */
.media-modal { max-width: 900px; width: 96vw; }
.media-modal-body {
display: grid;
grid-template-columns: 1fr 280px;
gap: 24px;
align-items: start;
}
.media-modal-preview {
background: #0a0c12 url("data:image/svg+xml;utf8,");
min-height: 300px;
max-height: 520px;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.media-modal-preview img {
max-width: 100%;
max-height: 480px;
object-fit: contain;
display: block;
}
.media-modal-info {}
@media (max-width: 768px) {
.media-modal-body { grid-template-columns: 1fr; }
.media-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
/* ═══ BIBLIOTHEK-PICKER-MODAL (im Template-Editor) ════════════════════ */
.lib-picker-modal { max-width: 840px; width: 96vw; max-height: 88vh; display: flex; flex-direction: column; }
.lib-picker-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 10px;
overflow-y: auto;
max-height: 60vh;
padding: 4px;
}
.lib-picker-loading {
padding: 40px 20px;
text-align: center;
color: var(--text-muted);
font-size: 13px;
grid-column: 1 / -1;
}
.lib-picker-item {
cursor: pointer;
border: 1px solid var(--line-cool);
background: rgba(5,6,10,.4);
transition: all var(--t-fast) var(--ease);
display: flex;
flex-direction: column;
}
.lib-picker-item:hover {
border-color: var(--gold);
background: rgba(201,169,97,.05);
}
.lib-picker-item img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
display: block;
}
.lib-picker-caption {
padding: 6px 8px;
font-size: 10.5px;
color: var(--text-soft);
border-top: 1px solid var(--line-cool);
font-family: var(--f-mono);
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lib-picker-search { max-width: 300px; }
/* ═══ MODAL-BACKDROP (shared, falls nicht schon da) ════════════════════ */
.modal-backdrop {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(5,6,10,.85);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: modalFadeIn .2s ease;
}
.modal-backdrop[hidden] { display: none; }
@keyframes modalFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal {
position: relative;
background: linear-gradient(180deg, #0f1219, #0a0c12);
border: 1px solid var(--line);
padding: 28px;
max-width: 520px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px -10px rgba(0,0,0,.7);
}
.modal::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--line-strong) 30%, var(--line-strong) 70%, transparent);
}
.modal-close {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
background: transparent;
border: 1px solid var(--line-cool);
color: var(--text-muted);
cursor: pointer;
font-size: 18px;
line-height: 1;
transition: all var(--t-fast) var(--ease);
z-index: 2;
}
.modal-close:hover {
color: var(--signal-red);
border-color: var(--signal-red);
}
/* ═══ DESIGN-STUDIO: Feintuning, Paletten, Device-Switch ═════════════ */
/* Feintuning-Accordion */
.tpl-tuning {
margin-top: 12px;
border-top: 1px solid var(--line-cool);
padding-top: 10px;
}
.tpl-tuning > summary {
cursor: pointer;
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--text-muted);
padding: 4px 0;
user-select: none;
list-style: none;
transition: color var(--t-fast) var(--ease);
}
.tpl-tuning > summary::-webkit-details-marker { display: none; }
.tpl-tuning > summary:hover { color: var(--gold-light); }
.tpl-tuning[open] > summary { color: var(--gold-pale); }
.tpl-tuning-body {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px;
background: rgba(5,6,10,.3);
border: 1px solid var(--line-cool);
}
/* Font-Picker */
.font-picker { width: 100%; }
.font-picker-select {
width: 100%;
font-size: 14px;
padding: 8px 12px;
background: rgba(10,12,18,.6);
border: 1px solid var(--line-cool);
color: var(--ivory);
cursor: pointer;
}
.font-picker-select:hover { border-color: var(--line); }
.font-picker-select:focus { border-color: var(--gold); outline: none; }
.font-picker-select option { font-size: 14px; }
.font-picker-select optgroup {
color: var(--gold-light);
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
font-style: normal;
}
/* ═══ Paletten-Presets ═══════════════════════════════════════════════ */
.tpl-palettes {
margin-bottom: 16px;
border: 1px solid var(--line-cool);
background: linear-gradient(180deg, rgba(15,18,25,.4), rgba(10,12,18,.6));
}
.tpl-palettes > summary {
cursor: pointer;
padding: 12px 16px;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--gold-light);
display: flex;
align-items: center;
gap: 10px;
list-style: none;
user-select: none;
transition: all var(--t-fast) var(--ease);
}
.tpl-palettes > summary::-webkit-details-marker { display: none; }
.tpl-palettes > summary:hover { background: rgba(201,169,97,.05); }
.tpl-palettes-icon { font-size: 16px; }
.tpl-palettes[open] > summary { border-bottom: 1px solid var(--line-cool); }
.tpl-palettes-body { padding: 16px; }
.palette-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 10px;
}
.palette-swatch {
padding: 12px 10px;
background: rgba(5,6,10,.4);
border: 1px solid var(--line-cool);
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
transition: all var(--t-fast) var(--ease);
text-align: center;
}
.palette-swatch:hover {
border-color: var(--gold);
transform: translateY(-2px);
background: rgba(201,169,97,.04);
}
.palette-preview {
width: 100%;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
border: 1px solid var(--line-cool);
}
.palette-chip {
width: 20%;
height: 60%;
display: block;
}
.palette-name {
font-family: var(--f-body);
font-weight: 500;
color: var(--ivory);
font-size: 13px;
}
.palette-desc {
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: .1em;
color: var(--text-muted);
text-transform: uppercase;
}
/* ═══ Device-Switch + Preview-Stage ══════════════════════════════════ */
.tpl-preview-devices {
display: inline-flex;
gap: 4px;
margin-left: auto;
margin-right: 12px;
background: rgba(5,6,10,.4);
border: 1px solid var(--line-cool);
padding: 2px;
}
.tpl-device-btn {
padding: 5px 10px;
background: transparent;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: 11px;
font-family: var(--f-mono);
letter-spacing: .08em;
transition: all var(--t-fast) var(--ease);
}
.tpl-device-btn:hover { color: var(--gold-light); }
.tpl-device-btn.is-active {
background: rgba(201,169,97,.1);
color: var(--gold-pale);
}
.tpl-preview-stage {
background: #0a0c12;
position: relative;
width: 100%;
display: flex;
justify-content: center;
padding: 0;
transition: padding var(--t-med) var(--ease);
overflow-x: auto;
}
.tpl-preview-stage iframe {
width: 680px;
min-width: 680px;
min-height: 600px;
border: none;
background: #0a0c12;
transition: width var(--t-med) var(--ease), min-width var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
display: block;
}
.tpl-preview-stage[data-device="mobile"] {
padding: 20px 0;
background: linear-gradient(180deg, #050609, #0a0c12);
}
.tpl-preview-stage[data-device="mobile"] iframe {
width: 375px;
min-width: 375px;
max-width: 375px;
box-shadow: 0 0 0 1px var(--line), 0 12px 40px -8px rgba(0,0,0,.6);
border-radius: 18px;
overflow: hidden;
}
/* Drag-and-Drop */
.tpl-block.is-dragging {
opacity: 0.4;
transform: scale(0.98);
}
.tpl-block.is-drop-target {
border-top: 2px solid var(--gold);
transform: translateY(1px);
}
/* ═══ FONTS-ADMIN-SEITE ══════════════════════════════════════════════ */
.fonts-section { margin-bottom: 32px; }
.fonts-section-head {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 14px;
padding-bottom: 8px;
border-bottom: 1px solid var(--line-cool);
}
.fonts-section-head h4 {
margin: 0;
font-family: var(--f-display);
font-style: italic;
font-weight: 500;
font-size: 1.3rem;
color: var(--gold-pale);
}
.fonts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.fonts-card {
padding: 20px;
background: linear-gradient(180deg, rgba(15,18,25,.6), rgba(10,12,18,.8));
border: 1px solid var(--line-cool);
transition: all var(--t-fast) var(--ease);
position: relative;
}
.fonts-card:hover {
border-color: var(--gold);
box-shadow: 0 8px 24px -12px rgba(0,0,0,.5);
transform: translateY(-2px);
}
.fonts-card-head {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--line-cool);
}
.fonts-card-name {
font-family: var(--f-body);
font-weight: 500;
color: var(--ivory);
flex: 1;
font-size: 13px;
}
.fonts-card-source { margin-left: auto; }
.fonts-card-sample { margin: 0 0 14px; }
.fonts-card-large {
font-size: 1.6rem;
line-height: 1.2;
color: var(--gold-pale);
margin-bottom: 10px;
font-style: italic;
}
.fonts-card-small {
font-size: 13px;
line-height: 1.6;
color: var(--text-soft);
}
.fonts-card-meta {
font-size: 10.5px;
color: var(--text-dim);
border-top: 1px dashed var(--line-cool);
padding-top: 10px;
}
.fonts-card-meta code {
background: rgba(201,169,97,.05);
padding: 2px 6px;
border-radius: 2px;
color: var(--gold-light);
font-size: 10.5px;
}
.code-block {
background: rgba(5,6,10,.5);
border: 1px solid var(--line-cool);
padding: 12px 16px;
font-family: var(--f-mono);
font-size: 12px;
overflow-x: auto;
}
.code-block pre { margin: 0; color: var(--text-soft); }
.code-block code { background: none; padding: 0; color: inherit; }
/* ═══ TOAST-SYSTEM ══════════════════════════════════════════════════ */
.toast-stack {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 300;
display: flex;
flex-direction: column;
gap: 10px;
max-width: 420px;
pointer-events: none;
}
.toast {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
background: linear-gradient(180deg, #0f1219, #0a0c12);
border: 1px solid var(--line);
border-left: 3px solid var(--gold);
box-shadow: 0 12px 40px -12px rgba(0,0,0,.7);
color: var(--ivory);
font-size: 13.5px;
pointer-events: auto;
animation: toastIn .28s cubic-bezier(.22,1,.36,1);
min-width: 280px;
}
@keyframes toastIn {
from { transform: translateX(20px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.toast.is-leaving { animation: toastOut .3s forwards; }
@keyframes toastOut {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(40px); opacity: 0; }
}
.toast-success { border-left-color: var(--signal-green); }
.toast-error { border-left-color: var(--signal-red); }
.toast-warn { border-left-color: var(--signal-amber); }
.toast-info { border-left-color: var(--signal-blue); }
.toast-icon::before { content: "•"; color: var(--gold); font-size: 16px; line-height: 1; }
.toast-success .toast-icon::before { content: "✓"; color: var(--signal-green); font-size: 16px; }
.toast-error .toast-icon::before { content: "✕"; color: var(--signal-red); font-size: 16px; }
.toast-warn .toast-icon::before { content: "!"; color: var(--signal-amber); font-weight: 700; font-size: 16px; }
.toast-info .toast-icon::before { content: "i"; color: var(--signal-blue); font-style: italic; font-weight: 600; font-size: 14px; }
.toast-confirm .toast-icon::before { content: "?"; color: var(--gold-light); font-weight: 600; font-size: 16px; }
.toast-body { flex: 1; line-height: 1.45; }
.toast-close {
background: none;
border: none;
color: var(--text-dim);
cursor: pointer;
font-size: 16px;
padding: 0 2px;
line-height: 1;
transition: color var(--t-fast) var(--ease);
}
.toast-close:hover { color: var(--signal-red); }
.toast-action {
background: rgba(201,169,97,.1);
border: 1px solid var(--gold);
color: var(--gold-pale);
padding: 4px 10px;
font-size: 12px;
cursor: pointer;
font-family: var(--f-body);
transition: all var(--t-fast) var(--ease);
}
.toast-action:hover { background: rgba(201,169,97,.2); }
/* Confirm-Toast mit Buttons */
.toast-confirm {
border-left-color: var(--gold-light);
flex-direction: column;
align-items: stretch;
min-width: 320px;
}
.toast-confirm .toast-icon { display: none; }
.toast-confirm-body {
display: flex;
flex-direction: column;
gap: 12px;
}
.toast-confirm-msg { line-height: 1.45; }
.toast-confirm-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}
/* ═══ SNIPPETS-MODAL ═══════════════════════════════════════════════ */
.tpl-snippets-modal { max-width: 720px; width: 96vw; }
.tpl-snippets-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
}
.tpl-snippet-card {
padding: 16px 18px;
background: rgba(5,6,10,.4);
border: 1px solid var(--line-cool);
cursor: pointer;
text-align: left;
font-family: inherit;
transition: all var(--t-fast) var(--ease);
display: flex;
flex-direction: column;
gap: 4px;
color: inherit;
}
.tpl-snippet-card:hover {
border-color: var(--gold);
background: rgba(201,169,97,.04);
transform: translateY(-2px);
}
.tpl-snippet-name {
font-family: var(--f-body);
font-weight: 500;
color: var(--gold-pale);
font-size: 14px;
}
.tpl-snippet-desc {
font-size: 12.5px;
color: var(--text-soft);
line-height: 1.45;
margin-bottom: 6px;
}
.tpl-snippet-blocks {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text-dim);
margin-top: auto;
}
/* ═══ SHORTCUT-LIST ════════════════════════════════════════════════ */
.shortcut-list {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px 16px;
margin: 0;
}
.shortcut-list dt {
margin: 0;
text-align: right;
}
.shortcut-list dd {
margin: 0;
font-size: 13px;
color: var(--text-soft);
line-height: 1.7;
}
kbd {
display: inline-block;
padding: 3px 8px;
background: rgba(5,6,10,.6);
border: 1px solid var(--line);
border-bottom-width: 2px;
border-radius: 3px;
font-family: var(--f-mono);
font-size: 11px;
color: var(--gold-light);
line-height: 1;
min-width: 22px;
text-align: center;
box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
/* Active-Block-Highlight in der Blockliste */
.tpl-block.is-active {
border-color: var(--gold);
background: rgba(201,169,97,.04);
box-shadow: 0 0 0 1px rgba(201,169,97,.25), 0 4px 14px -6px rgba(201,169,97,.2);
}
.tpl-block.is-active > .tpl-block-head {
background: rgba(201,169,97,.06);
border-bottom-color: var(--gold-deep);
}
/* Signal-Amber-Var, falls noch nicht definiert */
:root {
--signal-amber: #d9a14b;
}
/* ═══ INLINE-INSERT-ZONES ══════════════════════════════════════════ */
.tpl-insert-zone {
position: relative;
height: 12px;
display: flex;
align-items: center;
justify-content: center;
transition: height var(--t-fast) var(--ease);
}
.tpl-insert-zone:hover { height: 32px; }
.tpl-insert-plus {
opacity: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--gold);
color: #0a0c12;
border: none;
font-size: 20px;
line-height: 1;
cursor: pointer;
transition: all var(--t-fast) var(--ease);
box-shadow: 0 2px 10px rgba(201,169,97,.4);
transform: scale(.7);
}
.tpl-insert-zone:hover .tpl-insert-plus {
opacity: 1;
transform: scale(1);
}
.tpl-insert-plus:hover {
background: var(--gold-pale);
transform: scale(1.1);
}
.tpl-insert-zone::before {
content: "";
position: absolute;
left: 10%; right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
opacity: 0;
transition: opacity var(--t-fast) var(--ease);
}
.tpl-insert-zone:hover::before { opacity: .4; }
/* Quick-Insert-Menu */
.tpl-quick-insert {
position: fixed;
z-index: 250;
background: linear-gradient(180deg, #0f1219, #0a0c12);
border: 1px solid var(--gold);
padding: 10px;
box-shadow: 0 12px 40px -10px rgba(0,0,0,.7);
display: flex;
gap: 14px;
max-width: 540px;
animation: quickInsertIn .15s var(--ease);
}
@keyframes quickInsertIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.tpl-quick-insert-cat {
display: flex;
flex-direction: column;
min-width: 110px;
}
.tpl-quick-insert-cat-name {
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--gold-light);
margin-bottom: 8px;
padding-bottom: 4px;
border-bottom: 1px solid var(--line-cool);
}
.tpl-quick-insert-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
background: transparent;
border: none;
color: var(--text);
cursor: pointer;
font-family: inherit;
font-size: 12.5px;
text-align: left;
transition: all var(--t-fast) var(--ease);
}
.tpl-quick-insert-btn:hover {
background: rgba(201,169,97,.08);
color: var(--gold-pale);
}
.tpl-quick-insert-icon {
display: inline-flex;
width: 20px;
height: 20px;
align-items: center;
justify-content: center;
font-size: 13px;
color: var(--gold);
}
/* ═══ STATS BAR ═══════════════════════════════════════════════════════ */
.tpl-stats-bar {
display: flex;
align-items: center;
gap: 20px;
padding: 12px 20px;
margin-top: 16px;
background: linear-gradient(180deg, rgba(15,18,25,.4), rgba(10,12,18,.6));
border-top: 1px solid var(--line-cool);
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--text-muted);
flex-wrap: wrap;
}
.tpl-stat strong {
color: var(--gold-pale);
font-weight: 600;
font-size: 13px;
letter-spacing: normal;
}
.tpl-stat-search {
margin-left: auto;
flex: 1;
max-width: 280px;
min-width: 180px;
}
.tpl-stat-search input { font-size: 12px; padding: 6px 10px; width: 100%; }
/* ═══ BLOCK VISIBILITY / FILTER / SECTIONS ════════════════════════════ */
.tpl-block.is-hidden-block {
opacity: 0.45;
background: repeating-linear-gradient(
45deg,
rgba(10,12,18,.6),
rgba(10,12,18,.6) 10px,
rgba(5,6,10,.6) 10px,
rgba(5,6,10,.6) 20px
);
}
.tpl-block.is-hidden-block .tpl-block-head::after {
content: "AUSGEBLENDET";
position: absolute;
right: 80px;
top: 50%;
transform: translateY(-50%);
font-family: var(--f-mono);
font-size: 9px;
letter-spacing: .18em;
color: var(--signal-amber);
font-weight: 600;
}
.tpl-block.is-filtered-out {
display: none;
}
.tpl-block.is-section-start {
margin-top: 20px;
position: relative;
}
.tpl-block.is-section-start::before {
content: "";
position: absolute;
top: -12px;
left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}
.tpl-block-visibility {
color: var(--text-soft);
}
.tpl-block-visibility:hover { color: var(--gold-light); }
.tpl-block-visibility.is-hidden { color: var(--signal-amber); }
/* ═══ PREVIEW MODE SWITCH + PLAIN TEXT ═══════════════════════════════ */
.tpl-preview-modes {
display: inline-flex;
gap: 2px;
background: rgba(5,6,10,.5);
border: 1px solid var(--line-cool);
padding: 2px;
margin-left: 12px;
}
.tpl-mode-btn {
padding: 4px 10px;
background: transparent;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: 11px;
font-family: var(--f-mono);
letter-spacing: .1em;
transition: all var(--t-fast) var(--ease);
}
.tpl-mode-btn:hover { color: var(--gold-light); }
.tpl-mode-btn.is-active { background: rgba(201,169,97,.1); color: var(--gold-pale); }
.tpl-preview-stage[data-mode="text"] {
padding: 20px;
background: #f5f1e8;
}
.tpl-preview-text {
margin: 0;
padding: 24px 28px;
background: #f5f1e8;
color: #2a2414;
font-family: 'Courier New', monospace;
font-size: 13px;
line-height: 1.7;
white-space: pre-wrap;
word-wrap: break-word;
min-height: 500px;
overflow: auto;
border: 1px solid var(--line);
max-width: 600px;
margin: 0 auto;
}
/* ═══ RECENT COLORS ═══════════════════════════════════════════════════ */
.recent-colors {
display: flex;
gap: 3px;
margin-top: 6px;
flex-wrap: wrap;
max-width: 200px;
}
.recent-colors:empty { display: none; }
.recent-color-chip {
width: 18px;
height: 18px;
border: 1px solid var(--line);
cursor: pointer;
transition: transform var(--t-fast) var(--ease);
padding: 0;
}
.recent-color-chip:hover {
transform: scale(1.15);
border-color: var(--gold);
}
/* ═══ ONBOARDING-TOUR ═════════════════════════════════════════════════ */
.tour-overlay {
position: fixed;
inset: 0;
z-index: 400;
background: rgba(5,6,10,.82);
backdrop-filter: blur(3px);
pointer-events: auto;
}
.tour-spotlight {
position: fixed;
border: 2px solid var(--gold);
box-shadow: 0 0 0 9999px rgba(5,6,10,.78), 0 0 40px rgba(201,169,97,.35);
border-radius: 6px;
pointer-events: none;
transition: all .4s cubic-bezier(.22,1,.36,1);
}
.tour-tooltip {
position: fixed;
max-width: 340px;
padding: 18px 22px;
background: linear-gradient(180deg, #0f1219, #0a0c12);
border: 1px solid var(--gold);
box-shadow: 0 12px 40px -8px rgba(0,0,0,.7);
color: var(--ivory);
transition: all .4s cubic-bezier(.22,1,.36,1);
}
.tour-tooltip p {
margin: 0 0 14px;
font-size: 13.5px;
line-height: 1.55;
color: var(--text);
}
.tour-actions {
display: flex;
align-items: center;
gap: 8px;
justify-content: flex-end;
}
.tour-progress {
flex: 1;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .14em;
color: var(--text-muted);
text-transform: uppercase;
}
/* ═══ DASHBOARD ═══════════════════════════════════════════════════════ */
.dash-health-warnings { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.dash-warning {
padding: 12px 18px;
background: linear-gradient(180deg, rgba(217,161,75,.1), rgba(217,161,75,.04));
border-left: 3px solid var(--signal-amber);
color: var(--text);
font-size: 13.5px;
}
.dash-warning-icon { color: var(--signal-amber); margin-right: 10px; font-weight: 600; }
.dash-kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 14px;
margin-bottom: 24px;
}
.dash-kpi-card {
padding: 22px 24px;
background: linear-gradient(180deg, rgba(15,18,25,.7), rgba(10,12,18,.9));
border: 1px solid var(--line-cool);
border-top: 2px solid var(--gold);
text-decoration: none;
color: inherit;
display: block;
transition: all var(--t-fast) var(--ease);
border-bottom: none;
}
a.dash-kpi-card:hover {
border-top-color: var(--gold-pale);
transform: translateY(-2px);
box-shadow: 0 8px 22px -10px rgba(201,169,97,.3);
}
.dash-kpi-label {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 10px;
}
.dash-kpi-value {
font-family: var(--f-display);
font-style: italic;
font-weight: 500;
font-size: 2.4rem;
line-height: 1;
color: var(--gold-pale);
}
.dash-kpi-delta {
margin-top: 8px;
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: .1em;
color: var(--text-soft);
}
.dash-kpi-delta.is-up { color: var(--signal-green); }
.dash-kpi-delta.is-down { color: var(--signal-red); }
.dash-two-col {
display: grid;
grid-template-columns: 1fr 340px;
gap: 20px;
align-items: flex-start;
}
@media (max-width: 1100px) {
.dash-two-col { grid-template-columns: 1fr; }
}
.dash-campaign-list {
display: flex;
flex-direction: column;
}
.dash-campaign-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid var(--line-cool);
text-decoration: none;
color: inherit;
transition: background var(--t-fast) var(--ease);
border-bottom: 1px solid var(--line-cool);
}
.dash-campaign-item:last-child { border-bottom: none; }
.dash-campaign-item:hover { background: rgba(201,169,97,.03); padding-left: 6px; padding-right: 6px; margin-left: -6px; margin-right: -6px; border-bottom-color: transparent; }
.dash-campaign-info { flex: 1; min-width: 0; }
.dash-campaign-name {
color: var(--ivory);
font-size: 14px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dash-campaign-meta {
font-size: 11.5px;
color: var(--text-muted);
margin-top: 2px;
display: flex;
align-items: center;
gap: 8px;
}
.dash-campaign-progress {
display: flex;
align-items: center;
gap: 8px;
min-width: 140px;
}
.dash-campaign-progress .progress-bar { flex: 1; width: 100px; }
.dash-campaign-stats {
display: flex;
gap: 14px;
flex-shrink: 0;
}
.dash-stat-inline {
text-align: right;
min-width: 60px;
}
.dash-stat-val {
display: block;
color: var(--gold-pale);
font-family: var(--f-display);
font-style: italic;
font-size: 1.2rem;
line-height: 1;
}
.dash-stat-lbl {
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 2px;
}
.dash-status-list {
margin: 0;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 14px;
font-size: 13px;
}
.dash-status-list dt { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); padding-top: 4px; }
.dash-status-list dd { margin: 0; text-align: right; }
.dash-activity {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.dash-activity li {
display: flex;
align-items: flex-start;
gap: 10px;
}
.dash-act-icon {
width: 24px; height: 24px;
background: rgba(201,169,97,.08);
border: 1px solid var(--line-cool);
color: var(--gold);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
flex-shrink: 0;
}
.dash-act-label { color: var(--text); font-size: 12.5px; }
.dash-act-time { margin-top: 1px; }
.dash-quick-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.dash-quick-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: rgba(5,6,10,.4);
border: 1px solid var(--line-cool);
color: var(--text);
text-decoration: none;
font-size: 12.5px;
transition: all var(--t-fast) var(--ease);
border-bottom: 1px solid var(--line-cool);
}
.dash-quick-btn:hover {
border-color: var(--gold);
background: rgba(201,169,97,.05);
color: var(--gold-pale);
border-bottom: 1px solid var(--gold);
}
.dash-quick-icon {
display: inline-flex;
width: 26px; height: 26px;
align-items: center;
justify-content: center;
background: rgba(201,169,97,.08);
border: 1px solid var(--line-cool);
color: var(--gold);
font-size: 12px;
flex-shrink: 0;
}
/* ═══ HEALTH-CHECK ════════════════════════════════════════════════════ */
.health-summary { margin-bottom: 24px; }
.health-summary-card {
padding: 20px 24px;
background: linear-gradient(180deg, rgba(15,18,25,.6), rgba(10,12,18,.8));
border: 1px solid var(--line-cool);
border-left: 3px solid var(--signal-green);
}
.health-summary-card.is-meh { border-left-color: var(--signal-amber); }
.health-summary-card.is-bad { border-left-color: var(--signal-red); }
.health-summary-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.health-summary-title {
font-family: var(--f-display);
font-style: italic;
font-weight: 500;
font-size: 1.35rem;
color: var(--gold-pale);
}
.health-summary-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.health-status-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--text-muted);
}
.health-status-dot.is-ok { background: var(--signal-green); box-shadow: 0 0 6px rgba(95,185,141,.4); }
.health-status-dot.is-warn { background: var(--signal-amber); box-shadow: 0 0 6px rgba(217,161,75,.4); }
.health-status-dot.is-error { background: var(--signal-red); box-shadow: 0 0 6px rgba(230,100,100,.5); }
.health-status-dot.is-info { background: var(--signal-blue); opacity: .65; }
.health-table td { vertical-align: middle; padding: 9px 12px; }
/* ═══ SPAM-CHECK-MODAL ═══════════════════════════════════════════════ */
.tpl-spam-modal { max-width: 680px; width: 96vw; }
.spam-score-card {
display: flex;
align-items: center;
gap: 20px;
padding: 20px 24px;
background: linear-gradient(180deg, rgba(15,18,25,.6), rgba(10,12,18,.8));
border: 1px solid var(--line-cool);
border-left: 4px solid var(--signal-green);
margin-bottom: 22px;
}
.spam-score-card.is-meh { border-left-color: var(--signal-amber); }
.spam-score-card.is-bad { border-left-color: var(--signal-red); }
.spam-score-num {
font-family: var(--f-display);
font-style: italic;
font-weight: 500;
font-size: 3.5rem;
line-height: 1;
color: var(--gold-pale);
min-width: 80px;
}
.spam-score-card.is-bad .spam-score-num { color: var(--signal-red); }
.spam-score-detail { flex: 1; }
.spam-score-label {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 8px;
}
.spam-score-bar {
height: 8px;
background: rgba(5,6,10,.5);
border: 1px solid var(--line-cool);
}
.spam-score-fill {
height: 100%;
background: linear-gradient(90deg, var(--signal-green), var(--signal-amber) 50%, var(--signal-red));
transition: width var(--t-med) var(--ease);
}
.spam-findings {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.spam-finding {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
background: rgba(5,6,10,.4);
border: 1px solid var(--line-cool);
border-left: 3px solid var(--line);
}
.spam-finding-icon {
display: inline-flex;
width: 22px; height: 22px;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 13px;
flex-shrink: 0;
border-radius: 50%;
}
.spam-finding-error { border-left-color: var(--signal-red); }
.spam-finding-error .spam-finding-icon { background: rgba(230,100,100,.15); color: var(--signal-red); }
.spam-finding-error .spam-finding-icon::before { content: "!"; }
.spam-finding-warn { border-left-color: var(--signal-amber); }
.spam-finding-warn .spam-finding-icon { background: rgba(217,161,75,.15); color: var(--signal-amber); }
.spam-finding-warn .spam-finding-icon::before { content: "!"; }
.spam-finding-info { border-left-color: var(--signal-green); }
.spam-finding-info .spam-finding-icon { background: rgba(95,185,141,.15); color: var(--signal-green); }
.spam-finding-info .spam-finding-icon::before { content: "✓"; }
.spam-finding-text { font-size: 13px; line-height: 1.5; color: var(--text); }
/* ═══ TAG-CHIPS IN SUBSCRIBER-EDIT ═══════════════════════════════════ */
.subscriber-tags .tag {
font-size: 12px;
padding: 3px 4px 3px 10px;
display: inline-flex;
align-items: center;
border-bottom-width: 1px;
}
/* ═══ SIGNAL-GREEN falls nicht definiert ═════════════════════════════ */
:root {
--signal-green: #5fb98d;
--signal-red: #e66464;
--signal-blue: #5db1e2;
}
.pill-ok { background: rgba(95,185,141,.08); color: var(--signal-green); border-color: var(--signal-green); }
.pill-warn{ background: rgba(217,161,75,.08); color: var(--signal-amber); border-color: var(--signal-amber); }
.pill-err { background: rgba(230,100,100,.08); color: var(--signal-red); border-color: var(--signal-red); }
.pill-info{ background: rgba(93,177,226,.08); color: var(--signal-blue); border-color: var(--signal-blue); }
/* ═══ WEBHOOK / CHECKBOX GRID ═════════════════════════════════════════ */
.checkbox-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 8px;
}
.checkbox-row {
display: flex;
gap: 12px;
padding: 10px 14px;
border: 1px solid var(--line-cool);
cursor: pointer;
transition: all var(--t-fast) var(--ease);
}
.checkbox-row:hover { border-color: var(--line); }
.checkbox-row:has(input:checked) {
border-color: var(--gold);
background: rgba(201,169,97,.04);
}
.checkbox-row input[type="checkbox"] {
margin-top: 2px;
accent-color: var(--gold);
flex-shrink: 0;
}
.checkbox-row code {
font-size: 11px;
color: var(--gold-light);
background: rgba(5,6,10,.4);
padding: 1px 6px;
}
/* ═══ ANALYTICS: CHARTS ═══════════════════════════════════════════════ */
.chart-wrap {
width: 100%;
margin: 4px 0;
}
.chart-svg {
width: 100%;
height: auto;
display: block;
}
.chart-empty {
padding: 40px 24px;
text-align: center;
color: var(--text-muted);
font-size: 13px;
font-style: italic;
background: rgba(5,6,10,.3);
border: 1px dashed var(--line-cool);
}
.chart-legend {
display: flex;
gap: 16px;
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text-muted);
}
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-dot {
display: inline-block;
width: 9px; height: 9px;
border-radius: 50%;
}
.chart-xlabels {
display: flex;
justify-content: space-between;
padding: 6px 40px 0 40px;
font-size: 10px;
color: var(--text-muted);
letter-spacing: .1em;
}
/* ═══ ANALYTICS: ENGAGEMENT-BAR (Leaderboard) ═══════════════════════ */
.engagement-bar {
position: relative;
background: rgba(5,6,10,.5);
border: 1px solid var(--line-cool);
height: 22px;
overflow: hidden;
}
.engagement-bar-fill {
height: 100%;
background: linear-gradient(90deg, rgba(201,169,97,.3), var(--gold) 70%, var(--gold-pale));
transition: width var(--t-med) var(--ease);
}
.engagement-bar-label {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--f-mono);
font-size: 11px;
font-weight: 600;
color: #0a0c12;
text-shadow: 0 0 4px rgba(244,227,184,.5);
}
/* ═══ ANALYTICS: DEVICE-BREAKDOWN CARDS ══════════════════════════════ */
.device-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}
.device-card {
position: relative;
padding: 14px 16px;
background: linear-gradient(180deg, rgba(15,18,25,.6), rgba(10,12,18,.8));
border: 1px solid var(--line-cool);
display: grid;
grid-template-columns: 40px 1fr;
gap: 10px;
align-items: center;
overflow: hidden;
}
.device-icon {
font-size: 22px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(201,169,97,.08);
border: 1px solid var(--line-cool);
}
.device-label {
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 3px;
}
.device-count {
font-family: var(--f-display);
font-style: italic;
font-weight: 500;
font-size: 1.4rem;
color: var(--gold-pale);
line-height: 1;
}
.device-count .muted { font-size: 0.7em; }
.device-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: rgba(5,6,10,.6);
}
.device-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--gold), var(--gold-pale));
transition: width var(--t-med) var(--ease);
}
/* ═══ ANALYTICS: VELOCITY-BARS (Zeit seit Versand) ═══════════════════ */
.velocity-grid {
display: flex;
flex-direction: column;
gap: 8px;
}
.velocity-row {
display: grid;
grid-template-columns: 100px 1fr 50px;
gap: 12px;
align-items: center;
}
.velocity-label {
font-size: 11px;
color: var(--text-muted);
letter-spacing: .08em;
text-align: right;
}
.velocity-bar {
height: 18px;
background: rgba(5,6,10,.5);
border: 1px solid var(--line-cool);
overflow: hidden;
}
.velocity-bar-fill {
height: 100%;
background: linear-gradient(90deg, rgba(93,177,226,.5), var(--signal-blue));
transition: width var(--t-med) var(--ease);
}
.velocity-count {
font-size: 12px;
font-weight: 600;
color: var(--gold-pale);
}
/* ═══ TAB-PILLS (für Engagement top/inactive) ════════════════════════ */
.filter-bar .pill {
cursor: pointer;
text-decoration: none;
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: .16em;
text-transform: uppercase;
padding: 6px 14px;
border: 1px solid var(--line-cool);
color: var(--text-muted);
background: transparent;
transition: all var(--t-fast) var(--ease);
}
.filter-bar .pill:hover {
border-color: var(--gold-light);
color: var(--gold-pale);
}
.filter-bar .pill.pill-active {
background: rgba(201,169,97,.1);
border-color: var(--gold);
color: var(--gold-pale);
}
/* ═══ TEMPLATE GALERIE ═══════════════════════════════════════════════ */
.gallery-intro {
max-width: 720px;
margin: 0 auto 32px;
text-align: center;
}
.gallery-intro-title {
font-family: var(--f-display);
font-style: italic;
font-weight: 500;
font-size: 2rem;
color: var(--gold-pale);
margin: 0 0 12px;
}
.gallery-intro-text {
color: var(--text-soft);
font-size: 15px;
line-height: 1.6;
margin: 0;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.gallery-card {
background: linear-gradient(180deg, rgba(15,18,25,.7), rgba(10,12,18,.9));
border: 1px solid var(--line-cool);
overflow: hidden;
transition: all var(--t-med) var(--ease);
display: flex;
flex-direction: column;
}
.gallery-card:hover {
border-color: var(--gold);
transform: translateY(-3px);
box-shadow: 0 12px 32px -12px rgba(201,169,97,.3);
}
.gallery-card-preview {
background: #05060a;
position: relative;
overflow: hidden;
height: 320px;
border-bottom: 1px solid var(--line-cool);
}
.gallery-card-preview svg {
width: 100%;
height: auto;
display: block;
max-height: 320px;
}
/* iframe zeigt die ECHTE gerenderte Template-Vorschau.
Die Mail rendert in 600px Breite; wir skalieren sie per CSS auf Card-Breite
(~380px typisch) runter. Scaling-Faktor ist großzügig gewählt damit auch
schmale Cards gut aussehen. pointer-events:none verhindert Klicks im iframe
— das wäre verwirrend (es soll nur eine Vorschau sein, kein Klickziel). */
.gallery-card-preview-iframe {
position: absolute;
top: 0; left: 0;
width: 600px;
height: 1920px; /* lang genug für alle Templates; overflow ist hidden */
border: 0;
transform-origin: top left;
transform: scale(0.63);
pointer-events: none;
background: transparent;
}
/* Transparentes Overlay verhindert Klicks/Selects und deutet mit leichtem
Verlauf am unteren Rand an dass die Vorschau länger ist als sichtbar. */
.gallery-card-preview-overlay {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to bottom, transparent 70%, rgba(5,6,10,.55) 100%);
}
.gallery-card-body {
padding: 20px 22px 22px;
display: flex;
flex-direction: column;
flex: 1;
}
.gallery-card-hint {
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 6px;
}
.gallery-card-title {
font-family: var(--f-display);
font-style: italic;
font-weight: 500;
font-size: 1.5rem;
color: var(--gold-pale);
margin: 0 0 8px;
}
.gallery-card-desc {
color: var(--text-soft);
font-size: 13.5px;
line-height: 1.55;
margin: 0 0 18px;
flex: 1;
}
/* ═══ CARD-GRID + STAT-ROW EDITOR ═══════════════════════════════════ */
.cards-editor, .stats-editor {
display: flex;
flex-direction: column;
gap: 12px;
}
.card-editor-row {
background: rgba(5,6,10,.4);
border: 1px solid var(--line-cool);
overflow: hidden;
}
.card-editor-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 14px;
background: rgba(201,169,97,.04);
border-bottom: 1px solid var(--line-cool);
}
.card-editor-num {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--gold);
}
.card-editor-body {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.stat-editor-row {
display: flex;
gap: 10px;
align-items: flex-end;
padding: 10px 12px;
background: rgba(5,6,10,.4);
border: 1px solid var(--line-cool);
}
.image-field {
display: flex;
gap: 6px;
}
.image-field .input { flex: 1; }
.cards-toolbar, .stats-toolbar {
display: flex;
align-items: center;
}
/* ══════════════════════════════════════════════════════════════════
TEMPLATE-STUDIO (WYSIWYG-Editor)
══════════════════════════════════════════════════════════════════ */
.studio {
display: grid;
grid-template-columns: 260px 1fr 340px;
gap: 14px;
height: calc(100vh - 160px);
min-height: 640px;
margin-top: 8px;
}
@media (max-width: 1200px) {
.studio { grid-template-columns: 220px 1fr 300px; gap: 10px; }
}
/* ─── Linke Schiene ───────────────────────────────────────────────── */
.studio-left {
background: var(--bg-card, #0f1219);
border: 1px solid var(--line-cool, #2a2620);
padding: 16px;
overflow-y: auto;
border-radius: 2px;
}
.studio-meta { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line-cool); }
.studio-meta .field { margin: 0; }
.studio-section-title {
font-family: 'JetBrains Mono', Menlo, Consolas, monospace;
font-size: 10.5px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--gold, #c9a961);
margin: 18px 0 8px;
font-weight: 600;
}
.studio-hint {
font-size: 11.5px;
color: var(--muted, #7a7465);
margin: 0 0 12px;
line-height: 1.5;
}
.studio-palette {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.studio-palette-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 12px 6px;
background: rgba(5,6,10,.4);
border: 1px solid var(--line-cool, #2a2620);
color: var(--text, #e8e2d0);
cursor: pointer;
transition: all .12s;
gap: 4px;
min-height: 64px;
}
.studio-palette-item:hover {
background: rgba(201,169,97,.08);
border-color: var(--gold, #c9a961);
color: var(--gold-pale, #f4e3b8);
}
.studio-palette-icon {
font-size: 16px;
color: var(--gold, #c9a961);
line-height: 1;
}
.studio-palette-label {
font-size: 10.5px;
text-align: center;
line-height: 1.2;
}
.studio-color-palettes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.studio-swatch {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: rgba(5,6,10,.4);
border: 1px solid var(--line-cool);
cursor: pointer;
transition: all .12s;
color: var(--text);
font-size: 11px;
text-align: left;
}
.studio-swatch:hover { border-color: var(--gold); }
.studio-swatch-preview {
width: 28px; height: 22px;
border-radius: 2px;
display: flex;
gap: 2px;
padding: 3px;
flex-shrink: 0;
}
.studio-swatch-preview i {
display: block;
width: 8px; height: 100%;
border-radius: 1px;
}
.studio-swatch-name { flex: 1; }
.studio-placeholders {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.studio-placeholder-chip {
background: rgba(201,169,97,.08);
border: 1px solid rgba(201,169,97,.35);
color: var(--gold-pale);
padding: 4px 8px;
font-family: 'JetBrains Mono', Menlo, monospace;
font-size: 10.5px;
cursor: pointer;
transition: all .12s;
}
.studio-placeholder-chip:hover { background: rgba(201,169,97,.2); }
.studio-placeholder-chip.is-copied { background: #6a9c72; color: #0a0c12; }
/* ─── Mitte / Stage ───────────────────────────────────────────────── */
.studio-center {
display: flex;
flex-direction: column;
background: var(--bg-card, #0f1219);
border: 1px solid var(--line-cool);
overflow: hidden;
min-width: 0;
}
.studio-stage-head {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid var(--line-cool);
background: rgba(5,6,10,.5);
flex-wrap: wrap;
}
.studio-device-switch, .studio-zoom-switch, .studio-mode-switch {
display: inline-flex;
border: 1px solid var(--line-cool);
border-radius: 2px;
overflow: hidden;
}
.studio-device-btn, .studio-zoom-btn, .studio-mode-btn {
background: transparent;
color: var(--text);
border: 0;
padding: 5px 10px;
font-size: 11.5px;
cursor: pointer;
font-family: 'JetBrains Mono', Menlo, monospace;
letter-spacing: .05em;
}
.studio-device-btn.is-active, .studio-zoom-btn.is-active, .studio-mode-btn.is-active {
background: var(--gold, #c9a961);
color: #0a0c12;
}
.studio-stage-hint {
margin-left: auto;
color: var(--muted);
font-size: 11px;
font-style: italic;
}
.studio-stage {
flex: 1;
overflow: auto;
background:
linear-gradient(135deg, rgba(201,169,97,.03) 0%, transparent 50%),
#05060a;
display: flex;
justify-content: center;
padding: 24px 16px;
position: relative;
}
.studio-stage-frame-wrap {
position: relative;
width: 640px;
max-width: 100%;
transition: width .2s;
}
.studio-stage[data-device="mobile"] .studio-stage-frame-wrap {
width: 390px;
}
.studio-preview-iframe {
width: 100%;
min-height: 800px;
border: 0;
background: #0a0c12;
display: block;
box-shadow: 0 4px 24px rgba(0,0,0,.6);
transition: transform .2s;
}
/* ─── Floating Text-Toolbar: siehe ganz am Ende, Notion-Stil ───────── */
/* ─── Block-Toolbar (Move/Dup/Del) ────────────────────────────────── */
.studio-block-toolbar {
position: absolute;
display: flex;
gap: 2px;
padding: 3px;
background: #141823;
border: 1px solid var(--gold, #c9a961);
border-radius: 4px;
z-index: 100;
box-shadow: 0 2px 12px rgba(0,0,0,.5);
font-family: 'JetBrains Mono', monospace;
}
.studio-block-toolbar button {
background: transparent;
border: 0;
color: var(--text);
padding: 4px 8px;
cursor: pointer;
border-radius: 3px;
font-family: inherit;
font-size: 13px;
line-height: 1;
}
.studio-block-toolbar button:hover { background: rgba(201,169,97,.15); color: var(--gold-pale); }
.studio-block-toolbar button.is-danger:hover { background: rgba(200,60,60,.2); color: #e88888; }
/* ─── Insert-Button (Plus zwischen Blöcken) ───────────────────────── */
.studio-insert-btn {
position: absolute;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--gold, #c9a961);
color: #0a0c12;
border: 2px solid #0f1219;
font-family: Inter, sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 1;
cursor: pointer;
z-index: 50;
box-shadow: 0 2px 8px rgba(0,0,0,.5);
transition: all .15s;
padding: 0;
}
.studio-insert-btn:hover {
background: #e6cf8a;
transform: scale(1.15);
}
/* ─── Block-Picker-Popup ──────────────────────────────────────────── */
.studio-picker-popup {
position: absolute;
background: #141823;
border: 1px solid var(--gold, #c9a961);
border-radius: 4px;
z-index: 200;
box-shadow: 0 8px 32px rgba(0,0,0,.7);
padding: 14px;
width: 320px;
max-height: 360px;
overflow-y: auto;
}
.studio-picker-title {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--gold, #c9a961);
margin-bottom: 10px;
font-weight: 600;
}
.studio-picker-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 4px;
}
.studio-picker-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px 4px;
background: rgba(5,6,10,.4);
border: 1px solid var(--line-cool);
color: var(--text);
cursor: pointer;
transition: all .12s;
gap: 4px;
min-height: 60px;
}
.studio-picker-item:hover {
background: rgba(201,169,97,.1);
border-color: var(--gold, #c9a961);
}
.studio-picker-icon { font-size: 15px; color: var(--gold); }
.studio-picker-label { font-size: 9.5px; text-align: center; line-height: 1.2; }
/* ─── Rechte Schiene / Inspector ──────────────────────────────────── */
.studio-right {
background: var(--bg-card, #0f1219);
border: 1px solid var(--line-cool);
overflow-y: auto;
border-radius: 2px;
}
.studio-inspector {
padding: 16px;
}
.studio-inspector-empty {
text-align: center;
padding: 40px 16px;
color: var(--muted);
}
.studio-inspector-empty-icon {
font-size: 40px;
color: var(--gold, #c9a961);
margin-bottom: 12px;
opacity: .4;
}
.studio-inspector-empty h3 {
font-family: var(--f-display, 'Cormorant Garamond', serif);
font-style: italic;
font-weight: 500;
color: var(--gold-pale);
font-size: 1.2rem;
margin: 0 0 8px;
}
.studio-inspector-empty p { font-size: 13px; line-height: 1.5; margin: 0 0 8px; }
.studio-inspector-head {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: rgba(201,169,97,.08);
border: 1px solid rgba(201,169,97,.3);
margin-bottom: 14px;
font-family: 'JetBrains Mono', monospace;
font-size: 11.5px;
}
.studio-inspector-icon {
font-size: 16px;
color: var(--gold);
}
.studio-inspector-label {
flex: 1;
color: var(--gold-pale);
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
}
.studio-inspector-close {
cursor: pointer;
color: var(--muted);
padding: 2px 6px;
font-size: 16px;
line-height: 1;
}
.studio-inspector-close:hover { color: #e88888; }
.studio-inspector-body .ins-field {
margin-bottom: 12px;
}
.ins-field-label {
display: block;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 4px;
font-weight: 500;
}
.ins-field-label .hint { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 10px; color: #6a6555; }
.ins-field input.input, .ins-field select.select, .ins-field textarea.textarea {
width: 100%;
padding: 6px 8px;
font-size: 13px;
background: rgba(5,6,10,.5);
border: 1px solid var(--line-cool);
color: var(--text);
}
.ins-field input.input:focus, .ins-field select.select:focus, .ins-field textarea.textarea:focus {
outline: 0;
border-color: var(--gold, #c9a961);
}
.ins-field-row {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.ins-field-row > .ins-field { flex: 1; margin-bottom: 0; }
.ins-color-wrap {
display: flex;
gap: 4px;
align-items: stretch;
}
.ins-color-wrap input[type="color"] {
width: 36px; height: 32px;
padding: 2px;
cursor: pointer;
border: 1px solid var(--line-cool);
background: transparent;
}
.ins-color-wrap input[type="text"] {
padding: 4px 6px;
background: rgba(5,6,10,.5);
border: 1px solid var(--line-cool);
color: var(--text);
}
.ins-btn-clear {
background: transparent;
border: 1px solid var(--line-cool);
color: var(--muted);
padding: 0 8px;
cursor: pointer;
font-size: 12px;
}
.ins-btn-clear:hover { color: #e88888; border-color: #e88888; }
.ins-details {
margin: 10px 0;
border: 1px solid var(--line-cool);
padding: 8px 10px;
}
.ins-details > summary {
cursor: pointer;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--gold);
font-weight: 500;
}
.ins-details-body { padding-top: 10px; }
.ins-card {
margin-bottom: 6px;
border: 1px solid var(--line-cool);
background: rgba(5,6,10,.3);
}
.ins-card > summary {
cursor: pointer;
padding: 8px 10px;
display: flex;
align-items: center;
justify-content: space-between;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--gold-pale);
letter-spacing: .1em;
text-transform: uppercase;
}
.ins-card > summary::-webkit-details-marker { display: none; }
.ins-card-remove {
background: transparent;
border: 0;
color: var(--muted);
cursor: pointer;
padding: 2px 6px;
font-size: 14px;
}
.ins-card-remove:hover { color: #e88888; }
.ins-card-body {
padding: 10px;
border-top: 1px solid var(--line-cool);
}
.ins-stat-row {
display: flex;
gap: 6px;
align-items: flex-end;
margin-bottom: 8px;
padding: 8px;
background: rgba(5,6,10,.3);
border: 1px solid var(--line-cool);
}
.ins-stat-row .ins-field { flex: 1; margin-bottom: 0; }
.ins-thumb {
margin: 0 0 10px;
padding: 6px;
background: rgba(5,6,10,.5);
border: 1px solid var(--line-cool);
max-height: 160px;
overflow: hidden;
text-align: center;
}
.ins-thumb img { max-width: 100%; max-height: 140px; height: auto; display: inline-block; }
.ins-html-preview {
padding: 10px;
background: rgba(5,6,10,.7);
border: 1px solid var(--line-cool);
color: #b4a484;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
line-height: 1.4;
max-height: 120px;
overflow: hidden;
white-space: pre-wrap;
word-break: break-word;
}
/* ─── Save-Indicator ──────────────────────────────────────────────── */
.studio-save-indicator {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted);
padding: 4px 10px;
}
.studio-save-indicator.is-dirty {
color: #e0b060;
}
.studio-toolbar-divider {
display: inline-block;
width: 1px;
height: 18px;
background: var(--line-cool);
vertical-align: middle;
margin: 0 4px;
}
/* ─── Bild-Picker-Modal ───────────────────────────────────────────── */
.studio-image-modal {
width: 92%;
max-width: 920px;
max-height: 88vh;
display: flex;
flex-direction: column;
}
.studio-image-tabs {
display: flex;
gap: 2px;
margin-bottom: 12px;
border-bottom: 1px solid var(--line-cool);
}
.studio-image-tab {
background: transparent;
border: 0;
color: var(--muted);
padding: 8px 16px;
cursor: pointer;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.studio-image-tab:hover { color: var(--gold-pale); }
.studio-image-tab.is-active {
color: var(--gold, #c9a961);
border-bottom-color: var(--gold);
}
.studio-image-search { margin-bottom: 12px; }
.studio-image-grid {
flex: 1;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
overflow-y: auto;
padding: 4px;
min-height: 200px;
max-height: 520px;
}
.studio-image-loading {
grid-column: 1 / -1;
text-align: center;
color: var(--muted);
padding: 40px 16px;
font-size: 13px;
}
.studio-image-item {
cursor: pointer;
border: 1px solid var(--line-cool);
background: rgba(5,6,10,.5);
transition: all .12s;
overflow: hidden;
}
.studio-image-item:hover {
border-color: var(--gold, #c9a961);
transform: translateY(-2px);
}
.studio-image-thumb {
background: #050709;
aspect-ratio: 4/3;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.studio-image-thumb img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.studio-image-caption {
padding: 6px 8px;
font-size: 10.5px;
font-family: 'JetBrains Mono', monospace;
color: var(--muted);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
letter-spacing: .05em;
}
.studio-image-foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--line-cool);
gap: 10px;
flex-wrap: wrap;
}
.studio-image-actions { display: flex; gap: 6px; }
/* ─── HTML-Modal ──────────────────────────────────────────────────── */
.studio-html-modal {
width: 92%;
max-width: 860px;
}
.studio-html-editor {
width: 100%;
font-family: 'JetBrains Mono', Menlo, Consolas, monospace !important;
font-size: 12.5px;
line-height: 1.55;
padding: 12px;
background: #05070b !important;
color: #d8c89a;
border: 1px solid var(--line-cool);
min-height: 380px;
resize: vertical;
white-space: pre;
overflow-wrap: normal;
overflow-x: auto;
}
/* ═══ Studio-Erweiterungen: Drag, Globals-Modal, Toolbar-Selects ══════ */
/* Palette-Items: draggable */
.studio-palette-item { cursor: grab; }
.studio-palette-item:active { cursor: grabbing; }
.studio-palette-item.is-dragging {
opacity: .4;
border-color: var(--gold) !important;
}
/* Text-Toolbar-Styles: siehe weiter unten unter "Notion-Stil Floating Toolbar" */
/* Globals-Modal */
.studio-globals-modal {
width: 94%;
max-width: 860px;
}
.studio-globals-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
@media (max-width: 800px) {
.studio-globals-grid { grid-template-columns: 1fr; }
}
.studio-globals-col {
background: rgba(5,6,10,.3);
border: 1px solid var(--line-cool);
padding: 14px;
}
.studio-globals-sub {
margin: 0 0 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--gold, #c9a961);
font-weight: 600;
}
.studio-globals-col .ins-field-label {
margin-top: 6px;
}
.studio-globals-col select.select {
width: 100%;
padding: 6px 8px;
font-size: 12.5px;
background: rgba(5,6,10,.5);
border: 1px solid var(--line-cool);
color: var(--text, #e8e2d0);
font-family: inherit;
}
.studio-globals-presets {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.studio-globals-presets .btn {
flex: 1 1 45%;
font-size: 10.5px;
padding: 6px 8px;
letter-spacing: .05em;
}
/* Drop-Indicator Stärke in Editor-Iframe (Parent-CSS, damit Linie auch außerhalb sichtbar ist) */
.studio-stage.is-dragging { cursor: grabbing; }
/* ════════════════════════════════════════════════════════════════════
NOTION-STIL FLOATING TOOLBAR
Eine Pille, die beim Klicken in editierbaren Text erscheint.
════════════════════════════════════════════════════════════════════ */
.sr-tb {
position: absolute;
display: flex;
align-items: center;
gap: 2px;
padding: 4px;
background: #1a1d27;
border: 1px solid rgba(201,169,97,.3);
border-radius: 7px;
z-index: 200;
box-shadow: 0 6px 24px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
font-family: Inter, Helvetica, Arial, sans-serif;
font-size: 13px;
color: #e8e2d0;
white-space: nowrap;
max-width: calc(100vw - 40px);
user-select: none;
/* kleine Pfeilspitze nach unten Richtung Cursor */
}
/* Browser-hidden-Attribut respektieren. Ohne diese Regel überschreibt
`display:flex` oben das Default `[hidden] { display:none }` des
Browsers — dann bleibt die Toolbar sichtbar auch wenn JS sie per
$textTb.hidden = true ausblendet. Symptom: Toolbar klebt am letzten
Textblock und verschwindet nie. Gleiche Logik für die Block-Toolbar. */
.sr-tb[hidden],
.studio-block-toolbar[hidden] {
display: none !important;
}
.sr-tb::after {
content: "";
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 8px; height: 8px;
background: #1a1d27;
border-right: 1px solid rgba(201,169,97,.3);
border-bottom: 1px solid rgba(201,169,97,.3);
}
/* Wenn Toolbar unterhalb der Selektion positioniert ist: Pfeil nach oben */
.sr-tb.sr-tb-below::after {
bottom: auto;
top: -5px;
border-right: 0;
border-bottom: 0;
border-left: 1px solid rgba(201,169,97,.3);
border-top: 1px solid rgba(201,169,97,.3);
}
/* Buttons */
.sr-tb-btn {
background: transparent;
border: 0;
color: #d6d0bf;
cursor: pointer;
border-radius: 4px;
padding: 0;
line-height: 1;
transition: background .1s, color .1s;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 3px;
font-family: inherit;
font-size: inherit;
}
.sr-tb-btn:hover { background: rgba(201,169,97,.15); color: #f4e3b8; }
.sr-tb-btn.is-active { background: rgba(201,169,97,.25); color: #f4e3b8; }
.sr-tb-square { width: 30px; height: 30px; }
.sr-tb-square .sr-tb-ico { font-size: 14px; color: inherit; }
.sr-tb-btn-dropdown {
padding: 0 8px;
height: 30px;
min-width: 50px;
}
.sr-tb-size-btn { min-width: 44px; padding: 0 6px; }
.sr-tb-label {
font-size: 12.5px;
color: inherit;
overflow: hidden;
text-overflow: ellipsis;
max-width: 110px;
}
.sr-tb-caret {
font-size: 9px;
color: #8a8578;
margin-left: 2px;
}
.sr-tb-sep {
width: 1px;
height: 18px;
background: rgba(201,169,97,.2);
margin: 0 3px;
}
/* Farb-Swatches in der Toolbar */
.sr-tb-color-btn {
width: 32px; height: 30px;
}
.sr-tb-color-swatch {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 20px; height: 22px;
border-radius: 3px;
transition: background .12s;
}
.sr-tb-color-letter {
font-family: Georgia, serif;
font-weight: 700;
font-size: 14px;
line-height: 1;
color: #f4e3b8;
}
.sr-tb-color-letter-bg {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
color: #0a0c12;
}
#sr-tb-color-bg-swatch { background: #c9a961; }
.sr-tb-color-bar {
position: absolute;
bottom: 0; left: 2px; right: 2px;
height: 3px;
background: #c9a961;
border-radius: 1px;
}
/* ─── Toolbar-Popups ─────────────────────────────────────────────── */
.sr-tb-popup {
position: absolute;
background: #1a1d27;
border: 1px solid rgba(201,169,97,.3);
border-radius: 6px;
z-index: 210;
box-shadow: 0 8px 28px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.4);
color: #e8e2d0;
font-family: Inter, Helvetica, Arial, sans-serif;
font-size: 13px;
width: 240px;
max-height: 320px;
overflow-y: auto;
padding: 8px;
}
.sr-tb-popup-narrow { width: 160px; }
.sr-tb-popup-color { width: 220px; }
.sr-tb-popup-title {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
color: #8a7f6a;
padding: 4px 6px 8px;
font-weight: 600;
}
.sr-tb-popup-list {
display: flex;
flex-direction: column;
gap: 1px;
}
.sr-tb-popup-list button {
background: transparent;
border: 0;
color: #d6d0bf;
padding: 8px 10px;
cursor: pointer;
border-radius: 4px;
text-align: left;
font-size: 14px;
line-height: 1.2;
transition: background .08s;
}
.sr-tb-popup-list button:hover { background: rgba(201,169,97,.15); color: #f4e3b8; }
.sr-tb-size-list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2px;
}
.sr-tb-size-list button {
font-family: 'JetBrains Mono', monospace;
text-align: center;
font-size: 12px;
padding: 6px 4px;
}
/* ─── Email-Client-Preview: Chrome um den iframe ─────────────────────
* Die Mail selbst wird gleich gerendert (Read-Mode). Diese Chromes
* legen sich nur als Umrahmung drumherum, um zu approximieren wie die
* Mail beim Empfänger im jeweiligen Client aussieht. Keine perfekte
* Simulation — das wäre eine Halbwahrheit. */
.studio-client-chrome-head {
width: 100%;
max-width: 600px;
margin: 0 auto;
box-sizing: border-box;
}
.studio-stage[data-preview-mode="ios"] .studio-client-chrome-head {
/* Chrome-Breite folgt dem Wrap (also Desktop/Tablet/Mobile-Breite) —
nicht mehr hartes 375px. Sonst wirkt der iOS-Header auf Desktop
winzig und mittig, während der iframe 640px breit ist. */
width: 100%;
max-width: none;
}
.studio-client-chrome-warn {
max-width: 600px;
margin: 8px auto 12px;
padding: 8px 14px;
background: rgba(220,140,80,.08);
border: 1px solid rgba(220,140,80,.3);
border-radius: 4px;
font-size: 12px;
line-height: 1.4;
color: #f4b87e;
font-family: Inter, Helvetica, Arial, sans-serif;
}
.studio-client-chrome-warn summary {
cursor: pointer;
font-weight: 500;
user-select: none;
}
.studio-client-chrome-warn summary::-webkit-details-marker { display: none; }
.studio-client-chrome-warn details[open] summary { margin-bottom: 4px; }
.studio-client-chrome-warn code {
font-family: 'JetBrains Mono', Menlo, Consolas, monospace;
font-size: 11.5px;
background: rgba(220,140,80,.15);
padding: 1px 5px;
border-radius: 2px;
margin: 0 1px;
}
/* ── Gmail-Chrome (weißer Header) ── */
.studio-chrome-gmail {
background: #ffffff;
color: #202124;
font-family: 'Google Sans', Roboto, Arial, sans-serif;
border-radius: 8px 8px 0 0;
border: 1px solid #dadce0;
border-bottom: 0;
padding: 12px 20px 16px;
}
.gmail-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 8px;
color: #5f6368;
font-size: 16px;
}
.gmail-back { cursor: pointer; font-size: 18px; }
.gmail-actions { display: flex; gap: 12px; }
.gmail-ico { color: #5f6368; cursor: pointer; font-size: 14px; }
.gmail-subject {
font-size: 20px;
color: #202124;
padding: 8px 0 12px;
line-height: 1.3;
}
.gmail-sender {
display: flex;
gap: 12px;
align-items: flex-start;
padding-top: 8px;
border-top: 1px solid #f1f3f4;
}
.gmail-avatar {
width: 36px; height: 36px;
background: #c9a961;
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 15px;
flex-shrink: 0;
}
.gmail-sender-meta { font-size: 13px; color: #202124; }
.gmail-from { font-weight: 500; }
.gmail-email { color: #5f6368; font-weight: 400; }
.gmail-to { color: #5f6368; font-size: 12px; margin-top: 2px; }
/* ── Outlook-Chrome (blauer Header) ── */
.studio-chrome-outlook {
background: #faf9f8;
color: #201f1e;
font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
border-radius: 4px 4px 0 0;
border: 1px solid #c8c6c4;
border-bottom: 0;
padding: 0;
}
.outlook-ribbon {
background: #0078d4;
color: #ffffff;
padding: 6px 16px;
font-size: 11px;
font-weight: 600;
letter-spacing: .02em;
}
.outlook-subject-row { padding: 14px 20px 6px; }
.outlook-subject {
font-size: 18px;
font-weight: 600;
color: #201f1e;
line-height: 1.3;
}
.outlook-sender-row {
padding: 10px 20px 14px;
display: flex;
gap: 12px;
align-items: flex-start;
}
.outlook-avatar {
width: 36px; height: 36px;
background: #0078d4;
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 12px;
letter-spacing: .05em;
flex-shrink: 0;
}
.outlook-sender-meta { font-size: 13px; color: #201f1e; }
.outlook-from strong { font-weight: 600; }
.outlook-to { color: #605e5c; font-size: 12px; margin-top: 3px; }
/* ── iOS Mail Chrome (mobil, wie iPhone Mail.app) ── */
.studio-chrome-ios {
background: #f2f2f7;
color: #1c1c1e;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
border-radius: 18px 18px 0 0;
border: 1px solid #d1d1d6;
border-bottom: 0;
padding: 0;
width: 100%;
}
.ios-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 16px 6px;
color: #007aff;
font-size: 15px;
border-bottom: 1px solid rgba(60,60,67,.12);
}
.ios-back { font-weight: 400; }
.ios-nav-actions { font-size: 17px; letter-spacing: .25em; color: #007aff; }
.ios-subject {
padding: 12px 16px 4px;
font-size: 17px;
font-weight: 700;
line-height: 1.3;
color: #000;
}
.ios-sender {
padding: 6px 16px 12px;
display: flex;
gap: 10px;
align-items: center;
border-bottom: 1px solid rgba(60,60,67,.12);
}
.ios-avatar {
width: 34px; height: 34px;
background: #c9a961;
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 15px;
flex-shrink: 0;
}
.ios-sender-meta { flex: 1; font-size: 13.5px; }
.ios-from { color: #000; }
.ios-to { color: rgba(60,60,67,.6); font-size: 12px; margin-top: 1px; }
.ios-star { color: rgba(60,60,67,.4); font-size: 18px; }
/* ─── Link-Manager-Modal ────────────────────────────────────────────
* Alle Links der Mail auf einen Blick. Strukturierte Felder werden inline
* editiert; Markdown-/HTML-Links bekommen ein Badge das den Typ zeigt. */
.studio-linkmgr-modal {
max-width: 760px;
max-height: 80vh;
display: flex;
flex-direction: column;
}
.linkmgr-body {
flex: 1;
overflow-y: auto;
padding: 4px 0 12px;
}
.linkmgr-empty {
padding: 36px 20px;
text-align: center;
color: var(--muted);
font-size: 13.5px;
line-height: 1.6;
}
.linkmgr-empty code {
font-family: 'JetBrains Mono', Menlo, monospace;
background: rgba(201,169,97,.1);
padding: 2px 6px;
border-radius: 3px;
color: #c9a961;
}
.linkmgr-count {
font-family: 'JetBrains Mono', Menlo, monospace;
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
color: #8a7f6a;
padding: 0 0 12px;
font-weight: 600;
}
.linkmgr-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.linkmgr-row {
background: rgba(5,6,10,.4);
border: 1px solid rgba(201,169,97,.15);
border-radius: 5px;
padding: 12px 14px;
transition: border-color .15s;
}
.linkmgr-row:hover { border-color: rgba(201,169,97,.35); }
.linkmgr-row.is-empty {
border-color: rgba(220,140,80,.35);
background: rgba(220,140,80,.05);
}
.linkmgr-row-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.linkmgr-icon {
font-family: 'JetBrains Mono', Menlo, monospace;
font-size: 14px;
color: #c9a961;
min-width: 18px;
}
.linkmgr-block-label {
font-family: 'JetBrains Mono', Menlo, monospace;
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: #c9a961;
font-weight: 600;
}
.linkmgr-context {
flex: 1;
color: var(--text);
font-size: 13px;
line-height: 1.3;
}
.linkmgr-kind {
font-family: 'JetBrains Mono', Menlo, monospace;
font-size: 9px;
letter-spacing: .1em;
padding: 2px 5px;
border-radius: 2px;
font-weight: 700;
}
.linkmgr-kind-md { background: rgba(90,160,200,.15); color: #7ec9e0; border: 1px solid rgba(90,160,200,.3); }
.linkmgr-kind-html { background: rgba(220,140,80,.15); color: #f4b87e; border: 1px solid rgba(220,140,80,.3); }
.linkmgr-goto {
font-size: 11px;
padding: 3px 9px !important;
}
.linkmgr-url {
width: 100%;
font-family: 'JetBrains Mono', Menlo, monospace;
font-size: 12.5px;
}
.modal-head {
margin-bottom: 12px;
}
.modal-title {
margin: 0 0 4px;
font-family: var(--f-display);
font-style: italic;
font-weight: 500;
font-size: 1.3rem;
color: var(--gold-pale);
}
.modal-sub {
margin: 0;
font-size: 12.5px;
color: var(--muted);
line-height: 1.5;
}
.modal-foot {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(201,169,97,.15);
}
/* ─── Brand-Kit-Seite ────────────────────────────────────────────────
* Theme-Presets als Grid (Swatches + Name + Apply-Button) und Color-Input-
* Felder, die sich aus Browser-Picker und Hex-Textfeld gegenseitig befüllen. */
.brand-themes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
padding: 4px 0;
}
.brand-theme-card {
background: rgba(5,6,10,.35);
border: 1px solid rgba(201,169,97,.2);
border-radius: 6px;
padding: 14px;
transition: border-color .15s, background .15s;
}
.brand-theme-card:hover {
border-color: rgba(201,169,97,.5);
background: rgba(201,169,97,.04);
}
.brand-theme-swatches {
display: flex;
gap: 0;
height: 36px;
border-radius: 3px;
overflow: hidden;
margin-bottom: 10px;
border: 1px solid rgba(201,169,97,.18);
}
.brand-theme-swatch {
flex: 1;
height: 100%;
}
.brand-theme-name {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: 17px;
color: var(--text);
margin-bottom: 4px;
}
.brand-theme-desc {
font-size: 12px;
color: var(--muted);
line-height: 1.45;
min-height: 34px;
}
.brand-color-wrap {
display: flex;
gap: 8px;
align-items: center;
}
.brand-color-wrap input[type="color"] {
width: 48px;
height: 38px;
padding: 0;
border: 1px solid rgba(201,169,97,.3);
background: transparent;
cursor: pointer;
border-radius: 3px;
}
.brand-color-wrap .input {
flex: 1;
min-width: 0;
}
.brand-logo-preview {
padding: 4px 0 8px;
}
* Breiter als normale Popups, gruppiert, mit Beispiel-Werten. Der Button
* in der Toolbar selbst ist ein schmaler Monospace-Button mit „{ }"-Icon. */
.sr-tb-placeholder-btn { gap: 4px; }
.sr-tb-placeholder-btn .sr-tb-ico {
font-size: 13px;
line-height: 1;
color: #c9a961;
}
.sr-tb-popup-placeholder {
width: 340px;
max-height: 460px;
}
.sr-tb-popup-intro {
padding: 2px 6px 10px;
color: #8a7f6a;
font-size: 11.5px;
line-height: 1.45;
border-bottom: 1px solid rgba(201,169,97,.12);
margin-bottom: 6px;
}
.sr-tb-ph-group-head {
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
letter-spacing: .22em;
text-transform: uppercase;
color: #c9a961;
padding: 10px 6px 4px;
font-weight: 600;
opacity: .8;
}
.sr-tb-ph-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.sr-tb-ph-item {
display: block;
width: 100%;
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
padding: 9px 10px;
cursor: pointer;
text-align: left;
transition: background .1s, border-color .1s;
}
.sr-tb-ph-item:hover {
background: rgba(201,169,97,.1);
border-color: rgba(201,169,97,.32);
}
.sr-tb-ph-item.is-recommended {
background: rgba(201,169,97,.04);
border-color: rgba(201,169,97,.18);
}
.sr-tb-ph-main {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.sr-tb-ph-token {
display: inline-block;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: #c9a961;
background: rgba(201,169,97,.08);
padding: 2px 6px;
border-radius: 3px;
align-self: flex-start;
font-weight: 500;
}
.sr-tb-ph-badge {
display: inline-block;
font-family: 'JetBrains Mono', monospace;
font-size: 8.5px;
letter-spacing: .16em;
text-transform: uppercase;
color: #7ec98d;
background: rgba(90,160,110,.15);
border: 1px solid rgba(90,160,110,.3);
padding: 2px 6px;
border-radius: 3px;
align-self: flex-start;
font-weight: 600;
margin-top: 3px;
}
.sr-tb-ph-label {
font-size: 13px;
color: #e8e2d0;
margin-top: 4px;
line-height: 1.3;
}
.sr-tb-ph-example {
font-size: 11.5px;
color: #8a7f6a;
font-style: italic;
margin-top: 2px;
line-height: 1.35;
}
.sr-tb-popup-custom {
width: 100%;
background: rgba(5,6,10,.6);
border: 1px solid rgba(201,169,97,.3);
color: #e8e2d0;
padding: 6px 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
border-radius: 3px;
margin-bottom: 6px;
}
.sr-tb-color-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 3px;
margin-bottom: 10px;
}
.sr-tb-color-grid button {
width: 100%;
aspect-ratio: 1/1;
border: 1px solid rgba(201,169,97,.2);
border-radius: 3px;
cursor: pointer;
padding: 0;
transition: transform .1s, border-color .1s;
}
.sr-tb-color-grid button:hover {
transform: scale(1.15);
border-color: #c9a961;
}
.sr-tb-popup-custom-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 4px;
border-top: 1px solid rgba(201,169,97,.15);
margin-top: 4px;
}
.sr-tb-popup-custom-row input[type="color"] {
width: 32px; height: 28px;
border: 1px solid rgba(201,169,97,.3);
border-radius: 3px;
cursor: pointer;
padding: 0;
background: transparent;
}
.sr-tb-popup-custom-row span { font-size: 12px; color: #9a9380; }
.sr-tb-popup-clear {
width: 100%;
background: transparent;
border: 1px solid rgba(201,169,97,.2);
color: #9a9380;
padding: 6px;
cursor: pointer;
border-radius: 3px;
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
margin-top: 6px;
}
.sr-tb-popup-clear:hover { color: #e88888; border-color: #8a4040; }
/* ════════════════════════════════════════════════════════════════════
PREVIEW-SKALIERUNG für Thumbnails
Rendert Newsletter in voller 600px-Breite, skaliert sichtbar runter.
════════════════════════════════════════════════════════════════════ */
.sr-scaled-preview {
/* Wrapper, z.B. mit width:240px height:320px */
position: relative;
overflow: hidden;
background: #05060a;
border: 1px solid var(--line-cool, #2a2620);
}
.sr-scaled-preview iframe,
.sr-scaled-preview .sr-scaled-inner {
/* Native Breite des Newsletters. */
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 800px;
border: 0;
/* Skalierung + Ursprung werden inline gesetzt je nach Container-Größe */
transform-origin: top left;
pointer-events: none;
}
/* Kleiner Hover-Indikator: Kachel leicht heller wenn verlinkt */
a.sr-scaled-preview:hover, .sr-scaled-preview-link:hover .sr-scaled-preview { border-color: var(--gold, #c9a961); }
/* ─── Inspector: Toggle-Buttons (Modus-Wahl) ────────────────────── */
.ins-toggle {
display: flex;
gap: 0;
border: 1px solid var(--line-cool);
border-radius: 3px;
overflow: hidden;
}
.ins-toggle button {
flex: 1;
background: transparent;
border: 0;
color: var(--muted, #7a7465);
padding: 7px 8px;
font-size: 11.5px;
cursor: pointer;
font-family: 'JetBrains Mono', monospace;
letter-spacing: .04em;
border-right: 1px solid var(--line-cool);
transition: all .1s;
}
.ins-toggle button:last-child { border-right: 0; }
.ins-toggle button:hover { background: rgba(201,169,97,.08); color: var(--gold-pale); }
.ins-toggle button.is-active {
background: var(--gold, #c9a961);
color: #0a0c12;
font-weight: 600;
}
/* ─── Inspector: Preset-Grid (Spalten-Verteilungen) ─────────────── */
.ins-preset-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.ins-preset-btn {
background: rgba(5,6,10,.4);
border: 1px solid var(--line-cool);
color: var(--text);
padding: 8px;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 6px;
align-items: stretch;
transition: all .1s;
font-family: inherit;
}
.ins-preset-btn:hover {
border-color: var(--gold, #c9a961);
background: rgba(201,169,97,.06);
}
.ins-preset-btn.is-active {
border-color: var(--gold, #c9a961);
background: rgba(201,169,97,.12);
}
.ins-preset-visual {
display: flex;
gap: 3px;
height: 20px;
}
.ins-preset-visual span {
background: rgba(201,169,97,.5);
border-radius: 1px;
}
.ins-preset-btn.is-active .ins-preset-visual span {
background: var(--gold, #c9a961);
}
.ins-preset-label {
font-size: 10.5px;
letter-spacing: .05em;
color: var(--muted, #7a7465);
text-align: center;
font-family: 'JetBrains Mono', monospace;
}
.ins-preset-btn.is-active .ins-preset-label { color: var(--gold-pale, #f4e3b8); }
/* ─── System-Mail-Cards (Übersicht + Formular-Einbettung) ────────── */
.sysmail-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px;
margin-top: 4px;
}
.sysmail-card {
background: linear-gradient(180deg, rgba(15,18,25,.8), rgba(10,12,18,.9));
border: 1px solid var(--line-cool);
padding: 18px 18px 14px;
transition: all var(--t-fast) var(--ease);
display: flex;
flex-direction: column;
gap: 10px;
}
.sysmail-card:hover {
border-color: var(--gold, #c9a961);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.sysmail-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.sysmail-card-label {
font-family: var(--f-display, Georgia), serif;
font-style: italic;
font-weight: 500;
font-size: 17px;
color: var(--gold-pale, #f4e3b8);
line-height: 1.25;
flex: 1;
}
.sysmail-card-desc {
font-size: 12.5px;
color: var(--muted, #8a8371);
line-height: 1.5;
margin: 0;
}
.sysmail-card-meta,
.sysmail-card-subject {
display: flex;
flex-direction: column;
gap: 3px;
}
.sysmail-card-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 6px;
padding-top: 10px;
border-top: 1px solid rgba(201,169,97,.12);
}
.pill-muted {
background: rgba(125,120,108,.15);
border-color: rgba(125,120,108,.3);
color: #8a8371;
}
/* Override-Variant: eine Formular-spezifische Vorlage. Leicht eingerückt
und visuell an die Basis-Karte darüber angebunden (linker Gold-Akzent),
damit die Hierarchie "gehört zur Basis-Mail drüber" sofort erkennbar ist. */
.sysmail-card--override {
border-left: 3px solid var(--gold, #c9a961);
margin-left: 20px;
background: linear-gradient(180deg, rgba(20,18,12,.65), rgba(14,12,8,.8));
position: relative;
}
.sysmail-card--override::before {
/* kleiner Connector zur Basis-Karte drüber */
content: "";
position: absolute;
left: -3px;
top: -20px;
width: 3px;
height: 20px;
background: linear-gradient(180deg, transparent, var(--gold, #c9a961));
opacity: .4;
}
.sysmail-card--override:hover {
border-color: var(--gold, #c9a961);
border-left-width: 3px;
}
/* ════════════════════════════════════════════════════════════════════
MOBILE DEVICE-FRAME: wenn Stage im Mobile-Modus ist, iPhone-Rahmen
um die iframe, damit man realistisch sieht wie's im Postfach aussieht.
════════════════════════════════════════════════════════════════════ */
.studio-stage[data-device="mobile"] .studio-stage-frame-wrap {
/* Phone-Frame: dunkel, abgerundet, Schatten */
background: #0a0b0f;
border: 2px solid #1a1c22;
border-radius: 40px;
padding: 54px 14px 32px; /* oben Notch-Platz, unten Home-Indicator */
max-width: 400px;
margin: 12px auto 20px;
box-shadow:
0 0 0 2px #0a0b0f,
0 0 0 5px #1f2128,
0 22px 44px rgba(0,0,0,.6),
inset 0 0 0 1px rgba(201,169,97,.08);
position: relative;
transition: all var(--t-med) var(--ease);
}
/* Notch oben */
.studio-stage[data-device="mobile"] .studio-stage-frame-wrap::before {
content: "";
position: absolute;
top: 16px;
left: 50%;
transform: translateX(-50%);
width: 110px;
height: 24px;
background: #000;
border-radius: 14px;
box-shadow: inset 0 0 0 1px #1a1c22;
z-index: 2;
}
/* Kleiner Speaker-Dot in der Notch */
.studio-stage[data-device="mobile"] .studio-stage-frame-wrap::after {
content: "";
position: absolute;
top: 23px;
left: 50%;
transform: translateX(-50%);
width: 44px;
height: 5px;
background: #141518;
border-radius: 3px;
z-index: 3;
}
/* Home-Indicator unten */
.studio-stage[data-device="mobile"] .studio-stage-frame-wrap > .studio-home-indicator {
display: block;
}
.studio-home-indicator {
display: none;
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 110px;
height: 4px;
background: #3a3d45;
border-radius: 3px;
}
/* iframe selbst: rundere Ecken für das Display-Gefühl */
.studio-stage[data-device="mobile"] .studio-preview-iframe {
border-radius: 8px;
width: 100% !important;
max-width: 370px;
border: 1px solid rgba(201,169,97,.08);
background: #0f1219;
}
/* ════════════════════════════════════════════════════════════════════
KAMPAGNEN-WIZARD
4-Step Progress-Bar + einzelne Panels + Navigation
════════════════════════════════════════════════════════════════════ */
.wizard-progress {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 16px 20px 24px;
margin: -12px -20px 24px;
background: rgba(5,6,10,.3);
border-bottom: 1px solid var(--line-cool);
}
.wizard-step {
background: transparent;
border: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
cursor: default;
font-family: inherit;
color: var(--muted, #7a7465);
opacity: .6;
transition: all .15s;
border-radius: 4px;
}
.wizard-step.is-clickable {
cursor: pointer;
opacity: 1;
}
.wizard-step.is-clickable:hover:not(.is-active) {
background: rgba(201,169,97,.06);
color: var(--gold-pale);
}
.wizard-step.is-active {
opacity: 1;
color: var(--gold-pale);
}
.wizard-step.is-done {
opacity: 1;
color: var(--text);
}
.wizard-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 1.5px solid currentColor;
border-radius: 50%;
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
font-weight: 600;
background: rgba(5,6,10,.6);
}
.wizard-step.is-active .wizard-step-num {
background: var(--gold, #c9a961);
color: #0a0c12;
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(201,169,97,.2);
}
.wizard-step.is-done .wizard-step-num {
background: rgba(201,169,97,.15);
color: var(--gold, #c9a961);
border-color: rgba(201,169,97,.6);
}
.wizard-step.is-done .wizard-step-num::before {
content: "✓";
font-size: 14px;
}
.wizard-step.is-done .wizard-step-num {
font-size: 0;
}
.wizard-step-label {
font-size: 13.5px;
letter-spacing: .02em;
}
.wizard-step-line {
width: 48px;
height: 1px;
background: rgba(201,169,97,.2);
margin: 0 2px;
}
.wizard-step-panel {
display: none;
animation: wizardFade .18s ease-out;
}
.wizard-step-panel.is-active { display: block; }
@keyframes wizardFade {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.wizard-step-title {
font-family: var(--f-display, Georgia), serif;
font-style: italic;
font-weight: 500;
font-size: 1.6rem;
color: var(--gold-pale, #f4e3b8);
margin: 0 0 6px;
}
.wizard-step-sub {
font-size: 14px;
color: var(--muted, #7a7465);
margin: 0 0 22px;
max-width: 640px;
line-height: 1.55;
}
.wizard-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--line-cool);
}
.wizard-nav > *:only-child { margin-left: auto; }
/* ─── Pre-Send-Check-Liste ──────────────────────────────────────── */
.preflight-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.preflight-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
border-radius: 4px;
background: rgba(5,6,10,.3);
border: 1px solid transparent;
}
.preflight-item.is-ok {
border-color: rgba(90,160,110,.25);
background: rgba(90,160,110,.06);
}
.preflight-item.is-fail-hard {
border-color: rgba(220,95,95,.45);
background: rgba(220,95,95,.08);
}
.preflight-item.is-fail-soft {
border-color: rgba(201,169,97,.35);
background: rgba(201,169,97,.05);
}
.preflight-icon {
flex-shrink: 0;
width: 24px;
font-size: 16px;
line-height: 1.5;
text-align: center;
}
.preflight-item.is-ok .preflight-icon { color: #7ec98d; }
.preflight-item.is-fail-hard .preflight-icon { color: #e88888; }
.preflight-item.is-fail-soft .preflight-icon { color: #e6cf8a; }
.preflight-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.preflight-label {
font-weight: 500;
color: var(--text);
font-size: 14px;
}
.preflight-value {
font-size: 12px;
color: var(--muted);
font-family: 'JetBrains Mono', monospace;
word-break: break-word;
}
/* ─── Pre-Flight: Summary-Pills oben rechts im Panel-Head ──────────── */
.preflight-panel .panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.preflight-summary {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
}
.preflight-pill {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 999px;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: .08em;
text-transform: uppercase;
font-weight: 600;
border: 1px solid transparent;
white-space: nowrap;
}
.preflight-pill-ok { color: #7ec98d; border-color: rgba(90,160,110,.4); background: rgba(90,160,110,.1); }
.preflight-pill-warn { color: #e6cf8a; border-color: rgba(201,169,97,.45); background: rgba(201,169,97,.1); }
.preflight-pill-fail { color: #e88888; border-color: rgba(220,95,95,.5); background: rgba(220,95,95,.12); }
/* ─── Pre-Flight: Großes Status-Banner über der Check-Liste ────────── */
.preflight-allclear {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 18px;
border-radius: 4px;
margin: 4px 0 18px;
border: 1px solid rgba(90,160,110,.35);
background: linear-gradient(180deg, rgba(90,160,110,.1) 0%, rgba(90,160,110,.04) 100%);
}
.preflight-allclear-icon {
flex-shrink: 0;
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
font-size: 18px;
background: rgba(90,160,110,.2);
color: #7ec98d;
line-height: 1;
}
.preflight-allclear strong { display: block; color: var(--text); margin-bottom: 2px; font-size: 14px; }
.preflight-allclear .muted { font-size: 12.5px; line-height: 1.5; }
.preflight-allclear-warn {
border-color: rgba(201,169,97,.4);
background: linear-gradient(180deg, rgba(201,169,97,.1) 0%, rgba(201,169,97,.03) 100%);
}
.preflight-allclear-warn .preflight-allclear-icon {
background: rgba(201,169,97,.22);
color: #e6cf8a;
}
.preflight-allclear-fail {
border-color: rgba(220,95,95,.45);
background: linear-gradient(180deg, rgba(220,95,95,.1) 0%, rgba(220,95,95,.03) 100%);
}
.preflight-allclear-fail .preflight-allclear-icon {
background: rgba(220,95,95,.22);
color: #e88888;
}
/* ─── Pre-Flight: Gruppierung mit kleinem Sub-Header ───────────────── */
.preflight-group + .preflight-group { margin-top: 14px; }
.preflight-group-head {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--gold-pale, #c9a961);
margin: 0 0 6px 4px;
opacity: .75;
}
/* ─── Pre-Flight: „Beheben →"-Button pro Zeile ─────────────────────── */
.preflight-fix-btn {
flex-shrink: 0;
align-self: center;
background: transparent;
border: 1px solid rgba(201,169,97,.45);
color: var(--gold-pale, #c9a961);
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 600;
padding: 6px 11px;
border-radius: 3px;
cursor: pointer;
transition: background .12s, border-color .12s;
white-space: nowrap;
}
.preflight-fix-btn:hover {
background: rgba(201,169,97,.12);
border-color: rgba(201,169,97,.7);
}
.preflight-item.is-fail-hard .preflight-fix-btn {
border-color: rgba(220,95,95,.5);
color: #e88888;
}
.preflight-item.is-fail-hard .preflight-fix-btn:hover {
background: rgba(220,95,95,.12);
border-color: rgba(220,95,95,.75);
}
/* ─── Empfänger-Zahl groß ───────────────────────────────────────── */
.recipients-count-huge {
font-family: var(--f-display, Georgia), serif;
font-style: italic;
font-weight: 500;
font-size: 3.4rem;
color: var(--gold-pale, #f4e3b8);
line-height: 1;
letter-spacing: -.02em;
}
/* ─── Send-Mode-Tabs ─────────────────────────────────────────────── */
.send-mode-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.send-mode-tab {
position: relative;
cursor: pointer;
display: block;
}
.send-mode-tab input { position: absolute; opacity: 0; pointer-events: none; }
.send-mode-tab-label {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 18px;
border: 1px solid var(--line-cool);
background: rgba(5,6,10,.35);
transition: all .1s;
}
.send-mode-tab-label strong {
font-family: var(--f-display, Georgia), serif;
font-style: italic;
font-weight: 500;
font-size: 1.15rem;
color: var(--gold-pale);
}
.send-mode-tab-label em {
font-style: normal;
font-size: 12.5px;
color: var(--muted);
}
.send-mode-tab:hover .send-mode-tab-label {
border-color: rgba(201,169,97,.4);
}
.send-mode-tab input:checked + .send-mode-tab-label {
border-color: var(--gold, #c9a961);
background: rgba(201,169,97,.08);
box-shadow: 0 0 0 1px var(--gold, #c9a961);
}
/* Schedule-Hint */
.sched-hint {
margin-top: 10px;
padding: 10px 12px;
background: rgba(201,169,97,.05);
border-left: 2px solid var(--gold, #c9a961);
font-size: 12.5px;
color: var(--muted);
line-height: 1.55;
}
.sched-hint strong { color: var(--gold-pale); font-weight: 500; }
/* ─── Snippets (Saved Sections) ──────────────────────────────────────── */
.studio-snippets {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 12px;
}
.studio-snippets-empty {
font-size: 11.5px;
color: var(--muted, #7a7465);
font-style: italic;
padding: 8px 4px;
text-align: center;
}
.studio-snippet-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: rgba(5,6,10,.35);
border: 1px solid var(--line-cool);
cursor: grab;
transition: all .1s;
border-radius: 2px;
}
.studio-snippet-item:hover {
border-color: var(--gold, #c9a961);
background: rgba(201,169,97,.06);
}
.studio-snippet-item:active { cursor: grabbing; }
.studio-snippet-item.is-dragging { opacity: .4; }
.studio-snippet-item.is-builtin {
background: rgba(201,169,97,.04);
border-color: rgba(201,169,97,.25);
}
.studio-snippet-badge {
display: inline-block;
margin-left: 6px;
font-size: 10px;
color: var(--gold, #c9a961);
vertical-align: baseline;
}
.studio-snippet-main {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.studio-snippet-name {
font-size: 12.5px;
color: var(--text, #e8e2d0);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.studio-snippet-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
letter-spacing: .12em;
color: var(--muted, #7a7465);
text-transform: uppercase;
}
.studio-snippet-delete {
background: transparent;
border: 0;
color: var(--muted, #7a7465);
cursor: pointer;
width: 22px;
height: 22px;
border-radius: 2px;
line-height: 1;
font-size: 12px;
transition: all .1s;
flex-shrink: 0;
}
.studio-snippet-delete:hover {
background: rgba(200,60,60,.15);
color: #e88888;
}
/* ─── Segmentierung (Kampagnen-Wizard Schritt 2) ───────────────────── */
.segment-section {
padding: 14px 18px;
border-top: 1px solid var(--line-cool);
}
.segment-section:first-of-type { border-top: 0; }
.segment-section-title {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--gold, #c9a961);
margin: 0 0 10px;
font-weight: 600;
}
.segment-field {
margin-bottom: 12px;
}
.segment-field-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: var(--text, #e8e2d0);
margin-bottom: 6px;
}
.segment-badge {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: .12em;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 2px;
font-weight: 600;
}
.segment-badge-ok {
background: rgba(106,156,114,.15);
color: #8fbf94;
border: 1px solid rgba(106,156,114,.3);
}
.segment-badge-fail {
background: rgba(200,80,80,.15);
color: #e09090;
border: 1px solid rgba(200,80,80,.3);
}
.segment-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.segment-tag-pick {
cursor: pointer;
position: relative;
}
.segment-tag-pick input[type="checkbox"] {
position: absolute; opacity: 0;
width: 100%; height: 100%; cursor: pointer;
}
.segment-tag-pick .tag {
opacity: .5;
transition: all .1s;
}
.segment-tag-pick input:checked + .tag {
opacity: 1;
background: rgba(201,169,97,.12);
font-weight: 600;
}
.segment-tag-pick:hover .tag { opacity: 1; }
.segment-summary {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: rgba(201,169,97,.04);
border-top: 1px solid rgba(201,169,97,.2);
}
.segment-summary-count {
font-family: var(--f-display, Georgia), serif;
font-style: italic;
font-weight: 500;
font-size: 2rem;
color: var(--gold-pale, #f4e3b8);
line-height: 1;
}
/* ═══════════════════════════════════════════════════════════════
Pro-HTML-Editor — Split-View mit Live-Vorschau
═══════════════════════════════════════════════════════════════ */
.modal.studio-html-modal-pro {
max-width: 1400px;
width: 92vw;
height: 84vh;
padding: 0;
display: flex;
flex-direction: column;
background: #0a0c12;
border: 1px solid rgba(201, 169, 97, 0.18);
overflow: hidden;
}
.studio-html-head {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
background: linear-gradient(180deg, rgba(201,169,97,0.04), transparent);
flex-shrink: 0;
}
.studio-html-head h3 {
margin: 0;
font-family: var(--f-display);
font-style: italic;
font-weight: 500;
font-size: 1.2rem;
color: var(--gold-pale);
flex: 1;
}
.studio-html-modes {
display: inline-flex;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
padding: 3px;
gap: 2px;
}
.studio-html-mode-btn {
background: transparent;
color: var(--muted);
border: 0;
padding: 6px 14px;
font-size: 12px;
font-family: var(--f-mono);
letter-spacing: 0.04em;
cursor: pointer;
border-radius: 4px;
transition: all 0.15s ease;
}
.studio-html-mode-btn:hover {
color: var(--gold-pale);
background: rgba(201, 169, 97, 0.08);
}
.studio-html-mode-btn.is-active {
background: rgba(201, 169, 97, 0.16);
color: var(--gold);
box-shadow: inset 0 0 0 1px rgba(201, 169, 97, 0.25);
}
.studio-html-body {
flex: 1;
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 0;
overflow: hidden;
}
.studio-html-body[data-html-mode="code"] { grid-template-columns: 1fr 0fr; }
.studio-html-body[data-html-mode="preview"] { grid-template-columns: 0fr 1fr; }
.studio-html-body[data-html-mode="code"] .studio-html-preview-pane { display: none; }
.studio-html-body[data-html-mode="preview"] .studio-html-code-pane { display: none; }
/* ─── Code-Pane ────────────────────────────────────────────── */
.studio-html-code-pane {
display: flex;
background: #0d1018;
border-right: 1px solid rgba(255, 255, 255, 0.04);
overflow: hidden;
position: relative;
}
.studio-html-gutter {
flex-shrink: 0;
width: 42px;
padding: 14px 8px 14px 0;
background: rgba(0, 0, 0, 0.25);
color: rgba(160, 158, 146, 0.45);
font-family: var(--f-mono);
font-size: 12.5px;
line-height: 1.55;
text-align: right;
user-select: none;
overflow: hidden;
border-right: 1px solid rgba(255, 255, 255, 0.04);
}
.studio-html-gutter div { padding: 0 8px 0 0; }
.studio-html-editor-wrap {
flex: 1;
position: relative;
overflow: hidden;
}
/* Highlight-Overlay UND Textarea müssen pixelgenau übereinanderliegen.
Jeder subpixel-Drift zwischen den beiden führt dazu dass der User
an einer anderen Stelle tippt, als er sieht. Deshalb werden ALLE
Text-Metriken explizit identisch gesetzt — inklusive Kerning, Ligaturen
und Font-Features, die Browser-Defaults minimal verschieden handhaben.
Besonders gefährlich: JetBrains Mono hat Ligaturen (=> wird zu einem Glyph),
die DEAKTIVIERT werden müssen damit der textarea-Cursor nicht neben dem
hervorgehobenen Zeichen landet. */
.studio-html-highlight,
.studio-html-textarea {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
margin: 0;
padding: 14px 18px;
font-family: 'JetBrains Mono', Menlo, Consolas, monospace;
font-size: 12.5px;
font-weight: 400; /* explicit: keine automatische Bold-Synthese */
font-style: normal;
font-variant: normal;
font-variant-ligatures: none; /* KRITISCH: sonst => wird zu einem Glyph */
font-feature-settings: normal;
font-kerning: none; /* keine automatische Zeichen-Verschiebung */
line-height: 1.55;
letter-spacing: 0;
word-spacing: 0;
text-indent: 0;
text-transform: none;
text-align: left;
text-rendering: auto; /* beide Layer mit demselben Rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
tab-size: 2;
-moz-tab-size: 2;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-word;
overflow-wrap: break-word;
hyphens: none; /* kein Auto-Hyphenation, das schiebt Zeichen */
overflow-x: hidden;
overflow-y: auto;
border: 0;
box-sizing: border-box;
}
.studio-html-highlight {
pointer-events: none;
color: #e8e2d0;
background: transparent;
z-index: 1;
}
/* Alle Highlight-Spans erben die font-Metriken. Explizit font-weight: inherit
damit niemals automatische Bold-Synthese passiert (die Zeichen breiter machen würde). */
.studio-html-highlight span {
font-weight: inherit;
font-style: inherit;
font-variant: inherit;
font-family: inherit;
}
.studio-html-textarea {
/* Text UND Selection müssen komplett unsichtbar im textarea sein,
sonst wird der Code doppelt gerendert (einmal vom textarea,
einmal vom hervorgehobenen pre). iOS Safari und Chrome brauchen
beide Properties — color allein reicht nicht. */
color: transparent;
-webkit-text-fill-color: transparent;
text-shadow: none;
caret-color: var(--gold);
background: transparent;
z-index: 2;
resize: none;
outline: none;
}
.studio-html-textarea::selection {
background: rgba(201, 169, 97, 0.3);
color: transparent;
-webkit-text-fill-color: transparent;
}
/* Syntax-Highlighting-Farben.
WICHTIG: KEIN font-style: italic oder font-weight: bold verwenden, weil die
Italic-/Bold-Glyphen von JetBrains Mono minimal anders gerendert werden als
Regular — das verursacht Subpixel-Drift zwischen Textarea und Overlay. */
.hlj-tag { color: #7ecbf0; }
.hlj-attr { color: #c9a961; }
.hlj-str { color: #a8d96f; }
.hlj-comment { color: #6a7180; opacity: 0.85; }
.hlj-doctype { color: #8c7cc0; }
.hlj-entity { color: #d99c6e; }
/* ─── Preview-Pane ─────────────────────────────────────────── */
.studio-html-preview-pane {
background: #f4f1ea;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.studio-html-preview-label {
position: absolute;
top: 8px; right: 12px;
z-index: 3;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.5);
background: rgba(255, 255, 255, 0.85);
padding: 4px 9px;
border-radius: 3px;
pointer-events: none;
}
.studio-html-preview-iframe {
flex: 1;
width: 100%;
border: 0;
background: #f4f1ea;
}
/* ─── Footer ──────────────────────────────────────────────── */
.studio-html-foot {
display: flex;
align-items: center;
gap: 20px;
padding: 12px 20px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(0, 0, 0, 0.2);
flex-shrink: 0;
}
.studio-html-hint {
flex: 1;
font-size: 11.5px;
line-height: 1.5;
}
.studio-html-hint code {
background: rgba(201, 169, 97, 0.08);
padding: 1px 5px;
border-radius: 3px;
font-size: 11px;
}
.studio-html-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
/* ─── Mobile ──────────────────────────────────────────────── */
@media (max-width: 900px) {
.modal.studio-html-modal-pro {
width: 100vw;
height: 100vh;
max-width: none;
border-radius: 0;
}
/* Auf Mobile: standardmäßig nur Code-Ansicht, User kann aber manuell toggeln */
.studio-html-body[data-html-mode="split"] {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
.studio-html-body[data-html-mode="split"] .studio-html-code-pane {
border-right: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.studio-html-foot {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
}
/* ═══════════════════════════════════════════════════════════════
Kampagnen-Tab-Header
═══════════════════════════════════════════════════════════════ */
.campaign-tabs {
display: flex;
align-items: stretch;
gap: 0;
margin: 0 0 22px;
padding: 0;
border-bottom: 1px solid rgba(201, 169, 97, 0.14);
background: linear-gradient(180deg, rgba(201, 169, 97, 0.03), transparent);
overflow-x: auto;
overflow-y: hidden; /* verhindert dass Browser eine vertikale Scrollbar einblendet */
}
.campaign-tab {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 22px 13px;
text-decoration: none;
color: var(--muted);
border: 0;
border-bottom: 2px solid transparent;
background: transparent;
font-size: 13px;
white-space: nowrap;
transition: all 0.16s ease;
position: relative;
top: 1px; /* damit die border-bottom exakt auf die Header-Border trifft */
}
.campaign-tab:hover {
color: var(--gold-pale);
background: rgba(201, 169, 97, 0.04);
text-decoration: none;
}
.campaign-tab.is-active {
color: var(--gold);
border-bottom-color: var(--gold);
background: rgba(201, 169, 97, 0.06);
}
.campaign-tab-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
color: var(--muted);
font-family: var(--f-mono);
font-size: 11px;
font-weight: 600;
transition: all 0.16s ease;
}
.campaign-tab:hover .campaign-tab-num {
background: rgba(201, 169, 97, 0.15);
color: var(--gold-pale);
}
.campaign-tab.is-active .campaign-tab-num {
background: var(--gold);
color: #0a0c12;
}
.campaign-tab-label {
font-weight: 500;
letter-spacing: 0.01em;
}
@media (max-width: 720px) {
.campaign-tab {
padding: 12px 14px 11px;
gap: 8px;
font-size: 12px;
}
.campaign-tab-label { display: none; }
}
/* Ungespeicherte-Änderungen-Dot (wird per JS an aktiven Tab angehängt) */
.campaign-tab.has-unsaved::after {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--signal-red, #e66464);
margin-left: 4px;
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════════
Globale Scrollbar-Styles
Subtil in Goldton, damit sie sich ins dunkle Luxury-Theme einfügen
statt den klassischen Windows-Grau-Balken zu zeigen.
═══════════════════════════════════════════════════════════════ */
/* Firefox: thin + eigene Farben */
* {
scrollbar-width: thin;
scrollbar-color: rgba(201, 169, 97, 0.28) transparent;
}
/* WebKit-Browser (Chrome, Safari, Edge, Opera) */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(201, 169, 97, 0.22);
border-radius: 8px;
border: 2px solid transparent;
background-clip: padding-box;
transition: background 0.15s ease;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(201, 169, 97, 0.45);
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active {
background: rgba(201, 169, 97, 0.6);
background-clip: padding-box;
}
::-webkit-scrollbar-corner {
background: transparent;
}
/* Im Code-Editor brauchen wir eine etwas sichtbarere Scrollbar,
damit man sieht dass es was zum Scrollen gibt */
.studio-html-textarea::-webkit-scrollbar-thumb,
.studio-html-highlight::-webkit-scrollbar-thumb {
background: rgba(201, 169, 97, 0.3);
background-clip: padding-box;
}
/* Im iframe des Design-Studios: die Mail-Vorschau hat eigene Scrollbar,
die soll zum Mail-Content passen (neutraler) */
.studio-html-preview-iframe::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15);
background-clip: padding-box;
}