:root {
  --bg: #f6f1e7;
  --ink: #1e1e1e;
  --ink2: #4a4640;   /* Zweittext, bewusst dunkel genug, kein Grau */
  --rot: #d64541;
  --gelb: #e0a526;
  --gelb-dunkel: #cf8f12;
  --blau: #2f6f8f;
  --gruen: #4f8a5b;
  --karte: #fffdf8;
  --linie: #1e1e1e;
}
* { box-sizing: border-box; }
button, a, label, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 92px 20px 56px; }

header.kopf { text-align: center; margin-bottom: 20px; }
h1 { font-size: clamp(44px, 10vw, 80px); margin: 0 0 10px; letter-spacing: -0.03em; line-height: 1; font-weight: 800; }
h1 a { color: inherit; text-decoration: none; }
.unter { margin: 0; color: var(--ink2); font-size: 19px; }

/* Automat */
.automat, .kasten { background: var(--karte); border: 3px solid var(--linie); border-radius: 28px; padding: 22px 22px 20px; box-shadow: 8px 8px 0 var(--linie); }
.walzen { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 600px) { .walzen { grid-template-columns: 1fr 1fr 1fr; } }
.walze { background: #fff; border: 2px solid var(--linie); border-radius: 18px; padding: 16px 14px; height: 190px; position: relative; overflow: hidden; text-align: center; display: flex; flex-direction: column; align-items: center; }
.walze small { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); margin-bottom: 8px; }
.walze .icon { font-size: 42px; line-height: 1; height: 46px; margin: 4px 0 8px; flex: none; }
.walze .text { font-weight: 500; font-size: 17px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.walze .text.lang { font-size: 15px; line-height: 1.3; -webkit-line-clamp: 5; }
.walze.dreht .icon, .walze.dreht .text { animation: ratter .09s linear infinite; }
@keyframes ratter { 0% { transform: translateY(-6px); opacity: .3 } 50% { transform: translateY(0); opacity: 1 } 100% { transform: translateY(6px); opacity: .3 } }
.walze .halt { position: absolute; top: 10px; right: 10px; font-size: 12px; background: var(--karte); color: var(--ink); border: 1.5px solid var(--linie); border-radius: 999px; padding: 3px 10px; cursor: pointer; font-family: inherit; }

.hebel { display: block; width: 100%; margin: 16px 0 0; padding: 18px; font-size: 22px; font-weight: 700; font-family: inherit; background: var(--rot); color: #fff; border: 3px solid var(--linie); border-radius: 20px; cursor: pointer; box-shadow: 0 6px 0 var(--linie); transition: transform .08s, box-shadow .08s; }
.hebel:active { transform: translateY(6px); box-shadow: 0 0 0 var(--linie); }
.hebel:disabled { cursor: wait; }

.ergebnis-box { margin: 20px 0 0; background: #fff; border: 2.5px solid var(--linie); border-radius: 16px; padding: 14px 18px 14px; text-align: center; box-shadow: 4px 4px 0 var(--akzent); }
.ergebnis { font-size: 20px; font-weight: 700; line-height: 1.5; margin: 0; height: 4.5em; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.kommentar { color: var(--ink2); font-style: italic; height: 1.6em; margin: 0 0 4px; overflow: hidden; }
.ergebnis { margin-bottom: 10px; }
.ergebnis-box .teilen { display: inline-flex; align-items: center; gap: 8px; background: var(--bg); color: var(--ink); border: 1.5px solid var(--linie); border-radius: 999px; padding: 7px 16px; cursor: pointer; font-size: 14px; font-family: inherit; }

.filter { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1.5px solid #d8d1c3; font-size: 12px; }
@media (min-width: 600px) { .filter { grid-template-columns: 1fr 1fr 1fr; align-items: start; } }
.filter fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.filter legend { text-align: center; color: var(--ink); font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.filter .optionen { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.filter label { border: 1.5px solid var(--linie); border-radius: 999px; padding: 3px 10px; cursor: pointer; background: var(--karte); }
.filter input { position: absolute; opacity: 0; width: 0; height: 0; }
.filter label:has(input:checked) { background: var(--ink); color: var(--bg); }

.leiste { display: flex; justify-content: center; gap: 10px; margin-top: 24px; padding-top: 24px; border-top: 1.5px solid #d8d1c3; flex-wrap: wrap; }
.leiste.ohne { border-top: 0; padding-top: 0; }
.leiste button, .leiste-knopf { display: inline-flex; align-items: center; gap: 8px; background: var(--karte); color: var(--ink); border: 1.5px solid var(--linie); border-radius: 999px; padding: 8px 18px; cursor: pointer; font-size: 15px; font-family: inherit; }
.keks-neu { margin-top: 4px; }
.keks-neu { visibility: hidden; }
.keks-neu.da { visibility: visible; }

/* Fette Knöpfe */
.mehr { margin-top: 44px; text-align: center; }
.mehr h2 { font-size: 30px; margin: 0 0 8px; font-weight: 800; letter-spacing: -0.02em; }
.mehr-info { margin: 0 0 24px; color: var(--ink2); font-size: 17px; }
.knoepfe { display: grid; gap: 18px; grid-template-columns: 1fr; text-align: left; }
@media (min-width: 600px) { .knoepfe { grid-template-columns: 1fr 1fr 1fr; } }
.knopf { display: block; padding: 24px 20px 22px; border: 3px solid var(--linie); border-radius: 22px; color: #fff; text-decoration: none; box-shadow: 6px 6px 0 var(--linie); font-weight: 800; font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; transition: transform .08s, box-shadow .08s; }
.knopf:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--linie); }
.knopf span { display: block; font-weight: 400; font-size: 15px; line-height: 1.5; margin-top: 10px; }
.knopf.gelb { background: #cf8f12; }
.knopf.blau { background: var(--blau); color: #fff; }
.knopf.gruen { background: var(--gruen); color: #fff; }
.knopf.rot { background: var(--rot); color: #fff; }

/* Unterseiten */
.orakel .ergebnis-box { margin-top: 0; }
.orakel .ergebnis { height: 4.5em; font-size: 22px; }
.antwort .vor { color: var(--ink2); font-style: italic; display: block; font-size: 16px; margin-bottom: 6px; }
.sofa { font-size: 56px; display: block; line-height: 1; }

.keks-buehne { position: relative; width: min(80vw, 360px); margin: 10px auto 0; padding-top: 150px; text-align: center; }
.keks { display: block; position: relative; z-index: 2; margin: 0 auto; cursor: pointer; width: min(70vw, 320px); outline: none; -webkit-tap-highlight-color: transparent; }
.keks:focus-visible { filter: drop-shadow(0 0 0 3px var(--gelb)); }
.keks:active { transform: scale(.97); }
.keks.wackel { animation: wackel .25s; }
@keyframes wackel { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
.keks .riss { opacity: 0; transition: opacity .15s; }
.keks.k1 .r1, .keks.k2 .r1, .keks.k2 .r2, .keks.k3 .r1, .keks.k3 .r2, .keks.k3 .r3 { opacity: 1; }
.zettel { position: absolute; left: 50%; top: 170px; z-index: 1; width: min(76vw, 340px); transform: translate(-50%, 0) rotate(0deg); background: #fff; border: 1.5px solid var(--linie); padding: 16px 20px; font-size: 18px; line-height: 1.45; text-align: center; opacity: 0; transition: transform .6s cubic-bezier(.2,.8,.3,1), opacity .3s; }
.keks-buehne.offen .zettel { opacity: 1; transform: translate(-50%, -95px) rotate(-2deg); }
.keks-hinweis { color: var(--ink2); font-size: 14px; margin: 8px 0 0; height: 1.5em; }

.bingo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 28px; }
.bingo button { aspect-ratio: 1; border: 1.5px solid var(--linie); border-radius: 12px; font-size: clamp(9px, 2.3vw, 13px); padding: 4px; cursor: pointer; line-height: 1.2; font-family: inherit; color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; position: relative; padding-top: 6px; }
.bingo .bi { font-size: clamp(18px, 4.5vw, 28px); line-height: 1; margin-bottom: 9px; }
.bingo .bt { padding: 0 2px; }
.bingo .f0, .bingo .f1, .bingo .f2, .bingo .f3 { background: #fff; }
.bingo button[aria-pressed="true"] { background: var(--gelb); }
.bingo button[aria-pressed="true"] .bt { text-decoration: line-through; }
.bingo button[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 3px; right: 6px; font-weight: 700; font-size: 14px; }
.bingo button.mitte { background: var(--ink) !important; color: var(--bg); font-weight: 700; }
.bingo button.mitte::after { content: none; }
.konfetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.konfetti i { position: absolute; top: -10px; width: 10px; height: 14px; animation: fall 2.2s linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

footer { text-align: center; padding: 0 20px 28px; font-size: 14px; color: var(--ink2); line-height: 1.7; max-width: 760px; margin: 0 auto; width: 100%; }
.fuss-linie { border: 0; border-top: 2px solid var(--linie); margin: 8px 0 20px; }
.fuss-links, .fuss-info { margin: 0; display: inline; }
.fuss-info { font-size: 13px; }
.version { font-size: 11px; color: #b0a99e; margin-left: 4px; }
.fuss-info::before { content: " · "; }
@media (max-width: 599px) { .fuss-links, .fuss-info { display: block; } .fuss-info::before { content: none; } }
.feedback { margin: 0 0 14px; color: var(--ink); font-size: 15px; }
footer a { color: inherit; margin: 0 6px; }
.zurueck { display: inline-block; margin-bottom: 12px; padding: 10px 0; font-size: 15px; color: var(--ink2); }
.text p { max-width: 62ch; }

/* Tablet: Walzen nebeneinander ab 600px, Knöpfe ab 700px dreispaltig */
@media (min-width: 600px) and (max-width: 899px) { .walze { height: 230px; } .walze .text { font-size: 16px; } }
@media (max-width: 599px) { .walze { height: 160px; } .walze .icon { font-size: 34px; height: 38px; }  }
@media (max-width: 599px) { .knoepfe { grid-template-columns: 1fr; } .knopf { font-size: 24px; } }


.bingo-filter { border-top: 0; padding-top: 0; margin-top: 4px; grid-template-columns: 1fr !important; }
.bingo-info { color: var(--ink2); font-size: 14px; text-align: center; max-width: 52ch; margin: 16px auto 0; }
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  body { background: #fff; }
  .top, .menue, header.kopf, .bingo-filter, .leiste, .mehr, footer, .bingo-info { display: none !important; }
  main { padding: 0; max-width: none; }
  .bingo { gap: 3mm; width: 170mm; margin: 0 auto; }
  .bingo button { aspect-ratio: auto; height: 32mm; border: 1px solid #000; box-shadow: none; border-radius: 3mm; padding: 2mm; font-size: 10pt; display: flex; flex-direction: column; justify-content: center; gap: 2mm; }
  .bingo .bi { position: static; font-size: 16pt; margin: 0; }
  .bingo .bt { display: block; -webkit-line-clamp: unset; font-size: 10pt; }
  .bingo button[aria-pressed="true"] { background: #ddd; }
  .bingo .f0, .bingo .f1, .bingo .f2, .bingo .f3 { background: #fff; }
  .bingo button.mitte { background: #000; color: #fff; }
  main::before { content: "Langeweile-Bingo · mir-ist-fad.de"; display: block; font-size: 20px; font-weight: 700; margin-bottom: 8px; }
}

.worum { margin-top: 44px; text-align: center; }
.worum h2 { font-size: 17px; margin: 0 0 6px; }
.worum p { max-width: 58ch; margin: 0 auto 8px; color: var(--ink2); font-size: 14px; line-height: 1.6; }

/* Orakel: Kristallkugel, Stufen s0 (wartet) bis s5 (schläft) */
.kugel-buehne { text-align: center; margin: -4px 0 14px; }
.kugel { display: block; width: 150px; margin: 0 auto; }
.kugel .braue, .kugel .mund, .kugel .auge { transition: d .3s, transform .3s; transform-box: fill-box; transform-origin: center; }
.kugel .funkeln { transition: opacity .3s; }
.kugel.s0 .mund { d: path("M86 126 Q100 130 114 126"); }
.kugel.s1 .mund { d: path("M84 124 Q100 140 116 124"); }
.kugel.s2 .mund { d: path("M86 128 Q100 130 114 128"); }
.kugel.s2 .braue.l { transform: rotate(10deg); }
.kugel.s3 .mund { d: path("M86 130 Q100 124 114 130"); }
.kugel.s3 .braue.l { transform: rotate(16deg) translateY(2px); }
.kugel.s3 .braue.r { transform: rotate(-16deg) translateY(2px); }
.kugel.s3 .auge { transform: scaleY(.75); }
.kugel.s3 .funkeln { opacity: .4; }
.kugel.s4 .mund { d: path("M84 134 Q100 120 116 134"); }
.kugel.s4 .braue.l { transform: rotate(26deg) translateY(5px); }
.kugel.s4 .braue.r { transform: rotate(-26deg) translateY(5px); }
.kugel.s4 .auge { transform: scaleY(.5); }
.kugel.s4 .funkeln { opacity: 0; }
.kugel.s5 .mund { d: path("M90 130 Q100 126 110 130"); }
.kugel.s5 .auge { transform: scaleY(.08); }
.kugel.s5 .braue.l, .kugel.s5 .braue.r { transform: translateY(6px); }
.kugel.s5 .funkeln { opacity: 0; }
.kugel-sagt { color: var(--ink2); font-style: italic; margin: 6px 0 0; height: 1.6em; overflow: hidden; }
.orakel .leiste { padding-top: 16px; margin-top: 16px; }

/* Seitenfarbe */
.p-rot { --akzent: var(--rot); --akzent-text: #fff; }
.p-blau { --akzent: var(--blau); --akzent-text: #fff; }
.p-gelb { --akzent: var(--gelb-dunkel); --akzent-text: #fff; }
.p-gruen { --akzent: var(--gruen); --akzent-text: #fff; }
.p-neutral { --akzent: var(--ink); --akzent-text: var(--bg); }
h1 { color: var(--akzent); }
.hebel { background: var(--akzent); color: var(--akzent-text); }
.automat, .kasten { box-shadow: 8px 8px 0 var(--akzent); }
.bingo button.mitte { background: var(--akzent) !important; color: var(--akzent-text); }
.bingo button[aria-pressed="true"] { background: var(--gelb); }
.kugel circle[r="68"] { fill: #cfe4ee; }
.feedback a { color: var(--akzent); }

/* Tippflächen auf Touch-Geräten: mindestens 36px hoch */
@media (pointer: coarse) {
  .walze .halt { padding: 9px 14px; font-size: 13px; top: 8px; right: 8px; }
  .filter label { padding: 8px 14px; font-size: 14px; }
  .filter { font-size: 14px; }
  .leiste button, .leiste-knopf, .ergebnis-box .teilen { padding: 11px 20px; }
  .verlauf summary { padding: 8px; }
  .verlauf-liste a { display: inline-block; padding: 4px 0; }
  footer a { display: inline-block; padding: 6px 4px; }
  .bingo { gap: 6px; }
  .mund, .auge, .braue { transition: none; }
}

/* Kopfleiste */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: var(--bg); border-bottom: 3px solid var(--linie); transition: transform .25s; }
.top.weg { transform: translateY(-100%); }
.top-marke { font-weight: 800; font-size: 20px; color: var(--ink); padding: 8px 0; display: inline-block; text-decoration: none; letter-spacing: -0.02em; }
.burger { width: 44px; height: 44px; margin-right: -8px; background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border-radius: 10px; }
.burger span { display: block; width: 22px; height: 3px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.menue { position: fixed; top: 60px; left: 0; right: 0; bottom: 0; z-index: 19; background: var(--bg); padding: 20px 16px 40px; display: grid; gap: 14px; align-content: start; overflow: auto; overscroll-behavior: contain; }
@media (max-height: 500px) { .menue { grid-template-columns: 1fr 1fr; gap: 10px; } .menue .knopf { padding: 14px 16px; font-size: 20px; } .menue .knopf span { font-size: 13px; margin-top: 4px; } }
.menue[hidden] { display: none; }
@media (min-width: 600px) { .menue { grid-template-columns: 1fr 1fr; max-width: 760px; margin: 0 auto; left: 0; right: 0; } }
body.menue-offen { overflow: hidden; }

/* Handy: kompakt, Knopf im Bild */
@media (max-width: 599px) {
  main { padding: 80px 14px 40px; }
  h1 { font-size: 36px; margin-bottom: 4px; }
  .unter { font-size: 15px; }
  header.kopf { margin-bottom: 12px; }
  .automat, .kasten { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .walzen { gap: 8px; }
  .walze { height: 72px; flex-direction: row; align-items: center; text-align: left; padding: 8px 12px; gap: 12px; border-radius: 14px; }
  .walze small { position: absolute; top: 4px; left: 60px; font-size: 9px; margin: 0; }
  .walze .icon { font-size: 30px; height: auto; margin: 0; width: 38px; text-align: center; }
  .walze .text { font-size: 15px; -webkit-line-clamp: 2; padding: 10px 56px 0 0; }
  .walze .text.lang { font-size: 13px; line-height: 1.25; -webkit-line-clamp: 3; }
  .walze .halt { top: 50%; transform: translateY(-50%); right: 8px; padding: 10px 12px; font-size: 12px; }
  .hebel { margin-top: 10px; padding: 14px; font-size: 18px; border-radius: 14px; }
  .ergebnis-box { margin-top: 12px; padding: 10px 12px; }
  .ergebnis { height: 6em; font-size: 16px; }
  .kommentar { margin: 2px 0 8px; }
  .filter { margin-top: 12px; padding-top: 10px; gap: 8px; }
  .filter fieldset { gap: 6px; }
  .mehr { margin-top: 48px; }
  .mehr h2 { font-size: 24px; }
  .knoepfe { gap: 10px; }
  .knopf { padding: 16px 16px 14px; font-size: 20px; box-shadow: 4px 4px 0 var(--linie); }
  .knopf span { font-size: 14px; margin-top: 4px; }
  .worum { margin-top: 32px; }
  /* Orakel */
  .kugel { width: 110px; }
  .orakel .ergebnis { font-size: 18px; height: 5em; }
  .sofa { font-size: 44px; }
  /* Bingo */
  .bingo { gap: 4px; margin-top: 16px; }
  .bingo button { border-radius: 8px; padding: 3px 2px; gap: 0; }
  .bingo .bi { font-size: 22px; margin-bottom: 3px; }
  .bingo .bt { font-size: 8.5px; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: normal; overflow-wrap: anywhere; }
  .bingo button[aria-pressed="true"]::after { top: 1px; right: 3px; font-size: 11px; }
}
.bingo-gewaehlt { text-align: center; margin: 10px 0 0; min-height: 1.6em; font-size: 15px; font-weight: 500; }
.bingo .bt { overflow-wrap: anywhere; }


/* Orakel: Neustart-Zustand deutlich anders und kurz gesperrt */
.hebel.wecken { background: var(--bg); color: var(--ink); }
.hebel:disabled { opacity: .55; }
/* Bingo: Zoom */
.bingo-wrap.zoom .bingo .bi { font-size: 28px; }

/* Übersicht (Startseite) */
.start-knoepfe { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; gap: 18px; }
@media (min-width: 600px) { .start-knoepfe { grid-template-columns: 1fr 1fr; max-width: none; } }
.p-start .knopf { padding: 26px 22px 24px; }
.p-start .knopf span { margin-top: 8px; }
@media (max-width: 599px) { .p-start header.kopf h1 { position: static; width: auto; height: auto; clip: auto; } .start-knoepfe { gap: 14px; } .p-start .knopf { padding: 20px 18px; } }

/* Rechner: keine Kopfleiste, dafür große Kacheln */
@media (min-width: 900px) {
  .top { position: absolute; background: transparent; border: 0; height: auto; padding: 22px 28px; transform: none !important; }
  .top-marke { font-size: 28px; }
  .burger, .menue { display: none !important; }
  body.menue-offen { overflow: auto; }
  main { padding-top: 96px; }
  .p-start main { max-width: 900px; }
  .start-knoepfe { gap: 26px; margin-top: 36px; }
  .p-start .knopf { padding: 40px 32px 36px; font-size: 32px; border-radius: 26px; box-shadow: 8px 8px 0 var(--linie); }
  .p-start .knopf span { font-size: 17px; margin-top: 12px; }
  .p-start .worum { margin-top: 72px; }
  .p-start .worum h2 { font-size: 20px; }
  .p-start .worum p { font-size: 15px; }
  .p-start header.kopf { margin-bottom: 8px; }
}

/* Verlauf: Wischleiste */
.verlauf { margin-top: 18px; }
.verlauf-titel { text-align: center; color: var(--ink2); font-size: 13px; margin: 0 0 8px; }
.verlauf-band { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; }
.verlauf-band::-webkit-scrollbar { display: none; }
.verlauf-karte { flex: 0 0 100%; scroll-snap-align: start; background: #fff; border: 1.5px solid var(--linie); border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.45; color: var(--ink); display: flex; flex-direction: column; gap: 8px; }
.verlauf-karte p { margin: 0; user-select: text; }
.verlauf-zeig { align-self: center; background: var(--bg); border: 1.5px solid var(--linie); border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer; font-family: inherit; color: var(--ink); }
@media (min-width: 600px) { .verlauf-karte { flex-basis: calc(50% - 5px); } }
.verlauf-punkte { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.verlauf-punkte:empty { display: none; }
.verlauf-band.einzeln { justify-content: center; }
.verlauf-punkte button { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; padding: 0; cursor: pointer; }
.verlauf-punkte button.an { background: var(--ink); }
.hebel:disabled { opacity: .45; cursor: not-allowed; }
/* Handy/Tablet: Überschrift der Startseite steckt schon in der Kopfleiste */
@media (max-width: 899px) { .p-start header.kopf h1 { display: none; } .p-start .unter { font-size: 17px; color: var(--ink); } }

.nur-handy { display: none; }
@media (max-width: 899px) { .nur-handy { display: inline; } }
/* Wartepunkte im Ergebnisfeld */
.warte { display: inline-flex; gap: 8px; }
.warte i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink2); animation: hops .9s infinite ease-in-out; }
.warte i:nth-child(2) { animation-delay: .15s; } .warte i:nth-child(3) { animation-delay: .3s; }
@keyframes hops { 0%, 80%, 100% { transform: translateY(0); opacity: .4 } 40% { transform: translateY(-6px); opacity: 1 } }
}

/* Bingo am Handy: Icon klein in der Ecke, Text mittig, Felder höher als breit */
.bingo .bt { hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 599px) {
  .bingo { gap: 5px; }
  .bingo button { aspect-ratio: 1 / 1.45; padding: 16px 3px 4px; justify-content: center; border-radius: 9px; }
  .bingo .bi { position: absolute; top: 3px; left: 4px; font-size: 13px; margin: 0; line-height: 1; }
  .bingo .bt { font-size: 10px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .bingo button.mitte { padding: 4px; }
  .bingo button.mitte .bi { display: none; }
  .bingo button[aria-pressed="true"]::after { top: 2px; right: 4px; font-size: 11px; }
}

/* Mouse-Over nur auf Geräten mit Maus, sonst bleibt es nach dem Tippen hängen */
@media (hover: hover) and (pointer: fine) {
  .walze .halt:hover, .filter label:hover, .leiste button:hover { background: var(--gelb); }
  .walze .halt[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--rot); }
  .ergebnis-box .teilen:hover { background: var(--gelb); }
  .leiste-knopf:hover { background: var(--gelb); }
  .knopf:hover { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--linie); }
  .bingo button:hover { box-shadow: 3px 3px 0 var(--linie); }
  .burger:hover { background: var(--gelb); }
  .verlauf-zeig:hover { background: var(--gelb); }
}