/* =============================================================================
   luithardt.cloud – Design wie das Server-Logo (branding/logo.svg):
   Blau #2b59c3, Schrift #0f172a, LED-Grün #19c37d, im Dunkeln #6e9bff / #2ee59d.
   Keine externen Schriften/Skripte (Datenschutz). Logos kommen aus /marke/ (setup).
   ============================================================================= */
:root {
  color-scheme: light;
  --grund: #f3f6fc; --karte: #ffffff; --text: #0f172a; --leise: #52607a; --linie: #e2e8f3;
  --blau: #2b59c3; --blau-dunkel: #2148a3; --gruen: #19c37d; --tinte: #0f172a; --kasten: #eef3fd;
  --knopf-text: #ffffff; --schleier: rgba(243, 246, 252, .5);
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --grund: #0b1220; --karte: #121b2e; --text: #e5e9f2; --leise: #9aa6bd; --linie: #22304a;
    --blau: #6e9bff; --blau-dunkel: #8db1ff; --gruen: #2ee59d; --tinte: #f1f5f9; --kasten: #16223a;
    --knopf-text: #0b1220; --schleier: rgba(11, 18, 32, .7);
    color-scheme: dark;
  }
}
:root[data-thema="dunkel"] {
  --grund: #0b1220; --karte: #121b2e; --text: #e5e9f2; --leise: #9aa6bd; --linie: #22304a;
  --blau: #6e9bff; --blau-dunkel: #8db1ff; --gruen: #2ee59d; --tinte: #f1f5f9; --kasten: #16223a;
  --knopf-text: #0b1220; --schleier: rgba(11, 18, 32, .7);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--grund); color: var(--text); font: 17px/1.6 var(--ui); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--blau); text-underline-offset: 3px; }
img { max-width: 100%; }

/* --- Kopfzeile ----------------------------------------------------------------- */
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 16px clamp(16px, 4vw, 40px); position: relative; z-index: 2; }
.kopf .marke img { height: 34px; width: auto; display: block; }
.kopf .marke { display: none; }                 /* auf der Startseite steht das große Zeichen in der Mitte */
.unterseite .kopf .marke { display: block; }
.kopf nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.hallo { font-size: 15px; color: var(--leise); margin-right: 4px; }
.knopf { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1 var(--ui); text-decoration: none;
         padding: 11px 18px; border-radius: 10px; border: 1.5px solid var(--blau); color: var(--blau);
         background: color-mix(in srgb, var(--karte) 70%, transparent); white-space: nowrap; }
.knopf:hover { background: var(--kasten); }
.knopf.voll { background: var(--blau); color: var(--knopf-text); }
.knopf.voll:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); }
.knopf svg { width: 16px; height: 16px; flex: none; }

.nur-angemeldet { display: none !important; }
html.angemeldet .nur-angemeldet { display: inline-flex !important; }
html.angemeldet .nur-abgemeldet { display: none !important; }

/* --- Startseite: Bild, Zeichen, Spruch -------------------------------------------- */
.buehne { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 100vh; isolation: isolate; }
.buehne::before { content: ""; position: absolute; inset: 0; z-index: -2;
                  background: url("bilder/hintergrund.svg") center bottom / cover no-repeat; }
.buehne::after { content: ""; position: absolute; inset: 0; z-index: -1;
                 background: linear-gradient(180deg, var(--schleier) 0%, transparent 45%, var(--schleier) 100%); }
/* Wolken: eigene Ebene, zieht langsam hin und her (nur verschoben, nicht neu gezeichnet –
   schont Akku und alte Geräte). Das Netz im Hintergrundbild bewegt sich selbst (SVG). */
.buehne { overflow: hidden; }
.wolken { position: absolute; inset: 0 -8%; z-index: -2; pointer-events: none;
          background: url("bilder/wolken.svg") center bottom / cover no-repeat;
          animation: wolken-ziehen 32s ease-in-out infinite alternate; will-change: transform; }
