/* 1. Schriftarten

   3. Variablen (:root)
   4. Grundgerüst (*, html, body)
   5. Frei schwebende Steuerelemente (Sprache, Zurück)
   6. Scroll-Abschnitte: Intro-Text
   7. Scroll-Abschnitt: Sterne + Wortmarke
   8. Haupt-Raster (Live-Ansicht)
   9. Vorschau-Karte (nur noch in der Tages-Ansicht)
   10. Archiv-Übersicht
   11. Tages-Ansicht
   12. Notiz-Ansicht (Frage- & Antwort-Karte)
   13. Eigener Kreuz-Cursor
   14. Mobile-Anpassungen (@media max-width: 768px) – muss ganz am
       Ende stehen, siehe Hinweis in Abschnitt 2 */


/* 1. Schriftarten */


@font-face {
    font-family: 'Pix32';
    src: url('assets/fonts/Pix32 2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DiatypeMono';
    src: url('assets/fonts/DiatypeSemi-Mono-Regular-Trial.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


/* 3. Variablen */

:root {
    --schrift-logo:        'Pix32', monospace;
    --schrift-frage:       'Pix32', monospace;
    --schrift-notiz:       'DiatypeMono', monospace;
    --schrift-meta:        'Pix32', monospace;
    --schrift-erzaehlung:  'DiatypeMono', monospace;


    --haupt-pixel-groesse: 40px;


    --pixel-groesse:       40px;

    --farbe-hintergrund:   #111110; /* dunkler Seitenhintergrund */
    --farbe-flaeche:       #ffffff; /* helle Flächen: Karten, gefüllte Pixel */
    --farbe-text-dunkel:   #1a1917; /* Text auf hellen Flächen */
    --farbe-text-meta:     #888580; /* gedämpfter Text, z.B. Zoom-Knöpfe */
    --farbe-rahmen:        rgba(245, 242, 238, 0.06);
}

/* 4. Grundgerüst */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: none;
}

html {
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: auto;
}

body {
    background: var(--farbe-hintergrund);
    color: var(--farbe-flaeche);
    font-family: var(--schrift-notiz);
}

/* 5. Frei schwebende Steuerelemente */

.frei-schwebend {
    position: fixed;
    z-index: 1000;
    background: transparent;
    border: none;
    font-family: var(--schrift-erzaehlung);
    font-size: 12pt;
    letter-spacing: 1px;
    text-transform: lowercase;
    cursor: none;
    color: #fff;
    mix-blend-mode: difference;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.frei-schwebend:hover {
    opacity: 1;
}

#sprache-knopf {
    top: 16px;
    right: 16px;
    padding: 0;
}

/* Archiv-Sprung-Knopf */

#archiv-sprung-knopf {
    top: 16px;
    left: 16px;
    padding: 0;
}

/* Archiv-Zurück-Knopf: sitzt oben links in der ersten Tages-Kachel */

#archiv-zurueck-knopf {
    top: 16px;
    left: calc(var(--pixel-groesse) * 0.2);
    font-size: 18px;
    padding: 0;
}

/* Tag-Zurück-Knopf */

#tag-zurueck-knopf {
    top: 16px;
    left: 16px;
    font-size: 18px;
    padding: 0;
}

#tag-titel-schwebend {
    top: 18px;
    left: 52px;
    opacity: 0.7;
}

/* 6. Scroll-Abschnitte: Intro-Text */

.scroll-abschnitt {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--farbe-flaeche);
    overflow: hidden;
}

#intro-text-inhalt {
    position: relative;
    width: calc(100vw - 48px);
    max-width: 1000px;
}

.intro-zeile {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    font-family: var(--schrift-erzaehlung);
    font-size: 15pt;
    line-height: 20pt;
    text-align: center;
    color: var(--farbe-text-dunkel);
    white-space: pre-wrap;
    opacity: 0;
    text-transform: none;
}

/* Die fünf Fragezeilen */

.intro-zeile-frage {
    font-family: var(--schrift-frage);
    font-size: 40pt;
    line-height: 1;
    text-transform:none;
}

