/* ============================================================
   Alps Agenda – Sonniger Wintertag
   Helles, alpines Farbkonzept · Kompakt am Desktop
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,600;0,9..40,700;0,9..40,900;1,9..40,400&family=Playfair+Display:wght@700;900&display=swap');

:root{
  --sky:     #1a6fb5;
  --skyDeep: #0e4a7a;
  --snow:    #f4f8fc;
  --ice:     #dceefb;
  --frost:   #b8d8f0;
  --sun:     #f5a623;
  --sunSoft: #fcebd0;
  --rose:    #d94f72;

  --text:    #1d2d40;
  --textSoft:#3a5068;
  --textMuted:#607890;

  --cardBg:    rgba(255,255,255,.82);
  --cardBorder:rgba(26,111,181,.14);

  --r: 20px;
  --shadow:  0 12px 48px rgba(14,74,122,.10), 0 2px 8px rgba(14,74,122,.06);
  --shadow2: 0 8px 28px rgba(14,74,122,.08);
  --max: 1160px;
}

/* ===== Reset & Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
a{color: var(--sky); text-decoration:none}
a:hover{color: var(--skyDeep)}

body{
  margin:0;
  font-family: 'DM Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 15.5px;
  color: var(--text);
  overflow-x:hidden;
  line-height: 1.65;
  background:
    radial-gradient(ellipse 1400px 600px at 20% 0%, rgba(184,216,240,.50), transparent 70%),
    radial-gradient(ellipse 1000px 500px at 80% 5%, rgba(245,166,35,.12), transparent 65%),
    radial-gradient(ellipse 1200px 800px at 50% 100%, rgba(220,238,251,.60), transparent 70%),
    linear-gradient(180deg, #d6ecfa 0%, #eaf4fc 18%, var(--snow) 45%, #eaf4fc 85%, #d6ecfa 100%);
  background-attachment: fixed;
}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:-1; opacity:.40;
  background:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,.90) 0 1.5px, transparent 2px),
    radial-gradient(circle at 65% 8%,  rgba(255,255,255,.80) 0 1px,   transparent 2px),
    radial-gradient(circle at 82% 55%, rgba(255,255,255,.85) 0 1.5px, transparent 2px),
    radial-gradient(circle at 35% 78%, rgba(255,255,255,.75) 0 1px,   transparent 2px),
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.70) 0 1px,   transparent 2px);
  background-size: 320px 320px, 260px 260px, 300px 300px, 240px 240px, 280px 280px;
}

.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}
main{padding: 18px 0 40px}
section{padding: 18px 0}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:20px;
}
@media (max-width: 980px){
  .grid2{grid-template-columns: 1fr;}
}

/* ===== Navigation ===== */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(16px) saturate(1.2);
  background: linear-gradient(180deg, rgba(214,236,250,.88), rgba(244,248,252,.78));
  border-bottom: 1px solid rgba(26,111,181,.10);
  box-shadow: 0 2px 16px rgba(14,74,122,.06);
}
.nav .bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0;
  gap:16px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color: var(--text);
}
.badge{
  width:40px; height:40px; border-radius:12px;
  background: url('AgileManifesto25.png') center/cover no-repeat;
  box-shadow: 0 4px 14px rgba(26,111,181,.18);
  position:relative; overflow:hidden;
  flex-shrink: 0;
}
.badge::after{
  content:""; position:absolute; inset:0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  pointer-events:none;
}
.brand strong{letter-spacing:.2px; font-weight:700; color: var(--skyDeep)}
.brand small{display:block; color: var(--textMuted); margin-top:1px; font-size:12px}

.menu{display:flex; gap:6px; flex-wrap:wrap; align-items:center; justify-content:flex-end}
.menu a{
  text-decoration:none; color: var(--textSoft);
  padding:8px 14px; border-radius:10px;
  border:1px solid transparent;
  font-weight:600; font-size:14px;
  transition: all .2s ease;
}
.menu a:hover{
  color: var(--skyDeep);
  border-color: rgba(26,111,181,.14);
  background: rgba(26,111,181,.06);
}
.menu a.active{
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--sky), #3a9ad9);
  box-shadow: 0 4px 14px rgba(26,111,181,.22);
}

