.card,.dropdown-content{box-shadow:var(--shadow);overflow:hidden}
.dropdown:hover .dropdown-content,form label,img{display:block}
#cart-icon,.btn,.dropbtn,.modal .close,.remove-item,summary{cursor:pointer}
*{box-sizing:border-box}
body,html{height:100%}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 'Nunito Sans',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";background:var(--bg);color:var(--text);padding-top:80px}
::selection{background:color-mix(in srgb,var(--brand) 35%,transparent);color:#fff}
a{color:inherit;text-decoration:none}
a.link{color:var(--brand);font-weight:600}
img{max-width:100%;height:auto}
.container{width:min(1100px,92%);margin-inline:auto}
[id]{scroll-margin-top:84px}
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.78rem 1rem;border-radius:12px;font-weight:700;border:1px solid transparent;transition:transform .2s,background .2s,color .2s,border .2s}
.grid,.nav{gap:1.2rem}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand);color:#fff}
.btn-outline{background:0 0;border-color:var(--border);color:var(--text)}
.chip{display:inline-block;padding:.28rem .6rem;border-radius:999px;background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand);border:1px solid color-mix(in srgb,var(--brand) 35%,var(--border));font-size:.85rem}
.hero .visual,.muted,footer .muted{color:var(--muted)}
.grid{display:grid}
.brand,.nav{display:flex;align-items:center}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px}
.card-pad{padding:1.2rem}
.section{padding:3.5rem 0}
.section h2{font-size:clamp(1.4rem,1.2rem + 1vw,2rem);margin:0 0 .75rem}
.section p{margin:.25rem 0 .75rem}
.lead{font-size:clamp(1.1rem, 1rem + .4vw, 1.35rem)}
.spacer{height:1px;background:var(--border);margin:2rem 0}
.brand-text{color:var(--brand);font-weight:700}
#cart-items li span,.cart-box,.footer-section,.metaphor-card p,.navlinks a{color:var(--text)}
.section-alt{background:var(--accent)}
header{position:fixed;top:0;left:0;width:100%;z-index:1000;background:linear-gradient(to right,color-mix(in srgb,var(--brand) 12%,var(--bg)),var(--bg));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid color-mix(in srgb,var(--brand) 20%,var(--border));box-shadow:0 6px 16px rgba(0,0,0,.08);transition:background .3s,box-shadow .3s}
.nav{justify-content:space-between;padding:.6rem 0}
.dropbtn,.navlinks a{padding:.9rem 1.2rem;border-radius:12px;font-size:1.08rem;font-weight:600}
.brand{gap:.8rem}
.brand img{height:clamp(70px,6vw,100px);width:auto}
#cart-icon-mobile,.brand .title,.nav-toggle{display:none}
.navlinks{display:flex;align-items:center;gap:1rem;flex-wrap:nowrap;white-space:nowrap}
.navlinks a{position:relative;letter-spacing:.3px;transition:.25s}
.navlinks a::after{content:"";position:absolute;left:12px;bottom:.6rem;width:0%;height:2px;background:var(--brand);transition:width .25s}
.navlinks a:hover{color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,transparent)}
.navlinks a:hover::after{width:60%}
@media (min-width:821px){.navlinks a:hover{color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,var(--bg));box-shadow:0 2px 6px rgba(0,0,0,.08)}}
.dropdown{position:relative;display:inline-block}
.dropbtn{transition:background .2s}
.dropdown-content{display:none;position:absolute;background-color:var(--card);min-width:220px;border:1px solid var(--border);border-radius:12px;z-index:100}
.dropdown-content a{display:block;padding:.8rem 1.1rem;text-decoration:none;color:var(--text);font-weight:600;transition:background .2s,color .2s}
.dropdown-content a:hover{background:color-mix(in srgb,var(--brand) 15%,var(--card));color:var(--brand)}
.hero{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:2rem;padding:2.2rem 0 1.2rem}
.hero h1{font-size:clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem);line-height:1.3;margin:0 0 .1rem}
.hero p{margin:0 0 1.1rem}
.hero .visual{min-height:260px;border-radius:18px;display:grid;place-items:center;text-align:center;padding:1rem;background:0 0!important;border:none!important}
#cart-icon,.product .price{color:#e44a00;font-weight:700}
@media (max-width:920px){.hero{grid-template-columns:1fr}}
.product{background:var(--card);border-radius:12px;box-shadow:0 4px 10px rgba(0,0,0,.08);display:flex;flex-direction:column;justify-content:space-between}
.product img{border-radius:12px;border:1px solid var(--border)}
.product .price{margin:.8rem 0}
#shop .price,#team .card-pad p.muted,.add-to-cart{margin-top:auto}
#shop .product,#team .card{display:flex;flex-direction:column;height:100%}
#shop .combo-images,#shop .product img{width:100%;height:220px;border-radius:12px 12px 0 0;background:#fff}
#shop .product img{object-fit:contain}
#shop .combo-images{display:flex;gap:.4rem;overflow:hidden}
#shop .combo-images img{flex:1 1 50%;height:100%;object-fit:contain;background:#fff;padding:.3rem;border-radius:8px}
#shop .card-pad{flex-grow:1;display:flex;flex-direction:column}
#shop .card-pad h3,#shop .card-pad p{margin-bottom:.6rem}
#shop .price{font-weight:700;margin-bottom:.5rem}
#shop .card-pad a{align-self:stretch;text-align:center}
#metaphern .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:stretch}
.metaphor-card{display:flex;flex-direction:column;justify-content:space-between;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.2rem;box-shadow:var(--shadow);transition:transform .2s,border-color .2s}
#cart-overlay,.modal{top:0;left:0;height:100%;display:none;position:fixed;width:100%}
.metaphor-card:hover{transform:translateY(-3px);border-color:var(--brand)}
.metaphor-card h3{margin-top:0;font-size:1.15rem}
.metaphor-card p{flex-grow:1;margin:.6rem 0 1rem;font-size:.95rem}
.cart-box h3,.footer-section h4{color:var(--brand)}
.metaphor-card .btn{align-self:flex-start;margin-top:auto;background:var(--brand);color:#fff;border:none}
.cart-box,.modal-content{padding:2rem;border-radius:12px;box-shadow:var(--shadow)}
.cart-box .btn-primary:hover,.metaphor-card .btn:hover{background:color-mix(in srgb,var(--brand) 80%,#000)}
@media (max-width:1000px){#metaphern .grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:650px){#metaphern .grid{grid-template-columns:1fr}}
.modal{z-index:2000;overflow:auto;background:rgba(0,0,0,.6);padding:2rem}
.cart-box,.cart-box .btn,.modal-content,details,input,textarea{background:var(--card)}
.modal-content{margin:auto;max-width:600px;animation:.3s fadeIn}
.modal .close{float:right;font-size:1.6rem}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
#cart-overlay{background:rgba(0,0,0,.75);align-items:center;justify-content:center;z-index:1001}
.cart-box{width:90%;max-width:400px;border:1px solid var(--border)}
.cart-box h3{margin-top:0}
#cart-items{list-style:none;padding:0;margin:1rem 0}
#cart-items li{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem}
#cart-items img{width:40px;height:40px;object-fit:cover;border-radius:6px;box-shadow:0 2px 4px rgba(0,0,0,.1)}
.cart-total{font-weight:700;margin:1rem 0}
.remove-item{background:0 0;border:none;font-size:1rem;margin-left:.6rem;color:#c00;transition:color .2s}
.remove-item:hover{color:#900}
.cart-box .btn,footer,form label,input,textarea{color:var(--text)}
.cart-box .btn{border:1px solid var(--border);font-weight:600;padding:.7rem 1.1rem;border-radius:10px}
.cart-box .btn:hover{background:color-mix(in srgb,var(--brand) 12%,var(--card));border-color:var(--brand);color:var(--brand)}
.cart-box .btn-primary{background:var(--brand);color:#fff;border:none}
#cart-icon{position:fixed;top:20px;right:20px;background:#fff;padding:.7rem 1.2rem;border-radius:50px;font-size:1.2rem;box-shadow:0 4px 14px rgba(0,0,0,.3);border:2px solid #e44a00;z-index:1000}
#cart-count{background:#e44a00;color:#fff;padding:0 .55rem;border-radius:999px;margin-left:.4rem;font-size:.85rem;font-weight:700;box-shadow:0 0 0 2px #fff}
#team .card-pad{display:flex;flex-direction:column;flex-grow:1}
@media (max-width:820px){.nav-toggle,.navlinks{background:var(--card)}.nav{flex-direction:row;justify-content:space-between;align-items:center}.brand img{height:70px}.nav-toggle{display:inline-flex;align-items:center;justify-content:center;padding:.4rem .6rem;font-size:1.1rem;line-height:1;border-radius:8px;border:1px solid var(--border);color:var(--text);box-shadow:0 2px 6px rgba(0,0,0,.1);transition:background .2s,transform .2s}.nav-toggle:hover{background:color-mix(in srgb,var(--brand) 15%,var(--card));transform:scale(1.05)}.navlinks{position:absolute;top:100%;right:0;border:1px solid var(--border);border-radius:12px 0 0 12px;box-shadow:var(--shadow);flex-direction:column;align-items:flex-start;width:220px;display:none;padding:.5rem 0}.navlinks.open{display:flex}.navlinks a{padding:.9rem 1rem;width:100%;text-align:left}.dropdown-content{position:static;display:none;width:100%;background:0 0;box-shadow:none}.dropdown.open .dropdown-content{display:flex;flex-direction:column}.navlinks .dropdown-content a{padding-left:1.8rem;font-size:.95rem;background:color-mix(in srgb,var(--brand) 8%,transparent)}.navlinks .dropdown-content a:hover{background:color-mix(in srgb,var(--brand) 20%,transparent)}#cart-icon{display:none}#cart-icon-mobile{display:inline-block;background:#fff;color:#e44a00;padding:.4rem .8rem;border-radius:50px;cursor:pointer;font-weight:700;font-size:1rem;margin-right:.6rem;border:2px solid #e44a00;box-shadow:0 3px 8px rgba(0,0,0,.25)}#cart-count-mobile{background:#e44a00;color:#fff;padding:0 .45rem;border-radius:999px;margin-left:.3rem;font-size:.8rem;font-weight:700;box-shadow:0 0 0 2px #fff}#team .card img{max-width:260px;margin:0 auto;height:auto}}
.team-more{background-color:var(--brand);color:#fff}
.team-more:hover{background-color:color-mix(in srgb,var(--brand) 80%,#000)}
footer{border-top:1px solid var(--border);padding:2rem 0 3rem}
form label{font-weight:600;margin-bottom:.3rem}
input,textarea{width:100%;padding:.7rem;border-radius:8px;border:1px solid var(--border);font:inherit;resize:vertical}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--text) 60%,var(--bg))}
input:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 30%,transparent)}
details{border:1px solid var(--border);border-radius:12px;padding:.9rem 1rem}
details+details{margin-top:.6rem}
summary{font-weight:700}
:root {
  --brand: #ff4400; /* deine neue Markenfarbe */
  --bg: #ffffff;
  --text: #111111;
  --muted: #444444;
  --card: #ffffff;
  --border: #d1d5db;
  --accent: #fdf2ec;
  --shadow: 0 10px 20px rgba(0,0,0,.06), 0 6px 6px rgba(0,0,0,.03);
}
@media (prefers-color-scheme:dark){:root{--bg:#0b0b0f;--text:#f3f4f6;--muted:#aaaaaa;--card:#1a1a1f;--border:#3a3a45;--accent:color-mix(in srgb, var(--brand) 15%, #0b0b0f);--shadow:0 10px 20px rgba(0,0,0,.45),0 6px 6px rgba(0,0,0,.3)}header{background:linear-gradient(to right,color-mix(in srgb,var(--brand) 10%,var(--card)),var(--card));border-bottom:1px solid var(--border)}.cart-box{background:#1e1e24;color:#f5f5f5;border:1px solid #333}.cart-box h3{color:var(--brand)}#cart-items li span{color:#f0f0f0}.cart-box .btn{background:#2c2f36;color:#f5f5f5;border:1px solid #444}.cart-box .btn-primary{background:var(--brand);color:#fff}.cart-box .btn-primary:hover{background:#a83200}details{border:1px solid #3a3f48;background:#1f1f25}}
.footer-section {
    display: none;
    margin-top: 1rem;
    max-width: 700px;
    font-size: 0.9em;
    line-height: 1.6;
    color: var(--text-secondary);
  }
  .footer-section h4 {
    margin-bottom: .5rem;
    font-size: 1.1em;
    color: var(--text-primary);
  }
/* Karten gleich hoch */
#workshops .grid,
#team .grid {
  align-items: stretch;
}

/* Workshops: Button unten */
#workshops .card-pad {
  display: flex;
  flex-direction: column;
}
#workshops .card-pad > div:last-child {
  margin-top: auto;
}

/* Teamkarten: Button unten */
.team-card {
  display: flex;
  flex-direction: column;
}
.team-card .card-pad {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.team-card .team-more {
  margin-top: auto;
}
/* Verhindert horizontales Scrollen */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Mobile-Fix */
@media (max-width: 820px) {
  .container,
  .grid,
  .card,
  .card-pad,
  .section {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .navlinks {
    flex-wrap: wrap;        /* Links umbrechen */
    white-space: normal;    /* statt nowrap */
  }

  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr !important; /* alles einspaltig */
  }

  img {
    max-width: 100%;
    height: auto;
  }
}
/* Standard: 2 Spalten nebeneinander */
#coaching .grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: stretch; /* gleiche Höhe */
}

/* Karten immer gleich hoch */
#coaching .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#coaching .card-pad {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

#coaching .card-pad > div:last-child {
  margin-top: auto; /* Button unten */
}

/* Auf Smartphone: 1 Spalte */
@media (max-width: 820px) {
  #coaching .grid-2 {
    grid-template-columns: 1fr !important;
  }
}
/* Gleiche Box für Bild und Video */
.service-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;  /* alles gleich hoch */
  border-radius: 12px;
  overflow: hidden;
  margin: 1rem 0;
}

/* Bild */
.service-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Bild füllt die Box, ohne verzerrt zu wirken */
  display: block;
}

/* Video */
.service-media lite-youtube,
.service-media iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
/* --- Preis + Warenkorb: EIN Balken, überall gleich --- */
#shop .product { display:flex; flex-direction:column; height:100%; }
#shop .product .card-pad { display:flex; flex-direction:column; flex-grow:1; }

/* Der klickbare Balken am unteren Rand der Karte */
#shop .product .price-cta {
  margin-top: auto;                      /* Balken steht immer ganz unten */
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: #111;                      /* sehr hoher Kontrast */
  color: #fff;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  border: 2px solid #e44a00;            /* Markenakzent */
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: background .2s, transform .15s, box-shadow .2s;
}
#shop .product .price-cta:hover {
  background: #151515;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,.3);
}

