:root {
      --bg: #0b1219;
      --bg-soft: #111b25;
      --gold: #d4a24f;
      --gold-2: #e5bf72;
      --text: #ffffff;
      --muted: #d7dee6;
      --fade-time: 1300ms;
      --slide-time: 4800ms;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background: var(--bg);
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; }
    a:focus-visible, button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

    .hero {
      position: relative;
      isolation: isolate;
      min-height: 100vh;
      min-height: 100svh;
      overflow: hidden;
      background: var(--bg);
    }
    .slides {
      position: absolute;
      inset: 0;
      z-index: -3;
    }
    .slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity var(--fade-time) ease-in-out;
    }
    .slide.is-active { opacity: 1; }
    .slide picture, .slide img { width: 100%; height: 100%; }
    .slide img { object-fit: cover; object-position: center center; }

    /* Only a subtle, soft vignette behind the stationary white text.
       Neither the photos nor the typography are covered by a black panel. */
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      background:
        radial-gradient(ellipse 92% 33% at 50% 86%, rgba(7, 11, 17, .28), transparent 82%),
        linear-gradient(180deg,
          rgba(7, 11, 17, .02) 0%,
          rgba(7, 11, 17, .02) 55%,
          rgba(7, 11, 17, .08) 74%,
          rgba(7, 11, 17, .24) 100%);
    }
    .hero__inner {
      position: relative;
      min-height: 100vh;
      min-height: 100svh;
      display: grid;
      align-items: end;
      padding: max(24px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom));
    }
    .hero__content {
      width: min(100%, 560px);
      margin: 0 auto;
      text-align: center;
      padding: 18px 10px 6px;
    }
    .headline {
      margin: 0;
      font-family: "Anton", "Nimbus Sans Narrow", "Liberation Sans Narrow", "Arial Narrow", Impact, sans-serif;
      font-weight: 700;
      font-size: clamp(1.7rem, 7.5vw, 4.6rem);
      line-height: .95;
      letter-spacing: -.015em;
      text-transform: uppercase;
      white-space: nowrap;
      text-shadow: 0 2px 4px rgba(0,0,0,.48), 0 8px 24px rgba(0,0,0,.34);
    }
    .headline .tld { font-size: .64em; }
    .slogan {
      margin: 10px 0 24px;
      position: relative;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      padding-bottom: 17px;
      font-family: "Brittany Signature", "Allura", "Segoe Script", "Brush Script MT", "Lobster Two", cursive;
      font-size: clamp(2.1rem, 8.3vw, 5rem);
      line-height: .92;
      font-weight: 400;
      color: rgba(255,255,255,.98);
      text-shadow: 0 2px 4px rgba(0,0,0,.48), 0 7px 22px rgba(0,0,0,.34);
      white-space: nowrap;
    }
    .slogan::after {
      content: "";
      position: absolute;
      left: 13%;
      right: 13%;
      bottom: 0;
      height: 6px;
      border-radius: 999px;
      transform: rotate(-3deg);
      background: linear-gradient(90deg, rgba(212,162,79,0), rgba(212,162,79,.96) 18%, rgba(229,191,114,.96) 82%, rgba(212,162,79,0));
      box-shadow: 0 2px 10px rgba(212,162,79,.18);
    }
    .cta-row {
      display: flex;
      justify-content: center;
    }
    .cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      min-height: 64px;
      width: min(100%, 360px);
      padding: 16px 22px;
      border-radius: 999px;
      border: 1px solid rgba(255,240,203,.22);
      background: linear-gradient(135deg, #d9aa56 0%, #bd8938 100%);
      color: #fff;
      font-family: "Anton", Impact, sans-serif;
      font-size: clamp(1rem, 4.2vw, 1.4rem);
      font-weight: 400;
      letter-spacing: .02em;
      box-shadow: 0 12px 32px rgba(0,0,0,.22), inset 0 1px 1px rgba(255,255,255,.18);
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .cta span { white-space: nowrap; }
    .cta:hover { transform: translateY(-1px); box-shadow: 0 16px 38px rgba(0,0,0,.26), inset 0 1px 1px rgba(255,255,255,.18); }
    .cta svg { width: 25px; height: 25px; flex: 0 0 auto; }
    .pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 22px;
    }
    .dot {
      width: 8px;
      height: 8px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: rgba(255,255,255,.42);
      cursor: pointer;
      transition: width .2s ease, background .2s ease;
    }
    .dot.is-active {
      width: 28px;
      background: var(--gold-2);
    }

    .services {
      padding: 72px 20px 88px;
      background: linear-gradient(180deg, #101922 0%, #0d151d 100%);
      border-top: 1px solid rgba(255,255,255,.06);
    }
    .services__inner { max-width: 1180px; margin: 0 auto; }
    .services__label {
      margin: 0 0 12px;
      color: var(--gold-2);
      font-size: .86rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .services h2 {
      margin: 0 0 14px;
      font-family: "Anton", Impact, sans-serif;
      font-weight: 400;
      line-height: .98;
      letter-spacing: -.01em;
      font-size: clamp(2.2rem, 7vw, 4.2rem);
    }
    .services__intro {
      margin: 0;
      max-width: 760px;
      color: var(--muted);
      font-size: 1rem;
      line-height: 1.75;
    }
    .cards {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      margin-top: 32px;
    }
    .card {
      padding: 22px;
      border-radius: 24px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    }
    .card h3 {
      margin: 0 0 8px;
      font-family: "Anton", Impact, sans-serif;
      font-weight: 400;
      font-size: 1.55rem;
      letter-spacing: .01em;
    }
    .card p {
      margin: 0;
      color: var(--muted);
      line-height: 1.65;
    }

    @media (max-width: 370px) {
      .hero__inner { padding-inline: 14px; }
      .headline { font-size: 1.9rem; }
      .slogan { font-size: 2rem; }
      .cta { min-height: 60px; font-size: 1.05rem; }
    }

    @media (min-width: 900px) {
      .hero { min-height: 820px; }
      .hero::before {
        background:
          radial-gradient(ellipse 42% 52% at 79% 53%, rgba(7, 11, 17, .27), transparent 100%),
          linear-gradient(90deg,
            transparent 0%,
            rgba(7, 11, 17, .01) 42%,
            rgba(7, 11, 17, .06) 58%,
            rgba(7, 11, 17, .19) 79%,
            rgba(7, 11, 17, .29) 100%);
      }
      .hero__inner {
        align-items: center;
        grid-template-columns: 1.05fr .95fr;
        padding: 40px clamp(24px, 3.2vw, 56px);
      }
      .hero__content {
        grid-column: 2;
        margin: 0;
        justify-self: end;
        width: min(100%, 580px);
        text-align: center;
        padding: 28px 26px 20px;
        border-radius: 36px;
        background: transparent;
        /* No frosted-glass or black panel behind the text. */
      }
      .headline { font-size: clamp(2.2rem, 3.5vw, 4.6rem); }
      .slogan { font-size: clamp(2.75rem, 3.5vw, 4.4rem); margin-top: 14px; margin-bottom: 28px; }
      .cta { width: min(100%, 370px); font-size: 1.35rem; }
      .cards { grid-template-columns: repeat(3, 1fr); gap: 18px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .slide, .dot, .cta { transition: none !important; }
    }


/* LOGO-ANPASSUNG | Transparenter Hintergrund
   Originalfigur und Schriftkonturen bleiben erhalten; nur der weiße
   Hintergrund wurde transparent und die Wortmarke warmhell umgesetzt.
   Ohne weiße Karte, rechteckigen Hintergrund oder Glas-Effekt. */
.headline--logo {
  width: 100%;
  max-width: 470px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  line-height: 0;
  text-shadow: none;
}
.brand-logo {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 1px rgba(3, 12, 17, .50))
          drop-shadow(0 7px 15px rgba(3, 12, 17, .52));
}
@media (min-width: 900px) {
  .headline--logo { max-width: 540px; }
}
/* Mild text-area vignettes; fades smoothly into the photos. */
.hero::before {
  background:
    radial-gradient(ellipse 83% 37% at 50% 86%, rgba(7,11,17,.43), transparent 92%),
    linear-gradient(180deg, rgba(7,11,17,.01) 0%, transparent 55%, rgba(7,11,17,.08) 73%, rgba(7,11,17,.28) 100%);
}
@media (min-width: 900px) {
  .hero::before {
    background:
      radial-gradient(ellipse 42% 50% at 79% 53%, rgba(7,11,17,.35), transparent 100%),
      linear-gradient(90deg, transparent 0%, rgba(7,11,17,.01) 43%, rgba(7,11,17,.08) 58%, rgba(7,11,17,.22) 79%, rgba(7,11,17,.34) 100%);
  }
}


/* LOGO DIREKT IM HERO-BILD
   Keine separate Leiste mehr. Das Logo sitzt transparent oben links direkt im Bild,
   klein und unaufdringlich, damit die Fotowirkung erhalten bleibt. */
.hero__corner-logo {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  left: 14px;
  z-index: 4;
  width: clamp(92px, 26vw, 122px);
  pointer-events: none;
}
.hero__corner-logo-image {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.18))
          drop-shadow(0 10px 24px rgba(0,0,0,.10));
}
.hero__inner {
  padding-top: max(98px, calc(env(safe-area-inset-top) + 78px));
}
@media (min-width: 900px) {
  .hero__corner-logo {
    top: 24px;
    left: clamp(24px, 3vw, 42px);
    width: clamp(128px, 12vw, 164px);
  }
  .hero__inner {
    padding-top: 34px;
  }
}

