:root{font-family:Verdana,Arial,sans-serif;color:#404040;background:#467080;--accent:#404040;--line:#d8d8d8}*{box-sizing:border-box}body{margin:0}header{max-width:1040px;margin:auto;padding:24px;display:flex;align-items:center;justify-content:space-between}.logo{font-size:32px;font-weight:900;letter-spacing:-2px;text-decoration:none;color:var(--accent)}.logo span{color:#404040;font-size:16px;margin-left:3px}.tag{font-size:14px;color:#555555}main{max-width:560px;margin:0 auto;padding:8px 24px 32px}h1{font-size:28px;letter-spacing:-1px;margin:16px 0}h2{font-size:24px}p{line-height:1.6;color:#555555}button,.download{font:700 16px Verdana,sans-serif;cursor:pointer;border:0;border-radius:0;background:var(--accent);color:white;padding:18px 20px;min-height:56px;text-decoration:none;text-align:center;display:block;width:100%}button:hover,.download:hover{filter:brightness(.95)}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #555555;outline-offset:4px}.secondary{background:#404040;color:#ffffff}.plain{background:transparent;color:#555555;text-align:left;padding:10px 0;min-height:40px;font-size:14px}.stack{display:grid;gap:12px}.preview{display:block;width:min(100%,calc(100svh - 330px));max-width:480px;min-width:140px;height:auto;aspect-ratio:1;margin:18px auto 24px;border-radius:0;background:#eeeeee;box-shadow:0 12px 32px #0000000e}.welcome{text-align:center;padding-top:16px}.welcome h1{font-size:38px;line-height:1.12}.welcome .preview{width:min(100%,36svh);margin-bottom:32px}.tools{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}.tools button{background:white;border:1px solid var(--line);color:#ffffff;font-size:14px;padding:15px 8px}.tools b{display:block;font-size:23px;margin-bottom:6px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.tile{background:white;color:#ffffff;border:2px solid var(--line);padding:10px;font-size:14px}.tile[aria-pressed=true]{border-color:var(--accent);background:#404040}.tile canvas{width:100%;height:auto;display:block;border-radius:0;margin-bottom:8px}.theme{display:flex;align-items:center;justify-content:space-between;text-align:left;background:white;color:#ffffff;border:1px solid var(--line)}.theme span{color:var(--accent)}.eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:12px;color:var(--accent);font-weight:bold}.actions{display:flex;gap:10px}dialog{border:0;border-radius:0;width:min(480px,calc(100% - 32px));padding:24px;color:#404040}dialog::backdrop{background:#00000066}label{display:block;font-size:14px;line-height:1.5;margin-bottom:12px}textarea{font:18px Verdana,sans-serif;resize:vertical;min-height:130px;width:100%;padding:16px;border:2px solid var(--line);border-radius:0}#counter{font-size:14px;text-align:right}#status{max-width:520px;margin:0 auto;padding:0 24px 24px;text-align:center;font-size:14px}#status:empty{padding:0}.note{font-size:14px}.finish{text-align:center}@media(max-width:400px){header{padding:16px 20px}.tag{font-size:12px}main{padding:4px 16px 24px}h1{font-size:24px}.preview{margin:12px auto 18px}.tools button{padding:11px 8px}}@media(max-height:500px) and (orientation:landscape){.preview{width:45svh;min-width:100px}}

/* Reduzierter Kopfbereich mit großem Logo */
header{justify-content:center;padding:20px 24px 12px}.logo{font-size:64px;line-height:1.1;letter-spacing:-4px}.welcome{padding-top:0}

[hidden]{display:none!important}
#splash{position:fixed;inset:0;z-index:20;background:#f6f6f6;display:grid;place-items:center;padding:24px;overflow:auto}
.splash-inner{width:min(100%,440px);text-align:center;display:grid;gap:64px;padding:24px 0}
.splash-logo{font-size:clamp(60px,18vw,100px);font-weight:900;letter-spacing:-6px;color:var(--accent);line-height:1.2}
.splash-logo span{display:inline-block;animation:intro-letter 1.5s both}
.splash-logo span:nth-child(2){animation-delay:.12s}.splash-logo span:nth-child(3){animation-delay:.24s}.splash-logo span:nth-child(4){animation-delay:.36s}.splash-logo span:nth-child(5){animation-delay:.48s}.splash-logo span:nth-child(6){animation-delay:.6s}
@keyframes intro-letter{0%{opacity:0;transform:translateY(35px)}45%{opacity:1;transform:translateY(-12px)}70%{transform:translateY(5px)}100%{opacity:1;transform:translateY(0)}}
#splashVideo{width:100%;max-height:65svh;object-fit:contain;background:#f6f6f6}
#installDialog button+button{margin-top:12px}
#rotateDialog{max-width:none;max-height:none;width:100vw;height:100dvh;margin:0;padding:24px;background:#f6f6f6;text-align:center;align-content:center}
#rotateDialog::backdrop{background:#f6f6f6}
@media(prefers-reduced-motion:reduce){.splash-logo span{animation:none}}

/* Alle Bedienelemente: sehr dunkles Grau und weiße Schrift. */
button,.download,.secondary,.plain,.tools button,.tile,.theme,.tile[aria-pressed=true]{background:#404040;color:#ffffff;border-color:#404040}
.theme span{color:#ffffff}
.plain{padding:14px 20px;margin:0 0 16px;min-height:48px}
.tile[aria-pressed=true]{outline:3px solid #404040;outline-offset:3px;box-shadow:inset 0 0 0 2px #ffffff}
button:hover,.download:hover{background:#383838;filter:none}
header .logo{display:block;line-height:0;letter-spacing:normal}
header .logo img{display:block;width:clamp(160px,48vw,240px);height:auto}
.splash-logo{line-height:0;letter-spacing:normal;animation:intro-letter 2s both}
.splash-logo img{width:min(100%,380px);height:auto}
@media(prefers-reduced-motion:reduce){.splash-logo{animation:none}}

/* Startbild: transparente Außenfläche ohne Schatten */
.welcome .preview{background:transparent;box-shadow:none}

/* Bild und Bedienelemente bündig */
#app:has(> .preview){--bildbreite:min(100%,calc(100svh - 330px),480px)}
#app.welcome{--bildbreite:min(100%,36svh,480px)}
#app > .preview,
#app:has(> .preview) > .tools,
#app:has(> .preview) > .stack,
#app:has(> .preview) > button{
 width:var(--bildbreite);min-width:0;margin-left:auto;margin-right:auto;
}

/* Nur Fertig erhält diese Farbe */
#app > .tools + button{background:#467080;color:#ffffff}

/* Größeres Logo nur auf der Startseite */
body:has(#app.welcome) header .logo img{width:600px;max-width:90vw;height:auto}

/* Hintergrund der App */
:root,
body {
  background: #3f835e;
}

/* Hintergrund des Splashscreens */
#splash,
#splashVideo {
  background: #467080;
}

/* Hintergrund der Hochformat-Anzeige */
#rotateDialog,
#rotateDialog::backdrop {
  background: #467080;
}
/* Weiße Schrift auf dem App-Hintergrund */
body,
#app,
#app p,
#status,
#splash,
#rotateDialog,
#rotateDialog p {
  color: #ffffff;
}
/* Bezugspunkt für die Markierung */
.spubbles-gallery .tile {
  position: relative;
  border-radius: 14px;
  overflow: hidden; /* NEU-Markierung an der runden Kachelkante abschneiden */
}

/* Rotes Dreieck oben rechts */
.spubbles-gallery .new-flag {
  position: absolute;
  top: 0;
  right: 0;
  width: 64px;
  height: 64px;
  z-index: 1;
  background: #d62828;
  color: #ffffff;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  text-align: right;
  padding: 10px 5px 0 0;
  font: bold 12px/1 Verdana, Arial, sans-serif;
  pointer-events: none;
}
/* Runde Buttons und Auswahlkacheln */
button,
.download,
.secondary,
.plain,
.tools button,
.tile,
.theme {
  border-radius: 14px;
}

/* Runde Bildvorschau und Vorschaubilder */
.preview,
.tile canvas {
  border-radius: 14px;
}

/* Orange Highlight-Markierung mit weißem Stern */
.spubbles-gallery .new-flag.hot-flag {
  background: #ef7d00;
  color: #ffffff;
  font-size: 25px;
  line-height: 1;
  padding: 5px 5px 0 0;
}