/* ==========================================================================
   Retro ‑ Neo-Brutalism Theme
   ========================================================================== */

/* ----------  CSS Variables  ---------- */
:root{
    /* Palette – Pastel + Neo-Brutal Kontrast */
    --clr-primary: #FFB3B3;      /* zartes Pastell-Koralle */
    --clr-secondary: #B4E3FF;    /* Pastell-Himmelblau   */
    --clr-accent: #FFD59E;       /* sanftes Apricot      */
    --clr-success: #C0F7D2;      /* Pastell-Mint         */
    --clr-dark: #222222;
    --clr-light: #FFFFFF;
    --clr-muted: #666666;

    /* Gradients & Glas */
    --gradient-dark: linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.65));
    --glass-bg: rgba(255,255,255,0.6);
    --glass-blur: blur(8px);

    /* Typography */
    --ff-head: 'Archivo Black', sans-serif;
    --ff-body: 'Roboto', sans-serif;

    --fs-h1: clamp(2.5rem, 5vw, 4rem);
    --fs-h2: clamp(2rem, 4vw, 3rem);
    --fs-base: 1rem;

    /* Spacing */
    --gap-lg: 3rem;
    --gap-md: 1.5rem;
    --gap-sm: .75rem;

    /* Effects */
    --transition: all .3s cubic-bezier(.4,0,.2,1);
    --border-thick: 3px solid var(--clr-dark);
}

/* ----------  Global Reset  ---------- */
*,
*::before,
*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:var(--ff-body); line-height:1.6; background:#F3F1EF; color:var(--clr-dark); }

/* ----------  Typography  ---------- */
h1,h2,h3,h4,h5,h6{
    font-family:var(--ff-head);
    font-weight:700;
    letter-spacing:.5px;
    margin-bottom:var(--gap-sm);
    text-align:center;
}
h1{ font-size:var(--fs-h1); color:var(--clr-light); }
h2{ font-size:var(--fs-h2); color:var(--clr-dark); text-shadow:1px 1px 3px rgba(0,0,0,0.4); }
p{ margin-bottom:var(--gap-sm); font-size:var(--fs-base); }

/* ----------  Links  ---------- */
a{ color:var(--clr-primary); text-decoration:none; transition:var(--transition); }
a:hover,a:focus{ color:var(--clr-dark); text-decoration:underline; }

/* Stil „Weiterlesen“ */
.read-more{
    font-weight:700;
    position:relative;
}
.read-more::after{
    content:'→';
    margin-left:.25rem;
    transition:transform .25s ease;
}
.read-more:hover::after{ transform:translateX(.25rem); }

/* ----------  Buttons (globale Basis)  ---------- */
.btn,
button,
input[type="submit"]{
    border:var(--border-thick);
    border-radius:0;
    padding:.75rem 1.75rem;
    font-weight:700;
    background:var(--clr-dark);
    color:var(--clr-light);
    transition:var(--transition);
}
.btn-accent{ background:var(--clr-accent); color:var(--clr-dark); }
.btn:hover,
button:hover,
input[type="submit"]:hover{
    background:var(--clr-light);
    color:var(--clr-dark);
    transform:translateY(-2px);
    box-shadow:4px 4px 0 var(--clr-dark);
}

/* ----------  Hero Section  ---------- */
#hero{
    position:relative;
    padding:calc(var(--gap-lg)*2) 0;
    color:var(--clr-light);
    text-align:center;
}
#hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--gradient-dark);
}
#hero .container{ position:relative; z-index:1; }

/* ----------  Section Shared ---------- */
section{ padding:var(--gap-lg) 0; }
section:nth-of-type(even){ background:var(--clr-secondary); }
section:nth-of-type(odd){ background:var(--clr-light); }

/* ----------  Cards ---------- */
.card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    border:var(--border-thick);
    background:var(--clr-light);
    transition:var(--transition);
}
.card:hover{ box-shadow:6px 6px 0 var(--clr-dark); transform:translate(-4px,-4px); }