/* Listen-Blöcke ("There are no likes. / No followers. / ..." und
   "Choose a box. / Read the question. / ..."): diese Zeilen bekommen
   keine eigene Positionierung – .intro-liste ist ein reiner,
   unpositionierter Gruppierungs-Container (nur für JS, um die Zeilen
   je Block als Geschwister zu finden), dadurch zentrieren sich seine
   Kinder ganz normal über die geerbte .intro-zeile-Regel (position:
   absolute; top/left 50%; translate -50/-50) relativ zu
   #intro-text-inhalt – exakt wie jede andere Intro-Zeile auch. Das
   Stehenbleiben + leichte Hochschieben passiert rein über GSAP
   (siehe zeilenChoreografieAufbauen in script.js). */

/* Raster-Sprung-Knopf */

#raster-sprung-knopf {
    position: fixed;
    bottom: 16px;
    left: 16px;
    width: calc(var(--pixel-groesse) * 0.2);
    height: calc(var(--pixel-groesse) * 0.2);
    padding: 0;
    background: var(--farbe-text-dunkel);
    border: 1.5px solid var(--farbe-text-dunkel);
    cursor: none;
    z-index: 900;
    transition: background 0.2s ease;
}

#raster-sprung-knopf:hover {
    background: transparent;
}

/* Info-Knopf: unten rechts */

#info-knopf {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 900;
    background: transparent;
    border: none;
    padding: 0;
    font-family: var(--schrift-logo);
    font-size: 28px;
    line-height: 1;
    letter-spacing: 0;
    color: #fff;
    mix-blend-mode: difference;
    opacity: 1;
    transition: opacity 0.2s;
}

#info-knopf:hover {
    opacity: 1;
}


/* Weiße Info Box, unten rechts */

#info-box {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 899;
    /* Feste, an den Textinhalt angepasste Größe statt an der (teils
       winzigen) Raster-Pixelgröße gekoppelt – vorher wurde der Text
       dadurch abgeschnitten. */
    width: min(380px, 86vw);
    height: min(380px, 86vw);
    max-height: 80vh;
    background: var(--farbe-flaeche);
    color: var(--farbe-text-dunkel);
    padding: 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: left;
    font-family: var(--schrift-notiz);
    font-size: 11pt;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.9);
    transform-origin: bottom right;
    overflow: hidden;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Leerzeile-Abstand vor dem Hinweis, statt einem <br><br> im Markup */

#info-hinweis {
    margin-top: 1.5em;
}

#info-knopf:hover ~ #info-blur {
    opacity: 1;
}

#info-knopf:hover ~ #info-box {
    opacity: 1;
    transform: scale(1);
}

/* 7. Scroll-Abschnitt: Sterne + Wortmarke */

#symbol-abschnitt {
    background: var(--farbe-flaeche);
    margin-top: -2px;
}

#symbol-buehne {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.stern,
#wortmarke {
    font-family: var(--schrift-logo);
    font-size: clamp(64px, 14vw, 190px);
    line-height: 1;
    color: var(--farbe-text-dunkel);
    white-space: nowrap;
}

/* Wortmarke liegt zentriert über den Sternen, ohne deren
   Abstand zueinander zu beeinflussen (per GSAP eingeblendet) */
#wortmarke {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
}

/* 8. Haupt-Raster (Live-Ansicht) */

:root {
    --raster-kreuz: none; 
}

#raster-abschnitt {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--farbe-hintergrund);
    padding: 60px 0;
}

#raster {
    display: grid;
    grid-template-columns: repeat(20, var(--haupt-pixel-groesse));
    grid-template-rows: repeat(20, var(--haupt-pixel-groesse));
    width: calc(20 * var(--haupt-pixel-groesse));
    position: relative;
}

.pixel {
    width: 100%;
    height: 100%;
    background: transparent;
    transition: background 0.2s ease;
    position: relative;
}

.pixel:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Animation, wenn ein Pixel neu befüllt wird */

