/*
Theme Name: firmenangebote.com
Template: generatepress
Author: DIGITAL LEADER GMBH
Description: Schlankes Child-Theme fuer firmenangebote.com. Traeger des Design-Systems (B2B/Industrie), Header/Footer und der redaktionellen Komponenten. Aufbauend auf GeneratePress + GenerateBlocks. Kein Pagebuilder.
Version: 0.1.0
Text Domain: firmenangebote
*/

/* =========================================================================
   1. DESIGN-TOKENS  (zentral aenderbar)
   ========================================================================= */
:root{
  /* Farben: neutrale Basis + Industrie-Akzent (tiefes Marineblau/Anthrazit) */
  --fa-ink:        #16222e;   /* Haupttext / Ueberschriften */
  --fa-ink-soft:   #3a4a59;   /* Sekundaertext */
  --fa-muted:      #5d6e7d;   /* gedaempfter Text */
  --fa-primary:    #133a5a;   /* Primaer (Marineblau) */
  --fa-primary-d:  #0d2c46;   /* Primaer dunkel (Hover) */
  --fa-accent:     #2b7bb9;   /* Stahlblau Akzent (Links/Aktiv) */
  --fa-accent-d:   #1f6199;
  --fa-warm:       #e07b39;   /* warmer Akzent, sehr sparsam (CTA-Highlight) */
  --fa-signal:     #e8843a;   /* SIGNATUR-Akzent (Schwerpunkt): Akzentbalken, Hero-Diagonale */
  --fa-bg:         #ffffff;
  --fa-surface:    #f4f7fa;   /* Karten-/Sektionsflaeche */
  --fa-surface-2:  #eef3f7;
  --fa-border:     #dde6ee;
  --fa-ink-invert: #eaf1f7;   /* Text auf dunklem Grund */

  /* Typografie: System-Stack -> kein Webfont-Load, beste CWV */
  --fa-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,sans-serif;
  --fa-fs-base: 1.0625rem;     /* 17px Fliesstext */
  --fa-lh:     1.7;
  --fa-maxw:   1340px;         /* Inhaltsbreite (Wrap) */
  --fa-maxw-narrow: 760px;     /* Lesebreite Artikel */
  --fa-pad:    clamp(1rem, 4vw, 2.6rem); /* seitlicher Innenabstand */

  /* Abstaende / Radius / Schatten */
  --fa-radius: 12px;
  --fa-radius-sm: 8px;
  --fa-shadow:    0 1px 2px rgba(16,34,46,.06), 0 8px 24px rgba(16,34,46,.06);
  --fa-shadow-sm: 0 1px 3px rgba(16,34,46,.08);
  --fa-gap: clamp(1rem, 2vw, 1.6rem);
}

/* =========================================================================
   2. BASIS
   ========================================================================= */
body{
  font-family: var(--fa-font);
  font-size: var(--fa-fs-base);
  line-height: var(--fa-lh);
  color: var(--fa-ink-soft);
  background: var(--fa-bg);
}
.grid-container{ max-width: var(--fa-maxw); }

/* === FULL-WIDTH BAENDER ===
   Vollbreite-Sektionen (Hero, gedaempfte Abschnitte, Footer) ueber die ganze
   Seitenbreite. Auf Entwurfsseiten ist GeneratePress-Content auf volle Breite
   gestellt; die Baender spannen edge-to-edge, der innere Wrap haelt die Lesebreite. */
.fa-band{ width:100%; padding-block: clamp(2rem,5vw,4rem); padding-inline: var(--fa-pad); }

