/* ------------------------------------------------------------
   Schriften (aus Performancegründen teils auskommentiert)
   ------------------------------------------------------------ */

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/opensans/subset-OpenSans-Bold.woff2') format('woff2'),
         url('fonts/opensans/subset-OpenSans-Bold.woff') format('woff'),
         url('fonts/opensans/subset-OpenSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/opensans/subset-OpenSans-BoldItalic.woff2') format('woff2'),
         url('fonts/opensans/subset-OpenSans-BoldItalic.woff') format('woff'),
         url('fonts/opensans/subset-OpenSans-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/opensans/subset-OpenSans-Italic.woff2') format('woff2'),
         url('fonts/opensans/subset-OpenSans-Italic.woff') format('woff'),
         url('fonts/opensans/subset-OpenSans-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/opensans/subset-OpenSans-Regular.woff2') format('woff2'),
         url('fonts/opensans/subset-OpenSans-Regular.woff') format('woff'),
         url('fonts/opensans/subset-OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Allison';
    src: url('fonts/allison/subset-Allison-Regular.woff2') format('woff2'),
        url('fonts/allison/subset-Allison-Regular.woff') format('woff'),
        url('fonts/allison/subset-Allison-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}





/* ------------------------------------------------------------
   Root-Variablen
   ------------------------------------------------------------ */

:root {
  --door-radius: 0;
  --door-gap: clamp(10px, 2.5vw, 16px);
  --door-size: clamp(88px, 24vw, 140px);
  --accent: #fff;

  /* Tür + Content Farben */
  --door-top-blue-light: rgba(0, 158, 224, 0.5);
  --door-top-blue-dark:  rgba(0, 158, 224, 0.2);
  --door-top-stroke: rgba(255, 255, 255, .35);

  --door-underlay: rgba(0, 0, 0, 0);
  --door-underlay2: rgba(0, 0, 0, 1);

  --content-blue: rgba(0, 158, 224, 0.2);

  --glass: rgba(255, 255, 255, .08);
  --glass-border: rgba(255, 255, 255, .25);
  --bg-overlay: rgba(0, 0, 0, .4);

  --curve: cubic-bezier(.2, .7, .1, 1);

  --page-pad: clamp(14px, 3vw, 36px);
  --header-h: 0px;

  /* Tür-Interaktion */
  --t-hover: 520ms;
  --t-door-open: 1500ms;
  --t-door-close: 1500ms;
  --t-door-close-delay: 0s;
  --hover-angle: -30deg;
  --active-angle: -30deg;
  --open-angle: -80deg;

  /* Zoom/Expander */
  --t-zoom: 1.5s;

  /* Content-Design */
  --content-bg: rgba(0, 158, 224, 1);
  --content-border: transparent;
  --content-shadow: none;
  --content-radius-desktop: 20px;

  --content-pad: clamp(20px, 4vw, 30px);
  --content-header-pad: clamp(12px, 3vw, 20px);
  --content-footer-pad: clamp(12px, 3vw, 20px);

  --content-header-bg: rgb(0, 130, 185);
  --content-footer-bg: none;

  /* Exakte VH-Einheit (JS setzt später --vh) */
  --vh: 1vh;
}

/* ------------------------------------------------------------
   Grundlayout
   ------------------------------------------------------------ */

html, body {
  height: 100%;
}

body {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  background: #000;
  color: var(--accent);
  font-family: "Open Sans", sans-serif;
  overflow-x: hidden;
}



a, .nav-link {
 color: var(--bs-heading-color);
 text-decoration:none;
}
a:hover, .nav-link:hover, .nav-link:focus, .nav-link:active {
 color: var(--bs-heading-color);
 text-decoration:underline;
}

.bold{
  font-weight:700;
}
.gelb{
  color: var(--bs-heading-color);
}
.schreibschrift{
  font-family: 'Allison';
  font-size: calc(1em * 2.2);;
}

.bg {
  position: fixed;
  inset: 0;
  background-image: url("../img/bernau-hintergrund.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}

.headline img,
.subline img,
.logo img {
  width: 100%;
}

.headline {
  width: clamp(130px, 30vw, 550px);
}

.subline {
  width: clamp(130px, 30vw, 550px);
}

.logo {
  width: clamp(150px, 15vw, 250px);
}

/* Header-Grid */
.header-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "headline subline logo";
  align-items: center;
  justify-content: center;
  justify-items: center;
  text-align: center;
  gap: 1.5rem;
  padding-top: 2rem;
  padding-right: 4rem;
  padding-bottom: 2rem;
  padding-left: 4rem;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 3;
}

.headline { grid-area: headline; }
.subline  { grid-area: subline; }
.logo     { grid-area: logo; }

.header-grid img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
}



/* ------------------------------------------------------------
   Overlay: vollflächiger, halbtransparenter Hintergrund
   ------------------------------------------------------------ */
.info-overlay {
    /* Vollflächig über der Seite liegen */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    /* Sicherstellen, dass das Overlay über anderen Inhalten liegt */
    z-index: 1000;

    /* Overlay leicht abdunkeln */
    background-color: rgba(0, 0, 0, 0.6);

    /* Inhalt zentrieren (Popup) */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Innenabstand, damit das Popup nicht am Rand klebt */
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;

    /* Falls Inhalt höher als der Bildschirm: vertikal scrollbar */
    overflow-y: auto;
}

/* Optional: Overlay ausblenden, wenn aria-hidden="true" gesetzt ist */
.info-overlay[aria-hidden="true"] {
    display: none;
}

/* ------------------------------------------------------------
   Popup-Box: Inhalt des Overlays
   ------------------------------------------------------------ */
.info-overlay-content {
  border-radius: var(--content-radius-desktop);
  background: var(--content-bg);

    /* Breite responsiv halten */
    width: 100%;
    max-width: 600px;

    /* Schlagschatten, damit sich die Box vom Overlay abhebt */
    box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.4);

    overflow: hidden;
    overscroll-behavior: contain;
}

.info-overlay-content-text{
  padding: var(--content-pad);
}

/* ------------------------------------------------------------
   Responsive Feintuning für kleinere Bildschirme
   ------------------------------------------------------------ */
@media (max-width: 450px) {
    .info-overlay-content {
        /* Schrift minimal verkleinern, falls nötig */
        font-size: 0.95rem;
    }
}



/* Header-Grid mobil */
/* ------------------------------------------------------------
   HEADER – MOBIL OHNE GRID (Flexbox)
   Ziel:
   - Spaltenlayout: Headline, Subline, Logo
   - Keine gegenseitige Höhenbeeinflussung wie bei Grid/Row-Span
   - Kompakt auf iPhone 13 mini
   ------------------------------------------------------------ */
@media (max-width: 650px) {
  .header-grid {
    display: flex;                      /* statt Grid */
    flex-direction: column;             /* untereinander anordnen */
    align-items: flex-start;            /* links bündig */
    justify-content: flex-start;        /* oben starten */
    gap: 0.5rem;                        /* kompakter Abstand */
    padding-top: 0.75rem;
    padding-right: 1rem;
    padding-bottom: 0.75rem;
    padding-left: 1rem;

    /* wichtige Reset-Werte, falls vom Desktop-Grid geerbt */
    grid-template-columns: none;        /* Grid-Definitionen neutralisieren */
    grid-template-rows: none;
    grid-template-areas: none;
  }

  /* Bilder block-level → kein Inline-Gap in iOS/Safari */
  .header-grid img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* Breiten der Bildcontainer auf Mobil bewusst begrenzen */
  .headline,
  .subline {
    width: min(85vw, 220px);            /* Headline/Subline unabhängig vom Logo */
  }

  .logo {
    align-self: flex-end;               /* Logo rechts ausrichten, unabhängig von Höhe links */
    width: auto;
    position: absolute;
  }

  .logo img {
    width: auto;
    object-fit: contain;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
  }
  .logo img {
    height: 80px;
    max-width: 410px;
  }
}

/* noch enger für sehr kleine Geräte */
@media (max-width: 480px) {
  .header-grid {
    gap: 0.35rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .logo img {
    height: 80px;
    max-width: 410px;
  }
  .headline,
  .subline {
    width: min(85vw, 160px);            /* Headline/Subline unabhängig vom Logo */
  }
}
@media (max-width: 400px) {
  .logo img {
    height: 80px;
    max-width: 125px;
  }
  .headline,
  .subline {
    width: min(85vw, 130px);            /* Headline/Subline unabhängig vom Logo */
  }
}


header {
  position: fixed;
  inset: 12px 12px auto 12px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  text-shadow: none;
}

header h1 {
  font-size: clamp(18px, 2.6vw, 26px);
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  font-weight: 700;
  text-shadow: none;
}

/* Hauptbereich */
main {
  position: relative;
  z-index: 1;

  /* Statt 100vh: exakte Viewport-Einheit MINUS dynamische Footer-Höhe.
     So bleibt der Footer immer sichtbar, ohne starre Pixelwerte. */
  min-height: calc(var(--vh) * 100 - var(--footer-h, 0px));

  box-sizing: border-box;
  padding-top: calc(var(--header-h) + var(--page-pad));
  padding-right: var(--page-pad);
  padding-bottom: var(--page-pad);
  padding-left: var(--page-pad);
  display: grid;
  justify-items: center;
  align-items: start;
  align-content: start;
}

.frame{
  box-shadow: 0 0 70px #000;
}

/* ------------------------------------------------------------
   Grid
   ------------------------------------------------------------ */

.grid {
  display: grid;
  gap: var(--door-gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--door-size), 1fr));
  width: 100%;
  min-height: 100%;
  overflow: visible;
}

