/* =========================================================
   ArtPlanet — light, airy, modern landing
   ========================================================= */
:root{
  --cream:#fbf7f1;
  --cream-2:#f4ece1;
  --ink:#4a4039;
  --ink-soft:#8a7f76;
  --rose:#e7a6b4;
  --rose-deep:#d98aa0;
  --lav:#c8b6e2;
  --sage:#a9c4a3;
  --gold:#e3b778;
  --line:#ece3d6;
  --white:#ffffff;
  --shadow-sm:0 6px 18px rgba(120,98,80,.10);
  --shadow-md:0 14px 40px rgba(120,98,80,.16);
  --shadow-lg:0 30px 70px rgba(120,98,80,.22);
  --radius:22px;
  --radius-sm:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{
  font-family:'Montserrat',system-ui,sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand,.menu,.tab,.eyebrow{font-family:'Comfortaa',cursive}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1180px,92%);margin-inline:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;border:none;cursor:pointer;
  font-family:'Comfortaa',cursive;font-size:.95rem;font-weight:600;
  padding:.85em 1.7em;border-radius:50px;transition:.3s var(--ease);
}
.btn--primary{
  background:linear-gradient(135deg,var(--rose),var(--lav));
  color:#fff;box-shadow:var(--shadow-sm);
}
.btn--primary:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.btn--ghost{
  background:#fff;color:var(--ink);border:1.5px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.btn--ghost:hover{border-color:var(--rose);color:var(--rose-deep);transform:translateY(-2px)}

.eyebrow{
  display:inline-block;color:var(--rose-deep);font-size:.8rem;
  letter-spacing:.22em;text-transform:uppercase;margin-bottom:.6rem;font-weight:600;
}

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:relative;z-index:50;background:#fff;
}

/* logo hero — tiled banner-bg background (logo keeps its size; +30px top & bottom) */
.logo-hero{
  padding:calc(.9rem + 30px) 0;
  background:url('immages/banner-bg.png') repeat;
  background-size:240px auto;
  display:grid;place-items:center;
}
.brand__logo img{
  height:clamp(96px,17vh,180px);width:auto;
}

/* top bar — white, sticky on scroll, separated by a line + soft shadow */
.topbar{
  position:sticky;top:0;z-index:100;
  width:100%;background:#fff;
  border-top:1px solid rgba(120,98,80,.10);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 20px rgba(120,98,80,.12);
}
.topbar__inner{
  width:100%;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:1rem;padding:.55rem 1.6rem;
}

/* socials (left) — monochrome, no backing */
.socials{display:flex;gap:1.05rem;list-style:none;align-items:center}
.social{display:grid;place-items:center;transition:.3s var(--ease)}
.social svg{width:19px;height:19px;fill:var(--ink-soft);transition:.3s var(--ease)}
.social:hover{transform:translateY(-3px)}
.social:hover svg{fill:var(--rose-deep);animation:wiggle .5s var(--ease)}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}

/* menu (center) */
.menu{display:flex;gap:1.8rem;justify-self:center}
.menu a{
  position:relative;font-size:.95rem;font-weight:500;color:var(--ink);padding:.2rem 0;
}
.menu a::after{
  content:"";position:absolute;left:0;bottom:-3px;width:0;height:2px;
  background:var(--rose-deep);transition:.3s var(--ease);
}
.menu a:hover::after{width:100%}
/* active section highlight (scroll-spy) */
.menu a.is-current{color:var(--rose-deep)}
.menu a.is-current::after{width:100%}