/* Preis links im Balken */
#shop .product .price-cta .price {
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1;
  color: #fff;                           /* weiß auf schwarz = top Kontrast */
}

/* Warenkorb-Symbol rechts (kleines orangenes Badge) */
#shop .product .price-cta .icon {
  display:inline-flex; align-items:center; justify-content:center;
  width: 38px; height: 38px;
  border-radius: 8px;
  background: #e44a00;
  color: #fff;                           /* weiß auf orange = sehr gut lesbar */
  font-size: 1.05rem;
  line-height: 1;
}

/* Kombipaket-Bilder nebeneinander, gleich hoch */
#shop .combo-images {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; height: 220px;
}
#shop .combo-images img {
  width:100%; height:100%; object-fit:contain; background:#fff; border-radius:8px; padding:.3rem; display:block;
}

/* Warenkorb-Overlay bleibt wie gehabt (Kontrast stark) */
#cart-overlay { display:none; background:rgba(0,0,0,.85); position:fixed; inset:0;
  align-items:center; justify-content:center; padding:2rem; z-index:2000; }
.cart-box { background:#fff; border:2px solid #e44a00; border-radius:16px; box-shadow:0 8px 32px rgba(0,0,0,.35);
  max-width:420px; width:100%; padding:1.5rem; color:#111; }
.cart-box h3 { color:#e44a00; font-weight:800; margin-top:0; }
#cart-items { list-style:none; padding:0; margin:1rem 0; }
#cart-items li { display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:.8rem; font-weight:600; color:#222; }
#cart-items img { width:50px; height:50px; object-fit:cover; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.cart-total { font-size:1.3rem; font-weight:800; color:#fff; background:#e44a00; padding:.6rem 1rem; border-radius:8px; text-align:right; margin-top:1rem; }
#checkout-btn { background:#e44a00; color:#fff; font-weight:700; border:none; width:100%; margin-top:1rem; }
#checkout-btn:hover { background:#c53d00; }
#close-cart { background:#f3f3f3; color:#111; border:1px solid #ccc; margin-top:.5rem; width:100%; }
.remove-item { background:none; border:none; font-size:1.2rem; color:#c00; cursor:pointer; transition:color .2s, transform .2s; }
.remove-item:hover { color:#900; transform:scale(1.2); }

/* Optional: Dark Mode Feinschliff */
@media (prefers-color-scheme: dark){
  #shop .product .price-cta{ background:#0f0f12; }
  #shop .product .price-cta:hover{ background:#141419; }
}
/* Warenkorb Overlay */
#cart-overlay {
  display: none;
  background: rgba(0, 0, 0, 0.85);
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 2000;
}

/* Warenkorb Box kleiner + scrollbar bei langen Inhalten */
.cart-box {
  background: #fff;
  border: 2px solid #e44a00;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  max-width: 420px;      /* maximale Breite */
  width: 90%;            /* auf kleinen Screens */
  max-height: 90vh;      /* Höhe auf 90% Viewport */
  overflow-y: auto;      /* scrollen, falls Inhalt länger */
  padding: 1rem;
}

/* Buttons im Warenkorb */
.cart-box button {
  width: 100%;
  margin-top: 0.5rem;
}
/* Warenkorb-Items */
#cart-items li {
  display: grid;
  grid-template-columns: 60px 1fr auto; /* Bild | Name | Preis */
  grid-template-rows: auto auto;        /* zweite Zeile für Papierkorb */
  gap: 0.4rem 0.6rem;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
}

/* Bild */
#cart-items img {
  grid-row: span 2;   /* über beide Reihen */
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Produktname */
#cart-items span:first-of-type {
  font-weight: 600;
  color: #222;
}

/* Preis */
#cart-items span:last-of-type {
  font-weight: 700;
  color: #e44a00;
  text-align: right;
}

