/* Kombiniertes CSS */
/* ----------------------------
       📍 RESET SHEET 📍
----------------------------- */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  font-weight: normal;
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
}

/* Remove default margin in favour of better control in authored CSS */
* {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"],
ul,
ol {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100svh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]),
a {
  text-decoration-skip-ink: auto;
  color: currentColor;
  text-decoration: none;
}

/* Remove default styles of buttons */
button,
input[type="submit"],
input[type="reset"] {
  background: none;
  color: currentColor;
  border: none;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

/* Make images easier to work with */
img,
picture,
svg,
video {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* ----------------------------------
     ⛲️ @font-face DECLARATIONS ⛲️
----------------------------------- */
/* NEW EDGE 666 */
@font-face {
  font-family: "NewEdge666-LightRounded";
  src: url(/assets/fonts/NewEdge666-LightRounded.woff2) format("woff2");
}

/* MRS EAVES */
@font-face {
  font-family: "MrsEavesNarrow-Regular";
  src: url(/assets/fonts/MrsEavesXLSerNarOT-Reg.woff2) format("woff2");
}

@font-face {
  font-family: "MrsEavesNarrow-RegularItalic";
  src: url(/assets/fonts/MrsEavesXLSerNarOT-RegItalic.woff2) format("woff2");
  font-style: italic;
}

/* WINGDINGS */
@font-face {
  font-family: "Wingdings";
  src: url(/assets/fonts/Wingdings-2.woff2) format("woff2");
}

/* MONACO */
@font-face {
  font-family: "Monaco";
  src: url(/assets/fonts/Monaco.woff2) format("woff2");
}

/* GENEVA */
@font-face {
  font-family: "Geneva";
  src: url(/assets/fonts/Geneva.woff2) format("woff2");
}

/* CHICAGO / KRUNGTHEP */
@font-face {
  font-family: "Krungthep";
  src: url(/assets/fonts/Krungthep.woff2) format("woff2");
}

/* APPLE SYMBOLSP */
@font-face {
  font-family: "AppleSymbols";
  src: url(/assets/fonts/Apple-Symbols.woff2) format("woff2");
}

/* ARIAL */
@font-face {
  font-family: "Arial-Regular";
  src: url(/assets/fonts/Arial.woff2) format("woff2");
}

@font-face {
  font-family: "Arial-Italic";
  src: url(/assets/fonts/Arial-Italic.woff2) format("woff2");
}

@font-face {
  font-family: "Arial-Bold";
  src: url(/assets/fonts/Arial-Bold.woff2) format("woff2");
}

@font-face {
  font-family: "Arial-Rounded";
  src: url(/assets/fonts/Arial-Rounded-Bold.woff2) format("woff2");
}

/* ----------------------------
          🚨 ROOT 🚨
----------------------------- */
:root {
  --border-thickness: min(1.1svw, 2px);

  /* FARBEN */
  --border-color: #9350df;
  --red: #f74646;
  --dark-red: #c72531;
  --purple: #992cff;
  --dark-purple: #6228a3;
  --green: #96ff8c;
  --dark-green: #118163;
  --blue: #221bd7;
  --dark-blue: #0d1461;
  --orange: #ff8700;
  --dark-orange: #8a4800;
  --gelb: #fff93d;
  --black: #000000;
  --hintergrund: #af95d2;
  --header-bg-light: #f6f6f6;
  --header-bg-dark: #2f2e31;
  --pink: #ff00f0;
  --dark-pink: #85055e;
  --CRT-green: #92bca5;
  --clippy-yellow: #fdfacf;

  /* FONTS */
  --newEdgeLight: "NewEdge666-LightRounded";
  --MrsEavesRegular: "MrsEavesNarrow-Regular";
  --MrsEavesRegularItalic: "MrsEavesNarrow-RegularItalic";
  --monaco: "Monaco";
  --geneva: "Geneva";
  --chicago: "Krungthep";
  --apple-symbols: "AppleSymbols";
  --arialReg: "Arial-Regular";
  --arialIta: "Arial-Italic";
  --arialBold: "Arial-Bold";
  --arialRounded: "Arial-Rounded";
  --wingdings: "Wingdings";
}

/* ----------------------------
       🧪 BASE STYLES 🧪
----------------------------- */
body {
  /* mix-blend-mode: multip ly; */
  /* margin: 0 1.5vw 1.5vw 1.5vw; */
  overflow-x: hidden;
  scroll-behavior: smooth;
}

::selection {
  background: var(--orange);
  text-shadow: none;
}

::-moz-selection {
  background: var(--orange);
  text-shadow: none;
}

.hidden {
  display: none !important;
}

.pointer:hover {
  cursor: pointer;
}

.titelzeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.einfuehrungs-wrapper {
  display: flex;
  align-items: center;
  gap: 3svw;
}

/* Hover auf h3 */
.einfuehrungs-wrapper h3:hover + .einfuehrung {
  opacity: 1;
}

.titelzeile img {
  width: auto;
  height: 70px;
  margin-top: -5px;
}

.mirror {
  transform: scale(-1, 1);
}

.next-btn-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: fit-content;
  width: 96svw;
  margin-top: -3.5svw;
  position: fixed;
}

.page-btn {
  font-size: 3rem;
  cursor: pointer;
  justify-self: center;
  transition: 0.2s ease;
}

.page-btn:hover {
  color: var(--purple);
}

.next-btn {
  position: fixed;
  right: 35px;
  top: 45px;
  z-index: 10;
}

.prev-btn {
  position: fixed;
  left: 35px;
  top: 45px;
  z-index: 10;
}

.error-wrapper {
  width: 100%;
  height: 100svh;
  padding: 5svw 2svw;
  flex: 1; /* nimmt den restlichen Platz ein */
  transition: 0.2s ease;
  position: relative;
  z-index: 12;
  overflow: hidden;
}

.mobile-disclaimer {
  display: none;
}

@media print {
  body[data-page="manifest"] header,
  body[data-page="manifest"] footer {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }
}

@media (max-width: 890px) {
  .titelzeile {
    margin-top: 50px;
  }
}

/* -----------------------------
        🌱 TYPOGRAPHY 🌱
----------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
.sidebar-nav-item {
  font-family: var(--newEdgeLight);
}

/* h2: Overriding Systems Intro */
h2 {
  font-size: 13svw;
  text-transform: uppercase;
}

/* h3: Titel auf Thumbnails auf Home */
h3 {
  font-family: var(--newEdgeLight);
  z-index: 5;
  font-size: 5rem;
  text-transform: uppercase;
  color: var(--black);
  -webkit-text-stroke: 3px var(--black);
}

p {
  hyphens: auto;
}

/* h4: Nav-Elemente */
h4:hover,
.title:hover,
.gespraech:hover {
  transform: skewX(-15deg);
  transition: 0.15s ease;
}

.title,
.upper-right-nav h4,
.sidebar-nav-item {
  text-transform: uppercase;
  font-size: 1.3rem;
  padding-top: 3.5px;
  letter-spacing: 1.5px;
}

.sidebar-heading h6 {
  font-family: var(--MrsEavesRegularItalic);
  font-size: 1.15rem;
}

/* TITLE TEXT */
.intro-title-1 {
  grid-column: 1/6;
  grid-row: 1/2;
  text-align: left;
  padding: 6svw 0 0 3svw;
  position: relative;
  z-index: 11;
  color: white;
  -webkit-text-stroke: 50px var(--dark-purple);
  transform: skewX(-14deg) translateX(-150%); /* Start links außerhalb */
  animation: slideInLeft 1s forwards ease-out; /* Animation starten */
}

.intro-title-1-2 {
  grid-column: 1/6;
  grid-row: 1/2;
  text-align: left;
  padding: 6svw 0 0 3svw;
  position: relative;
  z-index: 12;
  color: white;
  transform: skewX(-14deg) translateX(-150%); /* Start links außerhalb */
  animation: slideInLeft 1s forwards ease-out; /* Animation starten */
}

.intro-title-2 {
  grid-column: 3/9;
  grid-row: 1/2;
  text-align: right;
  padding: 19svw 4svw 0 0;
  position: relative;
  z-index: 11;
  color: white;
  -webkit-text-stroke: 50px var(--dark-purple);
  transform: translateX(150%); /* Start rechts außerhalb */
  animation: slideInRight 1s forwards ease-out;
  animation-delay: 0.2s; /* optional: leicht verzögert */
}

.intro-title-2-2 {
  grid-column: 3/9;
  grid-row: 1/2;
  text-align: right;
  padding: 19svw 4svw 0 0;
  position: relative;
  z-index: 12;
  color: white;
  transform: translateX(150%); /* Start rechts außerhalb */
  animation: slideInRight 1s forwards ease-out;
  animation-delay: 0.2s; /* optional: leicht verzögert */
}

/* Keyframes */
@keyframes slideInLeft {
  from {
    transform: skewX(-14deg) translateX(-150%);
  }
  to {
    transform: skewX(-14deg) translateX(0);
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(150%);
  }
  to {
    transform: translateX(0);
  }
}

.digital {
  grid-column: 6/9;
  grid-row: 1/2;
  position: relative;
  align-self: flex-end;
  padding: 0 0 20px 50px;
  z-index: 12;
  font-size: 3.75svw;
  color: white;
  display: inline-block;
  transform: skewX(-15deg);
  animation: wiggle 0.5s ease-out;
  animation-delay: 1.4s;
}

.digital-background {
  grid-column: 6/9;
  grid-row: 1/2;
  position: relative;
  align-self: flex-end;
  padding: 0 0 20px 50px;
  z-index: 11;
  font-size: 3.75svw;
  color: white;
  -webkit-text-stroke: 30px var(--orange);
  display: inline-block;
  transform: skewX(-15deg);
  animation: wiggle 0.5s ease-out;
  animation-delay: 1.4s;
}

@keyframes wiggle {
  0% {
    transform: skewX(-15deg);
  }
  50% {
    transform: skewX(-5deg);
  }
  100% {
    transform: skewX(-15deg);
  }
}

.strikethrough {
  text-decoration: line-through;
  text-decoration-thickness: 10px;
}

.introduction-text {
  font-family: var(--monaco);
  font-size: 1.2svw;
  grid-row: 1/2;
  padding: 1.5svw;
  -webkit-text-stroke: 0.75px var(--black);
}

.italic {
  display: inline-block;
  transform: skewX(-15deg);
}

.arial-italic {
  font-family: var(--arialIta) !important;
}

.arial-bold {
  font-family: var(--arialBold);
}

.mrs-eaves-reg {
  font-family: var(--MrsEavesRegular);
}

.mrs-eaves-ita {
  font-family: var(--MrsEavesRegularItalic) !important;
}

.quote {
  font-size: 2.5rem;
  line-height: 2.75rem;
  font-family: var(--MrsEavesRegular);
  margin-bottom: 2svw;
  padding-right: 2svw;
}

.apple-symbols {
  font-family: var(--apple-symbols) !important;
  font-variant-emoji: text; /* verhindert farbige Emoji-Darstellung */
  -webkit-font-variant-emoji: text; /* Safari/macOS */
  font-size: 3rem;
  padding-top: 1.5rem;
}

.apple-symbols-mittel {
  font-family: var(--apple-symbols) !important;
  font-variant-emoji: text; /* verhindert farbige Emoji-Darstellung */
  -webkit-font-variant-emoji: text; /* Safari/macOS */
  font-size: 1.6rem;
  margin-left: -4px;
}

.apple-symbols-klein {
  font-family: var(--apple-symbols) !important;
  font-variant-emoji: text; /* verhindert farbige Emoji-Darstellung */
  -webkit-font-variant-emoji: text; /* Safari/macOS */
  font-size: 1rem;
}

.geneva {
  font-family: var(--geneva);
  font-size: 1.25rem;
}

.chicago {
  font-family: var(--chicago);
  font-size: 1.25rem;
}

.monaco {
  font-family: var(--monaco);
  font-size: 1.25rem;
}

.gespraech {
  font-family: var(--newEdgeLight);
  text-transform: uppercase;
  font-size: 4.5rem;
  -webkit-text-stroke: 1px var(--black);
}

.igm {
  font-family: var(--MrsEavesRegularItalic);
  text-transform: none;
  font-size: 2.5rem;
  -webkit-text-stroke: 0px var(--black);
  padding: 1.85rem 0.5rem;
}

.gespraech-igm {
  font-family: var(--MrsEavesRegularItalic);
  text-transform: none;
  font-size: 2.5rem;
  -webkit-text-stroke: 0px var(--black);
  padding: 1.45rem 2.5rem 1.45rem 0.75rem;
}

.gespraech-content-left p {
  font-size: 1.8rem;
  line-height: 2.3rem;
  font-family: var(--arialReg);
}

.intro-text {
  font-size: 1.65rem;
  line-height: 2.3rem;
  font-family: var(--arialReg);
  padding-right: 2svw;
}

.aufzeichnung {
  font-family: var(--arialReg);
  text-transform: uppercase;
  margin: -0.5svw 0 2.5svw 4svw;
}

.einfuehrung {
  font-size: 1.2rem;
  line-height: 1.6rem;
  font-family: var(--arialReg);
  padding-right: 2svw;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.manifest {
  font-family: var(--monaco);
  text-align: center;
  padding: 1.5svw 0 10svw 0;
}

.wingdings {
  font-family: var(--wingdings);
}

.monaco-bold {
  -webkit-text-stroke: 0.75px var(--black);
}

.gesicht-text {
  font-size: 1.4rem;
  line-height: 1.9rem;
  hyphens: auto;
}

.einstieg-bold {
  -webkit-text-stroke: 0.5px var(--black);
}

.gesicht-hover-trigger,
.verlinkung {
  font-family: var(--apple-symbols) !important;
  font-variant-emoji: text; /* verhindert farbige Emoji-Darstellung */
  -webkit-font-variant-emoji: text; /* Safari/macOS */
}

.further-link,
.externer-link {
  color: var(--pink);
}

.fundus-link {
  color: var(--blue);
}

.gesicht-link {
  color: var(--dark-green);
}

.chronik-link {
  color: var(--orange);
}

.gespraech-link {
  color: var(--dark-purple);
}

.image-trigger {
  color: var(--dark-green);
}

.interview-image-trigger {
  color: var(--purple);
}

.hdiw-finger {
  font-size: 2.2rem;
}

.pfeilhand-klein {
  font-size: 1.6rem;
}

.fundus-tag {
  padding: 2px 13px;
  margin-bottom: 5px;
  border-radius: 30px;
  background-color: var(--blue);
  color: white;
  text-transform: uppercase;
  font-family: var(--arialRounded);
  width: fit-content;
}

.fundus-titel,
.fundus-autorin,
.verlinkung-text,
.about-content-right p {
  font-family: var(--arialReg);
  font-size: 1.2rem;
  width: 100%;
}

.verlinkung:hover,
.verlinkung-text:hover {
  color: var(--pink);
}

.chronik-card-text p {
  width: 100%;
  text-align: center;
  font-family: var(--arialReg);
  font-size: 1.15rem;
  line-height: 1.5rem;
}

.jahreszahl {
  margin: 10px 0;
  padding: 2px 13px;
  border-radius: 30px;
  background-color: var(--orange);
  color: white;
  text-transform: uppercase;
  font-family: var(--arialRounded);
  width: fit-content;
}

.imprint-p {
  font-family: var(--arialReg);
  font-size: 1.05rem;
  padding-bottom: 30px;
}

.imprint-headline {
  font-family: var(--arialBold);
}

.smaller-text {
  font-family: var(--arialReg);
  font-size: 0.85rem;
}

@media (max-width: 890px) {
  .title,
  .upper-right-nav h4,
  .sidebar-nav-item {
    font-size: 1rem;
  }

  h2 {
    font-size: 14svw;
    line-height: 1.7;
    margin-left: -70px;
  }

  h3 {
    font-size: 4rem;
  }

  .digital,
  .digital-background {
    display: none;
  }

  .intro-title-1 {
    -webkit-text-stroke: 20px var(--dark-purple);
    animation: slideInLeft 0.75s forwards ease-out; /* Animation starten */
    margin-top: 100px;
  }

  .intro-title-1-2 {
    animation: slideInLeft 0.75s forwards ease-out; /* Animation starten */
    margin-top: 100px;
  }

  .intro-title-2 {
    -webkit-text-stroke: 20px var(--dark-purple);
    animation: slideInRight 0.75s forwards ease-out;
    margin-top: 100px;
  }

  .intro-title-2-2 {
    animation: slideInRight 0.75s forwards ease-out;
    margin-top: 100px;
  }
}

/* ----------------------------
          🗣️ HEADER 🗣️
----------------------------- */

/* Wenn der Nutzer Light Mode eingestellt hat */
@media (prefers-color-scheme: light) {
  header {
    background: var(--header-bg-light);
    border-bottom: 0.3px solid rgb(183, 183, 183);
    color: black;
  }

  .sidebar-nav {
    background: var(--header-bg-light);
    border-right: 0.3px solid rgb(183, 183, 183);
  }

  .search-icon-white {
    width: 22px;
    margin-top: -2px;
    cursor: pointer;
    display: none;
  }

  .search-icon {
    width: 22px;
    margin-top: -2px;
    cursor: pointer;
    display: inline-flex;
  }

  .sidebar-img-white {
    display: none;
  }

  .sidebar-img-black {
    display: block;
  }

  .img-white {
    display: none;
  }

  .img-black {
    display: block;
  }
}

/* Wenn der Nutzer Dark Mode eingestellt hat */
@media (prefers-color-scheme: dark) {
  header {
    background: var(--header-bg-dark);
    border-bottom: 0.3px solid rgb(95, 95, 95);
    color: white;
  }

  .sidebar-nav {
    background: var(--header-bg-dark);
    border-right: 0.3px solid rgb(95, 95, 95);
  }

  .search-icon-white {
    width: 22px;
    margin-top: -2px;
    cursor: pointer;
    display: inline-flex;
  }

  .search-icon {
    width: 22px;
    margin-top: -2px;
    cursor: pointer;
    display: none;
  }
  .sidebar-img-white {
    display: block;
  }

  .sidebar-img-black {
    display: none;
  }

  .hdiw-finger {
    color: white;
  }

  .img-black {
    display: none;
  }

  .img-white {
    display: block;
  }
}

header {
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
}

.sidebar-nav {
  width: 230px;
  height: 100svh;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0px 0px 0px 30px;
  transform: translateX(-100%);
  transition: transform 0.2s;
}

.sidebar-nav.active {
  transform: translateX(0);
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
}

.sidebar-nav-item img {
  width: 25px;
  height: 25px;
  margin-top: -4px;
  /* background-color: blue; */
}

/* ICON-IMAGES */
.nav-thesis-img {
  width: 27px !important;
  height: 27px !important;
  margin-left: -2px !important;
  margin-right: 2px !important;
}

.nav-fundus-img {
  width: 28px !important;
  height: 28px !important;
  margin-left: -1px !important;
}

.sidebar-heading {
  margin: 50px 0 3px -3px; /* margin-top = header-height */
}

.upper-nav {
  width: 100%;
  height: 100%;
  padding: 13px 27px 13px 23px;
  display: flex;
  justify-content: space-between;
  flex: 1; /* nimmt den restlichen Platz ein */
  transition: margin-left 0.2s;
}

.upper-left-nav,
.upper-right-nav {
  width: fit-content;
  height: 100%;
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.sidebar-icon {
  width: 27px;
  cursor: pointer;
  position: absolute;
  left: 30px;
  z-index: 100;
}

.history-nav {
  display: flex;
  gap: 15px;
  font-size: 1.3rem;
  line-height: 1.5rem;
  margin-left: 60px;
}

@media (max-width: 890px) {
  .history-nav,
  .sidebar-icon,
  .search-icon,
  .search-icon-white {
    display: none;
  }
}

/* ----------------------------
         🦶🏻 FOOTER 🦶🏻
----------------------------- */
@media (prefers-color-scheme: light) {
  footer {
    background: var(--header-bg-light);
    border-top: 0.3px solid rgb(183, 183, 183);
  }

  .footer-nav h4 {
    color: black;
  }
}

/* Wenn der Nutzer Dark Mode eingestellt hat */
@media (prefers-color-scheme: dark) {
  footer {
    background: var(--header-bg-dark);
    border-top: 0.3px solid rgb(183, 183, 183);
  }

  .footer-nav h4 {
    color: white;
  }
}

footer {
  width: 100%;
  height: 30px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
}

.footer-nav {
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
}

.footer-nav h4 {
  text-transform: uppercase;
  font-size: 1.05rem;
  padding-top: 7.5px;
  letter-spacing: 1px;
}

/* ----------------------------
        🧭 NAVIGATION 🧭
----------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
}

.overlay.open {
  display: flex;
}

.modal {
  background: var(--dark-purple);
  padding: 2rem;
  border-radius: 20px;
  background-image: url(/assets/media/main-background.png);
  background-size: 500%;
  border: 0.75px solid var(--orange);
  width: 500px;
  max-width: 94%;
  box-shadow: 0 0 80px var(--orange);
  color: white;
}

.modal h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
  -webkit-text-stroke: 0.8px white;
}

.input-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.input-row input[type="text"] {
  flex: 1;
  padding: 0.5rem 1rem;
  font-family: var(--arialReg);
  font-size: 1.3rem;
  border: 1px solid var(--dark-purple);
  border-radius: 50px;
  box-shadow: 0 0 15px var(--orange);
  color: black;
}

.input-row button {
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
}

.hint {
  font-size: 1.2rem;
  font-family: var(--arialReg);
  margin-bottom: 1.5rem;
  -webkit-text-stroke: 0.3px white;
  text-shadow: 0 0 20px var(--black);
}

.result {
  font-size: 1.3rem;
  font-family: var(--arialReg);
  -webkit-text-stroke: 0.4px white;
  margin-top: 2rem;
  font-size: 0.95rem;
  color: white;
}

#closeBtn,
#goBtn {
  margin-top: 0.6rem;
  background: transparent;
  border: 0;
  color: white;
  cursor: pointer;
  -webkit-text-stroke: 0.4px white;
  font-family: var(--arialReg);
  font-size: 1.3rem;
}

#closeBtn {
  float: right;
}

#goBtn {
  font-size: 1.6rem;
}

#closeBtn:hover,
#goBtn:hover {
  color: var(--pink);
  -webkit-text-stroke: 0.4px var(--pink);
}

.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ----------------------------
       🏠 HOME STYLES 🏠
----------------------------- */
main {
  width: 100svw;
  /* height: fit-content; */
  height: 100svh;
  display: grid;
  grid-template-columns: 3.06svw 30.61svw 7.65svw 11.22svw 13.78svw 11.22svw 5.1svw 17.36svw;
  grid-template-rows: 70svh 1.3svh 35svh 40svh 15svh 37svh 17svh 45svh 0svh 0svh;
  /* gap: 23px; */
  flex: 1; /* nimmt den restlichen Platz ein */
  transition: 0.2s ease;
  overflow-x: hidden;

  background: var(--hintergrund);
  background-image: url(/assets/media/main-background.png);
  background-size: cover;
}

/* INTRO */
.intro-section {
  grid-column: 1/9;
  grid-row: 1/2;
  background: url(/assets/media/bitmap-orange.png);
  background-size: cover;
  position: relative;
  z-index: 10;
}

.intro-1 {
  grid-column: 2/3;
  grid-row: 1/2;
  background: var(--pink);
}

.intro-2 {
  grid-column: 3/6;
  grid-row: 1/2;
  background: var(--blue);
}

.intro-3 {
  grid-column: 6/9;
  grid-row: 1/2;
  background: var(--red);
}

.under-construction-sign-intro {
  grid-column: 1/6;
  grid-row: 1/2;
  align-self: flex-end;
  position: relative;
  z-index: 10;
}

.pixel-six {
  grid-column: 1/3;
  grid-row: 1/2;
  align-self: flex-end;
  width: 18svw;
  margin: 0 0 -6svw -2svw;
  position: relative;
  z-index: 9;
}

.deko-stern-wrapper {
  grid-column: 2 / 5;
  grid-row: 1 / 2;

  /* relativ für absolute Positionierung des Bildes */
  position: relative;
  z-index: 9;

  margin: 17.3svw 0 0 8svw;

  /* optional: Abstand vom Grid-Rand */
  /* padding entfernt, da es die Rotation verschiebt */
  width: 65%; /* Größe der Box */
  height: 0; /* Höhe dynamisch über Padding-Bottom oder Bildgröße */
  aspect-ratio: 1; /* sorgt dafür, dass Box quadratisch ist */

  display: flex; /* zentriert das Bild */
  justify-content: center;
  align-items: center;

  mix-blend-mode: difference;
}

.deko-stern {
  width: 80%;
  height: auto;

  /* Rotation um die Mitte */
  transform-origin: center center;

  /* Animation */
  animation: rotateStar 13s linear infinite;
}

@keyframes rotateStar {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.happy-mac {
  grid-column: 6/9;
  grid-row: 1/2;
  z-index: 10;
  position: relative;
}

.happy-mac img {
  position: absolute;
  top: 4svw;
  left: 13svw;
  width: 40%;
}

/* MAIN */
.thumbnail {
  width: 100%;
  height: 100%;
  /* border: 2px solid black; */
  position: relative;
  z-index: 10;
  /* overflow-x: hidden; */
  /* overflow-y: scroll; */
}

.thumbnail a {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 15px;
  justify-content: center;
  align-items: center;
}

.platzhalter1 {
  grid-column: 1/9;
  grid-row: 2/3;
  background: var(--black);
}

.timeline-thumbnail {
  grid-column: 1/3;
  grid-row: 3/4;
  background-color: var(--dark-orange);
  background-image: url(/assets/media/bitmap-orange.png);
  background-size: 350%;
}

.timeline-img {
  width: auto;
  height: 80%;
  margin: -15px 10px 0 0;
  position: relative;
}

.portraits-thumbnail {
  grid-column: 2/3;
  grid-row: 4/5;
  background-color: var(--green);
  background-image: url(/assets/media/bitmap-green.png);
  background-size: 200%;
  background-position: right;
}

.portraits-img {
  width: auto;
  height: 80%;
  margin: -15px 10px 0 0;
  position: relative;
}

.platzhalter3 {
  /* grid-column: 1/3;
  grid-row: 8/13; */
  background-color: var(--orange);
}

.thesis-thumbnail {
  grid-column: 2/3;
  grid-row: 8/9;
  z-index: 13;
  background: linear-gradient(to bottom, #e6e6e6, #bfbfbf);
  filter: blur(0.5px);
}

.thesis-thumbnail a {
  background-image: url(/assets/media/bitmap-silver.webp);
  background-size: 900%;
  background-position: 1900px;
}

.thesis-thumbnail img {
  margin: -20px 0 0 0;
  width: 90%;
}

.books-texts-videos-thumbnail {
  grid-column: 3/6;
  grid-row: 3/7;
  background-color: var(--dark-blue);
  background-image: url(/assets/media/bitmap-blue.png);
  background-size: 250%;
}

.fundus-img {
  width: auto;
  height: 90%;
  margin: -150px 0 0 0;
  position: relative;
}

.introduction {
  grid-column: 6/9;
  grid-row: 3/7;
  background: var(--red);
  display: grid;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  justify-content: center;

  background-color: var(--dark-red);
  background-image: url(/assets/media/bitmap-red.png);
  background-size: 350%;
}

.manifest-home {
  grid-row: 2/3;
  display: flex;
  justify-content: center;
  align-items: center;
}

.manifest-home img {
  padding: 0svw 7svw 3.5svw 7svw;
}

.platzhalter4 {
  /* grid-column: 1/3;
  grid-row: 13/17; */
  background: var(--orange);
}

.interviews-thumbnail {
  grid-column: 1/4;
  grid-row: 6/8;
  background-color: var(--dark-purple);
  background-image: url(/assets/media/bitmap-purple.png);
  background-size: 200%;
}

.interviews-img {
  width: auto;
  height: 70%;
  margin: -15px 0 0 0;
  position: relative;
}

.under-construction-sign-main {
  grid-column: 4/9;
  grid-row: 6/7;
  align-self: flex-end;
  position: relative;
  z-index: 11;
}

.adventure-thumbnail {
  grid-column: 3/8;
  grid-row: 7/9;
  /* background-color: var(--grün); */
  background-color: var(--dark-pink);
  background-image: url(/assets/media/bitmap-pink.webp);
  background-size: 600%;
}

.adventure-img {
  width: auto;
  height: 55%;
  position: relative;
}

.mac-screen {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3; /* Klassisches CRT-Format */
  background: linear-gradient(180deg, #d6c9b8, #cfc2ae);
  border-radius: 15px;
  padding: 8%;
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.6),
    inset 0 -2px 3px rgba(0, 0, 0, 0.2);
}

.screen {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(106, 163, 132, 0.05) 0 1px,
      rgba(0, 0, 0, 0.05) 1px 2px
    ),
    linear-gradient(180deg, #213027, #121d19);
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.7);
  position: relative;
  overflow: hidden;
}

.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    60% 65% at 50% 45%,
    rgba(106, 163, 132, 0.18),
    transparent 60%
  );
  mix-blend-mode: screen;
  animation: hum 3.2s ease-in-out infinite alternate;
}

@keyframes hum {
  from {
    filter: brightness(1) contrast(1);
    opacity: 0.9;
  }
  to {
    filter: brightness(1.04) contrast(1.05);
    opacity: 1;
  }
}

/* .crt-text {
  width: 63%;
  position: absolute;
  z-index: 11;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--CRT-green);
  font-family: var(--monaco);
  font-size: 0.85rem;
  text-shadow: 0 0 4px rgba(106, 163, 132, 0.6);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
} */

/* .community-thumbnail {
  grid-column: 1/9;
  grid-row: 9/10;
  background-color: var(--blue);
  margin: 0 6svw;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 3rem;
  position: relative;
}

.posts-container {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  max-width: 33%;
  max-height: 600px;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--monaco);
}

.post {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 8px;
  border-radius: 6px;
  color: white;
  position: relative;
}

.post .timestamp {
  font-size: 0.75em;
  color: rgba(255, 255, 255, 0.7);
  position: absolute;
  right: 8px;
  bottom: 4px;
}

form {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 60%;
}

form input,
form textarea {
  padding: 8px;
  border-radius: 6px;
  border: none;
  resize: none;
}

form button {
  padding: 10px;
  border: none;
  border-radius: 6px;
  background-color: white;
  color: var(--blue);
  cursor: pointer;
}

/* Modal Hintergrund */
.form-modal {
  display: none; /* versteckt */
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5); /* halbtransparent */
  justify-content: center;
  align-items: center;
}

/* Modal Inhalt */
.form-modal-content {
  background-color: var(--blue);
  padding: 20px;
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Schließen-Button */
.form-close-btn {
  align-self: flex-end;
  font-size: 1.5em;
  color: white;
  cursor: pointer;
}

/* Formular */
#post-form input,
#post-form textarea {
  padding: 8px;
  border-radius: 6px;
  border: none;
  width: 100%;
}

#post-form button {
  padding: 10px;
  border: none;
  border-radius: 6px;
  background-color: white;
  color: var(--blue);
  cursor: pointer;
}
.platzhalter2 {
  grid-column: 7/9;
  grid-row: 7/9;
  background-image: url(/assets/media/ones-and-zeros.png);
  background-size: cover;
  z-index: 9;
}

