/* 31d.de - Thema fuer Bootstrap (kern) und was Bootstrap nicht kann: der
   Kopf der Startseite, das Browserfenster um die Vorschaubilder, die
   Status-Punkte. Hell/Dunkel ueber data-bs-theme am <html> (kern thema.js). */

:root, [data-bs-theme=light] {
    --kern-akzent: #6d5dfc;
    --kern-auf-akzent: #fff;
    --kern-radius: .6rem;
    --bs-body-line-height: 1.55;
    --bs-body-bg: #f4f4f7;
    --bs-body-bg-rgb: 244, 244, 247;
    --bs-body-color: #15151c;
    --bs-body-color-rgb: 21, 21, 28;
    --bs-secondary-color: #54545f;
    --bs-border-color: #e3e3ea;
    --flaeche: #fff;
    --chrome: #ececf1;
    --schatten: 0 1px 2px rgb(20 20 40 / .06), 0 8px 24px -8px rgb(20 20 40 / .14);
    --hero-a: #6d5dfc; --hero-b: #ff5c8a; --hero-c: #1fc8db;
    --gut: #12855b; --schlecht: #c62b2b;
}
[data-bs-theme=dark] {
    --bs-body-bg: #0e0f1a;
    --bs-body-bg-rgb: 14, 15, 26;
    --bs-body-color: #ececf3;
    --bs-body-color-rgb: 236, 236, 243;
    --bs-secondary-color: #b0b0c0;
    --bs-border-color: #2a2b3d;
    --bs-tertiary-bg: #1c1d2e;
    --flaeche: #171826;
    --chrome: #22233a;
    --schatten: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px -12px rgb(0 0 0 / .6);
    --gut: #3ddc97; --schlecht: #ff6b6b;
}
.card { --bs-card-bg: var(--flaeche); }

/* Leiste oben (alle Seiten ausser der Startseite) */
.leiste-oben { border-bottom: 1px solid var(--bs-border-color); background: var(--flaeche); }
.marke-klein { font-weight: 800; letter-spacing: -.02em; font-size: 1.15rem; color: inherit; text-decoration: none; }
.marke-klein span { background: linear-gradient(100deg, var(--hero-a), var(--hero-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.thema-knopf { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
               border: 1px solid var(--bs-border-color); background: transparent; color: var(--bs-secondary-color); }
.thema-knopf:hover { color: var(--bs-body-color); border-color: var(--bs-secondary-color); }
.thema-knopf:focus-visible { outline: 3px solid var(--kern-akzent); outline-offset: 2px; }
.textseite { max-width: 44rem; margin: 0 auto; }
.textseite p { color: var(--bs-secondary-color); }

/* Kopf der Startseite - immer dunkel */
.hero { position: relative; overflow: hidden; background: #0e0f1a; color: #fff; isolation: isolate; }
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: .55; }
.hero::before { width: 38rem; height: 38rem; left: -10rem; top: -18rem;
                background: radial-gradient(circle, var(--hero-a), transparent 70%);
                animation: treiben 18s ease-in-out infinite alternate; }
.hero::after { width: 34rem; height: 34rem; right: -12rem; bottom: -20rem;
               background: radial-gradient(circle, var(--hero-b), transparent 70%);
               animation: treiben 22s ease-in-out infinite alternate-reverse; }
@keyframes treiben { to { transform: translate(6rem, 4rem) scale(1.15); } }
.raster { position: absolute; inset: 0; z-index: -1; opacity: .35;
          background-image: linear-gradient(rgb(255 255 255 / .06) 1px, transparent 1px),
                            linear-gradient(90deg, rgb(255 255 255 / .06) 1px, transparent 1px);
          background-size: 44px 44px;
          mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%); }
.hero-innen { max-width: 76rem; padding-top: 5.5rem; padding-bottom: 4.5rem; }
.hero-marke { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600;
              letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .75);
              padding: .35rem .8rem; border: 1px solid rgb(255 255 255 / .15); border-radius: 999px;
              background: rgb(255 255 255 / .05); }
.hero-marke::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #3ddc97;
                      box-shadow: 0 0 0 4px rgb(61 220 151 / .2); }