.grid.free {
  display: block;
  position: relative;
  min-height: 100%;
}

.grid.free .door { position: absolute; }
.grid:not(.free) .door { position: relative; }

/* ------------------------------------------------------------
   Türen (Container + Unterlage)
   ------------------------------------------------------------ */

.door {
  width: var(--door-size);
  height: var(--door-size);
  margin-inline: auto;
  perspective: 1000px;
  perspective-origin: left center;
  background-color: transparent;
  position: relative;
}

/* Unterlage */
.door::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--door-radius);
  background-color: var(--door-underlay);
  z-index: 0;
  pointer-events: none;
  transition: background-color .6s ease;
}

/* Abdunkeln nur bei NICHT gesperrt */
.door:not(.locked):hover::after,
.door.is-closed:not(.locked):hover::after {
  background-color: var(--door-underlay2);
}

/* Unterlage bei offen/closing */
.door.is-open::after,
.door.is-closing::after {
  background-color: var(--door-underlay2);
  transition: background-color var(--t-door-close) var(--curve);
}
.door.is-closed::after {
  background-color: var(--door-underlay);
  transition: background-color var(--t-door-close) var(--curve);
}

/* ------------------------------------------------------------
   Türfläche (Button)
   ------------------------------------------------------------ */

.door-btn {
  all: unset;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: var(--door-radius);
  position: relative;
  overflow: hidden;
  z-index: 1;

  transform-style: preserve-3d;
  transform-origin: left center;
  backface-visibility: hidden;

  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: var(--door-top-stroke);
  border-right-color: var(--door-top-stroke);
  border-bottom-color: var(--door-top-stroke);
  border-left-color: var(--door-top-stroke);

  background-color: transparent;

  /* Achtung: Transition auf transform – Animationen überschreiben das aber */
  transition:
    background-color .6s ease,
    transform var(--t-hover) var(--curve),
    box-shadow .18s ease;

  /* Performance-Hinweis */
  will-change: transform;
}

