/* ═══════════════════════════════════════════════════════════
   FA Autoservice – style-additions.css
   Ans ENDE von style.css anhängen ODER als separate Datei
   in main.php einbinden nach style.css
   Visitenkarten-Palette: Schwarzwald-Grün + Gold
   ═══════════════════════════════════════════════════════════ */

/* ── Fehlende Variablen (von unseren Templates referenziert) ── */
:root {
    --bark-900: #0f0e0c;
    --bark-800: #1a1814;
    --bark-750: #231e16;
    --bark-700: #2e2720;
    --bark-600: #3d3328;
    --bark-500: #5a4a3a;
    --sand-muted: #b09e8a;
    --forest-light: #6b8f5e;
    --forest-rgb: 45,74,42;

    /* Visitenkarten-Farben */
    --vk-dark:       #111a10;
    --vk-green:      #1e2e18;
    --vk-green-mid:  #2d4422;
    --vk-green-hi:   #3d5c30;
    --vk-gold:       #c8a96e;
    --vk-gold-hi:    #d4b880;
    --vk-gold-lo:    #9a7d4e;
}

/* ── BUTTONS (vollständig) ── */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px;
    font-family: var(--font-display); font-size: 14px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    cursor: pointer; border: 2px solid transparent;
    text-decoration: none; transition: var(--transition);
    white-space: nowrap;
}
.btn--primary  { background: var(--vk-gold-lo); color: var(--bark-900); border-color: var(--vk-gold-lo); }
.btn--primary:hover  { background: var(--vk-gold); border-color: var(--vk-gold); }
.btn--outline  { background: transparent; color: var(--vk-gold-hi); border-color: var(--vk-gold-lo); }
.btn--outline:hover  { background: rgba(200,169,110,.1); border-color: var(--vk-gold-hi); }
.btn--ghost    { background: transparent; color: var(--vk-gold-hi); border-color: rgba(200,169,110,.3); }
.btn--ghost:hover    { background: rgba(200,169,110,.1); }
.btn--dark     { background: var(--bark-900); color: var(--vk-gold-hi); border-color: var(--bark-700); }
.btn--dark:hover     { background: var(--bark-800); }
.btn--ghost-dark { background: transparent; color: var(--vk-gold-hi); border-color: rgba(200,169,110,.3); }
.btn--ghost-dark:hover { background: rgba(200,169,110,.08); }
.btn--lg  { padding: 16px 32px; font-size: 15px; }
.btn--sm  { padding: 8px 16px; font-size: 12px; }
.btn--full { width: 100%; justify-content: center; }

/* ── CONTAINER & SECTIONS ── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.section { padding: 80px 0; }
.section--dark  { background: var(--bark-900); }
.section--bark  { background: var(--bark-800); }
.section--copper-stripe { background: var(--vk-dark); border-top: 2px solid var(--vk-gold-lo); border-bottom: 2px solid var(--vk-gold-lo); }
.section-header { text-align: center; margin-bottom: 8px; }
.section-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 3px; color: var(--vk-gold); margin-bottom: 12px; }
.section-title { font-family: var(--font-display); font-size: clamp(28px,4vw,52px); font-weight: 900; color: var(--vk-gold-hi); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.section-subtitle { color: var(--clay); font-size: 16px; }
.section-cta { text-align: center; margin-top: 48px; }

/* ── LOGO (mit Bild) ── */
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-img { width: 50px; height: 50px; object-fit: contain; display: block; }
.logo-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: transparent; }
.logo-icon img { width: 100%; height: 100%; object-fit: contain; }
.logo-icon::before { content: none !important; }
.logo-text { font-family: var(--font-display); font-size: 20px; font-weight: 900; color: var(--vk-gold-hi); letter-spacing: 2px; text-transform: uppercase; }
.logo-text span { color: var(--vk-gold); }
.logo-sub { font-size: 10px; color: var(--vk-gold-lo); text-transform: uppercase; letter-spacing: 1.5px; }