/* ===== Cards ===== */
.card{
  border-radius: var(--r);
  border: 1px solid var(--cardBorder);
  background: var(--cardBg);
  box-shadow: var(--shadow2);
  overflow:hidden;
  backdrop-filter: blur(8px);
  transition: box-shadow .25s ease;
}
.card:hover{ box-shadow: var(--shadow); }
.card .hd{
  padding:18px 20px 14px;
  border-bottom: 1px solid rgba(26,111,181,.08);
  background: linear-gradient(135deg, rgba(220,238,251,.40), rgba(255,255,255,.20));
}
.card .hd h2{
  margin:0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px; font-weight:700;
  color: var(--skyDeep); letter-spacing:.1px;
}
.card .bd{
  padding:16px 20px 20px;
  color: var(--textSoft); line-height:1.72;
}
.card .bd p{margin:0 0 12px}
.card .bd p:last-child{margin-bottom:0}

/* ===== Page Intro ===== */
.pageIntro{
  border-radius: var(--r);
  border: 1px solid rgba(26,111,181,.16);
  background: linear-gradient(135deg, rgba(255,255,255,.90), rgba(220,238,251,.50));
  box-shadow: 0 16px 60px rgba(14,74,122,.10);
  position: relative; overflow: hidden;
}
.pageIntro::before{
  content:""; position:absolute; inset:-2px;
  border-radius: var(--r);
  background:
    radial-gradient(ellipse 800px 300px at 10% 0%, rgba(26,111,181,.12), transparent 60%),
    radial-gradient(ellipse 600px 300px at 90% 0%, rgba(245,166,35,.10), transparent 60%);
  pointer-events:none;
}
.pageIntro .hd{
  padding: 24px 22px 12px;
  border-bottom: 1px solid rgba(26,111,181,.10);
}
.pageIntro .hd h2{
  margin:0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 26px; font-weight:900;
  color: var(--skyDeep);
}
.pageIntro .bd{
  padding: 16px 22px 22px;
  color: var(--textSoft);
}
.pageIntro .bd p{
  margin:0; font-size: 17px; line-height: 1.78;
}

.kickerSmall{
  display:inline-flex; align-items:center; gap:10px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(26,111,181,.16);
  background: rgba(26,111,181,.06);
  color: var(--sky); font-weight: 700;
  letter-spacing:.2px; margin-bottom: 12px; font-size:13px;
}
.kickerDot{
  width:9px; height:9px; border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 0 5px rgba(26,111,181,.12);
}

/* ===== Home Hero ===== */
.hero{padding: 18px 0}
.heroGrid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:20px; align-items:stretch;
}
@media (max-width: 980px){
  .heroGrid{grid-template-columns: 1fr;}
}
h1{
  margin:14px 0 10px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight:900; line-height:1.10;
  letter-spacing:-.4px; color: var(--skyDeep);
}
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 14px; border-radius:999px;
  background: rgba(26,111,181,.06);
  border:1px solid rgba(26,111,181,.14);
  color: var(--sky); font-weight:700;
  letter-spacing:.15px; font-size:13px;
}
.dot{
  width:9px; height:9px; border-radius:99px;
  background: var(--sky);
  box-shadow: 0 0 0 5px rgba(26,111,181,.14);
}
.leadBlock{
  margin: 0 0 12px; color: var(--textSoft);
  font-size: clamp(15px, 1.3vw, 17.5px); line-height: 1.72;
}
.leadBlockAlt{
  margin: 0; padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(26,111,181,.14);
  background: linear-gradient(135deg, rgba(220,238,251,.50), rgba(252,235,208,.30));
  color: var(--text);
  box-shadow: 0 6px 24px rgba(14,74,122,.06);
  font-size: 14.5px; line-height: 1.70;
}

