:root{
  --brand:#cf102d;
  --sage:#a9b8a9;
  --ink:#1f2937;
  --muted:#6b7280;
  --paper:#fff;
}

/* Basics */
*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{margin:0;font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--paper)}
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap}
.container{max-width:1100px;margin:auto;padding:1rem}
.muted{color:var(--muted)}

/* Header + Nav */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:10}
.site-header .container{display:flex;align-items:center;gap:.75rem}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit}
nav .nav-link{margin-right:.75rem;text-decoration:none;color:#333}

/* Buttons */
.btn{display:inline-block;border:2px solid var(--ink);padding:.6rem 1rem;border-radius:.6rem;text-decoration:none;font-weight:600}
.btn:focus{outline:3px solid #000;outline-offset:2px}
.btn.primary{border-color:var(--brand);background:var(--brand);color:#fff}
.btn.primary:hover{filter:brightness(.95)}
.btn.ghost{background:#fff;border:1.5px solid #e5e7eb;color:#333}

/* Layout helpers */
.center{text-align:center}
.grid-2{display:grid;grid-template-columns:1fr;gap:1.2rem}
.grid-3{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:800px){.grid-2{grid-template-columns:1.1fr .9fr}.grid-3{grid-template-columns:repeat(3,1fr)}}

/* Hero */
.hero{background:linear-gradient(180deg,#fff,#f6f9f6)}
.hero h1{font-size:clamp(1.6rem,2.2vw+1.2rem,2.6rem);margin:.2rem 0}
.sub{font-size:1.05rem;opacity:.9}
.microtrust{font-size:.95rem;color:#444}
.hero-img img{width:100%;border-radius:1rem;box-shadow:0 10px 25px rgba(0,0,0,.08)}

/* About */
.about{background:#fff}
.badges{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:1rem 0;list-style:none}
.badges li{background:#eef2ee;border:1px solid #dde7dd;padding:.35rem .6rem;border-radius:999px}

/* Rezepte */
.recipes{background:#fafafa}
.grid-cards{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:720px){.grid-cards{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid #eee;border-radius:1rem;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.04)}

/* >>> Ergänzungen für Bild oben + Label darunter <<< */
.card .card-link{display:block;text-decoration:none;color:inherit}
.card img{
  width:100%;
  /* behält ein sauberes Kachelformat – Bild wird zugeschnitten, nicht verzerrt */
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}
.card h3{
  margin:.6rem 0 .8rem;
  text-align:center;
  font-size:1.05rem;
}

/* Warum TM7 – 2-Spalten-Vergleich */
.why{background:#fff}
.why-points{display:grid;gap:.4rem;padding:0;margin:1rem 0 1.2rem;list-style:none}
.why .compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:12px}
.why .compare .col{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:18px 18px 12px;box-shadow:0 4px 18px rgba(0,0,0,.04)}
.why .compare h3{font-size:1.15rem;margin:0 0 6px;display:flex;align-items:center;gap:.5rem}
.why .compare .bad h3::before{content:"✕";font-weight:700;color:#9ca3af}
.why .compare .good h3::before{content:"✓";font-weight:700;color:var(--brand)}
.why .compare .list{list-style:none;margin:8px 0 0;padding:0}
.why .compare .list li{padding:10px 0;border-top:1px dashed #eef1f4}
.why .compare .list li:first-child{border-top:0}
.why .compare .aspect{display:block;font-weight:600;color:var(--ink);margin-bottom:2px}
.why .mini-cta{margin-top:10px;text-align:left}

/* Show/Workshops */
.show .tile{background:#fff;border:1px solid #eee;border-radius:.75rem;padding:1rem}

/* Testimonials + Kommentare */
.testimonials .quotes{display:grid;gap:1rem}
blockquote{margin:0;padding:1rem;border-left:4px solid var(--sage);background:#f8faf8;border-radius:.5rem}
.comment-form .form{display:grid;gap:.6rem}
.form input[type=text],
.form input[type=tel],
.form input[type=number],
.form input[type=datetime-local],
.form textarea{width:100%;padding:.6rem;border:1px solid #ccc;border-radius:.5rem}
.form .hp{position:absolute;left:-5000px}
.help{font-size:.85rem;color:#666}
.notice{padding:.6rem .8rem;border-radius:.5rem}
.notice.success{background:#e9f7ee;border:1px solid #bfe3c9}
.notice.error{background:#fdecea;border:1px solid #f5c2c0}

/* Kontakt */
.contact-card{background:#fff;border:1px solid #eee;border-radius:1rem;padding:1rem}
.contact .row{display:flex;gap:.6rem;flex-wrap:wrap}

/* Footer */
.site-footer{border-top:1px solid #eee;background:#fff}
.site-footer .foot{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;justify-content:space-between}
.site-footer .link{margin-right:.6rem;color:#333;text-decoration:none}
.site-footer .link.subtle{font-size:12px;color:#9ca3af;text-decoration:none}
.site-footer .link.subtle:hover{color:#6b7280;text-decoration:underline}

/* Social-Badges im Footer (Gradient etc.) */
.site-footer [aria-label="Soziale Medien"]{display:flex;gap:.5rem;flex-wrap:wrap}
.site-footer [aria-label="Soziale Medien"] a{display:inline-block;padding:.45rem .75rem;border-radius:999px;font-weight:600;color:#fff;text-decoration:none}
.site-footer a[href*="instagram.com"]{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.site-footer a[href*="tiktok.com"]{background:#000;color:#fff;border:1px solid #111}
.site-footer a[href*="facebook.com"]{background:#1877F2}
.site-footer [aria-label="Soziale Medien"] a:hover{filter:brightness(1.08)}

/* FAQ Heading */
.faq-overline{margin:1rem 0 .25rem;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;color:#6b7280}

/* Modal (nur dialog#bookingModal verwenden) */
dialog#bookingModal{border:none;padding:0;border-radius:24px;overflow:hidden;width:min(860px,92vw)}
dialog#bookingModal::backdrop{background:rgba(8,12,24,.55)}
#bookingForm{background:#fff;padding:20px}
#bookingForm .modal-head{padding:4px 0 12px;border-bottom:1px solid #f0f2f5;margin-bottom:8px}
#bookingForm h3{margin:0 0 4px;font-size:1.6rem}
#bookingForm .sub{margin:0;color:#6b7280}
#bookingForm label{display:block;font-weight:600;margin:12px 0 6px}
#bookingForm input[type="text"],
#bookingForm input[type="tel"],
#bookingForm input[type="datetime-local"],
#bookingForm input[type="number"],
#bookingForm textarea{width:100%;padding:12px 14px;border:1.5px solid #e5e7eb;border-radius:12px;background:#f9fafb;font-size:1rem}
#bookingForm textarea{min-height:110px;resize:vertical}
#bookingForm input:focus,#bookingForm textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent)}
#bookingForm .grid-2,#bookingForm .grid-3{gap:12px}
#bookingForm .chk{display:flex;gap:10px;align-items:flex-start;margin-top:8px;color:var(--ink);font-weight:500}
#bookingForm .chk input{transform:scale(1.2);margin-top:3px}
#bookingForm .modal-foot{margin-top:14px;padding-top:10px;border-top:1px solid #f0f2f5}

/* Floating WhatsApp */
.wa-fab{position:fixed;right:16px;bottom:16px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;text-decoration:none;font-weight:700;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.wa-fab:focus{outline:3px solid #000;outline-offset:2px}

/* A11y focus */
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}