/* ============================================================================
   WIR MACHEN DICH SELBSTSTÄNDIG
   Nur das, was diese Domain zusätzlich zur Spotlight-Optik braucht:
   der Dialog „Ehrlich vorab“, der eigene Fußbereich und die Unterseite mit
   der Namensvorschau. Palette und Schrift kommen aus selbst-spotlight.css.
   ============================================================================ */

html { scrollbar-gutter: stable; }
/* Während der Dialog offen ist, steht die Seite dahinter still */
html.wmds-fest { overflow: hidden; }

/* ── Dialog ───────────────────────────────────────────────────────────── */
.wmds-dialog {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 3vw, 40px);
}
.wmds-dialog[hidden] { display: none; }

.wmds-dialog-grund {
  position: absolute;
  inset: 0;
  background: rgba(6,7,8,.72);
  opacity: 0;
  transition: opacity .3s var(--ease-out);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.wmds-dialog.is-auf .wmds-dialog-grund { opacity: 1; }

.wmds-dialog-karte {
  position: relative;
  width: min(100%, 940px);
  max-height: calc(100vh - clamp(28px, 6vw, 80px));
  overflow-y: auto;
  padding: clamp(26px, 4vw, 52px) clamp(20px, 3.4vw, 52px) clamp(24px, 3.4vw, 44px);
  border-radius: clamp(18px, 2vw, 26px);
  background: var(--weiss);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.6);
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition: opacity .34s var(--ease-out), transform .34s var(--ease-out);
}
.wmds-dialog.is-auf .wmds-dialog-karte { opacity: 1; transform: none; }
.wmds-dialog-karte:focus { outline: none; }
.wmds-dialog-karte .ws-eyebrow { color: rgba(11,11,11,.55) !important; }
.wmds-dialog-karte h2 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: clamp(25px, 3.2vw, 42px) !important;
  font-weight: 300 !important;
  line-height: 1.14 !important;
  letter-spacing: -.01em !important;
  color: var(--tinte) !important;
  margin: 0 0 clamp(24px, 3vw, 38px);
}
.wmds-dialog-karte h2 em {
  font-family: inherit;
  font-style: normal;
  font-weight: 300;
  color: var(--tinte);
  background: linear-gradient(to top, rgba(var(--akzent-r), .75) 0 .26em, transparent .26em);
  padding-inline: .06em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.wmds-dialog-x {
  position: absolute;
  right: clamp(12px, 1.6vw, 20px);
  top: clamp(12px, 1.6vw, 20px);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.05);
  color: var(--tinte);
  cursor: pointer;
  transition: background .25s var(--ease-out);
}
.wmds-dialog-x:hover { background: rgba(var(--akzent-r), .4); }
.wmds-dialog-x:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; }
.wmds-dialog-x svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

/* Im Dialog stehen die beiden Felder dichter, damit der Knopf am Fuß auch
   auf einem Laptop ohne Scrollen im Bild bleibt. Der Haken trägt hier den
   Akzent der Variante statt des Golds aus der Göck-Fassung. */
.wmds-dialog .ws-passt-feld { padding: clamp(18px, 2.2vw, 28px); border-radius: 20px; }
.wmds-dialog .ws-passt-feld h3 { margin-bottom: 10px; font-size: 17px !important; }
.wmds-dialog .ws-passt-feld li { padding: 8px 0 8px 32px; font-size: 15px; }
.wmds-dialog .ws-passt-feld li::before { top: 9px; }
.wmds-dialog .ws-passt-feld--ja li::before {
  background: rgba(198,178,154,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6d94' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.wmds-dialog-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: clamp(24px, 3vw, 36px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--linie);
}
.wmds-dialog-fuss p {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  font-size: 13.5px !important;
  color: var(--leise) !important;
}

/* ── Fußbereich ───────────────────────────────────────────────────────── */
.wmds-footer {
  position: relative;
  z-index: 2;
  background: var(--schwarz);
  color: rgba(255,255,255,.66);
  padding-block: clamp(48px, 7vw, 86px) clamp(90px, 8vw, 60px);
}
.wmds-footer .footer-inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 56px);
}
.wmds-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 64px);
}
.wmds-wortmarke {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(20px, 2vw, 27px) !important;
  font-weight: 300;
  line-height: 1.2 !important;
  color: var(--weiss) !important;
  margin: 0 0 16px;
}
.wmds-wortmarke em { font-family: inherit; font-style: normal; font-weight: 300; color: var(--akzent); }
.wmds-footer-marke p {
  max-width: 42ch;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,.6) !important;
}
.wmds-footer-logo {
  height: 30px;
  width: auto;
  margin-top: 26px;
  opacity: .72;
  filter: brightness(0) invert(1);
}
.wmds-footer-col h5 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--akzent);
  margin: 0 0 16px;
}
.wmds-footer-col ul { list-style: none; margin: 0; padding: 0; }
.wmds-footer-col li + li { margin-top: 11px; }
.wmds-footer-col a {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  font-size: 14.5px;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color .25s var(--ease-out);
}
.wmds-footer-col a:hover { color: var(--akzent); text-decoration: underline; text-underline-offset: 4px; }

