/* Startseite (A.0.63.0) — dein Auftrag 04.10., Punkt 4: „Die Startseite gameghost.de überarbeiten, möglichst ansprechend“.
   Alles darauf ist ein Ding aus dem Spiel: das Firmenschild (wie firmenschild() in ui/logo.js), das Chefbüro mit
   seinem Schild, Pflegekraft und Patientin mit Krankheitszeichen, der Rettungswagen, die Räume mit ihren Wandschildern,
   die Berufe, echte Krankheiten, die Gesichter des Tagesberichts und der Stadtkurier. Die Wandschilder nutzen die Klassen
   des Spiels (spiel.css .schild-text.firmenschild, .aushang-titel, .tafel-kopf-text) — die rechnen in cqw, darum ist jedes
   Bild ein eigener Container. Bis A.0.62.0 stand das Titelbild in spiel.css (goldener Schriftzug auf Braun). */

.titel {
  --nacht: #0c414c; --petrol: #0e5b6a; --tuerkis: #1fa595; --mint: #38c9b4;
  --papier: #fffdf6; --tinte: #1d2a36; --rand-blase: #2a3a4a;
  --pergament: #f4e8c8; --pergament2: #e2cf9c; --holz: #6b4a22;
  --gold-hell: #e8b43a; --gold-tief: #b8891e;
  --hell: #eaf6f3; --leise: #a9d3cc;
  min-height: 100dvh; color: var(--hell); font-weight: 600;
  /* Petrol mit feinen Fliesenfugen wie an den Wänden der Klinik */
  background-color: var(--nacht);
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 44px 44px;
}
.t-breite { width: 100%; max-width: 74rem; margin: 0 auto; padding: 0 16px; }
.titel a { color: var(--mint); }
.titel :focus-visible { outline: 3px solid var(--gold-hell); outline-offset: 2px; }

