* { box-sizing: border-box; }
:root { color-scheme: dark; --accent: #d4b86f; --surface: #242321; --surface-dark: #191817; --line: rgba(212,184,111,.16); --text: #f2f0ea; --muted: #b9b1a1; font-family: Inter, "Segoe UI", Arial, sans-serif; }
body { min-height: 100vh; margin: 0; padding: 22px 18px 10px; background: #171614; color: var(--text); font: 14px/1.45 Inter, "Segoe UI", Arial, sans-serif; }
.wrap { max-width: 1240px; min-height: calc(100vh - 32px); margin: auto; display: flex; flex-direction: column; }
.head { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(360px, 1.2fr); align-items: center; gap: 20px; margin-bottom: 16px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand .logo { position: relative; display: grid; width: 42px; height: 42px; flex: none; place-items: center; border: 1px solid rgba(212,184,111,.32); border-radius: 12px; background: rgba(212,184,111,.12); }
.logo::before, .logo::after { position: absolute; border: 3px solid var(--accent); border-radius: 50%; content: ""; }
.logo::before { width: 20px; height: 20px; border-right-color: transparent; transform: rotate(-45deg); }
.logo::after { width: 8px; height: 8px; border-color: var(--accent); background: #171614; }
.brand h1 { margin: 0; color: #f1f1f1; font-size: 19px; line-height: 1.2; }
.brand p { margin: 3px 0 0; color: #999; font-size: 11px; }
.topLink { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; }
.linkLabel { color: #aaa; font-size: 12px; white-space: nowrap; }
.topLink textarea { width: 100%; min-width: 0; height: 40px; padding: 9px 11px; resize: none; overflow: hidden; border: 1px solid #4a4436; border-radius: 7px; background: #191817; color: #e5dfd2; cursor: pointer; font: 11px/20px Consolas, monospace; filter: blur(4px); transition: filter .18s ease; white-space: nowrap; }
.topLink:hover textarea, .topLink:focus-within textarea { filter: blur(0); }
.topLink::after { position: absolute; top: 50%; left: 58%; color: var(--accent); content: "Hier klicken, um die URL zu kopieren"; font-size: 16px; font-weight: 600; pointer-events: none; text-shadow: 0 1px 3px #000; transform: translate(-50%,-50%); white-space: nowrap; }
.topLink:hover::after, .topLink:focus-within::after, .topLink.copied::after { opacity: 0; }
.topLink.copied::after { padding: 5px 12px; border-radius: 6px; background: #16864a; color: white; content: "In die Zwischenablage kopiert"; font-weight: 700; opacity: 1; }
.topLink #saved { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.layout { display: grid; flex: 1; min-height: 0; grid-template-columns: minmax(0, 40%) minmax(0, 60%); align-items: stretch; }
.panel { min-width: 0; min-height: 0; padding: 20px 24px; border: 0; border-radius: 0; background: var(--surface); box-shadow: none; }
.settings-panel { display: grid; grid-template-columns: minmax(0,.65fr) minmax(0,1.35fr); align-content: start; align-items: center; gap: 8px 18px; overflow: auto; overscroll-behavior: contain; border-right: 1px solid var(--line); }
.preview-panel { display: flex; flex-direction: column; overflow: hidden; }
h2 { margin: 0; color: #f1f1f1; font-size: 17px; }
.settings-panel > h2 { grid-column: 1 / -1; margin: 2px 0 10px; }
.group-heading { grid-column: 1 / -1; margin: 19px 0 8px; padding-top: 13px; border-top: 1px solid var(--line); color: #d0b66f; font-size: 12px; font-weight: 650; }
.group-heading:first-child { margin-top: 6px; padding-top: 0; border: 0; }
.settings-panel > label, .field-label { align-self: center; margin: 9px 0; color: #eee; font-size: 12px; font-weight: 650; }
.settings-panel > input[type="text"], .settings-panel > select, .control-with-hint > input[type="text"] { width: 100%; min-width: 0; min-height: 37px; padding: 8px 10px; border: 1px solid #4a4436; border-radius: 7px; background: #191817; color: #f2f0ea; font: inherit; font-size: 12px; }
.settings-panel > input[type="text"], .settings-panel > select, .settings-panel > .control-with-hint, .settings-panel > .warning-options, .settings-panel > .color-control, .settings-panel > .range-control, .settings-panel > .toggle-control { grid-column: 2; }
input::placeholder { color: #958d7e; }
#upcomingTitle:focus::placeholder, #upcomingText:focus::placeholder, #adTitle:focus::placeholder, #adText:focus::placeholder { color: transparent; }
.control-with-hint { min-width: 0; }
.hint { margin: 5px 0 0; color: #b9b1a1; font-size: 11px; line-height: 1.45; }
.hint code { color: #d7c27f; font: 11px Consolas, monospace; }
.warning-options { display: flex; flex-wrap: wrap; gap: 5px; }
.warning-options label { cursor: pointer; }
.warning-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.warning-options span { display: block; padding: 7px 8px; border: 1px solid #4a4436; border-radius: 7px; color: #c2bcae; font-size: 11px; text-align: center; transition: .18s ease; }
.warning-options input:checked + span { border-color: color-mix(in srgb, var(--accent) 65%, #ffffff20); background: color-mix(in srgb, var(--accent) 16%, transparent); color: #fff; }
.warning-options input:focus-visible + span, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.color-control { display: flex; align-items: center; gap: 10px; min-height: 37px; color: #c2bcae; font: 11px Consolas, monospace; }
.color-control input { width: 40px; height: 31px; padding: 2px; border: 1px solid #4a4436; border-radius: 7px; background: #191817; cursor: pointer; }
.range-control { display: flex; min-height: 37px; align-items: center; gap: 10px; }
.range-control input { width: 100%; min-width: 0; accent-color: var(--accent); cursor: pointer; }
.range-control output { width: 48px; flex: none; color: #d7c27f; font: 11px Consolas, monospace; text-align: right; }
.toggle-control { display: flex; min-height: 37px; align-items: center; gap: 9px; margin: 0; color: #e8e3d8; font-size: 12px; cursor: pointer; }
.toggle-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch { position: relative; width: 39px; height: 23px; flex: none; border-radius: 15px; background: #393c49; transition: .18s ease; }
.switch::after { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #c7c3d0; content: ""; transition: .18s ease; }
.toggle-control input:checked + .switch { background: color-mix(in srgb, var(--accent) 65%, #292331); }
.toggle-control input:checked + .switch::after { left: 19px; background: #fff; }
.toggle-control input:focus-visible + .switch { outline: 2px solid var(--accent); outline-offset: 3px; }
.preview-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.preview-switch { display: flex; gap: 5px; padding: 3px; border: 1px solid #ffffff12; border-radius: 9px; background: #191817; }
.preview-switch button { padding: 7px 9px; border: 0; border-radius: 6px; background: transparent; color: #c2bcae; font: 600 11px Inter, "Segoe UI", sans-serif; cursor: pointer; }
.preview-switch button.active { background: color-mix(in srgb, var(--accent) 22%, #202020); color: #fff; }
.preview-stage { position: relative; width: min(100%, 850px); flex: 1; min-height: 360px; align-self: center; overflow: hidden; border: 1px solid #ffffff12; border-radius: 12px; background: repeating-conic-gradient(#302e29 0 25%,#25231f 0 50%) 50%/22px 22px; }
.preview-card { position: absolute; display: flex; width: min(var(--card-width, 520px),calc(100% - 30px)); align-items: center; gap: 16px; padding: 14px; border: 1px solid rgba(212,184,111,.2); border-radius: 14px; background: var(--preview-card-color, #242321); box-shadow: 0 14px 40px #0009; color: #fff; font-family: var(--preview-font, Inter, "Segoe UI", sans-serif); opacity: 0; transition: opacity .6s ease-out, transform .6s ease-out; }
.preview-card { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.preview-card.show { opacity: 1; transform: translate(-50%, -50%); }
.preview-card.show[data-enter="fade-in"] { animation: preview-card-fade-in .6s ease-out both; }
@keyframes preview-card-fade-in { from { opacity: 0; transform: translate(-50%,-50%); } to { opacity: 1; transform: translate(-50%,-50%); } }
.preview-card[data-enter="slide-in-from-top"]:not(.show) { transform: translate(-50%,calc(-50% - 100% - 14px)); }
.preview-card[data-enter="slide-in-from-bottom"]:not(.show) { transform: translate(-50%,calc(-50% + 100% + 14px)); }
.preview-card[data-enter="slide-in-from-left"]:not(.show) { transform: translate(calc(-50% - 100% - 14px),-50%); }
.preview-card[data-enter="slide-in-from-right"]:not(.show) { transform: translate(calc(-50% + 100% + 14px),-50%); }
.preview-card.hiding { opacity: 0; transition-timing-function: ease-in; }
.preview-card.hiding[data-hide="fade-out"] { transform: translate(-50%,-50%); }
.preview-card.hiding[data-hide="slide-out-top"] { transform: translate(-50%,calc(-50% - 100% - 14px)); }
.preview-card.hiding[data-hide="slide-out-bottom"] { transform: translate(-50%,calc(-50% + 100% + 14px)); }
.preview-card.hiding[data-hide="slide-out-left"] { transform: translate(calc(-50% - 100% - 14px),-50%); }
.preview-card.hiding[data-hide="slide-out-right"] { transform: translate(calc(-50% + 100% + 14px),-50%); }
.preview-icon { position: relative; display: grid; width: var(--ring-size, 88px); height: var(--ring-size, 88px); flex: none; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--preview-accent,var(--accent)) 12%, transparent); }
.preview-ring { width: calc(var(--ring-size, 88px) - 8px); height: calc(var(--ring-size, 88px) - 8px); overflow: visible; }
.preview-ring-track, .preview-ring-progress { fill: none; stroke-width: var(--ring-width, 7px); }
.preview-ring-track { stroke: color-mix(in srgb, var(--preview-accent,var(--accent)) 25%, transparent); }
.preview-ring-progress { stroke: var(--preview-accent,var(--accent)); stroke-linecap: round; stroke-dasharray: 238.76; stroke-dashoffset: 74; }
.preview-time { position: absolute; display: grid; place-items: center; color: #fff; font: 800 var(--timer-size, 22px)/1 Inter, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; }
.preview-card[data-state="upcoming"] .preview-time, .preview-card[data-state="upcoming"] .preview-track { display: none; }
.preview-card[data-state="upcoming"] .preview-ring { animation: preview-pulse 1.6s ease-in-out infinite; }
@keyframes preview-pulse { 50% { opacity: .58; transform: scale(.91); } }
.preview-copy { min-width: 0; flex: 1; }
.preview-eyebrow { margin: 0 0 4px; color: var(--preview-accent,var(--accent)); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.preview-copy h3 { margin: 0; font-size: var(--title-size, 21px); line-height: 1.2; }
.preview-copy p:not(.preview-eyebrow) { margin: 5px 0 0; color: #c5beaf; font-size: var(--text-size, 13px); }
.preview-track { height: 3px; margin-top: 10px; overflow: hidden; border-radius: 5px; background: #ffffff20; }
.preview-track span { display: block; width: 48%; height: 100%; border-radius: inherit; background: var(--preview-accent,var(--accent)); }
.preview-hint { margin-top: 11px; }
.copyright { flex: none; padding: 9px 0 2px; color: #a69c88; font-size: 10px; text-align: center; }
.copyright a { color: inherit; text-decoration: none; transition: color .16s ease, text-decoration-color .16s ease; }
.copyright a:hover, .copyright a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 720px) { html, body { height: auto; min-height: 100%; overflow: auto; } .wrap { min-height: calc(100vh - 32px); } .head { grid-template-columns: 1fr; gap: 12px; } .layout { display: flex; flex-direction: column; flex: none; min-height: auto; } .settings-panel { display: block; overflow: visible; } .settings-panel > h2, .settings-panel > label, .settings-panel > input[type="text"], .settings-panel > select, .settings-panel > .control-with-hint, .settings-panel > .warning-options, .settings-panel > .color-control, .settings-panel > .range-control, .settings-panel > .toggle-control { width: 100%; } .settings-panel, .preview-panel { border: 0; border-bottom: 1px solid var(--line); } .preview-stage { min-height: 360px; } }
@media (max-width: 560px) { body { padding: 16px 10px 8px; } .head { gap: 10px; } .topLink { gap: 6px; } .topLink::after { left: 50%; font-size: 10px; } .settings-panel, .preview-panel { padding: 15px; } .settings-panel > label { margin: 10px 0 5px; } .group-heading { margin-top: 15px; } .preview-header { align-items: flex-start; flex-direction: column; } .preview-card { gap: 10px; padding: 10px; } .preview-copy h3 { font-size: var(--title-size, 21px); } }

/* Editor V1: Seitenrahmen und Vorschaufläche nach dem First Word Editor. */
body { height: 100vh; min-height: 0; padding: 0; overflow: hidden; background: #171614; }
.wrap { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; min-height: 0; margin: 0; }
.head { height: 60px; min-height: 60px; flex: none; display: flex; grid-template-columns: none; justify-content: space-between; gap: 20px; margin: 0; padding: 0 22px; border-bottom: 1px solid var(--line); background: var(--surface); }
.brand { min-width: 190px; }
.brand .logo { width: 34px; height: 34px; border-radius: 9px; }
.brand h1 { font-size: 17px; }
.load-settings-button, .reset-settings-button { min-height: 42px; flex: none; padding: 0 14px; border: 1px solid rgba(212,184,111,.42); border-radius: 7px; background: #191817; color: #e5cf8a; font: 600 13px Inter, "Segoe UI", sans-serif; cursor: pointer; }
.load-settings-button:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, #191817); }
.reset-settings-button:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, #191817); }
.topLink { width: min(1000px,calc(100vw - 240px)); max-width: 1000px; flex: 1; justify-content: center; margin: 0 auto; }
.topLink textarea { height: 42px; min-height: 42px; max-height: 42px; padding: 9px 10px; font-size: 14px; line-height: 22px; text-align: left; }
.topLink::after { left: 50%; }
.layout { height: auto; overflow: hidden; grid-template-columns: minmax(0,40%) minmax(0,60%); gap: 0; }
.panel { padding: 20px 24px; background: var(--surface); }
.settings-panel { border-right: 1px solid var(--line); }
.settings-panel { scrollbar-width: thin; scrollbar-color: #958249 transparent; }
.settings-panel::-webkit-scrollbar { width: 6px; height: 6px; }
.settings-panel::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.settings-panel::-webkit-scrollbar-track, .settings-panel::-webkit-scrollbar-corner { background: transparent; }
.settings-panel::-webkit-scrollbar-thumb { border-radius: 99px; background: #958249; }
.settings-panel::-webkit-scrollbar-thumb:hover { background: #c0a45b; }
.settings-panel > h2 { margin: 2px 0 10px; font-size: 13px; font-weight: 650; }
.settings-panel > h2 { font-size: 14px; }
.settings-panel > label, .field-label { font-size: 14px; }
.group-heading { font-size: 14px; }
.settings-panel > input[type="text"], .settings-panel > select, .control-with-hint > input[type="text"] { font-size: 13px; }
.hint { font-size: 12px; }
.hint code { font-size: 12px; }
.warning-options span { font-size: 12px; }
.color-control { font-size: 12px; }
.range-control output { font-size: 12px; }
.toggle-control { font-size: 14px; }
.preview-panel { position: relative; align-items: center; justify-content: center; padding: 26px; background-color: #25231f; background-image: linear-gradient(45deg,#302e29 25%,transparent 25%),linear-gradient(-45deg,#302e29 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#302e29 75%),linear-gradient(-45deg,transparent 75%,#302e29 75%); background-size: 28px 28px; background-position: 0 0,0 14px,14px -14px,-14px 0; }
.preview-header { position: absolute; z-index: 1; top: 18px; right: 22px; left: 22px; margin: 0; }
.preview-header h2 { color: #d0b66f; font-size: 13px; font-weight: 650; }
.preview-stage { width: min(100%,850px); min-height: 360px; border: 0; border-radius: 0; background: transparent; }
.preview-hint { position: absolute; right: 22px; bottom: 9px; left: 22px; margin: 0; }
.copyright { height: auto; min-height: 31px; padding: 12px 0 2px; font-size: 12px; line-height: 1.45; letter-spacing: .02em; }
.load-settings-dialog { width: min(540px,calc(100vw - 32px)); max-width: none; padding: 24px; border: 1px solid rgba(212,184,111,.35); border-radius: 12px; background: #242321; color: var(--text); box-shadow: 0 18px 60px #000b; }
.load-settings-dialog::backdrop { background: rgba(0,0,0,.68); backdrop-filter: blur(9px); }

/* Sprachumschalter wie in First Word. */
.head { position: relative; padding-right: 76px; }
.language-control { position: absolute; top: 50%; right: 20px; z-index: 20; transform: translateY(-50%); }
.language-toggle { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(212,184,111,.42); border-radius: 50%; background: #191817; cursor: pointer; }
.language-toggle:hover, .language-toggle[aria-expanded="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, #191817); }
.language-icon { display: block; width: 30px; height: 30px; overflow: hidden; border-radius: 50%; }
.language-menu { position: absolute; top: calc(100% + 8px); right: 0; display: grid; min-width: 140px; padding: 5px; border: 1px solid rgba(212,184,111,.3); border-radius: 10px; background: #242321; box-shadow: 0 10px 28px #0009; }
.language-menu[hidden] { display: none; }
.language-menu button { padding: 9px 11px; border: 0; border-radius: 6px; background: transparent; color: #eee; text-align: left; font: inherit; cursor: pointer; }
.language-menu button:hover { background: color-mix(in srgb, var(--accent) 15%, #242321); }
body.language-en .topLink::after { content: "Click here to copy the URL"; }
body.language-en .topLink.copied::after { content: "Copied to clipboard"; }
@media (max-width: 720px) {
  .head { padding-right: 76px; }
  .language-control { top: 50%; right: 16px; transform: translateY(-50%); }
}
.load-settings-dialog h2 { margin: 0 0 8px; color: #e5cf8a; font-size: 17px; }
.load-settings-dialog p { margin: 0 0 16px; color: var(--muted); font-size: 12px; }
.load-settings-dialog label { display: block; margin-bottom: 6px; color: #eee; font-size: 12px; font-weight: 650; }
.load-settings-dialog input { display: block; width: 100%; min-height: 40px; padding: 10px; border: 1px solid #4a4436; border-radius: 7px; background: #191817; color: #f2f0ea; font: 12px/1.45 Consolas, monospace; }
.load-settings-dialog .load-settings-error { min-height: 16px; margin: 6px 0 10px; color: #ffaaa0; }
.load-settings-actions { display: flex; justify-content: flex-end; gap: 8px; }
.load-settings-actions button { min-height: 36px; padding: 0 13px; border-radius: 7px; font: 600 12px Inter, "Segoe UI", sans-serif; cursor: pointer; }
.dialog-secondary { border: 1px solid #4a4436; background: #191817; color: #e5dfd2; }
.dialog-primary { border: 1px solid var(--accent); background: var(--accent); color: #191817; }
@media (max-width: 720px) {
  body { height: auto; min-height: 100vh; overflow: auto; }
  .wrap { position: static; height: auto; min-height: 100vh; }
  .head { height: auto; min-height: 64px; flex-wrap: wrap; padding: 10px 16px; }
  .brand { min-width: 0; }
  .load-settings-button { margin-left: auto; }
  .topLink { width: 100%; max-width: none; flex-basis: 100%; margin: 0; }
  .layout { display: flex; flex-direction: column; overflow: visible; flex: none; }
  .settings-panel { display: block; overflow: visible; }
  .settings-panel > h2, .settings-panel > label, .settings-panel > input[type="text"], .settings-panel > select, .settings-panel > .control-with-hint, .settings-panel > .warning-options, .settings-panel > .color-control, .settings-panel > .range-control, .settings-panel > .toggle-control { width: 100%; }
  .settings-panel, .preview-panel { border: 0; border-bottom: 1px solid var(--line); }
  .preview-panel { min-height: 440px; }
  .preview-stage { min-height: 360px; }
  .preview-hint { bottom: 9px; }
}