@media (max-width: 890px) {
  .mobile-no-scroll {
    height: 100svh;
    overflow: hidden;
    grid-template-rows: 100svh 1.3svh 35svh 40svh 15svh 37svh 17svh 45svh 0svh 0svh;
  }

  .mobile-disclaimer {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    text-align: center;
    font-family: var(--newEdgeLight);
    text-transform: uppercase;
    font-size: 1.8rem;
    line-height: 1.3;
    color: white;
    text-shadow: 2px 2px 10px var(--dark-purple);
    width: 100%;
    padding: 0 5svw;
    margin-top: 100px;
  }

  .thumbnail {
    display: none;
  }

  .pixel-six {
    width: 36svw;
  }

  .deko-stern-wrapper {
    margin: 67svw 0 0 0;
  }

  .happy-mac img {
    top: 70svw;
    left: 0svw;
    width: 70%;
  }
}

/* ----------------------------
          📦 FUNDUS 📦
----------------------------- */
.fundus-gradient {
  position: fixed;
  z-index: 11;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, var(--blue) 0%, white 40%);
}

.fundus-wrapper {
  width: 100%;
  height: 100%;
  padding: 5svw 2svw;
  flex: 1; /* nimmt den restlichen Platz ein */
  transition: 0.2s ease;
  position: relative;
  z-index: 12;
}

