/*
Theme Name: Glang IT
Theme URI: https://glang-it.de
Author: Glang IT
Description: Child Theme fuer Glang IT auf Basis des kostenlosen Kadence Themes.
Version: 1.0.0
Template: kadence
Requires at least: 6.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: glang-it
*/

/* Self-hosted Schriften (DSGVO-konform, keine Google-Verbindung).
   woff2-Dateien liegen in assets/fonts/, latin-Subset, OFL-lizenziert. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/inter-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/inter-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/inter-latin-800-normal.woff2") format("woff2");
}

/* ==================================================================
   Design-Tokens
   ================================================================== */

:root {
  --gi-blue: #0188F8;
  --gi-blue-light: #4DA9F9;
  /* --gi-blue ist Logo-/Deko-Blau (zu hell fuer Text auf Weiss); --gi-blue-deep ist das barrierefreie Funktions-Blau fuer Text/Buttons auf hellem Grund (WCAG AA). */
  --gi-blue-deep: #0170CE;
  --gi-blue-hover: #015CA8;
  --gi-ink: #3A3A3C;
  --gi-dark: #26262A;
  --gi-darker: #1D1D20;
  --gi-navy: #103A63;
  --gi-bg-alt: #F6F6F7;
  --gi-muted: #666A6E;
  --gi-line: rgba(58, 58, 60, 0.14);
  --gi-radius: 10px; /* Karten/Flaechen; Buttons nutzen bewusst 6px */
  --gi-inline-pad: max(24px, calc((100vw - 1080px) / 2)); /* gehoert zur 1080px-Inhaltsbreite */

  /* Kadence-Palette auf die Marke mappen, damit das vom Parent generierte
     CSS (Links, Buttons, Hintergruende) die richtigen Farben nutzt. */
  --global-palette1: var(--gi-blue-deep);
  --global-palette2: var(--gi-blue-hover);
  --global-palette3: var(--gi-ink);
  --global-palette5: var(--gi-muted);
  --global-palette6: var(--gi-muted);
  --global-palette7: var(--gi-bg-alt);
  --global-palette8: #ffffff;
  --global-palette9: #ffffff;
  --global-palette-highlight: var(--gi-blue);
  --global-palette-highlight-alt: var(--gi-blue-hover);
  --global-palette-btn-bg: var(--gi-blue-deep);
  --global-palette-btn-bg-hover: var(--gi-blue-hover);
}

/* ==================================================================
   Basis: Typografie, Fokus, Skip-Link
   ================================================================== */

*:focus-visible {
  outline: 2px solid var(--gi-blue-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

.gi-skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10000;
  padding: 10px 16px;
  background: var(--gi-blue-deep);
  color: #fff;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 0.2s ease;
}

.gi-skip-link:focus {
  transform: translateY(0);
  color: #fff;
}

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Dunkler Canvas-Hintergrund: verhindert die weisse Flaeche beim
     iOS-Ueberscrollen unter dem (dunklen) Footer; passt zur Footer-Farbe. */
  background-color: var(--gi-darker);
}

