/* Globale Definitionen */
body {
    margin: 0;
    padding: 0;
    background-color: #000;
    color: #ffffff;
    font-family: 'Geist Mono', monospace;

}

p {
    font-family: 'Inter', 'Helvetica Neue', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    letter-spacing: 0.01em;
    color: #d6d6d6;
}

/* --- NAVIGATION --- */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 20px 30px; 
    background-color: rgb(0, 0, 0); 
    border-bottom: 1px solid #ffffff;
    z-index: 1000;
    box-sizing: border-box; 
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s steps(50), opacity 0.8s ease;
    text-transform: uppercase;
}

.lang-switch button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    opacity: 0.6;
}

.lang-switch button:hover {
    opacity: 1;
}

.main-header.header-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.back-button {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: 0.2s;
    padding: 5px;
}

.back-button svg { fill: #ffffff; }
.back-button:hover { background: #ffffff; }
.back-button:hover svg { fill: #000; }

.nav-right ul {
    list-style: none;
    display: flex;
    gap: 25px;
    margin: 0;
}

.nav-right li a {
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    font-size: 0.9rem;
    padding: 5px 10px;
}

.nav-right li a:hover, .nav-right li a.active-link {
    background: #ffffff;
    color: #000;
}

/* --- MOBILE ANPASSUNG (bis 768px) --- */
@media (max-width: 768px) {
    .main-header {
        padding: 15px 20px; /* Weniger Padding an den Seiten */
    }

    .nav-right ul {
        gap: 10px; /* Geringerer Abstand zwischen den Links */
    }

    .nav-right li a {
        font-size: 0.75rem; /* Etwas kleinere Schrift */
        padding: 4px 6px;   /* Kleinere Klickflächen, damit alles in eine Reihe passt */
    }

    .back-button svg {
        height: 18px; /* SVG Icon leicht verkleinern */
        width: 18px;
    }
}

/* --- EXTRA SCHMALE GERÄTE (bis 480px) --- */
@media (max-width: 480px) {
    .main-header {
        padding: 10px 15px;
    }

    .nav-right li a {
        font-size: 0.7rem;
        letter-spacing: -0.5px; /* Text enger zusammenrücken */
    }
    
    /* Falls es immer noch zu eng ist: Text-Kürzel für Mobil */
    .nav-right li a[href="#projects"] {
        content: "DATA"; /* Optional: Kürzeres Wort nur für Mobil */
    }
}

/* --- CONTENT STRUCTURE --- */
.system-status-panel {
    border-bottom: 1px solid #ffffff;
    padding: 20px;
    margin-bottom: 40px;
}

.status-flex {
    display: flex;
    align-items: center; /* Zentriert Logo und Text vertikal */
    gap: 20px;           /* Abstand zwischen Logo und Text */
}

.status-icon {
    height: 45px;        /* Deine gewünschte Größe */
    width: auto;
    display: block;
    /* Da das Logo Pixel-Art ist, halten wir es scharf */
    image-rendering: pixelated; 
}

.status-content {
    display: flex;
    flex-direction: column;
}

.system-status-panel h1 {
    margin: 0;
    font-size: 1.2rem;
    letter-spacing: 1px;
    line-height: 1.1;    /* Engerer Zeilenabstand für den kompakten Look */
}

#status-bar { 
    font-size: 0.8rem; 
    margin-top: 5px; 
    color: rgba(255, 255, 255, 0.7);
}

/* Mobil-Anpassung: Wenn der Platz zu eng wird */
@media (max-width: 480px) {
    .status-flex {
        gap: 15px;
    }
    .status-icon {
        height: 45px; /* Etwas kleiner auf dem Handy */
    }
    .system-status-panel h1 {
        font-size: 1rem;
    }
}
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    
    gap: 40px;
    padding: 0 20px;
    max-width: 500px;
    margin: 0 auto 400px auto;
}

.object-box {
    border: 1px solid #ffffff;
    display: flex;
    flex-direction: column;
    aspect-ratio: 1/1;
}

.box-header {
    background: #ffffff;
    color: #000;
    padding: 5px 10px;
    font-weight: bold;
    font-size: 0.8rem;
}

.box-content { padding: 20px; text-align: center; }

.display-img {
    width: 100%;
    max-width: 200px;
    height: auto;
    padding: 5px;
    margin-bottom: 20px;
    filter:invert();
    
    
}

/* Standard-Zustand des Bildes */
.display-img {
    transition: transform 0.8s ease, filter 0.8s ease; /* Macht die Bewegung weich */
    filter: invert();
}

/* Effekt beim Hovern über die Box */
.object-box:hover .display-img {
    filter: invert(0%); /* Farbe kommt zurück */
    transform: scale(1.1); /* Leichtes Vergrößern */
}

.qr-section { border-top: 1px solid #333; padding-top: 15px; }
.qr-section p { font-size: 0.7rem; margin-bottom: 10px; }
.qr-img { width: 80px; filter: invert(1); border: 1px solid #ffffff; }

/* Der Container bleibt als "Fenster" gleich */
.hero-image-container {
    width: 100%;
    height: 150vh; 
    position: relative; 
    z-index: 1;
    clip-path: inset(0 0 0 0); 
    background-color: #000;
}

/* Das Video übernimmt die fixed-Logik des Bildes */
.hero-video {
    width: 100%;
    height: 100vh;
    position: fixed;    /* Parallax-Effekt */
    top: 0;
    left: 0;
    object-fit: cover;  /* Füllt den Bildschirm ohne Verzerrung */
    z-index: 0;
    filter: brightness(0.8); /* Falls das Video zu hell für den Text ist */
    pointer-events: auto;
    display: block;
}

/* Dein bestehender About-Bereich anpassen */
.about-system {
    position: relative; /* Wichtig, damit z-index funktioniert */
    z-index: 2;         /* Setzt den Text HÖHER als das Bild (überdeckt es) */
    background-color: #000; /* Stellt sicher, dass der Text einen soliden Hintergrund hat */
    
    /* Dein bestehendes Styling (z.B. Geist Mono, Padding etc.) bleibt */
}

/* Scroll Indicator Positioning */
.scroll-indicator {
    position: absolute;
    top: 5vh; /* Abstand vom unteren Rand */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 10;
    pointer-events: none; /* Klicks gehen durch auf das Video/Container */
}

.scroll-text {
    font-size: 0.7rem;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}

/* Der Pfeil als CSS-Zeichnung (Retro/System-Look) */
.arrow-down {
    width: 40px;
    height: 40px;
    border-right: 10px solid #fff;
    border-bottom: 10px solid #fff;
    transform: rotate(45deg);
    animation: arrow-bounce 2s infinite;
}

/* Dezente Animation */
@keyframes arrow-bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) rotate(45deg);
        opacity: 0.3;
    }
    40% {
        transform: translateY(10px) rotate(45deg);
        opacity: 1;
    }
    60% {
        transform: translateY(5px) rotate(45deg);
        opacity: 0.8;
    }
}

