/* Approved course design; every rule is limited to the online course section. */
#kursen{--course-blue:#344a4d;color:var(--ink);background:var(--paper);border-top:0;padding-top:0}
#kursen p{font-size:17px;line-height:1.65;margin:0 0 24px}
#kursen h2,#kursen h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;overflow-wrap:normal;hyphens:none}
#kursen .course-opening{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;align-items:start}
#kursen .course-title{background:#dfb260;margin:0 -6.5vw;padding:60px 6.5vw 64px}
#kursen .course-title .eyebrow{font-size:13px;letter-spacing:.22em;margin:0 0 36px;color:var(--ink)}
#kursen .course-title .eyebrow::after{content:"";display:block;width:36px;border-bottom:1px solid var(--course-blue);margin-top:18px}
#kursen h2{max-width:760px;font-size:clamp(38px,4.6vw,64px);line-height:1.12;letter-spacing:-1.5px;margin:0 0 14px}
#kursen .course-subtitle{font:italic 400 clamp(28px,3vw,40px)/1.25 Georgia,'Times New Roman',serif;margin:0}
#kursen .course-introduction{max-width:700px}
#kursen .course-introduction p:last-child{margin-bottom:0}
#kursen .course-introduction .course-summary{margin-bottom:32px}
#kursen .course-themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin:72px 0}
#kursen .course-option{min-width:0;border:0;margin:0;padding:0}
#kursen .course-option+.course-option{border-left:1px solid var(--line);padding-left:30px}
#kursen .course-number{display:flex;align-items:center;justify-content:center;width:176px;height:122px;max-width:100%;margin:0 0 14px -20px;font:400 88px/1 Georgia,'Times New Roman',serif;letter-spacing:-5px;background:#f1d7a5;color:#a77926;border-radius:61% 39% 48% 52% / 44% 57% 43% 56%}
#kursen .course-option:nth-child(2) .course-number{background:#e6c1b4;color:#a7705c;border-radius:48% 52% 43% 57% / 49% 43% 57% 51%}
#kursen .course-option:nth-child(3) .course-number{background:#c9c9b1;color:#697157;border-radius:57% 43% 58% 42% / 51% 53% 47% 49%}
#kursen .course-option h3{font-size:28px;line-height:1.15;letter-spacing:-.6px;margin:0 0 10px}
#kursen .course-option .course-duration{font-size:14px;line-height:1.6;color:#686b67;margin:0 0 20px}
#kursen .course-option p:last-child{margin:0}
#kursen .course-foundation{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8%;align-items:center;margin-bottom:60px}
#kursen .course-foundation h3,#kursen .course-interest h3{font-size:36px;line-height:1.2;letter-spacing:-.8px;margin:0 0 24px}
#kursen .course-foundation p{margin:0}
#kursen .course-detail{margin:0;border-color:#88928e}
#kursen .course-detail summary{position:relative;list-style:none;padding:18px 36px 18px 0;font:400 22px/1.4 Georgia,'Times New Roman',serif;color:var(--ink)}
#kursen .course-detail summary::-webkit-details-marker{display:none}
#kursen .course-detail summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font:300 28px/1 Arial,sans-serif;color:var(--course-blue)}
#kursen .course-detail[open] summary::after{content:"−"}
#kursen .course-detail summary:focus-visible,#kursen .course-cta:focus-visible{outline:2px solid var(--course-blue);outline-offset:5px}
#kursen .course-detail ul{font-size:16px;line-height:1.7}
#kursen .course-experience{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8%;align-items:center;background:var(--course-blue);color:#faf8f3;padding:58px 44px;margin:0 0 60px}
#kursen .course-experience h3{font-size:clamp(34px,3.4vw,46px);line-height:1.18;letter-spacing:-.7px;margin:0;max-width:380px}
#kursen .course-experience p{margin:0}
#kursen .course-experience p+p{margin-top:24px}
#kursen .course-closing{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8%;align-items:start}
#kursen .course-price .price-label{font-size:17px;line-height:1.5;max-width:300px;margin-bottom:26px}
#kursen .course-price .price-amount{font:400 64px/1.08 Georgia,'Times New Roman',serif;letter-spacing:-1px;margin:0 0 34px}
#kursen .course-price .price-amount span{display:block;font-size:30px;line-height:1.2;letter-spacing:0;margin-top:4px}
#kursen .course-price p:last-child{margin:0}
#kursen .course-interest{border-left:1px solid #a4adaa;padding-left:36px}
#kursen .course-interest .offering-contact{margin:0}
#kursen .course-cta{display:flex;align-items:center;justify-content:center;width:100%;max-width:420px;min-height:52px;padding:16px 22px;border:1px solid var(--course-blue);border-radius:22px;color:var(--course-blue);text-align:center;font:400 17px/1.45 Arial,Helvetica,sans-serif;text-decoration:none}
#kursen .course-cta:hover{background:#edf1ee}
#kursen .email-hint{max-width:420px;text-align:center;color:#555e60;font-size:13px;letter-spacing:.08em;line-height:1.6;margin-top:10px}
@media(max-width:1000px){
  #kursen .course-themes{gap:22px}
  #kursen .course-option+.course-option{padding-left:22px}
  #kursen .course-option h3{font-size:25px}
}
@media(max-width:850px){
  #kursen .course-opening,#kursen .course-themes,#kursen .course-foundation,#kursen .course-experience,#kursen .course-closing{grid-template-columns:minmax(0,1fr)}
  #kursen .course-opening{gap:48px}
  #kursen .course-title{margin:0 -7vw;padding:48px 7vw 52px}
  #kursen .course-title .eyebrow{margin-bottom:36px}
  #kursen h2{font-size:clamp(32px,8.8vw,42px);letter-spacing:-1.2px;margin-bottom:14px}
  #kursen .course-subtitle{font-size:clamp(26px,6.6vw,32px)}
  #kursen .course-introduction{max-width:none}
  #kursen .course-introduction p{margin-bottom:30px}
  #kursen .course-introduction p:last-child{margin-bottom:0}
  #kursen .course-introduction .course-summary{margin-bottom:36px}
  #kursen .course-themes{gap:32px;margin:64px 0}
  #kursen .course-option+.course-option{padding:20px 0 0;border-left:0;border-top:1px solid #a4adaa}
  #kursen .course-number{width:180px;height:124px;margin-left:-7vw;margin-bottom:8px}
  #kursen .course-option h3{font-size:clamp(25px,6.4vw,30px);line-height:1.12;margin-bottom:10px}
  #kursen .course-option .course-duration{margin-bottom:18px}
  #kursen .course-foundation{gap:36px;margin-bottom:44px}
  #kursen .course-foundation h3,#kursen .course-interest h3{font-size:32px;margin-bottom:26px}
  #kursen .course-detail summary{font-size:21px}
  #kursen .course-experience{gap:24px;margin:0 -7vw 60px;padding:76px 7vw 80px}
  #kursen .course-experience h3{font-size:36px;max-width:320px}
  #kursen .course-closing{gap:36px}
  #kursen .course-price .price-label{font-size:17px;max-width:290px;margin-bottom:26px}
  #kursen .course-price .price-amount{font-size:64px;margin-bottom:36px}
  #kursen .course-interest{border-left:0;border-top:1px solid #a4adaa;padding:48px 0 0}
  #kursen .course-cta{padding:16px 28px;min-height:64px}
}