body {
  background: #fff;
  color: var(--gi-ink);
  font-size: clamp(15px, 0.9rem + 0.25vw, 17px);
  line-height: 1.6;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

::selection {
  background: rgba(1, 136, 248, 0.18);
  color: var(--gi-ink);
}

body,
button,
input,
select,
textarea {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.site-title {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
}

h1,
h2 {
  font-weight: 800;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(24px, 1.4rem + 1vw, 34px);
  line-height: 1.18;
}

h3 {
  font-size: clamp(19px, 1.1rem + 0.4vw, 22px);
  line-height: 1.25;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

a {
  color: var(--gi-blue-deep);
}

a:hover {
  color: var(--gi-blue-hover);
}

/* Font-Awesome-Icon-Abstand */
.gi-icon {
  color: var(--gi-blue);
  margin-right: 10px;
}

/* ==================================================================
   Header: dunkel, sticky
   ================================================================== */

#masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Weicher Uebergang fuer den Glas-Effekt beim Scrollen */
  transition: background-color 0.3s ease, box-shadow 0.3s ease,
    -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease;
}

.site-header,
.site-main-header-wrap {
  background: var(--gi-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Statusleiste im Standalone-/PWA-Modus klaeren (viewport-fit=cover);
   auf normalen Browsern ist der Inset 0, also kein Effekt. */
.site-main-header-wrap {
  padding-top: env(safe-area-inset-top);
}

/* Glas-Header beim Scrollen: ab > 24 px (Klasse via site.js) wird der Header
   zu dunklem Milchglas. Der backdrop-filter sitzt bewusst auf dem sticky
   #masthead SELBST -- iOS-Safari rendert backdrop-filter auf verschachtelten
   Elementen unter einem position:sticky-Vorfahren haeufig gar nicht, weshalb
   der Header dort solide blieb. translateZ(0) erzwingt einen eigenen
   Compositing-Layer und umgeht zusaetzlich den iOS-Bug mit overflow:clip-
   Vorfahren (html/body). Die inneren Schichten werden transparent, damit das
   Glas durchscheint. Oben bleibt der Header deckend (nahtlos zum Hero). */
#masthead.gi-scrolled {
  background-color: rgba(38, 38, 42, 0.72);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  transform: translateZ(0);
}

#masthead.gi-scrolled .site-header,
#masthead.gi-scrolled .site-main-header-wrap {
  background: transparent;
  border-bottom-color: transparent;
}

/* Fallback: Browser ohne backdrop-filter behalten ein deckendes Dunkel,
   damit der helle Menuetext nie auf durchscheinendem Inhalt steht. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #masthead.gi-scrolled {
    background-color: var(--gi-dark);
  }
}

.site-header .site-title,
.site-header .site-title a {
  color: #f6f6f7;
}

/* Logo (helle Wortmarke, transparentes PNG) auf sinnvolle Groesse begrenzen */
.custom-logo {
  width: clamp(160px, 16vw, 200px);
  height: auto;
  display: block;
}

.custom-logo-link picture {
  display: block;
  line-height: 0;
}

.has-logo-image .site-title-wrap {
  display: none;
}

/* Header ueber die volle Breite: Kadence zentriert ihn sonst in der
   1290px-Spalte (--global-content-width) -> grosser linker Abstand auf
   breiten Schirmen. So sitzt das Logo linksbuendig nah am Rand und die
   Navigation rechts. Gilt fuer Desktop- und Mobil-Headerzeile. */
.site-header .site-container {
  max-width: 100%;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

.main-navigation .primary-menu-container > ul > li.menu-item > a {
  color: #f6f6f7;
  font-size: 15px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:hover {
  color: var(--gi-blue-light);
}

/* Aktiver Menuepunkt klar hervorheben (Desktop) – .site-header-Praefix
   erhoeht die Spezifitaet, damit Kadences generiertes Inline-CSS verliert */
.site-header .main-navigation .primary-menu-container > ul > li.current-menu-item > a,
.site-header .main-navigation .primary-menu-container > ul > li.current_page_item > a,
.site-header .main-navigation .primary-menu-container > ul > li.current-menu-ancestor > a {
  color: var(--gi-blue-light);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--gi-blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

/* CTA-Menuepunkt als Button (Desktop) */
.site-header .main-navigation .primary-menu-container > ul > li.menu-item-cta > a {
  background: var(--gi-blue-deep);
  color: #fff;
  border-radius: 6px;
  padding: 8px 16px;
  transition: background 0.2s ease, color 0.2s ease;
}

.site-header .main-navigation .primary-menu-container > ul > li.menu-item-cta > a:hover,
.site-header .main-navigation .primary-menu-container > ul > li.menu-item-cta > a:focus-visible {
  background: var(--gi-blue-hover);
  color: #fff;
}

/* Fokusring auf blauem Untergrund: weiss statt blau */
.gi-button:focus-visible,
.site-header .main-navigation .primary-menu-container > ul > li.menu-item-cta > a:focus-visible,
.mobile-navigation li.menu-item-cta > a:focus-visible {
  outline-color: #fff;
}

/* Mobiler Drawer: dunkler Hintergrund, helle Links */
.drawer .drawer-inner {
  background: var(--gi-dark);
}

.drawer .drawer-inner a,
.mobile-toggle-open-container a {
  min-height: 48px;
}

.mobile-toggle-open-container .menu-toggle-open,
.drawer .drawer-header .drawer-toggle {
  color: #f6f6f7;
}

.mobile-navigation ul li > a {
  color: #f6f6f7;
}

.mobile-navigation ul li > a:hover {
  color: var(--gi-blue-light);
}

/* Aktiver Menuepunkt im mobilen Drawer */
.mobile-navigation ul li.current-menu-item > a,
.mobile-navigation ul li.current_page_item > a,
.mobile-navigation ul li.current-menu-ancestor > a {
  color: var(--gi-blue-light);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--gi-blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* CTA-Menuepunkt als Button (Drawer) */
.mobile-navigation li.menu-item-cta > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gi-blue-deep);
  color: #fff;
  border-radius: 6px;
  padding: 8px 16px;
}

.mobile-navigation li.menu-item-cta > a:hover {
  background: var(--gi-blue-hover);
  color: #fff;
}

/* ==================================================================
   Buttons, Eyebrow, Lead
   ================================================================== */

.gi-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--gi-blue-deep);
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.gi-button:hover {
  background: var(--gi-blue-hover);
  color: #fff;
}

.gi-button--secondary {
  background: transparent;
  color: var(--gi-blue-deep);
  border: 1px solid var(--gi-blue-deep);
}

.gi-button--secondary:hover {
  background: rgba(1, 136, 248, 0.08);
  color: var(--gi-blue-hover);
}

.gi-button--inverted {
  border: 1px solid var(--gi-blue-light);
  color: var(--gi-blue-light);
  background: transparent;
}

.gi-button--inverted:hover {
  background: rgba(77, 169, 249, 0.12);
  color: var(--gi-blue-light);
}

.gi-button .gi-icon {
  color: currentColor;
  margin-right: 0; /* gap uebernimmt den Abstand */
}

.gi-eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gi-blue-deep);
  margin-bottom: 0.75rem;
}

.gi-lead {
  font-size: 1.15rem;
  color: var(--gi-muted);
}

/* ==================================================================
   Sektionen
   ================================================================== */

/* Zentrierte Inhaltsspalte; --alt zieht den Hintergrund ueber die volle
   Breite (margin-inline-Trick), der Inhalt bleibt mittig. */
.gi-section {
  margin-inline: calc(50% - 50vw);
  padding: 4.5rem var(--gi-inline-pad);
  padding-left: max(var(--gi-inline-pad), env(safe-area-inset-left));
  padding-right: max(var(--gi-inline-pad), env(safe-area-inset-right));
}

.gi-section--alt {
  background: var(--gi-bg-alt);
}

.gi-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.content-area {
  margin-top: 2rem;
  margin-bottom: 3rem;
}

.entry-content-wrap {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}

/* Kadence-Seitentitel (entry-hero) auf Seiten ohne eigenen Hero */
.entry-hero.page-hero-section .entry-hero-container-inner {
  padding: 22px 0;
}

.entry-hero.page-hero-section .entry-header {
  min-height: 0;
}

.entry-hero .entry-title {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.12;
  margin: 0;
}

/* Kadence-Seitentitel verstecken, wenn unser eigener Hero da ist */
body:has(.gi-hero) .entry-hero,
body:has(.gi-hero) .entry-hero.page-hero-section {
  display: none;
}

body:has(.gi-hero) .content-area {
  margin-top: 0;
}

/* Hero randlos unter das Menue ziehen: oberen Innenabstand entfernen */
body:has(.gi-hero) .entry-content-wrap {
  padding-top: 0;
}

/* ==================================================================
   Footer
   ================================================================== */

.site-footer {
  background: var(--gi-darker);
  color: #9a9aa0;
  /* Unteren Innenabstand um den iOS-Home-Indikator erweitern
     (viewport-fit=cover); auf Geraeten ohne Inset bleibt es bei 2rem. */
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}

.site-footer a {
  color: #f6f6f7;
}

.site-footer a:hover {
  color: var(--gi-blue-light);
}

/* Footer: Legal-Links */
.gi-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 10px 0 0;
  color: #9a9aa0;
  font-size: 14px;
}

