/* Seite fuer dedizierte Server. Zusatz zu startseite.css, 01.09.2026.
 *
 * Die Seite benutzt die Bausteine der Startseite: .st-hero, .st-sec,
 * .st-mitte, .st-karten/.st-karte, .st-merkmale, .st-fragen, .st-schluss.
 * Die Spaltenvarianten .st-drei und .st-zwei stehen ebenfalls dort.
 *
 * Hier steht nur, was die anderen beiden Seiten nicht brauchen: der
 * Ladezustand des Bestands. Der Bestand kommt erst im Browser aus
 * dedicated-api.php, deshalb muss die Stelle vorher schon Platz haben und
 * darf nicht als Sprung erscheinen.
 */

/* ------------------------------------------------------------ Ladezustand */
/* Platzhalterkarten in der Form der echten Karten. Ein Text wie "Lade ..."
   springt beim Austausch, weil er eine andere Hoehe hat als das Ergebnis;
   ein Platzhalter derselben Form nicht. Gleiche Bauweise wie im Panel. */
.dd-skel { pointer-events: none; }
.dd-skel__b { background: var(--border); border-radius: 6px; }
/* Der Schimmer laeuft ueber die Flaeche, statt sie blinken zu lassen.
   Blinken zieht den Blick staerker an als der Inhalt, der danach kommt. */
.dd-skel__b { position: relative; overflow: hidden; }
.dd-skel__b::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 9%, transparent), transparent);
  transform: translateX(-100%); animation: dd-schimmer 1.4s ease-in-out infinite; }
@keyframes dd-schimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .dd-skel__b::after { animation: none; }
}

/* Meldung, wenn der Bestand leer ist oder das Bestandssystem nicht antwortet.
   Nimmt die ganze Rasterbreite ein, damit sie mittig steht und nicht als
   erste von vier Spalten. */
.dd-meldung { grid-column: 1 / -1; text-align: center; padding: 40px 22px;
  border: 1px dashed var(--border-strong); border-radius: var(--st-rk); }
.dd-meldung h3 { margin-bottom: 8px; }
.dd-meldung p { max-width: 46ch; margin: 0 auto 20px; }

/* Zeile unter dem Preis: Einrichtungsentgelt, wenn eines anfaellt. Steht
   bewusst am Preis und nicht im Kleingedruckten. */
.dd-setup { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }