:root {
    --triangle-size: 33.3333vw;
}


body {
  margin: 0;
  min-height: 100vh;
  background: #d6d6d6;
  color: #000;
  font-family: "Minion Pro", "Times New Roman", serif;
  overflow-x: hidden;
}

.main-title {
    margin: 2vh 2vh 3vh 2vh;

    width: calc(100vw - 4vh);

    text-align: justify;
    text-align-last: justify;

    white-space: nowrap;

    font-weight: normal;

    font-size: 7vw;

    line-height: 0.95;

    letter-spacing: 0vh;

    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25em;
}

.hero-wrap {
  width: calc(100vw - 8vh);
  margin: 0 auto 4vh auto;
  border: 2px solid #fff;
  position: relative;
}

.hero-image {
  display: block;
  width: 100%;
  height: auto;
}


.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(143,143,143,0.72);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 5vh;
}

.modal.active {
  display: flex;
}

.modal-box {
  width: min(88vw, 720px);
  max-height: calc(100vh - 20vh);
  overflow-y: auto;
  background: #8f8f8f;
  border: 2px solid #fff;
  padding: 5vh 5vw;
  color: #000;
}


h1 {
  margin: 0 0 3vh 0;
  font-size: clamp(28px, 5vh, 58px);
  font-weight: normal;
  text-align: center;
}

p {
  margin: 0 0 4vh 0;
  font-size: clamp(16px, 2.2vh, 24px);
  line-height: 1.35;
  color: #000;
  text-align: center;
}

label {
  display: block;
  margin-top: 3vh;
  margin-bottom: 1vh;
  font-size: clamp(16px, 2vh, 22px);
  color: #000;
}

input,
textarea,
button[type="submit"],
progress {

    display: block;

    width: 100%;

    margin-left: 0;
    margin-right: 0;

    box-sizing: border-box;
}

input,
textarea {

    background: transparent;
    color: yellow;
    caret-color: yellow;

    border: 2px solid #000;
    border-radius: 0;

    padding: 1.8vh 2vh;

    font-family: "Minion Pro", "Times New Roman", serif;
    font-size: clamp(16px, 2.1vh, 23px);

    outline: none;
}

textarea {
  min-height: 16vh;
  resize: vertical;
}

input[type="file"] {
  padding: 1.5vh 1.2vw;
}

button[type="submit"] {
  width: 100%;
  margin-top: 4vh;
  padding: 2vh 2vw;
  background: #fff;
  color: #000;
  border: 2px solid #000;
  border-radius: 0;
  font-family: "Minion Pro", "Times New Roman", serif;
  font-size: clamp(18px, 2.4vh, 26px);
  cursor: pointer;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

progress {
  display: none;
  width: 100%;
  height: 2.8vh;
  margin-top: 4vh;
  border-radius: 0;
  border: 2px solid #000;
  background: transparent;
  appearance: none;
}

progress::-webkit-progress-bar {
  background: transparent;
  border-radius: 0;
}

progress::-webkit-progress-value {
  background: #fff;
  border-radius: 0;
}

progress::-moz-progress-bar {
  background: #fff;
  border-radius: 0;
}

#status {
  margin-top: 2vh;
  font-size: clamp(15px, 2vh, 22px);
  color: #000;
  text-align: center;
}

 .intro-text {																/* Bildunterschrift */
    width: calc(100vw - 8vh);
    max-width: 900px;
    margin: 2vh auto 6vh auto;
    text-align: center;
    color: #000;
    font-family: "Minion Pro", "Times New Roman", serif;
    font-size: clamp(12px, 2vh, 24px);
    line-height: 1.2;
    font-weight: normal;
    text-transform: uppercase;
}

form {
  width: 100%;
}

input,
textarea,
button[type="submit"],
progress {
  display: block;
  width: 100%;
}

input,
textarea {
  padding: 1.8vh 2vw;
}

.success-back {
  display: none;
  margin-top: 4vh;
  text-align: center;
  color: #000;
  text-decoration: none;
  font-family: "Minion Pro", "Times New Roman", serif;
  font-size: clamp(18px, 2.4vh, 26px);
}

.divider {    																	/* STRICH */
    width: calc(100vw - 4vh);
    height: 1px;
    background: #000;

    margin: 1vh auto;
	}

.body-text { 																	/* Fließtext */

    width: calc(100vw - 8vh);
	margin: 6vh auto;
	color: #000;
	 font-family: "Minion Pro", "Times New Roman", serif;
	font-size: clamp(16px, 2vh, 28px);
	line-height: 1.5;
	font-weight: normal;
	text-align: justify;
}