/* ===== Image panels ===== */
.imgPanel{
  border-radius: var(--r);
  border:1px solid rgba(26,111,181,.12);
  background: rgba(255,255,255,.60);
  box-shadow: var(--shadow);
  overflow:hidden; position:relative;
  min-height: 360px;
}
.imgPanel .img{
  position:absolute; inset:0;
  background-size: cover; background-position: center;
  filter: saturate(1.06) contrast(1.02);
  transform: scale(1.02);
}
.imgPanel::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(244,248,252,.04), rgba(244,248,252,.20)),
    radial-gradient(800px 350px at 30% 10%, rgba(255,255,255,.12), transparent 60%);
  pointer-events:none;
}
.imgPanelContain .img{
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform:none;
}
.imgCaption{
  position:absolute; left:16px; right:16px; bottom:16px;
  padding:10px 14px; border-radius:14px;
  background: rgba(255,255,255,.78);
  border:1px solid rgba(26,111,181,.10);
  backdrop-filter: blur(10px);
  color: var(--textSoft); font-size: 13.5px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}

/* ===== Timeline ===== */
.timelineFull{
  position:relative; padding-left:32px; margin-top:4px;
}
.timelineFull::before{
  content:""; position:absolute;
  left:9px; top:0; bottom:0; width:2px;
  background: linear-gradient(180deg, var(--sky), var(--frost), var(--sun));
  opacity:.65; border-radius:2px;
}
.tlBlock{
  position:relative; margin-bottom:16px;
  padding:14px 16px; border-radius:16px;
  border:1px solid rgba(26,111,181,.10);
  background: rgba(255,255,255,.60);
  backdrop-filter: blur(4px);
}
.tlBlock::before{
  content:""; position:absolute;
  left:-25px; top:18px;
  width:12px; height:12px; border-radius:50%;
  background: var(--sky);
  box-shadow: 0 0 0 4px rgba(26,111,181,.14), 0 2px 8px rgba(26,111,181,.16);
}
.tlBlock ul{
  margin:0; padding-left:18px;
  color: var(--textSoft); line-height: 1.72;
}
.tlBlock ul li{ margin-bottom: 4px; }

/* ===== Nice bullets (Triathlon) ===== */
.bulletsNice{
  margin: 14px 0; padding-left: 0;
  list-style: none; display: grid; gap: 10px;
}
.bulletsNice li{
  padding: 14px 16px; border-radius: 14px;
  border: 1px solid rgba(26,111,181,.12);
  background: linear-gradient(135deg, rgba(220,238,251,.35), rgba(255,255,255,.60));
  color: var(--textSoft); line-height: 1.65;
}
.bulletsNice li b{ color: var(--skyDeep); font-weight: 700; }

/* ===== Tables ===== */
table{width:100%; border-collapse: separate; border-spacing:0}
.tablePop{
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(26,111,181,.16);
  background: rgba(255,255,255,.70);
  box-shadow: 0 8px 32px rgba(14,74,122,.08);
}
.tablePop thead th{
  padding:13px 14px;
  background: linear-gradient(135deg, var(--sky), #3a9ad9);
  color: #fff;
  border-bottom: 2px solid rgba(14,74,122,.20);
  text-align:left; font-weight: 700;
  font-size: 14px; letter-spacing:.3px;
  text-transform: uppercase;
}
.tablePop tbody td{
  padding:12px 14px; color: var(--textSoft);
  border-bottom: 1px solid rgba(26,111,181,.08);
  font-size: 14.5px;
}
.tablePop tbody tr:nth-child(even) td{ background: rgba(220,238,251,.25); }
.tablePop tbody tr:hover td{ background: rgba(220,238,251,.50); }
.tablePop thead th:first-child{ background: var(--skyDeep); }
.tablePop tbody td:first-child{
  font-weight: 700; color: var(--skyDeep);
  background: rgba(220,238,251,.30);
  width: 18%; white-space: nowrap;
}
.tablePop thead th:not(:first-child),
.tablePop tbody td:not(:first-child){
  border-left: 1px solid rgba(26,111,181,.08);
}
.tablePop tbody tr:last-child td{border-bottom:none}

/* ===== Participant Grid & Event Link ===== */
.participantGrid{
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 600px){
  .participantGrid{ grid-template-columns: 1fr 1fr; }
}
.participantGrid li{
  text-align:center;
  padding: 12px 10px;
}
.eventLink{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 9px 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--sky), #3a9ad9);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration:none;
  box-shadow: 0 4px 14px rgba(26,111,181,.22);
  transition: all .2s ease;
}
.eventLink:hover{
  background: linear-gradient(135deg, var(--skyDeep), var(--sky));
  box-shadow: 0 6px 20px rgba(26,111,181,.30);
  color: #fff;
  transform: translateY(-1px);
}