/* ── PAGE HERO ── */
.page-hero { padding: 80px 0; background: linear-gradient(180deg, var(--vk-green) 0%, var(--bark-900) 100%); border-bottom: 1px solid var(--vk-green-mid); }
.page-hero__tag { font-size: 11px; text-transform: uppercase; letter-spacing: 3px; color: var(--vk-gold); margin-bottom: 12px; }
.page-hero__title { font-family: var(--font-display); font-size: clamp(36px,6vw,72px); font-weight: 900; color: var(--vk-gold-hi); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; line-height: 1; }
.page-hero__sub { font-size: 17px; color: var(--clay); font-style: italic; }
.page-hero--contact { border-bottom-color: var(--vk-gold-lo); }
.page-hero--news    { border-bottom-color: var(--vk-green-hi); }
.page-hero--legal   { border-bottom-color: var(--vk-gold-lo); }

/* ── HERO (Startseite) ── */
.hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; }
.hero__img { width: 100%; height: 100%; object-fit: cover; }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10,16,8,.94) 0%, rgba(10,16,8,.6) 55%, rgba(10,16,8,.3) 100%); }
.hero__content { position: relative; z-index: 2; max-width: 800px; padding-top: 130px; padding-bottom: 80px; }
.hero__eyebrow { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.hero__badge { background: rgba(200,169,110,.08); border: 1px solid rgba(200,169,110,.4); color: var(--vk-gold); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; padding: 5px 14px; }
.hero__title { font-family: var(--font-display); font-size: clamp(44px,7.5vw,96px); font-weight: 900; color: var(--vk-gold-hi); line-height: .93; text-transform: uppercase; letter-spacing: -2px; margin-bottom: 24px; }
.hero__sub { font-size: clamp(15px,1.8vw,19px); color: rgba(212,184,128,.65); margin-bottom: 40px; font-style: italic; line-height: 1.6; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(200,169,110,.3); font-size: 10px; text-transform: uppercase; letter-spacing: 2px; }
.hero__scroll-line { width: 1px; height: 44px; background: linear-gradient(to bottom, transparent, var(--vk-gold)); animation: sp 2s ease-in-out infinite; }
@keyframes sp { 0%,100%{opacity:.3} 50%{opacity:1} }

/* ── TRUST BAR ── */
.trust-bar { background: var(--vk-dark); border-top: 1px solid var(--vk-green-mid); border-bottom: 2px solid var(--vk-gold-lo); }
.trust-bar__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 16px 0; }
.trust-item { display: flex; align-items: center; gap: 10px; padding: 10px 28px; color: var(--vk-gold-hi); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.trust-sep { width: 1px; height: 34px; background: rgba(200,169,110,.2); }

/* ── MARKEN GRID ── */
.brands-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; margin-top: 48px; }
.brand-card { position: relative; display: block; text-decoration: none; overflow: hidden; }
.brand-card__img-wrap { height: 300px; overflow: hidden; background: var(--bark-800); }
.brand-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; display: block; }
.brand-card:hover .brand-card__img { transform: scale(1.08); }
.brand-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,16,8,.93) 0%, rgba(10,16,8,.2) 55%, transparent 100%); }
.brand-card__body { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; }
.brand-card__name { font-family: var(--font-display); font-size: 30px; font-weight: 900; color: var(--vk-gold-hi); text-transform: uppercase; letter-spacing: 3px; }
.brand-card__tagline { font-size: 11px; color: rgba(212,184,128,.45); margin-top: 4px; font-style: italic; }
.brand-card__bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--brand-color, var(--vk-gold)); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.brand-card:hover .brand-card__bar { transform: scaleX(1); }

/* ── LEISTUNGEN GRID ── */
.services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; margin-top: 48px; }
.service-card { display: flex; flex-direction: column; text-decoration: none; background: var(--bark-900); overflow: hidden; border-bottom: 2px solid transparent; transition: border-color .3s; }
.service-card:hover { border-bottom-color: var(--vk-gold); }
.service-card__img { height: 210px; background-size: cover; background-position: center; position: relative; transition: transform .5s; overflow: hidden; }
.service-card:hover .service-card__img { transform: scale(1.04); }
.service-card__img-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,16,8,.4), transparent); }
.service-card__body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.service-card__title { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--vk-gold-hi); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.service-card__excerpt { font-size: 13px; color: var(--clay); line-height: 1.6; flex: 1; }
.service-card__more { font-size: 13px; color: var(--vk-gold); margin-top: 14px; font-weight: 600; }

