/* ==========================================================================
   03 – BUTTONS & WIEDERKEHRENDE BAUTEILE
   ==========================================================================
   Bausteine, die auf sehr vielen Seiten gleich aussehen: Buttons und der
   "Eyebrow + Überschrift"-Sektionskopf (kleines blaues Label über einer
   H2). Seiten-spezifische Bauteile (z. B. Branchen-Karten) stehen NICHT
   hier, sondern in der jeweiligen Datei der Seitengruppe.
   ========================================================================== */

/* --------------------------------------------------------------------
   BUTTONS
   blue  = Haupt-Handlung (z. B. "Kontakt aufnehmen")
   ghost = zweite Handlung auf dunklem Hintergrund (Rahmen statt Fläche)
   white = Haupt-Handlung auf blauem Hintergrund (z. B. im CTA-Band)
   ow    = zweite Handlung auf blauem Hintergrund ("outline white")
   sm    = kleinere Variante von .btn-blue
   -------------------------------------------------------------------- */
.btn-blue {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--blue); color: var(--white);
	font-size: 15px; font-weight: 700; padding: 13px 28px;
	border: none; cursor: pointer; border-radius: 8px; transition: background .18s;
}
.btn-blue:hover { background: var(--blue-dk); }

.btn-ghost {
	display: inline-flex; align-items: center; gap: 8px;
	background: transparent; color: rgba(255,255,255,.75);
	font-size: 15px; font-weight: 700; padding: 13px 28px;
	border: 2px solid rgba(255,255,255,.22); cursor: pointer; border-radius: 8px;
}

.btn-white {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--white); color: var(--black);
	font-size: 15px; font-weight: 700; padding: 13px 28px;
	border: none; cursor: pointer; border-radius: 8px;
}

.btn-ow {
	display: inline-flex; align-items: center; gap: 8px;
	background: transparent; color: rgba(255,255,255,.75);
	font-size: 15px; font-weight: 700; padding: 13px 24px;
	border: 2px solid rgba(255,255,255,.22); cursor: pointer; border-radius: 8px;
}

.btn-sm {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--blue); color: var(--white);
	font-size: 14px; font-weight: 700; padding: 11px 22px;
	border: none; cursor: pointer; border-radius: 8px;
}

/* Buttons sind nie unterstrichen, auch nicht als <a> gerendert und nicht bei Hover */
.btn-blue, .btn-ghost, .btn-white, .btn-sm, .btn-ow,
.btn-blue:hover, .btn-ghost:hover, .btn-white:hover, .btn-sm:hover, .btn-ow:hover {
	text-decoration: none;
}
/* Als <a> gestylte Buttons: Inhalt zentrieren wie ein <button> */
a.btn-blue, a.btn-ghost, a.btn-white, a.btn-sm, a.btn-ow {
	justify-content: center;
}

/* --------------------------------------------------------------------
   SEKTIONSKOPF: kleines blaues Eyebrow-Label + Überschrift
   Beispiel: "KERNBRANCHEN" (Eyebrow) über "Vier Industrien. Ein Anspruch." (H2)
   -------------------------------------------------------------------- */
.sec-header { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; }
.sec-eyebrow {
	display: flex; align-items: center; gap: 10px;
	font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--blue);
}
.sec-eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--blue); }
.sec-h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 700; color: var(--black); }

@media (max-width: 600px) {
	.sec-header { margin-bottom: 20px; }
	.sec-eyebrow { font-size: 12px; } /* Mindestgröße gegen zu kleine Schrift auf Mobil */
}

/* --------------------------------------------------------------------
   INHALTS-ABSCHNITT mit optionalem Wechsel-Hintergrund
   Wird von mehreren Seitengruppen genutzt (Kompetenzen, Branchen, …).
   -------------------------------------------------------------------- */