/* Visibility fix: the photo canvas must be above the hero's own background.
   Overlay and stationary content stack above it, corner logo always on top. */
.hero .slides { z-index: 0; }
.hero::before { z-index: 1; }
.hero .hero__inner { z-index: 2; }
.hero .hero__corner-logo { z-index: 4; }


/* ---------------------------------------------------------
   Responsive language & light/dark controls, without a header
   --------------------------------------------------------- */
:root {
  --page-bg: #faf8f3;
  --service-bg: #f7f5f0;
  --page-ink: #173c32;
  --page-muted: #596b64;
  --panel-bg: rgba(255,255,255,.86);
  --panel-border: rgba(21,73,54,.11);
  --label-gold: #a77627;
}
:root[data-theme="dark"] {
  --page-bg: #0b1219;
  --service-bg: #101922;
  --page-ink: #ffffff;
  --page-muted: #d0d8df;
  --panel-bg: rgba(255,255,255,.045);
  --panel-border: rgba(255,255,255,.095);
  --label-gold: #e5bf72;
}
body {
  background: var(--page-bg);
  color: var(--page-ink);
  transition: color .3s ease, background-color .3s ease;
}
.hero { background: #142229; }
/* The image itself changes its mood, without swapping in an invented "night" photo. */
.slide img {
  filter: brightness(1.02) contrast(1.025) saturate(1.05);
  transition: filter .5s ease;
}
:root[data-theme="dark"] .slide img {
  filter: brightness(.63) contrast(1.07) saturate(.78) hue-rotate(6deg);
}
/* A transparent graduated veil is used for text legibility in both appearances. */
.hero::before {
  background:
    radial-gradient(ellipse 83% 39% at 50% 87%, rgba(5,17,21,.34), transparent 87%),
    linear-gradient(180deg, rgba(4,17,18,.025) 0%, transparent 47%, rgba(5,17,21,.10) 70%, rgba(4,17,21,.37) 100%);
}
:root[data-theme="dark"] .hero::before {
  background:
    linear-gradient(180deg, rgba(8,20,34,.13) 0%, transparent 34%, rgba(5,15,27,.18) 65%, rgba(3,10,21,.57) 100%),
    radial-gradient(ellipse 88% 44% at 50% 82%, rgba(6,20,34,.27), transparent 91%);
}
@media (min-width: 900px) {
  .hero::before {
    background: radial-gradient(ellipse 47% 53% at 79% 53%, rgba(7,19,19,.38), transparent 100%),
                linear-gradient(90deg, transparent 0%, rgba(7,18,20,.01) 47%, rgba(7,17,18,.10) 67%, rgba(6,16,18,.29) 100%);
  }
  :root[data-theme="dark"] .hero::before {
    background: radial-gradient(ellipse 47% 59% at 80% 52%, rgba(5,13,29,.49), transparent 99%),
                linear-gradient(90deg, rgba(5,13,26,.12), transparent 31%, rgba(4,12,26,.17) 59%, rgba(4,13,26,.46) 100%);
  }
}
/* Keep the photograph, mascot logo and CTA layered independently. */
.hero .slides { z-index: 0; }
.hero::before { z-index: 1; }
.hero .hero__inner { z-index: 2; }
.hero .hero__corner-logo { z-index: 4; }
/* High-contrast controls, directly on the photograph and always visible.
   Both language and appearance can be switched by touch, keyboard or pointer. */
.hero__controls {
  position: absolute;
  z-index: 20;
  top: max(14px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.hero__controls .theme-toggle,
.hero__controls .language-switch {
  border: 1px solid rgba(250,247,234,.58);
  background: rgba(6,44,36,.93);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.27);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.hero__controls .theme-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  min-width: 98px;
  height: 45px;
  padding: 0 12px;
  border-radius: 13px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  font-weight: 750;
  letter-spacing: .015em;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
}
.theme-toggle svg { display: block; width: 19px; height: 19px; flex: 0 0 19px; }
.theme-toggle__sun { display: none !important; }
:root[data-theme="dark"] .theme-toggle__moon { display: none !important; }
:root[data-theme="dark"] .theme-toggle__sun { display: block !important; }
.hero__controls .language-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 45px;
  padding: 4px;
  border-radius: 13px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .01em;
}
.hero__controls .language-switch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 35px;
  height: 35px;
  padding: 0 5px;
  border-radius: 9px;
  color: #fff;
  text-decoration: none;
}
.hero__controls .language-switch__item.is-current {
  background: #e8bd69;
  color: #123a30;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.hero__controls a.language-switch__item:hover,
.hero__controls button.theme-toggle:hover { background-color: #185c49; }
.hero__controls .language-switch__item.is-current:hover { background: #e8bd69; }
.hero__controls a:focus-visible, .hero__controls button:focus-visible {
  outline: 3px solid #ffe2a0;
  outline-offset: 3px;
}
@media (max-width: 370px) {
  .hero__corner-logo { width: 88px; left: 10px; }
  .hero__controls { top: max(12px, env(safe-area-inset-top)); right: 9px; gap: 6px; }
  .hero__controls .theme-toggle { min-width: 85px; height: 42px; padding: 0 9px; gap: 5px; font-size: 12px; }
  .hero__controls .language-switch { height: 42px; font-size: 12px; gap: 2px; padding: 3px; }
  .hero__controls .language-switch__item { min-width: 29px; height: 34px; padding: 0 3px; }
}
@media (min-width: 900px) {
  .hero__controls { top: 24px; right: clamp(24px, 3vw, 42px); gap: 10px; }
  .hero__controls .theme-toggle { min-width: 116px; height: 49px; padding: 0 16px; font-size: 14px; }
  .hero__controls .language-switch { height: 49px; font-size: 14px; }
  .hero__controls .language-switch__item { min-width: 38px; height: 39px; }
}
.services {
  color: var(--page-ink);
  background: var(--service-bg);
  border-top: 1px solid var(--panel-border);
  transition: background-color .35s ease, color .35s ease;
}
.services__label { color: var(--label-gold); }
.services__intro, .card p { color: var(--page-muted); }
.card {
  background: var(--panel-bg);
  border-color: var(--panel-border);
  box-shadow: 0 3px 21px rgba(8,33,27,.04);
  transition: background-color .35s ease, border-color .35s ease;
}
:root[data-theme="dark"] .card { box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
@media (prefers-reduced-motion: reduce) {
  body, .slide img, .services, .card { transition: none !important; }
}