/* Course banner proportions and full-height painted composition. */
#kursen .course-title{position:relative;isolation:isolate;overflow:visible;padding-top:44px;padding-bottom:44px}
#kursen .course-title::before{
 content:"";position:absolute;z-index:-1;pointer-events:none;
 top:0;right:0;bottom:-44px;width:58%;
 background:url('/course-botanical.png') right top / auto 118% no-repeat;
 -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 35%);
 mask-image:linear-gradient(to right,transparent 0%,#000 35%);
}
@media(max-width:850px){
 #kursen .course-title{padding-top:32px;padding-bottom:34px}
 #kursen .course-title::before{
  width:72%;bottom:-34px;
  background-size:auto 118%;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 58%,#000 88%),linear-gradient(to bottom,#000 0%,#000 20%,transparent 35%,transparent 74%,#000 95%);
  mask-image:linear-gradient(to right,transparent 0%,transparent 58%,#000 88%),linear-gradient(to bottom,#000 0%,#000 20%,transparent 35%,transparent 74%,#000 95%);
 }
}

/* Keep the lettering on an uninterrupted ochre surface without changing its flow. */
#kursen .course-title::before{background-position:calc(100% + clamp(12px,2vw,24px)) top}
#kursen .course-title-text{
 background:#dfb260;
 -webkit-box-decoration-break:clone;
 box-decoration-break:clone;
 box-shadow:8px 0 0 5px #dfb260,-8px 0 0 5px #dfb260;
}

/* Phone composition follows the approved reference; desktop is unchanged. */
@media(max-width:650px){
 #gruppen{padding-bottom:0}
 #gruppen .offering-contact{margin-bottom:0}
 #kursen{margin-top:24px}
 #kursen .course-title{
  min-height:53.5vw;
  padding:8.2vw 5.6vw 9vw;
 }
 #kursen .course-title .eyebrow{
  width:60%;
  font-size:clamp(9px,2.15vw,12px);
  line-height:1.4;
  letter-spacing:.2em;
  margin:0 0 5.2vw;
 }
 #kursen .course-title .eyebrow::after{
  width:6vw;
  margin-top:3vw;
 }
 #kursen .course-title h2{
  width:58%;max-width:none;
  font-size:7.1vw;line-height:1.06;letter-spacing:-.12vw;
  margin:0 0 2.3vw;
 }
 #kursen .course-title-line{display:block;white-space:nowrap}
 #kursen .course-title .course-subtitle{
  width:58%;
  font-size:5.5vw;line-height:1.25;white-space:nowrap;
  margin:0;
 }
 #kursen .course-title::before{
  top:1.5vw;right:0;bottom:auto;width:66%;height:78.52vw;
  background-position:calc(100% + 3vw) top;
  background-size:100% auto;
  -webkit-mask-image:none;mask-image:none;
 }
 #kursen .course-title-text{background:transparent;box-shadow:none}
}