/* =========================================================
   ObJack – Website-Stylesheet
   Aufbau: 1) Grundwerte (Farben, Schrift, Abstände, Schriftgrößen)
           2) Basis-Elemente (body, Überschriften, Links, Buttons)
           3) Layout-Bausteine (Header, Hero, Abschnitte, Footer)
           4) Responsive Anpassungen (unten, mobil zuerst)
   Alle Farben, Abstände und Schriftgrößen sind als Variablen oben
   definiert – zum Anpassen genügt es, die Werte in :root zu ändern.

   Schriftsystem: bewusst auf 4 Textstile begrenzt (Kicker, Headline,
   Karten-/Blocktitel, Fließtext) und nur 2 Schriftschnitte von Basis
   Grotesque (Regular + Bold) statt fünf – für ein ruhigeres, einheitliches
   Schriftbild.
   ========================================================= */

:root {
  /* Marken-Farben (aus dem One-Pager / Brand Book) */
  --color-green: #4dd38b;
  --color-navy: #12243e;
  --color-white: #ffffff;
  --color-bg-light: #f4f6f5;   /* helles Grau-Grün für abwechselnde Abschnitte */
  --color-text: var(--color-navy);

  /* Schrift */
  --font-heading: "Varelaround", sans-serif;
  --font-body: "BasisGrotesque", sans-serif;

  /* Schriftgrößen-Skala: 5 Stile, überall wiederverwendet. H1 und H2 sind
     eigene Variablen (statt einer gemeinsamen "Headline"-Größe), damit sie
     unabhängig voneinander gesetzt werden können. */
  --fs-kicker: 0.9rem;      /* Kicker/Eyebrow, Label-Texte, Fußzeile */
  --fs-body: 1.05rem;       /* Fließtext, Buttons, Zitate, Nav */
  --fs-h3: 1.3rem;          /* Karten-/Blocktitel */
  --fs-h2: 2.1rem;          /* Abschnittsüberschriften */
  --fs-h1: 5.9rem;          /* Seiten-/Hero-Überschrift, auch Claim im Abschluss-Bereich */

  /* Abstände */
  --space-s: 1rem;
  --space-m: 2rem;
  --space-l: 4rem;
  --space-xl: 6rem;

  /* Rundungen für das Panel-Motiv aus dem One-Pager */
  --radius-panel: 90px;
  --max-width: 1100px;

  /* Effektiver linker/rechter Einzug von .container bei aktueller
     Viewport-Breite (Zentrierungs-Versatz + eigenes Padding). Dient dazu,
     Text in randbündig gezogenen Flächen (Hero, Praxis) auf dieselbe
     "Flucht" wie den Rest der Seite zu bringen. */
  --container-inset: max(var(--space-m), calc((100vw - var(--max-width)) / 2 + var(--space-m)));

  /* Breite der Textspalte im Hero-Panel + Abstand zwischen Text und der
     Rundung. Die Breite der weißen Fläche wird daraus berechnet (siehe
     .hero__bg), damit Text und Fläche IMMER zusammenpassen statt bei
     bestimmten Fensterbreiten auseinanderzulaufen. */
  --hero-text-width: 920px;
  --panel-edge-pad: 4rem;
}

/* ---------- Schriftarten ----------
   Nur 2 Schnitte von Basis Grotesque (Regular, Bold) + Varelaround für
   Überschriften – bewusst reduziert, damit der Browser keine Schnitte
   künstlich nachbilden muss und das Schriftbild ruhig bleibt. */
@font-face {
  font-family: "BasisGrotesque";
  src: url("https://www.objack.com/typo3conf/ext/theme/Resources/Public/Fonts/BasisGrotesqueRegular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "BasisGrotesque";
  src: url("https://www.objack.com/typo3conf/ext/theme/Resources/Public/Fonts/BasisGrotesqueBold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Varelaround";
  src: url("https://www.objack.com/typo3conf/ext/theme/Resources/Public/Fonts/varelaround-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
/* Hinweis: Diese Dateien liegen nur auf www.objack.com (waren im Browser-
   Export nicht enthalten, siehe LIESMICH.md). Ohne Internetverbindung beim
   Öffnen greift der Fallback "sans-serif" – dann wirken Überschriften wie
   Systemschrift statt Basis Grotesque/Varelaround. Für Produktivbetrieb
   empfiehlt sich, die Dateien lokal einzubinden statt zu verlinken. */

/* ---------- 2) Basis-Elemente ---------- */
* { box-sizing: border-box; }

/* Bilder nie breiter als ihr Container – width/height-Attribute in den
   <img>-Tags bleiben als Seitenverhältnis-Hinweis (verhindert Ruckeln beim
   Laden), die tatsächliche Darstellungsbreite folgt aber responsiv dem
   Platz. Ohne diese Regel laufen breite Bilder (z.B. 500px) auf schmalen
   Bildschirmen über den Rand hinaus. */
img {
  max-width: 100%;
  height: auto;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.55;
  font-size: var(--fs-body);
  /* Lange, ungebrochene Strings (z.B. ausgeschriebene URLs in Impressum/
     Datenschutz) sollen umbrechen statt auf schmalen Bildschirmen über
     den Rand zu laufen. */
  overflow-wrap: break-word;
}

/* H1 – Seiten-/Hero-Überschrift, und der Claim im Abschluss-Bereich */
h1, .headline {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h1);
  color: var(--color-navy);
  line-height: 1.1;
  margin: 0 0 var(--space-s);
}

/* H2 – Abschnittsüberschriften, eigene Größe, unabhängig von H1 */
h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h2);
  color: var(--color-navy);
  line-height: 1.15;
  margin: 0 0 var(--space-s);
}

/* Karten-/Blocktitel – kleiner, fett, Basis Grotesque statt Varelaround */
h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--color-navy);
  line-height: 1.2;
  margin: 0 0 0.4rem;
}