@keyframes pixelEinblenden {
    0%   { opacity: 0; transform: scale(0.6); }
    60%  { opacity: 1; transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
}

.pixel.gefuellt {
    background: var(--farbe-flaeche);
    animation: pixelEinblenden 0.25s ease;
}

/* Hover-Vorschau für gefüllte Pixel  */

.raster-vorschau-karte {
    position: fixed;
    z-index: 950;
    background: var(--farbe-flaeche);
    pointer-events: none;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.raster-vorschau-karte.sichtbar {
    opacity: 1;
    transform: scale(1);
}

.rvk-antwort,
.rvk-frage {
    position: absolute;
    inset: 0;
    padding: 6%;
    display: flex;
    align-items: flex-start;
    text-align: left;
    color: var(--farbe-text-dunkel);
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.rvk-antwort {
    font-family: var(--schrift-notiz);
    line-height: 1.3;
}

.rvk-frage {
    font-family: var(--schrift-frage);
    line-height: 1.05;
    text-transform: none;
    opacity: 0;
    padding-top: 1.5%;
}

.raster-vorschau-karte.umgedreht .rvk-antwort {
    opacity: 0;
}

.raster-vorschau-karte.umgedreht .rvk-frage {
    opacity: 1;
}

/* Zurück-Knopf (nur in der Tages-Ansicht sichtbar) */

.zurueck-knopf {
    background: transparent;
    border: none;
    cursor: none;
    padding: 0;
}

/* 10. Archiv-Übersicht */

#archiv-abschnitt {
    position: fixed;
    inset: 0;
    width: 100%;
    min-height: 100vh;
    background: var(--farbe-flaeche);
    padding: 52px 0 80px;
    overflow-y: auto;
    z-index: 350; /* unter der Tages-Ansicht (400) – die öffnet sich ja aus dem Archiv heraus, muss also darüberliegen */
    transform: translateX(100%);
    transition: transform 0.5s ease;
}

#archiv-abschnitt.aktiv {
    transform: translateX(0);
}

#archiv-tage {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: calc(var(--pixel-groesse) * 0.2);
    padding: 0 calc(var(--pixel-groesse) * 0.2);
    width: 100%;
}

.tag-karte {
    width: 100%;
    aspect-ratio: 1 / 1;
    cursor: none;
    position: relative;
}

.mini-raster-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: var(--farbe-hintergrund);
}

.mini-raster {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(20, 1fr);
    width: 100%;
    height: 100%;
    position: relative;
}

/* Feines Punktmuster innerhalb eines Mini-Rasters (Tages-Ansicht) */

.mini-raster::before {
    content: '';
    position: absolute;
    inset: calc(100% / 40);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect x='3.6' y='3.6' width='2.8' height='2.8' fill='rgba(255%2C255%2C255%2C0.2)'/%3E%3C/svg%3E");
    background-size: calc(100% / 20) calc(100% / 20);
    background-position: 0 0;
    pointer-events: none;
    z-index: 0;
}

.mini-pixel {
    background: transparent;
}

.mini-pixel.gefuellt {
    background: var(--farbe-flaeche);
}

/* In der Archiv-Übersicht selbst kein Punktmuster (nur echtes Raster in Tages-Ansicht) */

#archiv-tage .mini-raster::before {
    display: none;
}

/* Datums-Anzeige, die beim Hovern über eine Tages-Kachel erscheint */

.tag-datum-anzeige {
    position: absolute;
    inset: 0;
    background: var(--farbe-flaeche);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    font-family: var(--schrift-logo);
    color: var(--farbe-text-dunkel);
    box-sizing: border-box;
}

.tag-datum-anzeige .datum-tag-monat,
.tag-datum-anzeige .datum-jahr {
    white-space: nowrap;
}

.tag-karte:hover .tag-datum-anzeige {
    opacity: 1;
}

/* 11. Tages-Ansicht */

#tag-ansicht {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--farbe-hintergrund);
    z-index: 400;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.5s ease;
}

#tag-ansicht.active {
    transform: translateX(0);
}

#tag-raster {
    display: grid;
    grid-template-columns: repeat(20, var(--pixel-groesse));
    grid-template-rows: repeat(20, var(--pixel-groesse));
    width: calc(20 * var(--pixel-groesse));
    margin-top: 0;
    position: relative;
}

#tag-raster::before {
    content: '';
    position: absolute;
    inset: calc(var(--pixel-groesse) * 0.5);
    background-image: var(--raster-kreuz);
    background-size: var(--pixel-groesse) var(--pixel-groesse);
    background-position: 0 0;
    pointer-events: none;
    z-index: 0;
}

/* 12. Notiz-Ansicht */

#notiz-hintergrund {
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 16, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 199;
    pointer-events: none;
}

#notiz-hintergrund.active {
    opacity: 1;
    pointer-events: all;
}

#notiz-ansicht {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0);
    transition: transform 0.7s ease;
    z-index: 200;
    pointer-events: none;
}

