/* ---------- Grundfarben & Tokens ---------- */
:root{
  --bg:#B1B2B5;
  --hero-overlay: rgba(0,0,0,.35);
  --green:#458978;
  --text:#0a0a0a;
  --muted:#5b5c60;
  --card:#f9faff;
  --accent:#1a73e8;
  --radius:14px;
  --radius-sm:10px;
  --gap:clamp(16px, 3vw, 28px);
  --menu: #f2f2e7;
  --lightsky: #98CEF3;
  --coyotebrw: #786755;
  --beaverbrw: #A99786;
  --blue: #79B5EF;
  --walnut: #6B5C4D;
  --olive: #898724;
  --onyx: #121713;
  --copper: #A87954;
  --oliveleaf: #525B2C;
  --silver: #AFB1AB;
  --greyolive: #9A9991;


}

/* ---------- Reset & Basics ---------- */
*{ box-sizing:border-box; margin:0; padding:0 }
html,body{ height:100% }
body{
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.45;
}


.frame-board{ min-height:100dvh; display:flex; flex-direction:column }
main{ flex:1 }

/* ---------- Header / Navigation ---------- */
.site-header{
  position:relative; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--gap);
  padding: 8px clamp(16px, 3vw, 48px);
  background:linear-gradient(to bottom, rgba(255,255,255,.9), rgba(255,255,255,.75));
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(0,0,0,.06);
  overflow: visible;
}

.brand{ display:flex; align-items:center; gap: 6px; }
.brand__title{ font-weight:700; letter-spacing:.2px; font-size:4.1rem; font-family: Arial, Helvetica, sans-serif; color: #0a0a0a;  }
 #sharp{ font-weight:700; color: var(--green) }
 #im{ font-weight:700; color: var(--green)}

.main-nav{ display:flex; align-items:center; gap:12px; position:relative }
.nav-toggle{
  display:none;
  border:1px solid rgba(0,0,0,.1);
  border-radius:10px; padding:8px 12px; background:#fff; cursor:pointer;
}
.nav-list{
  display:flex; gap: clamp(16px, 4vw, 36px);
  list-style:none; margin:0; padding:0;
}
.nav-list a{ 
  text-decoration:none; 
  color:var(--copper); 
  font-weight:600; 
  font-size: 18px; }
.nav-list a:hover{
  color: #706e6e;


}

/* ---------- Hero (Hintergrundbild) ---------- */
.background-main{
  position:relative;
  height: 650px;
  min-height:min(64vh, 720px);
  display:grid; place-items:center;
  overflow:hidden;
  margin-top: -5px;
}

/*Neu/ Verlauf */
.background-main:after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 300px;
z-index: 1;
pointer-events: none;
background: linear-gradient(
  to bottom,
  rgba(255,255,255,0) 0%
  rgba(255,255,255,0.4) 40%,
  rgba(255,255,255,0.75) 70%,
  #fff 100%
);
}


#bgpic{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index: 0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  filter: brightness(.85);
}
.background-main::before{
  content:""; position:absolute; inset:0;
  background:var(--hero-overlay);
  z-index: 0;
}
.hero-overlay{
  position:relative; z-index:2;
  width:min(100%, 1200px);
  padding: clamp(24px, 6vw, 80px);
  color:#fff; text-align:left;
}
.hero-title{
  margin:0 0 6px 0;
  font-size: clamp(28px, 4.6vw, 56px);
  font-weight:800;
}
.hero-lead{
  margin:0;
  font-size: clamp(16px, 2.2vw, 22px);
  max-width: 48ch;
}
.hero-skew{
  position:absolute; inset:auto 0 0 0; height:120px; z-index:1;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,0.92));
  clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
  display: none;
}

/* ---------- Section Container allgemein ---------- */
.section-container{
  position: relative;
  z-index: 3;
  width:min(1200px, 92%);
  margin: clamp(16px, 4vw, 36px) auto;
  top: 0;
}
.section-container:first-of-type{
  margin-top: -120px;
}

/* ---------- Kursprogramm (ersetzt frühere .course-card) ---------- */
#course-program{
  display:grid; gap:var(--gap);
  grid-template-columns: 1.1fr .9fr;
  align-items:start;
  background: linear-gradient(to bottom, rgba(177,178,181,0.75), var(--menu));
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 14px 36px rgba(0,0,0,.12);
  padding: clamp(12px, 3vw, 28px) clamp(20px, 4vw, 40px) clamp(24px, 4vw, 44px);
}
#course-program > h2{
  grid-column:1 / -1;
  margin:0 0 4px 0;
  font-size:clamp(22px, 3vw, 28px);
  color: #fff;
}
#course-content{
  grid-column:1 / -1;
  min-height:80px;
  padding-left: 0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
#course-content ul,
#course-content ol{
  margin: 0 0 12px 1.25rem;
  padding-left:1rem;
}
#course-content ul li,
#course-content ol li{
  margin-bottom:4px;
  display:list-item;
  list-style-position: outside;
}
#course-content ul li{
  list-style-type: disc;
}
#course-content ol li{
  list-style-type: decimal;
}
#course-program-title{
  background-color: var(--green);
  display: inline-block;
  padding: 12px 10px;
  border-radius: 10px 10px 0 0;
  margin: 0 0 10px 0;
}

