/* ============================================================
   Fliese & Feinschliff — style.css
   Design style: warm_friendly (warm colors, rounded corners, soft shadows)
   Brand: Primary #1F2937, Secondary #D97706, Accent #F3F4F6
   Fonts: Trebuchet MS (display), Verdana (body)
   Mobile-first, ONLY Flexbox layouts
   ============================================================ */

/* -------------------------------
   CSS Reset / Normalize Basics
--------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding-left: 1.1rem; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid rgba(217,119,6,0.55); outline-offset: 2px; border-radius: 8px; }

/* -------------------------------
   Theme Variables
--------------------------------*/
:root {
  --color-primary: #1F2937; /* slate-800 */
  --color-secondary: #D97706; /* amber-600 */
  --color-accent: #F3F4F6; /* gray-100 */
  --color-warm-50: #FFFBEB; /* warm background tint */
  --color-warm-100: #FEF3C7;
  --color-warm-200: #FDE68A;
  --color-neutral-700: #374151;
  --color-neutral-600: #4B5563;
  --color-neutral-500: #6B7280;
  --white: #FFFFFF;
  --black: #111827;

  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 18px;

  --shadow-s: 0 2px 8px rgba(17,24,39,0.08);
  --shadow-m: 0 6px 18px rgba(17,24,39,0.10);
  --shadow-l: 0 10px 28px rgba(17,24,39,0.12);

  --space-8: 8px;  --space-12: 12px;  --space-16: 16px;  --space-20: 20px;
  --space-24: 24px; --space-30: 30px; --space-32: 32px; --space-40: 40px;
  --space-48: 48px; --space-60: 60px; --space-80: 80px;
}

/* -------------------------------
   Base Typography & Body
--------------------------------*/
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: var(--color-primary, #1F2937);
  background: var(--color-warm-50, #FFFBEB);
  line-height: 1.65;
}
h1, h2, h3, h4 {
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  color: var(--color-primary, #1F2937);
  line-height: 1.2;
}
h1 { font-size: 32px; letter-spacing: -0.2px; }
h2 { font-size: 26px; margin-top: var(--space-8); }
h3 { font-size: 20px; color: var(--color-neutral-700); }

p { font-size: 16px; color: var(--color-primary); }
.subheadline { color: var(--color-neutral-600); font-size: 18px; }
.lead-in { color: var(--color-neutral-700); font-size: 18px; }

/* Links */
a { color: var(--color-secondary, #D97706); }
a:hover { text-decoration: underline; }

/* -------------------------------
   Containers & Layout (Flex-only)
--------------------------------*/
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-16);
  display: flex;            /* Flex container (mobile-first) */
  flex-direction: column;   /* Stack by default */
  gap: var(--space-20);
}
.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
section { margin-bottom: var(--space-60); }

/* MANDATORY PATTERNS */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; }
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Reusable helpers */
.stack-20 { display: flex; flex-direction: column; gap: 20px; }
.row { display: flex; flex-wrap: wrap; gap: var(--space-20); }

/* -------------------------------
   Header & Navigation
--------------------------------*/
header {
  background: var(--white);
  box-shadow: var(--shadow-s);
  position: relative;
  z-index: 50;
}
header .container {
  flex-direction: row;       /* header in a row */
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}
.logo img { height: 40px; width: auto; }

.main-nav { display: none; align-items: center; gap: var(--space-20); }
.main-nav a {
  font-size: 15px;
  color: var(--color-primary);
  padding: 8px 10px;
  border-radius: var(--radius-s);
  transition: background-color .2s ease, color .2s ease;
}
.main-nav a:hover { background: var(--color-accent); color: var(--color-primary); text-decoration: none; }

.header-cta { display: none; align-items: center; gap: var(--space-12); }

.mobile-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--color-warm-100);
  color: var(--color-primary);
  box-shadow: var(--shadow-s);
  transition: transform .2s ease, background-color .2s ease;
}
.mobile-menu-toggle:hover { transform: translateY(-1px); background: var(--color-warm-200); }

/* -------------------------------
   Mobile Menu (Off-canvas)
--------------------------------*/
.mobile-menu {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(17,24,39,0.45);
  transform: translateX(100%);
  transition: transform .35s ease, opacity .35s ease;
  opacity: 0;
  display: flex; /* container */
  flex-direction: row; /* overlay + panel */
}
.mobile-menu.active { transform: translateX(0); opacity: 1; }

