@font-face {
      font-family: 'Everett';
      src: url('../fonts/Everett-Regular.woff2') format('woff2'),
           url('../fonts/Everett-Regular.woff') format('woff');
      font-weight: normal;
      font-style: normal;
    }

    @font-face {
      font-family: 'Everett';
      src: url('../fonts/Everett-Bold.woff2') format('woff2'),
           url('../fonts/Everett-Bold.woff') format('woff');
      font-weight: bold;
      font-style: normal;
    }

*, *::before, *::after { box-sizing: border-box; }


    * {
      font-family: Everett;
      font-size: 16px;
      margin: 0;
      padding: 0;
      line-height: 140%;
    }

	/* Text Selection Color */
	::-moz-selection { /* Code for Firefox */
		color: white;
		background: blue;
	}
	::selection {
  		color: white;
		background: blue;
	}


    body {
      width: 100%;
      margin:0;
      padding:0;
    }

    p {
      margin-bottom: 0.7rem;
    }

    a:link, a:hover, a:active, a:visited {
      color: #000000;
    }
    a:hover {
      text-decoration: none;
      color: blue;
    }

    #wordmark {
      font-weight: bold;
      font-size: 2rem;
      line-height: 100%;
      position: absolute;
      top: 1rem;
      left: 1rem;
      z-index:10000;
    }
@media (orientation: landscape) { 
    #wordmark:hover {
    cursor:pointer;
    color: blue;
    }
}

    #lang-selection {
      position: absolute;
      top: 1rem;
      right: 1rem;
      z-index:1000;
    }

    #wrapper {
      margin: 1rem;
      max-width: 40rem;
	}

	#intro {
		margin-top: 2.1rem;
		}
		
    #intro, .section h2 {
      font-weight: bold;
    }

    .section {
      margin: 0 0 2.1rem 0;
    }

    ul#contact-list {
      list-style-type: none;
    }

    #footer ul {
      list-style-type: none;
    }
    #footer ul li {
      display: inline;
      padding-right: 1rem;
    }

/* Legal */

.legal-content h1 {
	font-size: 1.3rem;
	}
.legal-content h2 {
	font-size: 1.15rem;
	}
.legal-content h1, .legal-content h2, .legal-content h3 {
	padding:0.25rem 0;
	}
.legal-content ul {
	margin-bottom:0.7rem;
	}
.legal-content ul li {
	margin-left:1rem
	}



/* Slider*/

/* Slider Root */
#image-carousel {
	position: relative; /* wichtig für Overlays/Progressbar */
	min-width:0;
	max-width:100%;
	}

/* 1 Slide = immer volle Viewport-Größe */
.splide__slide{
  width: 100%;
  min-width:0;
  max-width:100%;
  height:100vh;
  display: grid;
  overflow: hidden;
   grid-template-rows: 1fr auto; 
}
@media (orientation: portrait) {
.splide__slide {
	grid-template-rows: 50vh auto; 
	
	min-width: 0;
	max-width:100%;
	height:auto;
	}
}

/* Media füllt den kompletten Rest oberhalb der Caption */
.slide_media{
  position: relative;       /* für Credits-Overlay */
  overflow: hidden;
}

/* Caption ist so hoch wie ihr Inhalt und klebt unten */
.slide_caption{
  padding: 1rem;
  min-width: 0;
  width:100%;
  display:block;
  grid-row: 2;
}
.slide_label_title {
	font-weight:bold;
	}



@media (orientation: portrait) {
.slide_caption {
	padding-bottom:0;
	}
	}

/* Bild füllt den Media-Bereich komplett (cover) */
.slide_media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Credits unten rechts im Bild */
.slide_label_credits{
  position: absolute;
  color:white;
  font-size:0.5rem;
  right: 0.5rem;
  bottom: 0.5rem;
}

    
    /* Progressbar */
    .my-slider-progress {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 4px;
      background: rgba(0,0,0,0.2);
      z-index: 30;
    }

    .my-slider-progress-bar {
      height: 100%;
      width: 0;
      background: #000;
      transition: width 300ms linear;
    }

    /* Klick-Zonen links/rechts je 30% */
    #image-carousel .slider-nav-zones {
      position: absolute;
      inset: 0;
      z-index: 25;          /* über Slides, unter Progressbar */
      display: flex;
    }

    #image-carousel .slider-zone {
      width: 30%;
      height: 100%;
      border: 0;
      background: transparent;
      padding: 0;
      margin: 0;
      cursor: pointer;
      appearance: none;
      -webkit-tap-highlight-color: transparent;
    }

    /* Links: vorheriger Slide */
    #image-carousel .slider-zone--prev {
      cursor: w-resize;
    }

    /* Rechts: nächster Slide */
    #image-carousel .slider-zone--next {
      margin-left: auto;
      cursor: e-resize;
    }



    /* Font Sizes */
    @media screen and (min-width: 768px) {
      * { font-size: 20px; }
    }
    @media screen and (min-width: 1200px) {
      * { font-size: 24px; }
    }