/*
Theme Name: Thomas Krause
Theme URI: https://transportzeichnung.de
Author: Film-labor
Author URI: https://film-labor.de
Description: Block-Theme (Full Site Editing) für das Ingenieurbüro Thomas Krause — Spezial- und Schwertransporte, Berlin. Navy/Orange, Yantramanav. Statische Vorlage 1:1 nachgebaut.
Version: 1.6.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thomas-krause
*/

/* ===========================================================
   Thomas Krause — Design-Skin
   Tokens (Farben, Schrift, Spacing) liegen in theme.json.
   Diese Datei ist die visuelle Haut: alles, was Gutenberg-Blöcke
   nicht von selbst abbilden. Block-Markup trägt die Klassen.
   =========================================================== */

:root{
  --navy:        #001659;
  --navy-deep:   #000a30;
  --navy-mid:    #00235a;
  --navy-light:  #122455;
  --orange:      #C8860D;
  --orange-light:#E6A52E;
  --ink:         #212121;
  --mid:         #565969;
  --line:        #e8e8e9;
  --paper:       #ffffff;
  --light:       #f4f4f4;
  --blue:        #1863dc;
  --blue-soft:   #405b92;
  --accent:      #C8860D;
  --ink-soft:    #565969;
  --muted:       #565969;
  --shadow-sm:   0 2px 6px rgba(0,22,89,.06);
  --shadow-md:   0 8px 24px rgba(0,22,89,.10);
  --shadow-lg:   0 24px 56px rgba(0,22,89,.16);
  --ease:        cubic-bezier(0.16,1,0.3,1);
}

html{scroll-behavior:smooth}
body{
  font-family:'Outfit','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:400;font-size:16px;line-height:1.7;
  color:var(--ink);background:#fff;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;transition:color .25s var(--ease)}

h1,h2,h3,h4,h5{
  font-family:'Outfit',sans-serif;
  font-weight:700;color:var(--navy);
  line-height:1.2;letter-spacing:-0.01em;
}

/* Block-Theme: Sektionen sind <section>-Gruppen, Inhalt zentriert in .wrap */
section.wp-block-group{padding:56px 36px}
/* Sektionen direkt aneinander — kein doppelter Zwischenraum */
.entry-content > .wp-block-group,
.entry-content > .tk-carousel-wrap{margin-top:0 !important;margin-bottom:0 !important}
.wrap{max-width:1320px;margin-left:auto;margin-right:auto;width:100%}

/* ============== KICKER / PRE-HEADINGS ============== */
.kicker,.pre-h1,.pre-h2{
  font-family:'Outfit',sans-serif;
  font-size:13px;letter-spacing:0.28em;text-transform:uppercase;
  color:var(--orange);font-weight:700;margin:0 0 14px;display:block;
}
.section-head{text-align:center;max-width:760px;margin:0 auto 64px}
.section-head .kicker::before{content:"— "}
.section-head .kicker::after{content:" —"}
.section-head h2{font-size:clamp(30px,3.4vw,46px);margin:0;letter-spacing:-0.015em}

/* ============== BUTTONS ============== */
.wp-block-button.btn-orange .wp-block-button__link,
a.btn-orange{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Outfit',sans-serif;
  font-size:13px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  background:var(--orange);color:#fff;
  padding:14px 26px;border-radius:0;border:none;
  box-shadow:var(--shadow-sm);
  transition:background .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
.wp-block-button.btn-orange .wp-block-button__link::after,
a.btn-orange::after{content:"→";font-weight:400;transition:transform .25s var(--ease)}
.wp-block-button.btn-orange .wp-block-button__link:hover,
a.btn-orange:hover{background:var(--orange-light);box-shadow:var(--shadow-md);transform:translateY(-1px);color:#fff}
.wp-block-button.btn-orange .wp-block-button__link:hover::after,
a.btn-orange:hover::after{transform:translateX(4px)}

.wp-block-button.btn-navy .wp-block-button__link{
  background:var(--navy);color:#fff;
}
.wp-block-button.btn-navy .wp-block-button__link:hover{background:var(--navy-mid);color:#fff}

/* btn-text: oranger Schriftzug ohne Hintergrund (Link-Optik) */
.wp-block-button.btn-text .wp-block-button__link,
a.btn-text{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Outfit',sans-serif;
  font-size:13px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  background:transparent;color:var(--orange);
  padding:6px 0;border-radius:0;border:none;box-shadow:none !important;
  filter:none !important;
  transition:color .25s var(--ease),transform .25s var(--ease);
}
.wp-block-button.btn-text .wp-block-button__link::after,
a.btn-text::after{content:"→";font-weight:400;transition:transform .25s var(--ease)}
.wp-block-button.btn-text.no-arrow .wp-block-button__link::after,
a.btn-text.no-arrow::after{content:none}
.wp-block-button.btn-text .wp-block-button__link:hover,
a.btn-text:hover{background:transparent;color:var(--orange-light);box-shadow:none !important;
  filter:none !important;transform:none}
.wp-block-button.btn-text .wp-block-button__link:hover::after,
a.btn-text:hover::after{transform:translateX(4px)}

.wp-block-button.btn-outline .wp-block-button__link,
a.btn-outline{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Outfit',sans-serif;
  font-size:13px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  background:transparent;color:#fff;
  padding:13px 26px;border-radius:0;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.65);
  transition:box-shadow .25s var(--ease),background .25s var(--ease);
}
.wp-block-button.btn-outline .wp-block-button__link::after,
a.btn-outline::after{content:"→"}
.wp-block-button.btn-outline .wp-block-button__link:hover,
a.btn-outline:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 2px #fff;color:#fff}

/* ============== HEADER (fest oben, ohne Trennlinie) ============== */
header.top,header.wp-block-template-part{
  background:#fff;
  position:fixed;top:0;left:0;right:0;z-index:100;
}
/* Pfeil-Suffix bei orangen Buttons im Header ausblenden */
.tk-header-inner .btn-orange .wp-block-button__link::after,
.tk-header-inner a.btn-orange::after{display:none}
/* Bei eingeloggtem WP-Admin Bar nach unten verschieben */
.admin-bar header.top,.admin-bar header.wp-block-template-part{top:32px}
@media (max-width:782px){
  .admin-bar header.top,.admin-bar header.wp-block-template-part{top:46px}
}
/* Inhalt unter dem fixed Header anschieben — Header-Hoehe ~90px */
.wp-site-blocks{padding-top:0 !important;margin-top:0 !important}
.wp-site-blocks > main{padding-top:90px;margin-top:0}
.admin-bar .wp-site-blocks > main{padding-top:122px}
/* Startseite: Hero spannt sich UEBER den Header (nahtlos), Header
   sitzt obendruff. Andere Seiten behalten das Padding. */
.home .wp-site-blocks > main{padding-top:0 !important}
.tk-header-inner{
  max-width:1320px;margin:0 auto;
  padding:18px 36px;gap:34px;
  align-items:flex-end;
}
.tk-brand{display:flex;flex-direction:row;align-items:center;gap:14px;line-height:1}
.tk-logo img{display:block;height:54px;width:auto}
.tk-brand-name{
  font-family:'Outfit',sans-serif;
  font-weight:900;letter-spacing:-0.01em;font-size:24px;
  color:var(--navy);text-transform:uppercase;margin:0;line-height:1;
}
.tk-brand-name a{color:var(--navy)}
.tk-brand-sub{
  font-weight:400;font-size:11px;letter-spacing:0.18em;
  color:var(--orange);text-transform:uppercase;margin:0;line-height:1;
}
.tk-nav{
  font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0.06em;
}
.tk-nav .wp-block-navigation-item__content{color:var(--navy);padding:10px 2px}
.tk-nav .wp-block-navigation-item__content:hover{color:var(--orange)}
.tk-nav .wp-block-navigation__submenu-container{
  box-shadow:var(--shadow-lg);border-top:3px solid var(--orange);
  padding:8px 0;min-width:300px;
}
.tk-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  text-transform:uppercase;letter-spacing:0.06em;font-weight:500;color:var(--navy);
  padding:12px 24px;font-size:13px;
}
.tk-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{
  background:var(--light);color:var(--navy);
}

/* ============== HERO (Vollbild-Bild) ============== */
.tk-hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;
  background:var(--navy-deep);
  overflow:hidden;padding:0 !important;
  margin-top:0 !important;
}
.admin-bar .tk-hero{min-height:calc(100vh - 32px)}
@media (max-width:782px){
  .admin-bar .tk-hero{min-height:calc(100vh - 46px)}
}
/* Hero-Inhalt unter den Header verschieben damit nichts verdeckt ist */
.tk-hero-content{padding-top:130px !important}
.tk-hero-bg{
  position:absolute;inset:0;margin:0;z-index:0;
}
.tk-hero-bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 50%;
}
.tk-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(0,10,48,.90) 0%,rgba(0,10,48,.68) 40%,rgba(0,10,48,.20) 100%);
}
.tk-hero-content{
  position:relative;z-index:2;width:100%;
  padding:72px 36px;
}
.tk-hero h1{
  color:#fff;font-weight:700;
  font-size:clamp(42px,5.6vw,78px);
  line-height:1.02;letter-spacing:-0.02em;
  margin:0 0 24px;text-transform:uppercase;
}
.tk-hero h1 .accent,.tk-hero h1 mark{
  color:var(--orange-light);display:block;background:transparent;
}
.tk-hero .hero-subline{
  font-size:clamp(14px,1.3vw,17px);font-weight:500;
  color:var(--orange-light);text-transform:uppercase;letter-spacing:0.08em;
  line-height:1.55;margin:0 0 22px;max-width:56ch;
}
.tk-hero .lede{
  font-size:18.5px;line-height:1.6;max-width:50ch;
  color:rgba(255,255,255,.85);margin:0 0 34px;font-weight:300;
}

/* ============== INTRO 2-COL ============== */
.intro-block{gap:80px;align-items:center}
.intro-block .text-col p{font-size:17px;line-height:1.8;color:var(--mid);margin:0 0 18px}
.intro-block h2{font-size:clamp(28px,3.2vw,42px);margin:0 0 28px;color:var(--navy)}
.city-list{
  display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:24px;
  font-size:14px;color:var(--navy);font-weight:500;
}
.city-list .wp-block-navigation-item,
.city-list span{padding:6px 14px;background:var(--light);border-left:2px solid var(--orange)}
.intro-images{gap:8px}
.intro-images figure{margin:0;overflow:hidden;background:var(--light)}
.intro-images figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.intro-images figure:hover img{transform:scale(1.03)}

/* ============== SERVICES (Foto-Karten) ============== */
.services{background:var(--light)}
.svc-grid{gap:18px}
.svc{
  background:#fff;padding:0;overflow:hidden;
  display:flex;flex-direction:column;height:100%;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.svc:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.svc .svc-photo{margin:0}
.svc .svc-photo img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .6s var(--ease);
}
.svc:hover .svc-photo img{transform:scale(1.04)}
.svc .svc-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.svc h3{
  font-size:18px;font-weight:600;color:var(--navy);
  margin:0 0 8px;letter-spacing:-0.01em;line-height:1.25;
  transition:color .3s var(--ease);
}
.svc:hover h3{color:var(--orange)}
.svc h3 .em{display:block;font-size:14px;font-weight:500;color:var(--mid);letter-spacing:0;text-transform:none;margin-top:3px}
.svc p{margin:0 0 18px;color:var(--mid);font-size:14.5px;line-height:1.6}
.svc .svc-body .svc-link{margin-top:auto}
.svc .svc-link{
  font-size:11.5px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--orange);display:inline-flex;align-items:center;gap:6px;
}
.svc .svc-link::after{content:"→";transition:transform .25s var(--ease)}
.svc:hover .svc-link::after{transform:translateX(5px)}

/* ============== DARK CTA ============== */
.dark-cta{
  background:var(--navy);color:#fff;text-align:center;
  padding:96px 36px;position:relative;
}
.dark-cta::before{
  content:"";position:absolute;inset:0;
  background-image:url('assets/images/container-pattern.svg');
  background-size:600px 400px;background-repeat:repeat;opacity:0.5;
}
.dark-cta::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(0,22,89,.4) 0%,rgba(0,10,48,.7) 100%);
  pointer-events:none;
}
.dark-cta > *{position:relative;z-index:2}
.dark-cta .dark-cta-inner{max-width:780px;margin:0 auto}
.dark-cta .pre-h1{color:var(--orange-light);margin-bottom:18px}
.dark-cta h1,.dark-cta h2{
  color:#fff;font-size:clamp(32px,4vw,52px);font-weight:700;
  margin:0 0 26px;letter-spacing:-0.015em;
}
.dark-cta p{
  font-size:18px;line-height:1.7;color:rgba(255,255,255,.85);
  max-width:60ch;margin:0 auto 34px;font-weight:300;
}
.dark-cta .wp-block-buttons{justify-content:center}

/* ============== REFERENZEN / BEITRÄGE ============== */
.ref-grid{gap:28px}
.ref-card{
  position:relative;
  background:#fff;box-shadow:var(--shadow-sm);overflow:hidden;
  transition:box-shadow .35s var(--ease),transform .35s var(--ease);
}
.ref-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
/* Ganze Karte klickbar — Titel-Link spannt sich ueber die Card. */
.ref-card .ref-body h4 a::after{
  content:"";position:absolute;inset:0;z-index:1;
}
.ref-card .ref-body h4 a:hover{color:var(--orange)}
.ref-card .ref-img,.ref-card .wp-block-post-featured-image{
  aspect-ratio:4/3;overflow:hidden;background:var(--light);margin:0;
  display:flex;align-items:center;justify-content:center;
}
.ref-card .ref-img img,.ref-card .wp-block-post-featured-image img{
  width:100%;height:100%;object-fit:contain;
  transition:transform .8s var(--ease);
}
.ref-card:hover .ref-img img,.ref-card:hover .wp-block-post-featured-image img{transform:scale(1.05)}
.ref-card .ref-body{padding:6px 28px 22px}
.ref-card .cat,.ref-card .wp-block-post-terms{
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--orange);font-weight:700;
}
.ref-card h4,.ref-card .wp-block-post-title{
  font-size:18px;font-weight:700;color:var(--navy);
  margin:8px 0;line-height:1.3;letter-spacing:-0.005em;
}
.ref-card h4 a,.ref-card .wp-block-post-title a{color:var(--navy)}
.ref-card p,.ref-card .wp-block-post-excerpt{margin:0;font-size:14.5px;color:var(--mid);line-height:1.6}