/* Papierkorb-Button */
.remove-item {
  grid-column: 2 / span 2;   /* unter Name + Preis */
  justify-self: end;
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #c00;
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
}

.remove-item:hover {
  color: #900;
  transform: scale(1.2);
}
/* Nunito Sans – lokale Einbindung */

/* 400 Regular */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/nunito-sans-v19-latin-regular.woff2') format('woff2');
}

/* 600 SemiBold */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/nunito-sans-v19-latin-600.woff2') format('woff2');
}

/* 700 Bold */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/nunito-sans-v19-latin-700.woff2') format('woff2');
}
.footer-section {
  display: none; /* Alle Footer-Texte erstmal unsichtbar */
  margin-top: 1rem;
}

.footer-section.active {
  display: block; /* Nur die aktive Section sichtbar */
}

/* Smartphone: nur Überschriften zentrieren, sonst nichts ändern */
@media (max-width: 650px) {
  /* Vorherige "mehr Abstand links/rechts" zurücksetzen */
  body,
  .section,
  .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Hero-Rand zurücksetzen */
  .hero {
    padding-inline: 0 !important;
  }

  /* Nur Überschriften zentrieren */
  .hero h1,
  .section h2 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
  }
}

/* ===== Header immer weiß – unabhängig vom Modus ===== */
header {
  background: #ffffff !important;   /* immer weißer Hintergrund */
  border-bottom: 1px solid #d1d5db; /* dezente graue Linie unten */
  backdrop-filter: none !important; /* kein Blur / kein Farbmix */
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* sanfter Schatten */
}

