/*********
RESET
********/


*, hr {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-weight: normal;
	font-size: 100%;
	color: black;

}

ol,
ul {
	list-style: none;
}

a {
	text-decoration: none;
}


html {
  font-size: 32px;
}

body {
    font-family: Arial, Helvetica, sans-serif;
     -webkit-text-size-adjust: 100%;
     text-rendering: optimizeLegibility;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     text-shadow: rgba(0, 0, 0, 0) 0 0 0px;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  gap: 0.3rem;
}

header {
  padding: 0.3rem 0.3rem 0 0.3rem;
  background-color: white;
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
}

main {
    padding: 0 0.3rem 0 0.3rem;
} 

footer {
  padding: 0 0.3rem 0.3rem 0.3rem;
}


/******
TITLE CAROUSEL GPT, EVTL ÄNDERN WENN ICHS CHECKE
****/

.container-carousel {
    position: fixed;
    bottom: 0rem;
    left: 0;
    width: 100vw;
}

.title-carousel {
    display: flex;
    align-items: stretch;
    justify-content:space-between;
    text-align: center;
    /* gap: 2rem; */
    margin-right: 2rem;
     margin-left: 2rem;
}


.title-carousel button {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
}

/*GILL SUCKS SLIDER*/

.controls {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.controls label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

input[type="range"] {
  width: 19vw;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

/* ===== TRACK ===== */
input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: black;
}

input[type="range"]::-moz-range-track {
  height: 2px;
  background: black;
}

/* ===== THUMB (sichtbarer Punkt + größere Hitbox) ===== */

/* Chrome / Safari / Edge */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;

  height: 16px;   /* größere Hitbox */
  width: 16px;    /* größere Hitbox */

  background: black;
  border-radius: 50%;

  margin-top: -7px; /* zentriert auf 2px Linie */
  cursor: pointer;
}

/* Firefox */
input[type="range"]::-moz-range-thumb {
  height: 16px;
  width: 16px;

  background: black;
  border-radius: 50%;
  border: none;

  cursor: pointer;
}

/* optional: macht die ganze Zeile etwas besser klickbar */
input[type="range"] {
  padding: 10px 0;
}

/*******
LAYOUT
*********/
.imprint {
    position: fixed;
    bottom: 0;
    width: 100vw;
}
.width-half {
    width: 50vw;
}

hr {
    all: unset;
    display: block;
    height: 2px;
    background-color: black;
    margin: 0 -0.3rem 0.0 -0.3rem;
}

/*AFK Grid*/

/* .gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.3rem;
}

.gallery figure {
  margin: 0;
}

.gallery img {
  width: 100%;
  display: block;
} */

/*****
FLEXBOX
******/

/*vor zurück und titel header als flexbox*/
.containerarrows {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}

.containerheader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
}


/*Care in Type*/
.containerposter {
    display: flex;
    flex-direction: row;
    justify-content:left;
    flex-wrap: nowrap;
}

/*AFK Poster*/
.containerfilm {
    display: flex;
    flex-direction:row;
    align-items: end;
    gap: 0.3rem;
}