/* about*/
.about-system {
    position: relative; /* Wichtig für z-index */
    z-index: 5;         /* Liegt WEIT über dem fixed-Bild */
    background-color: #000; /* Verdeckt das Bild komplett */
    margin-top: 0;      /* Muss direkt nach dem hero-container kommen */
    padding: 150px 20px; /* Erzeugt den inneren Abstand */
    line-height: 1.6;
}

/* Container innerhalb von About */
.about-system .container {
    max-width: 600px;
    margin: 0 auto;
}

.glitch-title {
    font-size: 1.5rem;
    letter-spacing: 2px;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
    margin-bottom: 40px;
}

.mission-statement {
    background: #141414;
    padding: 20px;
    border-left: 3px solid #fff;
    margin-bottom: 50px;
}

.arrow {
    color: #ffffff;
    font-weight: bold;
}

.highlight {
    background: #fff;
    color: #000;
    padding: 2px 5px;
}

.divider {
    border: 0;
    border-top: 1px solid #333;
    margin: 50px 0;
}

.narrative {
    color: #ccc;
}

.insight {
    color: #fff;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    padding: 20px 0;
    margin: 30px 0;
}

.quote {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.final-question {
    font-family: 'Geist Mono', monospace;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
    border: 1px solid #fff;
    padding: 20px;
}

/* Responsive Anpassung */
@media (max-width: 600px) {
    .about-system {
        padding: 50px 20px;
    }
}

/* --- ABOUT IMAGE WRAPPER (Korrigiert für volle Sichtbarkeit) --- */
.about-image-wrapper {
    width: 100%;
    height: 100vh; /* Die Höhe des "Fensters" im Text */
    position: relative;
    z-index: 10;
    clip-path: inset(0 0 0 0); /* Maskiert das fixierte Bild auf diesen Bereich */
    background-color: #000;
    margin-bottom: 50px;
    border: 0px solid #ffffff;
    overflow: hidden;
}

.about-img {
    width: 100%;
    height: 100vh;      /* Nutzt die volle Viewport-Höhe für das Parallax-Gefühl */
    position: fixed;
    top: 0;
    left: 0;
    
    /* WICHTIGSTE ÄNDERUNG: */
    object-fit: contain;  /* Bild wird so skaliert, dass es IMMER komplett sichtbar ist */
    object-position: center; /* Zentriert das Bild im Fenster */
    
    padding-top: 50px;      /* Optional: Ein kleiner Sicherheitsabstand zum weißen Rand */
    box-sizing: border-box;
    
    z-index: -1;
    display: block;
    filter: brightness(1.0) contrast(1.1); 
    pointer-events: none; /* Verhindert, dass das Bild Klicks blockiert */
}

/* Technische Bildunterschrift - etwas schöner positioniert */
.image-caption {
    position: absolute;
    bottom: 0;
    right: 0;           /* Rechtsbündig wirkt oft technischer */
    font-size: 0.65rem;
    color: #fff;
    background: #000;   /* Solid schwarz für besseren Kontrast */
    padding: 5px 10px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    z-index: 15;
    text-transform: uppercase;
}



/* ===== EXCEL-CONTAINER ===== */
.excel-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    margin: 40px 0;
    color: #333;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-family: 'Segoe UI', Tahoma, monospace;
}