/* Im Dark Mode ebenfalls weiß erzwingen */
@media (prefers-color-scheme: dark) {
  header {
    background: #ffffff !important;
    color: #111111 !important;
    border-bottom: 1px solid #d1d5db;
  }

  /* Optional: Menütexte dunkler machen, damit sie lesbar bleiben */
  .navlinks a,
  .brand .title,
  .dropbtn {
    color: #111111 !important;
  }

  /* Hover-Effekt leicht grau statt farbig */
  .navlinks a:hover,
  .dropbtn:hover {
    background: #f5f5f5 !important;
    color: #000 !important;
  }
}

/* Vollbreites (randloses) Bild direkt unter dem Header – ohne Überlauf */
.full-bleed {
  position: relative;
  width: 100%;
  overflow: hidden;            /* schneidet evtl. Ränder ab */
  background: var(--bg);       /* falls Bild kurz kleiner rendert, kein Farbsprung */
}

.full-bleed picture,
.full-bleed img {
  display: block;
  width: 100%;                 /* wichtig: NICHT 100vw */
  height: auto;                /* natürliche Proportionen */
  max-height: 80vh;            /* Desktop: bis zu 80% der Fensterhöhe */
  object-fit: cover;           /* füllt den Bereich ohne Verzerrung */
  object-position: center top; /* Fokus: oben (z. B. Köpfe) */
}

