/* Poo-Portal — gemeinsame Anmutung: Vaporwave.
 *
 * Wird von Startseite, Frage des Tages, Sitzung und Digest eingebunden. Jede
 * Seite ergaenzt danach nur noch ihre eigenen Besonderheiten.
 *
 * ================= Was das Geraet NICHT kann (iPad 1, WebKit 534) =========
 *   - CSS-Variablen: alle Farben stehen ausgeschrieben. Wer sie aendert,
 *     muss suchen und ersetzen. Das ist der Preis.
 *   - Flexbox in heutiger Form, CSS-Raster, Farbfunktionen, clip-path,
 *     backdrop-filter, gap.
 * ================= Was es KANN, und was den Stil hier traegt ==============
 *   - -webkit-linear-gradient und -webkit-repeating-linear-gradient
 *   - 3D-Transformationen: daraus entsteht das perspektivische Bodengitter
 *   - text-shadow und box-shadow: das Neonleuchten
 *   - Futura und Georgia sind fest verbaut, keine Web-Schrift noetig
 */

* { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none;
    -webkit-user-select: none; margin: 0; padding: 0; box-sizing: border-box; }
/* WICHTIG: Das pauschale -webkit-user-select: none oben trifft auf iOS auch
   Eingabefelder - dort laesst sich dann NICHTS eintippen. Der PIN des Digests
   war deshalb nicht einzugeben. Felder bekommen die Auswahl zurueck. */
input, textarea { -webkit-user-select: text; user-select: text; }

html { background: #0c0a10;
    background: -webkit-linear-gradient(top, #14101c 0%, #0c0a10 60%, #08070c 100%);
    background-attachment: fixed; }
body { min-height: 100%; background: transparent; color: #f4e9ff;
    font-family: Futura, "Gill Sans", "Helvetica Neue", Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased; }

/* ---- Kulisse -----------------------------------------------------------
 * Ein fertiges Bild statt gerechneter Elemente. Die Sonne bestand vorher aus
 * einer Scheibe plus einem Streifen-Rechteck - und dessen obere Ecken ragten
 * sichtbar ueber den Kreis hinaus. Im Bild ist die Sonne sauber freigestellt,
 * das Geraet muss nichts rechnen, und es ist ein einziger Abruf.
 *
 * Erzeugt von werkzeug/hintergrund.py - das Bild ist reproduzierbar, keine
 * Fundsache aus dem Netz mit unklarer Herkunft.
 *
 * background-attachment: fixed vertraegt sich auf iOS schlecht mit
 * background-size: cover. Deshalb ein eigenes, fest positioniertes Element -
 * das steht ebenso still, ohne den Fehler. */
#kulisse { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 0;
    overflow: hidden; pointer-events: none; }
/* Das Klo-Tablet steht HOCHKANT (768 x 1024), und das Gemaelde ist ebenfalls
   hochkant (829 x 1171) - die Formate liegen so dicht beieinander, dass
   formatfuellend fast nichts abschneidet. Deshalb cover: Bild fuellt den
   Schirm, kein dunkler Rand.
   Am Rechner im Querformat wird dabei oben und unten beschnitten; das ist
   hinnehmbar, das Geraet ist das Tablet. */
#kulisse .bild { position: absolute; left: 0; right: 0; top: 0; bottom: 0;
    display: block; background: #0c0a10 url(hintergrund.jpg) center center no-repeat;
    -webkit-background-size: cover; background-size: cover; }
/* Schleier ueber dem Bild: das Gitter ist herunterskaliert sehr kontrastreich
   und flimmert hinter dem Text. Der Schleier nimmt ihm die Schaerfe, ohne die
   Kulisse zu verlieren. */
#kulisse .bild:after { content: ""; position: absolute; left: 0; right: 0;
    top: 0; bottom: 0; display: block;
    background: -webkit-linear-gradient(top, rgba(10,8,16,.42) 0%, rgba(10,8,16,.12) 45%, rgba(10,8,16,.52) 100%); }

/* Alles Bedienbare liegt ueber der Kulisse. */
#kopf, #buehne, #inhalt, #gitter, #fuss, #tor { position: relative; z-index: 1; }

/* ---- Kopfzeile ---------------------------------------------------------- */
#kopf { padding: 15px 26px 13px; border-bottom: 1px solid rgba(255,47,157,.35);
    background: rgba(18,7,31,.55); }
#kopf h1 { display: inline-block; font-size: 15px; font-weight: 500;
    letter-spacing: 6px; text-transform: uppercase; color: #ffd9f2;
    text-shadow: 0 0 12px rgba(255,47,157,.9), 0 0 30px rgba(255,47,157,.45); }
a.zurueck { display: inline-block; text-decoration: none; font-size: 12px;
    font-weight: 500; letter-spacing: 3px; text-transform: uppercase;
    color: #6ff0ff; margin-right: 24px;
    text-shadow: 0 0 10px rgba(45,226,230,.8); }

/* ---- Tafeln ------------------------------------------------------------- */
.tafel { border: 1px solid rgba(255,47,157,.45); border-radius: 4px;
    background: rgba(26,11,46,.86);
    -webkit-box-shadow: 0 0 22px rgba(255,47,157,.16), inset 0 0 24px rgba(122,45,255,.14);
    box-shadow: 0 0 22px rgba(255,47,157,.16), inset 0 0 24px rgba(122,45,255,.14); }
.marke { font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
    color: #6ff0ff; font-weight: 500; text-shadow: 0 0 10px rgba(45,226,230,.7); }

/* ---- Schaltflaechen ----------------------------------------------------- */
button { -webkit-appearance: none; border: 0; font-family: inherit; display: block; }
.knopf { font-size: 13px; font-weight: 500; letter-spacing: 3.4px;
    text-transform: uppercase; border-radius: 4px; border: 1px solid #ff2f9d;
    background: rgba(255,47,157,.12); color: #ffd9f2;
    text-shadow: 0 0 10px rgba(255,47,157,.8);
    -webkit-box-shadow: 0 0 16px rgba(255,47,157,.3); box-shadow: 0 0 16px rgba(255,47,157,.3); }
.knopf:active { background: rgba(255,47,157,.3); }

/* ---- Lesetext ----------------------------------------------------------- */
.lesetext { font-family: Georgia, "Times New Roman", serif; font-size: 19px;
    line-height: 1.72; color: #e3d3f5; }