/* ── ÜBER UNS ── */
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about-split__title { font-family: var(--font-display); font-size: clamp(28px,4vw,44px); font-weight: 900; color: var(--vk-gold-hi); text-transform: uppercase; letter-spacing: 1px; margin: 12px 0 16px; line-height: 1.05; }
.about-split__lead { color: var(--clay); font-size: 16px; line-height: 1.8; margin-bottom: 24px; }
.team-persons { display: flex; flex-direction: column; gap: 10px; }
.team-person { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--bark-700); border-left: 3px solid var(--vk-gold-lo); }
.team-person__av { width: 44px; height: 44px; background: var(--vk-gold-lo); color: var(--bark-900); font-family: var(--font-display); font-weight: 900; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.team-person__name { color: var(--vk-gold-hi); font-weight: 600; font-size: 15px; }
.team-person__role { color: var(--clay); font-size: 12px; margin-top: 2px; }
.team-person__tel { display: block; color: var(--vk-gold); font-size: 12px; text-decoration: none; margin-top: 2px; }
.about-split__img-wrap { position: relative; }
.about-split__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.about-split__badge { position: absolute; bottom: -14px; right: -14px; background: var(--vk-gold-lo); color: var(--bark-900); padding: 18px 22px; text-align: center; }
.about-split__badge-n { font-family: var(--font-display); font-size: 52px; font-weight: 900; line-height: 1; }
.about-split__badge-t { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }

/* ── AKTUELLES ── */
.news-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; margin-top: 48px; }
.news-card { text-decoration: none; background: var(--bark-900); display: flex; flex-direction: column; overflow: hidden; transition: transform .3s; }
.news-card:hover { transform: translateY(-3px); }
.news-card__img { height: 190px; background-size: cover; background-position: center; background-color: var(--bark-800); }
.news-card__body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.news-card__type { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; }
.news-card__type--werkstatt { color: var(--vk-gold); }
.news-card__type--marke { color: #7aadee; }
.news-card__type--philosophie { color: #7aee9a; }
.news-card__title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--vk-gold-hi); text-transform: uppercase; letter-spacing: .5px; flex: 1; margin-bottom: 10px; line-height: 1.2; }
.news-card__excerpt { font-size: 12px; color: var(--clay); line-height: 1.6; }
.news-card__date { font-size: 11px; color: var(--leather); margin-top: 10px; }

/* ── BLOG LISTE ── */
.blog-list { margin-top: 40px; display: flex; flex-direction: column; gap: 2px; }
.blog-row { display: grid; grid-template-columns: 180px 1fr 36px; align-items: center; gap: 20px; padding: 18px 22px; background: var(--bark-800); text-decoration: none; border-left: 3px solid transparent; transition: border-color .25s, background .25s; }
.blog-row:hover { border-left-color: var(--vk-gold); background: var(--bark-750); }
.blog-row__meta { display: flex; flex-direction: column; gap: 3px; }
.blog-row__cat { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--vk-gold); }
.blog-row__date { font-size: 11px; color: var(--leather); }
.blog-row__title { font-size: 15px; color: var(--vk-gold-hi); font-weight: 500; }
.blog-row__arr { color: var(--vk-gold); font-size: 18px; text-align: right; transition: transform .25s; }
.blog-row:hover .blog-row__arr { transform: translateX(4px); }

/* ── CTA BANNER ── */
.cta-banner { background: var(--vk-green); border-top: 2px solid var(--vk-gold-lo); border-bottom: 2px solid var(--vk-gold-lo); }
.cta-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 52px 0; flex-wrap: wrap; }
.cta-banner__h { font-family: var(--font-display); font-size: 30px; font-weight: 900; color: var(--vk-gold-hi); text-transform: uppercase; margin-bottom: 6px; }
.cta-banner__sub { color: rgba(200,169,110,.6); font-size: 15px; }
.cta-banner__btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── KONTAKT KARTEN ── */
.contact-card { background: var(--bark-800); border: 1px solid var(--bark-700); border-left: 3px solid var(--vk-gold-lo); padding: 24px; margin-bottom: 16px; }
.contact-card__dept { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--vk-gold); margin-bottom: 6px; }
.contact-card__name { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--vk-gold-hi); }
.contact-card__role { font-size: 13px; color: var(--clay); margin-bottom: 16px; }
.contact-card__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.contact-card__list li { display: flex; align-items: center; gap: 10px; }
.contact-card__list svg { width: 16px; height: 16px; color: var(--vk-gold); flex-shrink: 0; }
.contact-card__list a { color: var(--vk-gold-hi); text-decoration: none; font-size: 15px; }
.contact-card__list a:hover { color: var(--vk-gold); }