.fundus-content-wrapper {
  margin-top: 30px;
}

.fundus-image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  align-items: flex-start;
  width: 100%;
}

.fundus-image-gallery img {
  display: block;
  width: auto;
  height: auto;
  max-height: 30svw;
  max-width: 40svw;
  margin-bottom: 10px;
  object-fit: contain;
  cursor: pointer;
}

.image-group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 40svw;
}

.fundus-beschreibung {
  display: flex;
  flex-wrap: wrap;
  width: 270px;
  padding: 0px 20px 0 30px;
}

/* ----------------------------
        👾 ADVENTURE 👾
----------------------------- */
.adventure-wrapper {
  width: 100svw;
  height: 100svh;
  background-image: url(/assets/media/starry-night.gif);
}

.mac-wrapper {
  margin: 0;
  padding: 0;
  height: 100svh;
  width: 100svw;
  /* padding: 5svw 2svw 3svw 2svw; */
  font-family: monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

/* Hauptgehäuse, füllt fast den Viewport aus */
.macintosh {
  width: 75%;
  aspect-ratio: 16/10;
  background: #e0d8c5; /* Oatmeal Beige */
  border: 2px solid #cfc2ae;
  border-radius: 6px;
  box-sizing: border-box;
  position: relative;
  padding: 2%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

/* Bildschirm */
.mac-screen-adventure {
  width: 100%;
  flex: 1;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(106, 163, 132, 0.05) 0 1px,
      rgba(0, 0, 0, 0.05) 1px 2px
    ),
    linear-gradient(180deg, #213027, #121d19);
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.7);
  border: 3px solid #cfc2ae;
  position: relative;
  border-radius: 4px;
  display: flex;
  align-items: flex-end;
}

.mac-screen-adventure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    60% 65% at 50% 45%,
    rgba(106, 163, 132, 0.18),
    transparent 60%
  );
  mix-blend-mode: screen;
  animation: hum 3.2s ease-in-out infinite alternate;
}

