/* ============================================================
   COOKIE-HINWEIS auf der Intro-Seite (T-2026-0114)
   ============================================================

   Die Intro-Seite ist die einzige PUNKFOTO-Seite ohne
   {+MASTER+}-Marker: sie zieht keinen Container und bringt ihre
   eigene HTML-Huelle mit. Damit fehlen ihr beide Voraussetzungen,
   die der Cookie-Hinweis sonst vorfindet -- die Regeln aus
   pf-basic.css und das Vite-Bundle, dessen main.js den Layer per
   show_hide_single_layer() sichtbar schaltet.

   Diese Datei ersetzt beides fuer genau diese eine Seite.
   Sie wird NUR von tpl/pages/intro.html eingebunden.

   ZWEI UNTERSCHIEDE ZUR FASSUNG IN pf-basic.css:

   1. #hinweisLayer steht auf `display: flex`, nicht auf `none`.
      Dort blendet Javascript den Layer nach dem Laden ein; hier
      gibt es kein Javascript dafuer, und es braucht auch keins:
      das Snippet steht ueberhaupt nur im HTML, wenn der Server
      entschieden hat, dass der Hinweis erscheinen soll.
      Ein `display: none`, das niemand aufhebt, waere ein
      Cookie-Hinweis, den es auf dem Papier gibt und sonst nirgends.

   2. Die Zentrierung laeuft ueber Flexbox statt ueber
      `position: absolute` plus `translate`. Auf der Intro-Seite
      liegt Bootstrap darunter; Flexbox ist dagegen unempfindlich.

   ACHTUNG, ZWEITE FUNDSTELLE: Wer das Aussehen des Hinweises
   aendert, aendert es hier NICHT fuer die uebrigen Seiten. Die
   liegen in pf-basic.css (Desktop), pf-mobile.css und
   pf-tablet.css. Die Zusammenfuehrung beider Fassungen ist
   bewusst nicht Teil von T-2026-0114 -- sie haette jede Seite
   des Projekts angefasst, statt nur die eine, die kaputt war.

   RUECKBAU: Diese Datei wird von genau zwei Zeilen in
   tpl/pages/intro.html gerufen (dem <link> im Kopf und dem
   Platzhalter vor </body>). Beide entfernen, und die Intro-Seite
   ist wieder im Zustand vor T-2026-0114.
   ============================================================ */

#hinweisLayer {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

#hinweisAussen {
    max-width: 95%;
    max-height: 95vh;
    overflow-y: auto;
}

#hinweisInnen {
    border: 7px solid darkred;
    width: 700px;
    max-width: 100%;
    background: yellow;
    color: black;
    text-align: center;
    font-weight: bold;
    padding: 3rem;
    opacity: 0.94;
    box-sizing: border-box;
}

#hinweisTitle {
    font-size: 3rem;
    font-weight: 900;
    line-height: 100%;
}

#hinweisInnenBoxW {
    font-size: 2.6rem;
    font-weight: 300;
    text-align: center;
    margin: 2rem;
    line-height: 1.2;
}

#hinweisInnenBoxQ {
    font-size: 2.6rem;
    font-weight: 700;
    margin: 2rem;
    line-height: 1.2;
}

#hinweisInnenBoxQ p {
    margin: 1rem 0;
}

#hinweisInnenBoxQ em {
    font-style: italic;
}

#hinweisInnenBoxA {
    font-size: 1.9rem;
    font-weight: 600;
    margin: 2rem;
    display: flex;
    justify-content: center;
}

#hinweisLayer .cookie-warning {
    padding: 0.6rem 1.4rem;
    background-color: darkred;
    border: 4px solid darkred;
    display: inline-block;
    max-width: 100%;
    white-space: normal;
}

#hinweisLayer .cookie-warning:hover {
    background-color: rgb(96, 0, 0);
    border-color: rgb(96, 0, 0);
}

#hinweisLayer .cookie-warning a {
    color: white;
    text-decoration: none;
    display: block;
    line-height: 1.3;
}

/* ---- Tablet ---- */
@media screen and (max-width: 1024px) {
    #hinweisInnen {
        padding: 2rem 1.2rem;
        border-width: 5px;
    }

    #hinweisTitle {
        font-size: 2.2rem;
    }

    #hinweisInnenBoxW,
    #hinweisInnenBoxQ {
        font-size: 1.7rem;
        margin: 1.2rem 0.5rem;
    }

    #hinweisInnenBoxA {
        font-size: 1.5rem;
        margin: 1.2rem 0.5rem;
    }
}

/* ---- Kleine Smartphones ---- */
@media screen and (max-width: 360px) {
    #hinweisInnen {
        padding: 1rem 0.7rem;
        border-width: 3px;
        max-height: 85vh;
        overflow-y: auto;
    }

    #hinweisTitle {
        font-size: 1.5rem;
        margin-bottom: 0.6rem;
    }

    #hinweisInnenBoxW {
        font-size: 1.1rem;
        margin: 0.6rem 0.2rem;
        line-height: 1.2;
    }

    #hinweisInnenBoxQ {
        font-size: 1.3rem;
        margin: 0.6rem 0.2rem;
        line-height: 1.2;
    }

    #hinweisInnenBoxQ p {
        margin: 0.3rem 0;
    }

    #hinweisInnenBoxA {
        font-size: 1.1rem;
        margin: 0.6rem 0.2rem;
    }

    #hinweisLayer .cookie-warning {
        padding: 0.5rem 0.8rem;
        font-size: 1rem;
        line-height: 1.2;
    }
}