/* language (right) — small flags, active one sits on a backing */
.lang{display:flex;gap:.35rem;justify-self:end;align-items:center}
.lang__btn{
  display:grid;place-items:center;cursor:pointer;
  background:transparent;border:none;border-radius:8px;
  padding:.35rem;transition:.25s var(--ease);opacity:.55;
}
.lang__btn:hover{opacity:1}
.lang__btn.is-active{
  opacity:1;background:var(--cream-2);
  box-shadow:inset 0 0 0 1.5px var(--rose);
}
.flag{width:24px;height:16px;border-radius:3px;display:block;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.flag--de{background:linear-gradient(#000 0 33.3%,#dd0000 33.3% 66.6%,#ffce00 66.6%)}
.flag--ua{background:linear-gradient(#0057b7 0 50%,#ffd700 50%)}

/* =========================================================
   BANNER / COVERFLOW SLIDER
   ========================================================= */
/* white band behind the banner (extra bottom room for shadow + protruding caption) */
.banner-band{background:#fff;padding:1.6rem 0 4.5rem}
/* banner = 3/4 of screen width, centered carousel; overflow visible so shadow isn't clipped */
.banner{
  position:relative;height:58vh;min-height:360px;width:75%;margin:0 auto;
  overflow:visible;background:#fff;
}
.strip{position:relative;width:100%;height:100%}
/* 3 square photos visible, center one larger; loops in a circle (positions via JS) */
.slide{
  position:absolute;top:50%;left:50%;
  width:28%;height:auto;aspect-ratio:1/1;border-radius:0;overflow:visible;
  transform:translate(-50%,-50%);
  transition:left 1.8s var(--ease),width 1.8s var(--ease),opacity 1.8s var(--ease),box-shadow 1.8s var(--ease);
  box-shadow:var(--shadow-md);will-change:left,width;
}
/* inner frame clips the zooming image while the slide stays overflow-visible */
.slide__frame{position:absolute;inset:0;overflow:hidden}
.slide__frame img{
  width:100%;height:100%;object-fit:cover;display:block;
  animation:kenburns 14s ease-in-out infinite alternate;
}
@keyframes kenburns{
  from{transform:scale(1)}
  to{transform:scale(1.08)}
}

.slide[data-pos="center"]{left:50%;width:40%;z-index:3;opacity:1;box-shadow:0 10px 34px rgba(120,98,80,.30)}
.slide[data-pos="left"]{left:25%;width:30%;z-index:2;opacity:.92}
.slide[data-pos="right"]{left:75%;width:30%;z-index:2;opacity:.92}
.slide[data-pos="hidden"]{left:50%;width:18%;opacity:0;z-index:1}

/* caption card on the centered slide (plashka style) — lower 1/3 sticks out below */
.slide__cap{
  position:absolute;left:50%;bottom:0;z-index:4;
  transform:translate(-50%,calc(33% + 14px));
  background:#fff;border:1px solid var(--line);cursor:pointer;
  padding:1.5rem 2.2rem 1.25rem;text-align:center;min-width:82%;
  box-shadow:0 14px 30px rgba(120,98,80,.18);
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  opacity:0;pointer-events:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.slide[data-pos="center"] .slide__cap{opacity:1;transform:translate(-50%,33%);pointer-events:auto}
/* top badge — protrudes above the card */
.slide__cap-badge{
  margin-top:-2.45rem;align-self:center;
  background:var(--rose-deep);color:#fff;
  font-family:'Montserrat',sans-serif;font-size:.66rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;padding:.6em 1.2em;
}
.slide__cap-title{font-family:'Comfortaa',cursive;font-weight:600;font-size:1.3rem;color:var(--ink);line-height:1.25}
.slide__cap-more{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:'Montserrat',sans-serif;font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--rose-deep);
  transition:color .25s var(--ease);
}
.slide__cap-more::after{content:"\2192";font-size:1.05em;transition:transform .25s var(--ease)}
.slide__cap:hover .slide__cap-more{color:var(--lav)}
.slide__cap:hover .slide__cap-more::after{transform:translateX(4px)}

/* =========================================================
   ABOUT
   ========================================================= */
.about{padding:5rem 0;background:#fff}
/* card width matches the site container / Kurse rows; pink:violet ratio mirrors the Kurse body:media split */
.about__card{
  position:relative;width:min(1180px,92%);margin:0 auto;min-height:512px;
  display:flex;align-items:stretch;
}
.about__text{
  position:relative;z-index:2;flex:0 0 56%;background:#FBEEF1;
  display:flex;flex-direction:column;justify-content:center;gap:1.2rem;
  padding:clamp(2rem,4vw,3.6rem) clamp(2rem,5vw,4.2rem);
}
.about__greeting{font-family:'Comfortaa',cursive;font-size:1.5rem;color:var(--ink);line-height:1}
.about__name{font-family:'Caveat',cursive;font-weight:700;font-size:2.4rem;color:var(--rose-deep);vertical-align:-.15em;margin:0 .1em}
.about__heart{color:var(--rose-deep);font-size:1.1rem}
.about__desc{color:var(--ink-soft);font-size:1.02rem;line-height:1.8;max-width:40ch}
/* button styled like the courses "Mehr erfahren" link */
.about__btn{
  align-self:flex-start;cursor:pointer;text-decoration:none;background:transparent;
  font-family:'Montserrat',sans-serif;font-size:.74rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--rose-deep);
  display:inline-flex;align-items:center;gap:.55em;padding:.3em 0;margin-top:.5rem;
  transition:color .25s var(--ease);
}
.about__btn::after{content:"→";font-size:1.05em;transition:transform .25s var(--ease)}
.about__btn:hover{color:var(--lav)}
.about__btn:hover::after{transform:translateX(5px)}
.about__socials{margin-top:.3rem}

/* violet block — same footprint as the Kurse photo column (flex:0 0 44%) */
.about__media{position:relative;flex:0 0 44%;background:#cdb0cf}
/* picture stack sits on the violet block, enlarged to spill 15% past its top, bottom and left edges;
   flack and julia share this exact box so they stay perfectly proportional to each other */
.about__pic{
  position:absolute;left:-15%;top:-15%;width:115%;height:130%;max-width:none;z-index:3;
  pointer-events:none;
}
.about__pic-flack,.about__pic-julia{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
}
.about__pic-flack{object-fit:contain}
.about__pic-julia{
  object-fit:cover;pointer-events:auto;cursor:pointer;
}
.about__pic-julia:hover{transform:scale(1.06)}
/* flack "gets painted in" — left-to-right reveal */
.about__pic-flack{
  clip-path:inset(0 100% 0 0);
  transition:clip-path .9s var(--ease);
}
/* julia fades in on top, starting .5s after the trigger; transform eases the hover zoom */
.about__pic-julia{
  opacity:0;
  transition:opacity .7s var(--ease) .5s,transform .45s var(--ease);
}
.about__pic.is-visible .about__pic-flack{clip-path:inset(0 0 0 0)}
.about__pic.is-visible .about__pic-julia{opacity:1}

@media(max-width:900px){
  .about__card{flex-direction:column;min-height:0}
  .about__media{flex:0 0 260px}
  .about__pic{left:0;top:-15%;width:100%;height:130%}
}

/* =========================================================
   COURSES
   ========================================================= */
.section-head{text-align:center;max-width:620px;margin:0 auto 2.2rem}
.section-head h2{font-size:clamp(1.8rem,3vw,2.6rem);margin-bottom:.5rem}
.section-head p{color:var(--ink-soft)}
.courses{padding:0 0 5rem;background:#fff}                 /* cards sit on white */
.courses__band{background:#FBF6F0;padding:5rem 0 2.4rem}  /* heading + lead on cream */
.courses__band .section-head{margin-bottom:0}

/* badge-style tabs straddling the cream/white edge */
.tabs{display:flex;justify-content:center;gap:.6rem;margin:-1rem 0 2.6rem;position:relative;z-index:3}
.tab{
  cursor:pointer;background:#fff;color:var(--ink-soft);
  font-family:'Montserrat',sans-serif;font-size:.72rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  padding:.75em 1.5em;border-radius:0;
  border:1px solid rgba(217,138,160,.45);          /* light pink border (inactive) */
  transition:background .3s var(--ease),color .3s var(--ease);
}
.tab:hover{color:var(--rose-deep);border-color:var(--rose-deep)}
.tab.is-active{
  background:var(--rose-deep);color:#fff;border-color:var(--rose-deep);
}

/* zig-zag course rows: pink fills only the text column, its edge meets the photo (kurse.png) */
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.kurs-rows{display:flex;flex-direction:column;gap:2.4rem}
.kurs-row{transition:background .3s var(--ease)}
.kurs-row.flash .kurs-row__inner{animation:flashfade 1.7s var(--ease)}
@keyframes flashfade{from{box-shadow:inset 0 0 0 3px var(--rose)}to{box-shadow:inset 0 0 0 3px transparent}}
.kurs-row__inner{
  width:min(1180px,92%);margin-inline:auto;
  display:flex;align-items:stretch;                       /* body stretches to the photo height */
  animation:rise .5s var(--ease) both;
}
.kurs-row.reverse .kurs-row__inner{flex-direction:row-reverse}
.kurs-row__media{flex:0 0 44%;overflow:hidden}
.kurs-row__media img{width:100%;height:100%;min-height:340px;object-fit:cover;display:block;transition:.6s var(--ease)}
.kurs-row:hover .kurs-row__media img{transform:scale(1.04)}
.kurs-row__body{
  flex:1;display:flex;flex-direction:column;
  gap:.7rem;justify-content:center;align-items:flex-start;
  padding:2rem 2.8rem;                                     /* white cards blend into the white bg */
}
/* only pink cards have a visual form — pink panel that meets the photo */
.kurs-row.tint .kurs-row__body{background:#FBEEF1}
.kurs-row__cat{
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rose-deep);font-weight:600;
}
.kurs-row__body h3{font-size:clamp(1.3rem,2vw,1.7rem)}
.kurs-row__body p{color:var(--ink-soft);font-size:.95rem}
.kurs-row__body .btn{margin-top:.6rem}
/* card CTA in site style (matches the slider "MEHR ERFAHREN" link) */
.kurs-more{
  margin-top:.5rem;cursor:pointer;border:none;background:transparent;
  font-family:'Montserrat',sans-serif;font-size:.74rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--rose-deep);
  display:inline-flex;align-items:center;gap:.55em;padding:.3em 0;
  transition:color .25s var(--ease);
}
.kurs-more::after{content:"→";font-size:1.05em;transition:transform .25s var(--ease)}
.kurs-more:hover{color:var(--lav)}
.kurs-more:hover::after{transform:translateX(5px)}

/* numbered pagination */
.pager{display:flex;justify-content:center;gap:.5rem;margin-top:1.8rem;flex-wrap:wrap}
.page-btn{
  min-width:42px;height:42px;padding:0 .6rem;border:1.5px solid var(--line);
  background:#fff;color:var(--ink);font-family:'Comfortaa',cursive;font-weight:600;
  cursor:pointer;transition:.25s var(--ease);
}
.page-btn:hover:not(:disabled){border-color:var(--rose);color:var(--rose-deep)}
.page-btn.is-active{background:linear-gradient(135deg,var(--rose),var(--lav));color:#fff;border-color:transparent}
.page-btn:disabled{opacity:.4;cursor:default}
.page-btn.nav{font-size:1.15rem;line-height:1}
/* =========================================================
   KALENDER (calendar left + planned master classes right)
   ========================================================= */
.kalender-sec{padding:5rem 0;background:linear-gradient(180deg,var(--cream),var(--cream-2))}
.tabs--kalender{margin:0 0 2.4rem}
.kalender-layout{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;align-items:start}
.kalender-side{display:flex;flex-direction:column;gap:2.2rem}
.kalender-list h3,.kalender-address h3{font-family:'Comfortaa';font-size:1.3rem;margin-bottom:1.2rem}
.kalender-sec .calendar{border-radius:0}
/* hover popup for calendar dates */
.cal-pop{
  position:absolute;z-index:2000;width:270px;background:#fff;
  box-shadow:var(--shadow-lg);overflow:hidden;pointer-events:none;
  display:flex;flex-direction:column;animation:rise .25s var(--ease) both;
}
.cal-pop[hidden]{display:none}
.cal-pop__img{height:150px;overflow:hidden}
.cal-pop__img img{width:100%;height:100%;object-fit:cover;display:block}
.cal-pop__body{padding:.9rem 1.1rem 1.1rem;display:flex;flex-direction:column;gap:.35rem}
.cal-pop__cat{font-family:'Montserrat',sans-serif;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-deep);font-weight:600}
.cal-pop__body h4{font-family:'Comfortaa',cursive;font-size:1.05rem;line-height:1.2}
.cal-pop__body p{color:var(--ink-soft);font-size:.82rem;line-height:1.5}
.cal-pop__meta{display:flex;justify-content:space-between;align-items:center;margin-top:.4rem}
.cal-pop__time{font-family:'Montserrat',sans-serif;font-weight:600;font-size:.76rem;letter-spacing:.04em;color:var(--rose-deep)}
.cal-pop__price{font-family:'Comfortaa',cursive;font-weight:600;font-size:.9rem;color:var(--ink)}

/* address block under "Geplante Meisterklasse" */
.kalender-address__row{display:flex;align-items:center;gap:.7rem;margin-bottom:.4rem}
.kalender-address__name{color:var(--rose-deep);font-weight:600;font-family:'Comfortaa',cursive}
.kalender-address__lines{color:var(--ink);line-height:1.7;padding-left:calc(34px + .7rem)}
.kalender-address__ic{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm)}
.kalender-address__ic svg{width:18px;height:18px;fill:var(--rose-deep)}

/* =========================================================
   COURSE MODAL (pop-up)
   ========================================================= */
.modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:1.5rem}
.modal[hidden]{display:none}
.modal__overlay{position:absolute;inset:0;background:rgba(74,64,57,.55)}
.modal__box{
  position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;
  max-width:1142px;width:100%;background:#fff;box-shadow:var(--shadow-lg);
  overflow:hidden;animation:rise .4s var(--ease) both;
}
.modal__media{overflow:hidden}
.modal__media img{width:100%;height:100%;min-height:360px;object-fit:cover;display:block}
.modal__content{padding:2.2rem;display:flex;flex-direction:column;gap:.65rem}
.modal__content h3{font-size:1.5rem}
.modal__content>p{color:var(--ink-soft);font-size:.95rem}
.modal__meta{list-style:none;display:flex;flex-direction:column;gap:.4rem;margin:.4rem 0 1rem;font-size:.9rem}
.modal__meta li{padding-left:1.1rem;position:relative}
.modal__meta li::before{content:"•";position:absolute;left:0;color:var(--rose-deep)}
.modal__close{
  position:absolute;top:.5rem;right:.8rem;z-index:2;border:none;background:transparent;
  font-size:1.9rem;line-height:1;color:var(--ink);cursor:pointer;opacity:.7;transition:.2s var(--ease);
}
.modal__close:hover{opacity:1;color:var(--rose-deep)}

/* =========================================================
   CONTACT + CALENDAR
   ========================================================= */
.contact{padding:5rem 0;background:var(--cream-2)}
.contact__form{max-width:680px;margin-inline:auto;text-align:center}
.contact__form h2{font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:.5rem}
.contact__form>p{color:var(--ink-soft);margin:0 auto 1.6rem;max-width:520px}
.contact__form form{text-align:left}
.contact__cols{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.field span{font-size:.85rem;font-weight:600;color:var(--ink)}
.field input,.field textarea{
  font-family:'Montserrat';font-size:.95rem;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  padding:.85em 1em;transition:.25s var(--ease);resize:vertical;
}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--rose);box-shadow:0 0 0 4px rgba(231,166,180,.18);
}
.form-note{margin-top:1rem;color:var(--sage);font-weight:600}

/* calendar */
.calendar{
  background:#fff;border-radius:var(--radius);padding:1.4rem;
  box-shadow:var(--shadow-md);
}
.calendar__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.calendar__head strong{font-family:'Comfortaa';font-size:1.05rem}
.cal-nav{
  cursor:pointer;border:none;background:var(--cream);color:var(--ink);
  width:32px;height:32px;border-radius:50%;font-size:1.2rem;line-height:1;
  transition:.25s var(--ease);
}
.cal-nav:hover{background:var(--rose);color:#fff}
.calendar__weekdays,.calendar__grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
}
.calendar__weekdays{margin-bottom:6px}
.calendar__weekdays span{
  text-align:center;font-size:.7rem;font-weight:600;color:var(--ink-soft);text-transform:uppercase;
}
.cal-cell{
  aspect-ratio:1;display:grid;place-items:center;border-radius:10px;
  font-size:.85rem;color:var(--ink);position:relative;transition:.25s var(--ease);
}
.cal-cell.is-empty{visibility:hidden}
.cal-cell.is-today{outline:2px solid var(--lav);outline-offset:-2px}
.cal-cell.has-event{
  background:linear-gradient(135deg,var(--rose),var(--lav));color:#fff;font-weight:600;
  cursor:pointer;box-shadow:var(--shadow-sm);
}
.cal-cell.has-event:hover{transform:scale(1.08)}
.calendar__legend{display:flex;align-items:center;gap:.5rem;margin:1rem 0 .6rem;font-size:.8rem;color:var(--ink-soft)}
.calendar__legend .dot{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--rose),var(--lav))}
.calendar__list{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.calendar__list li{
  display:flex;gap:.6rem;align-items:center;font-size:.85rem;
  padding:.55rem .7rem;background:var(--cream);border-radius:var(--radius-sm);
  cursor:pointer;transition:background .25s var(--ease),transform .25s var(--ease);
}
.calendar__list li:hover{background:#fbeef1;transform:translateX(3px)}
.calendar__list .cl-date{
  flex:0 0 auto;font-family:'Comfortaa';font-weight:600;color:var(--rose-deep);
  background:#fff;border-radius:8px;padding:.25em .6em;font-size:.78rem;white-space:nowrap;
}
.calendar__list .cl-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calendar__list .cl-time{
  flex:0 0 auto;margin-left:auto;white-space:nowrap;
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:.72rem;
  letter-spacing:.04em;color:var(--rose-deep);
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--ink);color:#f3ece2;padding:3rem 0 2rem}
.footer__inner{display:flex;flex-direction:column;align-items:center;gap:1.4rem;text-align:center}
.footer__contacts{list-style:none;display:flex;flex-wrap:wrap;gap:1.4rem 2.2rem;justify-content:center}
.footer__contacts li{display:flex;align-items:center;gap:.6rem}
.footer__contacts a{transition:.25s var(--ease)}
.footer__contacts a:hover{color:var(--rose)}
.footer__ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08)}
.footer__ic svg{width:17px;height:17px;fill:#f3ece2}
.footer__copy{font-size:.82rem;color:#bdae9f}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:900px){
  .topbar__inner{grid-template-columns:auto 1fr auto;gap:.6rem}
  .menu{gap:1.1rem}
  .kalender-layout{grid-template-columns:1fr}
  .modal__box{grid-template-columns:1fr;max-width:440px}
  .modal__media{max-height:200px}
}
@media(max-width:600px){
  .topbar__inner{grid-template-columns:1fr;justify-items:center;gap:.6rem;text-align:center}
  .socials{order:3}
  .lang{justify-self:center}
  .menu{gap:1rem;font-size:.9rem}
  .kurs-row__inner,.kurs-row.reverse .kurs-row__inner{flex-direction:column;gap:1.4rem}
  .kurs-row__media{flex:0 0 auto;width:100%}
  .kurs-row__media img{min-height:200px;aspect-ratio:16/10}
  .contact__cols{grid-template-columns:1fr}
  .banner{width:92%}
}