/* ===== Contact Form ===== */
.formGroup{
  margin-bottom: 14px;
}
.formLabel{
  display:block;
  margin-bottom: 5px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--textSoft);
}
.formInput{
  width:100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(26,111,181,.18);
  background: rgba(255,255,255,.70);
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.5;
  transition: border-color .2s ease, box-shadow .2s ease;
  outline: none;
}
.formInput::placeholder{
  color: var(--textMuted);
  opacity:.6;
}
.formInput:focus{
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(26,111,181,.10);
  background: #fff;
}
.formTextarea{
  resize: vertical;
  min-height: 100px;
}
.formInputShort{
  max-width: 120px;
}
.formActions{
  margin-top: 18px;
}
.formBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 24px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, var(--sky), #3a9ad9);
  color: #fff;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(26,111,181,.22);
  transition: all .2s ease;
}
.formBtn:hover{
  background: linear-gradient(135deg, var(--skyDeep), var(--sky));
  box-shadow: 0 6px 20px rgba(26,111,181,.30);
  transform: translateY(-1px);
}
.formBtn:disabled{
  opacity:.6;
  cursor:wait;
  transform:none;
}
.formStatus{
  margin-top: 12px;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  min-height: 20px;
}
.formStatusOk{
  color: #2e8b57;
}
.formStatusErr{
  color: var(--rose);
}

/* ===== Footer / Impressum ===== */
.siteFooter{
  margin-top: 20px;
  border-top: 1px solid rgba(26,111,181,.10);
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(8px);
}
.footerInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 16px 0;
  flex-wrap: wrap;
}
.footerBrand{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color: var(--textSoft);
}
.footerBrand .badge{
  width:28px; height:28px; border-radius:8px;
}
.footerImprint{
  font-size:13px;
  color: var(--textMuted);
  text-align:right;
}
.footerImprint a{
  color: var(--sky);
  font-weight:600;
  text-decoration:none;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(26,111,181,.14);
  transition: all .2s ease;
}
.footerImprint a:hover{
  background: rgba(26,111,181,.06);
  border-color: rgba(26,111,181,.24);
  color: var(--skyDeep);
}

