+ verstecktes
*/
.dropzone {
display: grid; place-items: center; gap: 8px; min-height: 160px; padding: 24px; text-align: center;
color: var(--muted); background: var(--surface); border: 2px dashed var(--line); border-radius: var(--radius); cursor: pointer;
}
.dropzone.over { color: var(--text); background: var(--accent-soft); border-color: var(--accent); }
.dropzone strong { font-size: 1.15rem; color: var(--text); }
/* Dateiliste:
*/
.items { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.item { display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.item-thumb {
display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 8px;
font-size: .75rem; font-weight: 600; text-transform: uppercase; color: var(--muted); background: var(--surface-2);
}
.item-body { flex: 1; min-width: 0; }
.item-title { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.item-meta { font-size: .88rem; color: var(--muted); }
/* Auswählbare Vorschaubilder:
*/
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.thumb {
position: relative; display: grid; gap: 6px; padding: 8px; text-align: center; cursor: pointer;
background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius);
user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.thumb[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.thumb[aria-pressed="true"]::after {
content: "✓"; position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 28px; height: 28px;
font-weight: 700; color: var(--on-accent); background: var(--accent); border-radius: 50%;
}
.thumb.dragging { opacity: .4; }
.thumb-img { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; color: var(--muted); background: var(--surface-2); border-radius: 8px; }
.thumb-img > canvas, .thumb-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .15s; }
.thumb-label { overflow: hidden; font-size: .85rem; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
/* Werkzeugleiste, klebt unten am Bildschirm:
… Knöpfe …
*/
.toolbar {
position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 4px;
padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--surface);
border: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; box-shadow: 0 -4px 14px rgb(0 0 0 / .1);
}
.toolbar-title { flex-basis: 100%; font-weight: 600; text-align: center; }
/* Eingabefelder nebeneinander und Ergebnisliste:
…
- …
- …
*/
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.results { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; padding: 14px 16px; background: var(--accent-soft); border-radius: var(--radius); }
.results:empty { display: none; }
.results dt { color: var(--muted); }
.results dd { margin: 0; font-weight: 700; }
/* Tabellen (in .table-wrap scrollen sie auf dem Handy waagerecht) und aufklappbare Bereiche */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { font-size: .9rem; font-weight: 600; color: var(--muted); }
tr.highlight td { font-weight: 600; background: var(--accent-soft); }
summary { display: flex; align-items: center; min-height: var(--tap); font-weight: 600; cursor: pointer; }
/* Layouts: .split = zwei Spalten ab Tablet, .grid = Karten-Raster */
.split { display: grid; gap: 16px; }
@media (min-width: 760px) { .split { grid-template-columns: 1fr 1fr; align-items: start; } }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.media-box { display: grid; place-items: center; min-height: 160px; }
.media-box > svg, .media-box > img, .media-box > canvas { width: 100%; max-width: 320px; height: auto; }
/* Zahlenwähler (App.stepper) */
.stepper { display: inline-flex; align-items: center; gap: 10px; }
.stepper output { min-width: 3ch; font-size: 1.4rem; font-weight: 700; text-align: center; }
.icon-btn:disabled { opacity: .4; cursor: not-allowed; }
/* Große Spielkarte zum Antippen; .secret = verdeckter Inhalt sichtbar, .alarm = Explosion o. Ä. */
.big-card {
display: grid; place-items: center; align-content: center; gap: 12px; width: 100%; min-height: 55vh; padding: 24px;
font: inherit; font-size: clamp(1.5rem, 7vw, 2.4rem); font-weight: 700; line-height: 1.25; text-align: center;
color: var(--text); background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); cursor: pointer; user-select: none; -webkit-user-select: none;
}
.big-card small { display: block; font-size: 1rem; font-weight: 400; color: var(--muted); }
.big-card.secret { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.big-card.alarm { color: #fff; background: #c62828; border-color: #c62828; }
.big-card.secret small, .big-card.alarm small { color: inherit; opacity: .9; }
/* Große farbige Antwortknöpfe (Quiz):
*/
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.choice {
display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 16px; font: inherit; font-size: 1.2rem; font-weight: 700;
text-align: left; color: #fff; border: 0; border-radius: var(--radius); cursor: pointer; text-shadow: 0 1px 2px rgb(0 0 0 / .35);
}
.choice.dim { opacity: .3; }
/* Druckkarte (z. B. WLAN-Zugang), nur beim Drucken sichtbar */
.print-only { display: none; }
.print-card { max-width: 13cm; margin: 0 auto; padding: 1cm; text-align: center; border: 2px dashed #888; border-radius: 12px; }
/* Kurzmeldung */
.toast {
position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 10;
width: max-content; max-width: calc(100% - 32px); padding: 12px 20px; color: var(--bg); background: var(--text);
border-radius: 999px; box-shadow: var(--shadow); opacity: 0; pointer-events: none;
transform: translate(-50%, 12px); transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* ---------- Aurora: bewegtes Nordlicht, Glasflächen, Farbverlauf, Animationen ---------- */
body { isolation: isolate; }
body::before {
content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none; opacity: var(--aurora);
background:
radial-gradient(30% 25% at 25% 20%, rgb(124 92 255 / .6), transparent 70%),
radial-gradient(25% 22% at 78% 15%, rgb(0 200 255 / .45), transparent 70%),
radial-gradient(30% 28% at 60% 78%, rgb(255 79 195 / .35), transparent 70%);
filter: blur(60px);
animation: aurora 20s ease-in-out infinite alternate;
}
@keyframes aurora {
50% { transform: translate3d(6%, 4%, 0) rotate(10deg) scale(1.1); }
100% { transform: translate3d(-5%, 7%, 0) rotate(-8deg) scale(1.05); }
}
/* Glas nur für wenige große Flächen – viele Glas-Elemente bremsen Handys */
.site-header {
position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 55%, transparent);
backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
}
.tile, .card, .toolbar { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.brand span { color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.hero h1 {
color: transparent; background: linear-gradient(90deg, #7c5cff, #2fb8ff, #ff4fc3, #7c5cff); background-size: 300% 100%;
-webkit-background-clip: text; background-clip: text; animation: shine 10s linear infinite;
}
@keyframes shine { to { background-position: 300% 0; } }
.group-title { color: var(--text); letter-spacing: .14em; }
.group-title::after { content: ""; display: block; width: 36px; height: 3px; margin-top: 8px; border-radius: 3px; background: var(--grad); }
/* Kacheln gleiten nacheinander herein und leuchten beim Drüberfahren */
.tile {
min-height: 150px; transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .25s;
animation: rise .7s cubic-bezier(.2, .8, .2, 1) backwards;
}
.tile:hover { transform: translateY(-6px); border-color: rgb(143 125 255 / .6); box-shadow: 0 16px 40px rgb(124 92 255 / .3); }
.tile-icon {
display: grid; place-items: center; width: 52px; height: 52px; padding: 0; font-size: 1.7rem; border-radius: 16px;
background: linear-gradient(135deg, rgb(124 92 255 / .25), rgb(47 184 255 / .25)); transition: transform .4s;
}
.tile:hover .tile-icon { transform: rotate(-8deg) scale(1.1); }
.tile:nth-child(2) { animation-delay: .06s; } .tile:nth-child(3) { animation-delay: .12s; } .tile:nth-child(4) { animation-delay: .18s; }
.tile:nth-child(5) { animation-delay: .24s; } .tile:nth-child(6) { animation-delay: .3s; } .tile:nth-child(n+7) { animation-delay: .36s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.97); } }
/* Knöpfe mit Verlauf und Leuchten */
.btn { color: #fff; background: var(--grad); box-shadow: 0 6px 20px rgb(124 92 255 / .35); transition: transform .15s, box-shadow .2s, filter .2s; }
.btn:hover { background: var(--grad); filter: brightness(1.1); box-shadow: 0 8px 28px rgb(124 92 255 / .5); transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn.secondary, .btn.secondary:hover { color: var(--text); background: var(--surface); border-color: var(--line); box-shadow: none; }
.btn.danger, .btn.danger:hover { color: #fff; background: linear-gradient(135deg, #ff4f6d, #ff7a3d); }
.icon-btn { transition: transform .3s; }
.icon-btn:hover { transform: rotate(-15deg); }
.seg input:checked + span { color: #fff; background: var(--grad); }
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]):focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px var(--accent-soft); }
select option { color: var(--text); background: var(--bg); } /* Aufklappliste nicht durchsichtig */
.big-card.secret { color: #fff; background: var(--grad); border-color: transparent; }
.notice, .results { border: 1px solid var(--line); }
.toast { color: #fff; background: rgb(20 16 40 / .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* ---------- Seitenwechsel: Kachel wächst zur App (View Transitions), sonst Zoom-Ersatz aus app.js ---------- */
@view-transition { navigation: auto; }
main { animation: page-in .45s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes page-in { from { opacity: 0; transform: translateY(14px); } }
.site-header { view-transition-name: header; }
main:not(:has([data-tiles])) .hero { view-transition-name: app; } /* Ziel der Kachel auf jeder Tool-Seite */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
::view-transition-group(app) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(app), ::view-transition-new(app) { height: 100%; object-fit: cover; object-position: left top; }
::view-transition-old(app) { animation: vt-fade .2s ease both; }
::view-transition-new(app) { animation: vt-fade .35s .1s ease reverse both; }
@keyframes vt-fade { to { opacity: 0; } }
.tile.opening { z-index: 10; animation: tile-open .28s cubic-bezier(.4, 0, .2, 1) forwards; }
body.leaving .hero, body.leaving .group-title, body.leaving .tile:not(.opening) { animation: fade-away .25s ease forwards; }
@keyframes tile-open { 50% { transform: scale(1.08); } to { transform: scale(1.25); opacity: 0; } }
@keyframes fade-away { to { opacity: 0; transform: scale(.97); } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; animation: none !important; }
@view-transition { navigation: none; }
}
@media print {
.site-header, .site-footer, .toast, .no-print { display: none !important; }
.print-only { display: block !important; }
/* Beim Drucken immer hell, ohne Nordlicht und ohne Verlaufsschrift */
:root, :root[data-theme] { --text: #000; --muted: #444; --surface: #fff; --surface-2: #f2f2f2; --line: #bbb; --accent-soft: #f2f2f2; }
body::before { display: none; }
.hero h1 { color: #000; background: none; }
body { color: #000; background: #fff; }
.card { box-shadow: none; border-color: #bbb; }
th, td { color: #000; border: 1px solid #999; }
}