/* Mobile / Tablet */
@media (max-width: 900px) {
  .full-bleed img {
    max-height: 55vh;          /* etwas flacher auf kleineren Screens */
    object-position: center 20%;
  }
}

/* Global: horizontalen Überlauf hart verhindern */
html, body {
  overflow-x: hidden;
}

/* ============================
   Burger Button – schlicht & fett
   ============================ */
.nav-toggle {
  background: none;       /* keine Fläche */
  border: none;           /* keine Umrandung */
  color: inherit;         /* übernimmt Textfarbe des Headers */
  font-size: 2.2rem;      /* etwas grösser und dicker */
  font-weight: 700;       /* fette Linien */
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  line-height: 1;
  display: none;          /* Standard: unsichtbar */
}

/* Optional: beim Hover leicht transparent */
.nav-toggle:hover {
  opacity: 0.75;
}

/* Entfernt evtl. alte Button-Stile aus .btn */
.btn.nav-toggle,
.btn-outline.nav-toggle {
  all: unset;
  cursor: pointer;
  font-size: 2.2rem;
  font-weight: 700;
  color: inherit;
}

/* Nur auf Smartphones (bis 820px) sichtbar */
@media (max-width: 820px) {
  .nav-toggle {
    display: inline-flex; /* sichtbar und klickbar */
    align-items: center;
    justify-content: center;
  }
}
/* Desktop/Tablet: Burger garantiert ausblenden */
@media (min-width: 821px) {
  #navToggle {               /* <button id="navToggle" ...> */
    display: none !important;
  }
}