/* Sliding panel using flex */
.mobile-menu .mobile-nav {
  margin-left: auto; /* push to right */
  background: var(--white);
  width: 85%; max-width: 360px; height: 100%;
  padding: var(--space-24);
  display: flex; flex-direction: column; gap: var(--space-12);
  box-shadow: var(--shadow-l);
}
.mobile-menu-close {
  align-self: flex-start;
  margin: var(--space-16);
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--color-accent);
  color: var(--color-primary);
}
.mobile-nav a {
  display: flex; align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--color-primary);
  font-size: 16px;
  transition: background-color .2s ease, transform .2s ease;
}
.mobile-nav a:hover { background: var(--color-warm-100); transform: translateX(2px); text-decoration: none; }

/* Prevent scroll when menu open (add class via JS) */
body.menu-open { overflow: hidden; }

/* -------------------------------
   Hero Section
--------------------------------*/
.hero {
  background: var(--color-warm-100);
  border-bottom: 1px solid rgba(31,41,55,0.06);
}
.hero .container { padding-top: var(--space-32); padding-bottom: var(--space-32); }
.hero h1 { font-size: 30px; }
.hero .subheadline { max-width: 60ch; }

/* Trust badges */
.trust-badges ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 1rem; }
.trust-badges li { color: var(--color-neutral-700); }

/* -------------------------------
   Buttons
--------------------------------*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 14px;
  border: 2px solid transparent;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  transition: transform .15s ease, box-shadow .2s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
  box-shadow: var(--shadow-s);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-m); text-decoration: none; }

.btn.primary {
  background: var(--color-secondary);
  color: #fff;
}
.btn.primary:hover { background: #b86505; }
.btn.primary:active { transform: translateY(0); }

.btn.secondary {
  background: #fff;
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.btn.secondary:hover { background: var(--color-warm-50); }

.cta-group { display: flex; flex-wrap: wrap; gap: var(--space-12); }

/* -------------------------------
   Text Sections & Lists
--------------------------------*/
.text-section { display: flex; flex-direction: column; gap: var(--space-12); }
.text-section ul, .content-wrapper > ul, .content-wrapper > ol { display: flex; flex-direction: column; gap: 8px; }
.text-section li, .content-wrapper li { color: var(--color-neutral-700); }

.step-list { display: flex; flex-direction: column; gap: 8px; padding-left: 1.2rem; }
.step-list li { background: var(--white); border: 1px solid rgba(31,41,55,0.08); padding: 10px 12px; border-radius: 12px; box-shadow: var(--shadow-s); }

/* -------------------------------
   Cards & Testimonials
--------------------------------*/
.card {
  background: var(--white);
  border: 1px solid rgba(31,41,55,0.08);
  border-radius: var(--radius-m);
  padding: var(--space-20);
  box-shadow: var(--shadow-s);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); }

.testimonial-card {
  background: #FFF7ED; /* very warm light */
  border: 1px solid #FDE68A; /* warm border for separation */
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  color: var(--color-primary);
}
.testimonial-card p { margin: 0; }
.testimonial-card strong { color: var(--color-primary); }

/* Ensure readable testimonials on all backgrounds */
section .testimonial-card { color: #1F2937; background-color: #FFF7ED; }

/* -------------------------------
   Footer
--------------------------------*/
footer {
  background: var(--white);
  border-top: 1px solid rgba(31,41,55,0.08);
}
footer .container { padding-top: var(--space-32); padding-bottom: var(--space-32); }
footer .content-wrapper {
  display: flex; flex-wrap: wrap; gap: var(--space-24);
}
.footer-brand, .footer-nav, .footer-legal, .footer-contact {
  display: flex; flex-direction: column; gap: var(--space-12);
  background: var(--color-accent);
  padding: var(--space-16);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  flex: 1 1 260px; /* flex, not grid */
}
footer a { color: var(--color-primary); }
footer h3 { font-size: 18px; color: var(--color-primary); }

/* -------------------------------
   Utility & Media elements
--------------------------------*/
hr { border: none; border-top: 1px solid rgba(31,41,55,0.1); margin: var(--space-24) 0; }

/* Images inside text lines (icons) */
.text-section img { display: inline-block; vertical-align: middle; margin-right: 6px; height: 18px; width: 18px; }

/* -------------------------------
   Cookie Consent Banner & Modal
--------------------------------*/
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
  background: var(--white);
  border-top: 3px solid var(--color-secondary);
  box-shadow: 0 -6px 18px rgba(17,24,39,0.12);
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--space-16);
  transform: translateY(100%);
  opacity: 0; transition: transform .35s ease, opacity .35s ease;
}
.cookie-banner.show { transform: translateY(0); opacity: 1; }
.cookie-banner .cookie-content { display: flex; flex-direction: column; gap: var(--space-12); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.cookie-actions .btn { min-width: 150px; }
.cookie-actions .btn.reject { background: #fff; color: var(--color-primary); border-color: var(--color-neutral-500); }
.cookie-actions .btn.settings { background: var(--color-accent); color: var(--color-primary); }

/* Modal overlay */
.cookie-modal {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(17,24,39,0.55);
  display: none; align-items: center; justify-content: center;
}
.cookie-modal.open { display: flex; }
.cookie-modal .modal-card {
  background: var(--white);
  width: 92%; max-width: 720px;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-l);
  display: flex; flex-direction: column; gap: var(--space-20);
  padding: var(--space-24);
}
.cookie-modal .modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal .modal-body { display: flex; flex-direction: column; gap: var(--space-12); }
.cookie-modal .modal-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); justify-content: flex-end; }

