/*
Theme Name: GfS
Theme URI: https://gfs-ulm.de
Description: Child-Theme von Hello Elementor für die GfS Gesellschaft für Straßenunterhaltung mbH. Enthält die Inter-Schrift (lokal, DSGVO) und die Sonder-Klassen des Screendesigns (abgeschnittene Ecken, orange Trennstriche). Das eigentliche Design wird in Elementor gebaut.
Author: GfS / marbet
Template: hello-elementor
Version: 1.1.0
Text Domain: gfs
*/

/* ---------- Inter lokal (kein Google Fonts) ---------- */
@font-face { font-family: "Inter"; font-weight: 300; font-style: normal; src: url("fonts/Inter-Light.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; src: url("fonts/Inter-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; src: url("fonts/Inter-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; src: url("fonts/Inter-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; src: url("fonts/Inter-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 800; font-style: normal; src: url("fonts/Inter-ExtraBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 400; font-style: italic; src: url("fonts/Inter-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 700; font-style: italic; src: url("fonts/Inter-BoldItalic.ttf") format("truetype"); font-display: swap; }

/* ---------- Design-Tokens (gleich wie gfs-website/src/css/input.css) ---------- */
:root {
  --gfs-brand: #ea5f1e;
  --gfs-ink: #333333;
}
body { font-family: "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

/* ==============================================================
   Hilfsklassen für Elementor
   In Elementor bei einem Element: Erweitert → CSS-Klassen → z. B. "gfs-card-cut"
   ============================================================== */

/* Bildkarte mit abgeschnittener Ecke unten rechts */
.gfs-card-cut { --cut: 3.5rem; overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.gfs-card-cut--wide { --cut: 5.5rem; }
.gfs-card-cut--small { --cut: 2.5rem; }

/* CTA-Box "Jetzt Kontakt aufnehmen": obere Ecken abgeschrägt, 1px schwarzer Rand */
.gfs-cta-cut { --cut: 2.5rem; background: #000; padding: 1px;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%, 0 var(--cut)); }
.gfs-cta-cut > * { background: #fff;
  clip-path: polygon(var(--cut) 1px, calc(100% - var(--cut)) 1px, calc(100% - 1px) var(--cut), calc(100% - 1px) 100%, 1px 100%, 1px var(--cut)); }

/* Orange, leicht schräger Trennstrich zwischen Menüpunkten (leerer Container, 4×12 px) */
.gfs-nav-sep { width: 4px; height: 12px; background: var(--gfs-brand); transform: skewX(-12deg); }

/* Hero-Textbox: orange Linie unten */
.gfs-hero-caption { border-bottom: 4px solid var(--gfs-brand); }

/* Vollbreiten-Banner: orange Linie unten (8 px) */
.gfs-banner-underline { border-bottom: 8px solid var(--gfs-brand); }

/* Feste Kontakt-Kacheln am rechten Rand */
.gfs-side-contact { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 40; }

/* Zweispaltiger Fließtext (ab Tablet) */
@media (min-width: 768px) { .gfs-cols-2 { columns: 2; column-gap: 2rem; } .gfs-cols-2 p { break-inside: avoid; } }

/* Vorzeile + Überschrift in EINEM Überschriften-Widget:
   <span class="gfs-kicker">Vorzeile</span><span class="gfs-title">Überschrift</span> */
.gfs-kicker { display: block; font-size: 20px; font-weight: 400; line-height: 1.25; }
.gfs-title  { display: block; margin-top: 4px; font-size: 36px; font-weight: 700; line-height: 1.2; }
@media (max-width: 1024px) { .gfs-kicker { font-size: 18px; } .gfs-title { font-size: 30px; } }
@media (max-width: 767px)  { .gfs-title { font-size: 24px; } }

/* Hero-Textbox: Schwarz 85 % + orange Linie unten */
.gfs-hero-caption { background: rgba(0, 0, 0, 0.85); border-bottom: 4px solid var(--gfs-brand); }

/* Fließtext: Abstand zwischen Absätzen wie im Nachbau (20 px) */
.gfs-copy p { margin: 0; }
.gfs-copy p + p { margin-top: 20px; }

/* Helle Teamkarte: Rolle unter dem Namen in normaler Schrift */
.gfs-card-cut--light .elementor-heading-title span { display: block; font-weight: 400; }
/* Karten: Bild sanft vergrößern bei Hover (nur wenn die Karte ein Link ist) */
a.gfs-card-cut { transition: filter .3s; color: inherit; }
a.gfs-card-cut:hover { filter: brightness(1.08); }