/* Gemeinsame Gestaltung der Wartungsseiten von Core Family Law.
   Farben stammen aus CFL_Logo_final_2026.svg. */
:root{
  --navy:#162028;
  --gold:#c79a2b;
  --grau:#848484;
  --hell:#d7d9da;
  --hell-leise:#9ea2a5;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100svh;
  display:flex;
  align-items:center;
  align-items:safe center;   /* verhindert Abschneiden oben bei kleinen Fenstern */
  justify-content:center;
  padding:clamp(1.25rem,3.5vw,2.5rem) 1.25rem;
  background:var(--navy);
  color:var(--hell);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}
/* Hintergrundfoto — nur leicht abgedunkelt, damit es sichtbar bleibt.
   Die Lesbarkeit kommt nicht vom Schleier, sondern von der Textfläche. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(180deg,rgba(22,32,40,.30) 0%,rgba(22,32,40,.18) 45%,rgba(22,32,40,.42) 100%),
    url("eingang-klein.jpg");
  background-size:cover;
  background-position:center;
  z-index:-1;
}
@media (min-width:900px){
  body::before{background-image:
    linear-gradient(180deg,rgba(22,32,40,.26) 0%,rgba(22,32,40,.14) 45%,rgba(22,32,40,.38) 100%),
    url("eingang.jpg");}
}

.blatt{
  width:100%;
  max-width:40rem;
  text-align:center;
  background:rgba(18,27,34,.90);
  border:1px solid rgba(215,217,218,.10);
  border-radius:.5rem;
  padding:clamp(1.75rem,4vw,2.75rem) clamp(1.5rem,4vw,2.75rem);
  box-shadow:0 1.5rem 4rem rgba(8,13,17,.45);
}
@supports (backdrop-filter:blur(1px)){
  .blatt{background:rgba(18,27,34,.78);backdrop-filter:blur(14px) saturate(115%)}
}

.logo{width:min(100%,22rem);height:auto;margin:0 auto clamp(1.5rem,4vw,2.25rem);display:block}

h1{
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  font-weight:400;
  font-size:clamp(1.5rem,1.05rem + 2.1vw,2.4rem);
  line-height:1.25;
  letter-spacing:.005em;
  margin:0 0 .85rem;
  color:#fff;
}
.unterzeile{
  margin:0 auto clamp(1.75rem,4vw,2.25rem);
  max-width:32rem;
  font-size:clamp(.95rem,.9rem + .25vw,1.075rem);
  line-height:1.65;
  color:var(--hell-leise);
}

/* Zähler */
.zaehler{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.5rem,2vw,1rem);
  max-width:32rem;
  margin:0 auto clamp(1.5rem,3.5vw,2rem);
  list-style:none;
  padding:0;
}
.zaehler li{
  border:1px solid rgba(215,217,218,.18);
  border-radius:.35rem;
  padding:clamp(.7rem,2.4vw,1.05rem) .25rem;
  background:rgba(22,32,40,.42);
}
.zahl{
  display:block;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  font-size:clamp(1.55rem,1.05rem + 2.4vw,2.6rem);
  line-height:1.05;
  font-weight:300;
  color:#fff;
}
.einheit{
  display:block;
  margin-top:.45rem;
  font-size:clamp(.62rem,.58rem + .18vw,.72rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--hell-leise);
}

.termin{
  margin:0 0 clamp(1.75rem,4vw,2.25rem);
  font-size:clamp(.9rem,.86rem + .2vw,1rem);
  letter-spacing:.02em;
  color:var(--hell);
}
.termin strong{font-weight:600;color:#fff}

/* Kontakt */
.kontakt{
  border-top:1px solid rgba(215,217,218,.16);
  padding-top:clamp(1.25rem,3vw,1.6rem);
}
.kontakt p{
  margin:0 0 .7rem;
  font-size:.86rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--hell-leise);
}
.kontakt a{
  display:inline-block;
  font-size:clamp(1rem,.94rem + .4vw,1.2rem);
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid rgba(199,154,43,.45);
  padding-bottom:.15rem;
  transition:color .18s ease,border-color .18s ease;
  overflow-wrap:anywhere;
}
.kontakt a:hover,.kontakt a:focus-visible{
  color:#ddb14b;
  border-bottom-color:#ddb14b;
}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* Fußzeile mit Copyright und Seitenverweisen */
.fusszeile{
  margin:clamp(1.5rem,3.5vw,2rem) 0 0;
  font-size:.78rem;
  letter-spacing:.06em;
  color:rgba(158,162,165,.75);
}
.fusszeile a{
  color:rgba(158,162,165,.9);
  text-decoration:none;
  border-bottom:1px solid rgba(158,162,165,.3);
  transition:color .18s ease,border-color .18s ease;
}
.fusszeile a:hover,.fusszeile a:focus-visible{
  color:var(--gold);
  border-bottom-color:rgba(199,154,43,.5);
}
.fusszeile .trenner{margin:0 .55rem;opacity:.5}

/* Auf sehr schmalen Geräten passt „SEKUNDEN" sonst nicht in die Kachel */
@media (max-width:430px){
  .einheit{letter-spacing:.06em;font-size:.58rem}
  .zaehler{gap:.4rem}
  .zaehler li{padding:.7rem .15rem}
}

/* Zustand nach dem Start */
.los .zaehler,.los .termin{display:none}
.los .unterzeile{margin-bottom:clamp(1.75rem,4vw,2.25rem)}

/* ---- Textseiten (Impressum) ---- */
.blatt--text{max-width:46rem;text-align:left}
.blatt--text .logo{margin-bottom:clamp(1.75rem,4vw,2.5rem)}
.blatt--text h1{
  text-align:center;
  font-size:clamp(1.35rem,1.05rem + 1.4vw,1.9rem);
  margin-bottom:clamp(1.75rem,4vw,2.5rem);
}
.rechtstext{
  font-size:.95rem;
  line-height:1.7;
  color:var(--hell);
}
.rechtstext h2{
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  font-weight:400;
  font-size:1.05rem;
  letter-spacing:.02em;
  color:#fff;
  margin:2rem 0 .6rem;
  padding-top:1.25rem;
  border-top:1px solid rgba(215,217,218,.14);
}
.rechtstext h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.rechtstext p{margin:0 0 .9rem}
.rechtstext p:last-child{margin-bottom:0}
.rechtstext ul{
  margin:0 0 .9rem;
  padding-left:1.15rem;
  list-style:none;
}
.rechtstext li{
  position:relative;
  margin-bottom:.3rem;
}
.rechtstext li::before{
  content:"–";
  position:absolute;
  left:-1.15rem;
  color:var(--gold);
}
.rechtstext a{
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid rgba(199,154,43,.4);
  overflow-wrap:anywhere;
}
.rechtstext a:hover,.rechtstext a:focus-visible{color:#ddb14b;border-bottom-color:#ddb14b}
.rechtstext .leise{color:var(--hell-leise);font-size:.88rem}
.blatt--text .fusszeile{
  text-align:center;
  border-top:1px solid rgba(215,217,218,.16);
  padding-top:clamp(1.25rem,3vw,1.6rem);
}

@media (prefers-reduced-motion:no-preference){
  .blatt{animation:auf .7s ease-out both}
  @keyframes auf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}