@charset "UTF-8";

/* Fonts and Reset ======================================== */

@import url('reset.css');

/* Variables ======================================== */

:root {

    --primary: 15, 23, 68;
    --secondary: 237, 74, 17;
    
    --text: 10, 10, 10;
    --white: 255, 255, 255;
    
    --font-text: "Heebo", system-ui, sans-serif;
    --font-head: "Heebo", system-ui, sans-serif;

    --font-weight-normal: 300;
    --font-weight-bold: 700;
    
    --font-size-text: 1rem;

    --line-height-text: 1.55;
    --line-height-head: 1.1;

    --font-size-s: 0.85rem;
    --font-size-m: 1rem;
    --font-size-l: 1.4rem;
    --font-size-xl: 1.8rem;
    --font-size-xxl: 2.3rem;

    --letter-spacing: 0.03em;
  
    --pagemargin: 1rem;
    --space: 4rem;


}



@media only screen and (min-width: 700px) {
  :root {  
      --font-size-s: 1rem;
      --font-size-m: 1.35rem;
      --font-size-l: 1.6rem;
      --font-size-xl: 3rem;
      --font-size-xxl: 6rem;
    
      --pagemargin: 2rem;
      --space: 6rem;
  }
}

/* Fonts ======================================== */


/* heebo-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/heebo-v26-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/heebo-v26-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* heebo-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/heebo-v26-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/heebo-v26-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}



/* General ======================================== */

html {
  font-size: 16px;
}

* {
  font-family: var(--font-text);
  line-height: var(--line-height-text);
  font-weight: var(--font-weight-normal);
  color: rgb(var(--text));
  hyphens: auto;
}

strong,
strong span,
em,
b {
  font-family: var(--font-text);
  font-weight: var(--font-weight-bold);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-head);
  margin: 0;
  padding: 0;
  text-wrap: balance;
  hyphens: none;
}

h1 {
  font-size: var(--font-size-xxl);
  color: rgb(var(--primary));
  padding: 0 0 0.5em 0;
}

h2 {
  font-size: var(--font-size-xl);
}

h3, h4, h5, h6 {
  font-size: var(--font-size-m);
}

p {
  margin: 0;
  padding: 0 0 0.5em 0;
  font-size: var(--font-size-m);
  max-width: 70ch;
}

section ul {
  font-size: var(--font-size-m);
  max-width: 70ch;
}

a {
  transition: all 0.2s;
  color: rgba(var(--secondary),1);
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(var(--secondary),1);
}

a.button {
  text-transform: uppercase;
  font-size: var(--font-size-m);
  letter-spacing: var(--letter-spacing);
  text-decoration: none;
  display: inline-block;
  line-height: 1em;
  border-radius: 10em;
}

a.button.primary {
  color: rgba(var(--white),1);
  background: rgba(var(--secondary),1);
  padding: 0.8em 1em;
  margin-block-start: calc(var(--space) / 1);
}

a.button.secondary {
  color: rgba(var(--secondary),1);
  padding: 0.8em 0em;
  margin-block-start: calc(var(--space) / 1);
}

hr {
  padding: 0;
  margin-block: var(--space);
  border-color: rgb(var(--secondary));
  border-top: 1px;
}

.centered {
  margin-inline: auto;
  /* width: max-content; */
  position: relative;     /* oder absolute, je nach Kontext */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.fullwidth {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.st {
  margin-block-start: var(--space);
}

.sb {
  margin-block-end: var(--space);
}

figure {
  margin: 0;
}

section.text figure {
  margin-block-start: var(--space);
}

figcaption {
  font-size: var(--font-size-s);
  margin: 0.5em 0 0 0;
}



html, body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  background-color: rgb(var(--white));
}

header {
  padding: calc(1.5 * var(--pagemargin)) var(--pagemargin);
  box-shadow: 0 4px rgba(0,0,0,0.07);
  position: fixed;
  background: rgb(var(--white));
  width: 100%;
  height: 85px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
}

header span {
  display: flex;
  gap: 10px;
}

header a {
  text-decoration: none;
  color: rgb(var(--primary));
}

main {
  padding-block-start: calc(75dvh + 85px);
}

body.t-default main {
  padding-block-start: calc(75dvh + 85px);  
}

body main.nopic {
  padding-block-start: calc(4dvh + 85px);  
}

#container {
  background-color: rgb(var(--white));
  padding: 0 var(--pagemargin);
  /* overflow: hidden; */
}

#container::after {
    content: ".";
    display: block;
    clear: both;
  color: #fff;
}