.wmds-footer-unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: clamp(34px, 4vw, 56px);
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  font-size: 12.5px;
  color: rgba(255,255,255,.5);
}
.wmds-footer-unten a { color: rgba(255,255,255,.7); text-decoration: none; }
.wmds-footer-unten a + a { margin-left: 18px; }
.wmds-footer-unten a:hover { color: var(--akzent); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 860px) {
  .wmds-footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wmds-footer-marke { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .wmds-footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Unterseiten: heller Raum ohne Lichtstrahl ────────────────────────── */
.wmds-seite { background: var(--weiss); color: var(--tinte); }
.wmds-seite .wmds-inhalt { position: relative; z-index: 2; background: var(--weiss); }

.wmds-kopf {
  position: relative;
  overflow: clip;
  padding-block: clamp(56px, 9vw, 120px) clamp(30px, 4vw, 56px);
  background-color: var(--schwarz);
  background-image: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(var(--akzent-r), .18), transparent 66%);
  color: var(--weiss);
}
.wmds-kopf .ws-eyebrow { color: var(--akzent) !important; }
.wmds-kopf h1 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: clamp(30px, 4.4vw, 62px) !important;
  font-weight: 300 !important;
  line-height: 1.1 !important;
  letter-spacing: -.01em;
  color: var(--weiss) !important;
  margin: 0;
  text-wrap: balance;
}
.wmds-kopf h1 em { font-family: inherit; font-style: normal; font-weight: 300; color: var(--akzent); }
.wmds-kopf p {
  max-width: 62ch;
  margin-top: clamp(18px, 2vw, 26px);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(15px, 1.15vw, 17px) !important;
  line-height: 1.75 !important;
  color: rgba(255,255,255,.7) !important;
}
.wmds-zurueck {
  /* Eigene Zeile: die Eyebrow darunter ist selbst inline-flex */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 9px;
  margin-bottom: clamp(22px, 3vw, 34px);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.66);
  text-decoration: none;
}
.wmds-zurueck:hover { color: var(--akzent); }
.wmds-zurueck svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── Namensfeld ───────────────────────────────────────────────────────── */
.wmds-namensfeld {
  display: flex;
  max-width: 560px;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(26px, 3vw, 38px);
}
.wmds-namensfeld label {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wmds-namensfeld span {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.wmds-namensfeld input {
  width: 100%;
  padding: 15px 18px;
  border: 0;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: var(--weiss);
}
.wmds-namensfeld input::placeholder { color: rgba(255,255,255,.36); }
.wmds-namensfeld input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--akzent);
}
.wmds-hinweis {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 62ch;
  margin-top: 18px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,.56) !important;
}
.wmds-hinweis svg { flex: none; width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: var(--akzent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── Platzhalter der Vorschau ─────────────────────────────────────────── */
.wmds-vorschau {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 30px);
  padding-block: clamp(46px, 6vw, 84px);
}
.wmds-karte {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: clamp(16px, 1.6vw, 22px);
  background: var(--papier-2);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.wmds-karte figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  padding: 16px clamp(16px, 2vw, 24px) 18px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  font-size: 13.5px;
  color: var(--leise);
  background: var(--weiss);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.07);
}
.wmds-karte figcaption b { font-weight: 500; color: var(--tinte); }
.wmds-marke {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(11,11,11,.4);
}

/* Die Bühne jeder Vorschau: fester Rahmen, damit nichts springt */
.wmds-buehne {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: clamp(18px, 3vw, 44px);
  text-align: center;
  overflow: hidden;
}
.wmds-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* 1 Schild über der Tür */
.wmds-buehne--schild {
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(var(--akzent-r), .22), transparent 70%),
    linear-gradient(180deg, #14181c, #0b0d0f);
}
.wmds-buehne--schild .wmds-schild {
  padding: clamp(16px, 2.6vw, 30px) clamp(20px, 4vw, 54px);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 24px 50px -26px rgba(0,0,0,.9);
}
.wmds-buehne--schild .wmds-name { font-size: clamp(19px, 2.6vw, 34px); color: #fff; }
.wmds-buehne--schild small {
  display: block;
  margin-top: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(8.5px, .8vw, 10.5px);
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--akzent);
}

