/* Fest eingebettete Schrift statt Bootstraps System-Font: sieht auf jedem
   Geraet identisch aus, und die Null hat einen Punkt (klar von O
   unterscheidbar). Zwei Schnitte, damit font-weight:bold den echten
   Fett-Schnitt nutzt statt einer computergenerierten Verzerrung. */
@font-face {
    font-family: "JetBrains Mono";
    src: url("JetBrainsMono-Regular.woff") format("woff");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("JetBrainsMono-Bold.woff") format("woff");
    font-weight: 700;
    font-display: swap;
}

html, body {
    margin: 0;
    /* Bootstraps dunkles Theme ist dunkelgrau, nicht schwarz - hier fest
       auf schwarz ueberschrieben. */
    background-color: #000;
    font-family: "JetBrains Mono", monospace;
    /* laesst native Bedienelemente (Zeit-Eingabe) dunkel rendern */
    color-scheme: dark;
    /* GROESSERER der beiden seitlichen Insets, fuer beide Seiten gleich.
       Von #stage UND #bottom-bar genutzt, damit obere und untere Zeilen
       garantiert denselben Mittelpunkt haben (nicht zwei separate
       Berechnungen, die sonst leicht auseinanderlaufen koennten). */
    --safe-x: max(env(safe-area-inset-left), env(safe-area-inset-right));
}

body {
    /* "100vh" bezieht sich auf Mobilgeraeten auf die MAXIMALE Hoehe (als
       waere die Adressleiste ausgeblendet) - ist sie eingeblendet, ragt das
       Layout darunter hinaus und die untere Zeile verschwindet dahinter.
       "100dvh" passt sich live an die tatsaechlich sichtbare Hoehe an.
       Erst vh (Fallback fuer aeltere Browser), dann dvh (gewinnt in allen
       Browsern, die es verstehen - Zeile wird sonst ignoriert). */
    height: 100vh;
    height: 100dvh;
}

/* Tabs jetzt ganz oben auf der Seite - brauchen daher die vertikale
   Notch-Aussparung, die vorher #stage hatte. Horizontal dieselbe
   --safe-x-Variable wie #stage/#bottom-bar fuer konsistente Zentrierung. */
#top-bar {
    padding: calc(0.5rem + env(safe-area-inset-top)) var(--safe-x) 0;
}

#stage {
    min-height: 0;     /* erlaubt dem Flex-Item, kleiner als der Inhalt zu werden */
    min-width: 0;
    /* Links/rechts bewusst der GROESSERE der beiden Insets auf BEIDEN
       Seiten (--safe-x) - sonst sitzt die Notch im Querformat nur auf einer
       Seite und druesst die Mitte der Anzeige sichtbar zur anderen Seite. */
    padding-left: var(--safe-x);
    padding-right: var(--safe-x);
}

/* Uhr und Countdown skalieren gemeinsam: Beide haengen per em an der
   Schriftgroesse von #display, die fitDisplay() zur Laufzeit misst.
   Der vw-Wert ist nur der Fallback, falls JS nicht laeuft. */
#display {
    font-size: 18vw;
    line-height: 1;
}

/* Gemeinsamer Stil fuer die jeweils GROSSE Anzeige - das ist je nach Tab
   entweder die Uhr (#clock) oder der alleinstehende Timer (#timer-value). */
.big-display {
    padding: 0.05em 0.2em;
    font-size: 1em;
    font-weight: bold;
    white-space: nowrap;
    /* WICHTIG: font-size hier NICHT animieren. fitDisplay() misst und
       setzt genau dieses Feld per JS (zur Messung erst auf 100px, dann auf
       den finalen Wert) - eine Transition darauf kollidiert mit der eigenen
       Messung und fuehrte zu dem "erst riesig, dann schrumpft es"-Fehler. */
    transition: opacity 0.3s;
}


/* Start-Countdown unter der Uhr (nur im STARTZEIT-Tab sichtbar).
   Flache Struktur fuer konsistentes Rendering mit #clock. */
#start-value {
    display: block;
    font-size: 0.4em;
    margin-top: 0.3em;
    opacity: 0.75;
    white-space: nowrap;
}

/* Im Hochformat ist die Uhr breiten- statt hoehenbegrenzt (8 schmale
   Zeichen vs. viel Vertikalraum) - da bleibt Platz uebrig, den die
   Countdown-Zeile im Querformat nicht hat. Dort darf sie deshalb groesser
   sein, ohne die Uhr zu verdraengen (fitDisplay() bemisst die Uhr weiterhin
   primaer, der Sicherheitscheck greift erst, wenn es eng wird). */
@media (orientation: portrait) {
    #start-value {
        font-size: 0.65em;
    }
}

/* Untere Leiste: #controls zentriert sich von selbst (einziges Flex-Kind
   von #bottom-bar mit justify-content:center), der Vollbild-Button haengt
   per position:absolute rechts daneben - beeinflusst die Zentrierung von
   #controls dadurch nicht. Padding erhaelt dieselbe --safe-x-Variable wie
   #stage, damit obere und untere Zeile im Querformat denselben Mittelpunkt
   haben. */
#bottom-bar {
    padding: 1rem calc(1rem + var(--safe-x))
             calc(1rem + env(safe-area-inset-bottom)) calc(1rem + var(--safe-x));
}

#target-start,
#target-timer {
    width: 8em;
}

/* nur Groesse - kein display, sonst ueberstimmt diese Regel (ID+Element)
   die Sichtbarkeits-Regeln unten (nur ID) */
#fullscreen-btn img {
    width: 1.1rem;
    height: 1.1rem;
}

/* Im Vollbild das "Verkleinern"-Symbol zeigen.
   Die Regeln fuer :fullscreen und :-webkit-full-screen muessen getrennt
   stehen: kennt ein Browser einen Selektor der Liste nicht, verwirft er
   sonst die komplette Regel. */
#icon-enter {
    display: block;
}
#icon-exit {
    display: none;
}

:fullscreen #icon-enter {
    display: none;
}
:fullscreen #icon-exit {
    display: block;
}

:-webkit-full-screen #icon-enter {
    display: none;
}
:-webkit-full-screen #icon-exit {
    display: block;
}