/* playfair-display-regular - latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/playfair-display-v40-latin-regular.woff2') format('woff2');
}

/* =========================
   ROOT
========================= */

:root {
  --bg:#000;
  --fg:#e5e5e5;
  --muted:#9a9a9a;
  --dim:#6b6b6b;
  --line:#222;
}

/* =========================
   GLOBAL
========================= */

html,
body {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden;
  overflow-y: scroll !important;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:sans-serif;
  display:block !important;
}

main {
  height:auto !important;
  min-height:auto !important;
}

main:not(.hero) {
  flex:none;
}

a {
  text-decoration:none;
  color:inherit;
  transition: opacity 0.2s ease, color 0.2s ease;
}

a:hover {
  opacity:1;
}

input,
textarea,
button {
  font-family:inherit;
}

textarea,
input {
  font-size:14px;
}

::-webkit-scrollbar {
  width:8px;
}

::-webkit-scrollbar-thumb {
  background:#444;
}

/* =========================
   TYPO
========================= */

h1,
h2,
p {
  font-family:'Playfair Display', serif;
}

.serif {
  font-family:'Playfair Display', serif;
}

/* =========================
   LAYOUT
========================= */

.container {
  max-width:960px;
  margin:auto;
  padding:0 20px;
}

.narrow {
  max-width:640px;
  margin:auto;
}

.section.container,
.hero.container {
  max-width:620px;
  margin-left:auto;
  margin-right:auto;
}

.hero{
    text-align:center;
}

.section{
    text-align:left;
}

/* =========================
   NAV
========================= */

.nav {
  position:fixed;
  top:0;
  width:100%;
  background:#000;
  border-bottom:1px solid var(--line);
  z-index:9999;
}

.nav-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px;
}

.nav-links {
  display:flex;
  gap:18px;
}

.nav a {
  opacity:.6;
}

.nav a:hover,
.nav a.active {
  opacity:1;
  color:#fff;
}

.logo {
  font-family:'Playfair Display', serif;
  font-size:10px;
  letter-spacing:0.14em;
  color:#fff;
  text-decoration:none;
  display:block;
}

.menu-btn {
  display:none;
  background:none;
  border:none;
  color:#fff;
  font-size:20px;
}

.mobile {
  display:none;
  flex-direction:column;
  text-align:center;
  background:#000;
  width:100%;
  position:absolute;
  top:60px;
  left:0;
}

.mobile.show {
  display:flex;
}

.mobile a {
  padding:14px 0;
  border-bottom:1px solid #111;
}

/* =========================
   HERO
========================= */

.hero {
  position:relative;
  z-index:1;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  padding-top:70px !important;
  padding-bottom:10px !important;
}

.hero::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:120px;
  pointer-events:none;

  background:linear-gradient(
    to top,
    #000 0%,
    rgba(0,0,0,0.8) 40%,
    rgba(0,0,0,0) 100%
  );

  z-index:-1;
}

.hero img {
  width:100% !important;
  max-width:1000px !important;
  max-height:50vh !important;

  display:block;
  margin-left:auto;
  margin-right:auto;

  margin-top:0 !important;
  margin-bottom:-8px !important;

  object-fit:contain;

  opacity:.9;

  filter:contrast(1.05) brightness(0.95);

  box-shadow:0 20px 60px rgba(0,0,0,0.6);

  animation:fadeIn 1.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity:0;
  }

  to {
    opacity:.9;
  }
}

.title {
  margin-top:0 !important;

  max-width:620px;
  margin-left:auto;
  margin-right:auto;

  font-size:clamp(28px,4vw,44px);

  letter-spacing:0.12em;
  font-weight:500;
  line-height:1.1;
}

.title .place {
  display:block;
  color:var(--muted);
}

.title .tone {
  display:block;
  margin-top:18px;

  letter-spacing:0.22em;
  font-size:0.55em;

  color:#bbb;
  opacity:1;
}