/* Fake toggle switch using only CSS */
.toggle { display: flex; align-items: center; gap: 10px; }
.toggle input { appearance: none; width: 42px; height: 24px; border-radius: 999px; background: #E5E7EB; position: relative; outline: none; transition: background-color .2s ease; }
.toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-s); transition: transform .2s ease; }
.toggle input:checked { background: var(--color-secondary); }
.toggle input:checked::after { transform: translateX(18px); }
.toggle label { color: var(--color-primary); font-size: 15px; }

/* -------------------------------
   Forms (if any appear later)
--------------------------------*/
input[type="text"], input[type="email"], textarea {
  width: 100%; border: 1px solid rgba(31,41,55,0.15); border-radius: 12px; padding: 12px 14px; background: #fff; box-shadow: var(--shadow-s) inset; }
input:focus, textarea:focus { outline: 3px solid rgba(217,119,6,0.3); }

/* -------------------------------
   Responsive (Mobile-first)
--------------------------------*/
@media (min-width: 768px) {
  /* Show desktop nav */
  .main-nav { display: flex; }
  .header-cta { display: flex; }
  .mobile-menu-toggle { display: none; }

  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  .hero h1 { font-size: 44px; }

  /* Text-image and grid-like flex layouts */
  .text-image-section { flex-direction: row; }

  /* Footer layout aligns in rows */
  footer .content-wrapper { flex-direction: row; }
}

@media (min-width: 1024px) {
  .container { padding-left: var(--space-20); padding-right: var(--space-20); }
  .hero .container { padding-top: var(--space-48); padding-bottom: var(--space-48); }
}

/* -------------------------------
   Page-specific Enhancements
--------------------------------*/
/* Breadcrumbs */
nav[aria-label="Brotkrumen"] { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--color-neutral-600); }
nav[aria-label="Brotkrumen"] a { color: var(--color-secondary); }

/* Numbers and facts lists */
.content-wrapper > ul { background: var(--white); border: 1px solid rgba(31,41,55,0.08); padding: var(--space-16); border-radius: 12px; box-shadow: var(--shadow-s); }

/* Contact list with icons */
.content-wrapper ul li img { margin-right: 6px; }
.content-wrapper ul li a { text-decoration: underline; }

/* Footer copyright row */
footer .content-wrapper:last-child { background: transparent; box-shadow: none; padding: 0; }
footer .content-wrapper:last-child p { color: var(--color-neutral-600); }

/* -------------------------------
   Micro-interactions & Animations
--------------------------------*/
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes slideInRight {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.hero .content-wrapper > * { animation: slideUp .45s ease both; }

/* -------------------------------
   Accessibility & States
--------------------------------*/
.btn:focus-visible { outline: 3px solid rgba(217,119,6,0.55); outline-offset: 2px; }
.main-nav a:focus-visible { background: var(--color-accent); }
.mobile-nav a:focus-visible { background: var(--color-warm-100); }

/* -------------------------------
   Additional Warm Friendly UI Blocks
--------------------------------*/
.badge { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; font-size: 12px; background: var(--color-warm-100); color: var(--color-primary); }

/* Optional generic notice */
.notice {
  display: flex; align-items: center; gap: 10px;
  background: #FFF7ED; border: 1px solid #FDE68A; color: var(--color-primary);
  padding: 12px 14px; border-radius: 12px; box-shadow: var(--shadow-s);
}

/* Ensure no overlapping and generous breathing room */
section .content-wrapper > * + * { margin-top: 0; }

/* -------------------------------
   Ensuring Flex-only layouts
--------------------------------*/
/* No grid or columns used. All layout groups declared as display:flex above. */

/* End of style.css */