/* Card Image Container */
.card-image,
.image-container{
    width:100%;
    height:260px;
    overflow:hidden;
    border-bottom:var(--border-thick);
    display:flex;
    align-items:center;
    justify-content:center;
}
.card-image img,
.image-container img{
    width:100%;
    height:100%;
    object-fit:cover;
    margin:0 auto;
}

/* ----------  Process List ---------- */
#process ol{ counter-reset:step; padding-left:0; }
#process li{
    list-style:none;
    position:relative;
    padding:.75rem 1.5rem .75rem 3.25rem;
    border-left:var(--border-thick);
    margin-bottom:var(--gap-sm);
}
#process li::before{
    counter-increment:step;
    content:counter(step);
    position:absolute;
    left:-1.45rem;
    top:0;
    background:var(--clr-primary);
    width:2.5rem;
    height:2.5rem;
    border:var(--border-thick);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--ff-head);
}

/* ----------  Resources Links ---------- */
#resources a > div{
    background:var(--clr-light);
    border:var(--border-thick);
    transition:var(--transition);
}
#resources a:hover > div{
    background:var(--clr-accent);
    transform:translateY(-4px);
    box-shadow:4px 4px 0 var(--clr-dark);
}

/* ----------  Contact Form ---------- */
#kontakt form{ backdrop-filter:var(--glass-blur); background:var(--glass-bg); }
#kontakt .form-control,
#kontakt .form-select{
    border:var(--border-thick);
    border-radius:0;
}
#kontakt .form-control:focus,
#kontakt .form-select:focus{
    box-shadow:none;
    border-color:var(--clr-primary);
}

/* ----------  Navbar ---------- */
.navbar{ border-bottom:var(--border-thick); background:var(--clr-accent)!important; }
.nav-link{ font-weight:700; color:var(--clr-dark)!important; }
.nav-link:hover{ color:var(--clr-primary)!important; }

/* ----------  Footer ---------- */
footer{
    border-top:var(--border-thick);
    font-size:.9rem;
}
footer h3, footer h4{ color:var(--clr-dark); }
footer a{ color:var(--clr-dark); }
footer a:hover{ color:var(--clr-primary); text-decoration:underline; }

/* Social Links Stil */
.social-link,
footer a.social-link{
    display:inline-block;
    padding:.25rem .5rem;
    border:var(--border-thick);
    margin-right:.5rem;
    font-weight:700;
}
.social-link:hover{ background:var(--clr-primary); color:var(--clr-dark); }

/* ----------  Cookie Popup ---------- */
#cookiePopup{
    font-size:.9rem;
}
#cookiePopup button{
    background:var(--clr-primary);
    color:var(--clr-dark);
}
#cookiePopup button:hover{
    background:var(--clr-light);
    box-shadow:3px 3px 0 var(--clr-dark);
}

/* ----------  Success Page ---------- */
body.success-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--clr-success);
}

/* ----------  Privacy & Terms ---------- */
body.legal-page{
    padding-top:100px;
}

/* ----------  Parallax Utility ---------- */
.parallax{
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}

/* ----------  Animations (Hand-drawn) ---------- */
@keyframes scribble{
    0%{ stroke-dashoffset:1000; }
    100%{ stroke-dashoffset:0; }
}
.sketch-path{
    stroke:var(--clr-dark);
    stroke-width:3;
    fill:none;
    stroke-dasharray:1000;
    animation:scribble 3s ease forwards;
}

/* ----------  Utility Classes ---------- */
.border-dark{ border-color:var(--clr-dark)!important; }
.text-muted-custom{ color:var(--clr-muted)!important; }
.bg-primary-custom{ background:var(--clr-primary)!important; }
.bg-secondary-custom{ background:var(--clr-secondary)!important; }
.no-border{ border:none!important; }

/* ----------  Image Responsiveness ---------- */
img{ max-width:100%; height:auto; display:block; }

/* ----------  Bootstrap Override Fixes ---------- */
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl{
    max-width:1200px;
}

/* ----------  Media Queries ---------- */
@media (max-width:767.98px){
    .navbar-brand{ font-size:1.25rem; }
    #process li{ padding-left:2.75rem; }
    #process li::before{ width:2rem; height:2rem; left:-1.25rem; }
}
.navbar-toggler{
    display: none;
}