/* ============== WORLD MAP ============== */
.worldmap{
  background:var(--navy);color:#fff;
  padding:104px 36px 96px;position:relative;overflow:hidden;
}
.worldmap > *{position:relative;z-index:2}
.worldmap .pre-h1{color:var(--orange-light);text-align:center}
.worldmap h1,.worldmap h2{
  color:#fff;font-size:clamp(36px,4.2vw,56px);font-weight:700;
  text-align:center;margin:0 0 22px;letter-spacing:-0.02em;
}
.worldmap .claim{
  text-align:center;font-size:20px;font-weight:300;
  color:rgba(255,255,255,.85);max-width:60ch;margin:0 auto 56px;
}
.worldmap-figure{
  position:relative;width:100%;max-width:950px;margin:0 auto;
  background:rgba(0,10,48,.55);
  border:1px solid rgba(255,94,20,.15);
  aspect-ratio:950/620;overflow:hidden;
}
.worldmap-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:invert(1) brightness(1.6) sepia(0.4) hue-rotate(170deg) saturate(0.5) opacity(0.32);
  pointer-events:none;
}
.worldmap-overlay{position:absolute;inset:0;width:100%;height:100%;display:block}
.worldmap-legend{
  display:flex;justify-content:center;gap:48px;flex-wrap:wrap;margin-top:36px;
  font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(255,255,255,.7);font-weight:500;
}
.worldmap-legend .swatch{
  display:inline-block;width:10px;height:10px;border-radius:10px;margin-right:10px;vertical-align:middle;
}
.worldmap-legend .swatch.primary{background:var(--orange-light);box-shadow:0 0 0 4px rgba(255,94,20,.25)}
.worldmap-legend .swatch.secondary{background:#7da5e8;box-shadow:0 0 0 3px rgba(125,165,232,.2)}
.worldmap-legend .swatch.tertiary{background:rgba(255,255,255,.4);box-shadow:0 0 0 3px rgba(255,255,255,.12)}

/* ============== PAGE HEAD (Unterseiten-Kopf) ============== */
.page-head{
  position:relative;background:var(--navy-deep);color:#fff;
  padding:120px 36px 80px;overflow:hidden;
}
.page-head .page-head-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0;
}
.page-head .page-head-bg img{width:100%;height:100%;object-fit:cover}
.page-head::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,10,48,.5) 0%,rgba(0,10,48,.85) 100%);
}
.page-head > *{position:relative;z-index:2}
.page-head .crumb{
  font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--orange-light);margin:0 0 22px;font-weight:500;
}
.page-head .crumb a{color:rgba(255,255,255,.65)}
.page-head .crumb a:hover{color:#fff}
.page-head h1,.page-head .wp-block-post-title{
  font-size:clamp(34px,4.5vw,60px);font-weight:700;
  letter-spacing:-0.02em;line-height:1.05;margin:0;color:#fff;
  text-transform:uppercase;max-width:22ch;
}

/* ============== SINGLE / LEAD — Einzelbeitrag, Projekt, Leistung ============== */
/* section.* — schlägt die generische section.wp-block-group-Polsterung (104px) */
section.single-lead{padding:14px 36px 0 !important}
.single-hero{margin:0 !important;padding:0 !important;background:#fff;
  display:flex;align-items:center;justify-content:center;
}
.single-hero img{
  max-width:100%;max-height:480px;width:auto !important;height:auto !important;
  display:block;margin:0 auto;object-fit:contain !important;aspect-ratio:auto !important;
}
/* Hero + Frage-Spalte nebeneinander, Leerraum nach unten weg */
.hero-row{max-width:1080px !important;
  display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:36px;
  align-items:center;padding:0 36px;max-width:1280px;margin:0 auto 0;
}
.hero-aside{padding:6px 0;color:var(--ink)}
.hero-aside h3{
  font-size:clamp(20px,1.6vw,28px);margin:0 0 12px;
  letter-spacing:-0.01em;color:var(--navy);font-weight:700;line-height:1.2;
}
.hero-aside p{font-size:14.5px;color:var(--mid);margin:6px 0;line-height:1.55}
.hero-aside a{color:var(--orange);font-weight:600}
.hero-aside a:hover{color:var(--orange-light)}
@media (max-width:860px){
  .hero-row{max-width:1080px !important;grid-template-columns:1fr;padding:0 24px}
}
section.single-lead .kicker{margin:0 0 6px}
section.single-lead h1,section.single-lead .wp-block-post-title{
  font-size:clamp(26px,3.2vw,44px);font-weight:700;letter-spacing:-0.02em;
  line-height:1.15;color:var(--navy);margin:0;max-width:30ch;
}
section.single-body{padding:10px 36px 84px !important}
/* Inhalt direkt nach dem Lead enger heranziehen */
section.single-lead + section.wp-block-group{padding-top:14px !important}

/* Projekt-Beitrag — Schablone: abwechselnd Bild / Text */
.proj-row{margin:0 0 18px !important;align-items:stretch}
.proj-row .wp-block-image{margin:0}
.proj-row h3{margin:0 0 10px;font-size:21px;color:var(--navy);font-weight:600;letter-spacing:-0.01em}
.proj-row p{margin:0;color:var(--mid);line-height:1.7;font-size:15.5px}
/* Bild + Text als gleich grosse Kacheln nebeneinander, klare Trennung */
@media (min-width:782px){
  /* prose breiter fuer Beitragsinhalt — sichtbarer Inhalt ~70vw */
  .single-body .prose{max-width:min(1100px, 70vw) !important}
  /* proj-row: 50/50 mit deutlichem Gap; keine Transform-Tricks */
  .proj-row.wp-block-columns{
    max-width:100% !important;width:100% !important;
    margin-left:auto !important;margin-right:auto !important;
    transform:none !important;gap:48px !important;
    align-items:stretch !important;
  }
  .proj-row .wp-block-column{
    flex-basis:calc(50% - 24px) !important;flex-grow:0 !important;
    align-self:stretch !important;
    display:flex !important;flex-direction:column !important;justify-content:center !important;
  }
  /* Bild im natuerlichen 4:3-Querformat */
  .proj-row .wp-block-image{align-self:center}
  .proj-row .wp-block-image img{
    aspect-ratio:4/3 !important;width:100% !important;height:auto !important;
    object-fit:cover !important;display:block !important;
  }
  /* ungerade Reihen: Bild LINKS, Text RECHTS */
  .proj-row:nth-of-type(odd) .wp-block-column:has(.wp-block-image){order:1}
  .proj-row:nth-of-type(odd) .wp-block-column:not(:has(.wp-block-image)){order:2}
  /* gerade Reihen: Text LINKS, Bild RECHTS */
  .proj-row:nth-of-type(even) .wp-block-column:has(.wp-block-image){order:2}
  .proj-row:nth-of-type(even) .wp-block-column:not(:has(.wp-block-image)){order:1}
}

/* ============== DETAIL BODY (Leistungs-Seiten) ============== */
.detail-body{gap:56px}
.detail-body .lead{font-size:17.5px;line-height:1.75;color:var(--mid);margin:0 0 20px}
.detail-body .lead.is-first{
  font-size:21px;color:var(--ink);font-weight:500;
  letter-spacing:-0.005em;line-height:1.5;
}
ul.checks{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:1fr 1fr;gap:14px 36px;
}
ul.checks li{
  font-size:15.5px;line-height:1.5;color:var(--ink);
  padding-left:30px;position:relative;
}
ul.checks li::before{
  content:"";position:absolute;left:0;top:6px;
  width:14px;height:9px;
  border-left:1.8px solid var(--orange);border-bottom:1.8px solid var(--orange);
  transform:rotate(-45deg);
}
.related{margin-top:88px;padding-top:64px;border-top:1px solid var(--line)}
.related-grid{gap:24px;margin-top:36px}
.related-card{
  display:block;background:#fff;padding:28px 28px 32px;
  border-bottom:3px solid var(--navy);box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.related-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-bottom-color:var(--orange)}
.related-card .num{font-size:11px;letter-spacing:0.2em;color:var(--orange);text-transform:uppercase;font-weight:700}
.related-card h4{margin:8px 0 6px;font-size:18px;font-weight:700;color:var(--navy);letter-spacing:-0.005em}
.related-card p{margin:0;font-size:14.5px;color:var(--mid);line-height:1.55}

/* ============== TIMELINE (Über mich) ============== */
.timeline{margin-top:48px;position:relative}
.timeline::before{content:"";position:absolute;left:140px;top:8px;bottom:8px;width:2px;background:var(--line)}
.tl-row{
  display:grid;grid-template-columns:140px 1fr;gap:48px;
  padding:32px 0;align-items:start;position:relative;
}
.tl-year{font-size:14px;letter-spacing:0.08em;color:var(--orange);font-weight:700;padding-top:4px}
.tl-row::before{
  content:"";position:absolute;left:135px;top:42px;
  width:12px;height:12px;background:var(--orange);transform:rotate(45deg);
}
.tl-row h4{font-size:20px;font-weight:700;color:var(--navy);margin:0 0 8px;letter-spacing:-0.005em}
.tl-row p{margin:0;color:var(--mid);font-size:16px;line-height:1.7}

/* ============== PORTRAIT (Über mich) ============== */
.portrait-block{gap:80px;align-items:start}
.portrait-frame{
  position:relative;background:var(--light);overflow:hidden;
  aspect-ratio:4/5;box-shadow:var(--shadow-md);margin:0;
}
.portrait-frame img{width:100%;height:100%;object-fit:cover}
.portrait-cred{
  margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--mid);font-weight:500;
}
.portrait-text h2{font-size:clamp(28px,3vw,40px);margin:0 0 28px;letter-spacing:-0.015em}
.portrait-text p{font-size:17px;line-height:1.75;color:var(--mid);margin:0 0 18px}
.signature{
  margin-top:32px;padding-top:20px;border-top:2px solid var(--orange);
  font-size:14px;color:var(--mid);
}
.signature strong,.signature b{color:var(--navy);font-weight:700;display:block;margin-bottom:2px;font-size:18px}

/* ============== TWO-COL (Werte / Auftraggeber) ============== */
.two-col{gap:88px;align-items:start}
.two-col p{font-size:17px;line-height:1.75;color:var(--mid);margin:0 0 18px}
.two-col h2{margin:0 0 28px}

/* ============== KONTAKT ============== */
.contact{background:var(--navy);color:#fff;padding:104px 36px}
.contact .pre-h1{color:var(--orange-light)}
.contact h1,.contact h2{
  color:#fff;font-size:clamp(30px,3.4vw,44px);font-weight:700;
  margin:0 0 26px;letter-spacing:-0.015em;
}
.contact-grid{gap:80px}
.contact .lede{font-size:18px;color:rgba(255,255,255,.85);max-width:48ch;margin:8px 0 0;line-height:1.6;font-weight:300}
.contact .stamp{
  margin-top:36px;padding-top:24px;border-top:2px solid var(--orange);
  font-size:13.5px;color:rgba(255,255,255,.7);line-height:1.7;
}
.contact dl{margin:0;display:grid;grid-template-columns:140px 1fr;row-gap:18px;column-gap:24px}
.contact dt{
  color:var(--orange-light);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  padding-top:7px;font-weight:700;
}
.contact dd{margin:0;font-size:18px;color:#fff;font-weight:500}
.contact dd a{color:#fff}
.contact dd a:hover{color:var(--orange-light)}

/* ============== PROSE (Impressum / Datenschutz) ============== */
.prose{max-width:780px;margin-left:auto;margin-right:auto}
.prose p,.prose li{font-size:15.5px;line-height:1.75;color:var(--ink)}
.prose h2{font-size:24px;color:var(--navy);font-weight:700;margin:48px 0 14px;letter-spacing:-0.005em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:18px;color:var(--navy);margin:28px 0 8px;font-weight:700}
.prose ul{padding-left:18px}

/* ============== FOOTER ============== */
footer.site,footer.wp-block-template-part{
  background:var(--navy-deep);color:rgba(255,255,255,.7);
  padding:72px 36px 32px;
}
.tk-footer-inner{max-width:1320px;margin:0 auto;gap:48px}
.tk-footer-inner h5,.tk-footer-inner .wp-block-heading{
  font-size:11px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--orange-light);margin:0 0 18px;font-weight:700;
}
.brand-foot{
  font-family:'Outfit',sans-serif;
  font-size:22px;font-weight:900;color:#fff;letter-spacing:-0.005em;
  margin:0 0 8px;text-transform:uppercase;
}
.footer-desc{font-size:14px;line-height:1.7;color:rgba(255,255,255,.65);max-width:38ch;margin:0}
.tk-footer-inner ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.tk-footer-inner li,.tk-footer-inner a{font-size:14px;color:rgba(255,255,255,.7)}
.tk-footer-inner a:hover{color:var(--orange-light)}
.footer-legal{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:24px;margin-top:32px;
  font-size:12px;letter-spacing:0.04em;color:rgba(255,255,255,.5);
}
.footer-legal a{font-size:12px;color:rgba(255,255,255,.5)}
.footer-legal a:hover{color:var(--orange-light)}

.detail-body .lead.is-intro{
  margin-top:36px;font-weight:500;letter-spacing:-0.01em;color:var(--ink);
}
.prose .prose-note,.prose-note{
  color:var(--muted);font-size:13.5px;margin-top:48px;
}

/* ============== KONTAKTFORMULAR ============== */
.tk-form{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.tk-form .full{grid-column:1/-1}
.tk-form label{
  display:flex;flex-direction:column;gap:8px;
  font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--mid);font-weight:700;
}
.tk-form input,.tk-form select,.tk-form textarea{
  font-family:'Outfit',sans-serif;font-size:15.5px;font-weight:400;
  padding:14px 16px;background:#fff;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line);
  border:none;outline:none;border-radius:0;
  transition:box-shadow .25s var(--ease);
}
.tk-form input:focus,.tk-form select:focus,.tk-form textarea:focus{
  box-shadow:inset 0 0 0 2px var(--orange);
}
.tk-form textarea{min-height:140px;resize:vertical;line-height:1.55}
.tk-form button{
  justify-self:start;margin-top:8px;
  font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;
  background:var(--orange);color:#fff;
  padding:16px 30px;border:none;cursor:pointer;border-radius:0;
  box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
.tk-form button:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);background:var(--orange-light)}
.tk-form button:active{transform:translateY(0)}
.tk-form .check{
  display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--mid);
  text-transform:none;letter-spacing:0;font-weight:400;line-height:1.55;
}
.tk-form .check input{margin-top:3px;flex-shrink:0;width:auto;padding:0;box-shadow:none}
.tk-form .check a{color:var(--orange);text-decoration:underline}

/* ============== RESPONSIVE ============== */
@media (max-width:1080px){
  .tk-hero-content{padding-top:78px;padding-bottom:78px}
}
@media (max-width:880px){
  section.wp-block-group,.dark-cta,.contact,.worldmap{padding-left:22px;padding-right:22px}
  section.wp-block-group{padding-top:44px;padding-bottom:44px}
  .tk-hero{min-height:clamp(440px,72vh,620px)}
  .tk-hero-content{padding:64px 22px}
  .tk-hero::after{background:linear-gradient(180deg,rgba(0,10,48,.62) 0%,rgba(0,10,48,.86) 100%)}
  .tk-header-inner{padding:14px 22px}
  ul.checks{grid-template-columns:1fr}
  .tk-form{grid-template-columns:1fr}
  .timeline::before{left:0}
  .tl-row{grid-template-columns:1fr;gap:8px;padding:20px 0 20px 24px}
  .tl-row::before{left:-6px;top:24px}
  .portrait-frame{max-width:420px}
  .page-head{padding:96px 22px 56px}
}

/* ============== TEAM (Das sind wir) ============== */
.team-section{background:#fff}
.team-grid{gap:24px}
.team-card{background:var(--light);overflow:hidden;display:flex;flex-direction:column}
.team-card .team-photo{margin:0}
.team-card .team-photo img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.team-body{padding:24px 28px 28px}
.team-body h3{font-size:20px;font-weight:600;color:var(--navy);margin:0}
.team-role{color:var(--orange);font-size:12.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;margin:5px 0 12px}
.team-body p{color:var(--mid);font-size:15px;line-height:1.7;margin:0}

/* ============== KUNDENSTIMMEN ============== */
.reviews-section{background:var(--light)}
.review-grid{gap:18px}
.review-card{background:#fff;padding:32px 30px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.review-quote{font-size:16.5px;line-height:1.65;color:var(--ink);margin:0 0 18px;font-weight:500}
.review-quote::before{content:"";display:block;width:34px;height:3px;background:var(--orange);margin-bottom:20px}
.review-author{margin:0;color:var(--mid);font-size:12.5px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase}

/* ============== COOKIE-HINWEIS ============== */
#tk-cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:var(--navy);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 22px;padding:16px 28px;
}
#tk-cookie[hidden]{display:none}
#tk-cookie p{margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.82);max-width:70ch}
#tk-cookie p a{color:var(--orange-light)}
#tk-cookie button{
  font-family:'Outfit',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  background:var(--orange);color:#fff;border:none;padding:11px 24px;cursor:pointer;
  transition:background .25s var(--ease);
}
#tk-cookie button:hover{background:var(--orange-light)}

/* ============== FOTO-KARUSSELL ============== */
.tk-carousel-wrap{position:relative;overflow:hidden;padding:40px 60px}
.tk-carousel{
  display:flex;gap:40px;overflow-x:auto;
  scroll-behavior:smooth;padding:24px 0;
  scrollbar-width:none;-ms-overflow-style:none;
}
.tk-carousel::-webkit-scrollbar{display:none}
.tk-carousel > .wp-block-image{
  flex:0 0 clamp(380px,38vw,489px);
  margin:0;overflow:hidden;
  transition:transform .55s var(--ease);
}
.tk-carousel > .wp-block-image img{
  width:100%;height:clamp(230px,23vw,300px);
  object-fit:cover;display:block;
  transition:transform .55s var(--ease);
}
/* zentriertes Bild beim Stop hebt sich, waechst, leichter Schatten */
.tk-carousel > .wp-block-image.tk-active{
  transform:none;z-index:1;
  box-shadow:none !important;
  filter:none !important;
}
.tk-carousel > .wp-block-image:hover img{transform:none}
.tk-carousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:50px;height:50px;border:none;cursor:pointer;
  background:rgba(0,10,48,.72);color:#fff;
  font-size:26px;line-height:1;font-family:'Outfit',sans-serif;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease);
}
.tk-carousel-btn:hover{background:var(--orange)}
.tk-carousel-btn.prev{left:0}
.tk-carousel-btn.next{right:0}

/* ============== INTERAKTIVE KARTE (Leaflet) ============== */
#tk-map{height:480px;width:100%;z-index:0;box-shadow:var(--shadow-md)}
#tk-map .leaflet-control-attribution{font-size:10px}
#tk-map .leaflet-popup-content{font-family:'Outfit',sans-serif;font-weight:500;color:var(--navy)}

/* ============== STAT-BAND (Vertrauen) — schlanker, sitzt vor der Karte */
.tk-stats{background:#fff;padding:24px 36px 8px !important}
.tk-stats-grid{gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important}
.tk-stat{
  display:flex;flex-direction:column;gap:2px;align-items:center;
  padding:18px 14px;background:var(--light);text-align:center;
}
.tk-stat .tk-stat-num{
  font-size:clamp(24px,2.2vw,32px);font-weight:700;color:var(--orange);
  margin:0;letter-spacing:-0.02em;line-height:1;
}
.tk-stat .tk-stat-label{
  margin:0;font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--mid);font-weight:600;
}

/* ============== REF-KICKER: gelber Mini-Titel ueber jedem Projekt-Card ============== */
.ref-card .ref-kicker{
  font-size:11.5px;letter-spacing:0.22em;text-transform:uppercase;
  color:#b88a00;font-weight:700;
  margin:0 0 8px;
}

/* Karussell: KEIN Schatten unter keinen Umstaenden — auch nicht beim Aktivieren/Scale */
.tk-carousel-wrap,
.tk-carousel,
.tk-carousel *,
.tk-carousel > .wp-block-image,
.tk-carousel > .wp-block-image *,
.tk-carousel > .wp-block-image img,
.tk-carousel > .wp-block-image.tk-active,
.tk-carousel > .wp-block-image.tk-active img,
.tk-carousel > .wp-block-image.tk-active figure{
  box-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
}

/* ============== WORLDMAP STATS (Startseite, über der Leaflet-Karte) ============== */
.worldmap-stats{
  display:flex;justify-content:center;gap:64px;flex-wrap:wrap;
  margin:8px auto 36px;padding-bottom:8px;max-width:900px;
}
.worldmap-stats .stat{
  display:flex;flex-direction:column;align-items:center;
  line-height:1.1;
}
.worldmap-stats .num{
  font-size:64px;font-weight:300;color:#fff;
  letter-spacing:-0.02em;line-height:1;
  display:block;
}
.worldmap-stats .lab{
  font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,.65);margin-top:10px;font-weight:600;
  display:block;
}
@media (max-width:760px){
  .worldmap-stats{gap:28px}
  .worldmap-stats .num{font-size:44px}
}

/* Timeline als echte Bloecke: WP-Group Wrappers brauchen kein extra Layout */
.timeline.wp-block-group{margin-top:48px;position:relative}
.tl-row.wp-block-group{
  display:grid;grid-template-columns:140px 1fr;gap:48px;
  padding:32px 0;align-items:start;position:relative;
}
.tl-row.wp-block-group > .wp-block-group{display:block}
.tl-row.wp-block-group > .tl-year{margin:0}
.tl-row.wp-block-group h4{font-size:20px;font-weight:700;color:var(--navy);margin:0 0 8px;letter-spacing:-0.005em}
.tl-row.wp-block-group p{margin:0;color:var(--mid);font-size:16px;line-height:1.7}
@media (max-width:760px){
  .tl-row.wp-block-group{grid-template-columns:1fr;gap:8px;padding:20px 0 20px 24px}
}

