:root{ --radius:18px; --shadow:0 6px 18px rgba(0,0,0,.15); --gold:#dab454; --accent:#5ce1e6; }
  .theme-dark{ --bg:#0d0d0d; --card:#151515; --text:#e0e0e0; --muted:#b5b5b5; --border:#242424; --hero-grad:linear-gradient(180deg,#141414,#0f0f0f); --badge-bg:#1d1d1d; color-scheme:dark; }
  .theme-light{ --bg:#f9f9f9; --card:#ffffff; --text:#0d0d0d; --muted:#4d4d4d; --border:#e6e6e6; --hero-grad:linear-gradient(180deg,#ffffff,#f6f6f6); --badge-bg:#ffffff; color-scheme:light; }

  html,body{height:100%}
  *{box-sizing:border-box}
  body{ margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
        background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
  a{color:inherit}
  .wrap{max-width:1200px;margin:0 auto;padding:24px}
  header{display:flex;align-items:center;justify-content:flex-end;padding:12px 0 8px 0;}
  .theme-toggle{ display:inline-flex;align-items:center;gap:8px;background:var(--badge-bg);border:1px solid var(--border);
                 border-radius:12px;padding:8px 10px;font-size:13px;cursor:pointer; }
  .theme-toggle:focus{outline:3px solid var(--accent);outline-offset:2px}

  .hero{ margin:8px 0 24px;border-radius:var(--radius);background:var(--hero-grad);border:1px solid var(--border);
         box-shadow:var(--shadow);padding:32px;text-align:center; }
  .hero-logo{ max-width:260px;width:100%;display:block;margin:0 auto 16px auto; filter:drop-shadow(0 6px 18px rgba(0,0,0,.25)) }
  .hero h1{margin:12px 0 8px 0;font-size:clamp(24px,3.5vw,40px);line-height:1.15}
  .hero p{margin:0;color:var(--muted)}

  section{margin:28px 0}
  .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
  .section-title{margin:0 0 8px 0;font-size:22px;line-height:1.3}
  .muted{color:var(--muted)}
  h1, h2, h3 { color: var(--gold); }

  /* Cars grid */
  .cars{display:grid;grid-template-columns:1fr;gap:20px}
  @media(min-width:900px){.cars{grid-template-columns:1fr 1fr}}

  /* Flipcards */
  .flip{perspective:1200px; outline: none;}
  .flip[role="button"]{ cursor:pointer; }
  .flip-inner{
    position:relative;
    width:100%;
    padding-top:56.25%; /* fix 16:9 */
    transform-style:preserve-3d;
    transition:transform .65s cubic-bezier(.2,.7,.1,1);
  }
  .flip.toggled .flip-inner{ transform:rotateY(180deg) }

  .face{
    position:absolute; inset:0; border-radius:var(--radius); overflow:hidden;
    background:#1d1d1d; border:1px solid var(--border); backface-visibility:hidden;
  }
  .theme-light .face{background:#ddd}
  .face.front img{width:100%;height:100%;object-fit:cover;display:block}
  .face.back{
    transform:rotateY(180deg); background:var(--card);
    display:flex; flex-direction:column; padding:0;
  }

  .face.back .content{
    padding:16px 16px 8px 16px;
    overflow:auto; -webkit-overflow-scrolling:touch;
  }
  .btn{
    display:inline-block; margin:12px 16px 16px 16px; padding:12px 16px;
    border-radius:12px; border:1px solid var(--gold); background:var(--gold);
    color:#0d0d0d; text-decoration:none; font-weight:700; text-align:center;
  }
  .btn:focus{outline:3px solid var(--accent);outline-offset:2px}

  .tags{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
  .tag{font-size:12px;border:1px solid var(--border);padding:4px 8px;border-radius:999px;background:transparent}

  .list-links a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;border-bottom:2px solid transparent}
  .list-links a:hover{border-color:var(--gold)}
  .arrow{font-weight:700}

  /* Map card */
  .map-card .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
  .map-hint{font-size:13px;color:var(--muted);margin-top:8px}
  .btn-outline{display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid var(--border);text-decoration:none}
  .btn-outline:focus{outline:3px solid var(--accent);outline-offset:2px}

  footer{margin:36px 0 8px;border-top:1px solid var(--border);padding-top:16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;color:var(--muted)}
  .foot-links{display:flex;gap:14px;flex-wrap:wrap}
  .madeby{display:flex;align-items:center;gap:8px}
  .madeby svg{width:20px;height:20px;display:block}

  .contact-btn {
    display:inline-block; margin-top:12px; padding:10px 20px; border-radius:12px;
    background:var(--gold); color:#000; font-weight:600; text-decoration:none;
    border:1px solid var(--border); transition:background .2s ease;
  }
  .contact-btn:hover { background:var(--accent); color:#000; }

  @media(max-width:480px){ .hero-logo{max-width:200px} }

  /* ---------- Lightbox (DSGVO-freundlich, keine externen Libs) ---------- */
  #kundenmoment .preview {
    width:100%; height:auto; display:block;
    border-radius:var(--radius);
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    cursor:zoom-in;
  }
  .lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 9999;
  }
  .lightbox.open { visibility: visible; opacity: 1; }
  .lightbox__img {
    max-width: min(92vw,1400px);
    max-height: 90vh;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
  }
  .lightbox__close {
    position:absolute; top:20px; right:28px;
    font-size:30px; font-weight:800; line-height:1;
    color:#fff; cursor:pointer; user-select:none;
    background:transparent; border:0; padding:6px 10px; border-radius:10px;
  }
  .lightbox__close:focus { outline:3px solid var(--accent); outline-offset: 2px; }
  .lightbox__caption {
    position:absolute; left:24px; bottom:18px; right:24px;
    color:#ddd; font-size:14px; text-align:center;
  }

#kundenmoment .preview {
  width:100%;
  max-width:600px;   /* Vorschau begrenzt */
  max-height:600px;
  height:auto;
  display:block;
  margin:0 auto;
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  cursor:zoom-in;
}

.consent-btn {
  background: var(--gold);
  color: #000;
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease;
}
.consent-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}
.btn {
  display:inline-block; 
  margin:12px 16px 16px 16px; 
  padding:12px 16px;
  border-radius:12px; 
  border:1px solid var(--gold); 
  background:var(--gold);
  color:#0d0d0d; 
  text-decoration:none; 
  font-weight:700; 
  text-align:center;
  transition: background .2s ease, border-color .2s ease;
}

.btn:hover {
  background: var(--accent);  /* dein Türkis #5ce1e6 */
  border-color: var(--accent);
  color:#000;
}

/* Calendly-Embed: Light/Dark sauber trennen */

.theme-light .cec-card {
  background: #ffffff;
  border-color: #e6e6e6;
}

.theme-light .cec-frame-wrap {
  background: #ffffff;
  border-color: #e6e6e6;
}

.theme-light #calendly-frame {
  background: #ffffff !important;
}

.theme-dark .cec-card {
  background: #141414;
  border-color: #2a2a2a;
}

.theme-dark .cec-frame-wrap {
  background: #0f0f0f;
  border-color: #2a2a2a;
}

.theme-dark #calendly-frame {
  background: #111111 !important;
}

