/* =========================================
   1. SCHRIFTART (Lokal eingebunden)
   ========================================= */
@font-face {
    font-family: 'Yanone Kaffeesatz ZeroHack';
    src: url('fonts/YanoneKaffeesatzZeroHack-Regular.woff2') format('woff2'),
         url('fonts/YanoneKaffeesatzZeroHack-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* =========================================
   2. FARBPALETTE (Badezimmer-Style)
   ========================================= */
:root {
    --bg-base: #f4f7f8;       
    --tile-line: #e2e8f0;     
    --text-color: #2c3e50;    
    --accent-color: #5aa9e6;  
    --link-color: #0066cc;    
    --box-bg: #ffffff;        
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); 
}

/* =========================================
   3. BASIS-STYLING & KACHELWAND
   ========================================= */
body {
    font-family: 'Yanone Kaffeesatz ZeroHack', sans-serif;
    background-color: var(--bg-base);
    background-image: 
        linear-gradient(var(--tile-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--tile-line) 1px, transparent 1px);
    background-size: 40px 40px; 
    color: var(--text-color);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    font-size: 1.25rem;
}

/* =========================================
   4. LAYOUT & BOXEN (Keramik auf Fliesen)
   ========================================= */
header, main, footer {
    position: relative;
    z-index: 10; 
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

header {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 40px;
    background-color: var(--box-bg);
    padding: 30px 20px;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    border-top: 5px solid var(--accent-color);
}

h1 {
    font-size: 4.5rem;
    margin: 0;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.slogan {
    font-size: 1.6rem;
    color: #64748b;
    margin-top: 5px;
}

h2 {
    color: var(--accent-color);
    border-bottom: 2px solid var(--tile-line);
    padding-bottom: 5px;
    margin-top: 40px;
    font-size: 2rem;
}

a {
    color: var(--link-color);
    text-decoration: none;
    border-bottom: 1px dotted var(--link-color);
}

a:hover {
    color: var(--accent-color);
    border-bottom-style: solid;
}

.peering-details {
    background-color: var(--box-bg);
    border-left: 5px solid var(--accent-color);
    padding: 20px;
    margin: 20px 0;
    border-radius: 4px;
    box-shadow: var(--box-shadow);
    z-index: 2;
}

.peering-details p {
    margin: 8px 0;
}

footer {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 30px;
    font-size: 1rem;
    color: #94a3b8;
    background-color: var(--box-bg);
    padding: 15px;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
}

/* =========================================
   5. STICKER-LOGIK
   ========================================= */

/* Basis für ALLE Aufkleber/Schilder (versteckt auf Mobile) */
.sticker, .denkmal, .badgateway {
    position: absolute; 
    z-index: 1;      
    display: none;   
}

/* Spezifisches Styling nur für die echten Sticker */
.sticker {
    width: 180px;    
    height: 180px;   
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.15); 
    border-radius: 4px; 
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Alles ab hier wird nur auf Desktop-Bildschirmen angezeigt */
@media (min-width: 1200px) {
    
    /* Sichtbar machen */
    .sticker, .denkmal, .badgateway {
        display: block; 
    }

    /* --- Die Sticker --- */
    .s1 {
        top: 10vh; 
        left: 5vw; 
        --rot: -6deg; 
        transform: rotate(var(--rot)); 
    }

    .s2 {
        top: 40vh;
        right: 8vw;
        --rot: 4deg;
        transform: rotate(var(--rot)); 
    }

    .s3 {
        top: 75vh;
        left: 8vw;
        --rot: 8deg;
        transform: rotate(var(--rot)); 
    }

    .s4 {
        top: 15vh;
        right: 8vw;
        --rot: -3deg;
        transform: rotate(var(--rot)); 
    }

    /* Der Hover-Effekt (gilt nur für .sticker) */
    .sticker:hover {
        transform: scale(1.05) rotate(var(--rot));
        box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.25);
        z-index: 2; 
    }
    
    /* --- Die Schilder (ohne Hover & ohne Schatten) --- */
    .denkmal {
        top: 130vh;
        right: 7vw;
        --rot: 2deg;
        max-width: 150px;
        transform: rotate(var(--rot)); 
    }
    
    .badgateway {
        top: 150vh;
        right: 5vw;
        --rot: -1deg;
        max-width: 250px;
        transform: rotate(var(--rot)); 
    }
    
}

/* =========================================
   6. POST-IT LOGIK (Der CSS-Frickel-Zettel)
   ========================================= */

.post-it {
    position: absolute;
    width: 220px;
    height: 220px; 
    background: #fff; /* Wie gewünscht in Weiß */
    overflow: hidden;
    border-radius: 0 0 0 30px/45px; 
    box-shadow:
        inset 0 -40px 40px rgba(0,0,0,0.04),
        inset 0 25px 10px rgba(0,0,0,0.02),
        3px 5px 8px rgba(0,0,0,0.15);
        
    z-index: 6;
    display: none; /* Auf Handys ausblenden */
    transform: rotate(var(--rot, 0deg)); 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Zettel auf Desktop sichtbar machen */
@media (min-width: 1200px) {
    .post-it {
        display: block; 
    }
}

/* Das eingeklappte Eselsohr (unten links) */
.post-it::before {
    content: "";
    display: block;
    position: absolute;
    width: 20px;
    height: 25px;
    background: #ded8d8; 
    box-shadow:
        3px -2px 10px rgba(0,0,0,0.15),
        inset 15px -15px 15px rgba(0,0,0,0.1);
    left: 0;
    bottom: 0;
    z-index: 4;
    transform: skewX(25deg);
}

/* Die Grafik innerhalb des Zettels */
.post-it img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    position: relative;
    z-index: 3; 
    mix-blend-mode: multiply; 
}

/* Wackeln beim Drüberfahren für den Post-it */
.post-it:hover {
    transform: scale(1.05) rotate(var(--rot, 0deg));
    box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 7;
}

/* =========================================
   7. PÖMPEL
   ========================================= */

.poempel {
    position: absolute;   /* Bleibt immer unten am Bildschirmrand stehen */
    bottom: 0px;     /* Steht leicht über den unsichtbaren unteren Rand hinaus */
    left: -15vw;         /* Etwas Abstand vom linken Rand */
    width: 80px;      /* Größe anpassen, je nachdem wie groß deine Grafik ist */
    height: auto;
    z-index: 5;        /* Liegt vor den Fliesen, aber hinter Pop-ups */
    
    /* Ein leichter Drop-Shadow, da es wahrscheinlich ein freigestelltes PNG ist */
    filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.0));
    
    display: none;     /* Auf dem Handy verstecken, damit er nicht im Weg ist */
    
    /* Ein winziger Neigungswinkel, damit er nicht zu steril steht */
    transform: rotate(-3deg);
    transition: transform 0.2s ease;
}

/* Auf Desktop sichtbar machen */
@media (min-width: 1200px) {
    .poempel {
        display: block; 
    }
    
    /* Kleiner Gag: Wenn man mit der Maus drüberfährt, "wackelt" er */
    .poempel:hover {
        transform: rotate(5deg) scale(1.05);
    }
}