/* Basis */
html, body {
  height: 100%;
}

body {
  background-color: #fff;
  background-image: url("img/elements/BG_image3d.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;

  min-height: 100vh;

  font-family: "Roboto Condensed", sans-serif;
  letter-spacing: 0.02em;
  font-size: 1.1rem;

  color: darkgrey;
  padding-top: 3rem;
}

body.privacy-page {
  background-size: auto 100vh;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #f4f4f1;
}

/* embedded Fonts */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/robotocondensed/ieVl2ZhZI2eCN5jzbjEETS9weq8-19y7DRs5.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/robotocondensed/ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7DQ.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/robotocondensed/ieVi2ZhZI2eCN5jzbjEETS9weq8-32meGCoYb8td.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/robotocondensed/ieVi2ZhZI2eCN5jzbjEETS9weq8-32meGCQYbw.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Headings / Content Typography */

main {
  font-size: 1.125rem;
  line-height: 1.7;
}

h1, h2, h3, h4 {
  color: #333;
  line-height: 1.1;
  font-weight: normal;
}

h1 {
  font-size: clamp(1.7rem, 3vw, 3.1rem);
  margin-bottom: 3rem;
}

h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.6rem);
  margin-top: 4rem;
  margin-bottom: 1rem;
}

h3 {
  font-size: clamp(1.35rem, 2vw, 2rem);
  margin-top: 2.5rem;
  margin-bottom: .75rem;
}

p,
li {
  max-width: 110ch;
  color: #555;
}

p {
  margin-bottom: 1.25rem;
}

ul,
ol {
  max-width: 72ch;
  padding-left: 1.4rem;
  margin-bottom: 2rem;
}

li {
  margin-bottom: .4rem;
}

.titel {
  font-size: clamp(1.1rem, 1.6vw, 1.8rem);
}


/* Markierung */
::selection { background: #fff; color: #a6a7a7; }
::-moz-selection { background: #fff; color: #a6a7a7; }

/* Links (Footer-Mail + Imprint/Data Privacy) */
a:link { color: #ff3300; text-decoration: none; }
a:visited { color: #ff3300; }
a:hover { color: #cc0000; text-decoration: none; }
a:active { color: #ff3300; }
a:focus { outline: none; }

/* Navbar/Brand */
.times {
  font-family: "Times New Roman", Times, serif;
}

#logo-sm {
  width: 230px;
  height: auto;
}

.lheight {
  line-height: 1.6 !important;
}

.nav-link {
  font-size: 0.9rem;
}

/* Navbar-Linkfarben */
.navbar-dark .navbar-nav .nav-link {
  color: #999;
}

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover {
  color: #ff3300;
}


/* ImageHandler */

.pz-stage {
  position: relative;
  width: 100%;
  height: calc(100vh - 140px);
  overflow: hidden;
  touch-action: none;
}

.pz-date {
  position: absolute;
  top: 2rem;
  left: 2rem;
  z-index: 20;

  color: #ff3300;
  font-family: "Times New Roman", Times, serif;
  font-size: clamp(1.7rem, 3.3vw, 3.8rem);
  line-height: 1.1;

  pointer-events: none;
}

.pz-audio {
  position: absolute;
  top: 8rem;
  left: 2rem;
  z-index: 20;
}

.pz-audio button {
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.25);

  color: #ddd;

  padding: .6rem 1rem;

  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  
  backdrop-filter: blur(8px);

  transition: all .2s ease;
}

.pz-audio button:hover {
  background: rgba(0,0,0,.7);
  color: #fff;
}

.pz-audio button:focus-visible {
  outline: 2px solid #ff3300;
  outline-offset: 3px;
}

/* Footer */
.footer-minimal{
  display:flex;
  justify-content:flex-end;
  gap:1.5rem;
  padding:4rem 3rem;
  font-size:1rem;
  text-transform:uppercase;
}

.contact-note{
  margin-top:3rem;
  font-style:italic;
  color:#777;
}

.footer-minimal a{
  color:#999;
  text-decoration:none;
}

.footer-minimal a:hover{
  color:#ff3300;
}

@media (max-height: 780px), (max-width: 768px){
  /* Mobile/kleine Höhen: „Ausschnitt“ */
  .pz-stage{ height: 82vh; }
}

#pzImage{
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

.pz-controls{
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
  z-index: 10;
}

.pz-controls button{
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 18px;
  line-height: 1;
}
.pz-controls button:focus{
  outline: 2px solid #ff3300;
  outline-offset: 2px;
}