/* Standardränder entfernen */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000; /* damit keine weißen Ränder sichtbar sind */
}

header {
  background: #000000;
  padding: 1rem;
}

main {
  background: #000;   /* schwarz */
  color: #fff;        /* weiße Schrift */
  padding: 2rem;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Grundwerte – mobile first */
* { box-sizing: border-box; }

header { padding: 16px; }

/* Logo */
.logo {
  display: block;
  margin: 0 auto 16px auto;
  width: 100px;
  height: auto;
  max-width: 80vw;
}

/* Hero-Bild */
.hero-img {
  display: block;
  margin: 16px auto 0 auto;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Tablet */
@media (min-width: 768px) {
  header { padding: 24px; }
  .logo { width: 180px; margin-bottom: 24px; }
  .hero-img { width: 80%; }
}

/* Desktop */
@media (min-width: 1200px) {
  .logo { width: 200px; }
  .hero-img { width: 70%; }
}

/* ===== Formular ===== */
.order-form {
  max-width: 400px;
  margin: 2rem auto;
  padding: 1.5rem;
  border: 1px solid #444;
  border-radius: 8px;
  background: #000;
  color: #fff;
}
.order-form label {
  display: block;
  margin-top: 1rem;
  font-weight: bold;
  color: #fff;
}
.order-form input,
.order-form select {
  width: 100%;
  padding: 0.6rem;
  margin-top: 0.3rem;
  border: 1px solid #666;
  border-radius: 4px;
  font-size: 1rem;
  background: #111;
  color: #fff;
}
.order-form input::placeholder { color: #bbb; }
.order-form button {
  margin-top: 1.5rem;
  width: 100%;
  padding: 0.8rem;
  background: #ffcc00;
  border: none;
  border-radius: 4px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  color: #000;
}
.order-form button:hover { background: #e6b800; }

/* Button-Link */
.btn-primary {
  display: block;
  max-width: 400px;
  margin: 1rem auto 0;
  text-align: center;
  text-decoration: none;
  padding: 0.8rem;
  background: #ffcc00;
  border-radius: 4px;
  font-size: 1.1rem;
  font-weight: bold;
  color: #000;
}
.btn-primary:hover { background: #e6b800; }

/* Links nur auf der Kontaktseite gelb */
body.kontakt .about-fritz a {
  color: #ffd600;
  text-decoration: none; /* kein Unterstrich */
  font-weight: 600;
}

body.kontakt .about-fritz a:hover {
  color: #fff;              /* Weiß beim Hover */
  text-decoration: underline;
}


/* ===== Hero-Video ===== */
.hero-video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
}

/* ===== Fonts ===== */
@font-face {
  font-family: 'Rushcaps';
  src: url('/assets/fonts/Rushcaps-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
.rushcaps {
  font-family: 'Rushcaps', 'Helvetica Neue', Arial, sans-serif;
  text-align: center;
  font-size: 6.5rem;
  line-height: 1.1;
  color: #ffd600;
  margin-top: 0rem;
  margin-bottom: 1.5rem;
}

/* ===== Texte ===== */
.form-title {
  text-align: center;
  font-size: 1.6rem;
  margin-top: 0.2rem;
  margin-bottom: 0.5rem;
  color: #ffcc00;
}
.form-title .cta-line {
  font-size: 1.4rem;
  font-weight: normal;
  color: #ffffff;
}
.about-fritz {
  max-width: 800px;
  margin: 4rem auto;
  padding: 0 1rem;
  color: #fff;
  font-size: 1.1rem;
  line-height: 1.4;
}
.about-fritz h2 {
  color: #ffd600;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-size: 1.6rem;
  font-weight: bold;
}
.success {
  color: #00ff88;
  text-align: center;
  font-weight: bold;
  margin: 1rem 0;
}
.img-600 {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
  margin: 16px auto;
}

/* ===== Slideshow ===== */
:root {
  --slide-pad: clamp(6px, 1.5vw, 12px);
  --radius: 18px;
  --btn-size: clamp(40px, 7vw, 56px);
  --btn-bg: rgba(0,0,0,.45);
  --btn-bg-hover: rgba(0,0,0,.65);
}
.slideshow {
  width: min(100%, 800px);
  max-width: 800px;
  margin: 24px auto;
  padding-inline: 12px;
  box-sizing: border-box;
}
.slide-frame {
  position: relative;
  width: 100%;
  background: #0b0b0b;
  border-radius: var(--radius);
  padding: var(--slide-pad);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset,
              0 20px 60px rgba(0,0,0,.5);
}
.slide { width: 100%; }
.slide img, #slideImage {
  display: block;
  width: 100%;
  height: auto;
  max-height: 85vh;
  object-fit: contain;
  border-radius: calc(var(--radius) - var(--slide-pad));
  transition: opacity 1s ease;
}
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--btn-size);
  height: var(--btn-size);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: var(--btn-bg);
  color: #fff;
  cursor: pointer;
  z-index: 5;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.nav-prev { left: calc(var(--slide-pad) + 8px); }
.nav-next { right: calc(var(--slide-pad) + 8px); }
.nav-btn:hover {
  background: var(--btn-bg-hover);
  border-color: rgba(255,255,255,.4);
  transform: translateY(-50%) scale(1.04);
}
@media (min-width: 1200px) {
  .slide img, #slideImage { max-height: 90vh; }
}
/* ===== Ende Slideshow ===== */

/* === FRITZ Hamburger – Mobile FIRST (harte Overrides) === */
body .burger{
  position: fixed !important;
  top: 12px !important; left: 12px !important;
  width: 64px !important; height: 64px !important;
  border: 0 !important; border-radius: 9999px !important;
  background: #ffd600 !important;
  display: flex !important; flex-direction: column !important;
  justify-content: center !important; align-items: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.25) !important;
  z-index: 1001 !important;
}
body .burger span{
  width: 36px !important; height: 5px !important;
  margin: 5px 0 !important;
  background: #000 !important; border-radius: 999px !important;
  transition: transform .25s ease, opacity .2s ease, width .2s ease !important;
}

/* X-Animation */
body.menu-open .burger span:nth-child(1){ transform: translateY(7px) rotate(45deg) !important; }
body.menu-open .burger span:nth-child(2){ opacity: 0 !important; width: 0 !important; }
body.menu-open .burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg) !important; }

/* Menüpanel links – groß & luftig auf Mobile */
body .mobile-menu{
  position: fixed !important; inset: 0 auto 0 0 !important;
  width: min(88vw, 420px) !important; height: 100vh !important;
  background: #000 !important; color: #fff !important;
  border-right: 1px solid #222 !important;
  box-shadow: 20px 0 60px rgba(0,0,0,.6) !important;
  transform: translateX(-100%) !important;
  transition: transform .28s ease !important;
  padding: calc(160px + env(safe-area-inset-top)) 44px 44px !important;
  z-index: 1000 !important;
}
body .mobile-menu a{
  display: block !important;
  font-size: clamp(20px, 5.2vw, 28px) !important;
  line-height: 1.25 !important;
  padding: 24px 0 !important;
  text-decoration: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}
body .mobile-menu::before{
  content: "" !important;
  position: absolute !important; left: 0 !important; top: 0 !important; right: 0 !important;
  height: 96px !important; background: #ffd600 !important;
  z-index: -1 !important;
}

/* Overlay */
body .menu-backdrop{
  position: fixed !important; inset: 0 !important;
  background: rgba(0,0,0,.45) !important;
  opacity: 0 !important; transition: opacity .25s ease !important;
  z-index: 999 !important;
}
body.menu-open .mobile-menu{ transform: translateX(0) !important; }
body.menu-open .menu-backdrop{ opacity: 1 !important; }

/* Desktop schrumpfen */
@media (min-width: 768px){
  body .burger{ top: 24px !important; left: 150px !important; width: 44px !important; height: 44px !important; }
  body .burger span{ width: 22px !important; height: 4px !important; margin: 3px 0 !important; }
  body .mobile-menu{ width: min(80vw, 320px) !important; padding: 120px 32px 32px !important; }
  body .mobile-menu a{ font-size: 18px !important; padding: 16px 0 !important; font-weight: 600 !important; }
  body .mobile-menu::before{ height: 72px !important; }
}


/* ===== Footer ===== */
.site-footer {
  background: #ffd600;
  color: #000;
  text-align: center;
  padding: 1rem 0;
  font-size: 0.9rem;
  margin-top: 3rem;
}
.site-footer p {
  margin: 0.2rem 0;
  font-weight: 400;
  font-size: 0.8rem;
  opacity: 0.8;
  margin-top: 0.8rem;
}
.site-footer-nav { margin-top: 0.3rem; }
.site-footer-nav a {
  color: #000;
  margin: 0 8px;
  text-decoration: none;
  font-weight: 600;
}
.site-footer-nav a:hover { text-decoration: underline; }


/* ===== Bestellen: Produktzeilen & Mengen ===== */
.order-products {
  border: 0;
  padding: 0;
  margin: 0 0 12px;
}
.order-products legend {
  font-weight: 700;
  color: #ffd600;
  margin-bottom: 8px;
}

.order-products .prod-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #222;
}
.order-products .prod-row:last-child {
  border-bottom: 0;
}