#notiz-ansicht.active {
    transform: scale(1);
}

#notiz-ansicht.active #karten-container {
    pointer-events: all;
}

.versteckt {
    pointer-events: none;
}

/* Container für Frage- und Antwort-Karte nebeneinander */

#karten-container {
    display: flex;
    align-items: center;
    gap: 20px;
}

#frage-karte-wrapper {
    position: relative;
    flex-shrink: 0;
}

/* "+"-Knopf rechts neben der Frage-Karte, auf Höhe der Oberkante */

#antwort-hinzufuegen-knopf {
    position: absolute;
    top: 0;
    left: calc(100% + 16px);
    background: none;
    border: none;
    color: var(--farbe-flaeche);
    cursor: none;
    padding: 0;
    width: 32px;
    height: 32px;
    z-index: 10;
    transition: color 0.2s, transform 0.2s;
    font-size: 0;
}

/* Das "+"-Symbol aus zwei Balken gebaut */

#antwort-hinzufuegen-knopf::before,
#antwort-hinzufuegen-knopf::after {
    content: '';
    position: absolute;
    background: currentColor;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: background 0.2s;
}

#antwort-hinzufuegen-knopf::before { width: 28px; height: 4px; }
#antwort-hinzufuegen-knopf::after  { width: 4px; height: 28px; }

#antwort-hinzufuegen-knopf:hover {
    transform: scale(1.2);
}

/* Antwort-Karte: erscheint mit Slide-Animation von rechts */

#antwort-karte {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    flex-shrink: 0;
}

#antwort-karte.sichtbar {
    opacity: 1;
    transform: translateX(0);
}

.pixel-karte {
    width: min(50vh, 46vw);
    height: min(50vh, 46vw);
    position: relative;
    background: var(--farbe-flaeche);
}

.karten-flaeche {
    position: absolute;
    inset: 0;
    background: var(--farbe-flaeche);
    color: var(--farbe-text-dunkel);
}

#frage-karte .karten-flaeche {
    display: block;
    padding: 16px 28px 28px 28px;
    overflow: hidden;
}

#antwort-karte .karten-flaeche {
    padding: 0;
    display: flex;
    flex-direction: column;
}

#antwort-karte textarea {
    padding: 28px 28px 64px 28px;
}

.frage-gross {
    font-family: var(--schrift-frage);
    font-size: 80px;
    line-height: 1;
    text-transform: none;
    text-align: left;
    color: var(--farbe-text-dunkel);
    display: block;
}

.frage {
    font-size: 25pt;
    line-height: 1.1;
    margin-bottom: 12px;
    font-family: var(--schrift-frage);
    text-transform: none;
    color: var(--farbe-text-dunkel);
}

textarea {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    font-size: 16pt;
    line-height: 1.6;
    font-family: var(--schrift-notiz);
    background: var(--farbe-flaeche);
    color: var(--farbe-text-dunkel);
    overflow-y: auto;
    padding-bottom: 64px;
    caret-color: var(--farbe-text-dunkel);
    caret-width: 2.5px;
}

#speichern-knopf {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: var(--farbe-text-dunkel);
    cursor: none;
    padding: 0;
    font-size: 0;
    transition: color 0.2s, transform 0.2s;
}

/* Das "+"-Symbol aus zwei Balken gebaut */

#speichern-knopf::before,
#speichern-knopf::after {
    content: '';
    position: absolute;
    background: currentColor;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: background 0.2s;
}

#speichern-knopf::before { width: 28px; height: 4px; }
#speichern-knopf::after  { width: 4px; height: 28px; }

#speichern-knopf:hover {
    transform: scale(1.2);
}

.meta {
    position: absolute;
    left: 28px;
    bottom: 28px;
    font-size: 9pt;
    color: var(--farbe-text-meta);
    font-family: var(--schrift-meta);
}

/* 13. Eigener Pixel-Cursor */

/* Dickes Kreuz aus zwei Balken (gleiche Bauweise wie das "+" bei
   #speichern-knopf / #antwort-hinzufuegen-knopf), angelehnt an das
   "+" der Pix32-Schrift. */

#eigener-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference;
    opacity: 0;
}

#eigener-cursor::before,
#eigener-cursor::after {
    content: '';
    position: absolute;
    background: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#eigener-cursor::before { width: 20px; height: 2px; }