/* 2 Fahrzeug */
.wmds-buehne--wagen { background: linear-gradient(180deg, #cfe6f3, #a9cee3); }
.wmds-buehne--wagen .wmds-wagen {
  width: 100%;
  max-width: 460px;
  padding: clamp(18px, 3vw, 32px) clamp(16px, 3vw, 34px);
  border-radius: 10px 26px 10px 10px;
  background: linear-gradient(140deg, #57a5c9, #3d8cb4);
  box-shadow: 0 24px 46px -26px rgba(11,11,11,.7), inset 0 1px 0 rgba(255,255,255,.4);
  text-align: left;
}
.wmds-buehne--wagen .wmds-name { font-size: clamp(17px, 2.2vw, 28px); color: #fff; }
.wmds-buehne--wagen small {
  display: block;
  margin-top: 7px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(9px, .9vw, 11.5px);
  font-weight: 300;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
}

/* 3 Visitenkarte */
.wmds-buehne--karte { background: linear-gradient(180deg, #f3f5f7, #e6eaee); }
.wmds-buehne--karte .wmds-visit {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 85 / 55;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(14px, 2.2vw, 24px);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 22px 44px -24px rgba(11,11,11,.55), inset 0 0 0 1px rgba(0,0,0,.06);
  text-align: left;
}
.wmds-buehne--karte .wmds-name { font-size: clamp(15px, 1.8vw, 22px); color: var(--tinte); }
.wmds-visit-zeilen {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(9px, .85vw, 11px);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(11,11,11,.5);
}
.wmds-visit-strich { width: 34px; height: 2px; background: var(--akzent); }

/* 4 Website */
.wmds-buehne--netz { background: linear-gradient(180deg, #eef1f4, #dde3e8); }
.wmds-buehne--netz .wmds-fenster {
  width: 100%;
  max-width: 460px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 46px -26px rgba(11,11,11,.5), inset 0 0 0 1px rgba(0,0,0,.07);
  text-align: left;
}
.wmds-fenster-leiste {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: #f1f3f5;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.07);
}
.wmds-fenster-leiste i { width: 8px; height: 8px; border-radius: 50%; background: rgba(11,11,11,.16); }
.wmds-fenster-leiste span {
  margin-left: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(8.5px, .8vw, 10.5px);
  font-weight: 300;
  color: rgba(11,11,11,.55);
  overflow-wrap: anywhere;
}
.wmds-fenster-bild {
  padding: clamp(20px, 3.4vw, 40px) clamp(16px, 2.6vw, 30px);
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(var(--akzent-r), .3), transparent 70%),
    linear-gradient(180deg, #14181c, #0b0d0f);
}
.wmds-buehne--netz .wmds-name { font-size: clamp(15px, 1.9vw, 24px); color: #fff; }
.wmds-fenster-bild small {
  display: block;
  margin-top: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(8.5px, .8vw, 11px);
  font-weight: 300;
  letter-spacing: .12em;
  color: rgba(255,255,255,.66);
}

@media (max-width: 760px) {
  .wmds-vorschau { grid-template-columns: minmax(0, 1fr); }
  .wmds-buehne { aspect-ratio: 16 / 11; }
}

/* ── Schlusszeile der Unterseite ──────────────────────────────────────── */
.wmds-schluss {
  padding-block: clamp(40px, 5vw, 70px) clamp(70px, 8vw, 110px);
  text-align: center;
  background: var(--papier-2);
}
.wmds-schluss p {
  max-width: 56ch;
  margin: 0 auto 26px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  color: var(--leise) !important;
}

/* ── Rechtstexte ──────────────────────────────────────────────────────── */
.wmds-text { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 7vw, 96px); }
.wmds-text .ws-wrap { max-width: 900px; }
.wmds-text h2 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: clamp(20px, 2vw, 27px) !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  color: var(--tinte) !important;
  margin: clamp(34px, 4vw, 52px) 0 14px;
}
.wmds-text h2:first-child { margin-top: 0; }
.wmds-text h3 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--tinte) !important;
  margin: 26px 0 8px;
}
.wmds-text p, .wmds-text li {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  font-size: 15.5px !important;
  line-height: 1.8 !important;
  color: var(--leise) !important;
}
.wmds-text p + p { margin-top: 14px; }
.wmds-text ul { margin: 12px 0 0 20px; }
.wmds-text li + li { margin-top: 8px; }
.wmds-text a { color: #6F5F4C; text-underline-offset: 3px; }
.wmds-text address { font-style: normal; }
/* Eine Anschrift steht als eigener Block. Ohne Abstand darunter klebt die
   nächste Zeile am Land, und aus Anschrift und Folgesatz wird optisch eins. */
.wmds-text address + p { margin-top: 18px; }

/* ── Ruhezustand ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wmds-dialog-grund,
  .wmds-dialog-karte { transition: none !important; }
}