.hero-marke.warnung::before { background: #ffb020; box-shadow: 0 0 0 4px rgb(255 176 32 / .2); }
.thema-hero { color: rgb(255 255 255 / .75); border-color: rgb(255 255 255 / .2); background: rgb(255 255 255 / .05); }
.thema-hero:hover { color: #fff; border-color: rgb(255 255 255 / .45); }
.hero-titel { font-size: clamp(3rem, 9vw, 6rem); line-height: .95; font-weight: 800; letter-spacing: -.04em; margin: 1.4rem 0 1rem; }
.hero-titel span { background: linear-gradient(100deg, var(--hero-a), var(--hero-b) 55%, var(--hero-c));
                   -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lead { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: rgb(255 255 255 / .78); max-width: 38rem; margin: 0; }
.zahlen { display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; margin: 2.75rem 0 0; padding: 0; list-style: none; }
.zahlen li { display: flex; flex-direction: column; }
.zahlen b { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.zahlen span { font-size: .85rem; color: rgb(255 255 255 / .6); }

/* Gruppen */
.inhalt { max-width: 76rem; padding-top: 1rem; padding-bottom: 5rem; }
.gruppe { margin-top: 3.5rem; }

/* Karte */
.karte { --akzent: var(--kern-akzent); position: relative; border-radius: 1.1rem; overflow: hidden;
         color: inherit; text-decoration: none; box-shadow: var(--schatten);
         transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s; }
.karte::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--akzent); z-index: 2; }
a.karte:hover { color: inherit; transform: translateY(-4px); border-color: color-mix(in srgb, var(--akzent) 45%, var(--bs-border-color));
                box-shadow: var(--schatten), 0 18px 40px -18px color-mix(in srgb, var(--akzent) 60%, transparent); }
a.karte:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }
.fenster { position: relative; padding: .9rem .9rem 0;
           background: linear-gradient(160deg, color-mix(in srgb, var(--akzent) 22%, var(--flaeche)),
                                                color-mix(in srgb, var(--akzent) 6%, var(--flaeche))); }
.rahmen { border-radius: .6rem .6rem 0 0; overflow: hidden; background: var(--chrome);
          box-shadow: 0 -1px 0 rgb(255 255 255 / .3) inset, 0 10px 30px -10px rgb(0 0 0 / .35); }
.fensterleiste { display: flex; align-items: center; gap: .3rem; padding: .45rem .6rem; }
.fensterleiste i { width: .55rem; height: .55rem; border-radius: 50%; background: #ff5f57; }
.fensterleiste i:nth-child(2) { background: #febc2e; }
.fensterleiste i:nth-child(3) { background: #28c840; }
.fensterleiste span { flex: 1; margin-left: .5rem; padding: .1rem .6rem; border-radius: .35rem; font-size: .7rem;
                      color: var(--bs-secondary-color); background: var(--flaeche); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bild { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bs-body-bg); }
.bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top;
            transition: transform .6s cubic-bezier(.2,.7,.3,1); }
a.karte:hover .bild img { transform: scale(1.04); }
.karte .card-body { padding: 1.15rem 1.3rem 1.25rem; }
.ohne-bild .card-body { padding-top: 1.5rem; }
.karte-titel { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.karte-text { color: var(--bs-secondary-color); font-size: .94rem; margin: .45rem 0 1rem; flex: 1; }
.pfeil { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%;
         border: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); transition: all .25s; }
a.karte:hover .pfeil { background: var(--akzent); border-color: var(--akzent); color: #fff; transform: rotate(-45deg); }
.tag { font-size: .74rem; font-weight: 600; padding: .3rem .65rem;
       color: color-mix(in srgb, var(--akzent) 75%, var(--bs-body-color));
       background: color-mix(in srgb, var(--akzent) 12%, transparent); }
.schloss { position: absolute; top: 1.4rem; right: 1.4rem; z-index: 2; display: flex; align-items: center; gap: .3rem;
           font-size: .72rem; font-weight: 600; color: #fff; padding: .25rem .6rem; border-radius: 999px;
           background: rgb(15 15 25 / .72); }

/* Erreichbarkeit */
.status { display: flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 600;
          color: var(--bs-secondary-color); margin: .85rem 0 0; }
.status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gut);
                  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gut) 25%, transparent); }
.status.aus { color: var(--schlecht); }
.status.aus::before { background: var(--schlecht); box-shadow: 0 0 0 3px color-mix(in srgb, var(--schlecht) 25%, transparent); }

.fuss { border-top: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); font-size: .85rem; }
.fuss .container { max-width: 76rem; }
.fuss a { color: inherit; }

/* Verwaltung */
.farbpunkt { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--akzent); margin-right: .35rem; }
.vorschau-klein { width: 96px; height: 60px; object-fit: cover; object-position: top; border-radius: .3rem; border: 1px solid var(--bs-border-color); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    a.karte:hover, a.karte:hover .bild img { transform: none; }
}