p { margin: 0 0 var(--space-s); }
p:last-child { margin-bottom: 0; }

a { color: var(--color-navy); }

/* Spezifische Klasse für weiße Links */
.link-lightblue {
    color: #69a1f0;
    transition: color 0.2s ease-in-out; /* Optional: Macht den Farbübergang weich */
}

/* Hover-Zustand für weiße Links */
.link-lightblue:hover {
    color: #ffffff;
}

/* Button/CTA – nutzt Stil 2 (Fließtext-Größe), nur fett */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2rem;
  border-radius: 40px;
  border: 2px solid var(--color-navy);
  color: var(--color-navy);
  background: transparent;
  font-weight: 700;
  font-size: var(--fs-body);
  text-decoration: none;
  transition: background-color 150ms, color 150ms;
}
.btn:hover { background: var(--color-navy); color: var(--color-white); }
.btn--solid {
  background: var(--color-navy);
  color: var(--color-white);
}
.btn--solid:hover { background: var(--color-white); color: var(--color-navy); }

/* ---------- 3) Layout-Bausteine ---------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-m);
}

.logo-container {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 12px; /* Abgerundete Ecken (Wert nach Wunsch anpassen) */
    
    /* Breite des Blocks anpassen */
    width: 350px; /* Hier deine gewünschte Breite in px eintragen */
    max-width: 100%; /* Verhindert, dass der Block auf kleinen Bildschirmen übersteht */
    box-sizing: border-box; /* Garantiert, dass Padding in die Breite eingerechnet wird */

    /* Bild-Zentrierung */
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-container img {
    height: auto; /* Erhält das Seitenverhältnis auf mobilen Geräten */
}

/* -- Kopfzeile -- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-s) var(--space-m);
}
.site-header img { height: 40px; }
.site-header nav a {
  margin-left: var(--space-m);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--fs-body);
}
.site-header nav a[aria-current="page"] { color: var(--color-green); }

/* -- Hero: Verlauf mit weißer Fläche, die an den linken Bildschirmrand
      gezogen ist (rechts abgerundet). Aufbau in 2 Ebenen:
      1) .hero (Section) hat das eigene Außen-Padding (--space-xl) – rein
         für den sichtbaren Verlaufsrand oberhalb/unterhalb der weißen
         Fläche, wird von nichts überdeckt.
      2) .hero__row (ohne eigenes Padding) ist der Positionierungs-Kontext
         für .hero__bg – dadurch entspricht die Höhe der weißen Fläche
         exakt der Höhe von .hero__panel (inkl. dessen eigenem Padding),
         nicht der vollen Section-Höhe.
      Die Breite von .hero__bg ist an --hero-text-width gekoppelt (siehe
      :root), damit Text und Fläche bei JEDER Fensterbreite zusammenpassen
      statt bei bestimmten Breiten auseinanderzulaufen. Der Text selbst
      läuft im normalen .container, beginnt also an derselben Flucht wie
      der Rest der Seite. Ersetzt die alten Illustrationen. -- */
.hero {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-green) 100%);
  padding: var(--space-xl) 0;
  /* Schutz gegen horizontales Überlaufen: --hero-text-width (920px) +
     --panel-edge-pad ergeben eine .hero__bg-Breite, die bei Fensterbreiten
     zwischen der 800px-Textumbruch-Grenze und ca. 1000px breiter als der
     Viewport wird. overflow-x:hidden kappt die randbündige Fläche an der
     Section-Grenze, ohne den Text (der im normalen .container läuft) zu
     beeinflussen. */
  overflow-x: hidden;
}
.hero__row {
  position: relative;
}
.hero__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--container-inset) + var(--hero-text-width) + var(--panel-edge-pad));
  background: var(--color-white);
  border-radius: 0 var(--radius-panel) var(--radius-panel) 0;
  z-index: 0;
}
.hero__row .container {
  position: relative;
  z-index: 1;
}
.hero__panel {
  max-width: var(--hero-text-width);
  padding: var(--space-l) 0;
}
.hero__kicker {
  color: var(--color-green);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--fs-kicker);
  margin-bottom: var(--space-s);
}
.hero__panel .btn { margin-top: var(--space-m); }