@keyframes hum {
  from {
    filter: brightness(1) contrast(1);
    opacity: 0.9;
  }
  to {
    filter: brightness(1.04) contrast(1.05);
    opacity: 1;
  }
}

/* Floppy Disk Laufwerk - absolut zum Gehäuse */
.floppy {
  width: 8svw;
  min-width: 100px;
  height: 10px;
  background: #c0b8a0;
  position: absolute;
  bottom: 1svw;
  right: 2svw;
  border-radius: 2px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.floppy::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: #a09070;
  border-radius: 50%;
  top: 2px;
  right: 5px;
}

/* Basis */
.base {
  width: 100%;
  height: 7%;
  background: #d8d0b8;
  margin-top: 1%;
  border-top: 2px solid #cfc2ae;
}

#adventure {
  font-family: var(--monaco);
  color: var(--CRT-green);
  text-shadow: 0 0 4px rgba(106, 163, 132, 0.6);
  width: 95%;
  max-width: 98%;
  margin: 0rem auto;
  padding-bottom: 1vw;
  position: relative;
  z-index: 3;
}

input#adventure-input {
  font-family: monospace;
  width: 100%;
  padding: 0.5rem;
  margin-top: 1rem;
  background: #222;
  color: #f4f4f4;
  border: 1px solid #444;
  border-radius: 0.25rem;
  pointer-events: auto;
}