table.excel-table {
    border-collapse: collapse !important;
    width: 100%;
    border: 1px solid #bbb;
}

table.excel-table thead th {
    background-color: #dadada !important;
    color: rgb(0, 0, 0) !important;
    border: 1px solid #ddd;
    padding: 10px !important;
}

table.excel-table td {
    border: 1px solid #ddd !important;
    padding: 8px !important;
}

/* ===== VERTRAUEN (Spalte 4) ===== */
.v-hoch   { background-color: #c6efce !important; color: #006100 !important; font-weight: bold; }
.v-mittel { background-color: #ffeb9c !important; color: #9c5700 !important; }
.v-niedrig{ background-color: #ffc7ce !important; color: #9c0006 !important; }



/* ===== KONTEXT (Spalte 2) ===== */
.k-produkt              { background-color: #e1f5fe !important; }
.k-oeffentlicher-raum   { background-color: #f3e5f5 !important; }
.k-mobilitaet-fahrzeuge { background-color: #fff3e0 !important; }
.k-einzelhandel-geschaefte { background-color: #e8f5e9 !important; }
.k-kultur-bildung       { background-color: #fce4ec !important; }
.k-gastronomie          { background-color: #efebe9 !important; }
.k-privat-sonstiges     { background-color: #f9fbe7 !important; }
.k-buero-business       { background-color: #e3f2fd !important; }

/* ===== ZIEL (Spalte 3) — alle Klassen vollständig ===== */

/* Advertising / Marketing → blau */
[class*="z-werbung"] {
    border-left: 5px solid #42a5f5 !important;
    background-color: #e3f2fd !important;
}

/* Payment / Product → grün */
[class*="z-zahlung"] {
    border-left: 5px solid #66bb6a !important;
    background-color: #e8f5e9 !important;
}

/* Information → orange */
[class*="z-information"] {
    border-left: 5px solid #ffa726 !important;
    background-color: #fff3e0 !important;
}

/* Interaction → lila */
[class*="z-interaktion"] {
    border-left: 5px solid #ab47bc !important;
    background-color: #f3e5f5 !important;
}

/* Appointment / Booking → teal */
[class*="z-termin"] {
    border-left: 5px solid #26a69a !important;
    background-color: #e0f2f1 !important;
}

/* Access / Ticket → indigo */
[class*="z-zugang"] {
    border-left: 5px solid #5c6bc0 !important;
    background-color: #e8eaf6 !important;
}

/* App / Download → pink */
[class*="z-app"] {
    border-left: 5px solid #ec407a !important;
    background-color: #fce4ec !important;
}

/* Unclear / not scannable → grau */
[class*="z-unklar"] {
    border-left: 5px solid #9e9e9e !important;
    background-color: #f5f5f5 !important;
}

/* ===== MOBILE ===== */
@media screen and (max-width: 768px) {
    .excel-container {
        padding: 0px;
        margin: 20px 0;
    }
    table.excel-table {
        font-size: 10px;
    }
    table.excel-table td,
    table.excel-table th {
        padding: 6px 4px !important;
        min-width: 80px;
    }
}

/* Container für das freistehende Bild-Link-Element */
.dpp-image-block {
    text-align: center;
    margin: 30px 0;
    padding: 20px;
    border: 1px solid #1a1a1a;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.3s ease;
}

.dpp-image-block:hover {
    border-color: #ffffff; /* Dein System-Grün */
    background: rgba(0, 255, 159, 0.05);
}

/* Das Bild selbst */
.about-img-link {
    max-width: 150px; /* Oder die gewünschte Breite */
    height: auto;
    filter: grayscale(1) brightness(0.8); /* Passt es an den Tech-Look an */
    transition: filter 0.3s ease;
}

.dpp-image-block:hover .about-img-link {
    filter: grayscale(0) brightness(1);
}

/* Die Beschriftung unter dem Bild */
.image-caption {
    font-family: monospace;
    font-size: 0.7rem;
    color: #555;
    margin-top: 10px;
    letter-spacing: 2px;
}

/* --- FOOTER --- */
footer { 
    margin-top: 60px; 
    padding: 40px 20px; 
    background-color: #000;
}

.footer-border { 
    height: 1px; 
    background: #333; 
    margin-bottom: 20px; 
}

.footer-grid { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    font-size: 0.8rem;
    gap: 20px; /* Abstand, falls sie sich berühren */
}

.footer-nav {
    display: flex;
    gap: 15px;
}

footer a { 
    color: #ffffff; 
    text-decoration: none; 
    transition: 0.2s;
}

footer a:hover { 
    background: #ffffff; 
    color: #000; 
}

/* --- MOBILE OPTIMIERUNG --- */
@media (max-width: 600px) {
    .footer-grid {
        flex-direction: column; /* Elemente untereinander stapeln */
        text-align: center;
        gap: 25px; /* Mehr Platz zwischen den Zeilen */
    }

    .footer-nav {
        flex-direction: column; /* Links untereinander */
        gap: 10px;
    }

    .footer-nav a {
        margin: 0; /* Alte Margins zurücksetzen */
    }
    
    .socials {
        display: flex;
        gap: 20px;
    }
}