/* -- Allgemeiner Abschnitt -- */
.section {
  padding: var(--space-xl) 0;
}
.section--alt {
  background: var(--color-bg-light);
}
.section__intro {
  max-width: 720px;
  margin-bottom: var(--space-l);
}
.section__intro:last-child { margin-bottom: 0; }

/* -- Zwei-Spalten-Abschnitt (Text + Bild), z.B. Einstiegsszene -- */
.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-l);
  align-items: center;
}
/* Grid-Spalten dürfen unter die Inhaltsbreite ihrer Kinder schrumpfen –
   ohne das würde z.B. der feste 350px breite .logo-container die Spalte
   (und damit die ganze Seite) auf schmalen Bildschirmen aufsprengen. */
.split > * {
  min-width: 0;
}
/* Modifikator für Splits mit deutlich längerer Textspalte (z.B. "Warum
   ObJack"): Bild wird oben statt vertikal mittig ausgerichtet. */
.split--top {
  align-items: start;
}

/* -- Bildplatzhalter: markiert Stellen, die ein Foto/eine Grafik/einen
      Screenshot erhalten sollen, sobald einer ausgewählt/freigegeben ist -- */
.bild-platzhalter {
  width: 100%;
  border: 2px dashed var(--color-navy);
  border-radius: 24px;
  background: var(--color-bg-light);
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-m);
  font-size: var(--fs-kicker);
  color: var(--color-navy);
}
.bild-platzhalter--screenshot {
  min-height: 380px;
  aspect-ratio: 16 / 10;
}

/* -- 5-Vorteile-Raster -- */
.vorteile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-m);
}
.vorteile-card {
  background: var(--color-white);
  border-radius: 24px;
  padding: var(--space-m);
}
.vorteile-card__icon {
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-s);
}
.vorteile-card p { font-size: var(--fs-kicker); }

.mehr-erfahren {
  display: inline-block;
  margin-top: var(--space-m);
  font-weight: 700;
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mehr-erfahren:hover { color: var(--color-green); }

/* -- Praxis-Ursprung: Farbfläche statt Illustration, an den rechten
      Bildschirmrand gezogen, links abgerundet. Gleicher 2-Ebenen-Aufbau
      wie beim Hero: .praxis-wrap trägt das Außen-Padding (--space-l) für
      den Weißraum zu den Nachbarabschnitten – unangetastet, weil .praxis__bg
      NICHT relativ zu .praxis-wrap positioniert ist, sondern relativ zum
      ungepolsterten .praxis__row darin. Dadurch entspricht die Höhe der
      navyfarbenen Fläche exakt der Höhe von .praxis (inkl. dessen eigenem
      Padding), und das Außen-Padding bleibt als sichtbarer Weißraum
      erhalten statt von der Fläche überdeckt zu werden.
      Die Fläche reicht links bis über die Text-Startposition hinaus, damit
      sie den linksbündigen Text vollständig aufnimmt UND gleichzeitig den
      rechten Rand erreicht (kein Breiten-Kopplungsproblem, da links UND
      rechts verankert – die Breite ergibt sich automatisch). -- */
.praxis-wrap {
  padding: var(--space-l) 0;
}
.praxis__row {
  position: relative;
}
.praxis__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: calc(var(--container-inset) - var(--space-m));
  background: var(--color-navy);
  border-radius: var(--radius-panel) 0 0 var(--radius-panel);
  z-index: 0;
}
.praxis__row .container {
  position: relative;
  z-index: 1;
}
.praxis {
  color: var(--color-white);
  max-width: 720px;
  padding: var(--space-l) 0;
}
.praxis h2 { color: var(--color-white); }

/* -- Zitat-Box: pull quote im zweispaltigen Layout, steht anstelle eines
      Bildes neben Text (z.B. "Warum ObJack") -- */
.zitat-box {
 /* -- background: var(--color-navy);
  border-radius: 24px;
  padding: var(--space-m);
  margin: 0;
  display: flex;
  align-items: center;
  min-height: 200px; -- */
}
.zitat-box p {
  background: var(--color-white);
  border-left: 4px solid var(--color-green);
  padding: var(--space-m);
  margin-top: var(--space-2);
  font-style: italic;
  font-size: var(--fs-h3);
}

