/* A1 Lernen – friendly, colourful, still calm. Builds on style.css. */
:root { --acc: #3b5bdb; --acc-soft: #edf2ff; }
.btn.primary:hover { background: #2f4bc0 }
body { background: #f6f7fb }
.foot-note { text-align: center; padding: 20px 16px 40px }
.hero-row { display: flex; gap: 20px; align-items: center; justify-content: space-between }
.hero-pic { font-size: 5rem; line-height: 1 } .hero.center { text-align: center } .row.center { justify-content: center }
.hero.join { text-align: center } .hero.join form { justify-content: center } .hero.join input { font: inherit; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; min-width: 240px }
.section-title { margin: 28px 0 10px; font-size: 1.25rem }
/* topic grid */
.topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px }
.topic { position: relative; display: grid; gap: 4px; justify-items: center; text-align: center; padding: 18px 14px 14px; border-radius: 20px; text-decoration: none; color: inherit;
  background: linear-gradient(180deg, hsl(var(--hue) 90% 96%), #fff 70%); border: 1px solid hsl(var(--hue) 50% 86%); box-shadow: var(--shadow); transition: transform .15s }
.topic:hover { transform: translateY(-3px) } .topic .num { position: absolute; left: 12px; top: 10px; font-weight: 800; color: hsl(var(--hue) 50% 45%) }
.topic .meter { width: 100% } .topic .meter .track span { background: hsl(var(--hue) 60% 50%) }
/* pictures (OpenMoji SVG or emoji fallback) */
.pic { display: inline-grid; place-items: center; line-height: 1 } .pic img { width: 100%; height: 100%; object-fit: contain }
.topic-pic { width: 76px; height: 76px; font-size: 3.6rem } .pic.big { width: 96px; height: 96px; font-size: 4.4rem } .pic.mini { width: 28px; height: 28px; font-size: 1.4rem }
.card-pic { width: 84px; height: 84px; font-size: 3.6rem } .stage-pic { width: min(220px, 50vw); height: min(220px, 50vw); font-size: 8rem }
.pic.prohibited { position: relative } .pic.prohibited::after { content: ''; position: absolute; inset: 4%; border: 6px solid #d52b1e; border-radius: 50%; background: linear-gradient(45deg, transparent 46%, #d52b1e 46% 54%, transparent 54%) }
/* topic page */
.topic-head { display: flex; gap: 18px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px; box-shadow: var(--shadow) }
.topic-head h1 { margin: 0 } .topic-head p { margin: 4px 0 }
.tile.step { padding-left: 64px } .tile.step .teil-n { left: 14px; top: 14px; background: var(--acc-soft); color: var(--acc) }
.mini-pics { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap } .tick { color: var(--ok); font-weight: 800; margin-left: 6px }
.tile.step.video { background: linear-gradient(90deg, #fff7e6, #fff) }
.practice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px }
.pset { display: grid; gap: 4px; align-content: start } .pset-icon { font-size: 1.8rem }
/* lesson cards */
.explain { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--acc); border-radius: 14px; padding: 6px 18px; margin: 12px 0 }
.md p { margin: 8px 0 } .md ul { margin: 6px 0; padding-left: 20px }
.gtable { width: auto; min-width: 260px; font-size: 1.05rem; background: #fff } .gtable td:first-child { color: var(--mute) } .gtable td { font-weight: 600 }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 14px 0 }
.wcard { display: grid; gap: 4px; justify-items: center; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px 10px; box-shadow: var(--shadow); cursor: pointer; transition: box-shadow .2s, transform .2s }
.wcard:hover { transform: translateY(-2px) } .wcard.now { outline: 3px solid var(--acc); transform: scale(1.03) }
.wde { font-size: 1.25rem; font-weight: 700 } .wen { color: var(--mute); font-size: .92rem } .wcard .tip { text-align: left; background: var(--warnbg); border-radius: 8px; padding: 4px 8px }
.speak, .mic { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--acc-soft); font-size: 1.2rem; cursor: pointer }
.speak.playing { background: var(--acc); animation: pulse2 1s infinite } .mic.on { background: #ffe3e3; animation: pulse2 1s infinite } .speak:disabled { opacity: .35; cursor: default }
@keyframes pulse2 { 50% { box-shadow: 0 0 0 6px rgba(59, 91, 219, .18) } }
.row.tight { gap: 6px; justify-content: center } .sayit { display: grid; gap: 4px; justify-items: center; font-size: .85rem }
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--soft); font-weight: 600; font-size: .85rem; margin: 2px }
.chip.ok { background: var(--okbg); color: var(--ok) } .chip.mid { background: var(--warnbg); color: var(--warn) } .chip.bad { background: var(--badbg); color: var(--bad) }
/* practice */
.pbar { height: 8px; background: var(--line); border-radius: 8px; overflow: hidden; margin: 6px 0 12px } .pbar span { display: block; height: 100%; background: var(--acc); transition: width .3s }
.card-box { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px; box-shadow: var(--shadow) }
.question .q { font-size: 1.2rem; font-weight: 650 } .q-de { font-size: 1.3rem; font-weight: 700 }
.question .opts { display: grid; gap: 10px; margin: 12px 0 } .question .opts.pics { grid-template-columns: repeat(2, 1fr) }
.question .opt { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 1.1rem }
.question .opt input { position: absolute; opacity: 0 } .question .opt .pic { width: 44px; height: 44px; font-size: 2rem }
.answer { font: inherit; font-size: 1.3rem; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 12px; width: min(360px, 100%) }
.keys { display: flex; gap: 6px; margin-top: 8px } .key { min-width: 40px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); font: inherit; cursor: pointer }
.sentence { min-height: 54px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px; border: 2px dashed var(--line); border-radius: 12px; margin: 10px 0 }
.wordbank { display: flex; flex-wrap: wrap; gap: 8px } .word { font: inherit; font-size: 1.05rem; padding: 8px 14px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; cursor: pointer }
.word.on { background: var(--acc-soft); border-color: var(--acc) } .word:disabled { opacity: .35 } .word.sel { border-color: var(--acc); background: var(--acc-soft) } .word.ok { background: var(--okbg); border-color: var(--ok); opacity: 1 }
.word.shake { animation: shake .35s } @keyframes shake { 25% { transform: translateX(-5px) } 75% { transform: translateX(5px) } }
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 10px } .match .col { display: grid; gap: 8px }
.stars { font-size: 3rem; color: #f5b400; letter-spacing: 4px }
.model { background: var(--acc-soft); border-radius: 12px; padding: 4px 14px; margin: 10px 0 }
/* video */
.video { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 18px; box-shadow: var(--shadow); text-align: center }
.stage { min-height: 340px; display: grid; justify-items: center; align-content: center; gap: 8px; background: linear-gradient(180deg, #eef3ff, #fff); border-radius: 16px; padding: 18px }
.stage-de { font-size: 1.6rem; font-weight: 700; margin: 0 } .stage-en { color: var(--mute); margin: 0 }
.vcontrols { display: flex; gap: 10px; justify-content: center; margin: 14px 0 8px } .dots { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px }
.dot { width: 12px; height: 12px; border-radius: 50%; border: 0; background: var(--line); cursor: pointer; padding: 0 } .dot.on { background: var(--acc) }
/* listening corner */
.listen-topic { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 16px; margin: 10px 0 } .listen-topic summary { cursor: pointer; display: flex; align-items: center; gap: 8px }
.clips { list-style: none; padding: 0; display: grid; gap: 6px } .clips li { display: flex; align-items: center; gap: 10px } .clips .speak { width: 36px; height: 36px; font-size: 1rem }
.links li { margin: 6px 0 }
@media (max-width: 600px) {
  .hero-pic { display: none } .topics { grid-template-columns: repeat(2, 1fr) } .cards { grid-template-columns: repeat(2, 1fr) }
  .stage { min-height: 260px } .stage-de { font-size: 1.3rem } .question .opts.pics { grid-template-columns: 1fr 1fr } .match { gap: 6px }
}
.play { background: var(--acc); box-shadow: 0 4px 12px rgba(59, 91, 219, .28) } .play:hover:not(:disabled) { background: #2f4bc0 }
/* grammar tables: box hugs the table, both columns readable, space around it */
.table-wrap:has(.gtable) { display: inline-block; max-width: 100%; margin: 6px 0 16px; border-radius: 14px; box-shadow: var(--shadow) }
.gtable { min-width: 0; border-collapse: collapse }
.gtable th { background: var(--acc-soft); color: var(--acc); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; padding: 8px 18px }
.gtable td { padding: 10px 18px; font-weight: 600; color: var(--ink) } .gtable td:first-child { color: var(--ink); font-weight: 500 }
.gtable tr:nth-child(even) td { background: var(--soft) }
.explain + .row, .table-wrap + .row { margin-top: 4px }
/* Zeit trainers */
.trainers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 18px 0 6px }
.trainer { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 18px 20px; border-radius: 20px; text-decoration: none; color: inherit; box-shadow: var(--shadow); transition: transform .15s }
.trainer:hover { transform: translateY(-3px) } .trainer .trainer-icon { grid-row: span 2; font-size: 2.8rem } .trainer b { font-size: 1.2rem } .trainer span:not(.trainer-icon):not(.tick) { color: var(--mute); font-size: .92rem }
.clock-t { background: linear-gradient(135deg, #e7f5ff, #fff); border: 2px solid #a5d8ff } .date-t { background: linear-gradient(135deg, #fff4e6, #fff); border: 2px solid #ffd8a8 }
.clock-layout { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 20px; box-shadow: var(--shadow) }
.clock-wrap { display: grid; gap: 10px; justify-items: center }
.clock { touch-action: none; user-select: none } .clock.drag { cursor: grab } .clock:focus-visible { outline: 3px solid var(--acc); border-radius: 50% }
.clock .rim { fill: #343a40 } .clock .face { fill: #fff } .clock .tick { stroke: #adb5bd; stroke-width: 1 } .clock .tick.big { stroke: #343a40; stroke-width: 2.5 }
.clock .num { font: 700 14px system-ui, sans-serif; text-anchor: middle; fill: #212529 } .clock .zone-label { font: 700 9px system-ui, sans-serif; text-anchor: middle; dominant-baseline: middle }
.clock .hand { stroke-linecap: round } .clock .hour { stroke: #212529; stroke-width: 6 } .clock .minute { stroke: #3b5bdb; stroke-width: 4 } .clock .pin { fill: #e03131 }
.digital { font: 800 3rem ui-monospace, Menlo, monospace; letter-spacing: .04em } .digital.big { text-align: center; font-size: 3.4rem; margin: 6px 0 }
.say-line { font-size: 1.2rem; font-weight: 650; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 }
.say-line .speak, .small-speak { width: 38px; height: 38px; font-size: 1rem }
.tag { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 6px; background: #e7f5ff; color: #1971c2 } .tag.off { background: #f1f3f5; color: #495057 }
.zone-box { padding: 10px 14px; border-radius: 12px; border-left: 5px solid; background: var(--soft) }
.zone-box.z-nach { border-color: #2f9e44 } .zone-box.z-vorhalb { border-color: #f08c00 } .zone-box.z-halb { border-color: #e8590c; background: #fff4e6 } .zone-box.z-nachhalb { border-color: #e8590c } .zone-box.z-vor { border-color: #1c7ed6 } .zone-box.z-voll { border-color: #495057 }
.rules { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 16px; margin: 16px 0 } .rules summary { cursor: pointer; font-weight: 600 }
.rules tr.hl td { background: #fff4e6 }
.game-btn { text-align: left; font: inherit; cursor: pointer } .game-host { margin-top: 16px; scroll-margin-top: 80px }
.game { display: grid; gap: 10px; justify-items: center; text-align: center } .choice-grid { grid-template-columns: 1fr 1fr; width: 100% } .choice-grid .opt { justify-content: center; font: inherit; font-size: 1.1rem; font-weight: 600; background: #fff }
.clock-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100% } .clock-opt { justify-content: center; padding: 8px; background: #fff }
.center { text-align: center }
.day-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px } .day-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; box-shadow: var(--shadow) }
.day-card .say-line { font-size: 1.05rem; margin: 4px 0 } .day-card:nth-child(2) { border: 2px solid var(--acc) }
.cal-layout { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 18px; align-items: start }
.calendar { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 12px; box-shadow: var(--shadow) }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px } .cal-head b { display: flex; align-items: center; gap: 6px; font-size: 1.1rem }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px }
.cal-wd { border: 0; background: none; font: inherit; font-size: .8rem; font-weight: 700; color: var(--mute); cursor: pointer; padding: 4px 0 }
.cal-day { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; font-weight: 600; cursor: pointer } .cal-day:hover { border-color: var(--acc) }
.cal-day.we { background: #f8f9fa } .cal-day.today { border: 2px solid var(--acc); color: var(--acc) } .cal-day.picked { background: var(--acc); color: #fff }
.day-detail { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--acc); border-radius: 14px; padding: 8px 16px }
.ord-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 10px }
.ord { display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; cursor: pointer; text-align: left }
.ord.special { background: #fff4e6; border-color: #ffd8a8 } .ord.ste { background: #e7f5ff; border-color: #a5d8ff }
.bday-out { margin-top: 8px } .card-box select { font: inherit; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff }
@media (max-width: 700px) {
  .clock-layout, .cal-layout { grid-template-columns: 1fr } .clock-wrap svg { width: 240px; height: 240px } .digital { font-size: 2.4rem; text-align: center }
  .day-cards { grid-template-columns: 1fr } .clock-choices { grid-template-columns: 1fr 1fr } .choice-grid { grid-template-columns: 1fr }
}
.clock:focus-visible { outline: none } .clock:focus-visible .rim { fill: var(--acc) } .clock:focus { outline: none }
.clock .zone-label { font-size: 8px; paint-order: stroke; stroke: #fff; stroke-width: 3px }

/* Site colour: a coloured header so the three fayed.me sites are easy to tell apart */
.top { background: linear-gradient(90deg, #6741d9, #5530c2); border-bottom: 0; backdrop-filter: none }
.top .brand, .top .brand span { color: #fff } .top .brand span { opacity: .8 }
.top nav a { color: rgba(255, 255, 255, .82) } .top nav a:hover { background: rgba(255, 255, 255, .14); color: #fff } .top nav a.on { background: rgba(255, 255, 255, .22); color: #fff }
.top .who, .top #who, .top #who b { color: #fff } .top #who a, .top #who .link, .top .who .link { color: #fff; text-decoration-color: rgba(255, 255, 255, .6) }
.top .fb-link.unread { background: #ff922b; color: #fff }

/* clock mode switch */
.mode-switch { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 4px; gap: 4px; box-shadow: var(--shadow) }
.mode-btn { display: grid; text-align: left; border: 0; background: none; padding: 8px 14px; border-radius: 10px; font: inherit; cursor: pointer; color: var(--mute) }
.mode-btn b { color: var(--ink) } .mode-btn small { font-size: .78rem } .mode-btn.on { background: var(--acc); color: #fff } .mode-btn.on b { color: #fff }
.say-line.main { font-size: 1.35rem } .say-line.other { font-size: 1rem; opacity: .75 }
.daypart { font-weight: 700; color: #8a5a00; background: #fff4d6; border-radius: 999px; padding: 4px 14px; margin: 0 }
@media (max-width: 600px) { .mode-switch { width: 100% } .mode-btn { flex: 1 } }

.explain-time { margin-top: 8px } .explain-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.explain-col { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; box-shadow: var(--shadow) }
.explain-col.on { border: 2px solid var(--acc) } .explain-col h3 { margin: 0 0 4px } .explain-col ul { padding-left: 18px; margin: 6px 0 } .explain-col li { margin: 4px 0 }
.explain-col ul.examples { list-style: none; padding: 0; display: grid; gap: 6px; margin-top: 10px } .explain-col ul.examples li { display: flex; align-items: center; gap: 6px }
.explain-extra { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px }
.explain-extra > div { background: var(--soft); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px } .explain-extra p { margin: 4px 0 }
@media (max-width: 700px) { .explain-cols, .explain-extra { grid-template-columns: 1fr } }