/* === SIGNATUR-HERO: Navy + technisches Blueprint-Raster + schraege Akzentkante === */
.fa-band--hero{
  position: relative; overflow: hidden;
  background: linear-gradient(160deg,#102e47 0%, #16222e 100%);
  color: var(--fa-ink-invert);
  padding-block: clamp(3rem,6vw,5.5rem) clamp(3.6rem,7vw,6rem);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 46px));
}
/* feines technisches Raster, oben rechts ausgeblendet */
.fa-band--hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(124,176,214,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,176,214,.10) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask: radial-gradient(130% 90% at 88% 8%, #000 22%, transparent 72%);
          mask: radial-gradient(130% 90% at 88% 8%, #000 22%, transparent 72%);
}
/* markante diagonale Akzentflaeche (Signatur) */
.fa-band--hero::after{
  content:""; position:absolute; top:-25%; right:-6%; width:42%; height:150%;
  background: linear-gradient(180deg, var(--fa-signal), transparent 80%);
  transform: skewX(-13deg); opacity:.22; pointer-events:none;
}
.fa-band--hero > .fa-wrap{ position:relative; z-index:1; }
.fa-band--muted{ background: var(--fa-surface); }
.fa-band--tight{ padding-block: clamp(1.4rem,3vw,2.2rem); }
.fa-wrap{ max-width: var(--fa-maxw); margin-inline:auto; }
.fa-wrap--narrow{ max-width: var(--fa-maxw-narrow); }
/* Volle Content-Breite (GeneratePress full-width content): Innenabstand uebernimmt der Wrap */
.fa-theme .entry-content > .fa-band{ margin-block: 0; }
.fa-theme.page .inside-article{ padding: 0; }
.fa-theme .entry-content{ display:flex; flex-direction:column; }
.fa-theme .entry-content > *:not(.fa-band){ max-width: var(--fa-maxw); margin-inline:auto; padding-inline: var(--fa-pad); width:100%; }
h1,h2,h3,h4{ color: var(--fa-ink); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
h1{ font-size: clamp(2rem, 4.2vw, 2.8rem); }
h2{ font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 2.2em; }
h3{ font-size: clamp(1.2rem, 2.2vw, 1.4rem); margin-top: 1.6em; }
a{ color: var(--fa-accent); text-underline-offset: 2px; }
a:hover{ color: var(--fa-accent-d); }
.entry-content > *{ max-width: 100%; }

/* Buttons (Gutenberg core + eigene) */
.wp-block-button__link,.fa-btn{
  background: var(--fa-primary); color:#fff; border-radius: var(--fa-radius-sm);
  padding:.8em 1.5em; font-weight:600; display:inline-block; text-decoration:none;
  transition: background .15s ease, transform .15s ease;
}
.wp-block-button__link:hover,.fa-btn:hover{ background: var(--fa-primary-d); color:#fff; }
.fa-btn--ghost{ background: transparent; color: var(--fa-primary); box-shadow: inset 0 0 0 2px var(--fa-border); }
.fa-btn--ghost:hover{ background: var(--fa-surface); color: var(--fa-primary); }

/* =========================================================================
   3. HEADER  (Top-Strip + GeneratePress Navigation)
   ========================================================================= */
.fa-topbar{ background: var(--fa-primary); color: var(--fa-ink-invert); font-size:.85rem; }
.fa-topbar .fa-inner{ max-width:var(--fa-maxw); margin:0 auto; padding:.45rem 20px; display:flex; gap:1.2rem; justify-content:space-between; flex-wrap:wrap; }
.fa-topbar a{ color: var(--fa-ink-invert); text-decoration:none; }
.fa-topbar a:hover{ color:#fff; text-decoration:underline; }
/* === EINREIHIGES HEADER: Logo links, Navigation rechts, dezent sticky === */
.site-header{ border-bottom:1px solid var(--fa-border); position:sticky; top:0; z-index:200; background:#fff; }
.site-header .inside-header{ gap:1.5rem; padding-top:.5rem; padding-bottom:.5rem; }
@media (min-width:769px){ .site-header .inside-header{ display:flex; align-items:center; justify-content:space-between; } }
.site-header .site-logo{ margin:0; line-height:0; flex-shrink:0; }
/* Logo statt Text-Titel: GP-Titeltext + Tagline ausblenden */
.main-title, .site-description{ display:none; }
.site-header .site-logo img, .site-header img.is-logo-image, .site-header img.custom-logo{ max-height:48px !important; width:auto !important; height:auto !important; }
/* Mobile-Hamburger sichtbar machen (GP setzt ihn inline auf weiss -> dunkel erzwingen) */
.main-navigation .menu-toggle, button.menu-toggle, .menu-toggle:hover, .menu-toggle:focus{ color: var(--fa-ink) !important; }
/* geoeffnetes Mobile-Menue als sauberes Panel */
.main-navigation.toggled .main-nav > ul{ background:#fff; border:1px solid var(--fa-border); border-radius:10px; box-shadow:var(--fa-shadow); margin-top:.4rem; padding:.4rem; }
@media (max-width:768px){
  .site-header{ position:static; }
  .site-header .site-logo img, .site-header img.is-logo-image, .site-header img.custom-logo{ max-height:32px !important; }
  /* Kontakt im Mobile-Menue nicht als Button */
  .main-navigation .main-nav > ul > li:last-child > a{ background:transparent; color:var(--fa-ink); }
  /* GP-SVG-Hamburger dunkel + ausreichend gross */
  #mobile-menu-control-wrapper .menu-toggle .gp-icon{ font-size:1.5rem; }
  #mobile-menu-control-wrapper .menu-toggle .gp-icon svg{ width:26px; height:26px; fill:var(--fa-ink); }
}

/* Navigation als Pills, vertikal zentriert */
.main-navigation, .nav-float-right .inside-navigation{ background:transparent; }
@media (min-width:769px){ .main-navigation .main-nav > ul{ display:flex; align-items:center; } }
.main-navigation .main-nav ul li a{ font-weight:600; color: var(--fa-ink); }
.main-navigation .main-nav > ul > li > a{ padding:.5rem .9rem; border-radius:8px; line-height:1.2; white-space:nowrap; }
.main-navigation .main-nav > ul > li > a:hover{ background: var(--fa-surface); color: var(--fa-accent); }
.main-navigation .main-nav ul li.current-menu-item > a{ color: var(--fa-accent); background: var(--fa-surface); }
/* Themen-Dropdown */
.main-navigation ul ul{ border:1px solid var(--fa-border); box-shadow: var(--fa-shadow); border-radius:10px; padding:.4rem; min-width:250px; }
.main-navigation ul ul li a{ border-radius:6px; font-weight:500; }
.main-navigation ul ul li a:hover{ background: var(--fa-surface); color: var(--fa-accent); }
/* "Kontakt" als Akzent-Button am Ende */
.main-navigation .main-nav > ul > li:last-child > a{ background: var(--fa-primary); color:#fff; }
.main-navigation .main-nav > ul > li:last-child > a:hover{ background: var(--fa-primary-d); color:#fff; }

/* =========================================================================
   4. KOMPONENTEN
   ========================================================================= */

/* Breadcrumbs */
.fa-breadcrumbs{ font-size:.85rem; color:var(--fa-muted); padding:1rem 0 .25rem; }
.fa-breadcrumbs a{ color:var(--fa-muted); text-decoration:none; }
.fa-breadcrumbs a:hover{ color:var(--fa-accent); }

/* Hero-Inhalt (textfokussiert, im Signatur-Band) */
.fa-hero__text{ max-width: 60ch; }
.fa-hero__text h1{ color:#fff; max-width:22ch; font-size: clamp(2.1rem, 4.6vw, 3.1rem); }
.fa-hero__text p{ color:#cdddea; font-size:1.18rem; max-width:58ch; }
/* Eyebrow mit Signatur-Akzentbalken */
.fa-eyebrow{ display:inline-flex; align-items:center; gap:.7rem; color:#bcd6ea; text-transform:uppercase; letter-spacing:.14em; font-size:.8rem; font-weight:700; margin-bottom:.4rem; }
.fa-eyebrow::before{ content:""; width:34px; height:5px; border-radius:3px; background: var(--fa-signal); display:inline-block; }
/* Hero-CTA-Reihe: sauberer Abstand, umbruchsicher */
.fa-hero__cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.5rem; }
.fa-hero__cta .fa-btn{ margin:0; }

/* Schwerpunkt-Chips unter dem Hero-Text (Signatur, zeigt Themenbreite) */
.fa-hero__chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem; }
.fa-hero__chips a{ font-size:.86rem; font-weight:600; text-decoration:none; color:#dcebf7; color:#e7eff6; border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:.35rem .85rem; transition:border-color .15s, background .15s; }
.fa-hero__chips a:hover{ border-color: var(--fa-signal); background: rgba(232,132,58,.14); color:#fff; }

/* === SIGNATUR-AKZENTBALKEN an Section-Ueberschriften (H1/H2) === */
.fa-band > .fa-wrap > h2,
.fa-band > .fa-wrap > h1{ position:relative; padding-top:.9rem; }
.fa-band > .fa-wrap > h2::before,
.fa-band > .fa-wrap > h1::before{
  content:""; position:absolute; top:0; left:0;
  width:48px; height:5px; border-radius:3px; background: var(--fa-signal);
}
/* Signal-CTA (Hero): setzt den Schwerpunkt */
.fa-btn--signal{ background: var(--fa-signal); color:#1a2330; }
.fa-btn--signal:hover{ background:#d9742c; color:#1a2330; }

/* Faktenbox (SEO/GEO: kurze Definition) */
.fa-factbox{ background:var(--fa-surface); border:1px solid var(--fa-border); border-left:4px solid var(--fa-accent);
  border-radius: var(--fa-radius-sm); padding:1.2rem 1.4rem; margin:1.6rem 0; }
.fa-factbox h2,.fa-factbox h3,.fa-factbox strong:first-child{ margin-top:0; }
.fa-factbox p:last-child{ margin-bottom:0; }

/* Themencluster-/Karten-Raster */
.fa-grid{ display:grid; gap:var(--fa-gap); grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); margin:1.5rem 0; }
.fa-card{ background:#fff; border:1px solid var(--fa-border); border-radius:var(--fa-radius); overflow:hidden;
  box-shadow:var(--fa-shadow-sm); transition: box-shadow .18s ease, transform .18s ease; display:flex; flex-direction:column; }
.fa-card:hover{ box-shadow:var(--fa-shadow); transform: translateY(-2px); }
.fa-card a.fa-card__link{ text-decoration:none; color:inherit; display:flex; flex-direction:column; height:100%; }
/* Bildregel: volles Motiv, NICHT beschneiden -> contain auf neutralem Grund */
.fa-card__media{ background:var(--fa-surface-2); aspect-ratio: 16/10; display:flex; align-items:center; justify-content:center; }
.fa-card__media img{ width:100%; height:100%; object-fit: contain; }
.fa-card__body{ padding:1.1rem 1.2rem 1.3rem; }
.fa-card__body h3{ margin:0 0 .35rem; font-size:1.12rem; }
.fa-card__body p{ margin:0; color:var(--fa-muted); font-size:.95rem; }
.fa-card__kicker{ font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--fa-accent); }

/* Beitrags-/Leitbild (volles Motiv, kein Crop) */
.fa-leadimg{ background:var(--fa-surface-2); border:1px solid var(--fa-border); border-radius:var(--fa-radius); padding:.5rem; margin:1.4rem 0; }
.fa-leadimg img{ width:100%; max-height:420px; object-fit:contain; display:block; border-radius:var(--fa-radius-sm); }
.fa-leadimg figcaption{ font-size:.82rem; color:var(--fa-muted); text-align:center; padding:.5rem 0 .2rem; }

/* Inhaltsverzeichnis (TOC) */
.fa-toc{ background:var(--fa-surface); border:1px solid var(--fa-border); border-radius:var(--fa-radius-sm); padding:1.1rem 1.4rem; }
.fa-toc strong{ display:block; color:var(--fa-ink); margin-bottom:.5rem; }
.fa-toc ul{ margin:0; padding-left:1.1rem; }
.fa-toc li{ margin:.2rem 0; }

/* FAQ (echte FAQ, details/summary, kein JS noetig) */
.fa-faq details{ border:1px solid var(--fa-border); border-radius:var(--fa-radius-sm); padding:0 1.1rem; margin:.6rem 0; background:#fff; }
.fa-faq summary{ cursor:pointer; font-weight:600; color:var(--fa-ink); padding:.9rem 0; list-style:none; }
.fa-faq summary::-webkit-details-marker{ display:none; }
.fa-faq summary::after{ content:"+"; float:right; color:var(--fa-accent); font-weight:700; }
.fa-faq details[open] summary::after{ content:"–"; }
.fa-faq details[open]{ padding-bottom:.4rem; }

/* "Verwandte Themen" / interne Verlinkung */
.fa-related{ background:var(--fa-surface); border-radius:var(--fa-radius); padding:1.4rem 1.6rem; margin:2rem 0; }
.fa-related h2{ margin-top:0; font-size:1.2rem; }
.fa-related ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem .8rem; }
.fa-related a{ display:inline-block; background:#fff; border:1px solid var(--fa-border); border-radius:999px; padding:.35rem .9rem; font-size:.9rem; text-decoration:none; color:var(--fa-primary); }
.fa-related a:hover{ border-color:var(--fa-accent); color:var(--fa-accent); }

/* Sektion mit gedaempftem Grund */
.fa-section--muted{ background:var(--fa-surface); }

/* Complianz-Dokumente (Datenschutz/Cookies) auf Lesebreite */
.cmplz-document{ max-width:860px; margin:1.5rem auto 3rem; padding:0 20px; }
.cmplz-document h2{ margin-top:2rem; }

/* dezenter Kontakt-Abschluss (ersetzt alte Lead-CTA) */
.fa-contact-cta{ border:1px solid var(--fa-border); border-radius:var(--fa-radius); padding:1.6rem 1.8rem; display:flex; gap:1rem 2rem; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.fa-contact-cta p{ margin:0; }

/* =========================================================================
   5. FOOTER
   ========================================================================= */
.fa-footer{ background:var(--fa-ink); color:#b7c4d0; font-size:.92rem; }
.fa-footer .fa-inner{ max-width:var(--fa-maxw); margin:0 auto; padding:2.6rem 20px 1.2rem; display:grid; gap:1.6rem 2rem; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.fa-footer h4{ color:#fff; font-size:.95rem; margin:0 0 .7rem; }
.fa-footer a{ color:#b7c4d0; text-decoration:none; display:block; padding:.18rem 0; }
.fa-footer a:hover{ color:#fff; }
.fa-footer__legal{ border-top:1px solid rgba(255,255,255,.12); margin-top:1rem; padding:1rem 20px; max-width:var(--fa-maxw); margin-left:auto; margin-right:auto; font-size:.82rem; color:#8a99a7; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.fa-footer__legal a{ display:inline; color:#aab8c4; }

/* =========================================================================
   6. RESPONSIVE
   ========================================================================= */
@media (max-width: 768px){
  .fa-contact-cta{ flex-direction:column; align-items:flex-start; }
  .fa-hero p{ font-size:1.05rem; }
}