/* ============================================================================
   Makerio · Redaktionelle Seiten (/impressum, /datenschutz …)

   EIGENE DATEI. Eine öffentliche Seite lädt nichts aus dem angemeldeten
   Bereich. Farben wie überall sonst (app.css) — siehe §0az.
   ========================================================================= */

:root {
    --teal:   #007d7e;
    --dunkel: #00696a;
    --grund:  #f5f7f8;
    --tinte:  #12222a;      /* 15,8:1 auf Weiß */
    --leise:  #5b6b73;      /*  5,5:1 auf Weiß */
    --linie:  #e2e8ea;
    --navy:   #112031;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0; min-height: 100dvh;
    display: flex; flex-direction: column;
    background: var(--grund); color: var(--tinte);
    font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }

.st-mitte { width: 100%; max-width: 46rem; margin: 0 auto; padding: 0 24px; }

.st-kopf { background: #fff; border-bottom: 1px solid var(--linie); }
.st-kopf .st-mitte {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; min-height: 74px; padding-top: 12px; padding-bottom: 12px;
}
.st-marke .logo-bild { height: 30px; width: auto; }
.st-zurueck {
    display: inline-flex; align-items: center; min-height: 44px;
    font-size: .88rem; color: var(--tinte); text-decoration: none;
}
.st-zurueck:hover { color: var(--teal); }

.st-inhalt { flex: 1; padding-top: 40px; padding-bottom: 56px; }
.st-inhalt h1 { margin: 0 0 26px; font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.2; }

/*
 * Der Textblock ist das Herz der Seite. Etwas mehr Zeilenhöhe als sonst:
 * Rechtstexte werden gelesen, nicht überflogen.
 */
.st-text { background: #fff; border: 1px solid var(--linie); border-radius: 14px; padding: 30px 34px; }
.st-text h2 { margin: 30px 0 12px; font-size: 1.15rem; }
.st-text h2:first-child { margin-top: 0; }
.st-text p { margin: 0 0 16px; }
.st-text p:last-child { margin-bottom: 0; }
.st-text ul { margin: 0 0 16px; padding-left: 22px; }
.st-text li { margin-bottom: 7px; }
.st-text a { color: var(--dunkel); }          /* 6,05:1 auf Weiß */

.st-leer { color: var(--leise); }
.st-stand { margin-top: 18px; font-size: .84rem; color: var(--leise); }

.st-knopf {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 52px; padding: 14px 24px;
    border-radius: 11px; background: var(--teal); color: #fff;   /* 4,96:1 */
    font-weight: 600; text-decoration: none;
}
.st-knopf:hover { background: var(--dunkel); }

.st-fuss { border-top: 1px solid var(--linie); padding: 22px 0 30px; font-size: .84rem; color: var(--leise); }
.st-fuss .st-mitte { display: flex; justify-content: center; gap: 10px 24px; flex-wrap: wrap; }
.st-fuss a { color: var(--leise); min-height: 44px; display: inline-flex; align-items: center; }
.st-fuss a:hover { color: var(--tinte); }

@media (max-width: 560px) { .st-text { padding: 22px; } }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ---------------------------------------------------------- Cookies ----- */

/*
 * Unten, nicht oben, und nicht bildschirmfüllend: Es ist eine Information,
 * kein Tor. Wer lesen will, worum es geht, soll nicht erst etwas wegklicken.
 */
.ck-band {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--navy); color: #cfdde0;          /* 11,8:1 */
    border-top: 1px solid rgba(255,255,255,.12);
    padding: 14px 0 calc(14px + env(safe-area-inset-bottom));
}
.ck-inhalt {
    width: 100%; max-width: 60rem; margin: 0 auto;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 0 24px;
}
.ck-inhalt p { margin: 0; flex: 1; min-width: 14rem; font-size: .86rem; line-height: 1.6; }
.ck-inhalt strong { color: #fff; }
.ck-inhalt a { color: #fff; }
.ck-inhalt button {
    flex: none; min-height: 46px; padding: 12px 26px;
    border: 0; border-radius: 10px;
    background: #fff; color: #12222a;                 /* 15,8:1 */
    font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer;
}
.ck-inhalt button:hover { background: #e2e8ea; }

@media (max-width: 560px) {
    .ck-inhalt { flex-direction: column; align-items: stretch; }
    .ck-inhalt button { width: 100%; }
}