/* ---------------------------------------------------------------
   custom.css — Formilo-eigene Ergänzungen/Overrides.

   Ausgelagert aus dem inline <style>-Block in _header.php.
   MUSS als LETZTES Stylesheet eingebunden werden (nach main.css),
   damit die Regeln bei gleicher Spezifität weiterhin gewinnen —
   identische Kaskaden-Priorität wie der frühere inline-Block.
--------------------------------------------------------------- */

/* Navileiste immer dunkelblau (nicht nur im gescrollten Zustand). Der Header
   ist im Theme-Standard oben transparent (header-absolute) und wird erst per
   .sticky dunkel — wir setzen den dunkelblauen Marken-Hintergrund schon im
   Grundzustand, das weiße Logo greift ohnehin dauerhaft (siehe unten). */
.tj-header-area.header-1.header-absolute {
   background-color: var(--tj-color-theme-dark);
}

.tj-header-area.header-absolute.header-sticky.sticky {
   position: fixed;
   top: 0;
   inset-inline-start: 0;
   width: 100%;
   background-color: var(--tj-color-theme-dark);
   border-bottom: 0;
   -webkit-box-shadow: 0 0 15px 0 rgba(255, 255, 255, 0.06);
           box-shadow: 0 0 15px 0 rgba(255, 255, 255, 0.06);
   z-index: 100;
   -webkit-animation: tjHeaderSlideDown 500ms ease forwards;
           animation: tjHeaderSlideDown 500ms ease forwards;
}
.tj-header-area.header-absolute.header-sticky.sticky .header-topbar {
   display: none;
}
@-webkit-keyframes tjHeaderSlideDown {
   from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
   to   { -webkit-transform: translateY(0);      transform: translateY(0); }
}
@keyframes tjHeaderSlideDown {
   from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
   to   { -webkit-transform: translateY(0);      transform: translateY(0); }
}
.site-logo .logo img,
.hamburger_logo .mobile_logo img {
   -webkit-filter: brightness(0) invert(1);
           filter: brightness(0) invert(1);
}
.site-logo .logo img { height: 40px; width: auto; }
.hamburger_logo .mobile_logo img { max-width: 120px; height: auto; }

/* =========================================================================
   Kontaktseite (/kontakt) – Formular, Kontakt-Kacheln, Standort/Karte.
   ========================================================================= */