.order-products .prod-meta {
  flex: 1 1 auto;
}
.order-products .prod-name {
  color: #fff;
  font-weight: 700;
  line-height: 1.2;
}
.order-products .prod-note {
  color: #bbb;
  font-size: 0.95rem;
  line-height: 1.35;
  margin-top: 2px;
}

.order-products .prod-qty {
  flex: 0 0 auto;
  min-width: 110px;
  text-align: right;
}
.order-products .prod-qty input[type="number"] {
  width: 96px;
  padding: 0.5rem 0.6rem;
  border: 1px solid #666;
  border-radius: 8px;
  background: #111;
  color: #fff;
  font-size: 1rem;
  text-align: center;
}
.order-products .prod-qty input[type="number"]:focus {
  outline: none;
  border-color: #ffd600;
  box-shadow: 0 0 0 3px rgba(255, 214, 0, 0.2);
}

/* Spinner (Pfeile) bei Zahlfeldern ausblenden */
.order-products .prod-qty input::-webkit-outer-spin-button,
.order-products .prod-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.order-products .prod-qty input[type="number"] {
  -moz-appearance: textfield;
}

@media (min-width: 768px) {
  .order-products .prod-qty input[type="number"] {
    width: 120px;
    font-size: 1.05rem;
  }
}

/* ===== Live-Zusammenfassung ===== */
.order-summary {
  margin: 16px 0 0;
  padding: 12px 14px;
  background: #0b0b0b;
  border: 1px solid #333;
  border-radius: 8px;
}
.order-summary .order-total {
  margin-top: 6px;
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffd600;
}
.order-summary .order-hint {
  margin-top: 6px;
  font-size: 0.9rem;
  color: #aaa;
}

/* Screenreader-only (wird in bestellen.php für die versteckten Labels verwendet) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


#plzort { margin-bottom: 16px; }

.post-order-hint{
  max-width: 800px;
  margin: 10px auto 12px;
  color: #bbb;
  font-size: 0.95rem;
  text-align: center;
  line-height: 1.4;
}