.title .tone .dark {
  color:#999 !important;
}

.title .tone .light {
  color:#ddd !important;
}

.intro {
  margin-top:6px !important;
  margin-bottom:6px !important;

  color:var(--muted);

  font-size:15.5px;
  line-height:1.55;
  letter-spacing:0.02em;
}

.hero .intro {
  margin-top:4px;
  margin-bottom:10px;
}

.hero .intro:last-of-type {
  margin-bottom:10px;
}

.hero .intro a {
  display:inline-block;
  margin-top:6px;
  letter-spacing:0.08em;
}

.textblock {
  text-align:left !important;
  max-width:620px;
  margin:10px auto;
}

.name {
  margin-top:10px;

  font-family:'Playfair Display', serif;
  font-size:13px;

  letter-spacing:0.1em;

  color:#fff;
  font-weight:580;

  opacity:1;
}

/* =========================
   BUTTON
========================= */

.btn {
  display:inline-block;
  width:auto;

  margin-top:0px !important;
  margin-left:0;
  margin-right:0;

  padding:10px 22px;

  border:1px solid #aaa !important;

  color:#ddd !important;
  letter-spacing:0.08em;

  transition:all 0.2s ease;
}

.btn:hover {
  background:rgba(200,200,200,0.12) !important;
  color:#eee !important;
  border-color:#ccc !important;
}

/* =========================
   SECTION
========================= */

.section {
  padding-top:90px;
  padding-bottom:10px !important;
}

.section h1,
.section h2 {
  font-family:'Playfair Display', serif;
  letter-spacing:0.08em;
  font-weight:500;
}

.section h1 {
  margin-bottom:30px;
}

.section p {
  color:#bbb;

  margin-top:6px !important;
  margin-bottom:6px !important;

  font-size:15.5px;
  line-height:1.55;
  letter-spacing:0.02em;
}

.section p:first-of-type,
.intro:first-of-type {
  margin-top:10px !important;
}

.section p + p {
  margin-top:2px;
}

.subtitle {
  font-family:'Playfair Display', serif;
  font-size:16px;
  line-height:1.4;
  letter-spacing:0.06em;
}

/* =========================
   WORKS
========================= */

.works {
  margin-top:10px !important;
  text-align:center;
}

.works a,
.about .works a {
  font-family:'Playfair Display', serif;
  font-size:22px;

  letter-spacing:0.12em;
  line-height:1.4;

  display:inline-block;
  margin-top:8px;

  color:#ddd;
}

.works a:hover,
.about .works a:hover {
  color:#fff;
}

.primary-work {
  font-family:'Playfair Display', serif !important;
  font-size:20px !important;

  letter-spacing:0.14em !important;

  color:#fff !important;
  text-transform:uppercase;
}

.works a:not(.primary-work),
.about .works a:not(.primary-work) {
  opacity:0.7;
}

/* =========================
   ABOUT
========================= */

.about {
  text-align:left;
  max-width:620px;
}

.about p {
  line-height:1.7;
  margin-bottom:18px;
}

.about p:first-of-type {
  color:#fff;
}

.about .intro {
  margin-top:30px;
  letter-spacing:0.08em;
  color:#ddd;
}

.about .works {
  margin-top:10px;
}

/* =========================
   LONGTEXT
========================= */

.longtext {
  margin:30px 0;
  opacity:0.9;
}

.longtext p {
  text-align:left;
  line-height:1.6;
  margin-bottom:12px;

  max-width:650px;

  font-size:15px;
  letter-spacing:0.01em;
}

/* =========================
   EVENTS
========================= */

.event {
  margin-top:60px;
}

.event + .event {
  margin-top:40px;
}

.event img {
  display:block;
  margin:0 auto 20px auto;
  max-width:300px;
  opacity:0.9;
}

.event p {
  margin-bottom:6px;
  line-height:1.6;
}

.event:last-of-type {
  opacity:0.9;
}