.gallery-teaser{
  display:grid; gap:12px;
  grid-template-columns: 1fr 1fr 1fr;
  align-items:stretch;
}
.gallery-teaser .tile{
  display:block; overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--border); box-shadow:var(--shadow); cursor:zoom-in;
}
.gallery-teaser img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.gallery-teaser .tile:hover img{transform:scale(1.03)}
.gallery-teaser .tall{grid-row: span 2}
.gallery-teaser .cta-wrap{grid-column:1/-1; text-align:center; margin-top:4px}
@media(max-width:900px){
  .gallery-teaser{grid-template-columns:1fr 1fr}
  .gallery-teaser .tall{grid-row:auto}
}
@media(max-width:560px){
  .gallery-teaser{grid-template-columns:1fr}
}

.profile.mini {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px auto 14px;
  max-width: 520px;
  text-align: left;
}

.profile-link {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.avatar {
  border-radius: 50%;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: block;
}

.profile .meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile .meta strong {
  color: var(--text);
}

.map-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0;
}

.map-wrap iframe {
  width: 100%;
  height: 400px;
  display: block;
  border: none;
  border-radius: var(--radius);
}

/* Hinweis + Button zentrieren */
.map-note {
  text-align: center;
  padding: 12px 0 16px;
}

/* Mobile-Optimierung: Karte ausblenden, Button anzeigen */
@media (max-width: 640px) {
  .map-wrap iframe {
    display: none;
  }
  .map-note {
    display: block;
  }
}