.opencall-text {
    width: calc(100vw - 8vh);
    margin: 6vh auto;

    color: #000;

    font-family: "Minion Pro", "Times New Roman", serif;
    font-size: clamp(16px, 2vh, 28px);
    line-height: 1.5;
    font-weight: normal;
    text-align: justify;
}

.opencall-text h2 {

    width: 100%;

    margin: 0 0 4vh 0;

    display: flex;
    justify-content: space-between;
    align-items: center;

    color: inherit;

    font-family: inherit;
    font-size: clamp(16px, 3vh, 28px);
    line-height: 1.5;
    font-weight: normal;

    text-transform: uppercase;

}
.opencall-text p {
    margin: 0;

    color: inherit;

    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    text-align: inherit;
}

.opencall-list {

    list-style: none;

    margin: 1vh 0 0 0;

    padding: 0;

    color: inherit;

    font-family: inherit;

    font-size: inherit;

    line-height: inherit;

}

.opencall-list li {

    position: relative;

    padding-left: 1.5em;

    margin-bottom: 1vh;

}

.opencall-list li::before {

    content: "–";

    position: absolute;

    left: 0;

}


.footer {																				/* footer */

    width: calc(100vw - 8vh);

    margin: 12vh auto;

    color: #000;

    text-align: center;

    font-family: "Minion Pro", "Times New Roman", serif;

    font-size: clamp(12px, 2vh, 24px);

    line-height: 1.0;

}

.footer h2 {

    margin: 5vh 0 2vh 0;

    font-size: inherit;

    font-weight: normal;

    text-transform: uppercase;

}

.footer p {

    margin: 0 0 5vh 0;

    font-size: inherit;

    text-align: center;

}

.triangle-link {

    position: absolute;

    width: var(--triangle-size);
    height: var(--triangle-size);

    right: calc(-4vh - 2px);
    top: calc(83.333% - var(--triangle-size));

    z-index: 20;

    text-decoration: none;
}

.hero-triangle {
    width: 100%;
    height: 100%;

    background: yellow;

    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.triangle-label {
    position: absolute;

    left: 68%;
    top: 60%;

    transform: translate(-50%, -50%) rotate(-45deg);

    color: #000;

    font-family: "Minion Pro", "Times New Roman", serif;

    text-transform: uppercase;
    white-space: nowrap;

    transition: color .1s ease;
}

.triangle-subtitle {
    display: block;
    font-size: 0.5em;
}
.triangle-link:hover .triangle-label {
    color: white;
}

.mail-link {
    color: #000;
    text-decoration: none;
    transition: color 0.1s ease;
}

.mail-link:hover {
    color: yellow;
}

.opencall-section {

    background: yellow;
	padding: 3vh 0;

}

.untertitel-projekt {												/* UNTERTITEL */

    position: absolute;
    left: calc(50% + 1vw);
    top: 6vh;
    transform: translateX(-50%) rotate(-1deg);
    z-index: 10;
    width: 80vw;
    max-width: 2000px;
    min-width: 300px;
    height: auto;
    pointer-events: none;

}

.open-upload {													/* Upload */

    position: absolute;
    left: calc(50% + 30vw);
    top: 30vh;
    transform: translateX(-50%) rotate(5deg);
    z-index: 10;
    width: 25vw;
    max-width: 700px;
    min-width: 50px;
    height: auto;
    cursor: pointer;
    user-select: none;

}

.mail-button {													/* Contact button */

    position: absolute;
    left: calc(50% - 30vw);
    top: calc(30vh + 6vh);
    transform: translateX(-50%) rotate(-2deg);
    z-index: 10;
    width: 18vw;
    max-width: 700px;
    min-width: 50px;
    height: auto;
    cursor: pointer;
    user-select: none;

}


/* ===========================
   MOBILE (bis 768 px)
   =========================== */

@media (max-width: 768px) {

    .untertitel-projekt {

        left: 50%;
        top: 2.5vh;

        transform: translateX(-50%) rotate(-1deg);

        width: 80vw;
        min-width: 0;

    }

    .open-upload {

        left: calc(50% + 20vw);
        top: 12vh;

        transform: translateX(-50%) rotate(5deg);

        width: 40vw;
        min-width: 0;

    }

    .mail-button {

        left: calc(50% - 30vw);
        top: 13vh;

        transform: translateX(-50%) rotate(1deg);

        width: 20vw;
        min-width: 0;

    }

}