/* ===== Reveal ===== */
.reveal{
  opacity:0; transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.on{ opacity:1; transform:none; }


/* ===========================================================
   DESKTOP COMPACT MODE  (≥ 981px)
   Straffere Abstände, kleinere Typo, mehr Inhalt pro Viewport
   =========================================================== */
@media (min-width: 981px){

  /* -- Globale Abstände -- */
  main{           padding: 10px 0 28px; }
  section{        padding: 10px 0; }
  .grid2{         gap: 14px; }

  /* -- Navigation flacher -- */
  .nav .bar{      padding: 7px 0; }
  .badge{         width:34px; height:34px; border-radius:9px; }
  .brand strong{  font-size: 14px; }
  .brand small{   font-size: 11px; }
  .menu a{        padding: 6px 12px; font-size: 13px; }

  /* -- Typografie kompakter -- */
  body{           font-size: 14px; line-height: 1.58; }
  h1{             font-size: clamp(26px, 3vw, 40px); margin: 10px 0 8px; }

  /* -- Cards enger -- */
  .card{          border-radius: 16px; }
  .card .hd{      padding: 12px 16px 10px; }
  .card .hd h2{   font-size: 17px; }
  .card .bd{      padding: 10px 16px 14px; line-height: 1.58; }
  .card .bd p{    margin: 0 0 8px; }

  /* -- Page Intro kompakter -- */
  .pageIntro{     border-radius: 16px; }
  .pageIntro .hd{ padding: 16px 18px 8px; }
  .pageIntro .hd h2{ font-size: 22px; }
  .pageIntro .bd{ padding: 10px 18px 16px; }
  .pageIntro .bd p{ font-size: 15px; line-height: 1.62; }

  /* -- Hero straffer -- */
  .hero{          padding: 10px 0; }
  .heroGrid{      gap: 14px; }
  .kicker{        padding: 5px 12px; font-size: 12px; }
  .leadBlock{     font-size: 15px; line-height: 1.58; margin-bottom: 8px; }
  .leadBlockAlt{  padding: 10px 14px; font-size: 13.5px; line-height: 1.58; }

  /* -- Bilder nicht so hoch -- */
  .imgPanel{      min-height: 280px; border-radius: 16px; }
  .imgCaption{    padding: 7px 12px; font-size: 12.5px; bottom: 12px; left:12px; right:12px; }

  /* -- Timeline enger -- */
  .timelineFull{  padding-left: 28px; }
  .tlBlock{       padding: 10px 14px; margin-bottom: 10px; border-radius: 14px; }
  .tlBlock::before{ width:10px; height:10px; left:-22px; top:14px; }
  .tlBlock ul{    line-height: 1.55; font-size: 13.5px; }
  .tlBlock ul li{ margin-bottom: 2px; }

  /* -- Tabellen kompakt -- */
  .tablePop{      border-radius: 14px; }
  .tablePop thead th{  padding: 9px 12px; font-size: 12.5px; }
  .tablePop tbody td{  padding: 8px 12px; font-size: 13.5px; }

  /* -- Bullets (Triathlon) -- */
  .bulletsNice{   gap: 8px; margin: 10px 0; }
  .bulletsNice li{padding: 10px 14px; border-radius: 12px; font-size: 13.5px; }

  /* -- Kicker-Badges -- */
  .kickerSmall{   padding: 5px 12px; font-size: 12px; }

  /* -- Footer -- */
  .siteFooter{    margin-top: 14px; }
  .footerInner{   padding: 12px 0; }
  .footerBrand .badge{ width:24px; height:24px; border-radius:7px; }

  /* -- Form compact -- */
  .formGroup{     margin-bottom: 10px; }
  .formLabel{     font-size: 12.5px; margin-bottom: 4px; }
  .formInput{     padding: 8px 12px; font-size: 13.5px; }
  .formBtn{       padding: 8px 20px; font-size: 13.5px; }
  .formActions{   margin-top: 14px; }

  /* -- Participants -- */
  .participantGrid li{ padding: 9px 8px; font-size: 13.5px; }
  .eventLink{ padding: 7px 16px; font-size: 13px; }
}


/* ===========================================================
   MOBILE  (≤ 600px)
   =========================================================== */
@media (max-width: 600px){
  .nav .bar{
    flex-direction: column;
    align-items: flex-start;
    gap:10px;
  }
  .menu{
    width:100%;
    justify-content: flex-start;
    gap:4px;
  }
  .menu a{        padding:6px 10px; font-size:13px; }
  .card .hd{      padding:14px 16px 12px; }
  .card .bd{      padding:14px 16px 16px; }
  .pageIntro .hd{ padding:18px 16px 10px; }
  .pageIntro .bd{ padding:14px 16px 18px; }
  .tablePop thead th,
  .tablePop tbody td{ padding:10px 10px; font-size:13px; }

  /* -- Footer stacked on mobile -- */
  .footerInner{ flex-direction:column; align-items:flex-start; gap:10px; }
  .footerImprint{ text-align:left; }
}