/* De Tafeltijdreis. Lettertypen: SIL Open Font License, zie fonts/OFL.txt. Alles onder #ttr-app. */
@font-face { font-family: "TTR Playfair"; src: url(fonts/playfair.woff2) format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "TTR Crimson"; src: url(fonts/crimson.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "TTR Rubik"; src: url(fonts/rubik.woff2) format("woff2"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "TTR Rubik"; src: url(fonts/rubik-italic.woff2) format("woff2"); font-weight: 800 900; font-style: italic; font-display: swap; }
@font-face { font-family: "TTR Baskerville"; src: url(fonts/baskerville.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "TTR Orbitron"; src: url(fonts/orbitron.woff2) format("woff2"); font-weight: 600 900; font-display: swap; }
@font-face { font-family: "TTR Exo"; src: url(fonts/exo2.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "TTR Cormorant"; src: url(fonts/cormorant.woff2) format("woff2"); font-weight: 500 700; font-display: swap; }

html, body.ttr-body { margin: 0; padding: 0; }
body.ttr-body { -webkit-text-size-adjust: 100%; background: #0B1B2E; }
body.ttr-theme-1946 { background: #E9D7AE; }
body.ttr-theme-1986 { background: #1455C0; }
body.ttr-theme-2066 { background: #040a16; }
body.ttr-theme-2026 { background: #06221B; }

#ttr-app { font-size: 17px; line-height: 1.45; }
#ttr-app *, #ttr-app *::before, #ttr-app *::after { box-sizing: border-box; }
#ttr-app p { margin: 0; }
#ttr-app h1, #ttr-app h2, #ttr-app h3 { margin: 0; }
#ttr-app .ttr-small { font-size: .9rem; }
#ttr-app .ttr-center { text-align: center; }
#ttr-app .is-muted { opacity: .75; }

/* ===================== Homepage en inloggen ===================== */
#ttr-app.ttr-theme-home { background: #0B1B2E; color: #fff; font-family: "TTR Exo", system-ui, sans-serif; min-height: 100vh; }
#ttr-app .ttr-home { max-width: 520px; margin: 0 auto; padding: calc(40px + env(safe-area-inset-top)) 20px calc(32px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 22px; }
#ttr-app .ttr-home-head { text-align: center; display: flex; flex-direction: column; gap: 8px; }
#ttr-app .ttr-theme-home .ttr-kicker, #ttr-app.ttr-theme-home .ttr-kicker { font-size: .82rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #F2D27A; }
#ttr-app .ttr-home-title { font-family: "TTR Playfair", Georgia, serif; font-weight: 900; font-size: clamp(2.2rem, 10vw, 2.7rem); line-height: 1.05; color: #fff; }
#ttr-app .ttr-home-sub { font-size: 1.08rem; font-weight: 600; }
#ttr-app .ttr-home-msg { background: #FFF4D6; color: #3B2D05; border-radius: 12px; padding: 12px 14px; font-weight: 600; text-align: center; }
#ttr-app .ttr-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#ttr-app .ttr-tile { min-height: 136px; padding: 16px 10px; border-radius: 6px; display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; text-align: center; }
#ttr-app .ttr-tile-tag { font-size: .92rem; font-weight: 700; line-height: 1.25; }
#ttr-app .tile-1946 { background: #F3E5C5; color: #20384D; border: 2px solid #20384D; box-shadow: inset 0 0 0 4px #F3E5C5, inset 0 0 0 5px rgba(32,56,77,.55); }
#ttr-app .tile-1946 .ttr-tile-year { font: 900 2.5rem/1 "TTR Playfair", Georgia, serif; }
#ttr-app .tile-1986 { background: linear-gradient(135deg, #FFE23D 0 18%, transparent 18%) top right / 56px 56px no-repeat, #FFFDF5; color: #14213D; border: 3px solid #14213D; box-shadow: 4px 4px 0 #1455C0; border-radius: 4px; }
#ttr-app .tile-1986 .ttr-tile-year { font: italic 900 2.5rem/1 "TTR Rubik", system-ui, sans-serif; color: #FF595E; text-shadow: 2px 2px 0 #FFE23D, 4px 4px 0 #14213D; }
#ttr-app .tile-2066 { background: #0B2240; color: #fff; border: 1.5px solid #59D8FF; box-shadow: 0 0 12px rgba(89,216,255,.35); border-radius: 8px; }
#ttr-app .tile-2066 .ttr-tile-year { font: 900 2.1rem/1 "TTR Orbitron", system-ui, sans-serif; letter-spacing: .06em; color: #CFF3FF; text-shadow: 0 0 8px rgba(89,216,255,.6); }
#ttr-app .tile-2026 { background: #092C24; color: #fff; border: 2px solid #D8B65D; }
#ttr-app .tile-2026 .ttr-tile-year { font: 700 2.75rem/1 "TTR Cormorant", Georgia, serif; color: #E8C66A; }
#ttr-app .ttr-home-box { background: #13294A; border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
#ttr-app .ttr-home-date { font-size: 1.35rem; font-weight: 700; }
#ttr-app .ttr-home-start { font-size: 1.1rem; font-weight: 600; }
#ttr-app .ttr-home-note { font-size: .98rem; color: #F2D27A; }
#ttr-app .ttr-home-h2 { font-family: "TTR Playfair", Georgia, serif; font-size: 1.5rem; color: #fff; margin-bottom: 10px; }
#ttr-app .ttr-home-h3 { font-size: 1.2rem; font-weight: 700; }
#ttr-app .ttr-prog { list-style: none; padding: 0; margin: 0; background: #fff; color: #0B1B2E; border-radius: 12px; overflow: hidden; }
#ttr-app .ttr-prog-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #D9DEE6; }
#ttr-app .ttr-prog-row:last-child { border-bottom: 0; }
#ttr-app .ttr-prog-name { display: flex; flex-direction: column; gap: 2px; }
#ttr-app .ttr-prog-name strong { font-size: 1.08rem; }
#ttr-app .ttr-prog-name span { font-size: .85rem; color: #3E4C60; }
#ttr-app .ttr-prog-time { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
#ttr-app .ttr-prog-row.is-final { background: #092C24; color: #fff; }
#ttr-app .ttr-prog-row.is-final .ttr-prog-name span { color: #E8DDBF; }
#ttr-app .ttr-prog-row.is-final .ttr-prog-time { color: #F2D27A; }
#ttr-app .ttr-home-foot { text-align: center; display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
#ttr-app .ttr-theme-home .ttr-sender, #ttr-app.ttr-theme-home .ttr-sender { font-family: "TTR Playfair", Georgia, serif; font-size: 1.35rem; }
#ttr-app .ttr-loading { text-align: center; padding: 40px 0; }
#ttr-app .ttr-lead { font-size: 1.1rem; }
#ttr-app .ttr-login { gap: 12px; border: 1px solid rgba(216,182,93,.5); }
#ttr-app .ttr-label { font-weight: 700; }
#ttr-app .ttr-input { width: 100%; height: 64px; border-radius: 12px; border: 2px solid #D8B65D; background: #050c17; color: #F4E3B5; font: 700 1.9rem/1 "TTR Orbitron", system-ui, sans-serif; letter-spacing: .35em; text-align: center; padding: 0 0 0 .35em; }
#ttr-app .ttr-error { color: #FFB4A9; font-weight: 700; min-height: 1.3em; }

/* ===================== Knoppen ===================== */
#ttr-app .ttr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; width: 100%; padding: 10px 16px; border-radius: 10px; border: 2px solid transparent; font: 700 1rem "TTR Exo", system-ui, sans-serif; text-decoration: none; cursor: pointer; }
#ttr-app .ttr-btn:disabled { opacity: .6; }
#ttr-app .ttr-btn-gold { background: #D8B65D; color: #092C24; }
#ttr-app .ttr-btn-ghost { background: transparent; color: inherit; border-color: currentColor; }
#ttr-app .ttr-btn-small { min-height: 40px; width: auto; margin-top: 8px; padding: 6px 14px; font-size: .9rem; background: #1B2430; color: #fff; }
#ttr-app .ttr-btn:focus-visible, #ttr-app .ttr-input:focus-visible, #ttr-app .ttr-link:focus-visible { outline: 3px solid #59D8FF; outline-offset: 2px; }
#ttr-app .ttr-link { background: none; border: 0; color: inherit; text-decoration: underline; font: inherit; font-size: .9rem; padding: 12px; cursor: pointer; opacity: .85; }
#ttr-app .ttr-nav { display: grid; gap: 8px; margin-top: 8px; }

/* ===================== Persoonlijke pagina: gedeeld ===================== */
#ttr-app .ttr-page { position: relative; overflow: hidden; min-height: 100vh; padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)); }
#ttr-app .ttr-frame { position: relative; max-width: 540px; margin: 0 auto; padding: 30px 18px 26px; display: flex; flex-direction: column; gap: 20px; }
#ttr-app .ttr-decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#ttr-app .ttr-decor .d { position: absolute; display: block; }
#ttr-app .ttr-poster { text-align: center; display: flex; flex-direction: column; gap: 4px; position: relative; }
#ttr-app .ttr-poster .ttr-kicker { font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; }
#ttr-app .ttr-brand { font-size: 1.4rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; }
#ttr-app .ttr-year { font-size: clamp(4.6rem, 23vw, 6rem); line-height: 1; margin-top: 4px; }
#ttr-app .ttr-tag { font-size: 1.1rem; }
#ttr-app .ttr-divider { height: 2px; margin: 8px auto 0; width: 70%; }
#ttr-app .ttr-who { text-align: center; display: flex; flex-direction: column; gap: 6px; }
#ttr-app .ttr-names { font-size: clamp(1.9rem, 9vw, 2.3rem); line-height: 1.12; }
#ttr-app .ttr-task { font-size: 1.25rem; font-weight: 700; }
#ttr-app .ttr-count { font-size: 1.05rem; }
#ttr-app .ttr-when { text-align: center; display: flex; flex-direction: column; gap: 2px; }
#ttr-app .ttr-when-date { font-weight: 700; font-size: 1.12rem; }
#ttr-app .ttr-section { font-size: 1.45rem; margin-top: 4px; }

#ttr-app .ttr-banner { border-radius: 12px; padding: 12px 14px; font-weight: 700; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #FFF4D6; color: #3B2D05; }
#ttr-app .ttr-banner-info { background: #E6F0FF; color: #0F2E5C; }

#ttr-app .ttr-next { text-align: center; border: 2px solid currentColor; border-radius: 14px; padding: 14px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
#ttr-app .ttr-next-kicker { font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
#ttr-app .ttr-next-clock { font-size: clamp(2.4rem, 13vw, 3.1rem); line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
#ttr-app .ttr-next-what { font-size: 1rem; font-weight: 600; }
#ttr-app.ttr-theme-1946 .ttr-next { background: #FBF4E4; box-shadow: inset 0 0 0 4px #FBF4E4, inset 0 0 0 5px rgba(32,56,77,.4); }
#ttr-app.ttr-theme-1946 .ttr-next-clock { font-family: "TTR Playfair", Georgia, serif; font-weight: 900; }
#ttr-app.ttr-theme-1986 .ttr-next { background: #fff; border: 3px solid #14213D; box-shadow: 5px 5px 0 #FF595E; border-radius: 4px; margin-right: 5px; }
#ttr-app.ttr-theme-1986 .ttr-next-clock { font-style: italic; font-weight: 900; color: #1455C0; text-shadow: 2px 2px 0 #FFE23D; }
#ttr-app.ttr-theme-2066 .ttr-next { border: 1.5px solid #59D8FF; background: rgba(7,26,51,.8); box-shadow: 0 0 14px rgba(89,216,255,.35); color: #E6F4FF; }
#ttr-app.ttr-theme-2066 .ttr-next-clock { font-family: "TTR Orbitron", system-ui, sans-serif; font-weight: 900; color: #DDF6FF; text-shadow: 0 0 10px rgba(89,216,255,.8); }
#ttr-app.ttr-theme-2026 .ttr-next { border: 2px solid #D8B65D; background: rgba(6,34,27,.8); }
#ttr-app.ttr-theme-2026 .ttr-next-clock { font-family: "TTR Cormorant", Georgia, serif; font-weight: 700; color: #E8C66A; font-size: clamp(2.8rem, 15vw, 3.6rem); }
#ttr-app .ttr-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
#ttr-app .ttr-step { display: flex; gap: 10px; }
#ttr-app .ttr-when-col { width: 54px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 4px; }
#ttr-app .ttr-t { font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }
#ttr-app .ttr-t-to { font-size: .72rem; opacity: .85; white-space: nowrap; }
#ttr-app .ttr-dot { width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; }
#ttr-app .dot-closed { border: 2px solid #8A8478; }
#ttr-app .dot-open { background: #1455C0; }
#ttr-app .dot-own { background: #D8B65D; }

#ttr-app .ttr-card { flex: 1; min-width: 0; padding: 14px 15px; display: flex; flex-direction: column; gap: 6px; }
#ttr-app .ttr-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#ttr-app .ttr-card-label { font-weight: 700; font-size: 1.08rem; }
#ttr-app .ttr-card-kicker { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
#ttr-app .ttr-chip { font: 700 .74rem "TTR Exo", system-ui, sans-serif; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
#ttr-app .ttr-host { font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
#ttr-app .ttr-adres { font-size: 1.22rem; font-weight: 700; line-height: 1.35; }
#ttr-app .ttr-adres-sm { font-size: 1rem; font-weight: 600; }
#ttr-app .ttr-note { white-space: pre-line; font-size: .95rem; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.12); }
#ttr-app .ttr-era-year { font-size: 2rem; line-height: 1; }
#ttr-app .is-done { opacity: .82; }
#ttr-app .is-done .ttr-era-year { font-size: 1.5rem; }

/* Gesloten: neutraal, verraadt niets over het jaartal */
#ttr-app .card-closed { border-radius: 12px; border: 2px dashed; }
#ttr-app .ttr-closed-row { display: flex; gap: 10px; align-items: center; }
#ttr-app .ttr-closed-row svg { flex: none; width: 24px; height: 24px; opacity: .8; }
#ttr-app .ttr-countdown { font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
#ttr-app.ttr-theme-1946 .card-closed, #ttr-app.ttr-theme-1986 .card-closed { background: repeating-linear-gradient(135deg, #ECE7DD 0 12px, #E3DDD1 12px 24px); border-color: #8A8478; color: #2E3540; }
#ttr-app.ttr-theme-1946 .chip-closed, #ttr-app.ttr-theme-1986 .chip-closed { background: #CFC8BA; color: #2E3540; }
#ttr-app.ttr-theme-2066 .card-closed, #ttr-app.ttr-theme-2026 .card-closed { background: repeating-linear-gradient(135deg, #1E242E 0 12px, #232A36 12px 24px); border-color: #7C879A; color: #E6EAF0; }
#ttr-app.ttr-theme-2066 .chip-closed, #ttr-app.ttr-theme-2026 .chip-closed { background: #3A4252; color: #E6EAF0; }

/* Onthulde kaarten: stijl van het jaartal van de gastheer */
#ttr-app .card-era.era-1946 { background: #F3E5C5; color: #20384D; border: 2px solid #20384D; box-shadow: inset 0 0 0 4px #F3E5C5, inset 0 0 0 5px rgba(32,56,77,.6); border-radius: 4px; font-family: "TTR Crimson", Georgia, serif; }
#ttr-app .card-era.era-1946 .ttr-era-year, #ttr-app .card-era.era-1946 .ttr-host { font-family: "TTR Playfair", Georgia, serif; font-weight: 900; }
#ttr-app .card-era.era-1946 .ttr-adres { font-size: 1.32rem; }
#ttr-app .card-era.era-1946 .chip-era { background: #20384D; color: #F3E5C5; }
#ttr-app .card-era.era-1946 .ttr-btn-era { background: #20384D; color: #F3E5C5; }
#ttr-app .card-era.era-1946 .ttr-note { background: rgba(255,255,255,.5); }

#ttr-app .card-era.era-1986 { background: linear-gradient(135deg, #FFE23D 0 26px, transparent 26px) top right / 52px 52px no-repeat, #FFFDF5; color: #14213D; border: 3px solid #14213D; box-shadow: 5px 5px 0 #2ACBBE; border-radius: 4px; font-family: "TTR Rubik", system-ui, sans-serif; margin-right: 5px; }
#ttr-app .card-era.era-1986 .ttr-era-year { font-style: italic; font-weight: 900; color: #FF595E; text-shadow: 2px 2px 0 #FFE23D, 4px 4px 0 #14213D; }
#ttr-app .card-era.era-1986 .ttr-host { font-family: "TTR Baskerville", Georgia, serif; }
#ttr-app .card-era.era-1986 .chip-era { background: #14213D; color: #FFE23D; }
#ttr-app .card-era.era-1986 .ttr-btn-era { background: #1455C0; color: #fff; border-color: #14213D; }
#ttr-app .card-era.era-1986 .ttr-note { background: #F1F4FA; }

#ttr-app .card-era.era-2066 { background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,.7), transparent), radial-gradient(1.5px 1.5px at 65% 80%, #59D8FF, transparent), linear-gradient(160deg, #0B2240, #071526 70%); color: #E6F4FF; border: 1.5px solid #59D8FF; box-shadow: 0 0 14px rgba(89,216,255,.4); border-radius: 10px; font-family: "TTR Exo", system-ui, sans-serif; }
#ttr-app .card-era.era-2066 .ttr-era-year { font-family: "TTR Orbitron", system-ui, sans-serif; font-weight: 900; letter-spacing: .05em; color: #CFF3FF; text-shadow: 0 0 10px rgba(89,216,255,.8); }
#ttr-app .card-era.era-2066 .chip-era { background: #CFF3FF; color: #071526; }
#ttr-app .card-era.era-2066 .ttr-btn-era { background: #59D8FF; color: #071526; }
#ttr-app .card-era.era-2066 .ttr-btn-ghost { color: #59D8FF; }

#ttr-app .card-era.era-2026 { background: radial-gradient(90% 80% at 90% 0%, rgba(216,182,93,.25), transparent 60%), #092C24; color: #F4ECD6; border: 2px solid #D8B65D; box-shadow: inset 0 0 0 4px #092C24, inset 0 0 0 5px rgba(216,182,93,.55); border-radius: 8px; font-family: "TTR Exo", system-ui, sans-serif; }
#ttr-app .card-era.era-2026 .ttr-era-year, #ttr-app .card-era.era-2026 .ttr-host { font-family: "TTR Cormorant", Georgia, serif; font-weight: 700; color: #E8C66A; }
#ttr-app .card-era.era-2026 .ttr-host { color: #F7E7B8; font-size: 1.45rem; }
#ttr-app .card-era.era-2026 .chip-era { background: #D8B65D; color: #092C24; }
#ttr-app .card-era.era-2026 .ttr-btn-era { background: #D8B65D; color: #092C24; }
#ttr-app .card-era.era-2026 .ttr-btn-ghost { color: #D8B65D; }
#ttr-app .card-era.era-2026 .ttr-note { background: rgba(216,182,93,.12); }

#ttr-app .ttr-actions { display: grid; gap: 4px; text-align: center; margin-top: 8px; }
#ttr-app .ttr-foot { text-align: center; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
#ttr-app .ttr-foot .ttr-divider { margin-bottom: 8px; }
#ttr-app .ttr-foot .ttr-sender { font-size: 1.3rem; font-weight: 700; }

/* ===================== Thema 1946 ===================== */
#ttr-app.ttr-theme-1946 .ttr-page { background: radial-gradient(120% 80% at 50% 40%, #F6EAD0 0%, #EEDDB7 70%, #E3CFA4 100%); color: #20384D; font-family: "TTR Crimson", Georgia, serif; }
#ttr-app.ttr-theme-1946 .ttr-frame { border: 2px solid #20384D; box-shadow: inset 0 0 0 6px transparent, inset 0 0 0 7px rgba(32,56,77,.55); font-size: 1.06rem; }
#ttr-app.ttr-theme-1946 .ttr-brand, #ttr-app.ttr-theme-1946 .ttr-year, #ttr-app.ttr-theme-1946 .ttr-names, #ttr-app.ttr-theme-1946 .ttr-section, #ttr-app.ttr-theme-1946 .ttr-sender, #ttr-app.ttr-theme-1946 .ttr-task, #ttr-app.ttr-theme-1946 .ttr-when-date { font-family: "TTR Playfair", Georgia, serif; }
#ttr-app.ttr-theme-1946 .ttr-year { font-weight: 900; text-shadow: 2px 2px 0 rgba(32,56,77,.2); }
#ttr-app.ttr-theme-1946 .ttr-names, #ttr-app.ttr-theme-1946 .ttr-brand, #ttr-app.ttr-theme-1946 .ttr-section { font-weight: 900; }
#ttr-app.ttr-theme-1946 .ttr-divider { background: linear-gradient(90deg, transparent, #20384D 20%, #20384D 80%, transparent); height: 1px; }
#ttr-app.ttr-theme-1946 .card-own { background: #FBF4E4; border: 2px solid #20384D; box-shadow: inset 0 0 0 3px #FBF4E4, inset 0 0 0 4px rgba(32,56,77,.5); border-radius: 6px; }
#ttr-app.ttr-theme-1946 .chip-own { background: #20384D; color: #F3E5C5; }
#ttr-app.ttr-theme-1946 .ttr-t { font-family: "TTR Playfair", Georgia, serif; }
#ttr-app.ttr-theme-1946 .d1 { right: 2px; top: 160px; width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(32,56,77,.5); box-shadow: inset 0 0 0 5px transparent, inset 0 0 0 6px rgba(32,56,77,.3); }
#ttr-app.ttr-theme-1946 .d2 { right: 31px; top: 146px; width: 6px; height: 14px; background: rgba(32,56,77,.5); border-radius: 2px; }
#ttr-app.ttr-theme-1946 .d3 { left: 2px; top: 6px; width: 30px; height: 30px; border-left: 2px solid #20384D; border-top: 2px solid #20384D; border-radius: 12px 0 0 0; }
#ttr-app.ttr-theme-1946 .d4 { right: 2px; top: 6px; width: 30px; height: 30px; border-right: 2px solid #20384D; border-top: 2px solid #20384D; border-radius: 0 12px 0 0; }
#ttr-app.ttr-theme-1946 .d5 { left: 2px; bottom: 6px; width: 30px; height: 30px; border-left: 2px solid #20384D; border-bottom: 2px solid #20384D; border-radius: 0 0 0 12px; }
#ttr-app.ttr-theme-1946 .d6 { right: 2px; bottom: 6px; width: 30px; height: 30px; border-right: 2px solid #20384D; border-bottom: 2px solid #20384D; border-radius: 0 0 12px 0; }

/* ===================== Thema 1986 ===================== */
#ttr-app.ttr-theme-1986 .ttr-page { background: #1455C0; color: #14213D; font-family: "TTR Rubik", system-ui, sans-serif; padding: calc(24px + env(safe-area-inset-top)) 16px 24px; }
#ttr-app.ttr-theme-1986 .ttr-frame { background: #FFF8E8; box-shadow: 6px 6px 0 #14213D; padding: 28px 16px 24px; }
#ttr-app.ttr-theme-1986 .ttr-kicker, #ttr-app.ttr-theme-1986 .ttr-brand, #ttr-app.ttr-theme-1986 .ttr-names, #ttr-app.ttr-theme-1986 .ttr-task, #ttr-app.ttr-theme-1986 .ttr-tag, #ttr-app.ttr-theme-1986 .ttr-when-date, #ttr-app.ttr-theme-1986 .ttr-sender { font-family: "TTR Baskerville", Georgia, serif; }
#ttr-app.ttr-theme-1986 .ttr-brand { color: #1455C0; font-weight: 700; }
#ttr-app.ttr-theme-1986 .ttr-names { font-weight: 700; }
#ttr-app.ttr-theme-1986 .ttr-year { font-style: italic; font-weight: 900; color: #FF595E; text-shadow: 3px 3px 0 #FFE23D, 7px 7px 0 #14213D; margin: 6px 0 6px; }
#ttr-app.ttr-theme-1986 .ttr-divider { background: #FFE23D; height: 5px; width: 120px; }
#ttr-app.ttr-theme-1986 .ttr-foot .ttr-divider { background: #FF595E; }
#ttr-app.ttr-theme-1986 .ttr-section { font-style: italic; font-weight: 900; color: #1455C0; text-shadow: 2px 2px 0 #FFE23D; }
#ttr-app.ttr-theme-1986 .card-own { background: #fff; border: 3px solid #14213D; box-shadow: 5px 5px 0 #2ACBBE; border-radius: 4px; margin-right: 5px; }
#ttr-app.ttr-theme-1986 .chip-own { background: #FFE23D; color: #14213D; }
#ttr-app.ttr-theme-1986 .d1 { left: -10px; top: -6px; width: 120px; height: 90px; background: #FF595E; clip-path: polygon(0 0, 100% 0, 0 100%); }
#ttr-app.ttr-theme-1986 .d2 { right: -24px; top: 40px; width: 110px; height: 110px; border-radius: 50%; background: #FFE23D; }
#ttr-app.ttr-theme-1986 .d3 { left: -4px; top: 260px; width: 40px; height: 220px; background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px); background-size: 14px 14px; }
#ttr-app.ttr-theme-1986 .d4 { left: -6px; top: 540px; width: 60px; height: 90px; background: #FFE23D; clip-path: polygon(0 0, 100% 50%, 0 100%); }
#ttr-app.ttr-theme-1986 .d5 { right: -8px; top: 640px; width: 60px; height: 110px; background: #FF595E; clip-path: polygon(100% 0, 100% 100%, 0 60%); }
#ttr-app.ttr-theme-1986 .d6 { right: -20px; bottom: 60px; width: 90px; height: 90px; background: #2ACBBE; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* ===================== Thema 2066 ===================== */
#ttr-app.ttr-theme-2066 .ttr-page { background: radial-gradient(1px 1px at 8% 12%, #fff, transparent), radial-gradient(1px 1px at 22% 40%, rgba(255,255,255,.7), transparent), radial-gradient(1.5px 1.5px at 70% 8%, #59D8FF, transparent), radial-gradient(1px 1px at 92% 30%, #fff, transparent), radial-gradient(1px 1px at 40% 62%, rgba(255,255,255,.5), transparent), radial-gradient(1.5px 1.5px at 15% 85%, rgba(89,216,255,.8), transparent), radial-gradient(140% 40% at 50% 100%, #0e3a6e 0%, transparent 60%), linear-gradient(180deg, #040a16, #071526 40%, #061226); color: #E6F4FF; font-family: "TTR Exo", system-ui, sans-serif; }
#ttr-app.ttr-theme-2066 .ttr-frame { border: 1.5px solid rgba(89,216,255,.8); box-shadow: 0 0 18px rgba(89,216,255,.25), inset 0 0 18px rgba(89,216,255,.12); border-radius: 4px; }
#ttr-app.ttr-theme-2066 .ttr-brand, #ttr-app.ttr-theme-2066 .ttr-year, #ttr-app.ttr-theme-2066 .ttr-section, #ttr-app.ttr-theme-2066 .ttr-t { font-family: "TTR Orbitron", system-ui, sans-serif; }
#ttr-app.ttr-theme-2066 .ttr-year { font-weight: 900; letter-spacing: .04em; color: #DDF6FF; text-shadow: 0 0 14px rgba(89,216,255,.85), 0 0 2px #fff; font-size: clamp(4rem, 21vw, 5.4rem); }
#ttr-app.ttr-theme-2066 .ttr-names { font-weight: 700; text-shadow: 0 0 12px rgba(89,216,255,.4); }
#ttr-app.ttr-theme-2066 .ttr-section { color: #59D8FF; font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; }
#ttr-app.ttr-theme-2066 .ttr-divider { background: linear-gradient(90deg, transparent, #59D8FF, transparent); height: 1px; width: 100%; }
#ttr-app.ttr-theme-2066 .card-own { background: #0b2342; border: 1.5px solid #59D8FF; border-radius: 12px; box-shadow: 0 0 14px rgba(89,216,255,.3); }
#ttr-app.ttr-theme-2066 .chip-own { background: #59D8FF; color: #071526; }
#ttr-app.ttr-theme-2066 .dot-open { background: #59D8FF; box-shadow: 0 0 10px #59D8FF; }
#ttr-app.ttr-theme-2066 .d1 { right: -46px; top: 150px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #6b86a8, #1b2d47 55%, #0a1424 75%); box-shadow: 0 0 30px rgba(89,216,255,.35); }
#ttr-app.ttr-theme-2066 .d2 { right: -70px; top: 420px; width: 150px; height: 150px; border-radius: 50%; border: 1.5px solid rgba(89,216,255,.5); }

/* ===================== Thema 2026 ===================== */
#ttr-app.ttr-theme-2026 .ttr-page { background: radial-gradient(70% 30% at 85% 4%, rgba(216,182,93,.2), transparent 70%), radial-gradient(4px 4px at 8% 10%, rgba(245,210,122,.8), transparent), radial-gradient(3px 3px at 14% 22%, rgba(245,210,122,.6), transparent), radial-gradient(5px 5px at 6% 34%, rgba(245,210,122,.7), transparent), radial-gradient(4px 4px at 90% 58%, rgba(245,210,122,.6), transparent), linear-gradient(180deg, #0A2F26, #092C24 40%, #06221B); color: #F4ECD6; font-family: "TTR Exo", system-ui, sans-serif; }
#ttr-app.ttr-theme-2026 .ttr-frame { border: 2px solid #D8B65D; box-shadow: inset 0 0 0 6px transparent, inset 0 0 0 7px rgba(216,182,93,.5); border-radius: 6px; }
#ttr-app.ttr-theme-2026 .ttr-poster, #ttr-app.ttr-theme-2026 .ttr-who, #ttr-app.ttr-theme-2026 .ttr-when, #ttr-app.ttr-theme-2026 .ttr-section, #ttr-app.ttr-theme-2026 .ttr-sender { font-family: "TTR Cormorant", Georgia, serif; }
#ttr-app.ttr-theme-2026 .ttr-year { font-weight: 700; color: #E8C66A; text-shadow: 0 2px 0 #4a3a12; font-size: clamp(4.8rem, 25vw, 6.4rem); }
#ttr-app.ttr-theme-2026 .ttr-names { font-family: "TTR Playfair", Georgia, serif; font-weight: 900; color: #FBF3DD; }
#ttr-app.ttr-theme-2026 .ttr-task { font-size: 1.45rem; }
#ttr-app.ttr-theme-2026 .ttr-count, #ttr-app.ttr-theme-2026 .ttr-when p { font-size: 1.2rem; font-weight: 600; }
#ttr-app.ttr-theme-2026 .ttr-section { font-size: 1.75rem; color: #F7E7B8; }
#ttr-app.ttr-theme-2026 .ttr-divider { background: linear-gradient(90deg, transparent, #D8B65D, transparent); height: 1px; width: 100%; }
#ttr-app.ttr-theme-2026 .card-own { background: #0E3A2F; border: 2px solid #D8B65D; border-radius: 10px; box-shadow: 0 0 16px rgba(216,182,93,.2); }
#ttr-app.ttr-theme-2026 .chip-own { background: #D8B65D; color: #092C24; }
#ttr-app.ttr-theme-2026 .d1 { right: -60px; top: 20px; width: 200px; height: 200px; border-radius: 50%; border: 2px solid rgba(216,182,93,.4); }

@media (prefers-reduced-motion: no-preference) {
  #ttr-app .is-new { animation: ttr-in .6s ease-out both; }
  @keyframes ttr-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
}