#adventure p {
  margin-bottom: 5px;
  font-family: monospace;
}

.clippy {
  width: 3.7svw;
  max-width: 70px;
  position: absolute;
  bottom: 5svh;
  right: 1svw;
  cursor: pointer;
}

.clippy img {
  filter: drop-shadow(0 0 300px rgba(0, 0, 0, 0.7));
}

.clippy-pop-up {
  width: 350px;
  height: fit-content;
  max-width: 80vw; /* responsive fallback */
  position: absolute;
  right: 100%; /* direkt links vom Bild */
  bottom: clamp(125px, 10svh, 140px);
  z-index: 999;
  transform: translateY(50%);
  margin-right: 35px; /* fester Abstand zum Bild */

  display: inline-block;
  background: var(--clippy-yellow);
  padding: 15px 20px;
  border-radius: 12px;
  font-family: Arial, sans-serif;
}

.clippy-pop-up::after {
  content: "";
  position: absolute;
  bottom: 20px;
  right: -30px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 30px solid var(--clippy-yellow);
}

/* ----------------------------
        🙎🏼‍♀️ GESICHTER 🙎🏼‍♀️
----------------------------- */
.gesichter-gradient {
  position: fixed;
  z-index: 11;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, var(--green) 0%, white 40%);
}

.gesichter-wrapper {
  width: 100%;
  height: 100%;
  padding: 5svw 2svw;
  flex: 1; /* nimmt den restlichen Platz ein */
  transition: 0.2s ease;
  position: relative;
  z-index: 12;
}