/* Desktop: Button nur als Zusatz, Karte bleibt sichtbar */
@media (min-width: 641px) {
  .map-note {
    display: none;
  }
}
/* === Social Media Section === */

.sm-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
}

.sm-media {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.sm-media img,
.sm-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sm-cap {
  margin: 0.5rem 0 0;
  text-align: center;
}

/* --- Buttons --- */
.sm-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 14px;
}

.sm-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  background: #121212;
  box-shadow: var(--shadow);
  transition: all 0.25s ease;
}

.sm-btn:hover {
  transform: translateY(-1px);
}

.sm-btn svg {
  width: 18px;
  height: 18px;
  fill: #d6b85a;
  flex: 0 0 18px;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .sm-grid {
    grid-template-columns: 1fr;
  }
}
/* === Made by Link === */
.madeby a {
  color: #5ce1e6;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.25s ease;
}

.madeby a:hover {
  color: #d6b85a; /* optional: gold hover für edlen Effekt */
  text-decoration: underline;
}
.madeby {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

background-image: url("assets/img/hero.jpg");

}
/* === Social Media Section (Refined) === */

.sm-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.sm-media {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(92, 225, 230, 0.15);
  background: #0f0f0f;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sm-media:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(92, 225, 230, 0.3);
}

.sm-media img,
.sm-media video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;  /* <<< verhindert, dass das Bild zu groß wird */
  object-fit: cover;
}

.sm-cap {
  margin-top: 10px;
  text-align: center;
  font-size: 0.95rem;
  color: #d6b85a;
  letter-spacing: 0.2px;
}

/* mobile fix */
@media (max-width: 900px) {
  .sm-grid {
    grid-template-columns: 1fr;
  }

  .sm-media img,
  .sm-media video {
    max-height: 300px;
  }
}
/* === Social Media Cards im Kundenmoment-Stil === */
.media-card {
  text-align: center;
  margin-bottom: 16px;
}

.media-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #0f0f0f;
  max-width: 980px;
  margin: 0 auto;
}

/* Video skaliert responsiv, ohne Cropping */
.media-box video {
  display: block;
  width: 100%;
  height: auto;
}

/* Bilder vollständig anzeigen (kein Beschnitt) */
.media-contained {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 520px; /* verhindert Übergröße am Desktop */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Caption */
.sm-cap {
  margin-top: 10px;
  text-align: center;
}

/* Mobile: etwas kleiner halten */
@media (max-width: 640px) {
  .media-contained { max-height: 360px; }
}

/* === Simple Lightbox Styles === */
.lightbox {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 9999;
}

.lightbox.open {
  opacity: 1;
  pointer-events: all;
}

.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 0 25px rgba(92, 225, 230, 0.3);
  object-fit: contain;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 9999;
}

.lightbox.open {
  opacity: 1;
  pointer-events: all;
}

.lightbox img {
  max-width: 95%;
  max-height: 95%;
  border-radius: 8px;
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
}