/* --- GLOBAL SETTINGS & RESET --- */

html,
body {
  margin: 0;
  padding: 0;
  background-color: white;

  /* UPDATED: Specific font stack + Generic fallback */
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;

  overflow-x: hidden;
  height: 100vh;
  -ms-overflow-style: none;
  scrollbar-width: none;

  line-height: 14px;
}

.projekt-frame-panel p {
  padding-bottom: 10.5px !important;
}

/* UNIVERSAL RESET */
* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  list-style-type: none;
  margin: 0;
  padding: 0;

  /* UPDATED: Forces all elements to use the parent's font */
  font-family: inherit;
}

p {
  padding: 5px;
  /* padding-top: 3px !important;
  padding-bottom: 3px !important; */

  padding-top: 3.5px !important;
  padding-bottom: 3.5px !important;

  /* padding-left: 5px;
  padding-right: 5px; */
  line-break: loose;
}

:root {
  --substanz: #0000FF;
  --akzidenz: #DA9AD9;
}

/* --- TYPOGRAPHY --- */

.titel {
  cursor: pointer;
  transition: font-size 0.15s ease;
}

/* .titel:hover {
  font-size: 1.025em;
} */

.link-arrow {
  cursor: pointer;
  transition: font-size 0.15s ease;
  opacity: 0.3;
}

/* .link-arrow:hover {
  text-decoration: underline;
  opacity: 1.0;
} */

.subtitel {
  opacity: 0.5;
}

/* --- UTILITIES --- */

.filtered {
  flex: 0 !important;
  width: 0 !important;
  opacity: 0 !important;
}

.opac50 {
  opacity: 0.5;
}

.hidden {
  display: none !important;
}

.nonselect {
  user-select: none;
}

/* --- LANGUAGES & LINKS --- */

.languages {
  display: flex;
  flex-direction: row;
  position: absolute;
  right: 120px;
}

a:hover {
  /* background-color: pink;
  color: blue; */
}

a:link,
a:visited,
a:active {
  text-decoration: none;
  color: inherit;
}

a {
 text-decoration: underline;
}

/* --- SELECTION & SCROLLBARS --- */

/* ::-moz-selection {
  color: blue;
  background: pink;
}

::selection {
  color: blue;
  background: pink;
} */

::-webkit-scrollbar {
  display: none;
}

/* --- TOP FRAME --- */

.top-frame {
  height: 8vh;
  display: flex;
  flex-direction: row;
  align-items: top;
  justify-content: space-between;
  z-index: 14;
  position: sticky;
  top: 0;
  color: blue;
}

/* --- MAIN LAYOUT --- */

.main-frame {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  height: 100vh;
  opacity: 1;
  transition: opacity 0.25s;
}

.category-column {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.category-about {
  width: 25%;
}

.category-lehre {
  width: 25%;
}

.category-projekte {
  width: 50%;
}

.projekt-cover img {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
  /* Removed relative positioning/overlay styles here as requested for Home */
}

.projekt-frame {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
  width: 100%;
  text-align: left;
  transition: opacity 0.25s;
  color: black;
  cursor: pointer;
}

.projekt-beschreibung {
  width: 100%;
  text-align: left;
  /* line-height: 1.4; */
}

/* --- MENU & FILTER --- */

.menu-filter {
  display: flex;
  flex-direction: row;
}

.filter-hover:hover {
  background-color: pink;
  color: blue;
}

.filter-hover {
  width: auto;
}

/* --- HELLO VIDEO OVERLAYS --- */

.hello {
  position: fixed;
  top: 20%;
  left: 0;
  opacity: 1;
  transition: opacity 0.5s;
}

.hello-video {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: opacity 0.5s;
  max-width: 50%;
  height: auto;
}

.active {
  font-weight: bold;
}

/* --- SIDEPANEL --- */

.sidepanel {
  height: 100vh;
  width: 75vw;
  position: fixed;
  right: 0;
  top: 0;
  background-color: white;
  transform: translateX(100%);
  /* transition: transform 0.25s ease; */
  overflow: hidden;
  /* -webkit-box-shadow: 1px 1px 16px 5px rgba(0, 0, 0, 0.54);
  box-shadow: 1px 1px 16px 5px rgba(0, 0, 0, 0.54); */
  z-index: 100;
  color: black;
}

.panel-column-text {
  width: 25vw;
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
}

.panel-column-media {
  width: 50vw;
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
}

.moved {
  transform: translateX(0%);
}

.sidepanel-closer {
  position: fixed;
  right: 0;
  top: 0;
  height: auto;
  width: auto;
  z-index: 99;
  border: solid red;
}

.closer-deactivated {
  pointer-events: none;
}

.close-btn {
  background-color: #ff0000;
  color: white;
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 101;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;

  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 8px;
  padding-right: 8px;
}

/* .close-btn:hover {
  opacity: 0.8;
} */

.panel-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.projekt-frame-panel {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
  flex: 100%;
  flex-basis: 100%;
  max-width: 100%;
  text-align: left;
  height: auto;
  transition: flex 0.3s, flex-basis 0.2s, max-width 0.2s, padding 0.2s, opacity 0.25s;
  color: black;
}

.projektbilder-frame-wrapper {
  width: 100%;
  min-width: 100%;
  display: flex;
}

.projektbilder-frame {
  display: flex;
  flex-direction: column;
  align-content: center;
  min-height: 0px;
  overflow-y: auto;
  height: 100%;
  width: 100%;
}

/* --- SIDEPANEL MEDIA & OVERLAYS --- */

.projektbilder {
  margin: auto;
  max-width: 80%;
  max-height: 100%;
}

/* 1. The Wrapper handles the layout/centering now */
.projektbilder-container {
  position: relative;
  /* Anchor for absolute text */
  margin: auto;
  /* Centering (was previously on the img) */
width: 100%;
  /* Width limit (was previously on the img) */
  /* padding-bottom: 10%; */
  /* Spacing between items */
}

/* 2. The Image fills the wrapper */
.projektbilder-container .projektbilder {
  display: block;
  width: 100%;
  height: auto;

  /* Reset margins/padding on the img itself since wrapper handles it */
  margin: 0;
  padding-bottom: 0;
  max-width: 100%;
}

/* 3. The Text Overlay (Specific to Sidepanel) */
.projektbilder-container .cover-text-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;

  color: white;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.95);
}


/* --- WEB VIDEO (YOUTUBE/VIMEO) --- */
.webvideo-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  /* margin-bottom: 20px; */
}

/* The !important is crucial here to override default iframe sizes */
.webvideo-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}


/* --- DOWNLOAD BUTTON --- */
/* Copies visual style of .close-btn but keeps it in flow */
.download-btn {
  background-color: #ff0000;
  color: white !important;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;

  /* Same padding as close-btn */
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 8px;
  padding-right: 8px;

  margin-left: 5px;

  margin-bottom: 5px;
  /* Space between text and button */
}

/* .download-btn:hover {
  opacity: 0.8;
} */