.gi-footer-legal a {
  color: #9a9aa0;
  text-decoration: none;
  /* Groessere Tap-Flaeche auf Touch-Geraeten */
  display: inline-block;
  padding: 6px 0;
}

.gi-footer-legal a:hover {
  color: var(--gi-blue-light);
  text-decoration: underline;
}

/* ==================================================================
   Responsiv & Bewegung
   ================================================================== */

/* Responsive Regeln fuer Komponenten (Hero, CTA-Band, Raster usw.) stehen weiter unten im Komponenten-Abschnitt. */
@media (max-width: 680px) {
  .custom-logo {
    width: 150px;
  }

  .gi-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .entry-hero.page-hero-section .entry-hero-container-inner {
    padding: 16px 0;
  }

  .content-area {
    margin-top: 1rem;
  }
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  @view-transition {
    navigation: none;
  }
}

/* ==================================================================
   Hero: dunkler Verlauf mit Leiterbahn-Motiv
   ================================================================== */

/* Voller Anschnitt wie .gi-section (margin-inline-Trick);
   der Inhalt bleibt in der zentrierten Spalte. */
.gi-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-inline: calc(50% - 50vw);
  padding: 6rem var(--gi-inline-pad);
  padding-left: max(var(--gi-inline-pad), env(safe-area-inset-left));
  padding-right: max(var(--gi-inline-pad), env(safe-area-inset-right));
  background: linear-gradient(160deg, var(--gi-dark) 55%, var(--gi-navy) 100%);
  color: #f6f6f7;
}