.gesichter-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 28svw);
  gap: 1.5svw;
  margin-top: 1svw;
  /* background-color: blue; */
}

.gesichter-grid a {
  position: relative;
}

.gesichter-grid a img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* füllt die Zelle vollständig aus */
  display: block; /* verhindert unerwünschte Abstände */
  position: relative;
  z-index: 11;
}

.green-filter {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 12;
  width: 100%;
  height: 100%;
  background-color: var(--green);
  mix-blend-mode: multiply;
}

.gesichter-grid a:hover .green-filter {
  mix-blend-mode: normal;
  z-index: 10;
}

/* ----------------------------
         ⌚️ CHRONIK ⌚️
----------------------------- */
.chronik-gradient {
  position: fixed;
  z-index: 11;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, var(--orange) 0%, white 40%);
}

.chronik-wrapper {
  width: 100%;
  height: 100svh;
  padding: 5svw 2svw;
  flex: 1; /* nimmt den restlichen Platz ein */
  transition: 0.2s ease;
  position: relative;
  z-index: 12;
  overflow: hidden;
}

.titelzeile-chronik {
  position: fixed;
  z-index: 99;
  left: 0;
  top: 70px;
  padding: 2svw 2svw;
}

.chronik-map {
  width: 6400px;
  height: 100svh;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.timeline {
  width: 100%;
  height: 3px;
  background-color: var(--black);
  position: absolute;
  top: 45svh;
  left: 0;
  z-index: 999;
}

.chronik-card {
  max-width: 300px;
  height: fit-content;
  margin: 30px;
  /* background: red; */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  position: absolute;
}

.hover-img {
  position: fixed; /* wichtig: relativ zum Viewport */
  max-height: 90vh;
  max-width: 40vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1000;
}

/* Beim Hover Bild anzeigen */
.chronik-card:hover .hover-img {
  opacity: 1;
}

.chronik-card-text {
  max-width: 285px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: flex-start;
}

.jacquard-chronik {
  top: -160px;
  left: -30px;
}

.difference-chronik {
  left: 130px;
}

.analytical-chronik {
  top: -230px;
  left: 280px;
}

.zuse-chronik {
  top: -10px;
  left: 1150px;
}

.mark1-chronik {
  top: -220px;
  left: 1310px;
}

.eniac-chronik {
  top: 30px;
  left: 1340px;
}

.turing-chronik {
  left: 1440px;
  top: -340px;
}

.univac-chronik {
  left: 1550px;
  top: -190px;
}

.compiler-chronik {
  left: 1560px;
  top: -10px;
}

.flow-matic-chronik {
  left: 1650px;
  top: 140px;
}

.cobol-chronik {
  left: 1760px;
  top: -280px;
}

.linc-chronik {
  left: 1820px;
  top: 10px;
}

.eliza-chronik {
  left: 1970px;
  top: -180px;
}

.nls-chronik {
  left: 2110px;
  top: 0px;
}

.arpanet-chronik {
  left: 2110px;
  top: -290px;
}

.resource-one-chronik {
  left: 2240px;
  top: -170px;
}

.xerox-alto-chronik {
  left: 2290px;
  top: 70px;
}

.apple-1-chronik {
  top: -320px;
  left: 2370px;
}

.apple-2-chronik {
  top: -180px;
  left: 2420px;
}

.ibm-pc-chronik {
  top: 20px;
  left: 2530px;
}

.osborne-1-chronik {
  top: -310px;
  left: 2530px;
}

.epson-hx20-chronik {
  top: -180px;
  left: 2600px;
}

.apple-lisa-chronik {
  top: 130px;
  left: 2640px;
}

.macintosh-chronik {
  top: -350px;
  left: 2740px;
}

.emigre-design-chronik {
  top: -20px;
  left: 2740px;
}

.windows-1-chronik {
  top: -180px;
  left: 2850px;
}

.spanning-tree-chronik {
  top: 100px;
  left: 2850px;
}

.april-greiman-chronik {
  top: -300px;
  left: 2950px;
}

.quarkxpress-chronik {
  top: -10px;
  left: 3010px;
}

.next-computer-chronik {
  top: -160px;
  left: 3070px;
}

.echonyc-chronik {
  top: 130px;
  left: 3180px;
}

.cyberrag-chronik {
  top: -285px;
  left: 3180px;
}

.world-wide-web-chronik {
  top: -10px;
  left: 3320px;
}

.vns-matrix-chronik {
  top: -370px;
  left: 3320px;
}

.apple-power-book-chronik {
  top: -160px;
  left: 3320px;
}

.html-chronik {
  top: 140px;
  left: 3550px;
}

.womans-wire-chronik {
  top: -285px;
  left: 3550px;
}

.ibm-thinkpad-chronik {
  top: 0px;
  left: 3550px;
}

.mosaic-chronik {
  top: -160px;
  left: 3650px;
}

.javascript-chronik {
  top: 110px;
  left: 3760px;
}

.windows-95-chronik {
  top: -310px;
  left: 3760px;
}

.css-chronik {
  top: -15px;
  left: 3850px;
}

.adobe-cs-chronik {
  top: -200px;
  left: 4250px;
}

.macbook-pro-chronik {
  top: 20px;
  left: 4450px;
}

.iphone-1-chronik {
  top: -300px;
  left: 4540px;
}

.macbook-air-chronik {
  top: -170px;
  left: 4630px;
}

.adobe-cc-chronik {
  top: 0;
  left: 4950px;
}

.gpt-1-chronik {
  top: -360px;
  left: 5200px;
}

.bert-lm-chronik {
  top: 80px;
  left: 5200px;
}

.gpt-2-chronik {
  top: -170px;
  left: 5280px;
}

.m-chip-chronik {
  top: -10px;
  left: 5450px;
}

.gpt-3-chronik {
  top: -290px;
  left: 5450px;
}

.chat-gpt-chronik {
  top: -145px;
  left: 5600px;
}

.gemini-chronik {
  top: 30px;
  left: 5690px;
}

.gpt-4-chronik {
  top: -330px;
  left: 5690px;
}

.gpt-5-chronik {
  top: -200px;
  left: 5880px;
}

/* ----------------------------
         📄 MANIFEST 📄
----------------------------- */
.manifest-gradient {
  position: fixed;
  z-index: 11;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, var(--red) 0%, white 40%);
}