/* Smartphone: Burger garantiert einblenden */
@media (max-width: 820px) {
  #navToggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* ===========================================
   Shop & Warenkorb: im Dark-Mode hell erzwingen
   =========================================== */
@media (prefers-color-scheme: dark) {

  /* Overlay bleibt dunkel, Box bleibt hell */
  #cart-overlay { background: rgba(0,0,0,.85) !important; }

  .cart-box {
    background: #fff !important;
    color: #111 !important;
    border: 2px solid #e44a00 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.25) !important;
    color-scheme: light; /* helle Form-Controls im Dark-Mode */
  }

  .cart-box h3 { color: #e44a00 !important; }

  #cart-items li {
    color: #222 !important;
    border-bottom: 1px solid #eee !important;
  }

  #cart-items span:last-of-type { color: #e44a00 !important; }

  .cart-total {
    background: #e44a00 !important;
    color: #fff !important;
  }

  #checkout-btn {
    background: #e44a00 !important;
    color: #fff !important;
    border: none !important;
  }
  #checkout-btn:hover { background: #c53d00 !important; }

  #close-cart {
    background: #f3f3f3 !important;
    color: #111 !important;
    border: 1px solid #ccc !important;
  }

  .remove-item { color: #c00 !important; }
  .remove-item:hover { color: #900 !important; }

  /* WICHTIG: Preis-CTA-Balken im Shop nicht abdunkeln */
  #shop .product .price-cta { background: #111 !important; }
  #shop .product .price-cta .price,
  #shop .product .price-cta .icon { color: #fff !important; }

  /* Kombi-Bilder weiterhin auf weißem Grund */
  #shop .combo-images img { background: #fff !important; }
}

/* ============================
   Formulare im Dark-Mode hell
   ============================ */
@media (prefers-color-scheme: dark) {
  /* alle Eingabefelder hell erzwingen (Kontakt + Warenkorb) */
  .cart-box input,
  .cart-box textarea,
  #order-form input,
  #order-form textarea,
  #nachricht input,
  #nachricht textarea,
  form input,
  form textarea {
    background: #fff !important;
    color: #111 !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    color-scheme: light; /* helle System-Controls */
  }

  /* Placeholder gut lesbar */
  .cart-box input::placeholder,
  .cart-box textarea::placeholder,
  #nachricht input::placeholder,
  #nachricht textarea::placeholder,
  form input::placeholder,
  form textarea::placeholder {
    color: #666 !important;
  }

  /* Fokus-Styling wie im Hellmodus */
  .cart-box input:focus,
  .cart-box textarea:focus,
  #nachricht input:focus,
  #nachricht textarea:focus,
  form input:focus,
  form textarea:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent) !important;
    outline: none !important;
  }

  /* Labels dunkel lassen */
  form label { color: #111 !important; }
}

