/* ================= Coming soon =================
   Gleiches Blatt wie die Startseite. Das Monogramm wird konstruiert:
   Ring und Fadenkreuz, Mittellinien, Bemassung mit dem Startdatum,
   dann der Umriss, zuletzt laeuft die Tinte von unten ein. */

.bald ::selection{background:var(--blue);color:#fff}

.bald-rahmen{min-height:100svh;display:flex;padding:clamp(14px,min(2.6vw,3.2vh),34px)}
.bald-blatt{
  flex:1;display:flex;flex-direction:column;
  border:1px solid var(--blue-soft);
  padding:clamp(18px,min(3.4vw,4vh),44px);
}

.bald-mitte{
  flex:1;width:100%;max-width:620px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  /* oben Platz fuer den Titelblock, der am Handy ueber die ganze Breite reicht */
  padding:clamp(96px,14vh,124px) 0 clamp(14px,2.4vh,28px);
}
@media (min-width:900px){
  /* am Rechner steht der Titelblock seitlich, die Mitte darf nach oben */
  .bald-mitte{padding-top:clamp(12px,2vh,24px)}
}

/* ---------- Zeichen ---------- */
.bald-zeichen{width:clamp(120px,min(40vw,25vh),300px);height:auto;color:var(--blue);overflow:visible}
.k-mass text{font:500 8.5px/1 var(--fb);letter-spacing:.24em;fill:currentColor}

/* ---------- Titel ---------- */
.bald-titel{
  margin:clamp(10px,2vh,22px) 0 0;
  font-size:clamp(2.8rem,min(15.5vw,8.8vh),6rem);line-height:.84;letter-spacing:-.012em;
  text-transform:uppercase;color:var(--text);
}
.bald-titel span{display:block}
.bald-titel span:last-child{color:var(--blue)}

/* ---------- Uhr ---------- */
.bald-uhr{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  width:min(420px,100%);margin-top:clamp(16px,2.6vh,30px);
  border-block:1px solid var(--blue-soft);
}
.bald-uhr>div{padding:12px 2px 11px;border-left:1px solid var(--blue-hair)}
.bald-uhr>div:first-child{border-left:0}
.bald-uhr b{
  display:flex;justify-content:center;
  font-family:var(--fd);font-weight:800;font-stretch:78%;
  font-size:clamp(1.9rem,min(9.4vw,5.4vh),2.9rem);line-height:1;color:var(--text);
}
/* Feste Breite je Ziffer, damit beim Zaehlen nichts springt */
.bald-uhr .ziffer{display:inline-block;width:.6em;text-align:center}
.bald-uhr i{
  display:block;margin-top:7px;font:500 11px/1 var(--fb);letter-spacing:.22em;
  text-transform:uppercase;font-style:normal;color:var(--blue);
}

.bald .bald-dim{width:min(420px,100%);margin-top:clamp(14px,2.2vh,22px)}
.bald .bald-dim b{font-size:11px;letter-spacing:.24em}
.bald-start a{color:inherit;text-decoration:underline;text-underline-offset:.3em}

.bald-text{margin:clamp(14px,2.4vh,24px) 0 12px;max-width:34ch;color:var(--text-2);font-size:1rem;line-height:1.5}
.bald-ig{gap:12px}
.bald-ig-zeichen{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:3.2}

/* ---------- Fuss ---------- */
.bald-fuss{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;
  padding-top:16px;border-top:1px solid var(--blue-hair);
}
.bald-fuss p{margin:0;font:400 10.5px/1.5 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.bald-fuss .foot-by a{display:inline-flex;align-items:center;gap:8px;vertical-align:middle;
  color:var(--text-2);text-decoration:none;font-size:12.5px;letter-spacing:.12em}
.bald-fuss .foot-by a:hover{color:var(--blue)}
.bald-fuss .tw-mark{width:18px;height:18px}
.bald-recht a{color:inherit;text-decoration:none}
.bald-recht a:hover{color:var(--blue)}

@media (max-width:640px){
  .bald-fuss{justify-content:center;text-align:center}
}
/* Sehr schmale Handys: die Koordinaten stossen sonst an den Titelblock */
@media (max-width:360px){
  .bald .coord{font-size:9px;letter-spacing:.08em;left:30px}
  .bald .coord::before{margin-right:5px}
}
/* Kleine Handys wie das iPhone SE: Abstaende enger, damit der Knopf noch ins Bild passt */
@media (max-height:620px){
  .bald-titel{margin-top:8px}
  .bald-uhr{margin-top:12px}
  .bald-uhr>div{padding:9px 2px 8px}
  .bald .bald-dim{margin-top:10px}
  .bald-text{margin:10px 0 8px}
}

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion:no-preference){
  .k-ring,.k-kreuz,.zeichen-linie path,.tinte-zug{
    stroke-dasharray:var(--l) 9999;stroke-dashoffset:var(--l);
    animation:bald-zug var(--d,1s) var(--ease) var(--t,0s) forwards;
  }
  .k-ring{--t:.15s;--d:1.2s}
  .k-kreuz{--t:.45s;--d:.6s}
  .k-kreuz:nth-of-type(2){--t:.52s}
  .k-kreuz:nth-of-type(3){--t:.59s}
  .k-kreuz:nth-of-type(4){--t:.66s}
  .zeichen-linie path{--t:.8s;--d:1.1s}
  .zeichen-linie path+path{--t:.95s}
  .tinte-zug{--t:1.55s;--d:1s}
  @keyframes bald-zug{to{stroke-dashoffset:0}}

  .k-achsen,.k-aussen-ebene,.k-mass text{opacity:0;animation:bald-auf .9s var(--ease) forwards}
  .k-achsen{animation-delay:.5s}
  .k-aussen-ebene{animation-delay:.7s}
  .k-mass text{animation-delay:1.2s}
  .k-mass-linie{transform:scaleX(0);transform-box:fill-box;transform-origin:center;
    animation:bald-breit .9s var(--ease) .95s forwards}
  @keyframes bald-breit{to{transform:none}}

  /* Der Registrierring dreht sich langsam, solange die Seite offen ist */
  .k-aussen{transform-box:view-box;transform-origin:120px 120px;animation:bald-dreh 140s linear infinite}
  @keyframes bald-dreh{to{transform:rotate(360deg)}}

  .bald .tick,.bald .titleblock,.bald .coord{opacity:0;animation:bald-auf .8s var(--ease) forwards}
  .bald .titleblock{animation-delay:.3s}
  .bald .coord{animation-delay:.4s}

  .bald-titel span{opacity:0;transform:translateY(.4em);animation:bald-hoch .95s var(--ease) forwards}
  .bald-titel span:first-child{animation-delay:1.75s}
  .bald-titel span:last-child{animation-delay:1.85s}
  .bald-uhr,.bald-text,.bald-ig,.bald-fuss{opacity:0;animation:bald-auf .9s var(--ease) forwards}
  .bald-uhr{animation-delay:2.05s}
  .bald-dim .dim-line{transform:scaleX(0);animation:bald-breit .9s var(--ease) 2.15s forwards}
  .bald-dim .dim-line:first-child{transform-origin:right}
  .bald-dim .dim-line:last-child{transform-origin:left}
  .bald-dim b{opacity:0;animation:bald-auf .9s var(--ease) 2.2s forwards}
  .bald-text{animation-delay:2.3s}
  .bald-ig{animation-delay:2.38s}
  .bald-fuss{animation-delay:2.5s}

  @keyframes bald-auf{to{opacity:1}}
  @keyframes bald-hoch{to{opacity:1;transform:none}}

  /* Neue Ziffer kommt von oben und wird scharf */
  .bald-uhr .ziffer.neu{animation:bald-ziffer .55s var(--ease)}
  @keyframes bald-ziffer{from{opacity:0;transform:translateY(-.34em);filter:blur(3px)}}
}