/* Inhaltsspalte des Heros: Lesebreite begrenzen */
.gi-hero__content {
  max-width: 780px;
}

.gi-hero .gi-eyebrow {
  color: var(--gi-blue-light);
}

.gi-hero h1 {
  margin: 0 0 1.25rem;
  color: #f6f6f7;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.1;
}

.gi-hero .gi-lead {
  color: #b8b8bd;
}

/* Dekoratives Leiterbahn-Motiv oben rechts: Inline-SVG als Data-URI
   (Logo-Blau, statisch -- keine Animation, damit ist auch
   prefers-reduced-motion abgedeckt). */
/* isolation: isolate haelt das Motiv im Stacking-Kontext des Heros; z-index -1 legt es hinter den Textfluss, aber ueber den Hero-Hintergrund. */
.gi-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 2.5rem;
  right: var(--gi-inline-pad);
  width: 220px;
  height: 160px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 160' fill='none' stroke='%230188F8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M10 30 H120 L150 60 H210'/%3E%3Cpath d='M40 80 H130 L160 110 H210'/%3E%3Cpath d='M10 130 H100 L130 100'/%3E%3Ccircle cx='10' cy='30' r='6'/%3E%3Ccircle cx='210' cy='60' r='6'/%3E%3Ccircle cx='40' cy='80' r='6'/%3E%3Ccircle cx='210' cy='110' r='6'/%3E%3Ccircle cx='10' cy='130' r='6'/%3E%3Ccircle cx='130' cy='100' r='6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.35;
  pointer-events: none;
}