/* Panel-Hintergrund (Verläufe) */
.door-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0) 30%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0) 40%),
    linear-gradient(180deg, var(--door-top-blue-light) 0%, var(--door-top-blue-dark) 100%);
}

/* Glanzstreifen */
.door-btn::before {
  content: "";
  position: absolute;
  inset: -20% -60%;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255,255,255,.25) 45%,
    rgba(255,255,255,.75) 50%,
    rgba(255,255,255,.25) 55%,
    transparent 100%
  );
  transform: translateX(-120%) skewX(-15deg);
  transition: transform .6s ease;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Glanz nur bei NICHT gesperrt animieren */
.door:not(.locked) .door-btn:hover::before {
  transform: translateX(160%) skewX(-15deg);
}

/* ------------------------------------------------------------
   Zustände – NICHT gesperrt
   ------------------------------------------------------------ */

.door.is-closed .door-btn {
  transform: rotateY(0deg);
  background-color: transparent;
}

.door.is-closed:not(.locked) .door-btn:hover {
  transform: rotateY(var(--hover-angle));
  background-color: var(--content-bg, var(--content-blue));
}

.door.is-closed:not(.locked) .door-btn:active {
  transform: rotateY(var(--active-angle));
}

/* Offen */
.door.is-open .door-btn {
  transition:
    background-color .6s ease,
    transform var(--t-door-open) var(--curve),
    box-shadow .18s ease;
  transform: rotateY(var(--open-angle)) !important;
  background-color: var(--content-bg, var(--content-blue));
}

/* Schließen */
@keyframes doorClose {
  from { transform: rotateY(var(--open-angle)); background-color: var(--content-bg, var(--content-blue)); }
  to   { transform: rotateY(0deg);             background-color: transparent; }
}