/* ── FORMULAR ALERTS ── */
.alert { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; margin-bottom: 24px; }
.alert svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.alert ul { list-style: disc; padding-left: 16px; margin: 0; }
.alert--success { background: rgba(45,74,42,.2); border: 1px solid var(--forest); color: var(--moss); }
.alert--error { background: rgba(160,50,50,.15); border: 1px solid #b43232; color: #e07070; }
.field-error { font-size: 12px; color: #e07070; margin-top: 4px; display: block; }
.has-error input, .has-error select, .has-error textarea { border-color: #b43232 !important; }
.required { color: var(--vk-gold); }

/* ── SERVICE DETAIL ── */
.service-detail__img { width: 100%; max-height: 480px; object-fit: cover; display: block; margin-bottom: 40px; }
.service-detail__desc { color: var(--clay); line-height: 1.8; font-size: 16px; }
.service-detail__desc h2 { font-family: var(--font-display); font-size: 22px; text-transform: uppercase; color: var(--vk-gold-hi); margin: 28px 0 12px; }
.service-detail__desc p { margin-bottom: 16px; }
.service-highlights { margin-top: 36px; padding: 28px; background: var(--bark-800); border-left: 3px solid var(--vk-gold-lo); }
.service-highlights h3 { font-family: var(--font-display); font-size: 16px; text-transform: uppercase; letter-spacing: 1px; color: var(--vk-gold); margin-bottom: 16px; }
.service-highlights__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.service-highlights__list li { display: flex; align-items: center; gap: 10px; color: var(--clay); font-size: 15px; }
.service-highlights__list li svg { color: var(--vk-gold); flex-shrink: 0; }
.service-detail__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; padding-top: 36px; border-top: 1px solid var(--bark-700); }

/* ── LEGAL / IMPRESSUM ── */
.legal-content { max-width: 800px; margin: 0 auto; }
.legal-block { margin-bottom: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--bark-700); }
.legal-block:last-child { border-bottom: none; }
.legal-block h2 { font-family: var(--font-display); font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--vk-gold); margin-bottom: 16px; }
.legal-block p { color: var(--clay); line-height: 1.8; margin-bottom: 12px; }
.legal-block a { color: var(--vk-gold); text-decoration: none; }
.legal-block strong { color: var(--vk-gold-hi); }
.legal-table { width: 100%; border-collapse: collapse; }
.legal-table td { padding: 10px 0; color: var(--clay); border-bottom: 1px solid var(--bark-700); vertical-align: top; }
.legal-table td:first-child { width: 40%; color: var(--vk-gold-hi); font-weight: 500; padding-right: 24px; }
.legal-table tr:last-child td { border-bottom: none; }

/* ── BREADCRUMB ── */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--clay); margin-bottom: 16px; }
.breadcrumb a { color: var(--vk-gold); text-decoration: none; }

/* ── ADMIN BADGES (Aktuelles) ── */
.admin-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 3px; }
.admin-badge--copper { background: rgba(200,169,110,.12); color: var(--vk-gold); border: 1px solid rgba(200,169,110,.3); }
.admin-badge--blue   { background: rgba(122,173,238,.12); color: #7aadee; }
.admin-badge--green  { background: rgba(122,238,154,.12); color: #7aee9a; }
.admin-badge--success{ background: rgba(74,122,66,.15); color: var(--moss); border: 1px solid var(--forest); }
.admin-badge--muted  { background: rgba(90,74,58,.2); color: var(--clay); }

/* ── RESPONSIVE ── */
@media(max-width:1100px){ .brands-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:900px){
  .container{padding:0 24px;}
  .section{padding:60px 0;}
  .about-split{grid-template-columns:1fr;}
  .about-split__badge{right:0;bottom:-10px;}
  .services-grid{grid-template-columns:1fr 1fr;}
  .news-grid{grid-template-columns:1fr 1fr;}
  .blog-row{grid-template-columns:1fr;}
  .trust-sep{display:none;}
  .trust-bar__inner{flex-direction:column;}
  .cta-banner__inner{flex-direction:column;text-align:center;}
}
@media(max-width:600px){
  .brands-grid{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:1fr;}
  .news-grid{grid-template-columns:1fr;}
}