.event .work-title:first-of-type {
  margin-top:10px;
}

.section-label {
  font-family:'Playfair Display', serif !important;

  font-size:26px !important;
  letter-spacing:0.18em !important;

  opacity:1 !important;

  margin-top:30px !important;
  margin-bottom:12px !important;
}

.work-title {
  font-family:'Playfair Display', serif;

  font-size:20px;

  letter-spacing:0.14em;

  margin-top:6px;

  text-transform:uppercase;
}

/* =========================
   FORM
========================= */

.form {
  margin-top:30px;
  display:flex;
  flex-direction:column;
  gap:10px;

  max-width:520px;
  width:100%;

  margin-left:auto;
  margin-right:auto;
}

.form input,
.form textarea {
  width:100%;
  box-sizing:border-box;

  padding:12px 14px;
  margin-bottom:14px;

  background:transparent;
  border:1px solid #333;

  color:#fff;

  font-size:14px;

  caret-color:#fff;

  transition:border 0.2s ease,
             background 0.2s ease,
             transform 0.15s ease;
}

.form input:focus,
.form textarea:focus {
  outline:none;

  border-color:#888;
  border-bottom:1px solid #ccc;

  background:rgba(255,255,255,0.03);

  transform:translateY(-1px);
}

.form input::placeholder,
.form textarea::placeholder {
  color:#aaa !important;
  letter-spacing:0.03em;
}

.form textarea {
  min-height:120px;
}

.form button {
  margin-top:20px;

  padding:12px 26px;

  background:transparent;

  border:1px solid #555;

  color:#fff;

  letter-spacing:0.12em;

  cursor:pointer;

  transition:all 0.2s ease;
}

.form button:hover {
  border-color:#aaa;
  background:rgba(255,255,255,0.05);
}

/* =========================
   SUCCESS
========================= */

.success {
  margin-top:20px;
  padding:15px 20px;

  border:1px solid #333;

  background:rgba(255,255,255,0.03);

  color:#fff;

  letter-spacing:0.05em;
}

.success .highlight {
  font-weight:700;
}

/* =========================
   LEGAL
========================= */

.itrk-legaltext {
  color:#ccc;

  text-align:left;

  max-width:700px;
  margin:40px auto 0;
}

.itrk-legaltext a,
.section.container.narrow a:not(.btn) {
  color:#ddd;
  text-decoration:underline;
}

.itrk-legaltext h1,
.itrk-legaltext h2,
.itrk-legaltext h3 {
  color:#fff;
}

.itrk-legaltext p {
  line-height:1.6;
}

.itrk-legaltext iframe {
  width:100%;
  display:block;

  border:none;

  filter:brightness(0.85) contrast(1.1);

  transform:scale(0.7);
  transform-origin:top center;
}

.section.container.narrow {
  max-width:720px;

  margin:40px auto 0;

  padding:30px 25px;

  background:rgba(255,255,255,0.02);

  border:1px solid rgba(255,255,255,0.06);

  box-shadow:0 20px 60px rgba(0,0,0,0.4);
}

.section.container.narrow p {
  color:#bbb;
  line-height:1.7;
}

/* =========================
   DISCLAIMER
========================= */

.legal-disclaimer h2,
.legal-disclaimer h3,
.legal-disclaimer p {
    padding: 0;
    text-align: left;
}

.legal-disclaimer h2 {
    color: #bbb !important;
    font-family: 'Playfair Display', serif;
    letter-spacing: 0.08em;
    font-weight: 500;
    margin: 0 0 4px 0;
}

.legal-disclaimer h3 {
    color: #bbb !important;
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    letter-spacing: 0.05em;
    margin: 6px 0 0 0;
}

.legal-disclaimer p {
    color: #bbb;
    line-height: 1.25;
    margin: 0;
}

/* =========================
   FOOTER
========================= */

.footer {
  position:relative;
  z-index:2;

  margin-top:30px !important;

  padding:5px 0 30px;

  border-top:1px solid rgba(255,255,255,0.05);

  text-align:center;
}