/* -- Beweise -- */
.beweise__stat {
  font-size: var(--fs-h3);
  font-weight: 700;
  max-width: 720px;
}
.beweise__logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-m);
}
.beweise__quote {
  background: var(--color-white);
  border-left: 4px solid var(--color-green);
  padding: var(--space-m);
  margin-top: var(--space-l);
  font-style: italic;
}
.beweise__quote cite {
  display: block;
  margin-top: var(--space-s);
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-kicker);
}
.beweise__placeholder {
  display: inline-block;
  margin-top: var(--space-s);
  padding: 0.3rem 0.8rem;
  border: 1px dashed var(--color-navy);
  border-radius: 20px;
  font-size: var(--fs-kicker);
}

/* -- Abschluss / Claim: Verlauf Grün -> Navy, gleichmäßig über den
      gesamten Block verteilt. Text in Weiß mit dezentem Schatten, damit
      er sowohl im grünen als auch im navyfarbenen Bereich lesbar bleibt;
      der Button ist unabhängig davon immer weiß hinterlegt. Die Fußzeile
      wird über eine weiße Linie klar abgegrenzt statt hart anzuschließen. -- */
.abschluss {
  background: linear-gradient(180deg, var(--color-green) 0%, var(--color-navy) 100%);
  padding: var(--space-xl) 0;
  text-align: center;
}
.abschluss__claim {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  color: var(--color-white);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  margin-bottom: var(--space-m);
}
.abschluss p {
  color: var(--color-white);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}
.abschluss .btn--solid {
  background: var(--color-white);
  color: var(--color-navy);
}
.abschluss .btn--solid:hover {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

/* -- Footer -- */
.site-footer {
  background: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-l) 0;
  border-top: 3px solid var(--color-white);
}
.site-footer a { color: var(--color-white); }
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l);
  justify-content: space-between;
  font-size: var(--fs-kicker);
}


.h2-ohne-hlevel {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h2);
  color: var(--color-navy);
  line-height: 1.15;
  margin: 0 0 var(--space-s);
}

/* -- Funktionen-Tabelle (Funktionsübersicht, Funktionen-Seite) -- */
.funktionen-intro {
  max-width: 720px;
  margin-bottom: var(--space-l);
}
.funktionen-legende {
  font-size: var(--fs-kicker);
  color: var(--color-navy);
  margin-bottom: var(--space-m);
}
.funktionen-table-wrap {
  overflow-x: auto;
}
.funktionen-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  table-layout: fixed;
}
.funktionen-table th,
.funktionen-table td {
  padding: 0.8rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(18, 36, 62, 0.12);
  font-size: var(--fs-kicker);
}
.funktionen-table thead th {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-navy);
}
.funktionen-table thead th:nth-child(1) { width: 22%; }
.funktionen-table thead th:nth-child(2) { width: 36%; }
.funktionen-table thead th:nth-child(3),
.funktionen-table thead th:nth-child(4),
.funktionen-table thead th:nth-child(5) { width: 14%; }
.funktionen-table tbody tr:nth-child(even):not(.funktionen-table__gruppe) {
  background: var(--color-white);
}
.funktionen-table__gruppe th {
  padding: 1.4rem 1rem 0.5rem;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--color-navy);
  background: none;
  border-bottom: 2px solid var(--color-navy);
}
.funktionen-table__gruppe:first-child th { padding-top: 0.4rem; }
.funktionen-table td.funktionen-table__check {
  text-align: center;
}
.funktionen-table__ja { color: var(--color-green); font-weight: 700; }
.funktionen-table__nein { color: rgba(18, 36, 62, 0.3); }
.funktionen-table__name { font-weight: 700; }

/* ---------- 4) Responsive: unter 800px ---------- */
@media (max-width: 800px) {
  :root {
    --fs-h1: 2.2rem;
    --fs-h2: 1.7rem;
    --fs-h3: 1.15rem;
    /* Textspalte füllt die verfügbare Breite, die Kästchenbreite folgt
       automatisch über dieselbe calc()-Formel wie am Desktop – bleibt
       also weiterhin gekoppelt, kein separater Breitenwert nötig. */
    --hero-text-width: calc(100vw - 2 * var(--space-m) - var(--panel-edge-pad));
    --panel-edge-pad: 2rem;
  }
  .hero__bg {
    border-radius: 0 40px 40px 0;
  }
  .praxis__bg {
    border-radius: 40px 0 0 40px;
  }
  .split {
    grid-template-columns: 1fr;
  }
  /* Feste 350px-Breite des Dlouhy-Logo-Kastens würde bei 1 Spalte auf
     schmalen Bildschirmen überstehen (Grid-Spalten sizen initial auf den
     Content, .logo-container's max-width:100% greift wegen der
     Grid-Berechnungsreihenfolge nicht zuverlässig) – daher hier explizit
     auf volle Breite gesetzt. */
  .logo-container {
    width: 100%;
  }
  .site-header { flex-direction: column; gap: var(--space-s); }
}