/* Kompakter Hero fuer Unterseiten: gleicher Verlauf, ohne Motiv */
.gi-hero--sub {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.gi-hero--sub::after {
  content: none;
}

.gi-hero--sub h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

/* ==================================================================
   CTA-Band: dunkler Verlauf, zentriert
   ================================================================== */

.gi-cta-band {
  margin-inline: calc(50% - 50vw);
  padding: 4rem var(--gi-inline-pad);
  padding-left: max(var(--gi-inline-pad), env(safe-area-inset-left));
  padding-right: max(var(--gi-inline-pad), env(safe-area-inset-right));
  background: linear-gradient(160deg, var(--gi-dark) 55%, var(--gi-navy) 100%);
  color: #b8b8bd;
  text-align: center;
}

.gi-cta-band h2 {
  margin-top: 0;
  color: #f6f6f7;
}

.gi-cta-band p {
  max-width: 640px;
  margin-inline: auto;
  color: #b8b8bd;
}

.gi-cta-band .gi-eyebrow {
  color: var(--gi-blue-light);
}

.gi-cta-band .gi-actions {
  justify-content: center;
}

/* ==================================================================
   Karten: Leistungen & Projekte
   ================================================================== */

/* auto-fit: 1 Spalte mobil, 3 Spalten bei drei Karten auf Desktop */
.gi-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

/* Genau vier Karten (Leistungs-Raster der Startseite): 2x2 statt vier schmaler
   Spalten nebeneinander. Ohne :has()-Support faellt es auf auto-fit zurueck. */
@media (min-width: 681px) {
  .gi-card-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gi-card {
  background: #fff;
  border: 1px solid var(--gi-line);
  border-radius: var(--gi-radius);
  padding: 1.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.gi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
  border-color: var(--gi-blue-deep);
}

.gi-card h3 {
  margin-top: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

/* Karten-Icon: dekorativ, daher Logo-Blau erlaubt */
.gi-card .gi-icon {
  color: var(--gi-blue);
  font-size: 1.5rem;
}

.gi-card p:last-child {
  margin-bottom: 0;
}

/* Projektkarte: wie .gi-card, plus Meta-Zeile (Stack, Jahr) */
.gi-project-meta {
  color: var(--gi-muted);
  font-size: 0.85rem;
}

.gi-card--project .gi-project-meta {
  margin-top: 0.75rem;
  margin-bottom: 0;
}

/* ==================================================================
   USP-Band & Ueber-mich-Teaser
   ================================================================== */

.gi-usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.gi-usp {
  color: var(--gi-muted);
  font-size: 0.95rem;
}

.gi-usp .gi-icon {
  color: var(--gi-blue);
  font-size: 1.4rem;
}

.gi-usp strong {
  display: block;
  margin: 0.5rem 0 0.25rem;
  color: var(--gi-ink);
}

.gi-about-teaser {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Runder Foto-Platzhalter mit FA-Personen-Icon */
.gi-about-teaser__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--gi-bg-alt);
  border: 3px solid var(--gi-blue);
}

.gi-about-teaser__photo i,
.gi-about-teaser__photo .gi-icon {
  color: var(--gi-muted);
  font-size: 2.5rem;
  margin-right: 0;
}

/* Groessere Variante fuer die Ueber-mich-Seite */
.gi-about-teaser__photo--large {
  width: 200px;
  height: 200px;
}

.gi-about-teaser__photo--large i,
.gi-about-teaser__photo--large .gi-icon {
  font-size: 4rem;
}

/* ==================================================================
   Listen: Feature-Liste & Ablauf-Schritte
   ================================================================== */

.gi-feature-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
}

/* Kein Flex: Inline-Links muessen im Textfluss bleiben (Flex wuerde Textknoten
   und <a> zu getrennten Spalten machen); Haekchen sitzt absolut im Einzug. */
.gi-feature-list li {
  position: relative;
  padding: 4px 0 4px 26px;
}

/* Haekchen dekorativ in Logo-Blau, Text bleibt Ink */
.gi-feature-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--gi-blue);
  font-size: 14px;
  position: absolute;
  left: 0;
  top: 8px;
}

/* Nummerierte Schritte mit Kreis-Zaehler */
.gi-steps {
  list-style: none;
  counter-reset: gi-step;
  margin: 1.5rem 0 0;
  padding: 0;
}

.gi-steps li {
  counter-increment: gi-step;
  position: relative;
  padding-left: 3rem;
  color: var(--gi-muted);
}

.gi-steps li + li {
  margin-top: 1.25rem;
}