/* Lead-Variante: enger an die Aufzaehlung ranruecken */
.detail-body .lead.is-tight,
.lead.is-tight{margin-top:8px !important;margin-bottom:24px}
/* Alle Lead-Absaetze auf den Leistungsseiten bekommen ein konsistentes left-align */
.detail-body .lead,
.detail-body .lead.is-first,
.detail-body .lead.is-intro{text-align:left}
/* Lead-Absaetze, die NACH einer Liste kommen (z.B. "Dank aktueller Software" hinter den checks): tighter spacing */
ul.checks + .lead,
.wp-block-list.checks + .lead{margin-top:14px}

/* Leistungs-Seiten: Body-Spalte bündig mit H1-Titel (single-lead = 1080px) */
.wrap.detail-body{max-width:1080px}

/* Aufzählung: Schriftgröße wie der umliegende Lead-Text (21px statt 15.5px) */
.detail-body ul.checks li,
ul.checks li{
  font-size:21px;line-height:1.5;
}

/* Lead-Texte auf den Leistungs-Seiten im Blocksatz (Blockschrift) */
.detail-body .lead.is-first{text-align:justify}
/* Subtitel und Listen-Items bleiben links-bündig (Justify würde dort schräg aussehen) */
.detail-body .lead.is-intro{text-align:left}

/* Hero-Row (Featured Image + Noch Fragen) buendig zum H1-Titel (1080px) */
.hero-row{max-width:1080px}

/* H1 buendig zu Hero-Row und Body machen — gleiche 1080px Breite */
section.single-lead h1,
section.single-lead .wp-block-post-title{
  max-width:1080px;
  width:100%;
}

/* Services-Karten quadratisch in 2x2-Grid (statt 4-in-Reihe) */
.svc-grid{
  grid-template-columns:1fr 1fr !important;
  gap:36px !important;
  max-width:1100px;margin:0 auto;
}
.svc .svc-photo img{aspect-ratio:1/1 !important}

/* svc-link global (nicht nur innerhalb .svc) — z.B. fuer 'Arbeitsbeispiele' Hero-Link */
p.svc-link{font-size:11.5px !important;color:var(--orange) !important;
  font-size:11.5px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--orange);
  display:inline-flex;align-items:center;gap:6px;
  margin:18px 0 0;
}
p.svc-link a{color:inherit;text-decoration:none}
p.svc-link a:hover{color:var(--orange-light)}
p.svc-link::after{content:"→";transition:transform .25s var(--ease)}
p.svc-link:hover::after{transform:translateX(5px)}

/* Service-Rows (Startseite) — komplett anklickbar, Bild links/rechts alternierend */
.svc-rows{max-width:1200px;margin:0 auto;padding:0 24px}
.svc-row{position:relative;margin:24px 0 !important}
.svc-row .wp-block-column{padding:0 !important}
.svc-row h3{
  font-size:clamp(24px,2.4vw,32px) !important;
  font-weight:600;color:var(--navy);
  margin:0 0 14px !important;line-height:1.2;letter-spacing:-0.01em;
}
.svc-row h3 a{color:inherit;text-decoration:none;position:static}
.svc-row h3 a::after{
  content:"";position:absolute;inset:0;z-index:1;
}
.svc-row:hover h3 a{color:var(--orange)}
.svc-row p{
  margin:0 0 18px;color:var(--mid);
  font-size:15.5px;line-height:1.65;
}
.svc-row .svc-link{position:relative;z-index:2;margin:0;text-align:right;display:block}
.svc-row .svc-photo{margin:0;overflow:hidden}
.svc-row .svc-photo img{
  width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:contain;background:#f4f4f4;
  transition:transform .6s cubic-bezier(0.16,1,0.3,1);
}
.svc-row:hover .svc-photo img{transform:scale(1.03)}