/*About*/
.containerabout {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.containerabouttext {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content:space-between;
    flex-wrap: nowrap;
    width: 55vw;
}

.containeraboutpage {
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    flex-wrap: nowrap;
}

.featurelist {
    bottom: 0;
}

/** BREITEN IN FÜNFTEL***/
/*LÜCKEN NOCH MIT EINRECHNEN!!!!*********/

.width15 {
    width: 20vw;
}

.width25 {
    width: 40vw;
}

.width35 {
    width: 60vw;
}

.width45 {
    width: 80vw;
}

.titleproject {
    text-align: center;
}


/******MARGINS
********/

/*Margins in 5teln*/

.m-left1 {
    margin-left: 20vw;
}

.m-left2 {
    margin-left: 40vw;
}

.m-left3 {
    margin-left: 60vw;
}

.m-left4 {
    margin-left: 80vw;
}

/*mini abstand*/
.m-right005 {
    margin-right: 0.5vw;
}

/*MARGINS AFTER*/

.space-xxs {
    margin-bottom: 0.25rem;
}

.space-xs {
    margin-bottom: 0.5rem;
}

.space-s {
    margin-bottom: 1.5rem;
}

/******
FONTS TEXTS
*****/

/*einbetten*/

@font-face {
    font-family: Gill Sucks;
    src: url(../fonts/GillSucksVF.woff2) format('woff2');
}

.gillsucks {
    font-family: "Gill Sucks";
    font-variation-settings: "wght" 400, "SPLT" 0;
}

.gillsucksbold {
    font-family: "Gill Sucks";
    font-variation-settings: "wght" 700
}

/*reduce*/
@font-face {
    font-family: reduceless;
    src: url(../fonts/reduceless-Regular.woff2) format('woff2');
}

.reduceless {
    font-family: "reduceless";
}

@font-face {
    font-family: reduce;
    src: url(../fonts/reduce-Regular.woff2) format('woff2');
}

.reduce {
    font-family: "reduce";
}

@font-face {
    font-family: reducemore;
    src: url(../fonts/reducemore-Regular.woff2) format('woff2');
}

.reducemore {
    font-family: "reducemore";
}

@font-face {
    font-family: Coura;
    src: url(../fonts/coura-regular.otf);
}

/*Coura Glyph Alternates in einzelnen Fonts für Glyphenübersicht*/

/*normale geschlossene Form, mit ziffern und symbolen*/
@font-face {
    font-family: Coura01;
    src: url(../fonts/Coura01-Regular.woff2) format('woff2');
}

/*mit inline rechts verbunden*/
@font-face {
    font-family: Coura02r;
    src: url(../fonts/Coura02r-Regular.woff2) format('woff2');
}

/*medi outline links und rechts verbunden*/
@font-face {
    font-family: Coura03lr;
    src: url(../fonts/Coura03lr-Regular.woff2) format('woff2');
}

/*outline links verbunden, rechts offen, outline ziffern und symbole*/
@font-face {
    font-family: Coura04lr2;
    src: url(../fonts/Coura04lr2-Regular.woff2) format('woff2');
}

/*nur ausgewählte buchstaben outline links offen, ziffern und symbole outline offen*/
@font-face {
    font-family: Coura05ml;
    src: url(../fonts/Coura05ml-Regular.woff2) format('woff2');
}

/*nur ausgewählte buchstaben outline zerfallen*/
@font-face {
    font-family: Coura06mx;
    src: url(../fonts/Coura06mx-Regular.woff2) format('woff2');
}

.coura {
    font-family: Coura;
}

.coura01 {
    font-family: Coura01;
}

.coura02 {
    font-family: Coura02r;
}

.coura03 {
    font-family: Coura03lr;
}

.coura04 {
    font-family: Coura04lr2;
}

.coura05 {
    font-family: Coura05ml;
}

.coura06 {
    font-family: Coura06mx;
}

/*Stylistic Sets*/

.ss-standard {
  font-feature-settings: "ss01" 0, "ss02" 0, "ss03" 0, "ss04" 0;
}

.ss-01 {
  font-feature-settings: "ss01" 1, "ss02" 0, "ss03" 0, "ss04" 0;
}

.ss-02 {
  font-feature-settings: "ss01" 0, "ss02" 1, "ss03" 0, "ss04" 0;
}

.ss-03 {
  font-feature-settings: "ss01" 0, "ss02" 0, "ss03" 1, "ss04" 0;
}

.ss-04 {
  font-feature-settings: "ss01" 0, "ss02" 0, "ss03" 0, "ss04" 1;
}

/*--*/
.caps {
    text-transform: uppercase;
}

/*GROESSEN*/

.fliesstext {
    font-size: 0.75rem;
}

.fontm {
    font-size: 1.5rem;
}
.fontl {
    font-size: 2rem;
}

.fontxxl {
    font-size: 5rem;
}

.textalign-r {
    text-align: right;
}

/*geringere line height für coura*/

.lh-m {
    line-height: 1.6rem;
}

.lh-xxl {
    line-height: 5rem;
}


/*******
IMAGES AND GIFS
******/

.saturation0 {
    filter: saturate(0%);
}

.couragif {
    width: 63vw;
}

/*SVG PFEILE*/
.arrow {
  width: auto;
  height: 0.8rem;
  fill: none;
  stroke: black;
  stroke-width: 0.3rem;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.arrowtopleft {
    width: auto;
    height: 0.9rem;
    fill: none;
    stroke: black;
    stroke-width: 0.3rem;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(45deg) translateY(0.1rem);
    transform-origin: center; 
}

.arrowtop {
    width: auto;
    height: 0.9rem;
    fill: none;
    stroke: black;
    stroke-width: 0.3rem;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(90deg) translateY(0.1rem);
    transform-origin: center; 
}

.arrowtopright {
    width: auto;
    height: 0.9rem;
    fill: none;
    stroke: black;
    stroke-width: 0.3rem;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(135deg) translateY(-0.1rem);
    transform-origin: center; 
}

.bigarrow {
    width: auto;
  height: 4.5rem;
  fill: none;
  stroke: black;
  stroke-width: 0.1rem;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.smallarrow {
    width: auto;
    height: 0.75rem;
    fill: none;
    stroke: black;
    stroke-width: 0.25rem;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(135deg) translateY(-0.15rem);
    transform-origin: center; 
}

.arrow-btn {
  cursor: pointer;
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
}

/******
COLORS and EFFECTS
********/

.dropshadow {
    box-shadow: 3px 3px 8px rgb(148, 148, 148);
}
/*******
RESPONSIVE
*****/