section {
  max-width: 1200px;
  padding-block-end: var(--space);
  margin: 0 auto var(--space) auto;
  border-bottom: 1px solid rgb(var(--secondary));
}

section h2 {
  margin-block-end: var(--space);
}

body.t-default section h2 {
  margin-block: calc(var(--space) / 2);
}

body.t-default.alumni section h2 {
  margin-block: var(--space) calc(var(--space) / 2);
}

body.t-default section.text,
body.t-reisen section.text {
  margin-block-end: 0;
  border: none;
}

body.t-default section.text + section.text {
  padding-block-start: var(--space);
  border-top: 1px solid rgb(var(--secondary));
}

body.t-alumni section.lehrgaenge {
  border: none;
}

/* NAVI ================================ */

nav#hauptnavi ul {
  display: flex;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: rgb(var(--white));
  list-style: none;
  margin: 0;
  padding: 0 1rem;
  box-shadow: 0px -4px rgba(0,0,0,0.07);
  justify-content: space-between;
  align-items: center;
}

nav#hauptnavi ul li a {
  display: block;
  padding-block: 1em;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  color: rgb(var(--primary));
}

nav#hauptnavi ul > li > ul {
  width: 100%;
  position: absolute;
  bottom: 3rem;
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  background: rgb(var(--white));
  display: none;
  border-bottom: 1px solid rgba(var(--primary),0.2);
}

nav#hauptnavi ul > li > ul li a {
  padding-inline: 1rem;
  border-top: 1px solid rgba(var(--primary),0.2);
}

nav#hauptnavi ul > li:has(:hover) ul,
nav#hauptnavi ul > li:has(:focus-within) ul {
  display: block;
}

nav#hauptnavi ul li a[aria-current="page"],
nav#hauptnavi > ul > li:has(a[aria-current="page"]) > a {
  color: rgb(var(--secondary));
}  

/* HOME ================================ */


div#bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 20px;
  left: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-color: rgb(var(--primary));
}

body.t-default div#bg {
  height: 100%;
}

#badge {
  position: absolute;
  right: 2em;
  top: 8em;
  background: rgb(var(--secondary));
  font-size: var(--font-size-m);
  color: rgb(var(--white));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 8.5em;
  height: 8.5em;
  border-radius: 10em;
  line-height: var(--line-height-head);
  justify-content: center;
  box-shadow: 4px 4px rgba(0,0,0,0.5);
  padding: 1rem;
  hyphens:none;
}

#badge strong,
#badge p {
  color: rgb(var(--white));
  line-height: var(--line-height-head);
  padding: 0;
}

#intro {
  background: rgb(var(--white));
  transform: translate(0,-1rem);
  padding-block-start: 3rem;
  border-bottom: 1px solid rgb(var(--secondary));
  position: relative;
}

#intro p {
  font-size: var(--font-size-l);
}

div#gopic {
  display: flex;
  flex-wrap: nowrap;
}

div#gopic img {
  width: 25%;
  height: auto;
}

/* NEWS ================================ */


#news .swiper {
  width: calc(100% + var(--pagemargin));
  height: 100%;
  overflow: visible;
}

#news .swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: var(--font-size-m);
}

#news .swiper-slide {
  width: 80%;
}

#news {
  --swiper-navigation-size: 25px;
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 0px;
  --swiper-navigation-color: rgb(var(--secondary));
  overflow-x: hidden;
  width: calc(100vw - var(--pagemargin));
}

#news .swiper-wrapper div:last-child {
  padding-inline-end: var(--pagemargin);
}

#news .swiper-button-prev:after, 
#news .swiper-rtl .swiper-button-next:after {
    content: '←';
}

#news .swiper-button-next:after, 
#news .swiper-rtl .swiper-button-prev:after {
    content: '→';
}

#news .swiper-button-next:after, 
#news .swiper-button-prev:after {
    font-family: var(--font-text);
}

#news .swiper-button-next, 
#news .swiper-button-prev {
    position: relative;
    top: var(--swiper-navigation-top-offset, 50%);
    width: calc(var(--swiper-navigation-size) / 44* 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px -(var(--swiper-navigation-size) / 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

#news .swiper-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-start: calc(var(--space) / 2);
  padding-inline-end: calc(2 * var(--pagemargin));
}

#news .swiper-nav span {
  display: flex;
  gap: 10px;
}

#news .swiper-nav a.button.secondary {
  margin: 0;
}




/* Prinzipien =========================== */

