/*
 * Timer – Feld in Tinte. Links die Anzeige (orange Scheibe, Restzeit in der Mitte), rechts die Bedienung (330 px).
 * Gesperrt: nur die Anzeige über die ganze Breite. Unter 900 px oder hochkant: alles untereinander.
 */

.timer {
    min-height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(240px, 30vw, 330px);
    gap: clamp(20px, 3vw, 36px);
    padding: clamp(16px, 4.9vh, 40px) clamp(16px, 3.4vw, 40px) clamp(16px, 4.4vh, 36px) clamp(20px, 4.7vw, 56px);
}

/* Einblenden nur für Anzeige und Bedienung – Schloss und „Fertig“ bleiben am Bildschirm fest */
.timer__anzeige, .timer__bedienung { animation: inhalt-einblenden .38s ease-out .08s backwards; }

/* ---------- Anzeige: Scheibe so groß, wie Platz ist ---------- */

.timer__anzeige {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Das SVG liegt absolut darin – so bestimmt allein der freie Platz die Größe (kein Scrollen) */
.timer__scheibe { position: relative; flex: 1 1 0; min-height: 0; }
.timer__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.timer__svg:focus-visible { outline: none; }
.timer__svg:focus-visible .timer__blatt { stroke: var(--tuerkis); }
.timer.ist-ziehbar .timer__svg { cursor: grab; }
.timer.wird-gedreht .timer__svg { cursor: grabbing; }

/* Maße in SVG-Einheiten (Scheibe 236 breit) */
.timer__blatt { fill: var(--tinte-flaeche); stroke: var(--tinte-knopf); stroke-width: 3; transition: stroke .2s; }
.timer.wird-gedreht .timer__blatt { stroke: var(--tinte-leise); }   /* beim Drehen: Rand leuchtet auf */
.timer__striche { transition: transform .35s ease-out; }
.timer.wird-gedreht .timer__striche { transition: none; }   /* beim Drehen direkt unter dem Finger */
.timer__strich { stroke: var(--tinte-leise); stroke-width: 1.4; stroke-linecap: round; }
.timer__strich--gross { stroke: var(--creme); stroke-width: 3; }
/* Keil: fester Kreis mit breitem Rand – nur die Strichlänge ändert sich, darum wackelt nichts */
.timer__keil { fill: none; stroke: var(--orange); stroke-width: 80; }
.timer__nabe { fill: var(--tinte); stroke: var(--tinte-knopf); stroke-width: 2; }
.timer__beschriftung {
    fill: var(--tinte-leise);
    font-family: var(--schrift-text);
    font-size: 10px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
}
.timer__rest {
    fill: var(--creme);
    font-family: var(--schrift-titel);
    font-size: 29px;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    text-anchor: middle;
    dominant-baseline: central;
}
.timer__rest--lang { font-size: 24px; }   /* 100:00 bis 120:00 */

/* ---------- Bedienung ---------- */

.timer__bedienung {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.timer__haupt { flex: none; height: clamp(56px, 10.7vh, 88px); font-size: clamp(22px, 3.4vh, 28px); gap: 12px; }
.timer__haupt .knopf__symbol { width: 26px; height: 26px; }
/* Symbol im Hauptknopf: ❚❚ beim Laufen, ▶ in der Pause */
.timer__haupt-pause, .timer__haupt-weiter { display: inline-flex; }
.timer.ist-pause .timer__haupt-pause,
.timer:not(.ist-pause) .timer__haupt-weiter { display: none; }

/* Feste Zeiten, die sofort starten (z. B. Zähneputzen 3 Min) */
.timer__vorlage { flex: none; height: clamp(56px, 8.5vh, 72px); padding: 0 16px; gap: 12px; font-size: clamp(19px, 2.8vh, 23px); }
.timer__vorlage .knopf__symbol { width: 30px; height: 30px; }
.timer__vorlage-zeit { font-size: .82em; color: var(--tinte-leise); white-space: nowrap; }

.timer__nebenknoepfe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.timer__nebenknoepfe .knopf { height: 60px; padding: 0 8px; font-size: 20px; }

.timer__unten { margin-top: auto; display: grid; }
.timer__unten .knopf { height: clamp(48px, 6.8vh, 56px); padding: 0 10px; }
.timer__unten .knopf__symbol { width: 20px; height: 20px; }

/* ---------- Gesperrt ---------- */

body.ist-gesperrt .timer { grid-template-columns: minmax(0, 1fr); }
body.ist-gesperrt .timer__bedienung { display: none !important; }

.timer__schloss {
    position: fixed;
    z-index: 5;
    right: 48px;
    bottom: 48px;
    width: 108px;
    height: 108px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--petrol-tief);
    color: var(--creme);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.timer__schloss-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.timer__schloss-ring circle {
    fill: none;
    stroke: var(--tuerkis);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset .25s ease-out;       /* Loslassen: Ring läuft zurück */
}
.timer__schloss.haelt .timer__schloss-ring circle { stroke-dashoffset: 0; transition: stroke-dashoffset 3s linear; }
.timer__schloss-symbol { width: 30px; height: 30px; }
.timer__schloss-text { font-family: var(--schrift-titel); font-size: 13px; font-weight: 700; }

/* ---------- Schmal oder hochkant: untereinander ---------- */

@media (max-width: 599px), (orientation: portrait) {
    .timer { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; gap: 28px; }
    .timer__scheibe { flex: none; width: min(100%, 56vh); aspect-ratio: 1; margin: 0 auto; }
    body.ist-gesperrt .timer__scheibe { width: min(100%, 84vh); }
    .timer__unten { margin-top: 10px; }
}
@media (max-width: 720px) {
    .timer { padding: 20px 16px; }
    .timer__unten .knopf { padding: 0 6px; gap: 6px; }
    .timer__vorlage { padding: 0 10px; gap: 8px; font-size: 19px; }
    .timer__vorlage .knopf__symbol { width: 26px; height: 26px; }
    .timer__schloss { right: 24px; bottom: 24px; }
}