.door.is-closing .door-btn {
  transform: rotateY(var(--open-angle)) !important;
  background-color: var(--content-bg, var(--content-blue)) !important;
  animation: doorClose var(--t-door-close) var(--curve) var(--t-door-close-delay) 1 both !important;
  pointer-events: none;
}

.door.is-closing .door-btn:hover,
.door.is-closing .door-btn:active {
  transform: rotateY(var(--open-angle)) !important;
  background-color: var(--content-bg, var(--content-blue)) !important;
}

/* Nummer */
.door-num {
  font-weight: 800;
  font-size: clamp(35px, 7.5vw, 50px);
  letter-spacing: .5px;
  font-family: "Allison", sans-serif;
}

/* ------------------------------------------------------------
   GESPERRTE TÜREN – nur Shake, keine Farbe / kein Öffnen
   ------------------------------------------------------------ */

.door.locked .door-btn {
  cursor: not-allowed;
}

/* Wichtig: KEIN transform:none; – sonst blockiert es die Animation */
@keyframes doorShake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-4px); }
  50%  { transform: translateX(4px); }
  75%  { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}

/* Hover-Shake bei gesperrt (Desktop) */
.door.locked .door-btn:hover {
  background-color: transparent !important;
  box-shadow: none !important;
  animation: doorShake .36s ease 1 !important;
}

/* Glanz deaktivieren bei locked */
.door.locked .door-btn::before {
  transform: translateX(-120%) skewX(-15deg) !important;
  transition: none !important;
}

/* Unterlage soll bei locked nicht abdunkeln */
.door.locked:hover::after {
  background-color: var(--door-underlay) !important;
  transition: none !important;
}

/* NEU: Touch-/Klick-Fallback – gleiche Animation wie beim Hover,
   wird per JS über die Utility-Klasse .touch-shake getriggert. */
.door.locked .door-btn.touch-shake {
  background-color: transparent !important;
  box-shadow: none !important;

  /* ausführlich, ohne Kurzformen, für spätere Nachvollziehbarkeit */
  animation-name: doorShake !important;
  animation-duration: 0.36s !important;
  animation-timing-function: ease !important;
  animation-iteration-count: 1 !important;
}





/* ------------------------------------------------------------
   Expander / Content
   ------------------------------------------------------------ */


/* Expander */
.expander {
  position: fixed;
  inset: 0;
  z-index: 30;
  border-radius: var(--door-radius);
  overflow: clip;
  background: transparent;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  transform-origin: top left;
  transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--sx, 1), var(--sy, 1));
  transition:
    transform var(--t-zoom) var(--curve),
    border-radius var(--t-zoom) var(--curve),
    opacity var(--t-zoom) ease;
  will-change: transform, border-radius, opacity;
  opacity: 0;
}

.expander.show {
  transform: translate(0, 0) scale(1, 1);
  border-radius: 0;
  opacity: 1;
}

/* Frame */
@media (min-width: 992px) {
  .frame {
    position: absolute;
    top: 5vh;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 900px;
    height: 90vh;
    border-radius: var(--content-radius-desktop);
    background: var(--content-bg);
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    overflow: hidden;
    overscroll-behavior: contain;
  }
}

@media (max-width: 991.98px) {
  .frame {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    border-radius: 0;
    background: var(--content-bg);
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    overflow: hidden;
    overscroll-behavior: contain;
  }
}

/* Content-Aufbau */
.content {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
}

.content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--content-header-pad);
  background: var(--content-header-bg);
  box-shadow: 4px 2px 21px #00587d;
  position: relative;
}

.content-title {
  font-family: "Allison", sans-serif;
  color: inherit;
  line-height: 80%;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  font-weight: 800;
  letter-spacing: .4px;
  font-size: clamp(40px, 3.2vw, 50px);
  text-shadow: none;
}

.content-body {
  display: block;
  overflow: auto;
  min-height: 0;
}
.content-body::before {
  content: '';
  display: block;
  width: 100%;
  height: 40px;
  position: absolute;
  bottom: 0;
  background: linear-gradient( to top, rgb(0, 158, 224) 0%, transparent 100% );
}

.content-footer {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: var(--content-footer-pad);
  background: var(--content-footer-bg);
}

.day-content{
  padding: var(--content-pad);
}
.bg-image{
  background-size:cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: clamp(200px, 45vw, 400px);
  display: block;
}