#eigener-cursor::after  { width: 2px;  height: 20px; }

#eigener-cursor.sichtbar {
    opacity: 1;
}

/* 14. Mobile-Anpassungen */

@media (max-width: 768px) {

    /* Kein eigener Cursor auf Touch-Geräten */

    #eigener-cursor {
        display: none;
    }

    /* Raster-Sprung-Knopf: feste, gut antippbare Größe statt an
       --pixel-groesse gekoppelt (die wird auf Mobile winzig) */

    #raster-sprung-knopf {
        width: 20px;
        height: 20px;
    }

    /* Intro-Text: kleinere Schrift, damit lange Zeilen nicht umbrechen */

    .intro-zeile {
        font-size: 13pt;
        line-height: 14pt;
        padding: 0 20px;
    }

    /* Fragezeilen im Intro bleiben deutlich größer als der normale Text */

    .intro-zeile-frage {
        font-size: 30pt;
        line-height: 30pt;
    }

    /* Sterne + Wortmarke: um 90° gedreht, damit sich die Sterne
       vertikal auseinanderschieben und "*brightnotes*" die Höhe
       des Bildschirms ausnutzt statt in der Breite gequetscht zu werden */

    #symbol-buehne {
        gap: 1vw;
        transform: rotate(90deg);
    }

    .stern,
    #wortmarke {
        font-size: clamp(42px, 13vh, 120px);
    }

    /* Der "*"-Glyph der Pix32-Schrift nimmt im eigenen Zeichenfeld
       optisch deutlich weniger Platz ein als ein Buchstabe – bei
       gleicher font-size wirken die Sterne dadurch kleiner. Eigene,
       größere Größe gleicht das an; der Schiebeabstand in script.js
       (schiebeAbstand) misst die tatsächliche gerenderte Sterngröße
       und schiebt entsprechend automatisch weiter nach außen. */

    .stern {
        font-size: clamp(56px, 17vh, 150px);
    }

    /* Haupt-Raster: größere, gut antippbare Pixel (siehe
       rasterGroesseAnpassen() in script.js, erzwingt ein Mindestmaß
       auf Mobile) – dafür scrollbar statt alles auf 100vw zu quetschen */

    #raster-abschnitt {
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
    }

    #raster {
        grid-template-columns: repeat(20, var(--haupt-pixel-groesse));
        grid-template-rows: repeat(20, var(--haupt-pixel-groesse));
        width: calc(20 * var(--haupt-pixel-groesse));
    }

    /* Frage-/Antwort-Karte */

    .pixel-karte {
        width: 78vw;
        height: 78vw;
    }

    #frage-karte .karten-flaeche {
        padding: 14px 20px 20px 20px;
    }

    #antwort-karte textarea {
        padding: 20px 20px 56px 20px;
    }

    textarea {
        font-size: 12pt;
        background: var(--farbe-flaeche);
        color: var(--farbe-text-dunkel);
        overflow-y: auto;
        padding-bottom: 60px;
    }

    #speichern-knopf {
        width: 40px;
        height: 40px;
        font-size: 20px;
        right: 14px;
        bottom: 14px;
    }

    .meta {
        font-size: 8pt;
        left: 20px;
        bottom: 20px;
    }

    /* Frage- und Antwort-Karte übereinander statt nebeneinander,
       damit beide auf schmalen Bildschirmen nutzbar bleiben */

    #karten-container {
        flex-direction: column;
        gap: 16px;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Platz unter der Frage-Karte reservieren, damit der Plus-Knopf
       darunter zum normalen Kartenlayout gehört statt als Überlauf
       außerhalb des scrollbaren Bereichs zu verschwinden (erst nach
       Scrollen sichtbar) */

    #frage-karte-wrapper {
        margin-bottom: 56px;
    }

    #antwort-hinzufuegen-knopf {
        top: auto;
        left: 0;
        bottom: -56px;
        transform: none;
    }

    #antwort-hinzufuegen-knopf:hover {
        transform: scale(1.2);
    }

    #antwort-karte {
        transform: translateY(30px);
    }

    #antwort-karte.sichtbar {
        transform: translateY(0);
    }

    /* Archiv-Übersicht */

    #archiv-tage {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Tages-Ansicht */

    #tag-raster {
        margin-top: 0;
    }

}