/* Safari/Chrome: Autofill-Hintergrund wieder hell machen */
input:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-text-fill-color: #111 !important;
  transition: background-color 9999s ease-out 0s;
  caret-color: #111;
}

/* 1) Logo minimal nach links rücken */
header .brand {
  margin-left: -12px !important;   /* feinjustieren: z.B. -8px / -16px */
}

/* 2) Auf Mobil wieder neutral lassen */
@media (max-width: 768px) {
  header .brand {
    margin-left: 0 !important;
  }
}
/* ============================
   Dark-Mode: Menüs auch hell
   ============================ */
@media (prefers-color-scheme: dark) {
  /* Desktop-Dropdown hell */
  .dropdown-content {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #d1d5db !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.08) !important;
  }

  .dropdown-content a {
    color: #111111 !important;
  }

  .dropdown-content a:hover {
    background: #f5f5f5 !important;
    color: #000 !important;
  }

  /* Links im Header-Menü dunkel, passend zum weißen Header */
  .navlinks a,
  .dropbtn,
  .brand .title {
    color: #111111 !important;
  }

  .navlinks a:hover,
  .dropbtn:hover {
    background: #f5f5f5 !important;
    color: #000 !important;
  }
}

/* Mobile: ausgeklapptes Menü-Panel + Dropdowns ebenfalls weiß */
@media (prefers-color-scheme: dark) and (max-width: 820px) {
  /* Das Panel, das rechts aufklappt */
  .navlinks {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #d1d5db !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.08) !important;
  }

  /* Mobile-Dropdown innerhalb des Panels */
  .navlinks .dropdown-content {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #d1d5db !important;
    box-shadow: none !important; /* bleibt flach im Panel */
  }

  /* Links im Panel */
  .navlinks a {
    color: #111111 !important;
    background: transparent !important; /* überschreibt die brand-Mixe */
  }

  .navlinks .dropdown-content a {
    background: transparent !important;
  }

  .navlinks a:hover,
  .navlinks .dropdown-content a:hover {
    background: #f5f5f5 !important;
    color: #000 !important;
  }
}

/* ============================
   Footer-Bereich im Branding-Orange
   ============================ */
footer {
  background: #ff4400;          /* Branding-Hintergrund */
  color: #ffffff;               /* weiße Schrift */
  padding: 2rem 0;
}

footer a {
  color: #ffffff !important;    /* Links ebenfalls weiß */
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
}

footer a:hover {
  opacity: 0.8;                 /* dezenter Hover-Effekt */
}

/* Überschriften innerhalb der Footer-Sections */
footer h4 {
  color: #ffffff;
  font-weight: 700;
}

/* Footer-Texte */
.footer-section {
  color: #ffffff;
}

/* Die oberen kleinen Links (Impressum, Datenschutz etc.) */
footer .muted.footer-toggle {
  color: #ffffff !important;
  font-weight: 600;
}

/* Abstand und Zentrierung auf kleinen Bildschirmen */
@media (max-width: 650px) {
  footer div[style*="flex-direction:column"] {
    align-items: center !important;
    text-align: center;
  }
  footer .muted.footer-toggle {
    font-size: 1rem;
  }
}
/* Copyright-Zeile im Footer */
footer small {
  display: block;
  margin-top: 1rem;
  color: #ffffff !important;      /* Text in Weiß */
  text-align: center;             /* mittig platzieren */
  font-size: 0.9rem;
  opacity: 0.9;                   /* leicht abgesetzt vom restlichen Text */
}

/* Der markierte Brand-Name im Copyright bleibt weiß */
footer small span {
  color: #ffffff !important;
  font-weight: 700;
}