/* =========================
   FugeForm Meisterbetrieb - Professional Corporate CSS
   Style: professional_corporate (blue/gray palette, structured layout, business fonts)
   Mobile-first, Flexbox-only layouts, responsive, accessible
   ========================= */

/* ========== CSS RESET & NORMALIZE ========== */
* { box-sizing: border-box; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1.5; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote::before, blockquote::after, q::before, q::after { content: ""; }
table { border-collapse: collapse; border-spacing: 0; }
img { max-width: 100%; height: auto; display: block; }
input, button, textarea, select { font: inherit; }

/* ========== THEME VARIABLES (with fallbacks) ========== */
:root {
  --color-primary: #24343E;  /* deep blue-gray */
  --color-secondary: #C67028;/* warm terracotta */
  --color-accent: #F5F7FA;   /* light gray */
  --color-text: #1E2A32;     /* dark neutral */
  --color-muted: #6B7A86;    /* muted text */
  --color-border: #E2E8EF;   /* soft border */
  --color-white: #FFFFFF;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 6px 18px rgba(18, 26, 33, 0.08);
  --radius-sm: 8px;
  --radius-md: 12px;
}

/* ========== BASE TYPOGRAPHY ========== */
html { scroll-behavior: smooth; }
body {
  color: var(--color-text, #1E2A32);
  background: var(--color-white, #FFFFFF);
  font-family: Arial, "Trebuchet MS", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, sans-serif;
  font-size: 16px; /* mobile base */
}

h1, h2, h3, h4 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: var(--color-primary, #24343E); font-weight: 700; line-height: 1.2; }
h1 { font-size: 32px; margin-bottom: 16px; }
h2 { font-size: 24px; margin-bottom: 14px; }
h3 { font-size: 18px; margin-bottom: 10px; }
h4 { font-size: 16px; margin-bottom: 8px; }

p { margin-bottom: 12px; color: var(--color-text, #1E2A32); }
small { font-size: 12px; color: var(--color-muted, #6B7A86); }

/* Links */
a { color: var(--color-primary, #24343E); text-decoration: none; transition: color .2s ease, background-color .2s ease; }
a:hover { color: var(--color-secondary, #C67028); }
a:focus-visible { outline: 2px solid var(--color-secondary, #C67028); outline-offset: 2px; border-radius: 4px; }

/* ========== UTILITIES & LAYOUT PRIMITIVES ========== */
.container { display: flex; flex-direction: column; gap: 24px; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.content-wrapper { display: flex; flex-direction: column; gap: 16px; }

/* Mandatory spacing patterns */
.section { margin-bottom: 60px; padding: 40px 20px; display: flex; flex-direction: column; gap: 24px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; display: flex; flex-direction: column; gap: 12px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 20px; }
.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; background: #FFFFFF; color: #1E2A32; border: 1px solid var(--color-border); border-left: 4px solid var(--color-secondary); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 20px; }

/* Spacing helpers */
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.gap-20 { display: flex; gap: 20px; }
.hidden { display: none !important; }

/* ========== HEADER & NAVIGATION ========== */
header { background: #FFFFFF; border-bottom: 1px solid var(--color-border); position: relative; z-index: 1000; }
header .container { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
.logo img { height: 40px; width: auto; }

.main-nav { display: none; align-items: center; gap: 16px; }
.main-nav a { padding: 10px 8px; color: var(--color-primary); font-weight: 600; }
.main-nav a[aria-current="page"], .main-nav a:hover { color: var(--color-secondary); }
.main-nav .cta { background: var(--color-primary); color: #fff; padding: 10px 14px; border-radius: 8px; box-shadow: var(--shadow-sm); }
.main-nav .cta:hover { background: #1c2a32; }

.header-cta { display: none; }
.phone-link { display: flex; align-items: center; gap: 8px; color: var(--color-primary); font-weight: 600; }
.phone-link img { width: 18px; height: 18px; }

/* Mobile menu toggle */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-white); color: var(--color-primary); cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .15s ease; }
.mobile-menu-toggle:hover { background: var(--color-accent); }
.mobile-menu-toggle:active { transform: scale(0.98); }
.mobile-menu-toggle:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 2px; }

/* Mobile menu overlay */
.mobile-menu { position: fixed; inset: 0; background: rgba(36, 52, 62, 0.98); color: #FFFFFF; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 20px; transform: translateX(100%); transition: transform .3s ease; z-index: 2000; }
.mobile-menu[aria-hidden="false"], .mobile-menu.open, .mobile-menu.active { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: transparent; color: #FFFFFF; cursor: pointer; }
.mobile-menu-close:hover { background: rgba(255,255,255,0.08); }
.mobile-nav { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.mobile-nav a { display: flex; align-items: center; padding: 14px 12px; border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; color: #FFFFFF; font-size: 18px; }
.mobile-nav a:hover { background: rgba(255,255,255,0.1); }
.mobile-nav a[aria-current="page"] { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.25); }

/* Desktop nav breakpoint */
@media (min-width: 992px) {
  .main-nav { display: flex; }
  .header-cta { display: flex; }
  .mobile-menu-toggle { display: none; }
}

/* ========== HERO SECTION ========== */
.hero { background: var(--color-accent); border-bottom: 1px solid var(--color-border); }
.hero .container { padding-top: 28px; padding-bottom: 28px; }
.eyebrow { color: var(--color-secondary); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; font-size: 12px; }
.subheadline { color: var(--color-muted); font-size: 16px; }

.bullet-highlights { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.bullet-highlights li { display: flex; align-items: center; gap: 10px; padding-left: 0; }
.bullet-highlights li::before { content: "\2713"; color: var(--color-secondary); font-weight: 700; }

.trust-badges { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 10px; }
.trust-badges span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--color-border); background: #FFFFFF; border-radius: 999px; color: var(--color-primary); font-weight: 600; }
.trust-badges img { width: 16px; height: 16px; }

/* CTA GROUP */
.cta-group { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.btn-primary, .main-nav .cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 10px; border: 1px solid transparent; background: var(--color-primary); color: #FFFFFF; font-weight: 700; text-align: center; box-shadow: var(--shadow-sm); transition: transform .12s ease, background-color .2s ease, box-shadow .2s ease; }
.btn-primary:hover { background: #1d2a33; box-shadow: var(--shadow-md); }
.btn-primary:active { transform: translateY(1px); }

.btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--color-primary); background: #FFFFFF; color: var(--color-primary); font-weight: 700; transition: background-color .2s ease, color .2s ease, transform .12s ease; }
.btn-secondary:hover { background: var(--color-accent); color: var(--color-primary); }
.btn-secondary:active { transform: translateY(1px); }

/* ========== FEATURES, SERVICES, CASES ========== */
.feature-grid { display: flex; flex-wrap: wrap; gap: 24px; }
.feature-item img { width: 32px; height: 32px; }
.feature-item p { color: var(--color-muted); }

.certifications { display: flex; flex-direction: column; gap: 10px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 16px; }
.certifications ul { display: flex; flex-direction: column; gap: 6px; list-style: none; }
.certifications li { position: relative; padding-left: 18px; }
.certifications li::before { content: "•"; color: var(--color-secondary); position: absolute; left: 0; }

.service-cards { display: flex; flex-wrap: wrap; gap: 24px; }
.service-card { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 20px; box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .12s ease; }
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.service-link { color: var(--color-secondary); font-weight: 700; }
.service-link:hover { text-decoration: underline; }

.case-teasers { display: flex; flex-wrap: wrap; gap: 24px; }
.case-teasers article { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #FFFFFF; padding: 16px; box-shadow: var(--shadow-sm); }
.case-teasers .scope, .case-teasers .result { color: var(--color-muted); font-size: 14px; }

/* Project detail cases */
.case { display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 20px; background: #FFFFFF; box-shadow: var(--shadow-sm); }
.case .summary { color: var(--color-muted); }
.case .challenge, .case .solution, .case .results { display: flex; flex-direction: column; gap: 6px; border-left: 3px solid var(--color-accent); padding-left: 12px; }
.case blockquote { display: flex; padding: 14px; background: var(--color-accent); border-left: 4px solid var(--color-secondary); border-radius: var(--radius-sm); color: var(--color-primary); }

/* ========== LISTS, STEPS, FAQ, KPIs ========== */
.steps-list { display: flex; flex-direction: column; gap: 8px; counter-reset: step; }
.steps-list li { display: flex; gap: 10px; align-items: center; }
.steps-list li::before { counter-increment: step; content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 700; }

.quality { display: flex; flex-direction: column; gap: 8px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 16px; }
.quality ul { display: flex; flex-direction: column; gap: 6px; }

.kpi-grid { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
.kpi-grid li { flex: 1 1 160px; min-width: 150px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 16px; box-shadow: var(--shadow-sm); }
.kpi-grid strong { font-size: 24px; color: var(--color-primary); }

.testimonial-list { display: flex; flex-wrap: wrap; gap: 20px; }
.guarantee-note { display: flex; align-items: center; gap: 8px; color: var(--color-primary); background: var(--color-accent); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px 12px; }
.guarantee-note img { width: 18px; height: 18px; }

.faq { display: flex; flex-direction: column; gap: 12px; }
.faq-item { display: flex; flex-direction: column; gap: 6px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 16px; }

/* ========== CONTENT GROUPS ========== */
.segments { display: flex; flex-wrap: wrap; gap: 20px; }
.segments > div { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 16px; }

.articles { display: flex; flex-wrap: wrap; gap: 20px; }
.articles article { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 16px; }

.category-list { display: flex; flex-wrap: wrap; gap: 10px; }
.category-list li { display: inline-flex; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--color-border); background: #FFFFFF; color: var(--color-primary); font-weight: 600; }

.tags { color: var(--color-muted); font-size: 14px; }

.search-bar { display: flex; flex-direction: column; gap: 10px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 16px; }

/* ========== CONTACT & FOOTER ========== */
.contact-blocks { display: flex; flex-wrap: wrap; gap: 16px; }
.contact-blocks > div { flex: 1 1 200px; display: flex; align-items: center; gap: 12px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 12px; }
.contact-blocks img { width: 20px; height: 20px; }

.contact-info { display: flex; flex-direction: column; gap: 6px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 16px; }

.service-area { display: flex; flex-direction: column; gap: 8px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 16px; }

footer { background: #0F1A21; color: #DCE3EA; margin-top: 40px; }
footer .container { padding-top: 24px; padding-bottom: 24px; }
footer .content-wrapper { display: flex; flex-direction: column; gap: 20px; }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: space-between; }
.footer-top .logo img { filter: brightness(0) invert(1); height: 36px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.footer-nav a { color: #DCE3EA; padding: 6px 0; }
.footer-nav a:hover { color: var(--color-secondary); }
.footer-contact { display: flex; flex-direction: column; gap: 6px; color: #DCE3EA; }
.footer-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-cta .btn-primary { background: var(--color-secondary); }
.footer-cta .btn-primary:hover { background: #a6581f; }
.footer-contact p{
    color: #fff;
}

address {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-style: normal;
}

/* ========== NOTES, MISC ========== */
.note { display: inline-flex; padding: 6px 10px; background: var(--color-accent); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-primary); }

/* Thank-you contact options */
.contact-options { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }

/* ========== ACCESSIBILITY & INTERACTIONS ========== */
:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 2px; }
button { cursor: pointer; }

/* ========== RESPONSIVE TYPOGRAPHY & LAYOUT ========== */
@media (min-width: 480px) {
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
}

@media (min-width: 768px) {
  h1 { font-size: 40px; }
  .text-image-section { flex-direction: row; }
}

@media (max-width: 768px) {
  .text-image-section { flex-direction: column; }
}

@media (min-width: 1024px) {
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
  .container { gap: 28px; }
}

/* ========== SPECIAL STATES & ARIA ========== */
[aria-current="page"] { font-weight: 700; }

/* ========== COOKIE CONSENT BANNER & MODAL ========== */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 12px; background: #FFFFFF; border-top: 1px solid var(--color-border); box-shadow: 0 -6px 18px rgba(0,0,0,0.06); transform: translateY(100%); transition: transform .3s ease; }
.cookie-banner.show { transform: translateY(0); }
.cookie-banner .cookie-inner { display: flex; flex-direction: column; gap: 12px; max-width: 1200px; width: 100%; padding: 8px 12px; }
.cookie-banner p { color: var(--color-text); }
.cookie-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-accept { background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary); padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.cookie-reject { background: #FFFFFF; color: var(--color-primary); border: 1px solid var(--color-primary); padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.cookie-settings { background: var(--color-accent); color: var(--color-primary); border: 1px solid var(--color-border); padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.cookie-accept:hover { background: #1d2a33; }
.cookie-reject:hover { background: var(--color-accent); }
.cookie-settings:hover { background: #e9eef5; }

/* Cookie modal */
.cookie-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 3500; }
.cookie-modal.open { display: flex; }
.cookie-dialog { display: flex; flex-direction: column; gap: 14px; width: 94%; max-width: 560px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 18px; box-shadow: var(--shadow-md); }
.cookie-dialog h3 { margin-bottom: 4px; }
.cookie-categories { display: flex; flex-direction: column; gap: 10px; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.cookie-category .label { display: flex; flex-direction: column; }
.cookie-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Simple toggle style */
.toggle { position: relative; width: 46px; height: 26px; border-radius: 999px; background: #cfd7df; border: 1px solid var(--color-border); display: inline-flex; align-items: center; padding: 2px; transition: background-color .2s ease; }
.toggle::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; box-shadow: var(--shadow-sm); transform: translateX(0); transition: transform .2s ease; }
.toggle.on { background: var(--color-primary); }
.toggle.on::after { transform: translateX(20px); }

/* ========== PRINT BASICS ========== */
@media print {
  .mobile-menu, .mobile-menu-toggle, .cookie-banner, .cookie-modal { display: none !important; }
  a { text-decoration: underline; color: #000; }
}

/* ========== PAGE-SPECIFIC LIGHT TUNING ========== */
/* Ratgeber: hint text */
.hero .search-bar p { color: var(--color-muted); }

/* Über uns: milestones */
.milestones { display: flex; flex-direction: column; gap: 10px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 16px; }
.team-philosophy { display: flex; flex-direction: column; gap: 8px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 16px; }

/* Angebot page badges reuse */
.hero .trust-badges span { background: #fff; }

/* Header aria-current underline on desktop nav */
@media (min-width: 992px) {
  .main-nav a[aria-current="page"] { border-bottom: 2px solid var(--color-secondary); }
}

/* Ensure no overlap between stacked sections */
main > section { padding-top: 20px; padding-bottom: 20px; }

/* End of file */