@charset "UTF-8";
/* CSS Document */

body {
	margin: 0px;
	padding: 0px;
	font-family: "hanken-grotesk", sans-serif;
	background-color: #F8F4DF;
}
a {
	text-decoration: none;
	color: inherit;
}
.filter a:hover, .footer a:hover, .footer-buttons a:hover {
	text-decoration: underline 2px #D979E2;
	color: #D979E2;
}

/*-----------------------HEADER / FILTER-----------------------*/

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px 40px;
  border-bottom: solid 2px #000000;
}

.filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.filter-label {
  font-size: 14px;
  color: #000000;
}

.filter-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-btn {
  background: none;
  border: solid 1px #000000;
  border-radius: 20px;
  padding: 2px 12px;
  font-size: 15px;
  font-family: inherit;
  font-weight: 600;
  color: #000000;
  cursor: pointer;
}

.filter-btn:hover,
.filter-btn.active {
  background-color: #000;
  border-color: #000;
  color: #FFF;
}

/* "Maximal: 12 Projekte" Kontrolle */
.max-control {
  position: relative;
  border: solid 1px #000000;
  border-radius: 20px;
  padding: 2px 12px;
  font-size: 15px;
  font-weight: 600;
  min-width: 90px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.max-label {
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.max-adjust {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.max-control:hover .max-label,
.max-control.active .max-label {
  opacity: 0;
}

.max-control:hover .max-adjust,
.max-control.active .max-adjust {
  opacity: 1;
  pointer-events: auto;
}

.max-btn {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  font-family: inherit;
  color: #000000;
  cursor: pointer;
  padding: 0 4px;
}

.max-btn:hover {
  color: #D979E2;
}

.max-value {
  font-size: 16px;
}

/*-----------------------FOOTER (Impressum/Datenschutz)-----------------------*/

.footer {
  position: fixed;
  bottom: 0px;
  height: 70px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px;
}

/*-----------------------INHALT / PROJEKTE-----------------------*/

.inhalt {
	height: calc(100vh - 130px); /* Höhe minus Header/Footer */
	overflow-x: auto;
	overflow-y: hidden;
  }

.beitraege-container {
	width: max-content;
	display: flex;
}

/* Wrapper um die Projekt-Kästen. Auf dem Desktop verhält er sich unsichtbar
   (display: contents), damit die Kästen weiterhin direkte Flex-Kinder von
   .beitraege-container sind. Auf dem Handy wird daraus der scrollbare Bereich. */
.projekte-liste {
  display: contents;
}

.beitrag-kasten {
	height: calc(100vh - 177px);
	width: 30px; /* Schmale Breite im Normalzustand */
    position: relative;
    transition: width 0.3s ease; /* Sanfte Animation */
    overflow: hidden;
    white-space: nowrap;
  	padding: 20px;
	border: solid 1px #000000;
	margin-right: -1px;
	margin-top: -2px;
	display: flex;
    flex-direction: column;
	justify-content: flex-end; /* Inhalt unten anheften */
}

.beitrag-kasten:hover {
    width: 700px; /* Breite beim Hovern - anpassen nach Bedarf */
	background-color: #D979E2;
	overflow-y: auto;
}

.beitrag-kasten h3 {
    writing-mode: vertical-rl; /* Text hochkant */
    transform: rotate(180deg); /* Damit der Text von oben nach unten lesbar ist */
    position: absolute;
    left: 20px;
    top: 20px;
    margin: 0;
    height: calc(100% - 40px);
    white-space: nowrap;
	font-size: 24px;
}

/* Container für den Hover-Inhalt */
.beitrag-kasten h4,
.beitrag-kasten p,
.beitrag-kasten a,
.beitrag-kasten video,
.beitrag-kasten img {
    opacity: 0;
    transition: opacity 0.3s ease;
    margin-left: 55px;
}

.beitrag-kasten:hover h4,
.beitrag-kasten:hover p,
.beitrag-kasten:hover a,
.beitrag-kasten:hover video,
.beitrag-kasten:hover img {
    opacity: 1;
}

.beitrag-kasten h4 {
    margin-bottom: 10px;
    white-space: normal;
}

/* Text (p) */
.beitrag-kasten p {
    margin-bottom: 0px;
    white-space: normal;
	font-size: 20px;
}

/* Button/Link (a) */
.beitrag-kasten a {
    margin-bottom: 20px;
    display: inline-block;
    white-space: normal;
	color: #000000;
}

/* Bild ganz unten, volle Breite */
.beitrag-kasten img, .beitrag-kasten video {
    width: calc(100% - 80px); /* Volle Breite minus Margins */
    height: auto;
    object-fit: cover;
    margin-left: 55px;
    margin-right: 20px;
    margin-bottom: 0;
	margin-top: 20px;
    float: none;
    padding: 0;
}

/*-----------------------LOGO + VERABSCHIEDUNGSTEXT + BUTTONS-----------------------*/

.verabschiedungstext {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: calc(100vh - 135px);
}

.verabschiedungstext .logo {
    padding: 20px 20px 0 20px;
}

.verabschiedungstext .logo img {
    height: 50px;
    display: block;
}

.verabschiedungstext p {
    margin: 0;
    padding: 10px 20px;
    font-size: 24px;
    white-space: normal;
}

.footer-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0 20px 20px 20px;
}

.footer-buttons a {
    border: solid 1px #000000;
    border-radius: 20px;
    padding: 2px 12px;
    font-size: 15px;
  font-weight: 600;
    color: #000000;
}

.footer-buttons a:hover {
  background-color: #000;
  border-color: #000;
  color: #FFF;
    text-decoration: none;
}

/*-----------------------RESPONSIV-----------------------*/

@media (max-width: 768px) {

    html, body {
        height: 100%;
        margin: 0;
    }

    body {
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
    }

    /* Header anpassen */
    .header {
        //flex-direction: column;
        padding: 5px 20px;
        gap: 8px;
        order: 0;
        flex: 0 0 auto;
    }

    .filter {
        //flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .filter-buttons {
        //justify-content: center;
    }

    .filter-btn {
        font-size: 15px;
        padding: 2px 12px;
    }

    /* Hauptinhalt: obere Hälfte scrollbare Projekte, untere Hälfte fix */
    .inhalt {
        height: auto;
        min-height: 0;
        flex: 1 1 auto;
        overflow: hidden;
        order: 1;
    }

    .beitraege-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .projekte-liste {
        display: flex;
        flex-direction: column;
        flex: 1 1 50%;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .beitrag-kasten {
        height: 30px;
        width: calc(100% - 40px);
        padding: 15px 20px;
        border: solid 1px #000000;
        margin-right: 0;
        //margin-bottom: -1px;
        transition: height 0.3s ease;
        overflow: hidden;
        cursor: pointer; /* Zeigt an, dass man klicken kann */
        flex-shrink: 0;
    }

    /* Link-Wrapper um Klick-Verhalten zu kontrollieren */
    .beitrag-kasten > a {
        pointer-events: none; /* Verhindert Klick auf Link im geschlossenen Zustand */
    }

    .beitrag-kasten.active > a {
        pointer-events: auto; /* Aktiviert Link wenn geöffnet */
    }

    /* Erster Klick: Kasten öffnen */
    .beitrag-kasten.active {
        height: auto;
        min-height: 300px;
        background-color: #D979E2;
        overflow-y: auto;
        max-height: 200vh;
    }

    /* Titel horizontal statt vertikal */
    .beitrag-kasten h3 {
        writing-mode: horizontal-tb;
        transform: none;
        position: relative;
        left: 0;
        //top: 0;
        height: auto;
        font-size: 20px !important;
        margin: 0;
        pointer-events: none; /* Titel blockiert keine Klicks */
    }

    /* Inhalt versteckt bis Klick */
    .beitrag-kasten h4,
    .beitrag-kasten p,
    .beitrag-kasten video,
    .beitrag-kasten img {
        opacity: 0;
        margin-left: 0;
        transition: opacity 0.3s ease;
        max-height: 0;
        overflow: hidden;
    }

    /* Inhalt sichtbar bei aktivem Kasten */
    .beitrag-kasten.active h4,
    .beitrag-kasten.active p,
    .beitrag-kasten.active video,
    .beitrag-kasten.active img {
        opacity: 1;
        max-height: none;
		display: block;
        margin-top: 15px;
    }

    .beitrag-kasten.active h4 {
        font-size: 16px;
    }

    .beitrag-kasten.active p {
        font-size: 16px;
        margin-bottom: 15px;
		width: 90vw;
    }

    .beitrag-kasten.active img,
    .beitrag-kasten.active video {
    	height: auto;
        width: 80vw;
        margin-left: 0;
        margin-right: 0;
        margin-top: 15px;
    }

    /* Untere Hälfte: Logo, Verabschiedungstext, Buttons - fix, kein Scroll */
    .verabschiedungstext {
        flex: 0 0 50%;
        height: 50%;
        justify-content: left;
        align-items: left;
        text-align: left;
        overflow: hidden;
    }

    .verabschiedungstext .logo {
        padding: 0 0 10px 0;
    }

    .verabschiedungstext .logo img {
        height: 36px;
        margin: 12px 14px 0px;
    }

    .verabschiedungstext p {
        font-size: 15px;
        padding: 0 15px 10px 15px;
    }

    .footer-buttons {
        justify-content: left;
        padding: 0 15px 10px 15px;
    }

    .footer-buttons a {
        font-size: 14px;
        padding: 2px 14px;
    }

    /* Footer (Impressum/Datenschutz) unten anhängen statt fixiert */
    .footer {
        position: static;
        height: auto;
        padding: 10px 0;
        order: 2;
        flex: 0 0 auto;
    }

    .footer ul {
        gap: 15px;
        font-size: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }
}