.course-location{
  margin:4px 0 0 0;
  display:flex;
  flex-direction:column;
  gap:0;
}
.course-separator{
  margin:12px 0 6px;
  border:none;
  border-top:1px solid rgba(0,0,0,.1);
}
.course-date,
.course-times{
  margin:0;
  padding:0;
  text-indent:0;
  font-weight: 1000;
  font-size: 18px;
  color: var(--onyx);
 
}
.course-times{
  font-weight: 400;
  color: var(--copper);
  display:block;
}
.course-intro{
  padding-left:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.course-location p{
  margin:0 0 8px 0;
  line-height:1.3;
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
}
.course-map{
  margin:0;
  padding:0;
}
.course-map iframe{
  display:block;
  border-radius: var(--radius-sm);
}



/* ---------- Kursanmeldung (Formular) ---------- */
#course-registration{
  background: var(--menu);
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  padding:clamp(20px, 4vw, 40px);
}
#course-registration h2{ 
  margin-top:0;
  color: var(--green);
  padding-bottom: 10px;

}
#course-capacity-banner{
  display:none;
  margin-left:12px;
  font-size:0.95rem;
  font-weight:600;
  color:var(--muted);
}
#course-capacity-banner.is-visible{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
#course-capacity-banner.is-full{
  color:#b3261e;
}

#registration-form{
  display:grid;
  gap:var(--gap);
  grid-template-columns:1fr 1fr;
  align-items:start;
}
#registration-form label{ font-weight:600 }
#registration-form .input-el,
#registration-form textarea{
  background:var(--card);
  border:1px solid #e6e9f4;
  border-radius:12px;
  padding:14px 16px;
  font-size:1rem;
}
#course-registration > p {
  padding-top: 5px;
  padding-bottom: 20px;
}

.goal-hint{
  font-size: 0.9rem;
  font-weight: 100;
  color: var(--accent);

}
#registration-form .input-el:focus,
#registration-form textarea:focus{
  outline:2px solid color-mix(in oklab, var(--accent) 60%, white);
  outline-offset:2px;
  border-color:var(--accent);
}
.fieldset-inline{
  grid-column:1 / -1;
  display:flex;
  gap:clamp(12px, 2.5vw, 24px);
  flex-wrap:wrap;
  border:0; margin:0; padding:0;
}
.fieldset-inline legend{
  width:100%;
  margin-bottom:4px;
}
.checkbox-line{
  font-weight:600;
  display:flex; gap:10px; align-items:flex-start;
}
#register-btn{
  grid-column:1 / -1;
  justify-self:start;
  background:var(--green);
  color:#fff;
  font-weight:700;
  font-size:1rem;
  border:0;
  border-radius:999px;
  padding:14px 22px;
  cursor:pointer;
}
#register-btn:hover{ filter:brightness(0.95) }
#register-btn:focus-visible{ outline:3px solid #000; outline-offset:2px }
#form-status{ min-height:22px; color:var(--muted) }

#teacher{
  background: var(--menu);
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  padding:clamp(20px, 4vw, 40px);
}
.teacher-content{
  margin-top: 20px;
  display:flex;
  gap:clamp(20px, 4vw, 40px);
  align-items:flex-start;
}
.teacher-photo{
  width:clamp(140px, 60vw, 280px);
  border-radius:12px;
  object-fit:cover;
  box-shadow:
    0 6px 18px rgba(0,0,0,0.15);
}
.teacher-profile{
  flex:1;
}
#teacher > h2{
  margin-top:0;
  color: var(--walnut);
  padding-bottom: 10px;
}
/* ---------- Footer ---------- */
footer{
  padding:28px;
  text-align:center;
  color:var(--muted);
  border-top:1px solid rgba(0,0,0,.06);
}
#admin{ display:inline-flex; vertical-align:middle; margin-left:8px }

/* ---------- Responsive ---------- */
@media (max-width:940px){
  #course-program{ grid-template-columns:1fr }
  .teacher-content{ flex-direction:column; gap:20px; }
}
@media (max-width:768px){
  .hero-overlay{
    padding: clamp(20px, 10vw, 48px);
    text-align:center;
  }
  .hero-title{
    font-size: clamp(26px, 6vw, 40px);
  }
  .hero-lead{
    font-size: clamp(15px, 4vw, 20px);
  }
  #course-program{
    padding: clamp(16px, 6vw, 32px);
  }
  #course-program-title{
    width: 100%;
    text-align:center;
  }
}
@media (max-width:600px){
  .background-main{
    height: 520px;
  }
  #bgpic{
    min-width:120%;
    min-height:120%;
    object-position:center top;
  }
  #course-program{
    padding: clamp(12px, 5vw, 28px);
  }
  .teacher-photo{
    width:100%;
    max-width:320px;
    margin:auto;
  }
}
@media (max-width:720px){
  #registration-form{ grid-template-columns:1fr }
  .nav-toggle{ display:inline-block }
  .nav-list{
    display:none;
    position:absolute; right:0; top:42px;
    flex-direction:column; gap:8px;
    background:#fff; padding:12px 14px;
    border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.15);
  }
  .nav-list.open{ display:flex }
}

/* ---------- Accessibility helper ---------- */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}
.course-location a{
  color:inherit;
  text-decoration:none;
  font-weight:600;
  transition: color 0.2s ease;
}
.course-location a:hover{
  color: var(--accent);
}