/* Page-Head Variante: weiß statt navy (Datenschutz, evtl. Impressum) */
.page-head.is-light{background:#fff;color:var(--navy)}
.page-head.is-light::after{display:none}
.page-head.is-light h1,
.page-head.is-light .wp-block-post-title{color:var(--navy)}
.page-head.is-light .crumb{color:var(--orange);font-weight:600}
.page-head.is-light .crumb a{color:var(--mid)}
.page-head.is-light .crumb a:hover{color:var(--navy)}

/* Hochformat-Bilder in proj-rows: aspect-ratio aufheben */
.proj-row .wp-block-image.is-portrait img,
.proj-row .wp-block-image.is-portrait figure img{
  aspect-ratio:auto !important;
  width:auto !important;
  max-width:100% !important;
  max-height:560px !important;
  object-fit:contain !important;
  margin:0 auto !important;
}
.proj-row .wp-block-image.is-portrait{align-self:center !important}

/* ============== FOOTER REDESIGN (Re-06, Stand 04.06.) ============== */
.tk-footer-main{align-items:stretch !important;gap:32px !important}
.tk-footer-hero{
  position:relative;overflow:hidden;background:var(--navy-deep);
  min-height:240px;border-radius:0;
}
.tk-footer-hero .tk-footer-hero-img{
  margin:0 !important;height:100%;width:100%;position:absolute !important;inset:0;z-index:0;
}
.tk-footer-hero .tk-footer-hero-img img{
  width:100% !important;height:100% !important;object-fit:cover !important;display:block;
  filter:brightness(0.55);
}
.tk-footer-hero .tk-footer-hero-overlay{
  position:relative;z-index:1;
  padding:28px 32px;height:100%;display:flex;flex-direction:column;justify-content:space-between;
}
.tk-footer-hero .tk-footer-brand{
  font-family:'Outfit',sans-serif;
  font-size:13px;font-weight:700;letter-spacing:0.22em;
  color:var(--orange-light);margin:0 0 8px;text-transform:uppercase;
}
.tk-footer-hero .tk-footer-hero-h{
  font-size:clamp(28px,3vw,40px) !important;font-weight:800;
  color:#fff;letter-spacing:-0.02em;line-height:1.05;
  margin:0;text-transform:uppercase;
}
.tk-footer-minilinks{
  margin:32px 0 14px;gap:24px;
}
.tk-footer-minilinks p{margin:0;font-size:13px;letter-spacing:0.04em}
.tk-footer-minilinks a{color:rgba(255,255,255,.82)}
.tk-footer-minilinks a:hover{color:#fff}
@media (max-width:782px){
  .tk-footer-main{flex-wrap:wrap}
  .tk-footer-hero{min-height:200px;width:100% !important;flex-basis:100% !important}
  .tk-footer-minilinks{justify-content:flex-start !important}
}

/* Re-07 Thomas: svc-row Bild links-/oben-bündig mit Text */
.svc-row.are-vertically-aligned-center,
.svc-row .wp-block-column.is-vertically-aligned-center{
  align-items:flex-start !important;
  align-self:flex-start !important;
}
.svc-row .svc-photo img{
  aspect-ratio:auto !important;
  object-fit:cover !important;
  background:transparent !important;
}

/* Re-07 Thomas: Services-Section komplett links-bündig (Hero-X-Position) */
.services .section-head{
  text-align:left !important;
  max-width:none !important;
  margin:0 0 48px 0 !important;
  padding-left:0 !important;
}
.services .section-head h2{text-align:left !important}
.services .svc-rows{
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* ============== FOOTER-BAND (Redesign 2026-06-04) ============== */
.tk-footer-band{
  background:var(--navy);color:#fff;
  padding:80px 36px 64px;
  max-width:1320px;margin:0 auto;
}
.tk-footer-band .tk-footer-wordmark{
  font-family:'Outfit',sans-serif;
  font-size:14px;font-weight:700;letter-spacing:0.16em;
  color:#fff;text-transform:uppercase;
  margin:0 0 48px;display:flex;align-items:center;gap:10px;
}
.tk-footer-band .tk-footer-wordmark-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  background:var(--orange);color:#fff;
  font-size:14px;font-weight:900;
}
.tk-footer-band .tk-footer-grid{
  align-items:flex-start !important;gap:48px !important;
  margin-bottom:64px;
}
.tk-footer-band .tk-footer-kicker{
  font-size:11px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--orange-light);font-weight:700;
  margin:0 0 22px;line-height:1;
}
.tk-footer-band .tk-footer-hero-h{
  font-family:'Outfit',sans-serif;
  font-size:clamp(36px,5vw,72px);
  font-weight:900;line-height:0.95;letter-spacing:-0.02em;
  color:#fff;text-transform:uppercase;
  margin:0;
}
.tk-footer-band .accent-orange{color:var(--orange-light);display:inline-block}
.tk-footer-band .tk-footer-line{
  margin:0 0 10px;font-size:15px;line-height:1.6;
  color:rgba(255,255,255,0.85);
}
.tk-footer-band .tk-footer-line-spaced{margin-top:24px}
.tk-footer-band .tk-footer-line a{
  color:rgba(255,255,255,0.85);text-decoration:none;
  transition:color .15s ease;
}
.tk-footer-band .tk-footer-line a:hover{color:#fff}
.tk-footer-band .tk-footer-col-services .tk-footer-line a{
  display:inline-block;border-bottom:1px solid rgba(255,255,255,0.12);
  padding-bottom:2px;
}
.tk-footer-band .tk-footer-col-services .tk-footer-line a:hover{
  border-bottom-color:var(--orange-light);color:#fff;
}
.tk-footer-band .tk-footer-pills{
  gap:10px !important;flex-wrap:wrap;
}
.tk-footer-band .tk-footer-pills .wp-block-button__link{
  background:transparent !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,0.32) !important;
  border-radius:999px !important;
  padding:10px 22px !important;
  font-size:13px;font-weight:600;letter-spacing:0.04em;
  transition:all .18s ease;
}
.tk-footer-band .tk-footer-pills .wp-block-button__link:hover{
  background:var(--orange) !important;
  border-color:var(--orange) !important;
  color:#fff !important;
}
@media (max-width:900px){
  .tk-footer-band{padding:56px 24px 48px}
  .tk-footer-band .tk-footer-grid{flex-wrap:wrap;gap:36px !important}
  .tk-footer-band .tk-footer-grid .wp-block-column{flex-basis:100% !important}
  .tk-footer-band .tk-footer-pills{justify-content:flex-start !important}
}

/* Re-08 Bild 1+9: intro-block Lead als Blocksatz */
.intro-block .text-col p:not(.pre-h2):not(.svc-link) {
  text-align: justify;
  hyphens: auto;
}

/* Re-08 Punkt 38 / Bild 10: proj-row Inhalt linksbuendig auf Detail-Seiten */
.detail-body .proj-row,
.detail-body .proj-rows {
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
}
.detail-body .proj-row .wp-block-image,
.detail-body .proj-row .wp-block-image figure,
.detail-body .proj-row .wp-block-image img {
  margin-left: 0 !important;
  margin-right: auto;
}
.detail-body .proj-row p,
.detail-body .proj-row h2,
.detail-body .proj-row h3,
.detail-body .proj-row h4 {
  text-align: left !important;
}

/* Re-08 Punkt 38 / Bild 10: gleicher Effekt auf Single-Post Projekt-Details (.single-body Wrapper) */
.single-body .proj-row,
.single-body .proj-rows {
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
}
.single-body .proj-row .wp-block-image,
.single-body .proj-row .wp-block-image figure,
.single-body .proj-row .wp-block-image img {
  margin-left: 0 !important;
  margin-right: auto;
}
.single-body .proj-row p,
.single-body .proj-row h2,
.single-body .proj-row h3,
.single-body .proj-row h4 {
  text-align: left !important;
}

/* Re-08 Bild 1+9 (FIX2): Lead-Text Blocksatz härter erzwungen */
.intro-block p,
.intro-block .text-col p,
.intro-block .wp-block-column p {
  text-align: justify !important;
  hyphens: auto !important;
}
.intro-block .pre-h2,
.intro-block .svc-link,
.intro-block .has-text-align-right {
  text-align: revert !important;
}

/* Re-08 Punkt 38 (FIX2): echte Ursache war WP entry-content max-width 780px */
.single-body .wp-block-post-content,
.single-body .entry-content,
.single-body .wp-block-post-content.has-global-padding {
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 36px !important;
  padding-right: 36px !important;
}
.single-body .proj-row {
  max-width: none !important;
}
.single-body .proj-row .wp-block-column {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Re-08 Punkt 38 (FIX3): echte Ursache war .prose Container max-width 980px */
.single-body .wp-block-group.prose,
.single-body .prose {
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.single-body .entry-content.wp-block-post-content,
.single-body .wp-block-post-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Re-08 Footer v2 (Thomas-Feedback): Adresse als 3 Outline-Pills + Buttons scharfkantig */
.tk-footer-band .tk-footer-address-pills {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.tk-footer-band .tk-footer-pill {
  display: inline-block;
  padding: 6px 14px;
  border: 1.5px solid rgba(255,255,255,0.45);
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  font-weight: 400;
  margin: 0;
  background: transparent;
  line-height: 1.3;
  letter-spacing: 0;
}
.tk-footer-band .tk-footer-pills .wp-block-button.tk-footer-btn-square .wp-block-button__link {
  border-radius: 0 !important;
  border-width: 1.5px !important;
  padding: 10px 22px !important;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
}
.tk-footer-band .tk-footer-pills .wp-block-button.tk-footer-btn-square .wp-block-button__link:hover {
  background: var(--orange-light) !important;
  border-color: var(--orange-light) !important;
  color: var(--navy) !important;
}

/* Re-08 Footer v2 (Thomas-Feedback): einheitliche Footer-Farbe (gleicher Navy wie outer FOOTER.site) */
.tk-footer-band {
  background: rgb(0, 10, 48) !important;
}

/* Re-08 Punkt 7 (Thomas-Feedback): svc-row Bilder NICHT gestretcht, vollständig sichtbar */
.svc-row .svc-photo {
  align-self: flex-start !important;
  height: auto !important;
}
.svc-row .svc-photo img {
  height: auto !important;
  max-height: 500px !important;
  width: 100% !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
}
.svc-row .wp-block-column:first-child {
  align-self: flex-start !important;
}

/* Re-08 Punkt 7 (Fix 2): object-fit weg — Bild zeigt natürliche Größe */
.svc-row .svc-photo img {
  object-fit: initial !important;
  max-height: none !important;
}

/* Re-08 Punkt 7 (Fix 3): Spalten-Stretch komplett aus, Bild zeigt natürliche Höhe */
.svc-row,
.svc-row.wp-block-columns {
  align-items: flex-start !important;
}
.svc-row .wp-block-column {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: flex-start !important;
}
.svc-row .svc-photo,
.svc-row .wp-block-image.svc-photo,
.svc-row figure.svc-photo {
  height: auto !important;
  display: block !important;
}
.svc-row .svc-photo img {
  height: auto !important;
  width: 100% !important;
  max-height: none !important;
  object-fit: initial !important;
  display: block !important;
}

/* Re-08 Punkt 7 (Fix 5): Einheitliche svc-row Bilder — gleicher Cover-Crop fuer alle */
section.services .svc-row .svc-photo,
.svc-row .svc-photo,
.svc-row figure.svc-photo {
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  width: 100% !important;
  display: block !important;
  overflow: hidden !important;
}
section.services .svc-row .svc-photo img,
.svc-row .svc-photo img,
.svc-row figure img {
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  width: 100% !important;
  object-fit: cover !important;
  aspect-ratio: auto !important;
  display: block !important;
  background: transparent !important;
}
section.services .svc-row,
.svc-row .wp-block-column {
  align-items: flex-start !important;
  align-self: flex-start !important;
}

/* Re-08 Beitragsseite: Beiträge-Heading bündig links mit den Cards */
section.single-lead {
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 36px !important;
}
section.single-lead h1 {
  text-align: left !important;
  padding-left: 0 !important;
}

/* Re-08 Beitragsseite (Fix 2): H1 selbst linksbündig — max-width + margin-left override */
section.single-lead h1.wp-block-heading,
section.single-lead h1 {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  width: auto !important;
  padding-left: 0 !important;
}

/* Re-08 Punkt 30: Portrait-Grid für "Der Mensch - Die Beteiligten" + "Perspektivwechsel" */
.portrait-claim {
  font-size: 22px;
  color: var(--mid);
  margin: 0 0 48px;
  letter-spacing: -0.01em;
}
.portrait-claim em {
  font-style: italic;
  color: var(--navy);
}
.portrait-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 14px;
  margin-top: 24px;
}
.portrait-grid .portrait-tile {
  margin: 0 !important;
}
.portrait-grid .portrait-tile img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block;
  background: var(--light);
  transition: transform .4s cubic-bezier(0.16,1,0.3,1), box-shadow .4s cubic-bezier(0.16,1,0.3,1);
}
.portrait-grid .portrait-tile:hover img {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
@media (max-width: 900px) {
  .portrait-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 600px) {
  .portrait-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Re-08 Punkt 30 (Fix): portrait-grid linksbündig + auf volle Breite ziehen */
.single-body .portrait-grid {
  margin-left: calc(-1 * ((100vw - 100%) / 2)) !important;
  width: calc(100vw - 72px) !important;
  max-width: 1320px !important;
}
/* Einfacher: .prose wrapper Container weiter machen für portrait-grid posts */
.single-body .prose:has(.portrait-grid) {
  max-width: 1320px !important;
}
.single-body .prose:has(.portrait-grid) .entry-content,
.single-body .prose:has(.portrait-grid) .wp-block-post-content {
  max-width: 1320px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Re-08 Punkt 30 (Fix v2): Spacer unsichtbar + Grid linksbündig zu h1 */
.hidden-spacer,
.hidden-spacer * {
  display: none !important;
  visibility: hidden !important;
}
.single-body .portrait-grid {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* Re-08 Punkt 30 (Fix v3): portrait-grid auf h1-x-Position (76px = 40 section + 36 padding) */
.single-body .portrait-grid {
  margin-left: 36px !important;
  margin-right: 36px !important;
  width: calc(100% - 72px) !important;
}

/* Re-08 Punkt 30: Portrait-Grid Posts (1802 + 1806) — Hero + Noch-Fragen-Box ausblenden, Lead linksbündig */
body.postid-1802 .hero-row {
  display: none !important;
}
body.postid-1802 .entry-content > p,
body.postid-1802 .wp-block-post-content > p {
  margin-left: 36px !important;
  margin-right: 36px !important;
  max-width: calc(100% - 72px) !important;
}

/* Re-08 Punkt 30: hero-steal-spacer absolut ausblenden */
.hero-steal-spacer, .hero-steal-spacer * {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ============================================================
   Re-08 follow-up (2026-06-04): Intro-Block Hero-Lead Fullwidth
   Problem: post-24 hat zwar zweite Spalte (intro-images), aber
   leer (keine figures). Resultat: Text bei 55% (726px), rechts
   594px Leere. Fix: text-col auf volle Breite, leere
   intro-images-Spalte ausblenden, gap weg.
   ============================================================ */
.intro-block > .text-col {
  flex-basis: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}
.intro-block > .wp-block-column:not(.text-col) {
  display: none !important;
}
.intro-block {
  gap: 0 !important;
}
/* H2 (Wir krempeln...) und Lead-Paragraph sollen die volle
   Container-Breite einnehmen — keine internen max-width caps */
.intro-block .text-col h2,
.intro-block .text-col > p {
  max-width: 100% !important;
  width: 100% !important;
}
/* intro-bottom-row (Arbeitsbeispiele links / ...und packen an. rechts)
   bleibt strukturell unangetastet, spannt sich aber jetzt über die
   volle Breite. Sicherheitshalber max-width entsperren. */
.intro-block .intro-bottom-row {
  max-width: 100% !important;
  width: 100% !important;
}

/* === Re-08 Punkt 16 — Header-Items Bottom-Baseline === */
/* Ziel: Logo, Wordmark, Nav-Items und info@-Button schliessen bei y=72 ab (Header 90px, padding 18px vertikal). */

.tk-header-inner{
  align-items: flex-end !important;
  padding-bottom: 18px !important;
}

/* Brand-Spalte: Logo (54px) + Wordmark gemeinsam auf der Unterkante */
.tk-brand{
  align-items: flex-end !important;
  gap: 14px !important;
}
.tk-brand .tk-logo img{
  display: block;
  height: 54px;
  width: auto;
}
.tk-brand-name{
  line-height: 1 !important;
  margin: 0 !important;
  padding-bottom: 4px !important;
}
.tk-brand-sub{
  line-height: 1 !important;
  margin: 0 !important;
  padding-bottom: 4px !important;
}

/* Nav-Items: Unterkante auf y=72 ziehen */
.tk-nav .wp-block-navigation-item__content{
  padding: 4px 2px 4px !important;
}

/* info@-Button: sichtbar + an Unterkante ausgerichtet */
.tk-header-inner .wp-block-buttons{
  display: flex !important;
  align-items: flex-end !important;
  flex: 0 0 auto;
}
.tk-header-inner .btn-text .wp-block-button__link{
  display: inline-block !important;
  padding: 4px 0 !important;
  line-height: 1 !important;
  font-size: 14px;
  color: var(--navy) !important;
  white-space: nowrap;
}

/* === Re-08 Punkt 16 — Mobile-Header Reparatur (390px) === */
/* Der Button-Wrapper schrumpfte mit flex-shrink auf 12px und schob sich off-screen rechts neben den Viewport,
   wraps in zig Zeilen und streckte den Header auf 614px. Auf Mobile blenden wir den Button-Wrapper aus
   (Hamburger-Menue enthaelt /kontakt) und stellen die Header-Geometrie wieder her. */
@media (max-width: 880px){
  .tk-header-inner{
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 18px !important;
    padding-bottom: 12px !important;
    flex-wrap: nowrap;
  }
  .tk-header-inner > .wp-block-buttons{
    display: none !important;
  }
  .tk-header-inner .tk-brand{
    align-items: center !important;
    flex: 1 1 auto;
    min-width: 0;
    gap: 10px !important;
  }
  .tk-header-inner .tk-logo img{
    height: 42px;
  }
  .tk-brand-name{
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 0 !important;
  }
  .tk-brand-sub{
    display: none;
  }
  .tk-header-inner > nav.tk-nav{
    flex: 0 0 auto;
  }
  .wp-site-blocks > main{
    padding-top: 66px;
  }
}

/* Re-08 Punkt 38 + Spacing — GENERISCH fuer alle Projekt-Posts */
body.single-post:not(.postid-1802) section.single-lead,
body.single-post:not(.postid-1802) section.single-body {
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 36px !important;
  padding-right: 36px !important;
}
body.single-post:not(.postid-1802) section.single-lead {
  margin-bottom: 0 !important;
}
body.single-post:not(.postid-1802) section.single-body {
  padding-top: 24px !important;
}
body.single-post:not(.postid-1802) .single-body .wp-block-post-content,
body.single-post:not(.postid-1802) .single-body .entry-content,
body.single-post:not(.postid-1802) .single-body .wp-block-group.prose,
body.single-post:not(.postid-1802) .single-body .prose {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
}
body.single-post:not(.postid-1802) .single-body .entry-content > p,
body.single-post:not(.postid-1802) .single-body .wp-block-post-content > p {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  text-align: left !important;
}
body.single-post:not(.postid-1802) .single-body .proj-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  margin-top: 14px !important;
  margin-bottom: 0 !important;
}
body.single-post:not(.postid-1802) .single-body .proj-row + .proj-row {
  margin-top: 14px !important;
}
body.single-post:not(.postid-1802) .single-body .proj-row h3,
body.single-post:not(.postid-1802) .single-body .proj-row .wp-block-heading,
body.single-post:not(.postid-1802) .single-body .proj-row p {
  text-align: left !important;
}

/* Re-08 Punkt 16 nachzug — info@-Button Pixel-Perfect */
.tk-header-inner .btn-text .wp-block-button__link { padding-top: 6px !important; padding-bottom: 2px !important; line-height: 1 !important; }

/* Re-08 Punkt 16 — info@ Button vertical-align fix */
.tk-header-inner .btn-text { line-height: 1 !important; }
.tk-header-inner .btn-text .wp-block-button__link {
  vertical-align: bottom !important;
  line-height: 1 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-block !important;
}

/* Re-08 Punkt 27 — Zeitstrahl horizontal */
.tk-timeline-horizontal { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 24px 0 48px; position: relative; }
.tk-timeline-horizontal::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--orange, #d97706); transform: translateY(-50%); z-index: 0; }
.tk-timeline-horizontal .tk-timeline-track { display: flex; gap: 48px; padding: 0 36px; min-width: max-content; position: relative; z-index: 1; }
.tk-timeline-horizontal .tk-timeline-step { flex: 0 0 280px; scroll-snap-align: center; background: #fff; box-shadow: 0 4px 20px rgba(0,10,48,0.08); padding: 32px 24px; }
.tk-timeline-horizontal .tk-timeline-step h4 { font-family: "Outfit", sans-serif; font-weight: 900; font-size: 36px; letter-spacing: -0.03em; color: var(--navy, rgb(0, 10, 48)); margin: 0 0 12px; }
.tk-timeline-horizontal .tk-timeline-step p { font-size: 15px; color: var(--mid, #555); margin: 0; line-height: 1.6; }

/* Re-08 Punkt 35 nachzug — Footer Hero-Spalte mit Bg-Bild */
.tk-footer-band .tk-footer-col-hero {
  position: relative;
  background-image: linear-gradient(rgba(0, 10, 48, 0.55), rgba(0, 10, 48, 0.75)), url("https://thomas-krause.178.105.79.156.nip.io/wp-content/uploads/2026/06/schiffssektion-transport-kran-nacht-hafen-wasser-planen-abgedeckt-scaled-projekt.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 48px 36px !important;
  border-radius: 0;
  flex-basis: 42%;
}
.tk-footer-band .tk-footer-col-hero .tk-footer-kicker {
  color: var(--orange, #d97706) !important;
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 13px;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.tk-footer-band .tk-footer-col-hero .tk-footer-hero-h {
  font-family: "Outfit", sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 5vw, 72px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: #ffffff;
  margin: 0;
  text-transform: uppercase;
}
.tk-footer-band .tk-footer-col-hero .tk-footer-hero-h .accent-orange {
  color: var(--orange, #d97706) !important;
}
@media (max-width: 880px) {
  .tk-footer-band .tk-footer-col-hero { padding: 32px 22px !important; flex-basis: 100%; }
  .tk-footer-band .tk-footer-col-hero .tk-footer-hero-h { font-size: 40px; }
}

/* ============================================================
   Re-08 Punkt 38 nachzug — Hero-Image auf Projekt-Posts linksbuendig
   Datum: 2026-06-04
   Problem: .hero-row liegt auf max-width:1080px (Lines 427+861),
   waehrend .single-lead durch Re-08-Generic (Line 1517-1525) auf
   max-width:1320px + padding 36px hochgezogen wurde.
   -> H1 startet bei x=96, hero-row bei x=180, Hero-Bild bei x=232.
   Fix: .hero-row exakt auf dieselben Aussenmasse wie single-lead
   ziehen, dann das Bild im figure.single-hero linksbuendig statt
   zentriert ausrichten, damit Bild-Kante = H1-Kante (x=96).
   ============================================================ */
body.single-post:not(.postid-1802) .hero-row {
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 36px !important;
  padding-right: 36px !important;
  grid-template-columns: minmax(0,1fr) 260px !important;
  gap: 36px !important;
}

/* figure.single-hero NICHT zentrieren, Bild linksbuendig setzen,
   damit linke Kante mit H1 fluchtet (beide bei x=96) */
body.single-post:not(.postid-1802) .hero-row > .single-hero {
  justify-content: flex-start !important;
}
body.single-post:not(.postid-1802) .hero-row > .single-hero img {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Re-08 Punkt 35 nachzug 2 — EUROPAWEIT darf nicht umbrechen */
.tk-footer-band .tk-footer-col-hero .tk-footer-hero-h {
  font-size: clamp(36px, 3.6vw, 56px) !important;
  white-space: nowrap !important;
  line-height: 1.05 !important;
}
@media (max-width: 1100px) {
  .tk-footer-band .tk-footer-col-hero .tk-footer-hero-h {
    font-size: clamp(28px, 3.2vw, 44px) !important;
  }
}

/* Re-08 Punkt 35 nachzug 3 — TRANSPORTTECHNIKER kicker größer */
.tk-footer-band .tk-footer-col-hero .tk-footer-kicker {
  font-size: clamp(22px, 2vw, 32px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  line-height: 1 !important;
  margin: 0 0 24px !important;
  color: var(--orange-light, #d97706) !important;
}
@media (max-width: 880px) {
  .tk-footer-band .tk-footer-col-hero .tk-footer-kicker {
    font-size: clamp(16px, 4vw, 22px) !important;
  }
}

/* Re-08 Punkt 35 nachzug 4 — Footer-Hero-Bild entfernen */
.tk-footer-band .tk-footer-col-hero {
  background-image: none !important;
  background: transparent !important;
}

/* Re-08 Punkt 16 nachzug 2 — ALLE Header-Items strikt auf Logo-Bottom-Baseline */
/* Konsolidierung der drei Override-Bloecke (Zeilen 1464/1566/1570) zu EINEM Regelblock.
   Logo (height:54px, padding-bottom:18px im Inner) bestimmt die Bottom-Baseline.
   Alle anderen Items werden via flex-end + line-height:1 + Padding-Reset auf
   dieselbe Linie gepinnt. Messung bestaetigt delta=0px auf 1440 und 1920. */

.tk-header-inner {
    align-items: flex-end !important;
    padding-bottom: 18px !important;
}

.tk-header-inner .tk-brand {
    align-items: flex-end !important;
}

.tk-header-inner .tk-brand .tk-logo img {
    display: block !important;
    height: 54px !important;
    width: auto !important;
}

.tk-header-inner .tk-brand .tk-brand-name {
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 0 4px 0 !important;
}

.tk-header-inner .tk-brand .tk-brand-sub {
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 0 4px 0 !important;
}

.tk-header-inner .tk-nav {
    align-self: flex-end !important;
}

.tk-header-inner .tk-nav .wp-block-navigation-item__content {
    padding: 4px 2px !important;
    line-height: 1 !important;
}

.tk-header-inner .wp-block-buttons {
    align-self: flex-end !important;
    display: flex !important;
    align-items: flex-end !important;
    flex: 0 0 auto !important;
}

.tk-header-inner .wp-block-buttons .btn-text {
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: flex-end !important;
}

/* Final-Winner Konsolidierung: Ersetzt die drei kollidierenden Bloecke
   aus Zeilen 1464, 1566 und 1570. vertical-align:bottom + line-height:1
   + padding:0 pinnt den Button-Link exakt auf logo_bottom=72px. */
.tk-header-inner .btn-text .wp-block-button__link,
.tk-header-inner .wp-block-buttons .btn-text .wp-block-button__link {
    display: inline-block !important;
    vertical-align: bottom !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 14px !important;
    color: var(--navy) !important;
    white-space: nowrap !important;
}

/* Re-08 Punkt 16 nachzug 3 — info@ Text-Baseline auf Nav-Text-Baseline (4px hoeher) */
.tk-header-inner .btn-text .wp-block-button__link,
.tk-header-inner .wp-block-buttons .btn-text .wp-block-button__link {
  padding-bottom: 4px !important;
}

/* Hauptseite Hero — Bild nach unten anchor damit Fuesse sichtbar */
.tk-hero-bg img {
  object-position: 50% 70% !important;
}

/* Re-08 Punkt 24 — Chinazug letzte 3 Fotos Hochformat */
body.postid-20 .proj-row:nth-last-of-type(-n+3) .wp-block-column:has(.wp-block-image) img {
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  display: block !important;
}
body.postid-20 .proj-row:nth-last-of-type(-n+3) .wp-block-column:has(.wp-block-image) {
  align-items: center !important;
  display: flex !important;
  justify-content: flex-start !important;
}

/* ============================================================
   Re-10 A.1 -- Hero-Lead Spacing enger zusammen
   (2026-06-06): Thomas-Feedback: "nicht so grosse Abstaende
   zwischen H1 und Lead-Text! Und auch kleineren Abstand
   zwischen Lead-Text und ...und packen an."
   Arbeitsbeispiele etwas tiefer.
   ============================================================ */
/* H1 -> Lead-Text: weniger Luft */
.intro-block h2,
.intro-block .text-col h2 {
  margin-bottom: 16px !important;
}
.intro-block .text-col p,
.intro-block .text-col p:not(.pre-h2):not(.svc-link) {
  margin: 0 0 10px !important;
  line-height: 1.6 !important;
}
.intro-block .text-col p:first-of-type {
  margin-top: 0 !important;
}
/* Lead-Text -> ARBEITSBEISPIELE / ...und packen an.: weniger Luft, aber ARBEITSBEISPIELE etwas tiefer */
.intro-block .intro-bottom-row {
  margin-top: 28px !important;
}
/* pre-h2 Kicker (TRANSPORTTECHNIKER · Seit 2003) -> H1: enger */
.intro-block .pre-h2 {
  margin-bottom: 16px !important;
}

/* Re-10 Punkt 12 -- 1806 Portrait-Grid wie 1802 */
body.postid-1806 .hero-row { display: none !important; }

/* ============================================================
   Re-10 A.2 -- Bilder nicht links/rechts abschneiden
   (2026-06-06): Thomas-Feedback. NICHT global object-fit:contain
   (waere Design-Bruch). Nur die Selektoren aus a2pre.selectors_to_fix,
   konservativ: Services-Section + Beitraege-Cards.
   Karussell + proj-row bewusst NICHT angefasst.
   ============================================================ */

/* Services-Section: ganze Bild sichtbar, kein Crop */
.svc-row .svc-photo img,
section.services .svc-row .svc-photo img {
  object-fit: contain !important;
  object-position: center center !important;
  background: #f7f7f5 !important;
}

/* Beitraege-Cards: object-fit contain, leichter Hintergrund */
.ref-card .wp-block-image img,
.ref-card img.wp-image-1741,
.ref-grid .ref-card img {
  object-fit: contain !important;
  background: #f7f7f5 !important;
}

/* ============================================================
   Re-10 A.3 -- Hero-Image auf Projektseiten groesser
   Datum: 2026-06-06
   Problem: .single-hero img max-height:480px (Line 423) cappt
   Hoehe so frueh, dass 4:3-Querformat-Bilder nur 640-679px breit
   werden statt der verfuegbaren 952px Spalte. Resultat: Bild
   wirkt klein, rechts neben dem Bild 273-312px Leerraum.
   Fix: max-height auf Projekt-Posts auf 640px erhoehen, damit
   Bild bis ~904px Breite skaliert und ca. 71% der Viewport-Hoehe
   einnimmt. Aspect-Ratio bleibt korrekt durch object-fit:contain.
   ============================================================ */
body.single-post:not(.postid-1802):not(.postid-1806) .hero-row > .single-hero img {
  max-height: 640px !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
}

/* Optional: hero-aside vertikal mittig auf groessere Hero-Hoehe
   ausrichten -- verhindert dass die Box oben "klebt" */
body.single-post:not(.postid-1802):not(.postid-1806) .hero-row {
  align-items: center !important;
}

/* Falls noch prominenter gewuenscht: max-height entfernen und
   stattdessen das figure-flex zentrieren auf gesamte 952px;
   aber 640px max ist sicherer fuer Hochformat-Bilder. */

/* Re-10 A.4 -- Footer-Pills als reiner Text (kein Border, kein Padding) */
.tk-footer-band .tk-footer-pill,
.tk-footer-pill {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  display: block !important;
  margin: 0 0 6px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.85) !important;
  border-radius: 0 !important;
}
.tk-footer-band .tk-footer-address-pills {
  margin-top: 12px !important;
}

/* Re-10 Punkt 2 (refined) -- ARBEITSBEISPIELE tiefer + Abstaende kleiner */
/* Lead-Text noch enger zur H2 */
.intro-block h2,
.intro-block .text-col h2 {
  margin-bottom: 12px !important;
  line-height: 1.15 !important;
}
/* Lead-Paragraphen kompakter, weniger Spacing zwischen Absaetzen */
.intro-block .text-col p:not(.pre-h2):not(.svc-link) {
  margin: 0 0 8px !important;
  line-height: 1.55 !important;
}
/* "...und packen an." enger an Lead-Text drueber */
.intro-block .intro-bottom-row {
  margin-top: 16px !important;
}
/* ARBEITSBEISPIELE-Link tiefer im Block (mehr Luft vor dem Link) */
.intro-block .intro-bottom-row .arbeitsbeispiele,
.intro-block .intro-bottom-row a.svc-link,
.intro-block .intro-bottom-row .wp-block-button {
  margin-top: 40px !important;
}

/* Karussell Flatten-Fix -- track flex + figures konstante Hoehe */
.tk-carousel,
.tk-carousel-wrap {
  overflow: hidden !important;
}
.tk-carousel-track {
  display: flex !important;
  gap: 24px !important;
  align-items: center !important;
  width: max-content !important;
  height: clamp(280px, 28vw, 380px) !important;
}
.tk-carousel-track > .wp-block-image {
  flex: 0 0 auto !important;
  margin: 0 !important;
  height: 100% !important;
  display: block !important;
}
.tk-carousel-track > .wp-block-image img {
  height: 100% !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
  object-fit: cover !important;
}

/* ============================================================
   Re-10 2026-06-06 — @-Zeichen Baseline-Fix im Header
   Thomas: "Bei der Info @ zeichnen ist ein bisschen unter die
   Buchstaben. Mach das richtig."
   Outfit-Font setzt @ optisch tiefer als die Versalien.
   Wrapper-Span im Template (Post 36), hier sanftes Anheben.
   ============================================================ */
.tk-header-inner .wp-block-button__link .tk-at,
.tk-header-inner .btn-text .tk-at,
.tk-header-inner .wp-block-button__link span.tk-at {
  display: inline-block !important;
  transform: translateY(-0.09em) !important;
  line-height: 1 !important;
  vertical-align: baseline !important;
}

/* ============================================================
   Re-10 Punkt 2 NACHZUG (2026-06-07) — Hero-Lead noch enger,
   ARBEITSBEISPIELE deutlich tiefer.
   Audit (gestern abend):
     h2 → lead         = 12px (Thomas: enger → 8px)
     lead → packen an  = 16px (Thomas: enger → 10px)
     packen → arbeitsbeispiele = 18px (Thomas: TIEFER → 64px)
   ============================================================ */
.intro-block h2,
.intro-block .text-col h2 {
  margin-bottom: 8px !important;
}
.intro-block .text-col p,
.intro-block .text-col p:not(.pre-h2):not(.svc-link) {
  margin: 0 0 8px !important;
  line-height: 1.55 !important;
}
.intro-block .text-col p:first-of-type {
  margin-top: 0 !important;
}
/* …und packen an näher an Lead-Text */
.intro-block .intro-bottom-row {
  margin-top: 14px !important;
}
/* ARBEITSBEISPIELE deutlich tiefer als CTA */
p.svc-link {
  margin-top: 56px !important;
}

/* ============================================================
   Re-10 Punkt 3 NACHZUG (2026-06-07) — Bilder vollständig zeigen
   25 Bilder auf Hauptseite werden ~18% beschnitten:
   Source 489x366 (4:3), Container forced auf 489x300 / 538x330 (16:10).
   Fix: Container aspect-ratio auf 4:3 (Source-Format) damit cover
   nichts mehr abschneidet. Plus object-fit:contain als Fallback
   für svc-photos (war schon, wird hier konsolidiert).
   Karussell NICHT angefasst (Band-Effekt soll bleiben).
   ============================================================ */

/* Container der Service-Bildgrids: aspect-ratio 4:3 statt 16:10 */
.svc-photos .wp-block-image,
.svc-row .svc-photo,
.svc-row .svc-photo .wp-block-image {
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
}
.svc-photos .wp-block-image img,
.svc-row .svc-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* Beiträge-Card-Bilder: 4:3 */
.ref-grid .ref-card .wp-block-image,
.ref-card .wp-block-image {
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
}
.ref-grid .ref-card .wp-block-image img,
.ref-card .wp-block-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* ============================================================
   Re-10 Punkt 2 + 3 NACHZUG 2 (2026-06-07)
   - Punkt 2: text-align:right erzwingen (wp-block-library schluckt es)
   - Punkt 3: Karussell-Bilder Aspect-Ratio respektieren (Gallery
     "is-cropped" CSS schnitt 18% ab); object-position:center.
   ============================================================ */

/* Punkt 2: ...und packen an. wirklich rechts */
.intro-block .intro-bottom-row h2,
.intro-block .intro-bottom-row h2.wp-block-heading,
.intro-block .intro-bottom-row .has-text-align-right {
  text-align: right !important;
}

/* Punkt 3: Karussell-Bilder kein Crop trotz Band-Effekt */
.tk-carousel .wp-block-gallery.is-cropped .wp-block-image,
.tk-carousel .wp-block-gallery .wp-block-image,
.tk-carousel-track > .wp-block-image {
  aspect-ratio: auto !important;
  height: 100% !important;
  width: auto !important;
  overflow: visible !important;
}
.tk-carousel .wp-block-gallery.is-cropped .wp-block-image img,
.tk-carousel .wp-block-gallery .wp-block-image img,
.tk-carousel-track > .wp-block-image img {
  height: 100% !important;
  width: auto !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* ============================================================
   Re-10 Punkt 7 v3 NACHZUG (2026-06-07) — Hero-Bild groß + Aside
   rechts daneben, ABER Aside wie Thomas-Vorlage: kein Background,
   keine Border, große Navy-Headline, orange Telefonnummer.
   Grid: 1fr image + 260px aside + 40px gap.
   1802/1806 (Portrait-Grids) bleiben ausgespart.
   ============================================================ */
body.single-post:not(.postid-1802):not(.postid-1806) .hero-row {
  display: grid !important;
  grid-template-columns: 1fr 260px !important;
  gap: 40px !important;
  align-items: start !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 36px !important;
}
body.single-post:not(.postid-1802):not(.postid-1806) .hero-row > .single-hero {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
body.single-post:not(.postid-1802):not(.postid-1806) .hero-row > .single-hero img {
  width: 100% !important;
  height: auto !important;
  max-height: 680px !important;
  object-fit: cover !important;
  object-position: center 40% !important;
  display: block !important;
  margin: 0 !important;
}
/* Aside: clean, kein Card-Look, große Headline, orange Telefon */
body.single-post:not(.postid-1802):not(.postid-1806) .hero-row > .hero-aside {
  max-width: 260px !important;
  margin: 0 !important;
  padding: 12px 0 0 0 !important;
  background: transparent !important;
  border: none !important;
}
body.single-post:not(.postid-1802):not(.postid-1806) .hero-row > .hero-aside h3 {
  font-family: 'Outfit', sans-serif !important;
  font-size: clamp(28px, 2.4vw, 36px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--navy, #001659) !important;
  margin: 0 0 16px !important;
  line-height: 1.1 !important;
}
body.single-post:not(.postid-1802):not(.postid-1806) .hero-row > .hero-aside p {
  font-size: 15px !important;
  line-height: 1.55 !important;
  margin: 0 0 6px !important;
  color: var(--ink, #212121) !important;
}
body.single-post:not(.postid-1802):not(.postid-1806) .hero-row > .hero-aside p a {
  color: var(--navy, #001659) !important;
  text-decoration: none !important;
}
body.single-post:not(.postid-1802):not(.postid-1806) .hero-row > .hero-aside p a:hover {
  color: var(--orange, #C8860D) !important;
}
/* Telefonnummer-Zeile orange (letzter Absatz oder tel:-Link) */
body.single-post:not(.postid-1802):not(.postid-1806) .hero-row > .hero-aside p:last-of-type {
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--orange, #C8860D) !important;
  margin-top: 12px !important;
}
body.single-post:not(.postid-1802):not(.postid-1806) .hero-row > .hero-aside p a[href^="tel:"] {
  color: var(--orange, #C8860D) !important;
}

/* ============================================================
   Re-10 Punkt 2 v3 (2026-06-07) — Text-Col fest auf 55% linksbündig
   Vorher: text-col streckte sich auf 100% weil zweite Spalte fehlte
   und intro-block keine constraint hatte. Jetzt: text-col 55%
   anchored left, rechts 45% bleibt frei (Atemraum).
   Plus: Lead-Paragraph zurück auf text-align:left (statt justify),
   wirkt natürlicher und weniger schwer.
   ============================================================ */
.intro-block {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}
.intro-block .text-col {
  flex-basis: 55% !important;
  max-width: 760px !important;
  margin-right: auto !important;
}
.intro-block .text-col p {
  text-align: left !important;
}
.intro-block .text-col .pre-h2 {
  text-align: left !important;
}

/* ============================================================
   Karussell-Slides UNIFORM SIZE (2026-06-07)
   Thomas: "alle Bilder müssen im gleichen großen ungefähr ...
   weil zu groß ist dann verläuft es und schmiert es überall."
   Fix: Fixed slide-Breite, aspect-ratio 4/3, object-fit cover.
   Überschreibt Punkt 3 NACHZUG der width:auto setzte.
   ============================================================ */
.tk-carousel-track > .wp-block-image,
.tk-carousel .wp-block-gallery .wp-block-image {
  flex: 0 0 480px !important;
  width: 480px !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  margin: 0 !important;
}
.tk-carousel-track > .wp-block-image img,
.tk-carousel .wp-block-gallery .wp-block-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}
/* Aktiver mittlerer Slide etwas größer */
.tk-carousel-track > .wp-block-image.tk-active {
  transform: none;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
  z-index: 2;
}

/* ============================================================
   Re-10 Punkt 13 (2026-06-07) — Worldmap-Section: weniger Leerraum
   Thomas: "etwas zusammenschieben, dass nicht so viel Leerplatz ist"
   Pre-h1 + Claim entfernt → H2 sitzt zu hoch im leeren Raum.
   Padding section runter, gap H2 → stats kürzer.
   ============================================================ */
section.worldmap {
  padding: 40px 24px 32px !important;
}
section.worldmap > .wrap {
  padding: 0 !important;
}
section.worldmap > .wrap h2,
section.worldmap > .wrap .wp-block-heading {
  margin: 0 0 28px !important;
  text-align: center !important;
  font-size: clamp(28px, 3.2vw, 44px) !important;
  line-height: 1.15 !important;
}
section.worldmap .worldmap-stats {
  margin-top: 24px !important;
}

/* ============================================================
   Footer Feinschliff (2026-06-07) — Thomas-Telegram 15:23
   - TRANSPORTTECHNIKER selbe Schriftart wie EUROPAWEIT (Outfit 900)
   - TRANSPORTTECHNIKER selbe Schriftgröße wie EUROPAWEIT
   - TRANSPORTTECHNIKER selbe orange Farbe wie IM EINSATZ (var(--orange))
   - Top-Left Bündigkeit: alle left:0, no offset
   - Weiße Unterlinien unter Service-Items entfernen
   ============================================================ */

/* TRANSPORTTECHNIKER (Kicker im Footer-Hero) — visuell wie EUROPAWEIT */
.tk-footer-band .tk-footer-col-hero .tk-footer-kicker {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(28px, 2.6vw, 40px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
  color: var(--orange, #C8860D) !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

/* Hero-Spalte: alles bündig oben-links */
.tk-footer-band .tk-footer-col-hero {
  padding-top: 0 !important;
  padding-left: 0 !important;
  align-items: flex-start !important;
  text-align: left !important;
}
.tk-footer-band .tk-footer-col-hero > * {
  text-align: left !important;
  margin-left: 0 !important;
}
.tk-footer-band .tk-footer-col-hero .tk-footer-hero-h {
  margin: 0 !important;
}

/* Weiße Linien unter Service-Items entfernen */
.tk-footer-band .tk-footer-col-services .tk-footer-line a {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  display: inline !important;
}
.tk-footer-band .tk-footer-col-services .tk-footer-line a:hover {
  border-bottom: none !important;
  color: var(--orange, #C8860D) !important;
}

/* ============================================================
   Re-10 Punkt 15 v2 (2026-06-07) — Services-Section als
   "Goldene Vertikale" / Wasserfall (Thomas-Telegram 15:55)
   - Kein Gap zwischen Bild und Text (edge-to-edge)
   - Kein vertikaler Gap zwischen Rows
   - Bilder füllen Spalte komplett (object-fit cover)
   - Text-Spalte bekommt inneres Padding für Atem
   ============================================================ */

/* Container: keine vertikalen Gaps zwischen Rows */
section.services .svc-rows,
section.services > .wrap .svc-rows {
  gap: 0 !important;
  margin: 0 !important;
}
section.services .svc-row + .svc-row {
  margin-top: 0 !important;
}

/* Row: Spalten dicht aneinander (kein Spalten-Gap) */
section.services .svc-row {
  gap: 0 !important;
  margin: 0 !important;
  align-items: stretch !important;
}

/* Spalten: 50/50, kein Padding */
section.services .svc-row > .wp-block-column {
  padding: 0 !important;
  margin: 0 !important;
  flex-basis: 50% !important;
  max-width: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* Bild-Spalte: Bild füllt 100% (edge-to-edge zur Mittelachse)
   2026-06-09: height:100% und aspect-ratio:auto entfernt — wird
   jetzt vom Fix 2026-06-09 (v2) Block am Dateiende kontrolliert. */
section.services .svc-row .svc-photo,
section.services .svc-row figure.wp-block-image {
  margin: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  display: block !important;
  overflow: hidden !important;
}
section.services .svc-row .svc-photo img,
section.services .svc-row figure.wp-block-image img {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
}

/* Text-Spalte: inneres Padding für Atem (statt äußerem Gap) */
section.services .svc-row .wp-block-column:not(:has(figure.wp-block-image)):not(:has(.svc-photo)) {
  padding: 48px 56px !important;
}

/* Section: kein äußeres Padding, full-width Container */
section.services {
  padding: 0 !important;
}
section.services > .wrap {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Section-Head ("Von der Idee zur Umsetzung") bleibt zentriert mit Padding */
section.services .section-head {
  padding: 56px 36px 32px !important;
  margin: 0 !important;
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   Re-10 Punkt 15 v2.1 — Spalten exakt 50/50 erzwingen
   ============================================================ */
section.services .svc-row > .wp-block-column,
section.services .svc-row > .wp-block-column[style*="flex-basis"] {
  flex: 0 0 50% !important;
  flex-basis: 50% !important;
  width: 50% !important;
  max-width: 50% !important;
  min-width: 0 !important;
}

/* Re-10 Punkt 15 v2.2 — box-sizing border-box damit Padding NICHT zur Breite addiert wird */
section.services .svc-row > .wp-block-column,
section.services .svc-row > .wp-block-column[style*="flex-basis"] {
  box-sizing: border-box !important;
}
section.services .svc-row > .wp-block-column * {
  box-sizing: border-box !important;
}

/* ============================================================
   Footer v2 (2026-06-07 Abend) — TT exakt gleich wie EUROPAWEIT
   Thomas-Telegram nochmal: selbe Schrift, selbe Größe, selbe Orange.
   Hero-Col von 42% auf 50% damit TT reinpasst, andere Spalten 25%/25%.
   Tighter letter-spacing damit TT visuell ähnliche Breite wie EUROPAWEIT.
   ============================================================ */

/* Spalten umverteilen — Hero breiter */
.tk-footer-band .tk-footer-col-hero,
.tk-footer-band .tk-footer-col-hero[style*="flex-basis"] {
  flex-basis: 50% !important;
  max-width: 50% !important;
}
.tk-footer-band .tk-footer-col-contact,
.tk-footer-band .tk-footer-col-contact[style*="flex-basis"],
.tk-footer-band .tk-footer-col-services,
.tk-footer-band .tk-footer-col-services[style*="flex-basis"] {
  flex-basis: 25% !important;
  max-width: 25% !important;
}

/* TT auf EXAKT EUROPAWEIT-Größe + sehr enge Buchstaben */
.tk-footer-band .tk-footer-col-hero .tk-footer-kicker {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(34px, 3.4vw, 50px) !important;
  letter-spacing: -0.045em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  color: var(--orange, #C8860D) !important;
  margin: 0 0 2px 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}
/* EUROPAWEIT auch leicht runter damit beide harmonisch in Spalte sitzen */
.tk-footer-band .tk-footer-col-hero .tk-footer-hero-h {
  font-size: clamp(34px, 3.4vw, 50px) !important;
  letter-spacing: -0.045em !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* Top-left Bündigkeit erzwingen */
.tk-footer-band .tk-footer-col-hero {
  padding: 0 !important;
  align-items: flex-start !important;
  text-align: left !important;
}
.tk-footer-band .tk-footer-col-hero > * {
  margin-left: 0 !important;
  text-align: left !important;
}

/* ============================================================
   Services-Section Proportionen (2026-06-08 morgens)
   Thomas-Feedback: "Bilder zu groß, links/rechts fehlt Rand,
   Proportionen waren ideal" — Rand zum Bildschirmrand zurück,
   Bilder kleiner, Mittelachse als Berührungspunkt.
   ============================================================ */

/* Section: side padding zurück damit Rand zum Bildschirmrand sichtbar */
section.services,
section.services.wp-block-group {
  padding: 56px 36px !important;
}

/* svc-rows Container constrainen */
section.services > .wrap,
section.services .svc-rows,
section.services > .wrap > .svc-rows {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
}

/* Jede Row: zentriert, max 1100px, gap 0 (Mittelachse) */
section.services .svc-row,
section.services .proj-row.svc-row {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important; /* v1.5.2: dichter zusammen (User-Feedback) */
  gap: 0 !important;
}

/* Spalten 50/50 */
section.services .svc-row > .wp-block-column {
  flex-basis: 50% !important;
  max-width: 50% !important;
  margin: 0 !important;
}

/* Text-Spalte: padding für Atem */
section.services .svc-row > .wp-block-column:not(:has(.svc-photo, .wp-block-image)) {
  padding: 32px 40px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* Bild-Spalte: kein padding, Bild füllt komplett */
section.services .svc-row > .wp-block-column:has(.svc-photo),
section.services .svc-row > .wp-block-column:has(.wp-block-image) {
  padding: 0 !important;
}

/* Bilder: einheitlich 4:3, cover, kein Crop oder so */
section.services .svc-row .svc-photo,
section.services .svc-row .wp-block-image {
  width: 100% !important;
  margin: 0 !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
}
section.services .svc-row .svc-photo img,
section.services .svc-row .wp-block-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Letzter Row keine bottom-margin */
section.services .svc-row:last-child {
  margin-bottom: 0 !important;
}

/* ============================================================
   H2-Bündigkeit: "Von der Idee" auf gleichen x wie "Wir krempeln"
   (2026-06-08 — Koren-Wunsch)
   ============================================================ */
section.services > .section-head,
section.services .section-head,
section.services .wp-block-group.section-head {
  max-width: none !important;
  margin-left: 60px !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
}
section.services .section-head h2,
section.services .section-head .wp-block-heading {
  text-align: left !important;
  margin: 0 0 32px 0 !important;
}

/* ============================================================
   H2-Bündigkeit v2 (2026-06-08): section-head bei x=60,
   svc-rows weiter zentriert bei x=170.
   ============================================================ */
section.services {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
section.services > .wrap {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
section.services .section-head,
section.services > .wrap > .section-head,
section.services .wp-block-group.section-head {
  max-width: none !important;
  margin: 0 0 32px 0 !important;
  padding: 0 0 0 60px !important;
  text-align: left !important;
}
section.services .section-head h2,
section.services .section-head .wp-block-heading {
  text-align: left !important;
  margin: 0 !important;
}

/* ============================================================
   H2-Bündigkeit v3 — alle Layout-Padding-Schichten resetten,
   dann section-head explizit auf x=60.
   ============================================================ */
section.services .wrap,
section.services .wp-block-group.wrap,
section.services .wrap.is-layout-constrained {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
section.services .wrap > *:not(.svc-rows) {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Section-Head ganz explizit auf x=60 */
section.services .section-head,
section.services .wrap > .section-head,
section.services .wp-block-group.section-head.has-global-padding {
  padding-left: 60px !important;
  max-width: none !important;
  margin: 0 0 32px 0 !important;
  text-align: left !important;
}

/* ============================================================
   H2-Bündigkeit v4 — negative margin um 36px Global-Padding
   zu kompensieren. Brutal aber funktioniert.
   ============================================================ */
section.services .section-head,
section.services .wrap > .section-head,
section.services .wp-block-group.section-head {
  margin-left: -36px !important;
  padding-left: 24px !important;
  padding-right: 0 !important;
  max-width: none !important;
  text-align: left !important;
}
section.services .section-head h2,
section.services .section-head .wp-block-heading {
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   H2-Bündigkeit v5 — Global-Padding-CSS-Variable killen
   ============================================================ */
section.services .has-global-padding {
  --wp--style--root--padding-left: 0px !important;
  --wp--style--root--padding-right: 0px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
section.services .section-head,
section.services .wp-block-group.section-head {
  padding-left: 60px !important;
  padding-right: 0 !important;
  margin: 0 0 32px 0 !important;
  max-width: none !important;
  text-align: left !important;
}
section.services .section-head h2 {
  text-align: left !important;
  margin: 0 !important;
}

/* ============================================================
   H2-Bündigkeit v6 — direkt auf h2 mit Negativ-Margin schießen
   ============================================================ */
section.services .section-head h2.wp-block-heading,
section.services > .wrap > .section-head > h2,
section.services .wp-block-heading {
  margin-left: -36px !important;
  text-align: left !important;
}
section.services .svc-rows h2,
section.services .svc-row h2,
section.services .proj-row h2 {
  margin-left: 0 !important;
}

/* ============================================================
   FINAL LAYOUT (2026-06-08): Alle Inhalte bündig links bei x=170,
   Block 1100px zentriert, gleicher Rand zum Bildschirmrand.
   Intro-Block + Services-Section identisch ausgerichtet.
   ============================================================ */

/* INTRO-BLOCK: max-width 1100px zentriert */
.intro-block {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.intro-block .text-col {
  flex-basis: 55% !important;
  max-width: 760px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding-left: 0 !important;
}

/* SERVICES-SECTION: alles bündig im 1100er Container */
section.services {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
section.services > .wrap,
section.services .wp-block-group.wrap {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  --wp--style--root--padding-left: 0px !important;
  --wp--style--root--padding-right: 0px !important;
}
/* Section-head innerhalb wrap, kein Extra-Padding */
section.services .section-head,
section.services .wp-block-group.section-head {
  max-width: none !important;
  width: 100% !important;
  margin: 0 0 40px 0 !important;
  padding: 0 !important;
  --wp--style--root--padding-left: 0px !important;
  --wp--style--root--padding-right: 0px !important;
}
section.services .section-head h2,
section.services .section-head h2.wp-block-heading,
section.services .section-head .wp-block-heading {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
/* svc-rows + svc-row full width of wrap */
section.services .svc-rows {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
section.services .svc-row,
section.services .proj-row.svc-row {
  max-width: none !important;
  width: 100% !important;
  margin: 0 0 8px 0 !important; /* v1.5.2: dichter zusammen (User-Feedback) */
  gap: 0 !important;
}
section.services .svc-row:last-child {
  margin-bottom: 0 !important;
}
section.services .svc-row > .wp-block-column {
  flex-basis: 50% !important;
  max-width: 50% !important;
  margin: 0 !important;
}

/* H2-Shift Reset (kill alte v6 negativ-margins) */
section.services h2.wp-block-heading,
section.services .wp-block-heading {
  margin-left: 0 !important;
}

/* ============================================================
   Final-Final: section-head H2 explizit auf x=170 ziehen
   (60px Negativ-Kompensation für WP constrained layout)
   ============================================================ */
section.services .section-head > h2,
section.services .section-head > h2.wp-block-heading,
section.services .wp-block-group.section-head > h2,
section.services .wp-block-group.section-head > .wp-block-heading {
  margin-left: 0 !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  max-width: none !important;
  text-align: center !important;
  position: relative !important;
  left: 0 !important;
}

/* ============================================================
   Fix 1: "...und packen an." auf einer Zeile bleiben
   Fix 2: Worldmap H2 mittig zentrieren
   ============================================================ */
.intro-block .intro-bottom-row h2,
.intro-block .intro-bottom-row .wp-block-heading {
  white-space: nowrap !important;
  font-size: clamp(20px, 2vw, 32px) !important;
}

/* Worldmap H2: zentriert UND Wrapper auch */
section.worldmap > .wrap {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
}
section.worldmap > .wrap > h2,
section.worldmap > .wrap > .wp-block-heading {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
}
section.worldmap #tk-map {
  margin: 0 auto !important;
  max-width: 100% !important;
}

/* ============================================================
   Footer-Harmonie (Thomas 11:52): alle kleine weiße Schrift
   gleiche Größe + gleiche Line-Height + gleicher Zeilenabstand.
   Adress-Block (Thomas Krause/Grunowstr/13187) war 14px → 15px.
   ============================================================ */
.tk-footer-band .tk-footer-line,
.tk-footer-band .tk-footer-pill,
.tk-footer-band p,
.tk-footer-band .tk-footer-col-contact p,
.tk-footer-band .tk-footer-col-services p,
.tk-footer-band .tk-footer-col-services a {
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin: 0 0 20px 0 !important;
}
.tk-footer-band .tk-footer-line:last-of-type,
.tk-footer-band .tk-footer-pill:last-of-type,
.tk-footer-band p:last-of-type {
  margin-bottom: 0 !important;
}
/* Address-Block: keine Sondergröße, kein Sondermargin */
.tk-footer-band .tk-footer-address-pills {
  margin: 14px 0 0 0 !important;
  padding: 0 !important;
}
.tk-footer-band .tk-footer-address-pills .tk-footer-pill {
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin: 0 0 20px 0 !important;
}

/* ============================================================
   Footer-Spalten mit Flex+gap für exakt gleiche Zeilenabstände
   (kein Margin-Collapse, keine Wrapper-Padding-Drifts)
   ============================================================ */
.tk-footer-band .tk-footer-col-contact,
.tk-footer-band .tk-footer-col-services {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.tk-footer-band .tk-footer-col-contact .tk-footer-address-pills {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.tk-footer-band .tk-footer-line,
.tk-footer-band .tk-footer-pill,
.tk-footer-band .tk-footer-col-contact p,
.tk-footer-band .tk-footer-col-services p,
.tk-footer-band .tk-footer-col-services a {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}
/* Kicker oben (KONTAKT, SERVICELEISTUNGEN) bleiben ihre Größe */
.tk-footer-band .tk-footer-col-contact .tk-footer-kicker,
.tk-footer-band .tk-footer-col-services .tk-footer-kicker {
  font-size: 11px !important;
  margin: 0 0 8px 0 !important;
}

/* Service-Link padding-bottom rest killen (war für Underlines, jetzt aus) */
.tk-footer-band .tk-footer-col-services .tk-footer-line a {
  display: inline !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

/* ============================================================
   Intro-Block ZENTRIERT (Thomas 2026-06-08 Abend)
   text-col jetzt mittig statt links anchored. Max 760px wie vorher,
   aber margin-auto links und rechts.
   Services-Block bleibt unverändert.
   ============================================================ */
.intro-block {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}
.intro-block .text-col {
  flex-basis: 760px !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
}

/* ============================================================
   Projekt-Text-Spalten als orange-gerahmte Blöcke
   (Thomas 23:01): Text neben Bild bekommt Orange-Rahmen
   nur auf einzelnen Projekt-Posts, NICHT auf Services-Section.
   ============================================================ */
body.single-post .proj-row:not(.svc-row) > .wp-block-column:not(:has(.wp-block-image)):not(:empty) {
  border: 2px solid var(--orange, #C8860D) !important;
  padding: 22px 26px !important;
  background: transparent !important;
  box-sizing: border-box !important;
}
/* Falls Bild-Spalte versehentlich getroffen wird, reset */
body.single-post .proj-row:not(.svc-row) > .wp-block-column:has(.wp-block-image) {
  border: none !important;
  padding: 0 !important;
}
/* Innenabstand falls Lead-Paragraph drinsteckt */
body.single-post .proj-row:not(.svc-row) > .wp-block-column:not(:has(.wp-block-image)) p {
  margin: 0 0 12px 0 !important;
}
body.single-post .proj-row:not(.svc-row) > .wp-block-column:not(:has(.wp-block-image)) p:last-child {
  margin-bottom: 0 !important;
}

/* ============================================================
   Blocksatz für Projekt-Text-Spalten (Thomas-Wunsch)
   Alle Texte in proj-row Text-Spalten werden Blocksatz
   (text-align: justify). Plus .blocksatz-Klasse für freie
   Anwendung in beliebigen Blöcken via "Zusätzliche CSS-Klasse".
   ============================================================ */
body.single-post .proj-row:not(.svc-row) > .wp-block-column:not(:has(.wp-block-image)) p {
  text-align: justify !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
}
.blocksatz,
p.blocksatz {
  text-align: justify !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
}

/* Block-Stil "Blocksatz" rendert ihn auch im Editor sichtbar */
.is-style-blocksatz {
  text-align: justify !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
}

/* ============================================================
   Orange-Border RAUS aus Projekt-Text-Spalten (Thomas-Korrektur)
   Nur Blocksatz, keine Umrandung.
   ============================================================ */
body.single-post .proj-row:not(.svc-row) > .wp-block-column:not(:has(.wp-block-image)):not(:empty) {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ============================================================
   Thomas darf Schriftgröße per WP-Sidebar überschreiben
   - Wenn er S/M/L/XL/XXL wählt → Klasse `has-XXX-font-size`
   - Wenn er Custom-Pixel wählt → inline style
   Meine Default-Regeln dürfen nicht mehr !important blocken.
   ============================================================ */

/* ...und packen an. — default size, aber überschreibbar */
.intro-block .intro-bottom-row h2:not([class*="has-"]):not([style*="font-size"]),
.intro-block .intro-bottom-row .wp-block-heading:not([class*="has-"]):not([style*="font-size"]) {
  font-size: clamp(20px, 2vw, 32px) !important;
}
/* Wenn User Has-XXX-font-size gewählt hat, soll das gewinnen */
.intro-block .intro-bottom-row h2.has-small-font-size,
.intro-block .intro-bottom-row h2.has-medium-font-size,
.intro-block .intro-bottom-row h2.has-large-font-size,
.intro-block .intro-bottom-row h2.has-x-large-font-size,
.intro-block .intro-bottom-row h2.has-xx-large-font-size {
  font-size: var(--wp--preset--font-size--small, 14px) !important;
}
.intro-block .intro-bottom-row h2.has-medium-font-size {
  font-size: var(--wp--preset--font-size--medium, 18px) !important;
}
.intro-block .intro-bottom-row h2.has-large-font-size {
  font-size: var(--wp--preset--font-size--large, 28px) !important;
}
.intro-block .intro-bottom-row h2.has-x-large-font-size {
  font-size: var(--wp--preset--font-size--x-large, 40px) !important;
}
.intro-block .intro-bottom-row h2.has-xx-large-font-size {
  font-size: var(--wp--preset--font-size--xx-large, 56px) !important;
}
/* Inline-Style font-size (custom px) gewinnt sowieso wegen inline-spezifität */

/* ============================================================
   GLOBAL: User-Font-Size-Auswahl gewinnt überall
   (am Ende von style.css → überschreibt alle theme-defaults)
   - S/M/L/XL/XXL Klassen → WP-Preset-Variablen
   - Custom-Pixel (inline style) → gewinnt automatisch
   ============================================================ */
.has-small-font-size {
  font-size: var(--wp--preset--font-size--small, 14px) !important;
}
.has-medium-font-size {
  font-size: var(--wp--preset--font-size--medium, 18px) !important;
}
.has-large-font-size {
  font-size: var(--wp--preset--font-size--large, 28px) !important;
}
.has-x-large-font-size {
  font-size: var(--wp--preset--font-size--x-large, 40px) !important;
}
.has-xx-large-font-size {
  font-size: var(--wp--preset--font-size--xx-large, 56px) !important;
}
/* Custom font-size via inline style braucht keine Regel — Browser-Default
   priorisiert inline > stylesheet, aber wir setzen es nochmal für Sicherheit */
[style*="font-size"] {
  /* inline-style schon vorhanden, nichts zu tun */
}

/* ============================================================
   Thomas darf Abstände (Padding/Margin) per Sidebar überschreiben
   Inline-Style aus Block-Editor "Maße" gewinnt jetzt überall.
   ============================================================ */
/* Wenn ein Block inline padding hat, soll meine !important-Regel weichen */
.wp-block-group[style*="padding"][style] {
  padding: revert !important;
}
.wp-block-group[style*="margin"][style] {
  margin: revert !important;
}
/* Aber wir wollen die spezifischen inline-Werte respektieren — die werden
   automatisch durch inline-style angewendet (höhere Spezifität als
   theme-Regeln auch ohne !important am inline) */

/* ============================================================
   Karussell überall full-width (auch in Projekten + Service-Seiten)
   Egal in welchem Container — calc(50% - 50vw) zieht Element auf
   volle Viewport-Breite.
   ============================================================ */
.tk-carousel,
.tk-carousel-wrap,
.wp-block-group.tk-carousel {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow: hidden !important;
}

/* ============================================================
   ARBEITSBEISPIELE: Pfeil → entfernen
   Nur für den Hauptseite Arbeitsbeispiele-Link, nicht für andere
   svc-link Pfeile (Weiterlesen behält Pfeil).
   ============================================================ */
.intro-block .svc-link::after,
.intro-block .intro-bottom-row .svc-link::after,
p.svc-link a[href="/projekte/"] + ::after,
.intro-bottom-row p.svc-link::after {
  content: none !important;
  display: none !important;
}
/* Globaler: jeder svc-link der ARBEITSBEISPIELE enthält */
.intro-block p.svc-link::after,
.intro-bottom-row p.svc-link::after,
.intro-block p.svc-link:hover::after,
.intro-bottom-row p.svc-link:hover::after {
  display: none !important;
  content: '' !important;
}

/* ============================================================
   Fix 1: Hero-Aside ("Noch Fragen?") vertikal mittig zum Bild
            + bisschen tiefer
   Fix 2: Hauptseite Beiträge-Cards engerer Abstand
   ============================================================ */

/* Fix 1: Hero-Row Alignment auf center, Aside leicht runter */
body.single-post:not(.postid-1802):not(.postid-1806) .hero-row {
  align-items: flex-start !important;
}
body.single-post:not(.postid-1802):not(.postid-1806) .hero-row > .hero-aside {
  margin-top: clamp(80px, 16vw, 200px) !important;
}

/* Fix 2: Beiträge-Cards Abstand reduzieren auf Hauptseite */
.ref-grid {
  gap: 18px !important;
}
.ref-grid .ref-card {
  margin: 0 !important;
}

/* Konsistente Abstände überall: Beiträge auf /beitraege/ + Hauptseite */
.wp-block-group .ref-grid,
section .ref-grid {
  gap: 18px !important;
}

/* ============================================================
   TRANSPORTTECHNIKER tick nach oben damit cap-height bündig
   mit KONTAKT-Label visualisiert.
   ============================================================ */
.tk-footer-band .tk-footer-col-hero .tk-footer-kicker {
  margin-top: 0 !important;
}

/* re10a5 — Footer-Buttons (Projekte/Das sind wir/Beiträge) bündig mit Kontakt-Spalte */
@media (min-width: 901px) {
  .tk-footer-band .tk-footer-pills.is-content-justification-right,
  .tk-footer-band .tk-footer-pills {
    justify-content: flex-start !important;
    padding-left: 50% !important;
  }
}

/* ============================================================
   Fix 2026-06-09 (v3 — svc-tighter): svc-row enger ohne Crop.
   Vorher: min-height: 420px zwang Rows zu 420px Hoehe → leeres
   Drittel unter kurzem Text. Jetzt: Rows shrinken auf Content-
   Hoehe. Bilder behalten natuerliche aspect-ratio (object-fit:
   contain bleibt — keine abgeschnittenen CAD-Tabellen). Row-to-
   Row Margin bleibt 32px ueber den frueheren Block (Zeile 2273).
   Image-Gaps koennen leicht variieren — Gesamteindruck kompakt
   statt halb-leer.
   ============================================================ */
section.services .svc-row.wp-block-columns,
section.services .svc-row {
  align-items: stretch !important;
  min-height: 0 !important;
}
section.services .svc-row > .wp-block-column,
section.services .svc-row > .wp-block-column.is-vertically-aligned-center {
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
}
/* Spalten, die das Foto enthalten, oben anliegen — sonst entstehen
   ungleichmaessige Gaps wenn Text-Spalte hoeher waechst als Bild. */
section.services .svc-row > .wp-block-column:has(.svc-photo),
section.services .svc-row > .wp-block-column:has(figure.wp-block-image) {
  justify-content: flex-start !important;
}
section.services .svc-row > .wp-block-column:first-child {
  justify-content: flex-start !important;
}
section.services .svc-row .svc-photo {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}
section.services .svc-row .svc-photo img,
section.services .svc-row .svc-photo img[src],
section.services .svc-row figure.wp-block-image img,
body section.services .svc-row .svc-photo img {
  height: 100% !important;
  width: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}

/* Re-09 Punkt: svc-row Bild-zu-Bild Abstand gleichmaessig — Solution B */
/* Problem: Bild sass am Top der Spalte; bei langem Text-Schwester wuchs Row → grosser Gap unten zur naechsten Row. */
/* Fix: Bild + Spalte strecken sich auf Row-Hoehe; object-fit:contain absorbiert Aspect-Differenz INNERHALB der Row (Letterbox), nicht zwischen Rows. */
section.services .svc-row,
.svc-row,
.svc-row.wp-block-columns {
  align-items: stretch !important;
}
section.services .svc-row .wp-block-column,
.svc-row .wp-block-column {
  align-self: stretch !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
}
section.services .svc-row .svc-photo,
.svc-row .svc-photo,
.svc-row .wp-block-image.svc-photo,
.svc-row figure.svc-photo {
  align-self: stretch !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  display: flex !important;
  margin: 0 !important;
}
section.services .svc-row .svc-photo img,
.svc-row .svc-photo img,
.svc-row figure img {
  height: 100% !important;
  width: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  aspect-ratio: auto !important;
  display: block !important;
  background: #f7f7f5 !important;
}


/* Re-09 Punkt: svc-row Bild-Rhythmus (1.5.4) — visuelle Bildkanten in gleichem Abstand
   Problem: object-fit:contain + variable Row-Hoehen → Letterbox unterschiedlich gross
   Loesung C: Bild auf natuerlicher Hoehe (max 400px), in Spalte zentriert; Row-Hoehe align center.
   Visuelle Bild-Mitten gleich-distanziert; kein Letterbox-Versatz mehr.
   Specificity-Bump: html body … schlaegt die fruehere body section.services Regel. */
html body section.services .svc-row,
html body section.services .svc-row.wp-block-columns {
  align-items: center !important;
  min-height: 0 !important;
}
html body section.services .svc-row > .wp-block-column,
html body section.services .svc-row > .wp-block-column.is-vertically-aligned-center {
  align-self: center !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
  height: auto !important;
}
html body section.services .svc-row .svc-photo,
html body section.services .svc-row figure.svc-photo,
html body section.services .svc-row .wp-block-image.svc-photo {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  background: transparent !important;
}
html body section.services .svc-row .svc-photo img,
html body section.services .svc-row figure.wp-block-image img,
html body section.services .svc-row figure img {
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 400px !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  aspect-ratio: auto !important;
  display: block !important;
  background: transparent !important;
  margin: 0 auto !important;
}

/* Re-09 Punkt (Fix 2 1.5.4): zusaetzlich Row-Hoehe fixieren — sonst variiert sie mit Text-Laenge */
html body section.services .svc-row,
html body section.services .svc-row.wp-block-columns {
  min-height: 420px !important;
  height: 420px !important;
  max-height: 420px !important;
}
html body section.services .svc-row > .wp-block-column {
  height: 420px !important;
  max-height: 420px !important;
  overflow: hidden !important;
  justify-content: flex-start !important;
}
/* Text-Spalte: kein Overflow-Cut, scrollt nicht — Text passt in 420px wenn Padding klein */
html body section.services .svc-row > .wp-block-column:not(:has(.svc-photo)):not(:has(figure)) {
  overflow: visible !important;
}

/* Re-09 Fix 3 (1.5.4): alle Bilder identische sichtbare Hoehe (380px) — eliminiert Letterbox-Versatz
   object-fit:contain bleibt; bei Aspect-Mismatch ist Letterbox dann gleich gross in allen Rows. */
html body section.services .svc-row .svc-photo,
html body section.services .svc-row figure.svc-photo,
html body section.services .svc-row .wp-block-image.svc-photo {
  height: 380px !important;
  max-height: 380px !important;
  min-height: 380px !important;
}
html body section.services .svc-row .svc-photo img,
html body section.services .svc-row figure.wp-block-image img,
html body section.services .svc-row figure img {
  height: 380px !important;
  max-height: 380px !important;
  min-height: 380px !important;
  width: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
}

/* ============================================================
   1.5.5 — svc-row FLUSH & TIGHT (2026-06-09)
   Ziel: Bilder buendig in der Row (kein 20px innen oben/unten),
   Row-zu-Row Gap ~16px statt 48px visuell.
   Strategie: Row-Hoehe = Image-Hoehe = 380px, align-items:stretch
   damit der .svc-photo Container die volle Row-Hoehe fuellt.
   Bild bleibt durch object-fit:contain vollstaendig sichtbar.
   ============================================================ */
html body section.services .svc-row,
html body section.services .svc-row.wp-block-columns {
  height: 380px !important;
  min-height: 380px !important;
  max-height: 380px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 14px !important;
  margin-bottom: 0 !important;
  align-items: stretch !important;
}
html body section.services .svc-row:first-of-type {
  margin-top: 0 !important;
}
html body section.services .svc-row > .wp-block-column {
  height: 380px !important;
  min-height: 380px !important;
  max-height: 380px !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
}
html body section.services .svc-row .svc-photo,
html body section.services .svc-row figure.svc-photo,
html body section.services .svc-row .wp-block-image.svc-photo {
  height: 380px !important;
  min-height: 380px !important;
  max-height: 380px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 1 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
html body section.services .svc-row .svc-photo img,
html body section.services .svc-row figure.wp-block-image img,
html body section.services .svc-row figure img {
  height: 380px !important;
  max-height: 380px !important;
  min-height: 380px !important;
  width: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  aspect-ratio: auto !important;
  display: block !important;
  margin: 0 !important;
}
/* Text-Spalte: vertikal zentriert in 380px, overflow hidden cuttet zu langen Text */
html body section.services .svc-row > .wp-block-column:not(:has(.svc-photo)):not(:has(figure)) {
  overflow: hidden !important;
  justify-content: flex-start !important;
}

/* 1.5.5 Fix: Text-Spalten Padding reduzieren — sonst overflow bei langen Beschreibungen
   48px → 24px vertikal gibt 48px Platz zurueck. */
html body section.services .svc-row > .wp-block-column:not(:has(.svc-photo)):not(:has(figure)),
html body section.services .svc-row > .wp-block-column:not(:has(img)) {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

/* 1.5.5 Fix v2: Specificity-Bump — die Regel um Zeile 2310 hat (0,5,2),
   meine erste hatte nur (0,4,4). Klasse hinzufuegen damit (0,5,4) > (0,5,2). */
html body section.services .svc-row.wp-block-columns > .wp-block-column:not(:has(.svc-photo)):not(:has(figure.wp-block-image)) {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  padding-left: 73px !important;
  padding-right: 73px !important;
}

/* 1.5.5 Fix v3: Havariekommissariat-Row hat p has-medium-font-size (16px / lh 26.4).
   Andere Rows nutzen 15.5px / 25.6 — normalisieren auf 15.5px damit alle Texte in 380px passen. */
html body section.services .svc-row p.has-medium-font-size,
html body section.services .svc-row .wp-block-column p.has-medium-font-size {
  font-size: 15.5px !important;
  line-height: 25.575px !important;
}

/* 1.5.5 Fix v4: Margins zwischen H3 und P leicht reduzieren — beseitigt Restueberlauf in Havariekommissariat. */
html body section.services .svc-row .wp-block-column h3,
html body section.services .svc-row .wp-block-column h3.wp-block-heading {
  margin-bottom: 8px !important;
}
html body section.services .svc-row .wp-block-column p,
html body section.services .svc-row .wp-block-column p.wp-block-paragraph {
  margin-bottom: 12px !important;
}
html body section.services .svc-row .wp-block-column p.svc-link {
  margin-bottom: 0 !important;
}

/* 1.5.5 Fix v5: H3 line-height leicht reduzieren — 3-zeilige H3 in Havariekommissariat
   braucht noch 3px weniger; lh 38.4 → 36 schluckt 6px ueber 3 Zeilen. */
html body section.services .svc-row .wp-block-column h3,
html body section.services .svc-row .wp-block-column h3.wp-block-heading {
  line-height: 36px !important;
}

/* ============================================================
   2026-06-09 — svc-row Bilder Richtung Mitte verschieben
   Layout bleibt alternierend (Bild-Text / Text-Bild), aber die
   Bilder rücken in ihrer Spalte näher zur Spaltentrenn-Linie
   (= horizontale Seitenmitte). Bild wird auf 85% Spaltenbreite
   verkleinert, dann horizontal innerhalb der Spalte ausgerichtet:
   - svc-row:nth-child(odd) (Row 0, 2): Bild-Spalte links → Bild rechtsbündig
   - svc-row:nth-child(even) (Row 1, 3): Bild-Spalte rechts → Bild linksbündig
   Resultat: innere Kanten aller Bilder treffen sich an der Mitte.
   ============================================================ */
html body section.services .svc-row .svc-photo,
html body section.services .svc-row figure.wp-block-image.svc-photo {
  width: 85% !important;
  max-width: 85% !important;
}
html body section.services .svc-row .svc-photo img,
html body section.services .svc-row figure.wp-block-image.svc-photo img {
  width: 100% !important;
}

/* Rows mit Bild-Spalte LINKS (order 1) — Bild nach rechts schieben */
html body section.services .svc-row:nth-of-type(odd) .svc-photo,
html body section.services .svc-row:nth-of-type(odd) figure.wp-block-image.svc-photo {
  margin-left: auto !important;
  margin-right: 7px !important;
}

/* Rows mit Bild-Spalte RECHTS (order 2) — Bild nach links schieben */
html body section.services .svc-row:nth-of-type(even) .svc-photo,
html body section.services .svc-row:nth-of-type(even) figure.wp-block-image.svc-photo {
  margin-left: 7px !important;
  margin-right: auto !important;
}

/* ============================================================
   Fix 2026-06-09 (footer-3fixes) — Buttons ohne Kaestchen.
   Projekte/Das sind wir/Beitraege: keine Border, kein Background,
   kein Hintergrund-Hover (orange Fill). Reine Text-Links.
   Mehr horizontaler Spacing zwischen Links via padding-right.
   ============================================================ */
html body .tk-footer-band .tk-footer-pills .wp-block-button__link,
html body .tk-footer-band .tk-footer-pills .wp-block-button.tk-footer-btn-square .wp-block-button__link,
html body .tk-footer-band .tk-footer-pills a,
html body .tk-footer-band .tk-footer-pills .btn {
  border: none !important;
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 16px !important;
  padding-top: 3.5px !important;
  padding-bottom: 4px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body .tk-footer-band .tk-footer-pills .wp-block-button__link:hover,
html body .tk-footer-band .tk-footer-pills .wp-block-button.tk-footer-btn-square .wp-block-button__link:hover,
html body .tk-footer-band .tk-footer-pills a:hover {
  border: none !important;
  background: transparent !important;
  color: var(--orange-light, #fbbf24) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}

/* ============================================================
   2026-06-09 — TT-K glyph-top alignment (visual cap fluchten)
   Pixel-scan: TT first-orange y=38 vs K first-orange y=32
   → TT glyph sits 6px tiefer als KONTAKT (font-internal leading
   bei Outfit 900 @ 49px line-height). Box-tops sind identisch
   bei y=500.5, aber die VISUELLEN cap-tops driften 6px.
   Fix: TT um 6px hoch ziehen via margin-top:-6px.
   ============================================================ */
html body footer .tk-footer-band .tk-footer-col-hero .tk-footer-kicker {
  margin-top: -6px !important;
}

/* ============================================================
   2026-06-09 (1.5.10) — CAD-Row Fix: einheitliche svc-row Bilder
   Problem: object-fit:contain + variierende Bild-Aspect-Ratios
   verursachten unterschiedlich grosse Letterbox-Stripes
   (sichtbarer bei CAD-Row, Bild 468x330 vs 1024x768 anderer).
   Loesung: object-fit:cover an LETZTER Stelle erzwingen — gleiche
   visuelle Bild-Hoehe und gleiche Gaps fuer alle 4 Rows.
   ============================================================ */
html body section.services .svc-row .svc-photo img,
html body section.services .svc-row figure.wp-block-image img,
html body section.services .svc-row figure.wp-block-image.svc-photo img,
html body section.services .svc-row figure img {
  height: 380px !important;
  max-height: 380px !important;
  min-height: 380px !important;
  width: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  aspect-ratio: auto !important;
  background: transparent !important;
  margin: 0 !important;
  display: block !important;
}

/* ============================================================
   KARUSSELL-PFEILE — Re-Sichtbarkeit (2026-06-10)
   Wrap ist 100vw + ueberbreit (negative margin) => right:0 landet
   off-screen. Pfeile auf viewport-Kante einrueckend positionieren.
   Auto-Marquee laeuft weiter, Click scrollt manuell um Card-Breite.
   ============================================================ */
.tk-carousel-wrap .tk-carousel-btn {
  position: absolute !important;
  top: 50% !important;
  z-index: 10 !important;
  width: 52px !important;
  height: 52px !important;
  border: none !important;
  cursor: pointer !important;
  background: rgba(0, 10, 48, 0.78) !important;
  color: #fff !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-family: Outfit, sans-serif !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border-radius: 50% !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
  transition: background .2s var(--ease), transform .2s var(--ease) !important;
  transform: translateY(-50%) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.tk-carousel-wrap .tk-carousel-btn.prev {
  left: max(24px, calc((100% - 100vw) / 2 + 24px)) !important;
  right: auto !important;
}
.tk-carousel-wrap .tk-carousel-btn.next {
  right: max(24px, calc(100% - 100vw + 24px)) !important;
  left: auto !important;
}
.tk-carousel-wrap .tk-carousel-btn:hover {
  background: var(--orange) !important;
  transform: translateY(-50%) scale(1.08) !important;
}
.tk-carousel-wrap .tk-carousel-btn:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 3px !important;
}
@media (max-width: 768px) {
  .tk-carousel-wrap .tk-carousel-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 24px !important;
  }
  .tk-carousel-wrap .tk-carousel-btn.prev { left: 12px !important; }
  .tk-carousel-wrap .tk-carousel-btn.next { right: 12px !important; }
}

/* ============================================================
   Re-10 (2026-06-11) — svc-row Text top-bündig mit Bild
   WP fügt is-vertically-aligned-center → align-self:center
   Bei kurzem Text rutscht der Text mittig in der 380px-Zeile.
   Fix: Alle Spalten flex-start, H3 ohne margin-top,
   Text-Spalte padding-top:0.
   ============================================================ */
html body section.services .svc-row.wp-block-columns > .wp-block-column,
html body section.services .svc-row.wp-block-columns > .wp-block-column.is-vertically-aligned-center,
html body section.services .svc-row > .wp-block-column,
html body section.services .svc-row > .wp-block-column.is-vertically-aligned-center {
  align-self: flex-start !important;
  padding-top: 0 !important;
}
html body section.services .svc-row .wp-block-column > h3:first-child,
html body section.services .svc-row .wp-block-column > h3.wp-block-heading:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Re-10 Fix-v2: padding-top:24px aus Zeile 3308/3315 ueberschreiben
   gleiche Specificity (0,6,3), aber Position spaeter → gewinnt */
html body section.services .svc-row.wp-block-columns > .wp-block-column:not(:has(.svc-photo)):not(:has(figure.wp-block-image)):not(:has(img)) {
  padding-top: 0 !important;
}
html body section.services .svc-row > .wp-block-column:not(:has(.svc-photo)):not(:has(figure)):not(:has(img)) {
  padding-top: 0 !important;
}

/* Re-10 — Section-Head H2 "Von der Idee zur Umsetzung" mittig */
html body .section-head h2.wp-block-heading,
html body .wp-block-group.section-head > h2,
html body .wp-block-group.section-head h2 {
  text-align: center !important;
}

/* Re-10 Fix-v2 — Section-Head H2 wirklich mittig (override section.services rules) */
html body section.services .section-head,
html body section.services > .section-head,
html body section.services .wp-block-group.section-head {
  text-align: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html body section.services .section-head h2,
html body section.services .section-head h2.wp-block-heading,
html body section.services .section-head .wp-block-heading {
  text-align: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   Re-10 (2026-06-11) Footer-Fix:
   - "UND EUROPA" leicht nach unten, naeher zur "Trennlinie"
   - Projekte/Das sind wir/Beitraege hoch ziehen → auf Berlin-Linie
   ============================================================ */
html body footer .tk-footer-band .tk-footer-col-hero .tk-footer-hero-h .accent-orange {
  display: inline-block !important;
  margin-top: 18px !important;
}
html body footer .tk-footer-band > .tk-footer-pills,
html body footer .tk-footer-band .wp-block-buttons.tk-footer-pills {
  margin-top: -89.5px !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Re-10 Footer-Fix v2: Projekte/Das sind wir/Beitraege NACH RECHTS (mockup zeigt sie unter SERVICELEISTUNGEN-col) */
html body footer .tk-footer-band > .tk-footer-pills,
html body footer .tk-footer-band .wp-block-buttons.tk-footer-pills,
html body footer .tk-footer-band .wp-block-buttons.tk-footer-pills.is-content-justification-right {
  justify-content: flex-end !important;
}

/* Re-10 Footer v3: Projekte LINKS-buendig mit SERVICELEISTUNGEN-col (x=1086);
   EUROPA 4px tiefer (Buchstaben-Baseline mit Berlin-Baseline) */
html body footer .tk-footer-band > .tk-footer-pills,
html body footer .tk-footer-band .wp-block-buttons.tk-footer-pills,
html body footer .tk-footer-band .wp-block-buttons.tk-footer-pills.is-content-justification-right {
  justify-content: flex-start !important;
  padding-left: 960px !important;
  padding-right: 0 !important;
}
html body footer .tk-footer-band .tk-footer-col-hero .tk-footer-hero-h .accent-orange {
  margin-top: 8px !important;
}

/* Re-10 (2026-06-11): kleinerer Abstand zwischen Blatt-Satz und Welt-Karte */
html body section.dark-cta {
  padding-top: 36px !important;
  padding-bottom: 24px !important;
}
html body section.worldmap {
  padding-top: 24px !important;
}

/* Re-10 (2026-06-11) — Header-Dropdown Sicherheitsabstände
   Vorher: Items kleben am Rand (padding 4px 2px), Container 0px horizontal.
   Jetzt: 12px vertikal Container, 10px/24px Items, min-width für Lesbarkeit. */
html body header .wp-block-navigation__submenu-container,
html body .wp-block-navigation__submenu-container {
  padding: 12px 0 !important;
  min-width: 320px !important;
  box-shadow: 0 8px 32px rgba(0, 10, 48, 0.12) !important;
  border: 0 !important;
  border-radius: 4px !important;
}
html body .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 10px 24px !important;
  display: block !important;
}
html body .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
html body .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background-color: rgba(0, 10, 48, 0.04) !important;
}

/* ============================================================
   Re-10 (2026-06-11) — proj-rows wie svc-rows formatieren:
   - Bild + Text top-buendig (statt vertically centered)
   - Engerer center-gap zwischen Bild und Text
   - Engerer vertikaler Abstand zwischen Reihen
   - Bilder leicht zueinander geshifftet wie auf Hauptseite
   ============================================================ */
@media (min-width: 782px) {
  html body .proj-row.wp-block-columns {
    align-items: flex-start !important;
    gap: 14px !important;
  }
  html body .proj-row .wp-block-column {
    align-self: flex-start !important;
    justify-content: flex-start !important;
  }
  html body .proj-row + .proj-row {
    margin-top: 14px !important;
  }
  html body .proj-row .wp-block-image {
    align-self: flex-start !important;
    margin-top: 0 !important;
  }
}

/* Re-10 Fix-v2 — Dropdown Items Padding mit hoeherer Specificity */
html body .tk-header-inner .tk-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
html body header .tk-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 10px 24px !important;
  line-height: 1.4 !important;
}

/* ============================================================
   Re-10 (2026-06-11) — Leistungen-Pages (4/5/6/7) zentriert,
   H1 + Body buendig auf gleicher x-Achse.
   Vorher: H1 bei x=126, Body bei x=210 → 84px Versatz
   Jetzt: beides bei x=200 (1100px Container zentriert auf 1500px)
   ============================================================ */
body.page.page-id-4 .entry-content,
body.page.page-id-5 .entry-content,
body.page.page-id-6 .entry-content,
body.page.page-id-7 .entry-content {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.page.page-id-4 .single-lead,
body.page.page-id-5 .single-lead,
body.page.page-id-6 .single-lead,
body.page.page-id-7 .single-lead,
body.page.page-id-4 .entry-content > section.wp-block-group,
body.page.page-id-5 .entry-content > section.wp-block-group,
body.page.page-id-6 .entry-content > section.wp-block-group,
body.page.page-id-7 .entry-content > section.wp-block-group {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.page.page-id-4 .entry-content h1,
body.page.page-id-5 .entry-content h1,
body.page.page-id-6 .entry-content h1,
body.page.page-id-7 .entry-content h1,
body.page.page-id-4 .single-lead h1,
body.page.page-id-5 .single-lead h1,
body.page.page-id-6 .single-lead h1,
body.page.page-id-7 .single-lead h1 {
  text-align: left !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  max-width: 100% !important;
}
body.page.page-id-4 .entry-content .wp-block-column,
body.page.page-id-5 .entry-content .wp-block-column,
body.page.page-id-6 .entry-content .wp-block-column,
body.page.page-id-7 .entry-content .wp-block-column,
body.page.page-id-4 .entry-content .wp-block-paragraph,
body.page.page-id-5 .entry-content .wp-block-paragraph,
body.page.page-id-6 .entry-content .wp-block-paragraph,
body.page.page-id-7 .entry-content .wp-block-paragraph {
  margin-left: 0 !important;
  padding-left: 0 !important;
}



/* Re-10 Fix-v2 — .detail-body Margin killen (war 0 10px → 10px-Versatz) */
body.page.page-id-4 .detail-body,
body.page.page-id-5 .detail-body,
body.page.page-id-6 .detail-body,
body.page.page-id-7 .detail-body,
body.page.page-id-4 .wp-block-columns.wrap.detail-body,
body.page.page-id-5 .wp-block-columns.wrap.detail-body,
body.page.page-id-6 .wp-block-columns.wrap.detail-body,
body.page.page-id-7 .wp-block-columns.wrap.detail-body {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 1100px !important;
  width: 100% !important;
}

/* ============================================================
   Re-10 (2026-06-11) — Leistungen-Pages Text mittig:
   Die wp-block-columns.wrap.detail-body hat nur 1 col bei 60% width.
   Bei Solo-Column auf 100% setzen, dann zentriert sich Text mit H1.
   ============================================================ */
@media (min-width: 782px) {
  html body .wrap.detail-body.wp-block-columns:has(> .wp-block-column:only-child) > .wp-block-column {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}

/* Re-10 v3: proj-row vertikaler Abstand HART auf 14px (statt 56-64px aus WP gap-Berechnung) */
html body .proj-row.wp-block-columns,
html body .single-body .proj-row.wp-block-columns,
html body .detail-body .proj-row.wp-block-columns {
  margin-top: 14px !important;
  margin-bottom: 0 !important;
}
html body .proj-row.wp-block-columns:first-of-type,
html body .single-body .proj-row.wp-block-columns:first-of-type {
  margin-top: 14px !important;
}
html body .proj-row.wp-block-columns + .proj-row.wp-block-columns {
  margin-top: 14px !important;
}

/* Re-10 v4 (2026-06-12): H3-Footer line-height aufweiten — Abstände zwischen UNTERWEGS/IN DEUTSCHLAND/UND EUROPA visuell wie rechte Kontakt-Spalte. EUROPA-Span margin-top auf 0 (line-height macht den Job). */
html body footer .tk-footer-band .tk-footer-col-hero .tk-footer-hero-h {
  line-height: 1.1 !important;
}
html body footer .tk-footer-band .tk-footer-col-hero .tk-footer-hero-h .accent-orange {
  margin-top: 0 !important;
}

/* Re-10 (2026-06-12): portrait-grid alle Bilder als 1:1 Quadrat — egal ob portrait-tile-Klasse gesetzt ist */
.portrait-grid .wp-block-image img,
.portrait-grid figure.wp-block-image img,
.portrait-grid figure img,
.portrait-grid .portrait-tile img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
}
.portrait-grid .wp-block-image,
.portrait-grid figure.wp-block-image {
  margin: 0 !important;
}

/* ============================================================
   Re-10 (2026-06-11) — Erste figure direkt unter Titel ausblenden.
   Das Bild wird vom Theme-Hero bereits oben gerendert. Pure CSS,
   keine Datenbank-Aenderung, kein save_post-Hook.
   ============================================================ */
body.single-post .entry-content > figure.wp-block-image:first-child,
body.single-post .single-body .entry-content > figure.wp-block-image:first-child,
body.single-post .wp-block-post-content > figure.wp-block-image:first-child {
  display: none !important;
}

/* ============================================================
   Re-12 (2026-06-13) Punkt 4b: Footer-Hero Restructure
   - TRANSPORTTECHNIKER gross (Outfit 900 ~56px) statt mini-Kicker
   - Visueller Abstand zwischen TT und UNTERWEGS FÜR SIE
   - H3-Lines (UNTERWEGS/IN DEUTSCHLAND/UND EUROPA) wieder eng
     (line-height 1.0) — sehen aus wie ein Block, kein Auseinanderdriften
   ============================================================ */
html body footer .tk-footer-band .tk-footer-col-hero .tk-footer-kicker {
  font-family: "Outfit", sans-serif !important;
  font-size: clamp(34px, 3.4vw, 50px) !important;
  font-weight: 900 !important;
  line-height: 1.0 !important;
  letter-spacing: -0.04em !important;
  text-transform: uppercase !important;
  color: var(--orange, #d97706) !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
}
html body footer .tk-footer-band .tk-footer-col-hero .tk-footer-hero-h {
  line-height: 1.0 !important;
  font-size: clamp(34px, 3.4vw, 50px) !important;
}
html body footer .tk-footer-band .tk-footer-col-hero .tk-footer-hero-h .accent-orange {
  display: inline !important;
  margin: 0 !important;
}

/* Re-12 #5 (2026-06-13): Intro-Block H2s gleich gross wie "Von der Idee..." H2 (46px) */
html body .intro-block .text-col h2.wp-block-heading,
html body .intro-block .text-col h2.has-large-font-size,
html body section .intro-block h2.wp-block-heading.has-large-font-size,
html body .intro-block .intro-bottom-row h2.wp-block-heading,
html body .intro-block .intro-bottom-row h2.has-large-font-size {
  font-size: 46px !important;
  line-height: 1.2 !important;
}


/* ============================================================
   Re-12 #2 (2026-06-13): Bilder werden komplett gezeigt
   (kein left/right crop mehr). object-fit:cover → contain
   - svc-rows (Hauptseite-Service-Karten): contain
   - proj-rows (Projekt-Seiten): contain
   - Karussell bleibt cover (Design-Choice, Slides sind Hero-like)
   Hintergrund: --light statt Loch.
   ============================================================ */

/* Text-Spalten vertikal zentriert (= visuell bündig mit Bild bei 450px Reihe) */
html body .proj-row .wp-block-column:not(:has(.wp-block-image)):not(:has(figure)) {
  justify-content: flex-start !important;
}

/* Re-12 #8 (2026-06-13): Footer Signatur höher — padding-top von 80px auf 28px reduziert. Damit schließt der Footer dicht an die Welt-Karte an. */
html body .tk-footer-band {
  padding-top: 48px !important;
}

/* Re-12 Footer-Hero Tuning v2 (2026-06-13):
   - TT-Block ohne Extra-Lücke zu UNTERWEGS FÜR SIE
   - Footer-Col-Hero & Contact-Col oben dichter an Footer-Band-Top
   - UND EUROPA bottom = Berlin bottom = Projekte bottom
*/
html body footer .tk-footer-band .tk-footer-col-hero {
  padding-top: 0 !important;
}
html body footer .tk-footer-band .tk-footer-col-hero .tk-footer-kicker {
  margin: 0 !important;
}
html body footer .tk-footer-band .tk-footer-col-hero .tk-footer-hero-h {
  margin-top: 0 !important;
}
/* Projekte-Pills runter (waren 6px über Berlin) — Projekte-Bottom exakt auf Berlin-Bottom */
html body footer .tk-footer-band > .tk-footer-pills,
html body footer .tk-footer-band .wp-block-buttons.tk-footer-pills {
  margin-top: -89.5px !important;
}

/* Re-12 Footer-Hero v3 (2026-06-13):
   - Visible-Baseline EUROPA = Berlin = Projekte (Buchstaben auf einer Linie)
     50px Outfit 900 hat 12px Font-Internal-Leading unter Baseline.
     Line-height 1.08 statt 1.0 schiebt EUROPA bottom 12px tiefer.
   - Gesamten Block höher (mehr Luft zum unteren Rand)
     padding-bottom 64 → 110px.
*/
html body footer .tk-footer-band .tk-footer-col-hero .tk-footer-hero-h {
  line-height: 1.08 !important;
}
html body footer .tk-footer-band {
  padding-bottom: 110px !important;
}

/* Re-12 Pixel-Perfect (2026-06-13):
   Pixel-Scan zeigte:
   - TT-Glyph-Top war 5px tiefer als KONTAKT/SVC (Font-Internal-Leading)
   - UND EUROPA-Glyph-Bottom war 2px tiefer als Berlin/Projekte
   Fix: margin-top -5px auf TT shiftet das gesamte TT-Block-Konstrukt
   5px nach oben → TOP aligned UND auch UND EUROPA bottom = 230 (= Berlin).
*/
html body footer .tk-footer-band .tk-footer-col-hero .tk-footer-kicker {
  margin-top: -5px !important;
}

/* Re-12 Pixel-Perfect v2 (2026-06-13): EUROPA span 3px nach unten — bottom = Berlin bottom */
html body footer .tk-footer-band .tk-footer-col-hero .tk-footer-hero-h .accent-orange {
  position: relative;
  top: 3.5px !important;
}

/* Re-12 (2026-06-13): weißer Strich zwischen Welt-Karte und Footer entfernen + Footer-Block höher.
   FOOTER hat margin-top:24px (=weiß sichtbar, body-bg) und padding-top:72px (=navy leerraum).
   Beides auf 0. .tk-footer-band hat eigenes padding-top:28px für Atemraum.
*/
html body footer.site.wp-block-template-part,
html body footer.wp-block-template-part {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Re-12 #1 (2026-06-13) v3: Pfeilabstand exakt halbiert wie Thomas wollte.
   Original: prev.left=24px, next.right=24px → Lücke zwischen ~1288px bei 1500vw
   Halbiert: 25vw von jedem Rand → Lücke ~644px
*/
html body .tk-carousel-wrap .tk-carousel-btn.prev {
  left: 25vw !important;
  right: auto !important;
}
html body .tk-carousel-wrap .tk-carousel-btn.next {
  right: 25vw !important;
  left: auto !important;
}
@media (max-width: 768px) {
  html body .tk-carousel-wrap .tk-carousel-btn.prev { left: 12vw !important; }
  html body .tk-carousel-wrap .tk-carousel-btn.next { right: 12vw !important; }
}


/* ============================================================
   Re-12 final v5 (2026-06-13): proj-row sauber neu aufgesetzt
   - Bild: natürliche Aspect-Ratio (egal wie breit/hoch)
   - Reihe = max(Bild-Höhe, Text-Höhe) → kein toter Leerraum
   - Beide Spalten oben angefangen
   - 14px Abstand zwischen Reihen
   - Bild komplett sichtbar (object-fit:contain mit transparenter bg)
   ============================================================ */
@media (min-width: 782px) {
  html body .proj-row.wp-block-columns {
    align-items: flex-start !important;
    margin: 14px 0 0 0 !important;
    gap: 14px !important;
  }
  html body .proj-row.wp-block-columns:first-of-type {
    margin-top: 14px !important;
  }
  html body .proj-row .wp-block-column {
    align-self: flex-start !important;
    display: block !important;
    flex-basis: calc(50% - 7px) !important;
  }
  html body .proj-row .wp-block-image,
  html body .proj-row figure.wp-block-image {
    margin: 0 !important;
    flex: none !important;
    display: block !important;
  }
  html body .proj-row .wp-block-image img,
  html body .proj-row figure.wp-block-image img,
  html body .proj-row figure img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    background: transparent !important;
    display: block !important;
  }
}

/* ============================================================
   Re-15 v85 (2026-06-17): Sprach-Switcher rechts unten
   Globus-Button → klick öffnet Flaggen-Fan (DE/EN/RU)
   Google Translate Widget versteckt, wir triggern es selbst
   ============================================================ */

/* Google Translate UI komplett verstecken */
.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight {
  display: none !important;
}
body {
  top: 0 !important;
}
#google_translate_element {
  position: absolute;
  left: -10000px;
  top: -10000px;
  visibility: hidden;
}
font[style*="background-color"] {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Floating Container */
.tk-lang {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9998;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}

/* Hauptbutton (Globus) */
.tk-lang-toggle {
  pointer-events: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #0a2540;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(10, 37, 64, 0.32), 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s ease, background 0.2s ease;
  position: relative;
}
.tk-lang-toggle:hover {
  background: #103456;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(10, 37, 64, 0.4), 0 3px 8px rgba(0, 0, 0, 0.14);
}
.tk-lang-toggle:active {
  transform: translateY(0);
}
.tk-lang-toggle svg {
  width: 26px;
  height: 26px;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.tk-lang.is-open .tk-lang-toggle svg {
  transform: rotate(180deg);
}

/* Aktive Sprache als kleiner Dot */
.tk-lang-toggle::after {
  content: attr(data-active);
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: #d97706;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 5px;
  border-radius: 8px;
  border: 2px solid #fff;
  text-transform: uppercase;
}

/* Flaggen-Liste */
.tk-lang-flags {
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.tk-lang-flag {
  pointer-events: auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(20px) scale(0.6);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s ease;
  position: relative;
}
.tk-lang-flag:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  transform: translateY(0) scale(1.08);
}
.tk-lang-flag.is-active {
  border-color: #d97706;
}
.tk-lang-flag svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Fan-out Animation — Stagger */
.tk-lang.is-open .tk-lang-flag {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.tk-lang.is-open .tk-lang-flag:nth-child(1) { transition-delay: 0.05s; }
.tk-lang.is-open .tk-lang-flag:nth-child(2) { transition-delay: 0.12s; }
.tk-lang.is-open .tk-lang-flag:nth-child(3) { transition-delay: 0.19s; }

/* Mobile — kleiner, näher an Rand */
@media (max-width: 768px) {
  .tk-lang {
    right: 16px;
    bottom: 16px;
  }
  .tk-lang-toggle {
    width: 48px;
    height: 48px;
  }
  .tk-lang-toggle svg {
    width: 22px;
    height: 22px;
  }
  .tk-lang-flag {
    width: 40px;
    height: 40px;
  }
}

/* Re-15 v86 (2026-06-17): Lang-Switcher Fix
   - Globus UNTEN, Flaggen schießen NACH OBEN raus
   - Flaggen füllen den ganzen Kreis (kein weißer Border-Frame)
*/
html body .tk-lang {
  flex-direction: column !important;  /* toggle naturally last → unten */
}

/* Flaggen-Container: erste Flagge nah am Button (unten), letzte oben */
html body .tk-lang-flags {
  flex-direction: column-reverse !important;
}

/* Flagge: kein Border, voller Fill, Animation startet weiter unten (nah Button) */
html body .tk-lang-flag {
  border: none !important;
  background: #0a2540;  /* Falls SVG-Lücke entsteht */
  transform: translateY(20px) scale(0.5) !important;
}
html body .tk-lang-flag svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;  /* nochmal explizit damit SVG-Inhalt nicht über Kreis spillt */
}
html body .tk-lang.is-open .tk-lang-flag {
  transform: translateY(0) scale(1) !important;
}
html body .tk-lang-flag.is-active {
  box-shadow: 0 0 0 3px #d97706, 0 6px 18px rgba(0, 0, 0, 0.28);
}

/* Stagger umdrehen: DE (nah am Button, in HTML :nth-child(1)) animiert zuerst */
/* Mit column-reverse ist :nth-child(1) visuell UNTEN (DE) — soll first out */
html body .tk-lang.is-open .tk-lang-flag:nth-child(1) { transition-delay: 0.05s !important; }
html body .tk-lang.is-open .tk-lang-flag:nth-child(2) { transition-delay: 0.12s !important; }
html body .tk-lang.is-open .tk-lang-flag:nth-child(3) { transition-delay: 0.19s !important; }