/* Wartungsanzeige der Verkaufsseite: Banner ganz oben ueber der Navigation und Hinweis
   fuer die Wartungszeit. Nur Farben aus den Design-Tokens (styles.css). */

[hidden]{display:none !important}

/* Volle Breite, im Lauf der Seite ganz oben: der Balken rollt mit dem Inhalt weg und schiebt
   ihn nach unten (kein Overlay). Die feste Navigation (.fixed-top) rutscht um den Teil des
   Balkens nach unten, der noch im Bild steht (--tf-wartung-hoehe, in wartung.js gesetzt).
   Warnton: der Amber-Ton der Site, dezent in den Hintergrund gemischt. */
.tf-wartung-a{display:flex;align-items:center;gap:.5rem;
  box-sizing:border-box;width:100%;padding:.65rem .5rem .65rem clamp(.75rem,3vw,1.5rem);
  font-size:.95rem;line-height:1.45;color:var(--ink);background:var(--bg);border-bottom:1px solid var(--line-2)}
@supports (background: color-mix(in srgb, red 50%, white)){
  .tf-wartung-a{background:color-mix(in srgb, var(--amber) 14%, var(--bg))}
}
.fixed-top{top:var(--tf-wartung-hoehe,0px)}
.tf-wartung-inhalt{display:flex;align-items:flex-start;gap:.6rem;flex:1 1 auto;min-width:0}
.tf-wartung-symbol{flex-shrink:0;display:inline-flex;margin-top:.12em;color:var(--amber)}
.tf-wartung-symbol svg{width:1.15em;height:1.15em}
.tf-wartung p{margin:0;min-width:0;overflow-wrap:anywhere}
.tf-wartung-zu{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin:-.5rem -.25rem -.5rem 0;padding:0;border:0;border-radius:999px;
  background:transparent;color:inherit;cursor:pointer}
.tf-wartung-zu:hover{background:color-mix(in srgb, currentColor 12%, transparent)}
.tf-wartung-zu:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Wartungsseite: Kopf mit Logo, darunter zentriert eine Karte. Auf allen Auftritten gleich aufgebaut.
   Gilt fuer die Ersatzseite (tfWartungErsatz() in wartung.js) und die 503-Seite (inc/wartung.php).
   Nur Tokens der Verkaufsseite (styles.css). */
.tf-wartung-kopf{padding:.85rem clamp(1rem,3vw,2rem);background:var(--bg);border-bottom:1px solid var(--line)}
.tf-wartung-marke{display:inline-flex;align-items:center;gap:.6rem;font-weight:800;font-size:var(--fs-lg);color:var(--ink);text-decoration:none}
.tf-wartung-marke img{width:34px;height:34px}
.tf-wartung-seite{min-height:70vh;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;padding:clamp(2rem,6vw,4rem) 1rem}
.tf-wartung-karte{width:100%;max-width:34rem;box-sizing:border-box;padding:clamp(1.75rem,4vw,2.5rem) clamp(1.25rem,3vw,2rem);text-align:center;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.tf-wartung-karte-symbol{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:1rem;border-radius:999px;background:var(--brand-soft);color:var(--brand)}
.tf-wartung-karte-symbol svg{width:28px;height:28px}
.tf-wartung-karte h1{margin:0 0 .6rem;font-size:var(--fs-2xl);font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.tf-wartung-karte p{margin:0 0 .5rem;font-size:var(--fs-base);line-height:1.55;color:var(--ink-2)}
.tf-wartung-karte .tf-wartung-dank{margin:1.25rem 0 0;font-size:var(--fs-sm);color:var(--muted)}
/* Die Ueberschrift bekommt den Fokus, damit Vorlesegeraete sie ansagen. Sie ist kein Bedienelement,
   darum kein Fokusrahmen. Echte Bedienelemente behalten ihren Rahmen. */
h1.tf-wartung-titel:focus{outline:none}