/* =========================================
   Global Reset & Base
   ========================================= */
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  font: 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color: #e9eef2;
  background: #0b0b0f;
  -webkit-text-size-adjust: 100%;
}

/* =========================================
   Header & Logo (Desktop-Overlay als Default)
   ========================================= */
.site-header{
  position: fixed;
  z-index: 5;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  padding: 0 12px;
}

.logo{
  width: auto;
  height: 64px;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.45));
  transition: height .2s ease, max-width .2s ease;
}

/* Overlay-Logo (Desktop) */
.logo-overlay{
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 80px;
  z-index: 4;
  pointer-events: none;
}

.logo.biggest{
  width: auto;
  height: auto;
  max-width: min(72vw, 420px);
  max-height: 18svh;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.45));
  opacity: .95;
}

/* =========================================
   Split Layout (Basis)
   ========================================= */
.split{
  display: block;
  min-height: 100svh;
  padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
}

.pane{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 52svh;
  padding: 24px 16px;
  border-radius: 12px;
}

/* Grundabstand zwischen Cards (wird mobil überschrieben) */
.pane:not(:last-child){
  margin-bottom: 36px;
}

.pane::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  filter: brightness(.82) saturate(1.05);
  transition: transform .6s ease, filter .6s ease;
}
.pane::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 60% at 50% 50%, transparent 0%, rgba(0,0,0,.55) 100%);
}
.pane:hover::before{
  transform: scale(1.01);
  filter: brightness(.9) saturate(1.15);
}

/* Hintergründe */
.left::before{
  background-image:
    linear-gradient(0deg, rgba(77,163,255,.10), rgba(77,163,255,.10)),
    url("../images/it-bg.jpg");
}
.right::before{
  background-image:
    linear-gradient(0deg, rgba(255,120,180,.10), rgba(255,120,180,.10)),
    url("../images/event-bg.jpg");
}

/* Inhalte im Pane */
.center{
  text-align: center;
  width: 100%;
  max-width: 640px;
  padding: 16px;
  margin: 0 auto;
}

.badge{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.18);
  font-size: .9rem;
  margin-bottom: .75rem;
}

.title{
  font-size: clamp(22px, 6vw, 34px);
  margin: .25rem 0 .75rem;
  letter-spacing: .2px;
  line-height: 1.25;
}

.sub{
  color: #b9c0cc;
  margin: 0 0 1.1rem;
}

/* Glass-Box */
.glassbox{
  backdrop-filter: blur(10px);
  background: rgba(0,0,0,0.45);
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
}

/* Call-to-Action */
.cta{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 13px 18px;
  border-radius: 14px;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.cta:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.28);
}

.hint{
  font-size: .95rem;
  font-weight: 600;
  opacity: .9;
}

/* =========================================
   Footer
   ========================================= */
.site-footer{
  position: fixed;
  inset: auto 0 0 0;
  padding: 12px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.72));
  font-size: .95rem;
}

.site-footer a,
.site-footer .linklike{
  color: #e9eef2;
  opacity: .9;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px 4px;
}
.site-footer a:hover,
.site-footer .linklike:hover{
  opacity: 1;
  text-decoration: underline;
}

/* =========================================
   Social Icons
   ========================================= */
.social-icons{
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  right: 12px;
  display: flex;
  gap: 12px;
  z-index: 9999;
  pointer-events: auto;
}