.kt-section {
   --kt-accent: var(--tj-color-theme-primary, #57b587);
   --kt-accent-dark: #418e69;
   --kt-dark: var(--tj-color-heading-primary, #051229);
   --kt-navy: #012738;
   --kt-text: var(--tj-color-text-body, #364052);
   --kt-muted: #7e8590;
   --kt-line: #e2e8f0;
   --kt-line-strong: #cfd8e3;
   --kt-bg-soft: #f5f8fb;
   background: linear-gradient(180deg, #ffffff 0%, #eef3f8 100%);
   /* Offset für den absolut positionierten Header (JS setzt den exakten Wert:
      Header-Höhe + 68px Abstand). Fallback verhindert Überlappung vor dem JS. */
   padding-top: var(--kt-header-offset, 168px);
   padding-bottom: 110px;
}
@media (max-width: 991px) {
   .kt-section { padding-top: var(--kt-header-offset, 128px); padding-bottom: 80px; }
}

/* ---------- Intro ---------- */
.kt-intro { text-align: left; margin: 0 0 54px; }
.kt-title { white-space: nowrap; }
@media (max-width: 575px) { .kt-title { white-space: normal; } }
.kt-eyebrow {
   display: inline-block;
   font-family: var(--tj-ff-body, 'Lato', sans-serif);
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
   font-size: 13px;
   color: var(--kt-accent-dark);
   background: rgba(87,181,135,.12);
   padding: 7px 16px;
   border-radius: 999px;
   margin-bottom: 18px;
}
.kt-title {
   font-family: var(--tj-ff-heading, 'Libre Franklin', serif);
   color: var(--kt-dark);
   font-size: clamp(25px, 2.8vw, 36px);
   line-height: 1.15;
   margin: 0 0 16px;
}
.kt-lead { color: var(--kt-text); font-size: 18px; line-height: 1.6; margin: 0; }

/* ---------- Reihe: gleiche Höhe für beide Spalten ---------- */
.kt-row { align-items: stretch; }
.kt-form-col { height: 100%; display: flex; flex-direction: column; }

/* ---------- Hinweis auf das Anfrageformular ---------- */
.kt-form-hint {
   font-size: 16.5px;
   line-height: 1.7;
   color: var(--kt-text);
   background: #fff;
   border: 1px solid var(--kt-line);
   border-left: 4px solid var(--kt-accent);
   border-radius: 14px;
   padding: 18px 22px;
   margin: 0 0 40px;
   max-width: 640px;
}
/* Auffälliger Inline-Link im Fließtext: sieht aus wie ein Button, steht aber mitten im Satz. */
.kt-inline-btn {
   display: inline-block;
   background: var(--kt-accent);
   color: #fff !important;
   font-weight: 700;
   text-decoration: none;
   padding: 3px 14px;
   border-radius: 999px;
   line-height: 1.5;
   white-space: nowrap;
   box-shadow: 0 6px 14px -6px rgba(87,181,135,.9);
   transition: background .18s, transform .05s, box-shadow .18s;
}
.kt-inline-btn:hover { background: var(--kt-accent-dark); box-shadow: 0 8px 18px -6px rgba(65,142,105,.9); }
.kt-inline-btn:active { transform: translateY(1px); }

/* ---------- Formular-Karte ---------- */
.kt-card {
   flex: 1;
   background: #fff;
   border: 1px solid var(--kt-line);
   border-radius: 22px;
   box-shadow: 0 24px 60px -30px rgba(5,18,41,.28);
   padding: clamp(24px, 3.2vw, 42px);
}

.kt-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.kt-field { display: flex; flex-direction: column; }
.kt-field-full { grid-column: 1 / -1; }
@media (max-width: 575px) { .kt-fields { grid-template-columns: 1fr; } }
.kt-field-label { font-weight: 600; color: var(--kt-dark); font-size: 14.5px; margin-bottom: 7px; display: block; }
.kt-req { color: var(--kt-accent-dark); }
.kt-opt { color: var(--kt-muted); font-weight: 400; }

.kt-input, .kt-textarea {
   width: 100%;
   border: 1.5px solid var(--kt-line-strong);
   border-radius: 12px;
   padding: 8px 15px;
   line-height: 1.3;
   font-family: var(--tj-ff-body, 'Lato', sans-serif);
   font-size: 14.5px; color: var(--kt-dark);
   background: #fff;
   transition: border-color .18s, box-shadow .18s;
}
/* Einzeilige Felder bewusst niedrig halten (das Theme setzt global mehr Höhe). */
.kt-input:not(textarea) { height: 42px; }
.kt-input:focus, .kt-textarea:focus {
   outline: none; border-color: var(--kt-accent);
   box-shadow: 0 0 0 3px rgba(87,181,135,.15);
}
.kt-input.is-invalid, .kt-textarea.is-invalid { border-color: #e04141; }
.kt-input::placeholder, .kt-textarea::placeholder { color: #9aa3ad; opacity: 1; }
.kt-textarea { resize: vertical; min-height: 120px; }
.kt-select {
   -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
   padding-right: 44px; cursor: pointer;
   background-color: #fff;
   background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%237e8590' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 16px center;
}
.kt-select::-ms-expand { display: none; }

/* ---------- Upload (Vorlagen / Dokumente) ---------- */
.kt-drop {
   position: relative;
   border: 2px dashed var(--kt-line-strong);
   border-radius: 14px;
   background: var(--kt-bg-soft);
   padding: 15px 20px;
   text-align: left;
   cursor: pointer;
   transition: border-color .18s, background .18s;
}
.kt-drop:hover, .kt-drop.is-drag { border-color: var(--kt-accent); background: rgba(87,181,135,.06); }
.kt-drop input[type="file"] {
   position: absolute; inset: 0; width: 100%; height: 100%;
   opacity: 0; cursor: pointer;
}
/* Icon links neben dem Text statt oben drüber -> spart Höhe. */
.kt-drop-inner { display: flex; align-items: center; gap: 16px; }
.kt-drop-inner > i { font-size: 26px; color: var(--kt-accent); flex: 0 0 auto; }
.kt-drop-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kt-drop-title { margin: 0; font-weight: 600; color: var(--kt-dark); font-size: 15.5px; }
.kt-drop-title span { color: var(--kt-accent-dark); text-decoration: underline; }
.kt-drop-sub { margin: 0; color: var(--kt-muted); font-size: 13px; }

.kt-filelist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.kt-filelist li {
   display: flex; align-items: center; gap: 12px;
   padding: 11px 14px; border: 1px solid var(--kt-line);
   border-radius: 12px; background: #fff; font-size: 15px; color: var(--kt-dark);
}
.kt-filelist li .kt-file-ic { color: var(--kt-accent); }
.kt-filelist li .kt-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-filelist li.is-uploading { opacity: .6; }
.kt-file-remove {
   border: none; background: none; cursor: pointer; color: var(--kt-muted);
   font-size: 16px; padding: 4px; line-height: 1;
}
.kt-file-remove:hover { color: #e04141; }
.kt-note { margin: 14px 0 0; font-size: 13.5px; color: var(--kt-muted); }
.kt-note i { color: var(--kt-accent); margin-right: 6px; }

/* ---------- Absende-Zeile ---------- */
.kt-submit-row {
   display: flex; align-items: center; flex-wrap: wrap;
   gap: 10px 22px; margin-top: 26px;
}
.kt-btn-submit {
   border: none; cursor: pointer;
   font-family: var(--tj-ff-body, 'Lato', sans-serif);
   font-weight: 700; font-size: 16px; color: #fff;
   background: var(--kt-accent);
   padding: 15px 30px; border-radius: 12px;
   display: inline-flex; align-items: center; gap: 10px;
   transition: background .18s, transform .05s, box-shadow .18s;
   box-shadow: 0 10px 22px -10px rgba(87,181,135,.7);
}
.kt-btn-submit:hover { background: var(--kt-accent-dark); }
.kt-btn-submit:active { transform: translateY(1px); }
.kt-btn-submit[disabled] { opacity: .7; cursor: default; }
.kt-reassure { margin: 0; color: var(--kt-muted); font-size: 13.5px; }
.kt-reassure i { color: var(--kt-accent); margin-right: 6px; }

/* Datenschutz-Hinweis oberhalb des Senden-Buttons (ohne Checkbox). */
.kt-privacy-note { margin: 22px 0 0; font-size: 13.5px; color: var(--kt-muted); line-height: 1.55; }
.kt-privacy-note a { color: var(--kt-accent-dark); text-decoration: underline; font-weight: 600; }

.kt-spinner {
   width: 17px; height: 17px; border-radius: 50%;
   border: 2.5px solid rgba(255,255,255,.5); border-top-color: #fff;
   animation: ktSpin .7s linear infinite; display: inline-block;
}
@keyframes ktSpin { to { transform: rotate(360deg); } }

/* ---------- Honeypot ---------- */
.kt-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Fehler ---------- */
.kt-error {
   margin: 20px 0 0; padding: 13px 16px;
   background: rgba(224,65,65,.06); border: 1px solid rgba(224,65,65,.25);
   border-radius: 12px; color: #b12020; font-size: 15px; font-weight: 600;
}

/* ---------- Danke-Screen ---------- */
.kt-done { text-align: center; padding: 20px 10px; }
.kt-done[hidden] { display: none; }
.kt-done-check {
   width: 84px; height: 84px; margin: 0 auto 24px;
   border-radius: 50%; background: rgba(87,181,135,.14);
   display: flex; align-items: center; justify-content: center;
}
.kt-done-check i { font-size: 38px; color: var(--kt-accent); }
.kt-done-title {
   font-family: var(--tj-ff-heading, 'Libre Franklin', serif);
   color: var(--kt-dark); font-size: clamp(23px, 3vw, 30px); margin: 0 0 14px;
}
.kt-done-text { color: var(--kt-text); font-size: 17px; line-height: 1.6; max-width: 520px; margin: 0 auto 26px; }
.kt-done-home {
   display: inline-block; font-weight: 700; color: var(--kt-accent-dark);
   border: 1.5px solid var(--kt-accent); border-radius: 12px;
   padding: 12px 26px; text-decoration: none; transition: background .18s, color .18s;
}
.kt-done-home:hover { background: var(--kt-accent); color: #fff; }

/* ---------- Kontakt-Kacheln (rechts) ---------- */
.kt-tiles {
   display: flex; flex-direction: column;
   gap: 30px;
}
.kt-tile {
   position: relative;
   flex: 0 0 auto;
   min-height: 150px;
   display: flex; flex-direction: column; justify-content: center;
   gap: 16px;
   padding: 24px 28px;
   border-radius: 20px;
   text-decoration: none;
   color: #fff;
   overflow: hidden;
   transition: transform .2s ease, box-shadow .2s ease;
   box-shadow: 0 18px 44px -26px rgba(5,18,41,.55);
}
.kt-tile:hover { transform: translateY(-4px); box-shadow: 0 26px 54px -24px rgba(5,18,41,.6); }
.kt-tile:focus-visible { outline: 3px solid rgba(255,255,255,.7); outline-offset: 3px; }

.kt-tile--mail  { background: var(--kt-accent); }
.kt-tile--phone { background: var(--kt-navy); }
.kt-tile--cta   { background: linear-gradient(135deg, #57b587 0%, #35815d 100%); }

.kt-tile-icon {
   width: 62px; height: 62px; border-radius: 16px;
   background: rgba(255,255,255,.16);
   display: inline-flex; align-items: center; justify-content: center;
   font-size: 31px; color: #fff;
}
.kt-tile-body { display: flex; flex-direction: column; gap: 3px; }
.kt-tile-label {
   font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
   color: rgba(255,255,255,.82);
}
.kt-tile-value {
   font-family: var(--tj-ff-heading, 'Libre Franklin', serif);
   font-size: clamp(19px, 1.9vw, 23px); font-weight: 700; line-height: 1.25; color: #fff;
   word-break: break-word;
}
.kt-tile-sub { font-size: 14px; color: rgba(255,255,255,.8); }
.kt-tile-arrow {
   position: absolute; top: 26px; right: 28px;
   width: 40px; height: 40px; border-radius: 50%;
   background: rgba(255,255,255,.16);
   display: inline-flex; align-items: center; justify-content: center;
   font-size: 15px; color: #fff;
   transition: background .2s, transform .2s;
}
.kt-tile:hover .kt-tile-arrow { background: rgba(255,255,255,.3); transform: translate(3px,-3px); }

/* Kacheln unter der Form (mobil): Abstand nach oben */
@media (max-width: 991px) {
   .kt-tiles { margin-top: 30px; }
}

/* ---------- Standort / Karte ---------- */
/* Vollbreite Karte, bündig zum Footer: keine Rundung, keine Lücke darunter. */
.kt-map-section { padding: 0; background: #eef3f8; }
.kt-map { overflow: hidden; line-height: 0; }
.kt-map iframe { width: 100%; height: 600px; border: 0; display: block; }
@media (max-width: 767px) { .kt-map iframe { height: 420px; } }

/* =====================================================================
   Menü-Dropdown „Vordrucke": Eintrag „Alle Vordrucke" hervorheben.
   Soll als grüner Button klar aus der Liste herausstechen und nicht
   übersehbar sein — durch Trennlinie darüber abgesetzt.
   ===================================================================== */

/* --- Desktop-Dropdown --- */
.mainmenu ul > li > .sub-menu > li.vordrucke-all {
   margin-top: 8px;
   padding-top: 10px;
   border-top: 1px solid var(--kt-line, #e2e8f0);
}
.mainmenu ul > li > .sub-menu > li.vordrucke-all > a {
   width: auto;
   margin: 0 12px;
   padding: 11px 16px !important;
   background: var(--tj-color-theme-primary, #57b587);
   color: #fff !important;
   font-weight: 700;
   border-radius: 8px;
   line-height: 1.2;
}
/* grünen Hover-Balken des Themes für dieses Item unterdrücken */
.mainmenu ul > li > .sub-menu > li.vordrucke-all > a::before {
   display: none !important;
}
/* Pfeil hinter dem Label (icon-font-unabhängig) */
.mainmenu ul > li > .sub-menu > li.vordrucke-all > a::after {
   content: "→";
   position: static;
   margin-inline-start: 8px;
   font-weight: 700;
}
/* Hover: Padding-Shift der Theme-Regel aufheben, nur abdunkeln */
.mainmenu ul > li > .sub-menu > li.vordrucke-all:hover > a {
   background: var(--kt-accent-dark, #418e69);
   color: #fff !important;
   padding-inline-start: 16px !important;
   padding-inline-end: 16px !important;
}

/* --- Mobiles Hamburger-Menü (meanmenu klont die Klasse) --- */
.hamburger_menu .mean-nav ul li .sub-menu li.vordrucke-all > a {
   display: inline-block;
   width: auto;
   margin: 8px 0;
   padding: 12px 18px;
   background: var(--tj-color-theme-primary, #57b587);
   color: #fff !important;
   font-weight: 700;
   border-radius: 8px;
}

/* =====================================================================
   Rechtliche Seiten (/impressum/, /agb/, /datenschutzerklaerung/): Impressum, AGB, Datenschutz.
   Gemeinsame Tokens + Hero-Band; danach seiten-spezifische Blöcke.
   Der Header ist absolut/transparent → jede Seite startet mit einem
   dunklen Hero-Band, damit das weiße Logo lesbar bleibt.
   ===================================================================== */

.lg-hero,
.lg-body,
.lg-doc-section {
   --lg-accent: var(--tj-color-theme-primary, #57b587);
   --lg-accent-dark: #418e69;
   --lg-dark: var(--tj-color-heading-primary, #051229);
   --lg-navy: #012738;
   --lg-text: var(--tj-color-text-body, #364052);
   --lg-muted: #7e8590;
   --lg-line: #e2e8f0;
   --lg-line-strong: #cfd8e3;
   --lg-bg-soft: #f5f8fb;
}

/* ---------- Dunkles Hero-Band (alle Rechtsseiten) ---------- */
.lg-hero {
   position: relative;
   overflow: hidden;
   background:
      radial-gradient(1100px 460px at 78% -8%, rgba(87, 181, 135, .22), transparent 60%),
      linear-gradient(160deg, #012738 0%, #051229 100%);
   padding: clamp(150px, 17vw, 208px) 0 clamp(66px, 8vw, 100px);
   text-align: center;
}
.lg-hero::after {
   content: "";
   position: absolute;
   inset-inline: 0;
   bottom: -1px;
   height: 60px;
   background: var(--lg-bg-soft);
   -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 L0 26 Q 720 -26 1440 26 L1440 60 Z' fill='%23000'/%3E%3C/svg%3E");
           mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 L0 26 Q 720 -26 1440 26 L1440 60 Z' fill='%23000'/%3E%3C/svg%3E");
   -webkit-mask-size: 100% 100%;
           mask-size: 100% 100%;
   -webkit-mask-repeat: no-repeat;
           mask-repeat: no-repeat;
}
.lg-hero-shape {
   position: absolute;
   top: 12%;
   inset-inline-start: 6%;
   width: 190px;
   opacity: .05;
   pointer-events: none;
}
.lg-hero-shape img { width: 100%; height: auto; }
.lg-hero .container { position: relative; z-index: 2; }
.lg-eyebrow {
   display: inline-block;
   font-family: var(--tj-ff-body, 'Lato', sans-serif);
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   font-size: 12.5px;
   color: #a7e6c6;
   background: rgba(87, 181, 135, .14);
   border: 1px solid rgba(87, 181, 135, .3);
   padding: 7px 17px;
   border-radius: 999px;
   margin-bottom: 20px;
}
.lg-hero-title {
   font-family: var(--tj-ff-heading, 'Libre Franklin', serif);
   color: #fff;
   font-size: clamp(32px, 4.6vw, 54px);
   line-height: 1.08;
   margin: 0 auto 18px;
   max-width: 15ch;
}
.lg-hero-lead {
   color: rgba(255, 255, 255, .78);
   font-size: clamp(16px, 1.5vw, 18.5px);
   line-height: 1.65;
   margin: 0 auto;
   max-width: 68ch;
}
.lg-hero-meta { margin: 18px 0 0; font-size: 14.5px; color: rgba(255, 255, 255, .55); }

/* =====================================================================
   IMPRESSUM – auf hellem Untergrund, klar und vertrauensbildend.
   ===================================================================== */

.imp-body {
   background: var(--lg-bg-soft);
   /* Offset für den absolut positionierten Header (wie Kontaktseite). */
   padding: 168px 0 0;
}
@media (max-width: 991px) { .imp-body { padding-top: 128px; } }

/* ---------- Kopf: Titel + kurzer Satz ---------- */
.imp-head { margin: 0 0 clamp(34px, 4vw, 52px); }
.imp-h1 {
   font-family: var(--tj-ff-heading, 'Libre Franklin', serif);
   color: var(--lg-dark);
   font-size: clamp(30px, 4vw, 46px);
   line-height: 1.12;
   margin: 0 0 12px;
}
.imp-lead { color: var(--lg-text); font-size: 17px; line-height: 1.6; margin: 0; }

/* ---------- Karten-Reihe: Kontakt + Unternehmensdaten ---------- */
.imp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 767px) { .imp-cards { grid-template-columns: 1fr; gap: 20px; } }

.imp-card {
   background: #fff;
   border: 1px solid var(--lg-line);
   border-radius: 22px;
   box-shadow: 0 24px 60px -34px rgba(5, 18, 41, .28);
   padding: clamp(26px, 3vw, 40px);
}
.imp-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.imp-card-ic {
   flex: 0 0 auto;
   width: 52px; height: 52px; border-radius: 14px;
   background: rgba(87, 181, 135, .12);
   color: var(--lg-accent-dark);
   display: inline-flex; align-items: center; justify-content: center;
   font-size: 23px;
}
.imp-card-title {
   font-family: var(--tj-ff-heading, 'Libre Franklin', serif);
   color: var(--lg-dark);
   font-size: clamp(20px, 2.2vw, 25px);
   margin: 0;
}

/* Datenliste (Kontakt- & Unternehmensdaten – einheitliches Design) */
.imp-datalist { margin: 0; }
.imp-datarow {
   display: grid; grid-template-columns: 42% 1fr; gap: 12px;
   padding: 13px 2px;
   border-bottom: 1px solid var(--lg-line);
}
.imp-datalist .imp-datarow:last-child { border-bottom: 0; }
.imp-datarow dt { color: var(--lg-muted); font-size: 14.5px; font-weight: 600; margin: 0; }
.imp-datarow dd { color: var(--lg-dark); font-size: 15.5px; font-weight: 700; margin: 0; word-break: break-word; }
.imp-datarow dd a { color: var(--lg-accent-dark); text-decoration: none; }
.imp-datarow dd a:hover { text-decoration: underline; }
@media (max-width: 400px) { .imp-datarow { grid-template-columns: 1fr; gap: 3px; } .imp-datarow dt { font-size: 13px; } }

/* ---------- Geschäftsführer ---------- */
.imp-founder { margin-top: clamp(46px, 6vw, 78px); }
.imp-founder-box {
   display: grid; grid-template-columns: 0.95fr 1.05fr; align-items: stretch;
   background: #fff;
   border: 1px solid var(--lg-line);
   border-radius: 26px;
   overflow: hidden;
   box-shadow: 0 30px 70px -38px rgba(5, 18, 41, .32);
}
@media (max-width: 860px) { .imp-founder-box { grid-template-columns: 1fr; } }
.imp-founder-media { position: relative; min-height: 340px; background: #dfe7ee; }
.imp-founder-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .imp-founder-media { min-height: 300px; } }
.imp-founder-content { padding: clamp(28px, 3.4vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.imp-founder-role {
   display: inline-block; align-self: flex-start;
   font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
   color: var(--lg-accent-dark);
   background: rgba(87, 181, 135, .12);
   padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}
.imp-founder-name {
   font-family: var(--tj-ff-heading, 'Libre Franklin', serif);
   color: var(--lg-dark);
   font-size: clamp(26px, 3vw, 36px); line-height: 1.12; margin: 0 0 8px;
}
.imp-founder-sub { color: var(--lg-muted); font-size: 16px; margin: 0 0 18px; }
.imp-founder-text { color: var(--lg-text); font-size: 16.5px; line-height: 1.7; margin: 0 0 14px; }
.imp-founder-note {
   margin: 8px 0 0; padding: 14px 16px;
   background: var(--lg-bg-soft); border: 1px solid var(--lg-line);
   border-radius: 12px; font-size: 14px; color: var(--lg-muted); line-height: 1.55;
}

/* ---------- Kunden, Auszeichnungen und Bewertungen (nur Logo-Slider) ---------- */
.imp-trust { margin-top: clamp(56px, 7vw, 92px); }
.imp-sec-head { text-align: center; max-width: 640px; margin: 0 auto clamp(30px, 4vw, 46px); }
.imp-sec-title {
   font-family: var(--tj-ff-heading, 'Libre Franklin', serif);
   color: var(--lg-dark); font-size: clamp(25px, 3vw, 36px); line-height: 1.15; margin: 0 0 12px;
}
.imp-sec-desc { color: var(--lg-text); font-size: 17px; line-height: 1.6; margin: 0; }
.imp-trust-brand { margin-top: clamp(30px, 4vw, 48px); }
/* Logos wie auf der Bautagesbericht-Seite: ohne Kachel-Hintergrund, ohne
   Invert-Filter; alle Logos auf einheitliche Höhe (Originalgrafiken, unbearbeitet). */
.imp-trust .brand-slider-2 .brand-logo { background: transparent; }
.imp-trust .brand-slider-2 .brand-logo img {
   -webkit-filter: none; filter: none;
   height: 46px; width: auto; max-width: 170px;
   -o-object-fit: contain; object-fit: contain;
}
@media (max-width: 575px) {
   .imp-trust .brand-slider-2 .brand-logo img { height: 38px; }
}

/* ---------- Nutzungsbedingungen (Rechtstext im Impressum) ---------- */
.imp-legal { padding: clamp(56px, 7vw, 96px) 0 clamp(66px, 8vw, 104px); }
.imp-legal-wrap {
   background: #fff; border: 1px solid var(--lg-line); border-radius: 22px;
   box-shadow: 0 24px 60px -40px rgba(5, 18, 41, .26);
   padding: clamp(30px, 4vw, 60px);
}
.imp-legal-wrap > h2 {
   font-family: var(--tj-ff-heading, 'Libre Franklin', serif);
   color: var(--lg-dark); font-size: clamp(24px, 2.8vw, 32px); margin: 0 0 8px;
}
.imp-legal-intro { color: var(--lg-muted); font-size: 16px; margin: 0 0 34px; }
.imp-legal-item { padding-top: 26px; margin-top: 26px; border-top: 1px solid var(--lg-line); }
.imp-legal-item:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.imp-legal-item h3 {
   position: relative; padding-inline-start: 18px;
   font-family: var(--tj-ff-heading, 'Libre Franklin', serif);
   color: var(--lg-dark); font-size: clamp(18px, 2vw, 21px); margin: 0 0 12px;
}
.imp-legal-item h3::before {
   content: ""; position: absolute; inset-inline-start: 0; top: 4px; bottom: 4px;
   width: 4px; border-radius: 4px; background: var(--lg-accent);
}
.imp-legal-item p { color: var(--lg-text); font-size: 16px; line-height: 1.72; margin: 0 0 12px; }
.imp-legal-item p:last-child { margin-bottom: 0; }
.imp-legal-item a { color: var(--lg-accent-dark); text-decoration: underline; }

/* ---------- Schließende CTA-Zeile (Impressum) ---------- */
.imp-cta {
   margin: clamp(30px, 4vw, 46px) 0 0;
   text-align: center;
   background: linear-gradient(150deg, #012738 0%, #051229 100%);
   border-radius: 22px;
   padding: clamp(34px, 4.5vw, 60px);
   color: #fff;
}
.imp-cta h2 { color: #fff; font-family: var(--tj-ff-heading, 'Libre Franklin', serif); font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 12px; }
.imp-cta p { color: rgba(255, 255, 255, .8); font-size: 16.5px; line-height: 1.6; margin: 0 auto 26px; max-width: 60ch; }

/* =====================================================================
   AGB & DATENSCHUTZ – schlichtes, dezentes Rechtsdokument.
   ===================================================================== */

.lg-doc-section {
   background: var(--lg-bg-soft);
   padding: clamp(52px, 7vw, 90px) 0 clamp(66px, 8vw, 104px);
}
.lg-doc-grid {
   display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px);
   align-items: start;
   max-width: 1120px; margin: 0 auto;
}
@media (max-width: 991px) { .lg-doc-grid { grid-template-columns: 1fr; gap: 24px; } }

/* Schlichte Variante (AGB): kein Hero-Band, keine TOC, Titel klein,
   Inhalt in voller Breite (boxed). */
.lg-doc-plain {
   /* Offset für den absolut/transparenten Header (kein Hero-Band davor). */
   padding-top: 168px;
}
@media (max-width: 991px) { .lg-doc-plain { padding-top: 128px; } }
.lg-doc-wrap { max-width: 1120px; margin: 0 auto; padding-inline: 15px; }
.lg-doc-h1 {
   font-family: var(--tj-ff-heading, 'Libre Franklin', serif);
   color: var(--lg-dark);
   font-size: clamp(26px, 3vw, 36px);
   line-height: 1.15;
   margin: 0 0 clamp(20px, 3vw, 32px);
}

/* Inhaltsverzeichnis (dezent, sticky auf Desktop) */
.lg-toc {
   position: sticky; top: 120px;
   max-height: calc(100vh - 150px); overflow-y: auto;
   background: #fff; border: 1px solid var(--lg-line); border-radius: 16px;
   padding: 22px 22px 24px;
   box-shadow: 0 18px 44px -34px rgba(5, 18, 41, .25);
}
@media (max-width: 991px) { .lg-toc { position: static; top: auto; max-height: none; overflow: visible; } }
.lg-toc-title {
   font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
   color: var(--lg-muted); margin: 0 0 14px;
}
.lg-toc ol, .lg-toc ul { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.lg-toc li { margin: 0; }
.lg-toc a {
   display: block; padding: 7px 0; padding-inline-start: 2px;
   color: var(--lg-text); font-size: 14.5px; line-height: 1.4; text-decoration: none;
   border-bottom: 1px solid var(--lg-line);
   transition: color .15s;
}
.lg-toc li:last-child a { border-bottom: 0; }
.lg-toc a:hover { color: var(--lg-accent-dark); }
.lg-toc.lg-toc-num ol { counter-reset: toc; }
.lg-toc.lg-toc-num a::before {
   counter-increment: toc; content: counter(toc) ". ";
   color: var(--lg-accent-dark); font-weight: 700;
}

/* Dokumentkarte */
.lg-doc {
   background: #fff; border: 1px solid var(--lg-line); border-radius: 20px;
   box-shadow: 0 24px 60px -42px rgba(5, 18, 41, .24);
   padding: clamp(28px, 4vw, 60px);
}
.lg-doc-lead {
   color: var(--lg-text); font-size: 17px; line-height: 1.7; margin: 0 0 10px;
}
.lg-doc-stand {
   display: inline-block; margin: 0 0 24px;
   font-size: 13.5px; font-weight: 600; color: var(--lg-muted);
   background: var(--lg-bg-soft); border: 1px solid var(--lg-line);
   padding: 6px 14px; border-radius: 999px;
}
.lg-doc section { scroll-margin-top: 120px; }
.lg-doc h2 {
   font-family: var(--tj-ff-heading, 'Libre Franklin', serif);
   color: var(--lg-dark); font-size: clamp(20px, 2.4vw, 26px);
   line-height: 1.25; margin: 40px 0 16px; padding-top: 8px;
}
.lg-doc section:first-of-type h2:first-child,
.lg-doc > h2:first-child { margin-top: 0; }
.lg-doc h3 {
   font-family: var(--tj-ff-heading, 'Libre Franklin', serif);
   color: var(--lg-dark); font-size: clamp(16px, 1.8vw, 18.5px); margin: 22px 0 8px;
}
.lg-doc p { color: var(--lg-text); font-size: 16px; line-height: 1.74; margin: 0 0 14px; }
.lg-doc ul, .lg-doc ol { margin: 0 0 16px; padding-inline-start: 4px; list-style: none; }
.lg-doc li { position: relative; padding-inline-start: 26px; margin-bottom: 10px; color: var(--lg-text); font-size: 16px; line-height: 1.7; }
.lg-doc li::before {
   content: ""; position: absolute; inset-inline-start: 4px; top: 11px;
   width: 7px; height: 7px; border-radius: 50%; background: var(--lg-accent);
}
.lg-doc strong { color: var(--lg-dark); }
.lg-doc a { color: var(--lg-accent-dark); text-decoration: underline; word-break: break-word; }

/* Nummerierte Hauptabschnitte (AGB) */
.lg-doc.lg-doc-num { counter-reset: sec; }
.lg-doc.lg-doc-num > section { counter-increment: sec; }

/* Hervorgehobener Info-Block (z. B. „Verantwortlicher") */
.lg-callout {
   background: var(--lg-bg-soft);
   border: 1px solid var(--lg-line);
   border-inline-start: 4px solid var(--lg-accent);
   border-radius: 12px;
   padding: 20px 22px;
   margin: 0 0 8px;
}
.lg-callout ul { margin: 0; }
.lg-callout li { margin-bottom: 8px; }
.lg-callout li:last-child { margin-bottom: 0; }

/* „Zurück nach oben" am Dokumentende */
.lg-top-link {
   display: inline-flex; align-items: center; gap: 8px;
   margin-top: 34px; font-size: 14.5px; font-weight: 700;
   color: var(--lg-accent-dark); text-decoration: none;
}
.lg-top-link:hover { color: var(--lg-accent); }

/* ---------- Schlichte Variante ohne Hero-Band und ohne Inhaltsverzeichnis
   (Datenschutz): Dokument in voller, boxed Breite; Offset für den
   absolut positionierten, transparenten Header. ---------- */
.lg-doc-plain { padding-top: 176px; }
@media (max-width: 991px) { .lg-doc-plain { padding-top: 128px; } }
.lg-doc-wrap {
   max-width: 1120px; margin: 0 auto;
   padding-inline: clamp(16px, 4vw, 24px);
}
.lg-doc-h1 {
   font-family: var(--tj-ff-heading, 'Libre Franklin', serif);
   color: var(--lg-dark);
   font-size: clamp(26px, 3vw, 34px);
   line-height: 1.15;
   margin: 0 0 18px;
}

/* =====================================================================
   Vordruck-Seiten: Problem-/Vorteil-Vergleich ("ohne uns" vs. "mit uns").
   3. Abschnitt jeder Formular-Landingpage, direkt nach dem Social Proof.
   Zwei Spalten: LINKS die häufigsten Probleme (rotes Kreuz, negativ),
   RECHTS der Nutzen einer Zusammenarbeit (grüner Haken, positiv). Farblich
   klar getrennt, damit auf einen Blick erkennbar ist, was Sache ist.
   Formularunabhängig — von allen Vordruck-Seiten genutzt.
   ===================================================================== */
.formilo-compare-section {
   --fc-red: #e2574c;
   --fc-red-dark: #c23c32;
   --fc-red-soft: #fdf2f1;
   --fc-red-line: #f3d6d3;
   --fc-green: var(--tj-color-theme-primary, #57b587);
   --fc-green-dark: #35815d;
   --fc-green-soft: #f0f8f4;
   --fc-green-line: #cfe8db;
   --fc-dark: var(--tj-color-heading-primary, #051229);
   --fc-text: var(--tj-color-text-body, #364052);
   background: linear-gradient(180deg, #ffffff 0%, #f5f8fb 100%);
}

/* ---------- Kopf: nur Überschrift (kein Untertitel) ---------- */
/* Breiter Kopf + kleinere Überschrift, damit der Titel möglichst in EINE
   Zeile passt. Kein Fließtext unter der h2. */
.formilo-compare-head { text-align: center; max-width: 1040px; margin: 0 auto clamp(34px, 4.5vw, 54px); }
.formilo-compare-head .sec-title { margin-bottom: 0; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2; }

/* ---------- Zwei gleich hohe Spalten ---------- */
.formilo-compare-grid {
   display: grid; grid-template-columns: 1fr 1fr;
   gap: clamp(20px, 2.5vw, 32px); align-items: stretch;
}
@media (max-width: 767px) { .formilo-compare-grid { grid-template-columns: 1fr; } }

.formilo-compare-card {
   border: 1px solid transparent;
   border-radius: 22px;
   padding: clamp(24px, 3vw, 40px);
   box-shadow: 0 24px 60px -40px rgba(5, 18, 41, .3);
}
.formilo-compare-card--problem {
   background: var(--fc-red-soft);
   border-color: var(--fc-red-line);
   border-top: 4px solid var(--fc-red);
}
.formilo-compare-card--benefit {
   background: var(--fc-green-soft);
   border-color: var(--fc-green-line);
   border-top: 4px solid var(--fc-green);
}

/* ---------- Spaltenüberschrift mit Badge ---------- */
.formilo-compare-card-title {
   display: flex; align-items: center; gap: 14px;
   font-family: var(--tj-ff-heading, 'Libre Franklin', serif);
   font-size: clamp(19px, 2.1vw, 24px); line-height: 1.2;
   margin: 0 0 24px;
}
.formilo-compare-card--problem .formilo-compare-card-title { color: var(--fc-red-dark); }
.formilo-compare-card--benefit .formilo-compare-card-title { color: var(--fc-green-dark); }
.formilo-compare-badge {
   flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px;
   display: inline-flex; align-items: center; justify-content: center; font-size: 21px;
}
.formilo-compare-card--problem .formilo-compare-badge { background: #fff; color: var(--fc-red); box-shadow: 0 6px 16px -8px rgba(226, 87, 76, .6); }
.formilo-compare-card--benefit .formilo-compare-badge { background: #fff; color: var(--fc-green); box-shadow: 0 6px 16px -8px rgba(87, 181, 135, .6); }

/* ---------- Punkte-Liste ---------- */
.formilo-compare-list { list-style: none; margin: 0; padding: 0; }
.formilo-compare-list li {
   display: flex; align-items: flex-start; gap: 14px;
   padding: 14px 0;
   font-size: 16.5px; line-height: 1.55; color: var(--fc-dark);
}
.formilo-compare-card--problem .formilo-compare-list li + li { border-top: 1px solid var(--fc-red-line); }
.formilo-compare-card--benefit .formilo-compare-list li + li { border-top: 1px solid var(--fc-green-line); }
.formilo-compare-ic {
   flex: 0 0 auto; width: 26px; height: 26px; margin-top: 1px;
   border-radius: 50%;
   display: inline-flex; align-items: center; justify-content: center;
   font-size: 12px; font-weight: 700;
}
.formilo-compare-card--problem .formilo-compare-ic { background: var(--fc-red); color: #fff; }
.formilo-compare-card--benefit .formilo-compare-ic { background: var(--fc-green); color: #fff; }
@media (max-width: 575px) {
   .formilo-compare-list li { font-size: 15.5px; }
}

/* ===== Autorenseite /author/mehmet-bayram ===== */
/* Einfluss & Zukunftsvision: Insight-Akkordeon über die volle Boxbreite */
.author-insight-full .h6-insight_accordion,
.author-insight-full .sec-heading { max-width: 100%; }

/* Einfluss & Zukunftsvision: Box hellblau wie die Karten im Abschnitt davor (#E1E8F0) */
.author-insight-full .h6-insight_accordion {
   background-color: #E1E8F0;
   border-color: rgba(6, 19, 39, 0.08);
}
.author-insight-full .h6-insight_accordion .accordion_item:not(:last-child) {
   border-bottom-color: rgba(6, 19, 39, 0.08);
}

/* Praktische Anwendungen: drei gleich hohe Feature-Kacheln */
.author-feature-equal .tj-feature { height: 100%; }

/* =====================================================================
   Vordruck-Seiten „Warum mit Formilo": Umbruch + Mobil-Padding.
   1) Spalten schon bis 991px stapeln (deckt Smartphone-Querformat ab),
      damit Text nicht in einer schmalen halben Spalte klebt und die Seite
      unnötig lang macht — Text volle Breite, Bild darunter.
   2) main.css setzt padding-left/right der Textspalte per !important
      unbedingt auf 80px/70px (gilt sonst auch auf dem Handy) — hier für
      kleine Viewports zurücknehmen, damit der Text die volle Breite nutzt.
   ===================================================================== */
@media (max-width: 991px) {
   .why-formilo-section .col-md-6 {
      width: 100%;
      flex: 0 0 100%;
      max-width: 100%;
   }
   .why-formilo-content {
      padding-left: 30px !important;
      padding-right: 30px !important;
      /* main.css schiebt den Textblock per flex-end nach rechts und deckelt
         ihn auf 680px — auf Mobil volle Breite, linksbündig. */
      justify-content: flex-start !important;
   }
   .why-formilo-content .sec-heading { max-width: 100% !important; }
}
@media (max-width: 575px) {
   .why-formilo-content {
      padding-left: 20px !important;
      padding-right: 20px !important;
   }
}

/* =====================================================================
   Google-Bewertungen (gr-slider): Sterne-/Logo-Spalte (links) mehr Raum,
   Sterne weiter weg vom Autornamen, rechte Text-/Namensspalte schmaler.
   - Desktop (>=992px): breiterer linker Gutter + größerer Abstand Sterne→Name.
   - Tablet/Smartphone-Querformat (<=991px): Logo+Sterne in den normalen
     Fluss über den Namen (statt absolut im Gutter), damit sie nicht mehr
     an der Kartenkante kleben. (main.css macht das erst ab <=767px.)
   ===================================================================== */
@media (min-width: 992px) {
   .gr-slider .testimonial-content { gap: 60px; }
   .gr-slider .gr-author .gr-media { margin-right: 34px; }
}
@media (max-width: 991px) {
   /* linksbündig erzwingen (eine spätere Basisregel setzt sonst align-items:center) */
   .gr-slider .gr-author { align-items: flex-start; }
   .gr-slider .gr-author .gr-media {
      position: static;
      right: auto;
      top: auto;
      margin-right: 0;
      margin-bottom: 10px;
      flex-direction: row;
      align-items: center;
      gap: 12px;
   }
   .gr-slider .gr-author .gr-media .author-images { margin-bottom: 0; }
}

/* FAQ-Seite (/info/faq/): kleinere Abschnittsueberschriften */
.faq-h2 { font-size: 30px; line-height: 1.3; }
@media (max-width: 767px) { .faq-h2 { font-size: 24px; } }

/* FAQ-Seite: ausgewogener Header + abwechselnde Section-Hintergruende */
.faq-page-header { padding-top: 200px; padding-bottom: 85px; }
@media (max-width: 991px) { .faq-page-header { padding-top: 150px; padding-bottom: 60px; } }
@media (max-width: 575px) { .faq-page-header { padding-top: 120px; padding-bottom: 55px; } }
.tj-faq-area.faq-section-grey { background-color: #f7f7f7; }

/* FAQ-Seite: echter Weiss/Grau-Wechsel (Body ist theme-bedingt #f7f7f7) */
.tj-faq-area.faq-section-white { background-color: #ffffff; }
.tj-faq-area.faq-section-grey { background-color: #eceef1; }

/* Projektablauf: letzter process-inner ohne unteren Abstand */
.h7-process .process-inner.pa-no-mb { margin-bottom: 0; }

/* Benutzbarkeit-und-Layout: Feedback-Anpassungen */
.tj-about-section-two.about-wide .about-content-two { max-width: none; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; }
.h6-insight-section.insight-lift { background-color: #ffffff; }

/* Benutzbarkeit-und-Layout: Korrektur Breiten (nebeneinander, Restbreite füllen) + Feldgroessen-Intro zentrieren */
.tj-about-section-two.about-wide .about-content-two { max-width: none; -webkit-box-flex: 1; -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; }
.tj-about-section-four.about-wide .about-content-four { -webkit-box-flex: 1; -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; }
.tj-feature-section.feldgroessen-features .sec-heading { max-width: 900px; }

/* Benutzbarkeit-und-Layout: Feature-Abschnitt weiss + Heading ~20% breiter (scoped, Autorenseite unberuehrt) */
.feature-heading-wide-section.feature-light,
.feature-heading-wide-section.feature-light .tj-feature-section-wrap { background-color: #ffffff !important; }
.feature-heading-wide-section.feature-light .sec-heading .sec-title,
.feature-heading-wide-section.feature-light .sec-heading .sec-title.text-white { color: #012738 !important; }
.feature-heading-wide-section.feature-light .sec-heading .desc,
.feature-heading-wide-section.feature-light .sec-heading .desc p,
.feature-heading-wide-section.feature-light .desc.text-white,
.feature-heading-wide-section.feature-light .desc.text-white p { color: #012738 !important; }
.feature-heading-wide-section.feature-light .sec-heading { max-width: 1320px !important; }
.feature-heading-wide-section.feature-light .sec-heading .sec-title { max-width: 1140px !important; }
.feature-heading-wide-section.feature-light .sec-heading .desc,
.feature-heading-wide-section.feature-light .sec-heading .desc.width-900,
.feature-heading-wide-section.feature-light .sec-heading .desc p { max-width: 1080px !important; width: 100% !important; }

/* Corporate Design: innere Container (Ueberschrift + Text) volle Breite */
.tj-about-section-four.about-wide .about-content-four .sec-heading { max-width: none !important; }
.tj-about-section-four.about-wide .about-content-four .about-feature-item { max-width: none !important; }

/* Corporate Design: Fließtext (feature-box/desc) volle Breite */
.tj-about-section-four.about-wide .about-content-four .about-feature-item .feature-box { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 100% !important; max-width: none !important; }
.tj-about-section-four.about-wide .about-content-four .about-feature-item .feature-box .desc { max-width: none !important; }
/* Automatische Schriftgröße: Text füllt freigewordene Breite nach Entfernen des rechten Bildes */
.tj-about-section-five.about-wide .about-content-five { max-width: none !important; -webkit-box-flex: 1; -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; }
/* Typische Layout-Fehler: eigene (weisse) Hintergrundfarbe zum Abheben */
.tj-feature-section-two.layout-fehler-bg { background-color: #ffffff; }

/* Feldgrößen-Abschnitt: eigene (weisse) Hintergrundfarbe zum Abheben */
.tj-feature-section.feldgroessen-features { background-color: #e8f1fa; }

/* =========================================================
   Breitere zentrierte Abschnitts-Überschriften
   Deutlich mehr Breite für h2 + Absätze auf allen Unterseiten
   von /formilo/, /loesungen/ und /formulartechnologien/
   (Body-Klasse .formilo-wide-sections aus _header.php).
   Zielbreite wie „Daten entstehen sauber" unter /datenerfassung/
   – ~900px statt der bisherigen 560/700px.
   ========================================================= */
.formilo-wide-sections .sec-heading-centered {
  max-width: 900px !important;
  width: 100% !important;
}

/* =========================================================
   Check-Listen: nicht-fetter Stichpunkt-Text genauso groß wie
   die fette Überschrift (strong). Gilt für dieses Element auf
   allen Seiten.
   ========================================================= */
.check-list-one ul li,
.check-list-one ul li strong {
  font-size: 17px !important;
}

/* =========================================================
   Seite: Integrationen & Schnittstellen (Einzelanpassungen)
   ========================================================= */

/* Hero: nicht-fette Beschreibung so groß wie die fette Überschrift */
.page-integrationen-schnittstellen .formularcenter-hero-benefit-text h3,
.page-integrationen-schnittstellen .formularcenter-hero-benefit-text p {
  font-size: 15.5px !important;
}

/* Problem-Abschnitt: Überschrift + Einleitung breiter */
.page-integrationen-schnittstellen .formularcenter-problem-heading {
  max-width: 1180px !important;
}
.page-integrationen-schnittstellen .formularcenter-problem-heading .desc {
  max-width: 1000px !important;
}

/* Problem-Abschnitt: vier Karten als 2x2-Raster, boxed */
.page-integrationen-schnittstellen .formularcenter-problem-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 24px !important;
}
.page-integrationen-schnittstellen .formularcenter-problem-card {
  min-height: 0 !important;
  padding: 16px 20px 16px !important;
  border: 1px solid rgba(5, 18, 41, 0.12) !important;
  border-radius: 16px !important;
}
/* Innenabstände enger: Icon->Titel (Basis 34px) und Titel->Text (Basis 16px) */
.page-integrationen-schnittstellen .formularcenter-problem-icon {
  margin-bottom: 8px !important;
}
.page-integrationen-schnittstellen .formularcenter-problem-card .feature-content .title {
  margin-bottom: 8px !important;
}

/* Generische Utility: Absatz auf max. 900px begrenzen und zentrieren */
.zentrierter-absatz {
  max-width: 900px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media only screen and (max-width: 575px) {
  .page-integrationen-schnittstellen .formularcenter-problem-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =====================================================================
   Navigations-Dropdowns breiter.
   Basis-Breite war 230px (main.css) — lange Menüpunkte wie „Integrationen
   & Schnittstellen", „Cloudbasierte Datenerfassung" oder „Interaktive &
   dynamische Formulare" brachen dadurch auf zwei Zeilen um. Jetzt: etwas
   größere Mindestbreite und automatisches Mitwachsen bis zum längsten
   Eintrag, dazu Einzeiligkeit erzwingen.
   ===================================================================== */
.mainmenu ul > li > .sub-menu {
  width: auto;
  min-width: 250px;
}
.mainmenu ul > li > .sub-menu > li > a,
.mainmenu ul > li > .sub-menu > li > .sub-menu > li > a {
  white-space: nowrap;
}
/* Der grüne „Alle Vordrucke"-Button soll die Breite nicht aufblähen */
.mainmenu ul > li > .sub-menu > li.vordrucke-all > a {
  white-space: nowrap;
}

/* =========================================================
   Seite: Digitalisierung (Einzelanpassungen)
   ========================================================= */

/* Problem-Abschnitt „Echte Digitalisierung heißt …": Kacheln nicht über
   die volle Bildschirmbreite, sondern als boxed, zentriertes 3-Spalten-Raster */
.page-digitalisierung .formularcenter-problem-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 24px !important;
}
/* Innenabstände der Kacheln stark reduzieren: keine erzwungene Höhe,
   engeres Padding, kleiner Abstand Icon->Titel und Titel->Text */
.page-digitalisierung .formularcenter-problem-card {
  min-height: 0 !important;
  padding: 18px 22px 18px !important;
}
.page-digitalisierung .formularcenter-problem-icon {
  margin-bottom: 10px !important;
}
.page-digitalisierung .formularcenter-problem-card .feature-content .title {
  margin-bottom: 8px !important;
}
@media only screen and (max-width: 767px) {
  .page-digitalisierung .formularcenter-problem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }
}
@media only screen and (max-width: 480px) {
  .page-digitalisierung .formularcenter-problem-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Abschnitt „So gehen wir gemeinsam vor": Das Ablauf-Diagramm ist im Design
   für 6 Schritte (6 Spalten) angelegt, diese Seite hat aber nur 5. Dadurch
   blieb rechts eine leere Spalte und die Reihe wirkte nach links verschoben.
   Auf Desktop daher auf 5 gleich breite Spalten stellen → gefüllt & mittig. */
@media only screen and (min-width: 1200px) {
  .page-digitalisierung .formulare-project-process-section .h8-process-inner {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}
/* CTA unter dem Ablauf-Diagramm zentrieren */
.page-digitalisierung .formulare-project-process-section .btn-area {
  display: flex !important;
  justify-content: center !important;
}
/* Überschriften-Block „So gehen wir gemeinsam vor" ohne margin-bottom
   (nur der obere Titelblock, nicht der „Abgerechnet wird …"-Block darunter) */
.page-digitalisierung .formulare-project-process-section .sec-heading.h8-section-heading:not(.desc-margin-top) {
  margin-bottom: 0 !important;
}
/* Der eigentliche Abstand zwischen Überschrift und Diagramm kommt aus dem
   margin-top des Diagramms selbst (Basis 65px). Auf Tablet/Desktop straffen. */
@media only screen and (min-width: 768px) {
  .page-digitalisierung .formulare-project-process-section .h8-process-inner {
    margin-top: 28px !important;
  }
}

/* =========================================================
   Seite: KI-Integration (/loesungen/ki-integration/)
   ========================================================= */

/* Generische Utility: Block auf max. 900px begrenzen und zentrieren
   (Pendant zu .zentrierter-absatz, gedacht für Titel-/Heading-Blöcke). */
.width-900 {
  max-width: 900px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Modifier: zentrierter Absatz mit etwas Abstand oben, ohne Abstand unten. */
.zentrierter-absatz-mt {
  margin-top: 26px !important;
  margin-bottom: 0 !important;
}

/* Abschnitt „KI macht aus der Eingabemaske …": die vier Karten als boxed,
   zentriertes 2x2-Raster statt linksbündig im 7-Spalten-Basisraster. */
.page-ki-integration .formularcenter-problem-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 24px !important;
}
.page-ki-integration .formularcenter-problem-card {
  min-height: 0 !important;
  padding: 22px 26px !important;
}
@media only screen and (max-width: 767px) {
  .page-ki-integration .formularcenter-problem-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
}

/* Ablaufdiagramm „So läuft Ihr Projekt ab": Das Grid ist im Design für 6
   Schritte angelegt, diese Seite hat nur 5 → die leere 6. Spalte ließ die
   Reihe links kleben. Auf Desktop auf 5 gleich breite Spalten stellen, damit
   die Schritte die volle Breite füllen und mittig stehen. */
@media only screen and (min-width: 1200px) {
  .page-ki-integration .formulare-project-process-section .h8-process-inner {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* Finale dunkle CTA-Section „Machen Sie aus Ihren Formularen …": die
   Stichpunkt-Texte der Check-Liste sind im Basis-Style dunkel und auf dem
   dunklen Hintergrund kaum lesbar → auf Weiß setzen (Häkchen bleiben grün). */
.page-ki-integration .bautagesbericht-final-dark-cta-section .check-list-one ul li,
.page-ki-integration .bautagesbericht-final-dark-cta-section .check-list-one ul li strong {
  color: #ffffff !important;
}

/* =========================================================
   Seite: IT-Beratung (Einzelanpassungen)
   ========================================================= */

/* Hero: die vier Benefit-Karten als kompaktes 2x2-Raster.
   Überschreibt das geteilte 6-Spalten-Raster der
   .softwareentwicklung-static-hero-Styles (dort für 5 Karten gedacht).
   Nur Desktop; Tablet/Mobil erben die bestehenden 2- bzw. 1-Spalten-Layouts. */
@media only screen and (min-width: 1200px) {
  .it-beratung-hero .software-hero-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 820px;
  }
  .it-beratung-hero .software-hero-benefit,
  .it-beratung-hero .software-hero-benefit:nth-child(4),
  .it-beratung-hero .software-hero-benefit:nth-child(5) {
    grid-column: auto;
  }
}

/* „Einsatz in der Praxis": Kopfbereich mit .width-900 (900px), auf
   kleineren Viewports aber auf volle Breite begrenzen, damit die feste
   Breite keinen horizontalen Overflow erzeugt. */
@media only screen and (max-width: 991px) {
  .formularcenter-system-section .formularcenter-system-heading.width-900 {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* about-wrapper mit Modifier .content-fill: die Textspalte (.about-content-two)
   ist im Theme auf max-width 435px gedeckelt und lässt im Boxed-Layout rechts
   viel Fläche leer. Mit diesem Modifier füllt der Text auf Desktop den restlichen
   Platz neben dem Bild (Bildgröße bleibt unverändert). Nur ab 992px aktiv, damit
   das getunte Stapel-/Zentrier-Verhalten auf Tablet/Mobil erhalten bleibt.
   Eingesetzt auf: /info/reduzierte-tipparbeit (Katalogfunktionen). */
@media only screen and (min-width: 992px) {
  .about-wrapper.content-fill .about-content-two {
    max-width: none;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0px;
  }
}
/* Abstand zwischen Fließtext (.desc) und der Stichpunkt-Liste (.check-list-one)
   in derselben content-fill-Textspalte. Ohne Margin sitzt die Liste bündig am
   letzten Absatz. Eingesetzt auf: /info/reduzierte-tipparbeit. */
.about-wrapper.content-fill .about-content-two .check-list-one {
  margin-top: 30px;
}

/* feature-heading-wide-section mit Modifier .cards-2col-boxed: die Kärtchen
   liegen im Theme 3-spaltig (33.333%) in einem 1660px breiten Wide-Container.
   Auf /info/reduzierte-tipparbeit sollen die vier Kärtchen stattdessen als
   2x2-Raster in einem normalen Boxed-Container (1320px) liegen. Nur mit diesem
   Modifier aktiv, damit die anderen Seiten unberührt bleiben. */
.feature-heading-wide-section.cards-2col-boxed .tj-feature-section-wrap > .container {
  max-width: 1320px;
}
/* Weniger Leerraum oberhalb des Intro-Absatzes im ersten Abschnitt: das Theme
   setzt hier padding-top 160px !important (geteilte Regel), was wir nur für
   diese Seite via .cards-2col-boxed auf einen kompakteren Wert reduzieren. */
.feature-heading-wide-section.cards-2col-boxed .tj-feature-section-wrap {
  padding-top: 80px !important;
}
.feature-heading-wide-section.cards-2col-boxed .row.rg-30 > [class*="col-"] {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}
@media (max-width: 575px) {
  .feature-heading-wide-section.cards-2col-boxed .row.rg-30 > [class*="col-"] {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Textbausteine-Prozess-Sektion (h7-process): im Theme hat sie den hellen
   Flächen-Hintergrund var(--tj-color-theme-bg) (#e1e8f0). Mit dem Modifier
   .process-bg-white bekommt sie auf /info/reduzierte-tipparbeit einen weißen
   Hintergrund. Andere h7-process-Sektionen bleiben unberührt. */
.h7-process.process-bg-white {
  background-color: #ffffff;
}

/* Abschnittsweise Flächen-Hintergründe zum Rhythmisieren (grau/blau). Eigene
   Utility-Klassen, die nur dort greifen, wo sie im Markup gesetzt sind – daher
   ohne Nebenwirkung auf andere Seiten. Beide Töne sind hell, dunkler Text
   bleibt lesbar. Eingesetzt auf: /info/reduzierte-tipparbeit. */
.formilo-section-grau {
  background-color: #e8eaed;
}
.formilo-section-blau {
  background-color: var(--tj-color-theme-bg-2);
}

/* Seite: Formulare bearbeiten – Abschnitt „Formulare altern" auf Weiß statt
   auf dem hellgrauen Seitengrund (#f7f7f7). Eigene Klasse, greift nur auf
   dieser Seite; die gleiche Sektion auf anderen Seiten bleibt unverändert. */
.formulare-altern-section-white {
  background-color: #ffffff !important;
}

/* Kopfbereich (Überschrift + Absatz) breiter: 900px statt der für diese
   Sektion sonst geltenden 680px – passend zur Klasse .width-900 im Markup.
   Nur auf dieser Seite, da über .formulare-altern-section-white gescoped. */
.formulare-altern-section-white .sec-heading.h8-section-heading.sec-heading-centered,
.formulare-altern-section-white .sec-heading.h8-section-heading.sec-heading-centered .desc-margin-top {
  max-width: 900px !important;
}
/* Kopfbereich ohne unteren Abstand. */
.formulare-altern-section-white .sec-heading.h8-section-heading.sec-heading-centered {
  margin-bottom: 0 !important;
}

/* „Wir bearbeiten …": grauer Abschnittshintergrund + dünne, hellgraue Rahmen
   um die beiden Formular-Grafiken, damit sie sich vom Grund abheben. */
.page-formulare-bearbeiten .software-roi-about-section {
  background-color: #e8eaed !important;
}
.page-formulare-bearbeiten .software-roi-about-section .about-images-group-three,
.page-formulare-bearbeiten .software-roi-about-section .about-statistics img {
  border: 1px solid #e0e0e0 !important;
}

/* „Was wir konkret bearbeiten": Kärtchen einspaltig – Icon + Überschrift
   bleiben oben nebeneinander, der Inhalt steht darunter über die volle Breite
   (statt in einer zu schmalen zweiten Spalte). Das Formilo-Logo wandert als
   dezenter Akzent nach oben rechts. */
.page-formulare-bearbeiten .h7-service-section .service-style-3 {
  flex-direction: column !important;
  align-items: stretch !important;
  position: relative;
}
.page-formulare-bearbeiten .h7-service-section .service-style-3 .service-title {
  max-width: 100% !important;
  width: 100% !important;
  margin-bottom: 18px;
  padding-inline-end: 90px;
}
.page-formulare-bearbeiten .h7-service-section .service-style-3 .service-right {
  display: block !important;
}
.page-formulare-bearbeiten .h7-service-section .service-style-3 .desc {
  max-width: 100% !important;
}
/* Stichpunktlisten einrücken – die Aufzählungszeichen standen sonst (ul-Reset
   padding:0) weiter links als der Absatz darüber. */
.page-formulare-bearbeiten .h7-service-section .service-style-3 .desc ul {
  padding-inline-start: 20px;
}
.page-formulare-bearbeiten .h7-service-section .service-style-3 .service-button {
  position: absolute;
  top: 30px;
  inset-inline-end: 30px;
  margin: 0;
}

/* „Was wir konkret bearbeiten": weißer Abschnittshintergrund statt #f7f7f7. */
.page-formulare-bearbeiten .service-offer-light-section {
  background-color: #ffffff !important;
}

/* „Warum Sie … nicht selbst …": die vier Karten als 2x2-Raster in einem
   abgesetzten Box-Container auf dem dunklen Grund. */
.page-formulare-bearbeiten .warum-selbst-box {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 40px;
}
.page-formulare-bearbeiten .warum-selbst-box .row.rg-30 > [class*="col-"] {
  flex: 0 0 50% !important;
  max-width: 50% !important;
}
@media (max-width: 575px) {
  .page-formulare-bearbeiten .warum-selbst-box {
    padding: 24px;
  }
  .page-formulare-bearbeiten .warum-selbst-box .row.rg-30 > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* „Häufige Fragen …": grauer Abschnittshintergrund statt des bläulichen Tons. */
.page-formulare-bearbeiten .faq-equal-image-section {
  background-color: #e8eaed !important;
}

/* Cloudbasierte Datenerfassung – „Eine zentrale Lösung statt hunderter Einzeldateien":
   Inhaltsspalte (Card-Grid) etwas breiter, Hintergrundbild entsprechend schmaler.
   Nur Desktop (≥1200px), da darunter die responsiven Regeln (einspaltig / Bild aus)
   greifen und nicht angefasst werden sollen. Über .cloud-zentrale-loesung-section
   nur auf diese Seite gescoped. */
@media only screen and (min-width: 1200px) {
  .cloud-zentrale-loesung-section .formulare-feature-card-row {
    grid-template-columns: repeat(3, 320px) !important;
    max-width: 1020px !important;
  }
  .cloud-zentrale-loesung-section .feature-bg-images {
    width: 880px !important;
    max-width: 880px !important;
  }
}

/* Cloudbasierte Datenerfassung – „Dateien lösen das Problem nicht":
   etwas Luft zwischen der Kärtchen-Reihe und dem abschließenden Absatz. */
.cloud-problem-outro {
  margin-top: 45px !important;
}

/* =========================================================
   Seite: Automatisierung (/loesungen/automatisierung/)
   ========================================================= */

/* Problem-Abschnitt „Routinearbeit kostet jeden Monat …": die sechs Karten
   als boxed, zentriertes 3x2-Raster statt linksbündig im 7-Spalten-Basisraster. */
.page-automatisierung .formularcenter-problem-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 24px !important;
}
/* Innenabstände der Kacheln reduzieren: keine erzwungene Höhe, engeres
   Padding, kleiner Abstand Icon->Titel und Titel->Text. */
.page-automatisierung .formularcenter-problem-card {
  min-height: 0 !important;
  padding: 18px 22px 18px !important;
}
.page-automatisierung .formularcenter-problem-icon {
  margin-bottom: 10px !important;
}
.page-automatisierung .formularcenter-problem-card .feature-content .title {
  margin-bottom: 8px !important;
}
@media only screen and (max-width: 767px) {
  .page-automatisierung .formularcenter-problem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }
}
@media only screen and (max-width: 480px) {
  .page-automatisierung .formularcenter-problem-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Abschnitt „Aufgaben statt Menschen automatisieren …": weißer Abschnitts-
   hintergrund statt des bläulichen Tons (var(--tj-color-theme-bg)), damit sich
   der Rhythmus hellblau → weiß → grau ergibt. */
.page-automatisierung .tj-service-section-four {
  background-color: #ffffff !important;
}

/* Abstand zwischen den beiden Einleitungsabsätzen desselben Abschnitts
   verringern (der row-gap des Flex-Wraps wirkt zwischen allen Items, daher
   den zweiten Absatz gezielt näher an den ersten ziehen). */
.page-automatisierung .service-four-compact-section .sec-heading-wrap > p + p {
  margin-top: -12px !important;
}

/* Abschnitt „Womit wir Ihre Automatisierung umsetzen": grauer Abschnitts-
   hintergrund statt Weiß (ersetzt die entfernte Klasse .section-white). */
.page-automatisierung .formularcenter-functions-section {
  background-color: #e8eaed !important;
}

/* Abschnitt „Warum ein spezialisierter Dienstleister …": nach dem Entfernen
   des „Done-for-you"-Kärtchens und des CTA bleiben vier Karten — als breiteres,
   2x2-Raster statt des linksbündigen 3er-Rasters mit fixen 290px-Karten. */
@media only screen and (min-width: 1200px) {
  .page-automatisierung .formulare-feature-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 760px !important;
  }
}

/* Abschnitt „So entsteht Ihre Automatisierung": Abstand zwischen dem
   Einleitungsabsatz und dem Ablauf-Diagramm (Stepper) verringern. Der Abstand
   entsteht aus margin-bottom des Titelblocks + margin-top des Diagramms. */
.page-automatisierung .formulare-project-process-section .sec-heading.h8-section-heading:not(.desc-margin-top) {
  margin-bottom: 0 !important;
}
@media only screen and (min-width: 768px) {
  .page-automatisierung .formulare-project-process-section .h8-process-inner {
    margin-top: 28px !important;
  }
}
/* Der Stepper ist im Design für 6 Schritte (6 Spalten) angelegt, diese Seite
   hat aber nur 5 → die leere 6. Spalte ließ die Reihe links kleben. Auf Desktop
   auf 5 gleich breite Spalten stellen, damit die Schritte die volle Breite
   füllen und mittig stehen. */
@media only screen and (min-width: 1200px) {
  .page-automatisierung .formulare-project-process-section .h8-process-inner {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* Abschnitt „Was Sie davon haben": Überschrift steht jetzt ÜBER dem Bild
   (statt darunter). Den oberen Abstand des Textblocks entfernen und etwas Luft
   zum Bild darunter lassen. */
.page-automatisierung .pdf-services-section .h8-services-left-content {
  margin-top: 0 !important;
  margin-bottom: 26px !important;
}
/* Es ist nur noch ein Bild (kein Video): den dunklen 30%-Overlay entfernen,
   der sonst nur als Kontrast für den Play-Button gedacht war. */
.page-automatisierung .pdf-services-section .h8-video::after {
  display: none !important;
}

/* =========================================================
   Seite: Cloudbasierte Datenerfassung (/loesungen/cloudbasierte-datenerfassung/)
   ========================================================= */

/* „Womit wir das umsetzen": Abstände ober- und unterhalb des Tab-Elements
   (weiße Box) straffen. Oben aus margin-bottom des Einleitungsblocks (60px),
   unten aus margin-top des Schlussabsatzes (.desc-margin-top-large, 4rem). */
.page-cloudbasierte-datenerfassung .tj-service-section-four .sec-heading-wrap {
  margin-bottom: 28px !important;
}
.page-cloudbasierte-datenerfassung .service-four-compact-section p.desc-margin-top-large {
  margin-top: 1.75rem !important;
}

/* „So läuft die Zusammenarbeit": Abstand zwischen Überschrift und Ablauf-
   Diagramm verringern (margin-bottom des Titelblocks + margin-top des Diagramms). */
.page-cloudbasierte-datenerfassung .formulare-project-process-section .sec-heading.h8-section-heading:not(.desc-margin-top) {
  margin-bottom: 0 !important;
}
@media only screen and (min-width: 768px) {
  .page-cloudbasierte-datenerfassung .formulare-project-process-section .h8-process-inner {
    margin-top: 30px !important;
  }
}

/* =========================================================
   Seite: Prozessoptimierung (/loesungen/prozessoptimierung/)
   ========================================================= */

/* Abschnitt „Prozessoptimierung aus der Praxis …": die sechs Kärtchen nicht
   über die volle Breite (7-Spalten-Basisraster), sondern als boxed,
   zentriertes 3x2-Raster – dazu die Kacheln kompakter (kurze Inhalte). */
.page-prozessoptimierung .formularcenter-problem-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 24px !important;
}
.page-prozessoptimierung .formularcenter-problem-card {
  min-height: 0 !important;
  padding: 26px 26px 24px !important;
}
.page-prozessoptimierung .formularcenter-problem-icon {
  margin-bottom: 12px !important;
}
.page-prozessoptimierung .formularcenter-problem-card .feature-content .title {
  margin-bottom: 8px !important;
}
@media only screen and (max-width: 767px) {
  .page-prozessoptimierung .formularcenter-problem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }
}
@media only screen and (max-width: 480px) {
  .page-prozessoptimierung .formularcenter-problem-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Abschnitt „So gehen wir vor …": Ablauf-Diagramm ist im Design für 6 Schritte
   (6 Spalten) angelegt, diese Seite hat aber nur 5 – dadurch blieb rechts eine
   leere Spalte und die Reihe klebte links. Auf Desktop auf 5 gleich breite
   Spalten stellen → gefüllt und mittig. */
@media only screen and (min-width: 1200px) {
  .page-prozessoptimierung .formulare-project-process-section .h8-process-inner {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* Abschnitt „Häufige Fragen …": das hochformatige Bild rechts etwas niedriger –
   die oberen 25 % werden weggeschnitten (Anzeige = untere 75 % des Motivs).
   Original 696x1467 → sichtbar 696x1100, Zuschnitt von oben. */
.page-prozessoptimierung .formularcenter-faq-section .chart_img img {
  aspect-ratio: 696 / 1100 !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center bottom !important;
}

/* =========================================================
   Seite: IT-Lösungen (/loesungen/it-loesungen/)
   ========================================================= */

/* Problem-Abschnitt „Manuelle Abläufe kosten …": nach dem Entfernen des
   „Verstreute Dateien"-Kärtchens bleiben vier Karten — als breiteres,
   2x2-Raster statt des linksbündigen 3er-Rasters mit fixen 290px-Karten.
   Der CTA-Button darunter spannt weiterhin über die volle Breite. */
@media only screen and (min-width: 1200px) {
  .page-it-loesungen .formulare-feature-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 760px !important;
  }
}

/* Abschnitt „Eine integrierte Systemlandschaft …": die sechs Kärtchen als
   boxed, zentriertes 3x2-Raster statt des über die volle Breite laufenden
   7-Spalten-Basisrasters. */
.page-it-loesungen .formularcenter-problem-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 24px !important;
}
.page-it-loesungen .formularcenter-problem-card {
  min-height: 0 !important;
  padding: 22px 26px !important;
}
@media only screen and (max-width: 767px) {
  .page-it-loesungen .formularcenter-problem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }
}
@media only screen and (max-width: 480px) {
  .page-it-loesungen .formularcenter-problem-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Abschnitt „Was wir bewusst nicht anbieten": Überschrift und Liste
   untereinander (gestapelt) über die volle boxed Breite statt zweispaltig
   nebeneinander. Die Überschrift steht per DOM-Reihenfolge oben. */
.page-it-loesungen .webformulare-projektprozess-layout {
  grid-template-columns: 1fr !important;
  column-gap: 0 !important;
  row-gap: 32px !important;
}
.page-it-loesungen .webformulare-projektprozess-intro {
  position: static !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100% !important;
}
.page-it-loesungen .webformulare-projektprozess-intro .sec-title {
  max-width: 100% !important;
  margin-bottom: 0 !important;
}

/* =========================================================
   Seite: Funktionalitäten einbauen (/loesungen/funktionalitaeten-einbauen/)
   ========================================================= */

/* Abschnitt „KI-Integration": nach dem Entfernen des Kärtchens „Lange Texte
   zusammenfassen" bleiben sechs Karten — als boxed, zentriertes 3x2-Raster
   statt des über die volle Breite laufenden 7-Spalten-Basisrasters. */
.page-funktionalitaeten-einbauen .formularcenter-problem-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 24px !important;
}
.page-funktionalitaeten-einbauen .formularcenter-problem-card {
  min-height: 0 !important;
  padding: 22px 26px !important;
}
@media only screen and (max-width: 767px) {
  .page-funktionalitaeten-einbauen .formularcenter-problem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }
}
@media only screen and (max-width: 480px) {
  .page-funktionalitaeten-einbauen .formularcenter-problem-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Abschnitte „Berechnungen" und „Medienimport": die je vier Feature-Karten als
   zentriertes 2x2-Raster statt des linksbündigen 3er-Rasters mit fixen
   290px-Karten. Das breite Bild darunter (feature-bg-images) bleibt erhalten. */
@media only screen and (min-width: 1200px) {
  .page-funktionalitaeten-einbauen .formulare-feature-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* =========================================================
   Seite: Unternehmen (/formilo/unternehmen/)
   ========================================================= */

/* Abschnitt „Lösungen von Formilo": weißer Abschnittshintergrund statt des
   hellgrauen Seitengrunds (#f7f7f7). */
.page-unternehmen .service-offer-light-section {
  background-color: #ffffff !important;
}

/* Abschnitt „Lösungen von Formilo": Kärtchen einspaltig – Icon + Überschrift
   bleiben oben nebeneinander, der Listentext steht darunter über die volle
   Breite (statt in einer zu schmalen zweiten Spalte). Das Formilo-Logo wandert
   als dezenter Akzent nach oben rechts. Gleiches Muster wie auf
   /loesungen/formulare-bearbeiten/. */
.page-unternehmen .h7-service-section .service-style-3 {
  flex-direction: column !important;
  align-items: stretch !important;
  position: relative;
}
.page-unternehmen .h7-service-section .service-style-3 .service-title {
  max-width: 100% !important;
  width: 100% !important;
  margin-bottom: 18px;
  padding-inline-end: 90px;
}
.page-unternehmen .h7-service-section .service-style-3 .service-right {
  display: block !important;
}
.page-unternehmen .h7-service-section .service-style-3 .desc {
  max-width: 100% !important;
}
/* Stichpunktlisten einrücken – die Aufzählungszeichen standen sonst (ul-Reset
   padding:0) weiter links als der Absatz darüber. */
.page-unternehmen .h7-service-section .service-style-3 .desc ul {
  padding-inline-start: 20px;
}
.page-unternehmen .h7-service-section .service-style-3 .service-button {
  position: absolute;
  top: 30px;
  inset-inline-end: 30px;
  margin: 0;
}

/* Abschnitt „Formulartechnologien": Die geteilte formularcenter-system-Section
   deckelt jede Kachel hart auf 380px Höhe (overflow:hidden). Auf dieser Seite
   tragen die ersten beiden Kacheln (PDF, Web) deutlich mehr Listentext und
   wurden dadurch oben/unten abgeschnitten. Hier dürfen die Kacheln mit ihrem
   Inhalt wachsen und bekommen mehr vertikalen Innenabstand (Desktop). */
@media only screen and (min-width: 992px) {
  .page-unternehmen .formularcenter-system-section .h6-project-item {
    height: auto !important;
    min-height: 380px !important;
    overflow: visible !important;
  }
  /* Textspalte bestimmt die Kachelhöhe. */
  .page-unternehmen .formularcenter-system-section .project_content {
    height: auto !important;
    min-height: 380px !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  /* Bildspalte an die (inhaltsgetriebene) Kachelhöhe koppeln, OHNE sie mit
     ihrer Eigenhöhe/Seitenverhältnis zu bestimmen: Bild absolut füllen und per
     object-fit beschneiden. Sonst würde das hohe Bild die Kachel aufblähen und
     große Leerflächen um den Text erzeugen. */
  .page-unternehmen .formularcenter-system-section .project_image {
    align-self: stretch;
    height: auto !important;
    min-height: 380px !important;
    max-height: none !important;
    position: relative;
    overflow: hidden;
  }
  .page-unternehmen .formularcenter-system-section .project_image img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* Abschnitt „Typische Ausgangslagen"-Slider: Kärtchen bleiben bei Hover weiß
   mit lesbarem, dunklem Text. Die geteilte Slider-Regel färbt den Text bei
   Hover sonst weiß (gedacht für einen dunklen .thumb-Hintergrund, den es hier
   ohne .thumb nicht gibt) – der Text würde weiß auf Weiß verschwinden. Dezenter
   Schatten + grüner Rahmen als sichtbares Hover-Feedback. */
.page-unternehmen .formulare-benefits-slider-section .service-style-2:hover {
  background-color: #ffffff !important;
  border-color: var(--tj-color-theme-primary) !important;
  box-shadow: 0 18px 40px rgba(1, 39, 56, 0.10) !important;
}
.page-unternehmen .formulare-benefits-slider-section .service-style-2:hover .service-content .title,
.page-unternehmen .formulare-benefits-slider-section .service-style-2:hover .service-content .title a,
.page-unternehmen .formulare-benefits-slider-section .service-style-2:hover .service-content .desc,
.page-unternehmen .formulare-benefits-slider-section .service-style-2:hover .service-content .desc p,
.page-unternehmen .formulare-benefits-slider-section .service-style-2:hover .service-content .number {
  color: var(--tj-color-heading-primary) !important;
}

/* Abschnitt „Typischer Projektablauf": Der Kopfbereich wird von einer
   spezifischen Theme-Regel (.formulare-project-process-section .sec-heading.
   h8-section-heading.sec-heading-centered, main.css) hart auf 680px !important
   gedeckelt – diese überstimmt die .width-900-Utility im Markup. Hier mit
   höherer Spezifität auf 900px setzen (Überschrift + Intro-Absätze). */
.page-unternehmen .formulare-project-process-section .sec-heading.h8-section-heading.sec-heading-centered,
.page-unternehmen .formulare-project-process-section .sec-heading.h8-section-heading.sec-heading-centered .desc-margin-top {
  max-width: 900px !important;
}

/* Abschnitt „Programmierte Funktionalitäten": die sechs Karten als boxed,
   zentriertes 3x2-Raster statt des über die volle Breite laufenden
   7-Spalten-Basisrasters. */
.page-unternehmen .formularcenter-problem-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 24px !important;
}
.page-unternehmen .formularcenter-problem-card {
  min-height: 0 !important;
  padding: 22px 26px !important;
}
@media only screen and (max-width: 767px) {
  .page-unternehmen .formularcenter-problem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }
}
@media only screen and (max-width: 480px) {
  .page-unternehmen .formularcenter-problem-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Abschnitte „Laufende Zusammenarbeit" (Basis #e9f0f7) und „Zielgruppen von
   Formilo" (Basis #fff): grauer Abschnittshintergrund (Formilo-Sektionsgrau,
   wie .formilo-section-grau) – explizit gesetzt, damit er unabhängig vom
   Zustand der Basis-CSS auf dem Zielserver greift. */
.page-unternehmen .webformulare-projektprozess-section,
.page-unternehmen .pdf-problem-section {
  background-color: #e8eaed !important;
}

/* Abschnitt „Zukunftsthemen": Die Sektion hat keine vertikale Sektions-
   Polsterung; die Textspalte ist höher als das Bild und liegt daher (bei
   align-items:center) bündig an Ober- und Unterkante – der Text klebt am Rand.
   Vertikales Padding wie .section-space (120/100/80px) ergänzen. */
.page-unternehmen .pdf-formulare-abschluss-section-responsive {
  padding-top: 120px !important;
  padding-bottom: 120px !important;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .page-unternehmen .pdf-formulare-abschluss-section-responsive {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
  }
}
@media only screen and (max-width: 991px) {
  .page-unternehmen .pdf-formulare-abschluss-section-responsive {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
}

/* =========================================================
   Seite: Zielgruppen (/formilo/zielgruppen/)
   ========================================================= */

/* Abschnitt „Formulare als Grundinfrastruktur …": die sechs Kärtchen nicht
   über die volle Breite im 7-Spalten-Basisraster (dort blieb eine Spalte leer),
   sondern als boxed, zentriertes 3x2-Raster. */
.page-zielgruppen .formularcenter-problem-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 24px !important;
}
/* Kachelhöhe an den Inhalt koppeln, engeres Padding. */
.page-zielgruppen .formularcenter-problem-card {
  min-height: 0 !important;
  padding: 26px 26px 24px !important;
}
@media only screen and (max-width: 767px) {
  .page-zielgruppen .formularcenter-problem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }
}
@media only screen and (max-width: 480px) {
  .page-zielgruppen .formularcenter-problem-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Abschnitt „Wer füllt aus?": etwas Leerraum zwischen dem Kärtchen-Raster und
   dem darauf folgenden (vorletzten) Absatz. */
.page-zielgruppen .pdf-problem-card-row {
  margin-bottom: 34px !important;
}

/* =========================================================
   Seite: Vision (/formilo/vision/)
   ========================================================= */

/* Abschnitt „Wie Formilo einen eigenen Markt …": die sechs Kärtchen nicht
   über die volle Breite im 7-Spalten-Basisraster (dort blieb eine Spalte leer),
   sondern als boxed, zentriertes 3x2-Raster. */
.page-vision .formularcenter-problem-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 24px !important;
}
/* Kachelhöhe an den Inhalt koppeln, engeres Padding. */
.page-vision .formularcenter-problem-card {
  min-height: 0 !important;
  padding: 26px 26px 24px !important;
}
@media only screen and (max-width: 767px) {
  .page-vision .formularcenter-problem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }
}
@media only screen and (max-width: 480px) {
  .page-vision .formularcenter-problem-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Abschnitt „Vom Datei-Formular zum softwareartigen Formular": Die überlappend
   (absolut) positionierte Checklisten-Box .about-float-area verdeckte auf dieser
   Seite den Fließtext. Deshalb hier ganz normal in den Textfluss unter die
   Absätze setzen statt absolut zu positionieren. */
.page-vision .software-roi-about-section .about-float-area {
  position: static !important;
  inset: auto !important;
  /* Basis macht daraus ein Grid mit reservierter 315px-Spalte für ein
     rechtes Bild (.about-statistics), das es hier nicht gibt — deshalb als
     einfacher, volle Breite füllender Block darstellen. */
  display: block !important;
  grid-template-columns: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 32px 0 0 !important;
  gap: 0 !important;
  z-index: auto !important;
}
.page-vision .software-roi-about-section .about-float-area-left {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
/* Der große untere Freiraum bzw. die Mindesthöhe war nur nötig, um Platz für
   die absolut positionierte Box zu schaffen — hier auf normalen Abstand
   zurücksetzen, damit unten keine leere Fläche entsteht. */
.page-vision .software-roi-about-section {
  padding-bottom: 120px !important;
}
.page-vision .software-roi-about-section .about-wrapper-four {
  min-height: 0 !important;
  align-items: start !important;
}

/* =========================================================
   MISSION-SEITE (/formilo/mission/) — abschnittsspezifische
   Anpassungen. Die genutzten Sektionsklassen sind Shared-
   Bausteine (auf vielen Seiten im Einsatz), deshalb strikt
   über .page-mission gekapselt, damit andere Seiten unberührt
   bleiben.
   ========================================================= */

/* --- Abschnitt 1: „Formulare als letztes Stück Papier" ---
   Von dunkel auf grau mit schwarzer Schrift; Überschrift +
   Absätze ~30 % breiter (weniger Zeilen, geringere Höhe). */
.page-mission .formulare-erstellen-problem-section {
  background-color: #f7f7f7 !important;
}
.page-mission .formulare-erstellen-problem-section .sec-title {
  color: #051229 !important;
}
.page-mission .formulare-erstellen-problem-section .sec-heading.style-2 p {
  color: #364052 !important;
}
/* Überschrift + Absätze breiter (ca. 500px -> 660px) */
.page-mission .formulare-erstellen-problem-section .sec-heading.style-2,
.page-mission .formulare-erstellen-problem-section .sec-heading.style-2 .sec-title,
.page-mission .formulare-erstellen-problem-section .sec-heading.style-2 p {
  max-width: 660px !important;
  width: 100% !important;
}
/* Karten auf grauem Grund sichtbar halten (weiße Karten + dezenter
   Rahmen), Texte dunkel; das Hover-Grün bleibt unverändert. */
.page-mission .formulare-erstellen-problem-section .feature-item.hover-bg {
  background-color: #ffffff !important;
  border: 1px solid rgba(5, 18, 41, 0.08) !important;
}
.page-mission .formulare-erstellen-problem-section .feature-content .title {
  color: #051229 !important;
}
.page-mission .formulare-erstellen-problem-section .feature-content .desc p {
  color: #364052 !important;
}
/* Kartenraster links vom rechten Foto halten (3 flexible Spalten statt
   fester 290px), damit die weißen Karten nicht mehr über dem Bild liegen.
   Nur ab Desktop, damit das Raster auf Tablet/Mobile normal umbricht. */
@media only screen and (min-width: 992px) {
  .page-mission .formulare-erstellen-problem-section .formulare-feature-card-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 780px !important;
  }
}

/* --- Abschnitt 2: „Moderne Datenerfassung ... zugänglich" ---
   Karten hatten unnötigen unteren Freiraum (feste min-height,
   Inhalt oben) — Höhe an den Inhalt anpassen, vertikal zentrieren. */
.page-mission .formularcenter-functions-section .formularcenter-function-card {
  min-height: 0 !important;
  align-items: center !important;
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}
.page-mission .formularcenter-functions-section .formularcenter-function-content h3 {
  margin-bottom: 0 !important;
}

/* --- Abschnitt 3: „Vertrauen durch Freiheit" ---
   Hintergrund grau; unten Padding, damit der Text nicht am
   Abschnittsrand klebt (spiegelt das padding-top: 110px des Inhalts;
   CTA im Markup entfernt). */
.page-mission .pdf-formulare-abschluss-section-responsive {
  background-color: #f7f7f7 !important;
}
.page-mission .pdf-formulare-abschluss-section-responsive .h9-about-content {
  padding-bottom: 110px !important;
}

/* --- Abschnitt 4: „Mit Kunden Lösungen entwickeln" ---
   8 Karten sauber als 4x2 in einem schmaleren (boxed) Container. */
.page-mission .formularcenter-problem-container {
  max-width: 1280px !important;
}
@media only screen and (min-width: 1200px) {
  .page-mission .formularcenter-problem-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* --- Abschnitt 5: „Vom Nebenprodukt zur Expertise" ---
   Logos aus den Kärtchen entfernt (Markup); der Titeltext nutzt jetzt
   die volle Breite. */
.page-mission .service-offer-light-section .service-style-3 .service-title {
  max-width: none !important;
  width: 100% !important;
}

/* --- Abschnitt 6: „Mission in der Praxis" ---
   Hintergrund grau (section-grey im Markup); Nummern-Kreise an den
   grauen Grund angleichen. */
.page-mission .webformulare-projektprozess-section .webformulare-projektprozess-number {
  background-color: #f7f7f7 !important;
}

/* =========================================================
   Seite: Zusatzleistungen (Einzelanpassungen)
   ========================================================= */

/* Problem-Abschnitt „Zusatzleistungen rund um Formulare …": die sechs
   Karten nicht über die volle Bildschirmbreite (7-Spalten-Basisraster),
   sondern als boxed, zentriertes 3x2-Raster. */
.page-zusatzleistungen .formularcenter-problem-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 24px !important;
}
.page-zusatzleistungen .formularcenter-problem-card {
  min-height: 0 !important;
  padding: 18px 22px 18px !important;
}
.page-zusatzleistungen .formularcenter-problem-icon {
  margin-bottom: 10px !important;
}
.page-zusatzleistungen .formularcenter-problem-card .feature-content .title {
  margin-bottom: 8px !important;
}
@media only screen and (max-width: 767px) {
  .page-zusatzleistungen .formularcenter-problem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }
}
@media only screen and (max-width: 480px) {
  .page-zusatzleistungen .formularcenter-problem-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Abschnitt „Wann ein Formular kein Formular mehr ist": das überlappend
   (absolut) positionierte ROI-Layout hier auflösen. Linke Spalte = Grafik +
   erklärende Absätze darunter; rechte Spalte = h2 und darunter (normal im
   Fluss) die Checklisten-Box .about-float-area samt Button. */
.page-zusatzleistungen .software-roi-about-section .about-wrapper-four {
  min-height: 0 !important;
  align-items: start !important;
}
/* Linke Spalte: Bild in natürlicher Höhe statt fixe 640px + Crop, damit der
   erklärende Text sauber darunter passt (Container nicht mehr clippen). */
.page-zusatzleistungen .software-roi-about-section .about-images-group-three {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.page-zusatzleistungen .software-roi-about-section .about-images-group-three::after {
  display: none !important;
}
.page-zusatzleistungen .software-roi-about-section .about-images-group-three > img {
  height: auto !important;
  object-fit: initial !important;
}
.page-zusatzleistungen .software-roi-about-section .about-grafik-text {
  margin-top: 26px !important;
}
.page-zusatzleistungen .software-roi-about-section .about-grafik-text p {
  margin-bottom: 16px !important;
}
.page-zusatzleistungen .software-roi-about-section .about-grafik-text p:last-child {
  margin-bottom: 0 !important;
}
/* Rechte Spalte: Checklisten-Box normal in den Fluss direkt unter die h2. */
.page-zusatzleistungen .software-roi-about-section .about-float-area {
  position: static !important;
  inset: auto !important;
  display: block !important;
  grid-template-columns: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 28px 0 0 !important;
  gap: 0 !important;
  z-index: auto !important;
}
.page-zusatzleistungen .software-roi-about-section .about-float-area-left {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
/* Der große untere Freiraum war nur für die absolute Box nötig. */
.page-zusatzleistungen .software-roi-about-section {
  padding-bottom: 100px !important;
}

/* Abschnitt „Beratung & Bedarfserweiterung": Die Einleitung liegt als
   umbrechende Flex-Zeilen in .sec-heading-wrap; der row-gap von 40px machte den
   Abstand zwischen den beiden Absätzen zu groß. Gap verkleinern, den Abstand
   Überschrift → erster Absatz aber über ein Margin an der Überschrift erhalten. */
.page-zusatzleistungen .service-four-compact-section .sec-heading-wrap {
  row-gap: 16px !important;
}
.page-zusatzleistungen .service-four-compact-section .sec-heading-wrap > p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.page-zusatzleistungen .service-four-compact-section .sec-heading-wrap > .sec-heading {
  margin-bottom: 24px !important;
}

/* =========================================================
   Seite: Preise (/formilo/preise/)
   ========================================================= */

/* Abschnitt „Formulare, kleine Tools und Software …": die 8 Karten sauber
   als 4x2 in einem schmaleren (boxed) Container statt im 7-Spalten-
   Basisraster. Nur Desktop; Tablet/Mobil erben das Basis-Layout. */
.page-preise .formularcenter-problem-container {
  max-width: 1280px !important;
}
@media only screen and (min-width: 1200px) {
  .page-preise .formularcenter-problem-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Abschnitt „Abrechnungsmodelle …": grauer Abschnittshintergrund statt Weiß.
   Die .section-white-Klasse bleibt bewusst im Markup, damit das geteilte,
   responsive Ausblenden des Bildes erhalten bleibt — hier nur die Farbe. */
.page-preise .tj-about-section-five.h8-about.section-white {
  background-color: #f7f7f7 !important;
}

/* Abschnitt „Transparenz, Mengenstaffelung …": grauer Abschnittshintergrund
   statt Weiß; CTA im Markup entfernt; unten Padding ergänzen, damit der letzte
   Absatz nicht am Abschnittsrand klebt (spiegelt das padding-top: 110px des
   Inhalts). */
.page-preise .pdf-formulare-abschluss-section-responsive {
  background-color: #f7f7f7 !important;
}
.page-preise .pdf-formulare-abschluss-section-responsive .h9-about-content {
  padding-bottom: 110px !important;
}

/* Abschnitt „Individuelle Formulare …": Abstand zwischen dem Karten-Raster
   und dem abschließenden Absatzblock. */
.page-preise .feature-heading-wide-section .tj-feature-section-wrap .container > .row:last-child {
  margin-top: 40px !important;
}

/* =========================================================
   Seite: Arbeitsgruppen (/formilo/arbeitsgruppen/)
   ========================================================= */

/* Acrobat-JavaScript-Abschnitt: die sechs Kärtchen als boxed, zentriertes
   3x2-Raster statt linksbündig im 7-Spalten-Basisraster. */
.page-arbeitsgruppen .formularcenter-problem-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 24px !important;
}
@media only screen and (max-width: 767px) {
  .page-arbeitsgruppen .formularcenter-problem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }
}
@media only screen and (max-width: 480px) {
  .page-arbeitsgruppen .formularcenter-problem-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Web-Entwicklungs-Abschnitt: Abstand zwischen den beiden Einleitungs-
   absätzen verringern (der row-gap des Flex-Wraps wirkt zwischen allen
   Items, daher den zweiten Absatz gezielt näher an den ersten ziehen). */
.page-arbeitsgruppen .pdf-formulare-loesung-section-responsive .sec-heading-wrap > p + p {
  margin-top: -20px !important;
}

/* WordPress-Abschnitt: dem Text in den Kärtchen die volle Kartenbreite geben
   (die leere zweite Spalte des Rasters entfällt). */
.page-arbeitsgruppen .formularcenter-comparison-section .service-content-wrap {
  grid-template-columns: 1fr !important;
}
.page-arbeitsgruppen .formularcenter-comparison-section .service-title {
  max-width: 100% !important;
  width: 100% !important;
}
.page-arbeitsgruppen .formularcenter-comparison-section .service-title .title {
  max-width: none !important;
}

/* Team-Digitale-Prozesse-Abschnitt: die Logo-Kachel rechts entfernen und dem
   Text die volle Kartenbreite geben. */
.page-arbeitsgruppen .service-offer-light-section .service-style-3 .service-right {
  display: none !important;
}
.page-arbeitsgruppen .service-offer-light-section .service-style-3 .service-title {
  max-width: 100% !important;
  width: 100% !important;
}

/* Projektmanagement-Abschnitt: CTA im Markup entfernt; unten Padding ergänzen,
   damit der letzte Absatz nicht am Abschnittsrand klebt. */
.page-arbeitsgruppen .pdf-formulare-abschluss-section-responsive .h9-about-content {
  padding-bottom: 110px !important;
}

/* Schnittstellen-&-Integrationen-Abschnitt: Überschrift und Absätze
   untereinander, jeweils über die volle Breite (statt 2-Spalten-Raster). */
.page-arbeitsgruppen .software-problem-section .sec-heading .sec-text {
  display: block !important;
}
.page-arbeitsgruppen .software-problem-section .sec-heading .sec-title {
  max-width: 100% !important;
  margin: 0 0 22px !important;
}
.page-arbeitsgruppen .software-problem-section .sec-heading .sec-text > p {
  max-width: 100% !important;
  margin: 0 0 18px !important;
}
.page-arbeitsgruppen .software-problem-section .sec-heading .sec-text > p:last-child {
  margin-bottom: 0 !important;
}
/* Kärtchen-Text die volle Kartenbreite geben (nur die Titel-Spalte ist im
   Fluss; das Hover-Bild liegt absolut darüber). */
.page-arbeitsgruppen .software-problem-section .service-style-3 {
  grid-template-columns: 1fr !important;
}
.page-arbeitsgruppen .software-problem-section .service-style-3 .software-service-title {
  max-width: none !important;
  width: 100% !important;
}

/* =========================================================
   Seite: Formularblöcke (/formulartechnologien/formularbloecke/)
   ========================================================= */

/* Abschnitt „Warum digitale Datenerfassung statt Papierblöcken": das breite
   Hintergrundbild rechts (feature-bg-images, Standard 1050px) schmaler halten,
   damit die linke Inhaltsseite (Überschrift + Karten) etwas mehr Raum bekommt
   und das Bild nur als rechter Akzent bleibt. */
.formularbloecke-warum-section .feature-bg-images {
  width: 720px !important;
  max-width: 720px !important;
}

/* Abschnitt „Warum digitale Datenerfassung statt Papierblöcken": Abstand
   oberhalb des CTA-Buttons (nach Wegfall des früheren Absatzes darüber). */
.formularbloecke-warum-section .btn-area {
  margin-top: 40px !important;
}

/* Abschnitt „So läuft die Zusammenarbeit ab": grauer Abschnittshintergrund;
   die Prozessliste ohne unteren Außenabstand; der (auf Desktop) unter das Bild
   gezogene CTA linksbündig. */
.formularbloecke-process-section {
  background-color: #f7f7f7 !important;
}
.formularbloecke-process-section .process-inner {
  margin-bottom: 0 !important;
}
.formularbloecke-process-cta {
  text-align: left !important;
  justify-content: flex-start !important;
}

/* Abschnitt „Warum ein Spezialist": die vier Karten als boxed, zentriertes
   2x2-Raster (statt des vollbreiten 7-Spalten-Rasters, in dem nur 4 von 7
   Spalten belegt wären), mit gerundeten, umrahmten Kärtchen. */
.formularbloecke-spezialist-section .formularcenter-problem-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 24px !important;
}
.formularbloecke-spezialist-section .formularcenter-problem-card {
  min-height: 0 !important;
  padding: 22px 26px !important;
  border: 1px solid rgba(5, 18, 41, 0.12) !important;
  border-radius: 16px !important;
}
.formularbloecke-spezialist-section .formularcenter-problem-icon {
  margin-bottom: 12px !important;
}
.formularbloecke-spezialist-section .formularcenter-problem-card .feature-content .title {
  margin-bottom: 8px !important;
}
@media only screen and (max-width: 575px) {
  .formularbloecke-spezialist-section .formularcenter-problem-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================================
   Durchschreibesätze (/formulartechnologien/durchschreibesaetze)
   ========================================================================= */

/* Abschnitt „Warum ein Spezialist – und nicht das nächste Office-Dokument":
   hellblauer Abschnittshintergrund (statt Weiß) im Farbton der übrigen
   bläulichen Sektionen. */
.page-durchschreibesaetze .software-roi-about-section {
  background-color: var(--tj-color-theme-bg) !important;
  /* Der große untere Freiraum stammt aus dem Ursprungs-Layout (Platz für die
     absolut positionierte, weit nach unten reichende Checklisten-Box). Hier ist
     der Inhalt kompakter – auf normalen Abstand zurücksetzen. */
  padding-bottom: 120px !important;
}
/* Die Checklisten-/Statistik-Box ist absolut positioniert und wurde über
   top + bottom auf die künstliche Mindesthöhe (950px) des Wrappers gestreckt,
   wodurch unterhalb des Inhalts eine leere Fläche entstand. Mindesthöhe
   aufheben und das Strecken nach unten stoppen, das Overlay-Layout bleibt. */
.page-durchschreibesaetze .software-roi-about-section .about-wrapper-four {
  min-height: 0 !important;
  align-items: flex-start !important;
}
.page-durchschreibesaetze .software-roi-about-section .about-float-area {
  bottom: auto !important;
}

/* Abschnitt „So lösen wir das …": Der Titelblock ist im Basis-Layout auf 500px
   gedeckelt – die lange h2 läuft einzeilig darüber hinaus, der Absatz umbricht
   aber schon bei 500px und wirkte dadurch deutlich schmaler als die Überschrift.
   Block so weit öffnen, dass die h2 einzeilig hineinpasst und der Absatz dieselbe
   Breite wie die Überschrift nutzt. */
.page-durchschreibesaetze .service-four-compact-section .sec-heading {
  max-width: 730px !important;
}

/* Abschnitt „So lösen wir das …": der zusammengeführte Abschlussabsatz
   erhält etwas Abstand nach oben zu den Leistungs-Kärtchen darüber. */
.page-durchschreibesaetze .service-four-outro {
  margin-top: 34px !important;
}

/* =========================================================================
   PHP-Formulare (/formulartechnologien/php-formulare)
   ========================================================================= */

/* Problem-Abschnitt „Warum ein PHP-Formular allein selten reicht": die sechs
   Karten als boxed, zentriertes 3x2-Raster statt linksbündig im Basisraster. */
.page-php-formulare .formularcenter-problem-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 24px !important;
}
.page-php-formulare .formularcenter-problem-card {
  min-height: 0 !important;
  padding: 18px 22px 18px !important;
}
.page-php-formulare .formularcenter-problem-icon {
  margin-bottom: 10px !important;
}
.page-php-formulare .formularcenter-problem-card .feature-content .title {
  margin-bottom: 8px !important;
}
@media only screen and (max-width: 767px) {
  .page-php-formulare .formularcenter-problem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }
}
@media only screen and (max-width: 480px) {
  .page-php-formulare .formularcenter-problem-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Abschnitt „So lösen wir das …": Abstand des Überschriften-Blocks nach unten
   halbieren (Basis 60px → 30px). */
.page-php-formulare .service-four-compact-section .sec-heading-wrap {
  margin-bottom: 30px !important;
}

/* Ablaufdiagramm „So läuft die Zusammenarbeit ab": kein Abstand nach oben. */
.page-php-formulare .formulare-project-process-section .h8-process-inner {
  margin-top: 0 !important;
}

/* =========================================================
   Seite: XFA-Formulare (Einzelanpassungen)
   ========================================================= */

/* Problem-Abschnitt „Warum XFA heute zur Sackgasse werden kann": die sechs
   Kacheln nicht über die volle Bildschirmbreite, sondern als boxed,
   zentriertes 3-Spalten-Raster (3x2). */
.page-xfa-formulare .formularcenter-problem-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 24px !important;
}
.page-xfa-formulare .formularcenter-problem-card {
  min-height: 0 !important;
  padding: 18px 22px 18px !important;
}
.page-xfa-formulare .formularcenter-problem-icon {
  margin-bottom: 10px !important;
}
.page-xfa-formulare .formularcenter-problem-card .feature-content .title {
  margin-bottom: 8px !important;
}
@media only screen and (max-width: 767px) {
  .page-xfa-formulare .formularcenter-problem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }
}
@media only screen and (max-width: 480px) {
  .page-xfa-formulare .formularcenter-problem-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   Seite: Formularcenter (/formulartechnologien/formularcenter/)
   ========================================================= */

/* Problem-Abschnitt „Verstreute Formulare kosten täglich …": sechs Karten
   als boxed, zentriertes 3x2-Raster statt linksbündig im 7-Spalten-Basisraster. */
.page-formularcenter .formularcenter-problem-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 24px !important;
}
.page-formularcenter .formularcenter-problem-card {
  min-height: 0 !important;
  padding: 18px 22px 18px !important;
}
.page-formularcenter .formularcenter-problem-icon {
  margin-bottom: 10px !important;
}
.page-formularcenter .formularcenter-problem-card .feature-content .title {
  margin-bottom: 8px !important;
}
@media only screen and (max-width: 767px) {
  .page-formularcenter .formularcenter-problem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }
}
@media only screen and (max-width: 480px) {
  .page-formularcenter .formularcenter-problem-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Abschnitt „Warum individuell – und nicht zusammengeklickt": Leerraum am
   Ende leicht reduzieren (kürzere untere Section-Abstände auf Desktop). */
@media only screen and (min-width: 992px) {
  .page-formularcenter .formularcenter-comparison-section {
    padding-bottom: 85px !important;
  }
}

/* Webformulare – Abschnitt „Welche Ergebnisse Sie erwarten können":
   Der Heading-Block ist über .tj-feature-section-two auf 500px begrenzt,
   wodurch die H2 eng umbricht. Hier breiter, damit die Überschrift Platz hat. */
.webformulare-ergebnisse-section .sec-heading {
  max-width: 760px !important;
}
.webformulare-ergebnisse-title {
  max-width: none !important;
}

/* =========================================================
   Seite: Craftnote-Formulare (/formulartechnologien/craftnote-formulare/)
   ========================================================= */

/* Abschnitt „Was Ihnen das konkret bringt": nach Entfernen der 7. Kachel
   bleiben 6 → als boxed, zentriertes 3x2-Raster statt linksbündig im
   7-Spalten-Basisraster (eine leere Spalte rechts). */
.page-craftnote-formulare .formularcenter-problem-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 24px !important;
}
@media only screen and (max-width: 767px) {
  .page-craftnote-formulare .formularcenter-problem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }
}
@media only screen and (max-width: 480px) {
  .page-craftnote-formulare .formularcenter-problem-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Abschnitt „Welche Ergebnisse Sie erwarten können": das Formularbild rechts
   schmaler halten, damit die linke Inhaltsseite (Überschrift + Karten) mehr
   Raum bekommt und das Bild nur als rechter Akzent bleibt. */
.page-craftnote-formulare .webformulare-results-section-responsive .feature-bg-images {
  width: 560px !important;
  max-width: 560px !important;
}

/* Abschnitt „So läuft Ihr Craftnote-Formularprojekt ab": der erklärende Absatz
   unter der H2 ist entfernt → Abstand zwischen Überschrift und Ablauf-Diagramm
   deutlich straffen. */
.page-craftnote-formulare .formulare-project-process-section .sec-heading.h8-section-heading.sec-heading-centered {
  margin-bottom: 16px !important;
}

/* =========================================================
   Seite: Interaktive & dynamische Formulare
   (/formulartechnologien/interaktive-dynamische-formulare/)
   ========================================================= */

/* Ablaufdiagramm „So läuft die Zusammenarbeit ab": Das Grid ist im Design für
   7 Spalten angelegt, dieser Ablauf hat aber nur 6 Schritte → die leere
   7. Spalte ließ die Reihe nach links kleben. Auf Desktop auf 6 gleich breite
   Spalten stellen, damit die Schritte die volle Breite füllen und mittig stehen. */
@media only screen and (min-width: 1200px) {
  .page-interaktive-dynamische-formulare .software-project-process-section .h8-process-inner {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   Seite: OpenOffice-Formulare
   (/formulartechnologien/openoffice-formulare/)
   ========================================================= */

/* Abschnitt „So lösen wir das …": die beiden erklärenden Absätze (über und
   unter den Karten) zentriert und auf 900px begrenzt — via .zentrierter-absatz
   im Markup. Hier nur das 2x2-Kartenblock zentrieren und straffen. */
.page-openoffice-formulare .pdf-problem-card-row {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Etwas Luft zwischen dem Kartenblock und dem abschließenden Absatz. */
.page-openoffice-formulare .pdf-problem-card-row + .zentrierter-absatz {
  margin-top: 40px !important;
}

/* Abschnitt „So läuft die Zusammenarbeit ab": weißer Hintergrund, weniger
   Leerraum zwischen Überschrift und Ablauf-Diagramm. */
.page-openoffice-formulare .software-project-process-section {
  background-color: #ffffff;
}
.page-openoffice-formulare .formulare-project-process-section .sec-heading.h8-section-heading.sec-heading-centered {
  margin-bottom: 18px !important;
}
/* Das Diagramm ist im Design für 7 Spalten angelegt, dieser Ablauf hat aber
   nur 6 Schritte → die leere 7. Spalte ließ die Reihe nach links kleben. Auf
   Desktop auf 6 gleich breite Spalten stellen, damit die Schritte die volle
   Breite füllen und mittig stehen. */
@media only screen and (min-width: 1200px) {
  .page-openoffice-formulare .software-project-process-section .h8-process-inner {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   Seite: LibreOffice-Formulare
   (/formulartechnologien/libreoffice-formulare/)
   ========================================================= */

/* Abschnitt „So lösen wir das – von der Eingabe bis zur Weiterverarbeitung":
   grauer Abschnittshintergrund statt Weiß. */
.page-libreoffice-formulare .service-four-compact-section {
  background-color: #f7f7f7 !important;
}

/* Abschnitt „Die modernen Alternativen, die wir Ihnen meist empfehlen":
   Titel und Inhalt je Karte untereinander stapeln (statt nebeneinander),
   damit beide die volle Kartenbreite nutzen. Die Karten sind per main.css als
   zweispaltiges Grid gesetzt (display:grid !important) – deshalb hier das Grid
   auf eine einzige Spalte stellen (nicht über flex-direction, das greift bei
   Grid nicht). */
.page-libreoffice-formulare .software-problem-section .service-style-3 {
  grid-template-columns: 1fr !important;
  align-items: start !important;
  row-gap: 14px !important;
}
.page-libreoffice-formulare .software-problem-section .service-style-3 .software-service-title,
.page-libreoffice-formulare .software-problem-section .service-style-3 .service-title,
.page-libreoffice-formulare .software-problem-section .service-style-3 .desc {
  max-width: 100% !important;
  width: 100% !important;
}

/* Die Hover-Hintergrundgrafiken der Karten sind entfernt (Markup + Dateien).
   Beim Hover statt Bild + weißer Schrift jetzt hellblauer Hintergrund und
   schwarze Schrift; kein Aufwachsen der Kartenhöhe. */
.page-libreoffice-formulare .software-problem-section .service-style-3:hover {
  background-color: #dfecfd !important;
  min-height: 185px !important;
}
.page-libreoffice-formulare .software-problem-section .service-style-3:hover .title,
.page-libreoffice-formulare .software-problem-section .service-style-3:hover .title a,
.page-libreoffice-formulare .software-problem-section .service-style-3:hover p,
.page-libreoffice-formulare .software-problem-section .service-style-3:hover li,
.page-libreoffice-formulare .software-problem-section .service-style-3:hover strong,
.page-libreoffice-formulare .software-problem-section .service-style-3:hover .software-service-icon i {
  color: #000 !important;
}

/* Abschnitt „Lassen Sie uns kurz draufschauen …" (Abschluss): grauer
   Abschnittshintergrund statt Weiß. */
.page-libreoffice-formulare .pdf-formulare-abschluss-section-responsive {
  background-color: #f7f7f7 !important;
}

/* =====================================================================
   print-formulare
   ===================================================================== */

/* Abschnitt „Was wir liefern – vom Druck bis zur modernen Alternative":
   hellgrauer Abschnittshintergrund statt Weiß. */
.page-print-formulare .print-liefern-section {
  background-color: #f2f4f6 !important;
}

/* Abschnitt „So läuft die Zusammenarbeit ab": ohne Grafiken. Die runden
   Bildplätze (.process-img, 220x250px) sind aus dem Markup entfernt; der
   Schrittinhalt überlappte sie zuvor per margin-top:-35px und trug unten
   44px Extra-Padding. Ohne Bild sitzt der Inhalt (Nummer + Titel) damit
   ausgewogen mittig in der Karte – Abstände oben/unten kommen aus dem
   24px-Padding der Kachel. */
.page-print-formulare .pdf-steps .h9-process-item .process-content {
  margin-top: 0 !important;
  padding-bottom: 0 !important;
}

/* =====================================================================
   Seite „Anfrageformular" (/formulartechnologien/anfrageformular/)
   ===================================================================== */

/* Abschnitt „Was ein durchdachtes Anfrageformular im Alltag verändert":
   grauer Hintergrund statt Weiß (Basis .pdf-problem-section = #fff). Die
   dunklen Karten bleiben unverändert. */
.page-anfrageformular .pdf-problem-section {
  background-color: #f2f3f5 !important;
}

/* Abschnitt „Eingebunden in Ihre bestehende Umgebung": die 4 Karten als
   2x2-Raster in einem gemeinsamen, hellen Box-Container (Rahmen + Radius,
   dezenter Schatten), zentriert und in der Breite begrenzt. Basis war ein
   7-Spalten-Raster ohne Box. */
.page-anfrageformular .formularcenter-problem-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #ffffff !important;
  border: 1px solid rgba(5, 18, 41, 0.10) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 45px rgba(5, 18, 41, 0.06) !important;
  padding: 32px !important;
}
.page-anfrageformular .formularcenter-problem-card {
  min-height: 0 !important;
  padding: 22px 22px !important;
  border: 1px solid rgba(5, 18, 41, 0.10) !important;
  border-radius: 14px !important;
  background: rgba(247, 247, 247, 0.6) !important;
}
.page-anfrageformular .formularcenter-problem-icon {
  margin-bottom: 14px !important;
}
.page-anfrageformular .formularcenter-problem-card .feature-content .title {
  margin-bottom: 10px !important;
}
@media only screen and (max-width: 575px) {
  .page-anfrageformular .formularcenter-problem-grid {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
  }
}

/* Abschnitt „So läuft die Zusammenarbeit ab": ohne Grafiken (analog zu
   .page-print-formulare). Die runden Bildplätze (.process-img) sind aus dem
   Markup entfernt; der Schrittinhalt überlappte sie zuvor per
   margin-top:-35px und trug unten 44px Extra-Padding. Ohne Bild sitzt der
   Inhalt (Nummer + Titel) damit ausgewogen mittig in der Karte. */
.page-anfrageformular .pdf-steps .h9-process-item .process-content {
  margin-top: 0 !important;
  padding-bottom: 0 !important;
}

/* =====================================================================
   Formulartechnologien /formulartechnologien/kontaktformular
   ===================================================================== */

/* „Spezialist"-Section: hellblauer Abschnittshintergrund (statt Weiß) im
   Farbton der übrigen bläulichen Sektionen. */
.page-kontaktformular .software-roi-about-section {
  background-color: var(--tj-color-theme-bg) !important;
}
/* Der große untere Freiraum stammt aus dem Basis-Layout: .about-wrapper-four
   erzwingt min-height 720px, die Checklisten-/Statistik-Box (.about-float-area)
   ist absolut auf bottom:0 gestreckt. Mindesthöhe aufheben und die Box in den
   normalen Fluss zurückholen, damit der Abschnitt den Inhalt eng umschließt. */
.page-kontaktformular .software-roi-about-section .about-wrapper-four {
  min-height: 0 !important;
  align-items: flex-start !important;
}
.page-kontaktformular .software-roi-about-section .about-float-area {
  bottom: auto !important;
}

/* „Warum selbst lösen"-Section: zu viel Leerraum am Ende reduzieren.
   Der große Abstand nach unten entsteht aus dem Bottom-Padding dieses
   Abschnitts PLUS dem margin-top:120px des folgenden dunklen Prozess-
   Abschnitts. Beide auf dieser Seite deutlich verkleinern. */
.page-kontaktformular .service-offer-light-section {
  padding-bottom: 45px !important;
}
.page-kontaktformular .formularcenter-process-section {
  margin-top: 55px !important;
}

/* FAQ-Bild nicht beschneiden, nur auf Breite skalieren (Basis nutzt
   object-fit:cover + height:100% und würde das Bild sonst zuschneiden). */
.page-kontaktformular .pdf-faq-section .overview-img {
  height: auto;
  min-height: 0;
}
.page-kontaktformular .pdf-faq-section .overview-img img {
  height: auto;
  object-fit: contain;
}

/* Abschluss-/CTA-Section „Lassen Sie uns kurz draufschauen": hellgrauer
   statt weißer Hintergrund. Klasse .section-white bleibt erhalten (Layout-
   Regeln hängen daran), nur die Hintergrundfarbe wird überschrieben. */
.page-kontaktformular .tj-about-section-five.h8-about.section-white {
  background-color: #f7f7f7 !important;
}

/* HTML-Formulare: Problem-Abschnitt „Warum ein HTML-Formular allein selten
   das Problem löst": die sechs Kacheln nicht über die volle Bildschirmbreite,
   sondern als boxed, zentriertes 3-Spalten-Raster (3x2). */
.page-html-formulare .formularcenter-problem-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 24px !important;
}
@media only screen and (max-width: 767px) {
  .page-html-formulare .formularcenter-problem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }
}
@media only screen and (max-width: 480px) {
  .page-html-formulare .formularcenter-problem-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   Seite: Excel-Formulare
   (/formulartechnologien/excel-formulare/)
   ========================================================= */

/* Abschnitt „So läuft die Zusammenarbeit ab": Das Diagramm ist im Design für
   7 Spalten angelegt, dieser Ablauf hat aber nur 6 Schritte → die leere
   7. Spalte ließ die Reihe nach links kleben. Auf Desktop auf 6 gleich breite
   Spalten stellen, damit die Schritte die volle Breite füllen und mittig stehen. */
@media only screen and (min-width: 1200px) {
  .page-excel-formulare .software-project-process-section .h8-process-inner {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

/* Abschluss-/CTA-Section „Lassen Sie uns kurz draufschauen": hellgrauer
   statt weißer Hintergrund. Klasse .section-white bleibt erhalten (Layout-
   Regeln hängen daran), nur die Hintergrundfarbe wird überschrieben. */
.page-excel-formulare .tj-about-section-five.h8-about.section-white {
  background-color: #f7f7f7 !important;
}

/* =========================================================
   Seite: WordPress-Formulare
   (/formulartechnologien/wordpress-formulare/)
   ========================================================= */

/* Hero-Bild vollständig zeigen (nicht per CSS zuschneiden) – per contain
   eingepasst statt formatfüllend (cover) beschnitten und oben ausgerichtet,
   damit es bündig mit der Überschrift beginnt. Nur diese Seite. */
.page-wordpress-formulare .hero-images-box-four img {
  object-fit: contain !important;
  object-position: center top !important;
}

/* Bildspalte oben bündig mit der h1 beginnen lassen: der Basiswert top: 95px
   drückte das Bild zu weit nach unten. Der Startpunkt der h1 ergibt sich aus
   dem padding-top der Inhaltsspalte (.hero-content-four) – 130px ab 1200px,
   80px zwischen 1025–1199px. Genau darauf wird die absolut positionierte
   Bildspalte gesetzt. Unter 1025px ist die Bildspalte gestapelt (top: auto)
   und bleibt unberührt. */
@media only screen and (min-width: 1200px) {
  .page-wordpress-formulare .formulare-erstellen-hero .hero-images-box-four {
    top: 130px !important;
  }
}
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
  .page-wordpress-formulare .formulare-erstellen-hero .hero-images-box-four {
    top: 80px !important;
  }
}

/* Problem-Abschnitt „Warum WordPress-Formulare im Alltag oft an Grenzen
   stoßen": nach Entfernen einer Kachel bleiben sechs — nicht über die volle
   Bildschirmbreite, sondern als boxed, zentriertes 3x2-Raster. */
.page-wordpress-formulare .formularcenter-problem-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 24px !important;
}
@media only screen and (max-width: 767px) {
  .page-wordpress-formulare .formularcenter-problem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }
}
@media only screen and (max-width: 480px) {
  .page-wordpress-formulare .formularcenter-problem-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =====================================================================
   Seite „Word-Formulare" (/formulartechnologien/word-formulare/)
   ===================================================================== */

/* Abschnitt „So lösen wir das …": großer Leerraum am Ende reduzieren.
   Er stammt aus dem Basis-Layout: .about-wrapper-four erzwingt eine
   min-height und die Checklisten-/Statistik-Box (.about-float-area) ist
   absolut auf bottom:0 gestreckt. Mindesthöhe aufheben und die Box in den
   normalen Fluss zurückholen, damit der Abschnitt den Inhalt eng umschließt. */
.page-word-formulare .software-roi-about-section .about-wrapper-four {
  min-height: 0 !important;
  align-items: flex-start !important;
}
.page-word-formulare .software-roi-about-section .about-float-area {
  bottom: auto !important;
}

/* Abschnitt „Wann sich welche Ergebnisse zeigen": hellblauer
   Abschnittshintergrund statt Weiß (Basis .pdf-about-white-section = #fff),
   im Farbton der übrigen bläulichen Sektionen. */
.page-word-formulare .pdf-formulare-abschluss-section-responsive {
  background-color: var(--tj-color-theme-bg) !important;
}

/* Abschnitt „So läuft die Zusammenarbeit ab": dunkelblauer Hintergrund
   (Farbton der übrigen dunklen Sektionen, #012738) und ohne Grafiken. Die
   runden Bildplätze (.process-img) sind aus dem Markup entfernt; der
   Schrittinhalt überlappte sie zuvor per margin-top:-35px und trug unten
   Extra-Padding. Ohne Bild sitzt der Inhalt (Nummer + Titel) ausgewogen
   mittig; die Kacheln tragen keinen eigenen Hintergrund. Überschrift und
   Schritt-Titel werden hell, damit sie auf Dunkelblau lesbar bleiben. */
.page-word-formulare .pdf-steps {
  background-color: var(--tj-color-theme-dark) !important;
}
.page-word-formulare .pdf-steps .sec-title {
  color: #ffffff !important;
}
.page-word-formulare .pdf-steps .h9-process-item {
  background-color: transparent !important;
}
.page-word-formulare .pdf-steps .h9-process-item::before {
  display: none !important;
  background-color: transparent !important;
}
.page-word-formulare .pdf-steps .h9-process-item .process-content {
  margin-top: 0 !important;
  padding-bottom: 0 !important;
}
.page-word-formulare .pdf-steps .h9-process-item .process-content .title {
  color: #ffffff !important;
}

/* Startseite-Hero: längere H1 → kleinere Schrift (nur Startseite, nicht Bautagesbericht) */
.startseite-hero .hero-title {
  font-size: 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .startseite-hero .hero-title {
    font-size: 36px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .startseite-hero .hero-title {
    font-size: 32px;
  }
}