.manifest-wrapper {
  width: 100%;
  height: fit-content;
  padding: 5svw 2svw;
  flex: 1; /* nimmt den restlichen Platz ein */
  transition: 0.2s ease;
  position: relative;
  z-index: 12;
}

.manifest-content-wrapper {
  width: 100%;
  height: 90svh;
  margin: 2svw 0 3svw 0;
  padding: 0 20svw;
}

@media print {
  @page {
    size: A3 portrait; /* Hochformat */
  }

  .titelzeile {
    display: none;
  }

  header {
    display: none;
  }

  footer {
    display: none;
  }

  .manifest {
    font-size: 0.85rem;
  }
}

/* ----------------------------
         📓 THESIS 📓
----------------------------- */
.thesis-gradient {
  position: fixed;
  z-index: 11;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, silver 0%, white 40%);
}

.thesis-wrapper {
  width: 100%;
  height: 100%;
  padding: 5svw 2svw;
  flex: 1; /* nimmt den restlichen Platz ein */
  transition: 0.2s ease;
  position: relative;
  z-index: 12;
}

.thesis-content-wrapper {
  display: grid;
  grid-template-columns: 1fr 30svw;
  gap: 40px;
  padding-top: 2svw;
  font-size: 1.3rem;
}

.thesis-content-wrapper .wingdings {
  font-size: 1.1rem;
}