.footer,
footer,
footer * {
  color:#aaa !important;
}

.footer p {
  margin:0 !important;

  color:#999;

  font-size:13px;

  letter-spacing:0.05em;
}

/* =========================
   HOME
========================= */

body.home {
  display:block !important;
}

body.home main.hero {
  display:block !important;
  align-items:center;
}

/* =========================
   MOBILE
========================= */

@media (max-width:768px) {

  .nav-links {
    display:none;
  }

  .menu-btn {
    display:block;
  }

  .hero {
    padding-top:110px !important;
  }

  .hero.container {
    padding-left:10px;
    padding-right:10px;
    max-width:100%;
  }

  .hero img {
    width:100%;
    max-width:none;

    max-height:35vh;

    margin-top:-10px !important;
    margin-bottom:-4px !important;
  }

  .title {
    margin-top:20px !important;
  }

  .form {
    width:100%;
    max-width:100%;
    padding:0 10px;
    box-sizing:border-box;
  }

  .form input,
  .form textarea {
    width:100%;
    box-sizing:border-box;
  }

  body {
    display:block;
  }

  body.home {
    display:flex;
    flex-direction:column;
  }

  body.home main.hero {
    flex:1;
  }
}

@media (max-height:900px) {

  .hero {
    padding-top:10px !important;
  }

  .hero img {
    max-height:64vh;
  }

  .btn {
    margin-top:20px;
  }
}

@media (max-height:700px) {

  .hero {
    padding-top:120px !important;
  }

  .hero img {
    max-height:35vh;
  }

  .title {
    font-size:clamp(22px, 3vw, 32px);
    margin-top:6px !important;
  }

  .btn {
    margin-top:50px;
    padding:8px 18px;
  }
}

@media (max-height:600px) {

  .hero img {
    max-height:30vh;
  }
}

.form input[type="checkbox"] {
  width:auto;
  margin-right:8px;
  
}
.form label {
  color:#bbb;
}

.form label a {
  color:inherit;
}

.legal-disclaimer {
    text-align: left;
    margin-top: 40px;
}

.legal-disclaimer h2 {
    color: #fff;
    font-family: 'Playfair Display', serif;
    letter-spacing: 0.08em;
    font-weight: 500;
    margin-bottom: 24px;
}

.legal-disclaimer h3 {
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    letter-spacing: 0.05em;
    margin: 28px 0 10px;
}

.legal-disclaimer p {
    color: #bbb;
    line-height: 1.7;
    margin: 0 0 18px;
}

/* ==========================================
   HERO STAGE
========================================== */

.hero-stage{

display:block;

width:100%;

max-width:620px;

margin:45px auto 60px auto;

box-shadow:0 20px 60px rgba(0,0,0,.45);

}

.performance-info{

    max-width:620px;

    margin:0 auto 80px;

    text-align:left;

    border-top:none;

}

.performance-info h2{

font-family:'Playfair Display',serif;

font-size:26px;

letter-spacing:.08em;

font-weight:500;

margin-bottom:25px;

text-align:center;

}

.performance-info p{

font-size:15px;

line-height:1.75;

color:#bbb;

margin-bottom:22px;

}

.contact-small{

margin-top:35px;

text-align:center;

letter-spacing:.05em;

}

.story-photo{

    display:block;

    width:100%;

    max-width:400px;

margin:40px auto;

box-shadow:0 18px 45px rgba(0,0,0,.35);

}

blockquote{

    max-width:520px;

    margin:45px auto;

    font-family:'Playfair Display', serif;

    font-size:18px;

    line-height:1.8;

    text-align:center;

    font-style:italic;

    color:#d6d6d6;

}


.poster-small{

    margin:35px auto 45px;

}