section#prinzipien {
  border: none;
}

section#prinzipien img {
  margin-block-end: var(--space);
  width: 85%;
  margin-inline-start: auto;
}

summary {
  width: 85%;
  margin-inline-start: auto;
  position: relative;
  color: rgb(var(--primary));
  font-size: var(--font-size-l);
  margin-block-end: 1rem;
}

summary b {
  color: rgb(var(--secondary));
  font-weight: var(--font-weight-normal);
}

summary::marker {
  content: '';
}

details summary::-webkit-details-marker { 
	display: none;
}
 
summary::after {
  content: '╲╱';
  display: inline-block;
  position: absolute;
  right: 0;
  color: rgb(var(--secondary));
  transition: all 0.3s;
  transform: rotate(0deg);
  transform-origin: center;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
}

details[open] summary::after {
  transform: rotate(180deg);
}

details p {
  width: 85%;
  margin-inline-start: auto;
  padding-block-end: 2rem;
}

/* REISE ================================ */

section#reise figure:first-of-type {
  width: 75%;
}

section#reise figure:nth-of-type(2) {
  width: 40%;
  margin-inline-start: auto;
  margin-block-start: -10rem;
}

section#reise figure:nth-of-type(3) {
  width: 85%;
  margin-inline-start: auto;
  margin-block-start: 2rem;
  margin-block-end: var(--space);
}





/* AD ================================ */

section#ad {
  width: 100vw;
  max-width: 100vw;
  background: rgb(var(--primary));
  color: rgb(var(--white));
  padding-inline: var(--pagemargin); 
  margin-inline-start: calc(0px - var(--pagemargin)); 
  margin-block-end: 0;
  border-bottom: 1px solid rgb(var(--white));
}

section#ad > div {
  max-width: 1200px;
  margin-inline: auto;
}

section#ad * {
  color: rgb(var(--white));
}

section#ad h2 {
  color: rgb(var(--secondary));
  margin: 0;
}

section#ad img {
  width: 85%;
  transform: translate(0, -2rem);
}




/* GO ================================ */

section#go div#mags {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem 1rem;
  margin-inline: auto;
  justify-content: space-evenly;
}

section#go figure {
  width: calc(50% - (2rem / 3));
}

section#go figure img {
  height: auto;
}




/* REISEN ================================ */

section#reisen ul {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 4rem 1rem;
  margin-inline: auto;
  margin-block: 0;
  justify-content: space-evenly;
  list-style: none;
  padding: 0;
}

section#reisen ul li {
  width: calc(50% - (2rem / 3));
  padding: 0;
  margin: 0;
}  

section#reisen ul li img {
  margin-block-end: 1rem;
} 






/* LEHRGANG ================================ */

body.t-lehrgang section.koepfe div {
  margin-block-end: calc(var(--space) * 2);
}

body.t-lehrgang section.koepfe img {
  width: 50%;
  border-radius: 1000px;
  margin: 0 auto;
}

body.t-lehrgang section.koepfe h4 {
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-bold);
  margin: 2rem auto;
  display: block;
  text-align: center;
}


/* FOOTER ================================ */

footer {
  padding: var(--space) var(--pagemargin);  
  background: rgb(var(--primary));
}

footer * {
  color: rgb(var(--white));
  font-size: var(--font-size-s);
}

footer img {
  margin-block-end: 2em;
}

footer img.icon {
  display: inline-block;
  margin-block-end: 0;
  margin-inline-end: 1rem;
  transform: translateY(0.5em);
}

footer > div {
  margin-block-end: 1rem;
}

/* Insta ================================ */

section#insta div#posts {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

a.instapic {
  width: calc(50% - 0.25rem);  
  aspect-ratio: 1 / 1.3;
  background: rgb(var(--primary));
  padding: 0;
  font-size: 0;
  overflow: hidden;
  display: block;
  position: relative;
}

a.instapic img,
a.instapic video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ======================================== */
/* DESKTOP ================================ */