/* Created with http://boockup.marco.land */
@-webkit-keyframes rotatingAnimationX {
  0% {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
@keyframes rotatingAnimationX {
  0% {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
@-webkit-keyframes rotatingAnimationY {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}
@keyframes rotatingAnimationY {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}
@-webkit-keyframes rotatingAnimationZ {
  0% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}
@keyframes rotatingAnimationZ {
  0% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}

.boockup-container {
  grid-column: 2/3;
  margin: -0px 20px 0 0;
  overflow: hidden;
  -webkit-perspective: 1200px;
  perspective: 1200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  z-index: 99;
}

.boockup-container > div {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.boockup {
  -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
.book-container {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: 10s rotatingAnimationY linear infinite;
  animation: 10s rotatingAnimationY linear infinite;
}
.book-container > div {
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center center;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

.book-container > div > a {
  display: inline-block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.book-top,
.book-bottom,
.book-side-right {
  background-size: auto auto;
  background-repeat: repeat;
  background-position: top left;
}
.book-front {
  background-image: url("/assets/media/book-cover.webp");
  width: 306px;
  height: 420px;
  -webkit-transform: translate3d(-153px, -210px, 8.5px) translate3d(0, 0, 0)
    rotateY(0deg);
  transform: translate3d(-153px, -210px, 8.5px) translate3d(0, 0, 0)
    rotateY(0deg);
}
.book-side-left {
  background-image: url("/assets/media/book-spine.webp");
  width: 17px;
  height: 420px;
  -webkit-transform: translate3d(-153px, -210px, 8.5px)
    translate3d(-8.5px, 0, -8.5px) rotateY(-90deg);
  transform: translate3d(-153px, -210px, 8.5px) translate3d(-8.5px, 0, -8.5px)
    rotateY(-90deg);
}
.book-side-right {
  background-image: url("/assets/media/book-side.webp");
  width: 17px;
  height: 420px;
  -webkit-transform: translate3d(-153px, -210px, 8.5px)
    translate3d(297.5px, 0px, -8.5px) rotateY(90deg);
  transform: translate3d(-153px, -210px, 8.5px)
    translate3d(297.5px, 0px, -8.5px) rotateY(90deg);
}
.book-top {
  background-image: url("/assets/media/book-top.webp");
  background-position: bottom right;
  width: 306px;
  height: 17px;
  -webkit-transform: translate3d(-153px, -210px, 8.5px)
    translate3d(0px, -8.5px, -8.5px) rotateX(90deg);
  transform: translate3d(-153px, -210px, 8.5px) translate3d(0px, -8.5px, -8.5px)
    rotateX(90deg);
}
.book-bottom {
  background-image: url("/assets/media/book-top.webp");
  width: 306px;
  height: 17px;
  -webkit-transform: translate3d(-153px, -210px, 8.5px)
    translate3d(0px, 411.5px, -8.5px) rotateX(-90deg);
  transform: translate3d(-153px, -210px, 8.5px)
    translate3d(0px, 411.5px, -8.5px) rotateX(-90deg);
}
.book-back {
  background-image: url("/assets/media/book-back.webp");
  width: 306px;
  height: 420px;
  -webkit-transform: translate3d(-153px, -210px, 8.5px) translate3d(0, 0, -17px)
    rotateY(180deg);
  transform: translate3d(-153px, -210px, 8.5px) translate3d(0, 0, -17px)
    rotateY(180deg);
}

/* ----------------------------
         💬 Gespräche 💬
----------------------------- */
.gespraeche-gradient {
  position: fixed;
  z-index: 11;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, var(--dark-purple) 0%, white 40%);
}

.gespraeche-wrapper {
  width: 100%;
  height: 100%;
  padding: 5svw 2svw;
  flex: 1; /* nimmt den restlichen Platz ein */
  transition: 0.2s ease;
  position: relative;
  z-index: 12;
}

.gespraeche-wrapper .titelzeile {
  margin-bottom: 7.5svw;
}

.gespraeche-content-wrapper {
  display: flex;
  margin-bottom: 1svw;
}

/* ----------------------------
        🙎🏼‍♀️ GESICHT 🙎🏼‍♀️
----------------------------- */
.gesicht-wrapper {
  width: 100%;
  height: 100%;
  padding: 80px 4svw 5svw 37px;
  flex: 1; /* nimmt den restlichen Platz ein */
  transition: 0.2s ease;
  position: relative;
  z-index: 12;
}

.gesicht-upper-content-wrapper {
  width: 94svw;
  height: fit-content;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin: 40px 0 30px 0;
}

.gesicht-content-left {
  grid-column: 1/2;
}

.gesicht-content-left img {
  width: 46svw;
  height: auto;
  /* max-height: 70svh; */
  margin-top: 1svw;
}

.gesicht-content-right {
  grid-column: 2/3;
}

.gesicht-lower-content-wrapper {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 60px;
}

.faces-image-gallery {
  grid-column: 2/3;
  /* width: 94svw; */
  display: flex;
  flex-wrap: wrap;
  gap: 1svw;
}

.faces-image-gallery img {
  width: auto;
  max-height: 30svw;
  margin-bottom: 20px;

  display: none;
}

.gesicht-hover-trigger {
  cursor: pointer;
}

#preview-image {
  position: fixed; /* fixiert das Bild am Viewport */
  top: 120px; /* Abstand vom oberen Rand */
  right: 100px; /* Abstand vom rechten Rand */
  width: auto;
  max-width: 55svw;
  max-height: 42svw;
  display: none; /* initially hidden */
  z-index: 999;
}

.big-image {
  max-height: 25svw !important;
}

[data-img="hybrid-imagery"]::before,
[data-img="libre-fonts"]::before,
[data-img="cyber-index"]::before,
[data-img="shy"]::before {
  content: url(/assets/media/fundus-blau.svg);
  display: inline-block;
  width: 26px;
  height: 26px;
  padding: 1px 2px 0 0;
}

[data-img="wolfgang-weingart"]::before,
[data-img="studie"]::before {
  content: url(/assets/media/gespraeche-purple.svg);
  display: inline-block;
  width: 22px;
  height: 22px;
  padding: 0px 3px 0 0;
}

[data-img="ada-lovelace"]::before,
[data-img="emcc"]::before,
[data-img="grace-hopper"]::before,
[data-img="eniac-six"]::before,
[data-img="cobol"]::before,
[data-img="echo"]::before,
[data-img="jaime-levy"]::before,
[data-img="mac-schriften"]::before,
[data-img="wolfgang-weingart"]::before {
  content: url(/assets/media/gesichter-green.svg);
  display: inline-block;
  width: 18px;
  height: 18px;
  padding: 0px 3px 0 0;
}

/* ----------------------------
         💬 Gespräch 💬
----------------------------- */
.gespraech-gradient {
  position: fixed;
  z-index: 11;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, var(--dark-purple) 0%, white 40%);
}

.gespraech-wrapper {
  width: 100%;
  height: 100%;
  padding: 5svw 2svw;
  flex: 1; /* nimmt den restlichen Platz ein */
  transition: 0.2s ease;
  position: relative;
  z-index: 12;
}

.gespraech-title {
  display: flex;
  margin: 40px 0 60px 0;
}

.gespraech-content-wrapper {
  width: 96svw;
  height: 35svw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4svw;
}

.gespraech-content-left {
  width: 47svw;
  grid-column: 1/2;
  grid-row: 1/3;
}

.gespraech-content-right {
  width: 47svw;
  grid-column: 2/3;
  grid-row: 1/2;
  height: fit-content;
}

/* ----------------------------
         📦 ANLEITUNG 📦
----------------------------- */
.anleitung-gradient {
  position: fixed;
  z-index: 11;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, var(--pink) 0%, white 40%);
}

.anleitung-wrapper {
  width: 100%;
  height: 100svh;
  padding: 5svw 2svw;
  flex: 1; /* nimmt den restlichen Platz ein */
  transition: 0.2s ease;
  position: relative;
  z-index: 12;
}

.anleitung-text-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.anleitung-text {
  padding: 2svw 10svw 0 0;
  font-family: var(--MrsEavesRegular);
  font-size: 1.4rem;
}

#happy-mac-icon::before {
  content: url(/assets/media/gesichter.svg);
  display: inline-block;
  width: 18px;
  height: 18px;
  padding: 0px 3px 0 0;
}

#fundus-icon::before {
  content: url(/assets/media/fundus.svg);
  display: inline-block;
  width: 26px;
  height: 26px;
  padding: 1px 2px 0 0;
}

#interview-icon::before {
  content: url(/assets/media/gespraeche.svg);
  display: inline-block;
  width: 22px;
  height: 22px;
  padding: 0px 3px 0 0;
}

.anleitung-img-wrapper {
  width: 20%;
  position: absolute;
  bottom: 100px;
  right: 2svw;
}

/* ----------------------------
         📦 IMPRINT 📦
----------------------------- */
.imprint-gradient {
  position: fixed;
  z-index: 11;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, var(--purple) 0%, white 40%);
}

.imprint-wrapper {
  width: 100%;
  height: 100%;
  padding: 5svw 2svw;
  flex: 1; /* nimmt den restlichen Platz ein */
  transition: 0.2s ease;
  position: relative;
  z-index: 12;
  overflow: hidden;
}

.imprint-content-wrapper {
  margin-top: 20px;
}

/* ----------------------------
         👩🏼 ABOUT 👩🏼
----------------------------- */
.about-gradient {
  position: fixed;
  z-index: 11;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, var(--purple) 0%, white 40%);
}

.about-wrapper {
  width: 100%;
  height: 100%;
  padding: 5svw 2svw;
  flex: 1; /* nimmt den restlichen Platz ein */
  transition: 0.2s ease;
  position: relative;
  z-index: 12;
}

.about-content-wrapper {
  width: 94svw;
  height: fit-content;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin: 40px 0 60px 0;
}

.about-content-left {
  grid-column: 1/2;
  font-family: var(--arialReg);
}

.about-content-left p {
  padding-top: 5px;
  font-style: italic;
}

.about-content-left img {
  width: 350px;
  height: auto;
  border: var(--border-thickness) solid var(--border-color);
  background:
    linear-gradient(
      to bottom right,
      transparent 49.7%,
      var(--border-color) 50%,
      transparent 50.2%
    ),
    linear-gradient(
      to top right,
      transparent 49.7%,
      var(--border-color) 50%,
      transparent 50.2%
    );
}

.about-content-right {
  grid-column: 2/3;
}

.about-content-right p a:hover {
  color: var(--green);
}

@media (max-width: 890px) {
  .about-content-left {
    display: none;
  }

  .about-content-right {
    grid-column: 1/3;
  }
}