@keyframes wolken-ziehen {
  from { transform: translate3d(-3%, 0, 0); }
  to   { transform: translate3d(3%, -8px, 0); }
}
@media (prefers-reduced-motion: reduce) { .wolken { animation: none; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .buehne::before, :root:not([data-thema="hell"]) .wolken { opacity: .14; }
}
:root[data-thema="dunkel"] .buehne::before, :root[data-thema="dunkel"] .wolken { opacity: .14; }
.mitte { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
         text-align: center; padding: 0 16px 56px; }
.zeichen { width: clamp(88px, 14vw, 128px); height: auto; margin-bottom: 14px; filter: drop-shadow(0 8px 18px rgba(43, 89, 195, .22)); }
.spruch { margin: 0; font-family: var(--ui); line-height: 1; color: var(--tinte); }
.spruch .gross { display: block; font-size: clamp(48px, 10.5vw, 108px); font-weight: 800; letter-spacing: -.03em; }
.spruch .zwischen { display: block; font-size: clamp(16px, 2.6vw, 22px); font-weight: 500; color: var(--leise);
                    letter-spacing: .04em; margin: .6em 0 .4em; }
.spruch .blau { color: var(--blau); }
.led { display: inline-block; width: .16em; height: .16em; border-radius: 50%; background: var(--gruen);
       vertical-align: .62em; margin-left: .08em; box-shadow: 0 0 .25em var(--gruen); }

/* --- Inhaltsseiten ---------------------------------------------------------------- */
main.inhalt { width: 100%; max-width: 1040px; margin: 0 auto; padding: 8px 16px 48px; flex: 1; }
.karte { background: var(--karte); border-radius: 16px; padding: 28px clamp(18px, 5vw, 40px); margin: 0 0 22px;
         box-shadow: 0 1px 0 var(--linie), 0 10px 30px rgba(15, 23, 42, .05); }
.klein { font-size: 12px; font-weight: 700; letter-spacing: .18em; color: var(--blau); text-transform: uppercase; margin: 0; }
h1, h2, h3 { color: var(--tinte); line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: clamp(30px, 6vw, 42px); margin: 6px 0 12px; font-weight: 800; }
h2 { font-size: 24px; margin: 0 0 14px; font-weight: 700; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.kachel { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: var(--text);
          background: var(--karte); border: 1.5px solid var(--linie); border-radius: 14px; padding: 16px; }
.kachel:hover { border-color: var(--blau); box-shadow: 0 8px 24px rgba(43, 89, 195, .12); }
.kachel .bild { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
                background: var(--kasten); color: var(--blau); }
.kachel .bild svg { width: 24px; height: 24px; }
.kachel b { display: block; font-size: 17px; color: var(--tinte); }
.kachel span { font-size: 14px; color: var(--leise); line-height: 1.45; }
.platzhalter { color: var(--leise); font-style: italic; }

/* --- Fuß -------------------------------------------------------------------------- */
.fuss { text-align: center; font-size: 13px; color: var(--leise); padding: 14px 16px 26px; }
.fuss a { color: inherit; }

@media (max-width: 560px) {
  .kopf { padding: 12px 14px; }
  .knopf { padding: 10px 13px; font-size: 14px; }
  .hallo { display: none; }
}

/* --- Tag-/Dunkelmodus (thema.js): Knopf und passende Logos ------------------------ */
.knopf.rund { padding: 0; width: 42px; height: 42px; justify-content: center; }
.knopf.rund svg { width: 18px; height: 18px; }
.nur-dunkel { display: none !important; }
:root[data-thema="dunkel"] .nur-hell { display: none !important; }
:root[data-thema="dunkel"] .nur-dunkel { display: inline !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .nur-hell { display: none !important; }
  :root:not([data-thema="hell"]) .nur-dunkel { display: inline !important; }
}
/* Logos als Block (zentriert) – nicht als Textzeile */
:root[data-thema="dunkel"] img.logo.nur-dunkel { display: block !important; }
@media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) img.logo.nur-dunkel { display: block !important; } }