.social-icons a{
  color: #fff;
  font-size: 22px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .25s, transform .25s;
  text-decoration: none;
  border-radius: 10px;
}
.social-icons a:hover{ transform: scale(1.12); }
.social-icons a[aria-label="WhatsApp"]:hover { color: #25D366; }
.social-icons a[aria-label="Instagram"]:hover{ color: #E4405F; }
.social-icons a[aria-label="E-Mail"]:hover  { color: #FFD700; }
.social-icons a[aria-label="Telefon"]:hover { color: #1E90FF; }

/* =========================================
   Back Button
   ========================================= */
.back-btn{
  display: inline-block;
  background-color: #1e1e1e;
  color: #b9d8ff;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: all .25s ease;
  border: 1px solid #444;
  margin: 24px 0 120px;
}
.back-btn:hover{
  background-color: #b9d8ff;
  color: #1e1e1e;
  border-color: #b9d8ff;
  transform: translateY(-2px);
}
.back-btn:active{ transform: translateY(0); }

/* =========================================
   Centered Logo Block (content pages)
   ========================================= */
.center-logo{
  text-align: center;
  margin: 28px 0 24px;
  padding: 0 12px;
}
.center-logo img{
  max-width: 180px;
  height: auto;
}

/* =========================================
   Impressum Layout
   ========================================= */
.impressum-layout{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-width: 960px;
  margin: 100px auto 64px;
  padding: 0 16px;
  text-align: center;
}
.impressum-logo-wrap{
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.impressum-logo{
  max-width: 180px;
  height: auto;
}

/* =========================================
   Map Lazy-Load
   ========================================= */
#map-wrap { margin: 20px 0 8px; }
#map-wrap iframe{
  width: 100%;
  height: 300px;
  border: 0;
  border-radius: 10px;
}
#map-placeholder{
  border: 1px dashed rgba(255,255,255,.3);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  opacity: .9;
}
#map-placeholder p{ margin: 6px 0; }
#load-map-btn{
  padding: 10px 14px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
}
#load-map-btn:hover{ filter: brightness(1.06); }
.map-note{ font-size: .9rem; opacity: .8; }

/* =========================================
   Breakpoints – Tablet & Desktop
   ========================================= */

/* Tablet quer und größer */
@media (min-width: 700px){
  .logo{ height: 80px; }

  .logo-overlay{
    align-items: center;
    padding-top: 0;
    position: fixed; /* Desktop: Overlay bleibt fixed */
    inset: 0;
  }

  .logo.biggest{
    max-width: min(56vw, 520px);
    max-height: 22svh;
  }

  .split{
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100dvh;
    padding-top: 0;
  }

  .pane{
    min-height: auto;
    padding: 28px;
    margin-bottom: 0;
  }

  .glassbox{ backdrop-filter: blur(12px); padding: 20px; }

  .center{ padding: 24px; }

  #map-wrap iframe{ height: 340px; }

  .impressum-layout{
    flex-direction: row;
    align-items: center;
    gap: 48px;
    text-align: left;
    margin: 120px auto 64px;
  }
  .impressum-logo{ max-width: 220px; }

  .social-icons{
    top: 18px;
    right: 18px;
    gap: 14px;
  }
  .social-icons a{
    font-size: 24px;
    width: 40px;
    height: 40px;
  }

  .center-logo img{ max-width: 200px; }
}

/* Desktop groß */
@media (min-width: 1200px){
  .logo{ height: 92px; }
  .logo.biggest{
    max-width: min(42vw, 620px);
    max-height: min(28vh, 320px);
  }

  .pane::before{ transform: scale(1.06); }
  .pane:hover::before{ transform: scale(1.02); }

  .title{ font-size: clamp(28px, 2.6vw, 38px); }

  #map-wrap iframe{ height: 380px; }

  .back-btn{ margin-bottom: 160px; }
}

/* Ultra-wide */
@media (min-width: 1920px){
  .logo.biggest{
    max-width: 38vw;
    max-height: 24vh;
  }
}

/* Niedriger Viewport */
@media (max-height: 640px){
  .logo-overlay{ padding-top: 60px; }
  .logo.biggest{ max-height: 16svh; }
}

/* =========================================
   MOBILE SPEZIFIK: Logo ZWISCHEN den Cards,
   mehr Top-/Bottom-Abstand
   ========================================= */
@media (max-width: 1200px){

  /* Social Icons wirklich ganz oben + mehr Luft darunter */
  .social-icons{
    top: max(6px, env(safe-area-inset-top));
    right: 10px;
  }

  /* Split als Spalte + definierte Reihenfolge */
  .split{
    display: flex;              /* wichtig: Flex, um Reihenfolge zu steuern */
    flex-direction: column;
    gap: 0;
    padding-top: 160px;         /* ↑ mehr Abstand UNTER den Icons */
  }

  /* Reihenfolge erzwingen: erst linke Card, dann Logo, dann rechte Card */
  .pane.left{ order: 1; }
  .logo-overlay{
    position: relative;         /* nicht fixed */
    inset: auto;
    order: 2;                   /* zwischen den Cards */
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 28px auto;          /* Luft um das Logo */
    padding: 0;
    pointer-events: none;
  }
  .pane.right{ order: 3; }

  /* Logo-Größe mobil etwas großzügiger */
  .logo.biggest{
    max-width: min(76vw, 460px);
    max-height: 20svh;
  }

  /* Mehr Abstand zwischen Card 1 und Logo + Logo und Card 2 */
  .pane.left{ margin-bottom: 0; }  /* Abstand steuert das Logo selbst */
  .logo-overlay + .pane{ margin-top: 0; }

  /* Untere Reserve vor dem (großen) Footer */
  body{
    padding-bottom: 160px;      /* ↑ größerer Abstand zur Fußzeile */
  }

  /* Zusätzlich letzte Card nach unten entkoppeln */
  .pane.right{
    margin-bottom: 100px;        /* ↑ Extra-Luft vor dem Footer */ 
  }
  .pane.left{
    margin-top: -100px;   
  }
}



    /* --- Handy-Spezial: Logo zwischen den beiden Cards positionieren --- */
    @media (max-width: 1200px){
      /* Social Icons wirklich ganz oben + mehr Luft drunter */
      .social-icons{
        top: max(6px, env(safe-area-inset-top));
        right: 10px;
      }
      /* Split als Spalte und Reihenfolge steuern */
      .split{
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-top: 160px; /* mehr Abstand unter den Icons */
      }
      /* Reihenfolge: erst linke Card, dann Logo, dann rechte Card */
      .pane.left{ order: 1; margin-bottom: 0; }
      .logo-overlay{
        position: relative; /* NICHT fixed am Handy */
        inset: auto;
        order: 2;           /* zwischen den Cards */
        z-index: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 28px auto;  /* Luft um das Logo */
        padding: 0;
        pointer-events: none;
      }
      .logo.biggest{
        max-width: min(76vw, 460px);
        max-height: 30svh;
      }
      /* Untere Reserve vor dem (großen) Footer */
      body{ padding-bottom: 160px; }
    }

    /* Desktop/Tablet: Overlay-Logo bleibt fix */
    @media (min-width: 1200px){
      .logo-overlay{
        position: fixed;
        inset: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 0;
        z-index: 4;
        pointer-events: none;
      }
    }