@media only screen and (min-width: 770px) {

  header {
  height: 160px;
  justify-content: space-between;
  align-items: center;
  }  
  
  img.logo {
    height: 60px;
  }
  
  a.button.primary:hover {
    transform: translateX(-50%) scale(110%);
    font-weight: var(--font-weight-bold);
    box-shadow: 0px 4px 14px rgba(0,0,0,0.1);
  }
  
  a.button.secondary:hover {
    font-weight: var(--font-weight-bold);
    box-shadow: 0px 4px 14px rgba(0,0,0,0.1);
    padding-inline: 1em;
  }

  a {
    transition: all 0.3s;
  }
  
  a:hover {
    color: rgb(var(--secondary));  
  }


  
  /* NAVI ================================ */
  
  
  span#navispan {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  
   span#navispan span:first-child {
     padding-block: 0.5em;
  }
  
  nav#hauptnavi ul {
    display: flex;
    width: auto;
    position: relative;
    margin: 0;
    padding: 0;
    box-shadow: none;
    justify-content: space-evenly;
    align-items: center;
    gap: 3rem;
  }
  
  nav#hauptnavi ul > li {
    border-bottom: 4px solid rgb(var(--white));
  }  
  
  nav#hauptnavi ul li a {
    display: block;
    padding-block: 0em;
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-bold);
    transition: all 0.3s;
  }
  
  nav#hauptnavi > ul > li:hover,
  nav#hauptnavi > ul > li:has(a[aria-current="page"]) {
    border-bottom: 4px solid rgb(var(--secondary));
  }
  
  nav#hauptnavi ul li a:hover,
  nav#hauptnavi ul li a[aria-current="page"],
  nav#hauptnavi > ul > li:has(a[aria-current="page"]) > a {
    color: rgb(var(--secondary));
  }  
  
  nav#hauptnavi ul > li > ul {
    position: absolute;
    left: 0;
    bottom: auto;
    z-index: 100;
    background: rgb(var(--white));
    list-style: none;
    padding: 0.5em 0;
    margin-block-start: 4px;
  }
  
  nav#hauptnavi ul > li:hover > ul {
    display: block;
  }
  
  nav#hauptnavi ul > li > ul > li > a {
    font-weight: var(--font-weight-normal);
    padding: 0.5em 4em 0.5em 1.5em;
    border: 0;
  }
  
  
  
  
  #badge {
  right: 2em;
  top: 12em;
  }
  
  
  #news .swiper-slide {
  width: 40%;
  }


  /* Insta ================================ */
 
  a.instapic {
    width: calc(25% - 0.5rem);  
  }

  a.instapic::after {
    content: "Auf Instagram ansehen";
    color: #fff;
    font-size: 1rem;
    align-items: center;
    justify-content: center;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    transition: all 0.3s;
    opacity: 0;
  }

  a.instapic:hover::after {
    opacity: 1;
  }  
  
  
  
  
  
  
  
  
  span.head {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  }
  
  span.head * {
    width: 50%;
    flex-grow: 1;
  }
  
  section#prinzipien img {
    margin-block-end: var(--space);
    width: 40%;
    margin-inline-start: auto;
  }  
  
  summary,
  details p {
  width: 60%;
  }
  
  summary {
    transition: all 0.3s;
  }
  
  summary:hover {
    color: rgb(var(--secondary));
    cursor: pointer;
  }
  
  body.t-default section {
    max-width: 1200px;
    margin-inline: auto;
  }
  
  section h2 {
    max-width: 30ch;
  }
  
  body.t-home section p,
  body.t-home section ul {
    margin-inline-start: auto;
  }
  
  figure img {
    width: 100%;
    height: auto;
  }

  section.text figure img {
    width: auto;
    height: auto;
  }

  body main.nopic {
    padding-block-start: calc(7dvh + 160px);  
  }

  /* GO ================================ */
  
  section#go div#mags {
    display: flex;
    flex-wrap: wrap;
    gap: 5rem 1rem;
    margin-inline: auto;
    justify-content: space-evenly;
  }
  
  section#go figure {
    width: calc(33% - (2rem / 3));
  }

  /* REISEN ================================ */
  
  section#reisen ul {
    gap: 5rem 1rem;
  }
  
  section#reisen ul li {
    width: calc(33% - (2rem / 3));
  }  

  /* LEHRGANG ================================ */

  body.t-lehrgang section.koepfe div {
    display: flex;
    gap: var(--space);
    align-items: flex-start;
    margin-block-end: calc(var(--space) * 2);
  }

  body.t-lehrgang section.koepfe div:nth-child(even) {
    flex-direction: row-reverse;
  }  
  
  body.t-lehrgang section.koepfe img {
    display: block;
    width: 50%;
    max-width: 500px;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 1000px;
    margin: 0 auto;
  }

  body.t-lehrgang section.koepfe h4 {
    text-align: left;
    margin-block-start: 0;
  }

/* FOOTER ================================ */

  footer {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
  }
  
  footer img {
    margin: 0rem;
    display: inline-block;
  }

   
}