.gi-steps li::before {
  content: counter(gi-step);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--gi-blue-deep);
  border-radius: 50%;
  color: var(--gi-blue-deep);
  font-weight: 700;
}

.gi-steps li strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--gi-ink);
}

/* ==================================================================
   Raster & Info-Boxen
   ================================================================== */

.gi-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.gi-info-box {
  background: #fff;
  border: 1px solid var(--gi-line);
  border-radius: var(--gi-radius);
  padding: 1.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.gi-info-box strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--gi-ink);
}

.gi-info-box strong .gi-icon {
  font-size: 1.1em;
  vertical-align: -1px;
}

/* ==================================================================
   Formulare (Contact Form 7)
   ================================================================== */

.wpcf7-form {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.wpcf7-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--gi-line);
  border-radius: 6px;
  background: #fff;
  color: var(--gi-ink);
  font: inherit;
  padding: 0.75rem;
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--gi-blue-deep);
  box-shadow: 0 0 0 3px rgba(1, 136, 248, 0.15);
}

.wpcf7-form textarea {
  min-height: 140px;
  resize: vertical;
}

.wpcf7-form .wpcf7-form-control-wrap[data-name="privacy-consent"] {
  display: inline-block;
}

.wpcf7-form input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0 10px 0 0;
  accent-color: var(--gi-blue-deep);
  cursor: pointer;
  vertical-align: -4px;
  flex-shrink: 0;
}

/* Absende-Button: CF7 erlaubt keine Zusatzklassen am Submit,
   daher die .gi-button-Deklarationen hier duplizieren. display:inline-block
   statt inline-flex, da <input type="submit"> ein Replaced Element ist --
   flex/gap greifen dort nicht. */
.wpcf7-submit {
  display: inline-block;
  background: var(--gi-blue-deep);
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.wpcf7-submit:hover {
  background: var(--gi-blue-hover);
  color: #fff;
}

.wpcf7-form .wpcf7-submit {
  width: auto;
  justify-self: start;
}

/* Einwilligung (Checkbox + Text); Markup kommt aus functions.php */
.gi-acceptance {
  display: flex;
  align-items: flex-start;
  padding: 14px 16px;
  margin-top: 4px;
  border: 1px solid var(--gi-line);
  border-radius: 8px;
  background: var(--gi-bg-alt);
  color: var(--gi-muted);
  font-size: 14.5px;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.gi-acceptance:hover,
.gi-acceptance:focus-within {
  border-color: var(--gi-blue-deep);
  background: #fff;
}

.gi-acceptance .wpcf7-form-control-wrap[data-name] {
  display: inline-flex;
  align-items: center;
  margin-top: 2px;
}

.gi-acceptance__text {
  min-width: 0;
}

.gi-acceptance .wpcf7-not-valid-tip {
  display: block;
  width: 100%;
  margin-top: 8px;
  color: #b3261e;
  font-size: 13px;
}

/* CF7-Statusmeldungen lesbar einfaerben */
.wpcf7-not-valid-tip {
  color: #b3261e;
  font-size: 13px;
}

.wpcf7 form .wpcf7-response-output {
  margin: 0.5rem 0 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gi-line);
  border-radius: 6px;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  border-color: #b3261e;
  color: #b3261e;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: #1b7a3d;
  color: #1b7a3d;
}

/* ==================================================================
   Responsiv: Komponenten
   ================================================================== */

@media (max-width: 880px) {
  .gi-hero:not(.gi-hero--sub) {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  .gi-info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .gi-hero:not(.gi-hero--sub) {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .gi-hero::after {
    display: none;
  }

  .gi-hero--sub {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .gi-cta-band {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .gi-about-teaser {
    flex-direction: column;
    text-align: center;
  }

  .gi-steps li {
    padding-left: 2.5rem;
  }

  .gi-steps li::before {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.85rem;
  }
}

/* Reduzierte Bewegung: Karten-Hover ohne Transform (Transitions werden
   bereits global weiter oben abgeschaltet). */
@media (prefers-reduced-motion: reduce) {
  .gi-card:hover {
    transform: none;
  }
}