/* ── Kopf: das Firmenschild, eine Acrylplatte auf vier Abstandhaltern ─────────────────────────────── */
.t-kopf { padding: 22px 0 18px; display: flex; justify-content: center; }
.t-schild { --punkt: radial-gradient(circle, #e9eef2 0 3px, #8d98a2 3.5px 4.5px, transparent 5px);
  display: inline-flex; align-items: center; gap: 14px; padding: 10px 26px 10px 18px; border-radius: 8px;
  background: var(--punkt) 6px 6px / 12px 12px no-repeat, var(--punkt) calc(100% - 6px) 6px / 12px 12px no-repeat,
    var(--punkt) 6px calc(100% - 6px) / 12px 12px no-repeat, var(--punkt) calc(100% - 6px) calc(100% - 6px) / 12px 12px no-repeat,
    linear-gradient(172deg, #ffffff 0%, #f3f7f8 55%, #e4ebee 100%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .38), 0 0 0 1px rgba(120, 132, 142, .55), inset 0 2px 0 rgba(255, 255, 255, .95); }
.t-schild .logo { width: clamp(44px, 9vw, 64px); height: auto; flex: none; filter: drop-shadow(0 2px 2px rgba(0, 40, 50, .25)); }
.t-schild .firma { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.t-schild .firma b { font: 700 clamp(2.1rem, 7vw, 3.1rem) / .95 var(--zier); color: #0e5b6a; letter-spacing: .01em; }
.t-schild .firma b i { font-style: normal; color: #1fa595; }
.t-schild .firma small { font: 800 clamp(.6rem, 1.6vw, .78rem) / 1 var(--schrift); letter-spacing: .55em; margin-right: -.55em; padding-left: 2px; color: #5b7380; }

/* ── Oben: das Chefbüro als Bühne, rechts die Anmeldung ───────────────────────────────────────────── */
.t-oben { display: grid; gap: 28px; align-items: start; padding-bottom: 18px; }
@media (min-width: 960px) { .t-oben { grid-template-columns: minmax(0, 1fr) 21.5rem; gap: 34px; } }

.t-szene { position: relative; container-type: inline-size; }
.t-bild { position: relative; aspect-ratio: 16 / 9; container-type: inline-size; overflow: hidden; border-radius: 10px;
  background: #2a2a2a; border: 5px solid #f3f7f8; box-shadow: 0 0 0 1px #2a3a4a, 0 14px 34px rgba(0, 0, 0, .45); }
.t-bild > .t-hg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* frei gestellte Dinge und Leute (OP): Lage in % des Bilds, von hinten nach vorn */
.t-bild > .t-ding { position: absolute; display: block; object-fit: contain; }

/* Pflegekraft und Patientin stehen VOR dem Bild auf dem Gehweg; die Straße mit dem Rettungswagen darunter */
.t-vorn { position: absolute; inset: 0; pointer-events: none; }
.t-pflege { position: absolute; left: 1.2cqw; bottom: 8.4cqw; height: 31cqw; width: auto; filter: drop-shadow(0 .6cqw .5cqw rgba(0, 0, 0, .35)); }
.t-patientin { position: absolute; right: 2.2cqw; bottom: 8.4cqw; height: 29cqw; aspect-ratio: 174 / 640; }
.t-patientin > img { height: 100%; width: auto; display: block; filter: drop-shadow(0 .6cqw .5cqw rgba(0, 0, 0, .35)); }
/* das Krankheitszeichen über dem Kopf: weißer Kreis wie im Raum (spiel.css .stueck.zeichen) */
.t-zeichen { position: absolute; left: 50%; bottom: calc(100% + .6cqw); width: 5.4cqw; aspect-ratio: 1; transform: translateX(-56%);
  border-radius: 50%; background: rgba(255, 255, 255, .94); border: .18cqw solid #2a3a4a; box-shadow: 0 .15cqw .4cqw rgba(0, 0, 0, .35); }
.t-zeichen img { width: 100%; height: 100%; box-sizing: border-box; padding: 16%; object-fit: contain; display: block; }
/* der Gruß der Pflegekraft: eine Sprechblase wie im Spiel (spiel.css .sprechblase, dort auf der Bühne) */
.t-gruss { left: 9.6cqw; bottom: 41cqw; max-width: 25cqw; font-size: clamp(12px, 1.75cqw, 19px); animation: none; }
.t-gruss .zipfel { left: 6%; width: 22%; height: 2.4cqw; }

.t-strasse { position: relative; height: 11cqw; overflow: hidden; border-radius: 0 0 8px 8px;
  /* oben der Gehweg mit Bordstein, darunter die Fahrbahn mit Mittelstreifen */
  background:
    linear-gradient(#cfd8d6 0 2.6cqw, #8f9c9a 2.6cqw 3.1cqw, transparent 3.1cqw),
    repeating-linear-gradient(90deg, #f1f1e8 0 3cqw, transparent 3cqw 6cqw) 0 6.8cqw / 100% .35cqw no-repeat,
    linear-gradient(#454d50, #3a4144); }
.t-wagen { position: absolute; bottom: .55cqw; left: -22cqw; height: 6.9cqw; width: auto; animation: t-fahrt 13s linear infinite; }
@keyframes t-fahrt { 0% { left: -22cqw; } 72% { left: 104cqw; } 100% { left: 104cqw; } }
@media (prefers-reduced-motion: reduce) { .t-wagen { animation: none; left: 58cqw; } }

/* ── Die Anmeldung: eine Pergament-Tafel wie im Spiel (tafel.css .tafel) ───────────────────────────── */
.t-rechts { display: grid; gap: 16px; }
.t-unter { font-size: 1.12rem; line-height: 1.45; color: var(--hell); max-width: 34rem; }
.t-tafel { color: #2a1d12; border-radius: 10px; border: 3px solid var(--holz); overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, var(--pergament), var(--pergament2)); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.t-tafel-kopf { padding: 9px 16px; background: linear-gradient(#6b4a22, #4a3216); color: #f5eddc; font: 700 1.08rem / 1.2 var(--zier); letter-spacing: .02em; }
.t-tafel-inhalt { padding: 16px; display: grid; gap: 12px; }
.anmelde-form { display: grid; gap: 12px; }
.anmelde-form label { display: grid; gap: 4px; font: 700 .9rem / 1.2 var(--schrift); color: #5a4630; }
.anmelde-form input { font: 600 1.05rem var(--schrift); padding: 9px 11px; border-radius: 6px; border: 1px solid #a8885a;
  background: #fffdf6; color: #2a1d12; }
.anmelde-form input:focus { outline: 2px solid var(--gold-tief); outline-offset: 1px; }
.titel-knopf { font: 700 1.05rem / 1.2 var(--zier); letter-spacing: .02em; padding: 11px 16px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--gold-tief); background: linear-gradient(var(--gold-hell), var(--gold-tief)); color: #2a1a08;
  box-shadow: 0 2px 0 #7a5a12; }
.titel-knopf:hover:not(:disabled) { filter: brightness(1.08); }
.titel-knopf:disabled { opacity: .55; cursor: wait; }
.titel-knopf.leise { background: transparent; color: #5a4630; border-color: #a8885a; box-shadow: none; }
.anmelde-meldung { color: #a3271c; font-weight: 700; }
.titel-hinweis { font-size: .92rem; line-height: 1.4; color: #6a5638; }
/* Registrierung (A.0.65.0): Haken für AGB/Datenschutz, die Falle für Programme, der Wechsel als Textknopf, Erfolg in Grün */
.anmelde-form .t-haken { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 9px; font-weight: 600; line-height: 1.35; }
.anmelde-form .t-haken input { width: 18px; height: 18px; margin: 1px 0 0; padding: 0; accent-color: var(--gold-tief); }
.anmelde-form .t-haken a { color: #0e5b6a; }
.t-falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.t-link { font: inherit; font-weight: 800; color: #0e5b6a; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.anmelde-meldung.gut { color: #1f5a33; background: rgba(31, 165, 149, .12); border-left: 4px solid var(--tuerkis); padding: 8px 10px; border-radius: 4px; line-height: 1.4; }

/* ── Abschnitte ──────────────────────────────────────────────────────────────────────────────────── */
.t-abschnitt { padding-top: 44px; padding-bottom: 8px; }   /* nur oben/unten: die Seiten setzt .t-breite */
.t-abschnitt > h2 { font: 600 clamp(1.6rem, 4vw, 2.15rem) / 1.15 var(--zier); color: #fff; margin-bottom: 8px; }
.t-abschnitt > p { max-width: 62ch; color: var(--leise); font-size: 1.05rem; line-height: 1.5; margin-bottom: 20px; }

/* So führst du dein Haus: gerahmte Raumbilder mit ihren Wandschildern */
.t-raeume { display: grid; gap: 26px 30px; }
@media (min-width: 760px) { .t-raeume { grid-template-columns: 1fr 1fr; } }
.t-raum figcaption { margin-top: 12px; max-width: 46ch; }
.t-raum h3 { font: 600 1.28rem / 1.2 var(--zier); color: #fff; margin-bottom: 4px; }
.t-raum figcaption p { color: var(--leise); line-height: 1.45; }
/* Spalten der Aushänge und der Personaltafel: Lage wie im Spiel (feste.js MAKLER_BILD / PERSONAL_BILD) */
.t-spalte { position: absolute; }

/* der Computer: das Statistik-Programm über dem Desktop (wie ui/pc.js, seit A.0.79.0 im neuen Kleid aus css/pc.css: Leiste in
   Klinik-Petrol mit dem Schild der Klinik, offene Gruppe mit ihren Seiten, deine Zeile gold) */
.t-pc { position: absolute; left: 8%; top: 8%; width: 84%; height: 76%; display: flex; flex-direction: column; overflow: hidden;
  border-radius: .9cqw; background: #edf1f4; color: #13294b; box-shadow: 0 1.2cqw 3cqw rgba(0, 0, 0, .35); font-size: 1.9cqw; }
.t-pc-kopf { display: flex; align-items: center; gap: .6em; padding: .4em .8em; background: linear-gradient(#f7f9fb, #e4e9ee); border-bottom: 1px solid #c6cfd9; }
.t-pc-kopf b { font-weight: 800; }
.t-pc-menue { display: flex; gap: .9em; margin-left: auto; color: #4b5a70; font-size: .85em; }
.t-pc-menue i { font-style: normal; }
.t-pc .pc-logo { width: 1.5em; height: 1.5em; }
.t-pc-koerper { flex: 1 1 auto; display: flex; min-height: 0; }
.t-pc-nav { flex: none; width: 30%; padding: .5em .4em; background: linear-gradient(180deg, #0f4349, #0d3a3f 60%); color: #d3ebe7; display: grid;
  align-content: start; gap: .12em; }
.t-pc-nav span { padding: .2em .5em; border-radius: .35em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-pc-nav .t-pc-klinik { margin-bottom: .3em; padding: .35em .5em; background: rgba(255, 255, 255, .08); color: #fff; font: 600 1em / 1.2 var(--zier); }
.t-pc-nav .gruppe { font-weight: 700; }
.t-pc-nav .unter { margin-left: .8em; padding-left: .6em; border-left: 1px solid rgba(255, 255, 255, .16); border-radius: 0 .35em .35em 0; color: #b7d7d2; }
.t-pc-nav span.an { background: #e6f5f1; color: #0b3338; font-weight: 800; }
.t-pc-seite { flex: 1 1 auto; padding: .7em 1em; }
.t-pc-seite h4 { font: 600 1.25em / 1.2 var(--zier); color: #13294b; margin-bottom: .5em; }
.t-pc-zeile { display: grid; grid-template-columns: 1.4em 8.6em 1fr; align-items: center; gap: .5em; padding: .22em .3em; border-radius: .3em; background: #fff; margin-bottom: .12em; }
.t-pc-zeile i { display: block; height: .6em; border-radius: .3em; background: #008a78; width: var(--w); }
.t-pc-zeile.du { background: #fff4d9; box-shadow: inset .18em 0 0 #c47f00; font-weight: 800; }
.t-pc-zeile.du i { background: #c47f00; }
.t-pc-leiste { position: absolute; left: 0; right: 0; bottom: 0; height: 8%; background: rgba(18, 24, 33, .78); color: #f2f6fa;
  display: flex; align-items: center; justify-content: flex-end; padding: 0 2.4cqw; font: 700 1.7cqw / 1 var(--schrift); }

/* Zehn Berufe: ein Teamfoto vor der Wand des Personalbüros */
.t-team { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 6px; padding: 26px 18px 18px; border-radius: 12px;
  background: #eef3f1; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
@media (min-width: 860px) { .t-team { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.t-team figure { display: grid; justify-items: center; align-content: end; gap: 8px; }
.t-team img { height: clamp(150px, 20vw, 220px); width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .22)); }
.t-team figcaption { font: 700 .86rem / 1.15 var(--schrift); color: #24414a; text-align: center; hyphens: auto; overflow-wrap: anywhere; max-width: 100%; }

/* Heute im Wartezimmer: wer da sitzt, mit Krankheitszeichen, und die Beschwerden wie in der Akte (Schreibmaschine,
   Heftrand — tafeln/bogen.js patientenbogen) */
.t-warten { display: grid; gap: 22px 26px; list-style: none; }
@media (min-width: 640px) { .t-warten { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .t-warten { grid-template-columns: 1fr 1fr 1fr; } }
.t-warten li { display: grid; grid-template-columns: 76px 1fr; gap: 18px; align-items: start; }
.t-gesicht { position: relative; width: 76px; height: 76px; }
.t-gesicht > img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .35); }
.t-gesicht .t-zeichen { left: auto; right: -12px; bottom: auto; top: -10px; width: 36px; transform: none; border-width: 2px; }
.t-akte { background: #fff; color: #1d1d1d; border-radius: 3px; padding: 10px 14px 12px 26px; box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
  background-image: linear-gradient(90deg, transparent 14px, #e3a1a1 14px 15.5px, transparent 15.5px); }
.t-akte b { display: block; font: 600 1.08rem / 1.2 var(--zier); color: var(--petrol); }
.t-akte small { display: block; margin: 5px 0 2px; font: 700 .72rem / 1 var(--schrift); color: #7b7b7b; }
.t-akte p { font: 400 .95rem / 1.4 'Courier Prime', 'Courier New', monospace; }

/* Um Mitternacht kommt der Tagesbericht: drei Tage zur Wahl, nur CSS (:has) — ohne :has bleibt der gute Tag stehen */
.t-bericht { color: #2a1d12; border-radius: 10px; border: 3px solid var(--holz); background: radial-gradient(ellipse at 50% 40%, var(--pergament), var(--pergament2));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4); max-width: 46rem; overflow: hidden; }
.t-bericht-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px;
  background: linear-gradient(#6b4a22, #4a3216); color: #f5eddc; }
.t-bericht-kopf h3 { font: 700 1.08rem / 1.2 var(--zier); }
.t-wahl { display: flex; gap: 6px; flex-wrap: wrap; }
.t-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.t-wahl label { cursor: pointer; padding: 5px 12px; border-radius: 16px; font: 700 .92rem / 1.2 var(--schrift); color: #f5eddc;
  border: 1px solid rgba(245, 237, 220, .45); }
.t-wahl input:checked + label { background: linear-gradient(var(--gold-hell), var(--gold-tief)); color: #2a1a08; border-color: var(--gold-tief); }
.t-wahl input:focus-visible + label { outline: 3px solid #fff; outline-offset: 2px; }
.t-gesichter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px; }
.t-gesichter figure { display: grid; justify-items: center; gap: 6px; }
.t-gesichter img { display: none; width: 100%; max-width: 128px; aspect-ratio: 1; border-radius: 10px; border: 2px solid var(--holz); object-fit: cover; }
.t-gesichter img.gut { display: block; }
.t-bericht:has(#t-tag-mittel:checked) img.gut, .t-bericht:has(#t-tag-schlecht:checked) img.gut { display: none; }
.t-bericht:has(#t-tag-mittel:checked) img.mittel, .t-bericht:has(#t-tag-schlecht:checked) img.schlecht { display: block; }
.t-gesichter figcaption { font: 700 .95rem / 1.2 var(--schrift); color: #5a4630; }

/* Der Stadtkurier: Zeitungspapier wie im Spiel (tafel.css .zeitung-tafel) */
.t-zeitung { background: #f3eedf; color: #1b1712; border-radius: 4px; padding: 18px 22px 22px; max-width: 58rem;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .45); font-family: 'PT Serif', Georgia, serif; }
.t-zeitung-kopf { text-align: center; border-bottom: 3px double #1b1712; padding-bottom: 6px; margin-bottom: 14px; }
.t-zeitung-kopf b { display: block; font: 400 clamp(2.4rem, 7vw, 3.4rem) / 1 'UnifrakturMaguntia', 'PT Serif', serif; }
.t-zeitung-kopf small { display: block; margin-top: 6px; font-size: .9rem; color: #4a4033; }
.t-zeitung-spalten { display: grid; gap: 18px 26px; }
@media (min-width: 760px) { .t-zeitung-spalten { grid-template-columns: 1.35fr 1fr; } .t-zeitung-neben { border-left: 1px solid #b9ae95; padding-left: 22px; } }
.t-zeitung article + article { margin-top: 14px; }
.t-zeitung h3 { font: 900 1.45rem / 1.15 'Playfair Display', 'PT Serif', serif; margin-bottom: 6px; }
.t-zeitung .t-zeitung-neben h3 { font-size: 1.12rem; font-weight: 700; }
.t-zeitung p { line-height: 1.5; font-weight: 400; }
.t-dach { display: block; font: 700 .78rem / 1.2 var(--schrift); color: #a3271c; margin-bottom: 3px; }
.t-erklaert { display: grid; gap: 14px 30px; margin-top: 22px; max-width: 58rem; }
@media (min-width: 760px) { .t-erklaert { grid-template-columns: 1fr 1fr; } }
.t-erklaert h3 { font: 600 1.2rem / 1.2 var(--zier); color: #fff; margin-bottom: 4px; }
.t-erklaert p { color: var(--leise); line-height: 1.45; }

/* ── Fuß ─────────────────────────────────────────────────────────────────────────────────────────── */
.t-fuss { margin-top: 48px; padding: 18px 0 26px; border-top: 1px solid rgba(255, 255, 255, .14); }
.t-fuss .t-breite { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 32px; }
.titel-fuss { display: flex; gap: 18px; font-size: .95rem; }
.titel-fuss a { color: var(--leise); text-decoration: none; }
.titel-fuss a:hover, .titel-fuss a:focus-visible { color: #fff; text-decoration: underline; }
.typenschild { font: 600 .72rem / 1 var(--zier); letter-spacing: .15em; color: #7fa9a2; }
/* Rechts das Typenschild, darunter das Patchlog (A.0.64.0, deine Ansage: „unter ‚SERIE A.0.63.0' sollen bitte die
   Patchlogs stehen“). Aufbau und Tafel-Farben in tafel.css; hier nur die Farben der Startseite. */
.t-serie { flex: 0 1 38rem; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.t-serie .typenschild { text-align: right; }
.titel .patchlog { --p-linie: rgba(255, 255, 255, .14); --p-tag: #fff; --p-leise: var(--leise); --p-nummer: #7fa9a2;
  --p-neu: var(--mint); --p-neu-text: #06352f; --p-geaendert: var(--gold-hell); --p-geaendert-text: #3b2a05;
  --p-behoben: #cfe3df; --p-behoben-text: #0c414c; font-size: .95rem; font-weight: 500; color: var(--hell); }
.titel .patchlog h2 { font: 600 1.15rem / 1.2 var(--zier); color: #fff; margin-bottom: 4px; }
@media (max-width: 640px) { .t-serie { flex-basis: 100%; } .t-serie .typenschild { text-align: left; } .titel .patch { padding-left: .3em; } }

@media (max-width: 520px) {
  .t-gruss { display: none; }
  .t-gesichter { grid-template-columns: repeat(2, 1fr); }
}