@charset "UTF-8";
/* =======================
   FINAL STYLESHEET – Sync sizes & 50 % larger menu button
   ======================= */

/***** Global Reset & Base *****/
* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 1.6em;
  background: #000;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2em;
  line-height: 1.2em;
}

a { color: #fff; text-decoration: none; }
a:hover { color: #FFA8E0; }

/***** Header *****/
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 0.4em;
  font-size: 3em;   /* Referenz‑Schriftgröße */
  line-height: 1em;
  background: none;
  z-index: 1000;
  text-align: left;
}

/***** Footer (alle Seiten, default sichtbar) *****/
.footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  padding: 0.4em;
  font-size: 3em;   /* exakt wie Header */
  line-height: 0.8em;
  background: none;
  z-index: 1000;
  display: flex;
  gap: 0.6em;
  flex-wrap: wrap;
  row-gap: 0.3em;
}
.footer .pink-text { color: #FFA8E0; }

/******** Index ********/
body.index .menu { display: none; }

@media (max-width: 600px) {
  body.index .footer {
    flex-direction: column;
    gap: 0.3em;
  }
  body.index .footer a,
  body.index .footer .pink-text { display: block; }
}

/******** Unterseiten ********/
/* Footer sichtbar ≥600 px, Dropdown darunter unsichtbar */
body:not(.index) .footer { display: flex; }
body:not(.index) .menu  { display: none; }

/*   ≤600 px → Dropdown statt Footer */
@media (max-width: 600px) {
  body:not(.index) .footer { display: none !important; }
  body:not(.index) .menu  { display: block; position: fixed; bottom: 1em; right: 1em; z-index: 1000; }
}

/***** Dropdown Button *****/
body:not(.index) .menu summary {
  list-style: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
  width: 84px;   /* 50 % größer */
  height: 84px;
  border-radius: 50%;
  border: 1px solid #fff;   /* weißer Kreis‑Outline */
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;          /* verankert an Ecke */
  bottom: 1em;
  right: 1em;
  z-index: 1001;            /* über Overlay */
}
body:not(.index) .menu summary::-webkit-details-marker { display: none; }

/* Burger SVG inside summary tag */
body:not(.index) .menu summary svg {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;          /* dünnere Linien */
  stroke-linecap: round;
  /* Abstand zwischen Balken via viewBox -> empfohlen: y=18,48,78  */
  color: #fff;
}

/* Hide Burger SVG when menu is open */
body:not(.index) .menu[open] summary svg { display: none; }

/* Weißes X bei offenem Menü */
body:not(.index) .menu summary::after {
  content: "✕";  
  display: none;             /* default hidden */
  font-size: 3em;          /* 3 em × 1.5 */
  color: #fff;
}
body:not(.index) .menu summary::after {
  content: "✕";
  font-size: 3em;
  color: #fff;
  line-height: 0;           /* kompakt */
  display: none;
}
body:not(.index) .menu[open] summary::after { display: block; }
body:not(.index) .menu[open] summary {
  border: 1px solid #fff;    /* gleiches Outline beim X */
}



/***** Overlay-Menü *****/
body:not(.index) .menu nav { display: none; }

body:not(.index) .menu[open] nav {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  padding: 0.4em;
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.3em;
  font-size: 3em;
  line-height: 0.8em;

  z-index: 999;          /* below summary button */
}
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  padding: 0.4em;
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.3em;
  font-size: 3em;            /* exakt wie Header/Footer */
  z-index: 999;
}

body:not(.index) .menu[open] nav a,
body:not(.index) .menu[open] nav { display: block; color: #fff; }
body:not(.index) .menu[open] nav .pinktext { display: block; color: #FFA8E0; } 

/***** Main Content *****/
main {
  padding: 0;
  margin-top: 20vh;
  margin-bottom: 4em;
  margin-right: 30em;  
}

@media (max-width: 1400px) {
  main { margin-right: 0.8em; }   /* schmaler: halbierter Abstand rechts */
}

@media (max-width: 600px) {
  main { margin-right: 0; }       /* sehr schmal: kein rechter Abstand */
}

/***** Typografie *****/
section { margin-top: 1.5em; }
section h2 { font-size: 1.7em; margin: 0 0 0.5em 0; }
section h3 {font-size: 3em; margin: 0 0 0.5em 0; font-weight: 100;}
section h4 {
	font-size: 1.5em; 
	font-family: "nautica", sans-serif;
	font-weight: 700;
	font-style: normal;
	color: #FFA8E0; }
section h5 { font-size: 1.2em; font-weight: bold; }
ul { list-style: none; margin: 0; padding: 0; }
li { margin: 0 0 1.9em 0; }

/***** Extra‑small ≤400 px *****/
@media (max-width: 400px) {
  body:not(.index) .menu summary { width: 72px; height: 72px; }
  body:not(.index) .menu[open] summary::before { font-size: 2.25em; }
  /* Header & Overlay bleiben 3 em */
  .header { font-size: 2.5em; }
  main   { font-size: 0.8em; }
}


/* ===== Bouncer ===== */
#bouncer {
  position: fixed;
  top: 0; left: 0;
  width: 200px; height: 200px;
  z-index: -1;              /* hinter allem – Schrift bleibt vorn */
  pointer-events: none; /* klickt nicht “durch” */
  transition: transform 8s linear;

}