/* Scrollsperre für Body während Overlay */
.no-scroll {
  overflow: hidden;
  height: 100%;
}




/* ------------------------------------------------------------
   Normale Seiten
   ------------------------------------------------------------ */
.normal-site{
  background: var(--content-bg);
  padding: 20px;
  max-width: 1200px;
  margin: auto;
}


/* ------------------------------------------------------------
   Mini-Formular
   ------------------------------------------------------------ */

.mini-form {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  row-gap: 14px;
  column-gap: 0;
  margin-top: 8px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  background: var(--content-header-bg);
  padding: 30px;
}

.mf-field {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  row-gap: 6px;
  column-gap: 0;
}

.mf-field label {
  font-size: 14px;
  font-weight: 600;
  color: #dbe7f3;
}

.mini-form input[type="text"],
.mini-form input[type="email"] {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  padding-top: 10px;
  padding-right: 12px;
  padding-bottom: 10px;
  padding-left: 12px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: rgba(255, 255, 255, 0.25);
  border-right-color: rgba(255, 255, 255, 0.25);
  border-bottom-color: rgba(255, 255, 255, 0.25);
  border-left-color: rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  outline-width: 0;
  outline-style: none;
}

.mini-form input[type="text"]:focus,
.mini-form input[type="email"]:focus {
  border-top-color: #3ec4ff;
  border-right-color: #3ec4ff;
  border-bottom-color: #3ec4ff;
  border-left-color: #3ec4ff;
  box-shadow: 0 0 0 3px rgba(62, 196, 255, 0.25);
}

.mf-checks {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  row-gap: 10px;
  column-gap: 0;
}

.mf-check {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: start;
  column-gap: 10px;
}

.mf-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  accent-color: #3ec4ff;
}

.mf-actions {
  display: grid;
  grid-template-columns: max-content;
  justify-content: start;
}

