/*
Theme Name:     masdemas
Theme URI:      n/a
Template:       kadence
Author:         Matthias Reinders
Author URI:     n/a
Description:    Child Theme Description
Version:        1.0
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/


/* Thomas Jahn Startseite: Hero + Leistungen. Eine Datei, in eure CSS uebernehmen. */

/* ==========================================================================
   Thomas Jahn: Hero-Abschnitt  (originalgetreu nach Variante B)
   In eure CSS-Datei uebernehmen. Kein Inline-CSS in den Bloecken.
   Farben aus Variante B. Schrift vorerst Theme-Standard.
   ========================================================================== */

:root{
  --tj-navy:   #0f172a;
  --tj-blue:   #1e3a8a;
  --tj-gold:   #ca8a04;
  --tj-gold-d: #a06f03;
  --tj-bg:     #f8fafc;
  --tj-surface:#ffffff;
  --tj-text:   #000000;
  --tj-muted:  #1f2a3a;
  --tj-line:   #e3e8ef;
}

/* --- Hero-Reihe: 2 Spalten, mittig ausgerichtet --- */
.tj-hero > .kt-row-column-wrap{ align-items: center; gap: 50px; }
.tj-hero .kt-inside-inner-col{ max-width: 640px; }

/* Badge-Pille statt schlichter Zeile (mit goldenem Punkt) */
.tj-hero .tj-eyebrow{
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--tj-line);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--tj-navy);
  margin: 0 0 22px;
}
.tj-eyebrow::before{
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tj-gold);
  flex: 0 0 auto;
}

.tj-h1{
  color: var(--tj-navy);
  font-size: 3.2rem;
  line-height: 1.08;
  font-weight: 600;
  margin: 0 0 4px;
}
@media (max-width: 900px){ .tj-h1{ font-size: 2.5rem; } }

/* goldener Akzent im zweiten Satz (Kadence-Highlight ueberschreiben) */
.tj-hero .tj-h1 mark.kt-highlight,
.tj-hero .tj-h1 .kt-highlight{ background: transparent; color: var(--tj-gold); padding: 0; }

.tj-hero .tj-lead{
  color: var(--tj-text);
  font-size: 1.18rem;
  line-height: 1.55;
  max-width: 40ch;
  margin: 24px 0 30px;
}

/* Buttons: goldener Primaer-Button mit weichem Schatten + Pfeil */
.kb-btns2_a1b2c7-05{ display: flex; gap: 14px; flex-wrap: wrap; }
.kb-btns2_a1b2c7-05 .kt-btn-inner-text{ font-weight: 600; }
.kb-btns2_a1b2c7-05 a:first-child .kt-btn-inner-text::after{ content: "  \2192"; }
.kb-btns2_a1b2c7-05 .kb-button:first-child{ box-shadow: 0 6px 18px -8px rgba(202,138,4,.7); }
.kb-btns2_a1b2c7-05 .kb-button:last-child{ border: 1px solid var(--tj-line); }

/* Kennzahlen-Reihe (hero-trust) */
.tj-stats{ margin-top: 34px; }
.tj-stats > .kt-row-column-wrap{ gap: 26px; }
.tj-stat-n{ color: var(--tj-navy); font-size: 1.5rem; font-weight: 700; }
.tj-stat-l{ color: var(--tj-muted); font-size: .85rem; }

/* Portraet in der rechten Spalte: fuellt die Spalte, gerahmt */
.tj-photo > .kt-inside-inner-col{ height: 100%; }
.tj-photo .wp-block-kadence-image{ width: 100%; }
.tj-photo figure.aligncenter{ width: 100%; margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -26px rgba(15,23,42,.5); }
.tj-photo figure.aligncenter img{ width: 100%; height: auto; display: block; }

/* ==========================================================================
   Thomas Jahn: Abschnitt "Leistungen" (2x2-Raster, originalgetreu)
   Setzt die Farb-Variablen aus childtheme-hero.css voraus (:root --tj-*).
   In eure CSS-Datei uebernehmen.
   ========================================================================== */

.tj-leistungen{ background: var(--tj-surface); }

/* zentrierter Kopfbereich (wie .head in der Vorlage) */
.tj-kicker,
.tj-h2,
.tj-intro{ text-align: center; }
.tj-kicker{
  color: var(--tj-gold);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .74rem;
  font-weight: 600;
  margin: 0 0 12px;
}
.tj-h2{
  color: var(--tj-navy);
  font-size: 2.3rem;
  line-height: 1.15;
  font-weight: 600;
}
@media (max-width: 767px){ .tj-h2{ font-size: 1.8rem; } }
.tj-intro{
  color: var(--tj-text);
  font-size: 1.08rem;
  line-height: 1.6;
  max-width: 62ch;
  margin: 12px auto 0;
}

/* Karten-Raster: Abstand wie Vorlage (24px) */
.tj-svc-grid > .kt-row-column-wrap{ gap: 24px; }

/* Karte */
.tj-svc > .kt-inside-inner-col{
  background: var(--tj-surface);
  border: 1px solid var(--tj-line);
  border-radius: 16px;
  padding: 32px;
  height: 100%;
  transition: box-shadow .2s, transform .2s;
}
.tj-svc > .kt-inside-inner-col:hover{
  box-shadow: 0 18px 40px -22px rgba(15,23,42,.4);
  transform: translateY(-3px);
}

/* Icon-Kachel */
.tj-ic{
  width: 52px; height: 52px;
  border-radius: 12px;
  background: #fff7e6;
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.tj-ic svg{
  width: 28px; height: 28px;
  stroke: var(--tj-gold);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tj-svc-h{ color: var(--tj-navy); font-size: 1.3rem; font-weight: 600; }
.tj-svc-p{ color: var(--tj-text); font-size: 1rem; line-height: 1.6; }

.tj-more a{
  display: inline-flex;
  gap: 7px;
  margin-top: 8px;
  color: var(--tj-navy);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
}
.tj-more a:hover{ color: var(--tj-gold); }

/* ==========================================================================
   Thomas Jahn: Streifen "Erfahrung aus vielen Branchen" (Kadence-Buttons)
   ========================================================================== */
.tj-strip{ border-top: 1px solid var(--tj-line); border-bottom: 1px solid var(--tj-line); }
.tj-strip-lab{ color: var(--tj-navy); font-weight: 600; font-size: .92rem; margin: 0; }
/* die 5 Branchen-Buttons rechts, umbrechend */
.kb-btns2_d10005-24{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.kb-btns2_d10005-24 .kt-btn-inner-text{ font-size: .86rem; font-weight: 600; }
@media (max-width: 767px){ .kb-btns2_d10005-24{ justify-content: flex-start; } }

/* ==========================================================================
   Thomas Jahn: Mobil-Feinschliff Hero (NUR Media-Queries, Desktop unberuehrt)
   ========================================================================== */
@media (max-width: 767px){
  .tj-hero .tj-h1{ font-size: 2.05rem; line-height: 1.12; }
  .tj-hero .tj-lead{ font-size: 1.05rem; line-height: 1.5; margin: 16px 0 20px; max-width: none; }
  .tj-hero .tj-eyebrow{ margin-bottom: 14px; }
  .tj-stat-n{ font-size: 1.25rem; }
  .tj-stat-l{ font-size: .8rem; }
}
@media (max-width: 480px){
  .tj-hero .tj-h1{ font-size: 1.8rem; }
}

a.kt-blocks-post-readmore {
	margin-top: 20px !important;
}