.poster-small img{

    width:100%;

    max-width:300px;

height:auto;

display:block;

margin:auto;

box-shadow:0 12px 35px rgba(0,0,0,.45);

}
/* ==========================================
   CHAPTER
========================================== */

.chapter{

    max-width:620px;
    margin:50px auto;

}

.chapter + .chapter{

    padding-top:90px;

}

.chapter-photo{

    display:block;

    width:100%;

    max-width:400px;

    margin:40px auto;

    box-shadow:0 18px 45px rgba(0,0,0,.35);

}

.poster-break{

    margin:70px auto;
    text-align:center;

}

.poster-break img{

    width:100%;
    max-width:300px;
    height:auto;

    display:block;
    margin:auto;

    opacity:.95;

    box-shadow:0 15px 40px rgba(0,0,0,.45);

}

.series-link{

    text-align:center;

    margin:45px 0 12px;

    font-size:15px;

    color:#999;

    letter-spacing:.04em;

}

.chapter h2{

    text-align:center;

}

.chapter p{

    text-align:left;

}

/* ==========================================
   REVIEWS
========================================== */

.review{

    max-width:560px;
    margin:55px auto;

    text-align:center;

}

.review:first-of-type{

    margin-top:30px;

}

.review p{

    font-family:'Playfair Display', serif;
    font-size:17px;
    line-height:1.8;
    font-style:italic;
    color:#d6d6d6;
    margin-bottom:16px;
    text-align:center;

}

.review span{

    display:block;
    font-size:12px;
    letter-spacing:.10em;
    color:#8a8a8a;
    text-transform:uppercase;

}

/* ==========================================
   FINAL CONTACT
========================================== */

.final-contact{

    max-width:620px;

    margin:90px auto 70px;

    text-align:center;

}


.final-contact h2{

    font-family:'Playfair Display',serif;

    font-size:28px;

    letter-spacing:.08em;

    font-weight:500;

    margin-bottom:35px;

}

.final-contact p{

    line-height:1.8;

    margin-bottom:24px;

    color:#bbb;

}

.contact-box{

    margin:20px auto 40px;

    padding:20px 0;

    text-align:center;

}

.contact-box p{

    margin:22px 0;

}

.button-row{

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

    gap:18px;

    margin:15px auto 0;

    width:100%;

    flex-wrap:wrap;

}
.button-row .btn{

    margin:0;

}
/* ==========================================
   LÜBECK-GALERIE
========================================== */

.luebeck-gallery{

    display:flex;

    justify-content:center;

    gap:18px;

    max-width:620px;

    margin:40px auto;

}

.luebeck-gallery img{

    flex:1;

    width:0;

    height:170px;

    object-fit:cover;

    display:block;

    box-shadow:0 18px 45px rgba(0,0,0,.35);

}

@media (max-width:768px){

    .luebeck-gallery{

        display:block;

        max-width:500px;

    }

    .luebeck-gallery img{

        width:100%;

        height:auto;

        margin-bottom:20px;

    }

}
/* ==========================================
   KAPITELTRENNER
========================================== */

.section-divider{

    text-align:center;

    margin:20px auto;

    font-size:16px;

    color:rgba(255,255,255,.35);

    line-height:1;

}

/* ==========================================
   KI-INFO
========================================== */

.ki-info{

    max-width:620px;
    margin:auto;
    text-align:left;

}

.ki-info h1{

    text-align:center;
    margin-bottom:30px;

}

.ki-info p{

    font-family:'Playfair Display', serif;

    font-size:15.5px;

    line-height:1.55;

    letter-spacing:.02em;

    color:#bbb;

    margin:6px 0 18px;

}

.ki-info strong{

    color:#e5e5e5;

}

/* ==========================================
   NOSFERATU MOOD IMAGE
========================================== */

.nosferatu-mood{

    max-width:520px;

    margin:55px auto 70px;

    text-align:center;

}

.nosferatu-mood img{

    width:100%;

    display:block;

    box-shadow:0 18px 45px rgba(0,0,0,.45);

}