.mf-hint,
.mf-error {
  font-size: 13px;
  margin-top: 4px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

.mf-hint { color: #c7e9ff; }
.mf-error { color: #ff9494; }

.mf-alert {
  margin-top: 10px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 10px;
  padding-right: 12px;
  padding-bottom: 10px;
  padding-left: 12px;
  border-radius: 8px;
  background-color: rgba(62, 196, 255, 0.15);
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: rgba(62, 196, 255, 0.35);
  border-right-color: rgba(62, 196, 255, 0.35);
  border-bottom-color: rgba(62, 196, 255, 0.35);
  border-left-color: rgba(62, 196, 255, 0.35);
}

form h3 {
  margin: 0 0 10px 0;
}


/* ------------------------------------------------------------
   Close Button
   ------------------------------------------------------------ */

/* Close-Button sichtbar machen */
.btn-close-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* feste Mindestgröße */
  width: 38px;
  height: 38px;

  /* optional etwas Abstand */
  padding: 0;

  /* Hintergrund & Rahmen */
  border: none;
  cursor: pointer;
}

/* SVG selbst skalieren und färben */
.btn-close-icon .icon {
  width: 25px;
  height: 25px;
}



/* ------------------------------------------------------------
   FOKUSSTYLING FÜR TASTATURNUTZUNG
   ------------------------------------------------------------ */

/* Allgemein: Buttons, Links, Formulareingaben */
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 3px solid rgb(255, 237, 0);     /* deutliche schwarze Kontur */
  outline-offset: 3px;            /* leicht vom Element abgesetzt */
  border-radius: 4px;             /* weiche Ecken für bessere Sichtbarkeit */
}

/* Speziell: Türchen-Button */
.door-btn:focus {
  box-shadow: 0 0 0 4px rgba(255, 237, 0, 0.6); /* zusätzlicher weicher Fokus-Ring */
  outline: none;                            /* native Outline ausblenden, da ersetzt */
  z-index: 10;                              /* über Nachbarn zeigen */
  transition: box-shadow 0.2s ease;         /* sanftes Ein-/Ausblenden */
}

/* Optional: sichtbarer Fokus auch bei Buttons im Formular */
.mini-form button:focus {
  box-shadow: 0 0 0 3px rgba(255, 237, 0, 0.6);
  outline: none;
}




/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
footer {
  position: relative;
  padding: 20px;
  z-index: 100;
}


/* ------------------------------------------------------------
   Schnee
   ------------------------------------------------------------ */

.snow,
.snow::before,
.snow::after {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-repeat: repeat;
  will-change: background-position;
}

.snow {
  background-image:
    radial-gradient(2px 2px at 24px 36px, rgba(255, 255, 255, .95) 99%, transparent),
    radial-gradient(2px 2px at 110px 64px, rgba(255, 255, 255, .90) 99%, transparent),
    radial-gradient(2px 2px at 188px 140px, rgba(255, 255, 255, .90) 99%, transparent),
    radial-gradient(2px 2px at 260px 92px, rgba(255, 255, 255, .85) 99%, transparent),
    radial-gradient(2px 2px at 330px 160px, rgba(255, 255, 255, .80) 99%, transparent),
    radial-gradient(2px 2px at 410px 28px, rgba(255, 255, 255, .80) 99%, transparent),
    radial-gradient(2px 2px at 80px 200px, rgba(255, 255, 255, .85) 99%, transparent),
    radial-gradient(2px 2px at 200px 300px, rgba(255, 255, 255, .80) 99%, transparent);
  background-size: 320px 320px, 380px 380px, 420px 420px, 460px 460px, 500px 500px, 540px 540px, 580px 580px, 620px 620px;
  background-position: -60px -220px, 140px -160px, -240px -120px, 60px -80px, -120px -40px, 200px -20px, 100px -260px, -180px -180px;
}

.snow::before {
  content: "";
  background-image:
    radial-gradient(4px 4px at 40px 20px, rgba(255, 255, 255, .95) 99%, transparent),
    radial-gradient(4px 4px at 150px 110px, rgba(255, 255, 255, .90) 99%, transparent),
    radial-gradient(4px 4px at 280px 70px, rgba(255, 255, 255, .85) 99%, transparent),
    radial-gradient(4px 4px at 360px 150px, rgba(255, 255, 255, .90) 99%, transparent),
    radial-gradient(4px 4px at 220px 260px, rgba(255, 255, 255, .80) 99%, transparent),
    radial-gradient(4px 4px at 60px 320px, rgba(255, 255, 255, .85) 99%, transparent);
  background-size: 400px 400px, 460px 460px, 520px 520px, 580px 580px, 640px 640px, 700px 700px;
  background-position: 120px -300px, -200px -180px, 60px -100px, -80px -240px, 100px -260px, -160px -200px;
  opacity: .75;
}

.snow::after {
  content: "";
  background-image:
    radial-gradient(6px 6px at 70px 40px, rgba(255, 255, 255, .95) 99%, transparent),
    radial-gradient(6px 6px at 210px 140px, rgba(255, 255, 255, .90) 99%, transparent),
    radial-gradient(6px 6px at 340px 90px, rgba(255, 255, 255, .95) 99%, transparent),
    radial-gradient(6px 6px at 100px 220px, rgba(255, 255, 255, .90) 99%, transparent),
    radial-gradient(6px 6px at 260px 260px, rgba(255, 255, 255, .85) 99%, transparent);
  background-size: 480px 480px, 600px 600px, 720px 720px, 840px 840px, 960px 960px;
  background-position: -160px -380px, 220px -240px, -60px -480px, 120px -300px, -200px -200px;
  opacity: .6;
}

.snow.run {
  animation-name: snowA;
  animation-duration: 18s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.snow.run::before {
  animation-name: snowB;
  animation-duration: 24s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.snow.run::after {
  animation-name: snowC;
  animation-duration: 32s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes snowA {
  0%   { background-position: -60px -480px, 140px -520px, -240px -560px, 60px -600px, -120px -640px, 200px -680px, 100px -700px, -180px -740px; }
  100% { background-position:  40px  480px, 100px  520px, -200px  560px, 90px  600px, -140px  640px, 240px  680px, 180px  700px, -120px  740px; }
}

@keyframes snowB {
  0%   { background-position: 120px -540px, -200px -420px, 60px -300px, -80px -600px, 100px -260px, -160px -200px; }
  100% { background-position:  60px  540px, -240px  420px, 10px  300px, -40px  600px, 80px  260px, -120px  200px; }
}

@keyframes snowC {
  0%   { background-position: -160px -600px, 220px -720px, -60px -840px, 120px -300px, -200px -200px; }
  100% { background-position: -120px  600px, 180px  720px, -20px  840px, 160px  300px, -160px  200px; }
}

/* ------------------------------------------------------------
   Video-Embed / Sonstiges
   ------------------------------------------------------------ */

.video {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 800px) {
  .bg { background-position: 70% center; }
}

@media (max-width: 450px) {
  .bg {
    background-position: 80% center;
  }
  h1, h2, h3, p, div, small{
    hyphens: auto;
  }
}