.mt-section { padding: clamp(44px, 8vw, 92px) clamp(20px, 4vw, 40px); }
.mt-inner { max-width: 1100px; margin: 0 auto; }
.mt-section--alt { background: var(--gray-lt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mt-lead { font-size: 16.5px; line-height: 1.8; color: var(--gray); max-width: 760px; margin-bottom: 8px; }

/* --------------------------------------------------------------------
   CHIPS (kurze Schlagwörter, z. B. Werkstoffe oder Job-Anforderungen)
   -------------------------------------------------------------------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { font-size: 13.5px; font-weight: 700; color: var(--blue-dk); background: var(--blue-lt); border-radius: 18px; padding: 9px 16px; }

/* --------------------------------------------------------------------
   ANSPRECHPARTNER-KARTE (Karriere-Seiten). Die Branchen-Seiten nutzen
   eine EIGENE, davon unabhängige Komponente (.ap-contact), siehe
   assets/css/08-branchen.css.
   -------------------------------------------------------------------- */
.ap-inner { text-align: center; }
.ap-karte { max-width: 420px; margin: 18px auto 0; border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.ap-name { font-size: 1.15rem; font-weight: 700; color: var(--black); }
.ap-rolle { font-size: 13.5px; color: var(--gray); margin-top: 4px; margin-bottom: 16px; }
.ap-kontaktdaten { display: flex; flex-direction: column; gap: 8px; }
.ap-kontaktdaten a { font-size: 14px; color: var(--blue); text-decoration: none; }

/* --------------------------------------------------------------------
   CTA-BAND (blaues Band am Seitenende, Kompetenzen- + Branchen-Seiten)
   1:1 aus der HTML-Vorschau übernommen – war zuvor im Template bereits
   korrekt verwendet, aber nie ins CSS übertragen worden.
   -------------------------------------------------------------------- */
.cta-band { background: linear-gradient(120deg,var(--blue),var(--blue-dk)); padding: 44px 40px; position: relative; overflow: hidden; }
.cta-band::before { content: ''; position: absolute; top: -40%; right: -5%; width: 320px; height: 320px; border-radius: 50%; background: rgba(255,255,255,.08); z-index: 1; }
.cta-band-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; position: relative; z-index: 2; }
.cta-band-text h3 { color: #fff; font-size: 1.4rem; font-weight: 700; margin-bottom: 6px; letter-spacing: -.01em; }
.cta-band-text p { color: rgba(255,255,255,.82); font-size: 15px; max-width: 520px; line-height: 1.5; }
.cta-band-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-band .btn-white { text-decoration: none; background: #fff; color: var(--blue-dk); }
.cta-band .btn-ghost { text-decoration: none; }
@media (max-width: 760px) {
	.cta-band-inner { flex-direction: column; align-items: flex-start; }
}
.ap-kontaktdaten a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------
   FINALES CTA-BAND (dunkler Hintergrund, zentriert)
   -------------------------------------------------------------------- */
.ap-cta { position: relative; overflow: hidden; background: linear-gradient(120deg,#0078CC 0%,#0096FF 45%,#33ABFF 100%); background-size: 200% 200%; animation: apGrad 12s ease infinite; padding: 72px 40px; isolation: isolate; }
@keyframes apGrad { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.ap-cta-orb { position: absolute; border-radius: 50%; z-index: 0; pointer-events: none; filter: blur(8px); }
.ap-cta-orb1 { width: 320px; height: 320px; background: radial-gradient(circle,rgba(255,255,255,.22),transparent 65%); top: -130px; left: 10%; animation: apFloat 11s ease-in-out infinite; }
.ap-cta-orb2 { width: 240px; height: 240px; background: radial-gradient(circle,rgba(0,40,90,.28),transparent 65%); bottom: -110px; right: 14%; animation: apFloat 14s ease-in-out infinite reverse; }
@keyframes apFloat { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(34px,26px); } }
.ap-cta-inner { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; text-align: center; }
.ap-cta-inner h2 { font-size: clamp(1.6rem,3vw,2.3rem); font-weight: 700; color: #fff; margin-bottom: 12px; }
.ap-cta-inner p { font-size: 15.5px; color: rgba(255,255,255,.85); line-height: 1.7; margin-bottom: 28px; max-width: 600px; margin-left: auto; margin-right: auto; }
.ap-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) {
	.ap-cta, .ap-cta-orb { animation: none; }
}
.btn-outline-blue { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #fff; font-size: 15px; font-weight: 700; padding: 13px 26px; border: 2px solid rgba(255,255,255,.3); border-radius: 8px; text-decoration: none; }
.btn-outline-blue:hover { border-color: #fff; }