/* ======================== CUSTOM FONT: SULPHUR POINT (lokal eingebunden) ======================== */
/* ======================== Sulphur Point -- Copyright 2016 Michal Sahar ======================== */

@font-face {
  font-family: 'Sulphur Point';
  src: url('fonts/SulphurPoint-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sulphur Point';
  src: url('fonts/SulphurPoint-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sulphur Point';
  src: url('fonts/SulphurPoint-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ========================
   THEME / BASE
======================== */
    :root{
    --brand: #4f0093;
    --brand-4: rgba(79, 0, 147, 0.4);
    --bg: #E7DDEA;
    --white: #ffffff;
    --light: #e7ddea;
    --yellow: #FEDE83;
    --font-main: 'Sulphur Point', sans-serif;
    --space-width: 80%;
    }

    *{ box-sizing: border-box; }
    a{ text-decoration: none; color: var(--brand); }
    body{margin: 0;padding: 0;background-color: var(--bg);font-family: var(--font-main);}

/* ========================
   HEADER
======================== */
    .header{ background-color: var(--white); }
    .header-inner{min-height: 120px;width: 80%;display: grid;align-items: center;grid-template-columns: 1fr; gap: 1rem;margin: 0 auto;padding: 12px 0;}
    .brand-box{width: 13rem;}
    .nav ul{list-style: none;margin: 0;padding: 0;display: grid;grid-auto-flow: row;grid-template-columns: repeat(2, auto);gap: 0.75rem 1rem;font-size: 1.5rem;color: var(--brand);justify-items: start;align-items: center;justify-content: start;}
    .nav .pill{background-color: var(--bg);padding: 0.25rem 0.75rem;border-radius: 0 1rem;}
    .nav li a:hover{text-decoration: underline;}

/* ========================
   BURGER
======================== */
    .nav-toggle{appearance:none; border:none; background:var(--white); color: var(--brand);border-radius:12px; padding:8px 10px; display:inline-flex; align-items:center; justify-content:center;gap:0.5rem; cursor:pointer; box-shadow: 0 0 0 1px rgba(0,0,0,.06);}
    .nav-toggle:focus{ outline:2px solid var(--light); }
    .mobile-logo {display: flex;justify-content: center;margin: 20px 0;width: 100%;}
    .mobile-logo svg{width: 60%;height: auto;}
    .handy{display:block}
    .desktop, .tablet{display:none;}

/* ========================
   NOTICE TICKER (LAUFLEISTE)
======================== */
    @keyframes ticker{ from { transform: translateX(0); } to { transform: translateX(-50%); }}
    .notice-wrap{height: 40px; background-color: var(--brand);}
    .notice-ticker{width: 100%;height: 40px;overflow: hidden;position: relative;color: var(--white);display: flex;align-items: center;}
    .ticker-track{display: flex;width: max-content;will-change: transform;animation: ticker var(--ticker-duration, 22s) linear infinite;}
    .ticker-seq{display: flex;gap: 5rem;padding-inline: 1rem;white-space: nowrap;align-items: center;margin-inline: 2.5rem;}
    .ticker-item{font-size: 0.95rem; line-height: 1;}
    .notice-ticker:hover .ticker-track{animation-play-state: paused;}

/* ========================
   HERO
======================== */
    .hero-outer{overflow: hidden;position: relative;width:100%;padding:50px 0;margin:0;display:grid;min-height: 60vh;align-items:center;align-content:center;gap:2rem;}
    .hero-grid{z-index: 5;display:grid;grid-template-columns: 1fr;gap:2rem;align-items:stretch;width: var(--space-width);margin:0 auto;}
    .headline{color: var(--brand);margin:0;display:grid;justify-items:end;line-height:1;align-content:center;}
    .headline .line1{font-size:9vw;white-space:nowrap;display:block;width:100%;text-align:right;}
    .headline .line2{display:block;width:100%;text-align:right;white-space:nowrap;font-size: 13vw;line-height:1;}
    .tile-purple{max-width:100%;background-color: var(--brand);border-radius: 50px 0;display:flex;align-items:center;justify-content:center;padding:40px;aspect-ratio: 20 / 9;}
    .tile-purple svg{ width:100%; height:100%; fill: var(--white);}
    .features{z-index: 5;width:  var(--space-width);margin:0 auto;background-color: var(--brand);border-radius: 0 50px;display: grid;padding: 30px 50px;grid-template-columns: 1fr;gap: 1rem;height: auto;}
    .feature-card{background-color: var(--white);width: 100%;border-radius: 0 40px;display: flex;justify-content: center;align-items: center;color: var(--brand);min-height: 84px;}
    .feature-inner{display: flex; gap: .5rem; align-items: baseline;}
    .feature-num{font-size:4rem; line-height: 1;}
    .feature-text{font-size:1.4rem;}
    .svg-back{position: absolute;z-index: 0;top: 0px;left: -300px;}

/* ========================
   COUNTDOWN
======================== */
    .countdown{width:100%;background-color: var(--brand);display:grid;justify-content:center;gap:16px;padding:50px 0;}
    .countdown h2{color: var(--light);font-size: 3rem;font-weight: 100;margin: 0;line-height: 1;text-align: center;}
    .countdown-grid{display: grid;grid-template-columns: repeat(4, 1fr);font-variant-numeric: tabular-nums;font-feature-settings: "tnum" 1, "lnum" 1;color: var(--yellow);}
    .cd-slot{display: grid;grid-auto-flow: row;justify-items: center;align-items: end;row-gap: 0.35rem;padding-inline: 0.1em;}
    .cd-slot .cd-num{display: inline-block;width: 2ch;text-align: center;line-height: 1;font-size: 4rem;}
    .cd-slot.cd-days .cd-num{ width: 3ch; }
    .cd-label{display: block;width: 100%;text-align: center;font-size: 1rem;opacity: 0.9;color: var(--light);}
    #cd-status{ color: var(--light); text-align:center; font-size:1.5rem; opacity:0.85;}
    .einladungs-countdown{padding: 100px 0;}

/* ========================
   SECTION: VIOLETTER HINTERGRUND
======================== */
    .section-violet-flex{background-color: var(--brand); display: flex;}
    .container-70{width: var(--space-width);margin: 50px auto;display: grid;align-items: center;align-content: center;gap: 1.5rem;justify-content: center;grid-template-columns: 1fr;grid-template-rows: 1fr 1fr;}
    .bubble{width: 100%;background-color: var(--light);border-radius: 50px 0;padding: 30px;aspect-ratio: 4 / 2;}
    .bubble h2{text-align: center;color: var(--brand);margin: 0;line-height: 1;font-size: 2.5rem;font-weight: 500;}
    .bubble p{text-align: center;color: var(--brand);margin-bottom: 0;font-size: 1rem;  line-height: 1.2;}
    .card-white{width: 100%;height: 100%;background-color: var(--white);border-radius: 0 50px;position: relative;overflow: visible;}
    .arrow-stick{position:absolute;right: -1rem;bottom: -1rem;width: 7rem;height:auto;fill: var(--light);}

/* ========================
   SECTION 70-GRID (BUBBLE RECHTS)
======================== */
    .section-70-grid{width: var(--space-width);margin: 50px auto;display: grid;align-items: center;align-content: center;gap: 1rem;justify-content: center;grid-template-columns: 1fr;grid-template-rows: 1fr 1fr;}
    .card-white-fixed{width: 100%;height: 100%;background-color: var(--white);border-radius: 0 50px;}
    .bubble-purple{width: 100%;background-color: var(--brand);border-radius: 50px 0;padding: 40px;aspect-ratio: 4 / 2;}
    .bubble-purple h2{text-align: center;color: var(--yellow);font-size: 2.5rem;font-weight: 500;margin: 0;line-height: 1;}
    .bubble-purple p{text-align: center;color: var(--light);margin-bottom: 0;line-height: 1.2;font-weight: 100;}

/* ========================
   EINLADUNG
======================== */
    .einladungs-grid {width: var(--space-width);margin: 50px auto;display: grid;gap: 1rem;grid-template-columns:1fr;grid-template-rows: 1fr 1fr;align-items: stretch;}
    .einladung-fixed {width: 100%;background-color: var(--white);border-radius: 50px 0;}
    .bg-einladung {background-size: contain;background-repeat: no-repeat;background-position: center;background-color: var(--white);}
    .einladung-bubble-purple {background-color: var(--brand);border-radius: 0 50px;padding: 40px;display: flex;flex-direction: column;justify-content: center;}
    .einladung-bubble-purple h2 {text-align: center;color: var(--yellow);font-size: 2.5rem;margin: 0;}
    .einladung-bubble-purple p {text-align: center;color: var(--light);margin: 0;font-size: 1.5rem;}
    .download-btn {display: inline-block;margin-top: 20px;padding: 12px 25px;background: var(--yellow);color: var(--brand);text-decoration: none;font-weight: 600;border-radius: 12px;font-size: 1.2rem;text-align: center;transition: 0.2s ease;}
    .download-btn:hover {background: var(--light);color: var(--brand);transform: translateY(-2px);}
    .cal-btn {display: flex;margin-top: 20px;padding: 12px 25px;background: var(--yellow);color: var(--brand);text-decoration: none;font-weight: 600;border-radius: 12px;font-size: 1.2rem;transition: 0.2s ease;justify-content: center;text-align: center;}
    .cal-btn:hover {background: var(--light);transform: translateY(-2px);}



/* ========================
   DUAL SCROLLER – FIXED
======================== */
    /* Vertikal-Animation */
    @keyframes scroll-up   { from{ transform: translateY(0)} to { transform: translateY(-50%)}}
    @keyframes scroll-down { from{ transform: translateY(-50%)} to { transform: translateY(0)}}
    /* Hochiziontale-Animation */
    @keyframes slide-left { from { transform: translateX(0)} to { transform: translateX(-50%)}}
    @keyframes slide-right { from { transform: translateX(-50%)} to { transform: translateX(0)}}
    
    .duo-scroller{width: 100%;margin: 0 auto;position: relative;}
    .duo-inner{display: grid;grid-template-columns: 1fr;gap: 1.25rem;height:60vh;overflow: hidden;overflow-x: hidden;}
    .col{position: relative; overflow: hidden;}
    .col .track{ display: grid; gap: 1.25rem;}
    .card-img{background-size: cover;background-position: center;background-repeat: no-repeat;aspect-ratio: 16 / 9;border-radius: 0 50px;transform: translateZ(0);transition: transform 0.35s ease, box-shadow 0.35s ease, filter .35s ease;content-visibility: auto;}
    .card-img.alt{ border-radius: 50px 0;}

/* ========================
   TEAM
======================== */
    .section-team{background-color: var(--brand); display:flex;}
    .container-70-large{width: var(--space-width);margin:50px auto;display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:center;align-content:center;justify-content:center;}
    .team-title{grid-column: 1 / -1;display:flex;align-items:center;justify-content:center;margin:0;font-size: 3.5rem;color: var(--yellow);}
    .card-white-300,.card-white-300-alt{width:100%;min-height:240px;background-color: var(--white);padding:40px;aspect-ratio: 4 / 2;}
    .card-white-300{border-radius: 0 50px;}
    .card-white-300-alt{border-radius: 50px 0;}
    .team-card{position: relative;background-size: cover;background-position: center;background-repeat: no-repeat;overflow: hidden;isolation: isolate;transition: transform 0.25s ease;}
    .team-card:hover{ transform: translateY(-2px);}
    .team-card::after{content: "";position: absolute; inset: 0;background: var(--brand-4);opacity: 1; transition: opacity 0.25s ease; z-index: 1;}
    .team-overlay{position:absolute; inset:0;display:grid; place-items:center; gap:.5rem; text-align:center;padding: 16px; opacity: 1; transform: translateY(6px);transition: opacity 0.25s ease, transform 0.25s ease; z-index: 2;align-content: center;}
    .team-overlay svg{width: 150px; height: auto;}
    .team-name{display: block; font-weight: 700; color: var(--white);padding: .35rem .75rem; border-radius: .75rem;font-size: 2rem;}
    .team-card:hover::after, .team-card:focus-within::after{opacity: 1;}
    .team-card:hover .team-overlay, .team-card:focus-within .team-overlay{opacity: 1;transform: translateY(0);}

/* ========================
   FOOTER
======================== */
    .site-footer{background: var(--white);color: var(--brand);padding-top: 40px;}
    .footer-inner{width: var(--space-width);margin: 0 auto;display: grid;grid-template-columns: 1fr;gap: 2rem;}
    .footer-col{display: grid; align-content: start; gap: 1rem;}
    .footer-logo-box{display: grid; place-items: start;}
    .footer-logo svg, .footer-logo{width: 180px; height: auto; display:block;}
    .footer-text{margin: 0; line-height: 1.1;}
    .footer-title{margin: 0; font-size: 2rem; font-weight: 700;}
    .footer-links{list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem;}
    .footer-links a{text-decoration: none; padding: 0.25rem 0; border-radius: 0.5rem;transition: color 0.2s ease, background-color 0.2s ease;}
    .footer-links a:hover{text-decoration: underline;}
    .contact-block{display: grid; padding: 0.35rem 0;}
    .contact-role{font-weight:900;}
    .contact-mail{text-decoration: none; word-break: break-word;}
    .contact-mail:hover{text-decoration: underline;}
    .footer-bottom{width: var(--space-width);margin: 24px auto 0;display: flex;align-items: center;gap: 0.65rem;padding: 14px 0 26px;flex-wrap: wrap;}
    .footer-bottom .bottom-link{text-decoration: none;}
    .footer-bottom .bottom-link:hover{text-decoration: underline;}
    .footer-bottom .dot{opacity: 0.6;}


@media (prefers-reduced-motion: reduce){
    .ticker-track{animation: none;}
    .col-left .track,.col-right .track{animation: none;}
    .duo-inner{scroll-behavior: auto;}
}

@media (max-width: 767.98px){
    /* ======================== DUAL SCROLLER – FIXED ======================== */
        .duo-scroller{position: relative;}
        .duo-inner{display: block;overflow: hidden;height: max-content;padding-inline: 0;margin: 50px 0;}
        .col-left, .col-right{display: block;}
        .col-right .track{display: inline-grid;grid-auto-flow: column;gap: 12px;white-space: nowrap;will-change: transform;animation: slide-left 45s linear infinite;}
        .col-left .track{display: inline-grid;grid-auto-flow: column;gap: 12px;white-space: nowrap;will-change: transform;animation: slide-right 45s linear infinite;}
        .card-img{width: 20rem;}
}


@media (min-width: 768px){
    /* ======================== HEADER ======================== */
        .header-inner{grid-template-columns: 1fr 2fr; gap: 2rem;}
        .nav ul{grid-auto-flow: column;grid-template-columns: repeat(4, 9rem);font-size: 1.5rem;justify-items: end;justify-content: end;gap: 0.5rem;}

    /* ======================== BURGER ======================== */
        .tablet{display:block}
        .desktop, .handy{display:none;}

    /* ======================== NOTICE TICKER (LAUFLEISTE) ======================== */
        .ticker-item{ font-size: 1rem; }

    /* ======================== HERO ======================== */
        .features{grid-template-columns: 1fr 1fr 1fr; gap: 2rem; height: 150px;}
        .svg-back{top:0;left: 0px;}

    /* ======================== COUNTDOWN ======================== */
        .cd-slot .cd-num{font-size: 5.5rem;}
        .cd-sep{font-size: 5.5rem;}

    /* ======================== SECTION: VIOLETTER HINTERGRUND ======================== */
        .container-70{gap: 3rem; grid-template-columns: 1fr 1fr;grid-template-rows: 1fr;}

    /* ======================== SECTION 70-GRID (BUBBLE RECHTS) ======================== */
        .section-70-grid{gap: 3rem;justify-content: center;grid-template-columns: 1fr 1fr;grid-template-rows: 1fr;}

    /* ======================== EINLADUNG ======================== */
        .einladungs-grid{gap: 3rem;justify-content: center;grid-template-columns: 1fr 1fr;grid-template-rows: 1fr;}

    /* ======================== DUAL SCROLLER – FIXED ======================== */
        .duo-inner{width: var(--space-width);margin: 0 auto;grid-template-columns: 1fr 1fr;gap: 2rem;}
        .col-left .track  {animation: scroll-down 45s linear infinite;}
        .col-right .track {animation: scroll-up   45s linear infinite;}

    /* ======================== TEAM ======================== */
        .container-70-large{margin:100px auto;grid-template-columns:1fr 1fr; gap:3rem;}
        .team-title{grid-column: 1 / 3;}
        .card-white-300, .card-white-300-alt{min-height:300px;}

    /* ======================== FOOTER ======================== */
        .footer-inner{grid-template-columns: 1.2fr 1fr 1fr; gap: 3rem;}
}


@media (max-width: 1023.98px){
    /* ======================== BURGER ======================== */
        .header-inner{grid-template-columns: 1fr auto;}
        .nav{position: fixed; top: 0; right: 0;width: min(86vw, 360px); height: 100dvh; background: var(--white);box-shadow: -10px 0 40px rgba(0,0,0,.18);transform: translateX(100%); transition: transform .28s ease;padding: 20px 16px; z-index: 1001; display:block;}
        .nav ul{display:grid; grid-auto-flow: row; grid-template-columns: 1fr; gap: 14px; justify-items: center; font-size: 2rem;}
        .nav ul li a{color: var(--brand); text-decoration: none;}
        .nav-backdrop{position: fixed; inset: 0; background: rgba(0,0,0,.35); backdrop-filter: blur(1px); z-index: 1000;}
        .nav.is-open{transform: translateX(0);}
        .nav-open .nav-backdrop{display:block;}
}


@media (min-width: 1024px){ 
    /* ======================== THEME / BASE ======================== */
        :root{--space-width: 90%;}

    /* ======================== NOTICE TICKER (LAUFLEISTE) ======================== */
        .ticker-item{font-size: 1.05rem;}
        .ticker-seq{gap: 30rem;margin-inline: 15rem;}
        .notice-ticker{width: 80%;margin: 0 auto;-webkit-mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);}

    /* ======================== HERO ======================== */
        .hero-outer{height:70vh; margin:0 auto;}
        .hero-grid{grid-template-columns: 1.5fr 1fr; gap:3rem;}
        .headline .line1{font-size: 4vw;}
        .headline .line2{font-size: 7vw;}

    /* ======================== BURGER ======================== */
        .nav-toggle, .tablet, .handy, .mobile-logo, .nav-backdrop{display:none;}
        .desktop{display:block}

    /* ======================== COUNTDOWN ======================== */
        .cd-slot .cd-num{font-size: 7rem;}
        .cd-sep{font-size: 7rem; }

    /* ======================== SECTION: VIOLETTER HINTERGRUND ======================== */
        .container-70{margin: 100px auto;}
        .bubble{padding: 80px; }
        .bubble h2{font-size: 3.5rem;}
        .bubble p{ font-size: 1.5rem; font-weight: 400;}
        .arrow-stick{width: 12rem;}

    /* ======================== SECTION 70-GRID (BUBBLE RECHTS) ======================== */
        .section-70-grid{margin: 100px auto;grid-template-columns: 1fr 1fr; grid-template-rows: 1fr;}
        .bubble-purple{padding: 80px;}
        .bubble-purple h2{font-size: 3.5rem; font-weight: 100;}

    /* ======================== EINLADUNG ======================== */
        .einladungs-grid{margin: 100px auto;grid-template-columns: 1fr 1fr; grid-template-rows: 1fr;}
        .einladung-bubble-purple{padding: 80px;}
        .einladung-bubble-purple h2{font-size: 3.5rem; font-weight: 400;}

    /* ======================== DUAL SCROLLER – FIXED ======================== */
        .duo-scroller{width: var(--space-width);}
   
    /* ======================== TEAM ======================== */
        .team-overlay, .team-card::after{opacity: 0;}
}

@media (min-width: 1280px){
    /* ======================== THEME / BASE ======================== */
        :root{--space-width: 70%;}

    /* ======================== DUAL SCROLLER – FIXED ======================== */
        .duo-inner{width: 100%;margin:0;}
}



/* ======================== UTIL BACKGROUND IMAGES ======================== */
/* Allgemein */
.bg-space{background-image: url('image/space.webp'); background-size: cover; background-repeat: no-repeat; background-position: center; }
.bg-konzept{background-image: url('image/konzept.webp'); background-size: cover; background-repeat: no-repeat; background-position: center; }
.bg-einladung{background-image: url('image/einladung.webp');}
/* Dual Scroller – linke Spalte */
.bg-l-1{ background-image:url('image/code.webp'); }
.bg-l-2{ background-image:url('image/ideenfindung.webp'); }
.bg-l-3{ background-image:url('image/logo.webp'); }
.bg-l-4{ background-image:url('image/css.webp'); }

/* Dual Scroller – rechte Spalte */
.bg-r-1{ background-image:url('image/webseite.webp'); }
.bg-r-2{ background-image:url('image/namensschilder.webp'); }
.bg-r-3{ background-image:url('image/database.webp'); }
.bg-r-4{ background-image:url('image/farben.webp'); }

/* Team Karten */
.team-carla{ background-image:url('image/CarlaPortrait.jpg'); }
.team-laura{ background-image:url('image/LauraPortrait.jpg'); }
.team-fanny{ background-image:url('image/FannyPortrait.jpg'); }
.team-max { background-image:url('image/MaxPortrait.jpg'); }