:root {
  --primary:#0a0a0a;
  --secondary:#ffffff;
  --accent:#b8a47a;
  --muted:#6f6f6f;
}

* { box-sizing:border-box; }

html, body {
  margin:0;
  padding:0;
  background:var(--secondary);
  color:var(--primary);
}

body {
  font-family: Verdana, Geneva, sans-serif;
  line-height:1.6;
}


/* Typografie */
h1,h2,h3,h4 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  margin:0 0 .6rem;
  line-height:1.25;
}
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
p { margin:.25rem 0 1rem; }

a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }

.container { width:min(1120px, 90vw); margin:0 auto; }

/* ========= GLOBAL MEDIA SAFEGUARDS ========= */
img { max-width:100%; height:auto; display:block; }

/* HEADER */
.site-header {
  position:sticky; top:0; background:#fff; border-bottom:1px solid #eee; z-index:100;
}
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 0; }
.brand img { display:block; }

.site-nav { display:flex; align-items:center; gap:1.2rem; background:transparent !important; border:0; box-shadow:none; }
.site-nav a, .submenu-toggle { padding:.4rem .2rem; background:transparent; border:none; color:var(--primary); }

/* Buttons */
.site-nav .btn { padding:.5rem .9rem; border:1px solid var(--primary); border-radius:999px; }
.nav-toggle { display:none; background:transparent; border:1px solid #ddd; padding:.5rem .7rem; border-radius:8px; }

/* HERO */
.hero { padding:9vh 0 7vh; }
.hero .lede { font-size:1.15rem; color:var(--muted); max-width:58ch; }
.hero-cta { display:flex; gap:.8rem; margin-top:1rem; }

.hero-has-image { position:relative; overflow:hidden; }
.hero-has-image .hero-image { margin:0; padding:0; }
.hero-has-image .hero-image img {
  width:100%;
  height: clamp(260px, 40vw, 480px);
  object-fit: cover;
  object-position: center;
}

.btn { display:inline-block; background:var(--primary); color:var(--secondary); border:none; padding:.8rem 1.1rem; border-radius:999px; cursor:pointer; }
.btn.ghost { background:transparent; color:var(--primary); border:1px solid var(--primary); }

/* SECTION */
.section { padding:6vh 0; border-top:1px solid #f0f0f0; }

/* Split-Layout */
.split { display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center; }
@media (max-width:980px){ .split { grid-template-columns:1fr; } }

/* Medien-Container .kv */
.kv { width:100%; height:auto; background:none; border:0; border-radius:20px; }
.kv p { color:var(--muted); }
.kv img { width:100%; aspect-ratio: 4 / 3; object-fit:cover; object-position:center; border-radius:12px; }

/* Karten & Grids */
.card-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2rem; }
.card { border:1px solid #eee; border-radius:14px; overflow:hidden; }
.card img { width:100%; height:360px; object-fit:cover; display:block; }
@media (max-width:820px){ .card img { height:300px; } }
@media (max-width:640px){ .card img { height:420px; object-position:50% 15%; } }
.card .pad { padding:1rem; }

/* Badges & Texte */
.badge { display:inline-block; background:var(--primary); color:#fff; padding:.2rem .6rem; border-radius:999px; font-size:.75rem; letter-spacing:.08em; }
.muted { color:var(--muted); }
.quote { border-left:3px solid var(--primary); padding-left:1rem; font-style:italic; }

/* FOOTER */
.site-footer { padding:4vh 0 3vh; border-top:1px solid #eee; margin-top:6vh; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:1.2rem; }
.fine-print { border-top:1px dashed #eee; margin-top:1rem; padding-top:1rem; color:var(--muted); font-size:.9rem; }
.logo-mark { filter:grayscale(1); opacity:.9; }

/* COOKIE */
.cookie { position:fixed; inset:auto 0 0 0; background:#111; color:#fff; display:none; }
.cookie-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0; }

/* FORM */
.form { display:grid; gap:.8rem; max-width:640px; }
.input, textarea { width:100%; padding:.9rem 1rem; border:1px solid #e6e6e6; border-radius:10px; font:inherit; }
textarea { min-height:140px; }
.input:focus, textarea:focus { outline:2px solid #000; border-color:#000; }

/* TABLE */
.table { width:100%; border-collapse:collapse; }
.table th, .table td { padding:.6rem .6rem; border-bottom:1px solid #eee; text-align:left; }

/* RESPONSIVE */
@media (max-width:980px) {
  .card-grid { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}

/* MOBILE MENU */
@media (max-width:640px) {
  .site-nav {
    display:none; position:absolute; right:5vw; top:64px; background:#fff !important;
    border:0 !important; box-shadow:none !important; padding:0; border-radius:0;
    flex-direction:column; gap:.6rem;
  }
  .site-nav.open { display:flex; }
  .nav-toggle { display:inline-block; }
  .card-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .hero { padding:6vh 0; }
  .site-nav a, .submenu-toggle { padding:.6rem 0; }
}

/* SOCIAL */
.social { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.social a { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid #e6e6e6; border-radius:999px; }
.social a:hover { border-color:#000; text-decoration:none; }

/* BACK TO TOP */
#to-top {
  position:fixed; right:18px; bottom:18px; display:none; border:none; padding:.8rem; border-radius:999px;
  background:var(--primary); color:#fff; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.12); z-index:120;
}
#to-top.show { display:inline-flex; }
#to-top:focus { outline:2px solid #000; }

/* SKIP LINK */
.skip-link { position:absolute; left:-999px; top:0; padding:.6rem .9rem; background:#000; color:#fff; border-radius:8px; }
.skip-link:focus { left:12px; top:12px; z-index:200; }

/* MODAL */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; z-index:150; }
.modal-backdrop.open { display:flex; }
.modal { width:min(680px, 92vw); background:#fff; border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.25); border:1px solid #eaeaea; }

/* SUBMENU */
.menu-item { position:relative; display:inline-block; overflow:visible; }
.submenu {
  position:absolute; top:calc(100% + 0.4rem); left:50%; transform:translateX(-50%);
  background:#fff; border:1px solid #eee; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.08);
  padding:.6rem; min-width:320px; z-index:120; column-count:2; column-gap:1rem; display:none;
}
.submenu a { display:block; padding:.6rem 1rem; white-space:nowrap; break-inside:avoid; }
.submenu a:hover { background:#f8f8f8; }
.has-submenu.open > .submenu { display:block !important; }
.has-submenu.open > .submenu-toggle::after { transform:rotate(180deg); }

/* MOBILE SUBMENU */
@media (max-width:720px) {
  .submenu { position:static; transform:none; box-shadow:none; border:none; column-count:1; padding:0 0 0 1rem; min-width:0; }
}

/* Einheitliches Design für Menülinks & Buttons */
.site-nav a, .submenu-toggle { font:inherit; font-size:1rem; color:var(--primary); background:transparent; border:none; padding:.4rem .2rem; cursor:pointer; line-height:1.4; }
.submenu-toggle:hover { text-decoration: underline; }

/* Normale Fotogalerie */
.photo-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:.8rem; margin-top:.8rem; }
.photo-grid figure { margin:0; border:1px solid #eee; border-radius:12px; overflow:hidden; background:#fff; }
.photo-grid img { width:100%; height:220px; object-fit:cover; display:block; }
.photo-grid figcaption { padding:.5rem .7rem; font-size:.9rem; color:var(--muted); }
@media (max-width:980px){ .photo-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:640px){
  .photo-grid { grid-template-columns:1fr; }
  .photo-grid img { height:260px; }
}

/* Unsere Bereiche (Default) */
.card img.cover {
  width:100%; height:420px; object-fit:cover; object-position:50% 15%;
  display:block; border-bottom:1px solid #eee; border-top-left-radius:14px; border-top-right-radius:14px;
}
@media (max-width:640px){ .card img.cover { height:520px; object-position:50% 10%; } }

/* ================================================================== */
/* ================= PELZ · FINAL MOBILE OVERRIDE =================== */
/* Greift nur innerhalb <main class="pelz-page"> auf max 640px        */
/* ================================================================== */
@media (max-width:640px){
  main.pelz-page .kv img,
  main.pelz-page .card img,
  main.pelz-page .card img.cover,
  main.pelz-page .photo-grid img {
    width:100% !important;
    height: clamp(300px, 58vw, 420px) !important;
    object-fit:cover !important;
    object-position: 50% 12% !important; /* leicht top-fokussiert (Köpfe sichtbar) */
    display:block !important;
  }
  main.pelz-page .card,
  main.pelz-page .photo-grid figure { overflow:hidden !important; }
  /* Inline-Attribute neutralisieren (iOS/Safari) */
  main.pelz-page img[width], main.pelz-page img[height] { height: clamp(300px, 58vw, 420px) !important; }
}

/* ===== MOBILE FORCE CENTER (global, ohne Scope) ===== */
@media (max-width: 900px){
  .kv img,
  .card img,
  .card img.cover,
  .photo-grid img {
    width: 100% !important;
    height: clamp(320px, 58vw, 540px) !important;
    object-fit: cover !important;
    object-position: 50% 14% !important; /* Köpfe leicht priorisieren */
    display: block !important;
  }

  /* Container schneiden sauber ab */
  .kv,
  .card,
  .photo-grid figure { overflow: hidden !important; }
}

/* TEAM GRID – 4 Bilder pro Reihe */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

/* Kachel */
.team-tile {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: #f5f5f5;
}

.team-tile img {
  width: 100%;
  aspect-ratio: 1 / 1;   /* macht das Bild perfekt quadratisch */
  object-fit: cover;      /* schneidet sauber zu */
  filter: grayscale(100%);
  border-radius: 6px;
}


/* Schönes Overlay für Name */
.team-tile figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: .6rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #ffffff;
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
}

@media (max-width: 900px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}
.brand-images img {
  width: 100%;
  height: 300px;          /* oder jede andere fixe Höhe */
  object-fit: cover;      /* sorgt dafür, dass alle Bilder gleich aussehen */
  border-radius: 12px;    /* optional */
}

.brand-images-2 img {
  width: 50%;
  height: 300px;          /* oder jede andere fixe Höhe */
  object-fit: cover;      /* sorgt dafür, dass alle Bilder gleich aussehen */
  border-radius: 12px;    /* optional */
}

.logo {
  width:80px
}

.logo-2 {
  width:200px
}

.logo-3 {
  width:50px
}

.logo-4 {
  width:130px
}

.logo-5 {
  width:110px
}

/* Mobile: 1 Column Layout */
@media (max-width: 768px) {
  .brand-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }

  .brand-card {
    padding: 1.2rem !important;
  }

  .brand-images img {
    width: 50% !important; /* zwei Bilder nebeneinander bleibt erhalten */
  }

  /* Wenn Bilder zu gross wirken → auf 100% stellen */
  /* .brand-images img { width: 100% !important; } */
}