/* ============================================================
   HMG SOLUTION — splash.css  (Aufmachungsseite / Split-Screen)
   ============================================================ */

/* bewegliche Naht-Position animierbar machen */
@property --seam { syntax:'<percentage>'; inherits:true; initial-value:50%; }

.splash{ --seam:50%; --diag:70px; }

/* ---------- Split-Screen ---------- */
.split{
  position:relative; height:100svh; min-height:600px; overflow:hidden;
  background:var(--ink); isolation:isolate;
}
.split__half{
  position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:center; padding:0 clamp(28px,7vw,110px);
  text-decoration:none; color:#fff; overflow:hidden;
  transition:--seam var(--t) var(--ease);
}
/* linke Hälfte: Industry */
.split__half--industry{
  background:
    radial-gradient(120% 130% at 12% 30%, rgba(21,129,201,.30), transparent 55%),
    linear-gradient(160deg,#0c1822,#0a0e14 70%);
  clip-path:polygon(0 0, calc(var(--seam) + var(--diag)) 0, calc(var(--seam) - var(--diag)) 100%, 0 100%);
  z-index:2;
  align-items:flex-start; text-align:left;
}
/* rechte Hälfte: Construct */
.split__half--construct{
  background:
    radial-gradient(120% 130% at 88% 70%, rgba(232,65,58,.26), transparent 55%),
    linear-gradient(200deg,#1a1110,#0c0a0a 70%);
  clip-path:polygon(calc(var(--seam) + var(--diag)) 0, 100% 0, 100% 100%, calc(var(--seam) - var(--diag)) 100%);
  z-index:1;
  align-items:flex-end; text-align:right; padding-right:clamp(28px,7vw,110px);
}
/* diagonale Naht (Akzent-Band) */
.split__seam{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(180deg,var(--industry),var(--construct));
  clip-path:polygon(
    calc(var(--seam) + var(--diag)) 0, calc(var(--seam) + var(--diag) + 2px) 0,
    calc(var(--seam) - var(--diag) + 2px) 100%, calc(var(--seam) - var(--diag)) 100%);
  box-shadow:0 0 24px rgba(255,255,255,.18);
  transition:--seam var(--t) var(--ease);
}
/* Monogramm am Schnittpunkt */
.split__node{
  position:absolute; top:50%; left:var(--seam); z-index:4;
  width:54px; height:54px; transform:translate(-50%,-50%) rotate(45deg);
  background:var(--ink); border:1px solid var(--line-strong);
  display:grid; place-items:center; pointer-events:none;
  transition:left var(--t) var(--ease), box-shadow var(--t);
  box-shadow:0 0 0 6px rgba(14,14,18,.6);
}
.split__node span{ transform:rotate(-45deg); font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; color:var(--fg-soft); }

/* Hover/Fokus: Naht verschieben + Hälfte hervorheben */
.split:has(.split__half--industry:hover),
.split:has(.split__half--industry:focus-visible){ --seam:64%; }
.split:has(.split__half--construct:hover),
.split:has(.split__half--construct:focus-visible){ --seam:36%; }
.split__half{ transition:--seam var(--t) var(--ease), filter var(--t); }
/* Dim per Overlay-Opacity statt filter: 'filter' rastert die komplette
   Vollbild-Hälfte (Foto + SVG + Gradients) pro Frame neu; opacity läuft
   auf dem Compositor. */
.split__half::before{ content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:rgba(6,8,11,.5); opacity:0; transition:opacity .24s var(--ease); }
.split:has(.split__half--industry:hover) .split__half--construct::before,
.split:has(.split__half--construct:hover) .split__half--industry::before{ opacity:1; }

/* Lesbarkeits-Schleier auf der Textseite. Liegt ueber Foto und SVG, unter dem
   Text (z-index 1 + spaetere Malreihenfolge). Ohne ihn haengt der Kontrast am
   jeweiligen Foto — beim Bildtausch faellt die Schrift sonst unbemerkt durch. */
.split__half::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; }
.split__half--industry::after{
  background:linear-gradient(100deg, rgba(6,10,14,.56) 0%, rgba(6,10,14,.30) 38%, transparent 66%); }
.split__half--construct::after{
  background:linear-gradient(260deg, rgba(11,7,7,.64) 0%, rgba(11,7,7,.38) 38%, transparent 66%); }

/* Inhalt einer Hälfte */
.split__inner{ position:relative; z-index:2; max-width:30ch; }
.split__logo{ height:clamp(46px,6vw,74px); width:auto; margin-bottom:1.6rem; }
/* img ist display:block (Reset) — rechtsbündig daher per Auto-Margin */
.split__half--construct .split__logo{ margin-left:auto; }
.split__kicker{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--fg-soft); margin-bottom:1rem; display:block;
}
.split__half--industry .split__kicker{ color:var(--industry-2); }
.split__half--construct .split__kicker{ color:#f2796f; }
.split__claim{ font-family:var(--font-display); font-size:clamp(1.15rem,1.9vw,1.6rem); font-weight:500; line-height:1.25; color:#fff; }
.split__list{ margin-top:1.4rem; display:flex; flex-direction:column; gap:.5rem; }
.split__half--construct .split__list{ align-items:flex-end; }
.split__list li{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em; color:var(--fg-soft); display:flex; gap:.6em; align-items:flex-start; }
/* Raute auf der ERSTEN Zeile, auch bei zweizeiligen Punkten (rutschte sonst in die Mitte) */
.split__list li::before{ content:""; flex:0 0 auto; width:6px; height:6px; margin-top:.55em; background:var(--accent); transform:rotate(45deg); display:inline-block; }
.split__half--industry .split__list li::before{ background:var(--industry); }
.split__half--construct .split__list li::before{ background:var(--construct); }
.split__half--construct .split__list li{ flex-direction:row-reverse; }
/* Einstieg als Schaltflaeche in der jeweiligen Markenfarbe (vorher Textlink).
   Flaechenfarben sind die -strong-Werte, NICHT die reinen Markenfarben:
   #1581c9 und #e8413a erreichen unter Weiss nur 4.19:1 bzw. 4.00:1. */
.split__enter{
  margin-top:2rem; display:inline-flex; align-items:center; gap:.6em;
  padding:.95em 1.5em;
  font-family:var(--font-mono); font-size:.82rem; font-weight:500; letter-spacing:.05em;
  color:#fff; background:var(--sp-btn); border:1px solid var(--sp-btn);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition:background var(--t-fast), border-color var(--t-fast), gap var(--t-fast), box-shadow var(--t);
}
.split__half--industry { --sp-btn:#147bbf; --sp-btn-hover:#106aa4; }        /* 4.55:1 / 5.80:1 */
.split__half--construct{ --sp-btn:#e5271f; --sp-btn-hover:var(--construct-2); } /* 4.52:1 / 5.18:1 */
.split__half:hover .split__enter{
  background:var(--sp-btn-hover); border-color:var(--sp-btn-hover); gap:.95em;
  box-shadow:0 14px 34px -14px var(--sp-btn);
}
.split__enter svg{ width:1.1em; height:1.1em; }

/* dezentes Hintergrundfoto je Hälfte (hinter der Animation) */
.split__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.30; filter:saturate(.95); pointer-events:none; }
/* Construct zeigt dasselbe Motiv wie die Construct-Startseite (Hero, querformat).
   Der Ausschnitt sitzt rechts unten: dort stehen Haus, Terrasse und Stufen. */
.split__half--construct .split__bg{ object-position:72% 78%; }
/* Industry-Motiv seit 15.09.2026: helle Rohrfertigung, gelbe Magnettraverse mit fuenf Magneten an
   einem grossen Stahlrohr (Mikes Datei "Landingpage Startbild Industry"), Querformat 16:9 wie das
   Construct-Motiv, Retina-Datei per Photoshop "Details erhalten 2.0". Deutlich heller als die dunkle
   Fassung (mittlere Helligkeit 67 statt 52, linkes Drittel 64 statt 34), daher Deckkraft .20, gemessen
   am gerenderten Hintergrund (hellste 1 % der Pixel) bei 1280-2560 px: Kicker ab 4,5, Liste ab 6,2,
   Claim ab 12,8. Bei .25 faellt die blaue Kicker-Zeile auf 4,2. Die Haelfte ist damit so hell wie die
   Construct-Seite (1440 px: linkes Drittel 25,8, rechtes 24,6). Ausschnitt links: Maschine, Rohr und
   Traverse stehen in der linken Bildhaelfte. Die Beschriftung "25 t" am Kranträger und das Zeichen
   oben rechts (Bild-x 82-100 %) liegen auf keiner gemessenen Breite im sichtbaren Ausschnitt. */
.split__half--industry .split__bg{ opacity:.20; object-position:left center; }

/* Haus-Sketch (Dach-Dreieck) der Construct-Haelfte: im viewBox liegt er bei
   y 360-740 und faellt am Desktop (Skalierung 2,4x, kein Versatz) komplett
   unter den Viewport. Fuer Desktop wird die Gruppe verkleinert und nach oben
   rechts hinter Liste und Button gesetzt -- Einheiten sind viewBox-Einheiten.
   Mobil bleibt er unveraendert, dort ist er ohnehin im Bild. */
@media (min-width:821px){
  /* (Haus-Skizze wird global ausgeblendet, siehe .viz-house weiter unten) */
  /* Animierte Gruppen in den unteren Teil: Industry unter den Industry-Button,
     Construct unter den Construct-Button (viewBox-Einheiten, x2,4 = CSS-px). */
  .split__half--industry  .viz-anim{ transform:translate(-170px, 30px); }
  .split__half--construct .viz-anim{ transform:translate(190px, 30px); }
}
/* Mobil: die animierten Elemente waren bei 0,71-facher Skalierung 26-39px
   klein und hinter dem Text unsichtbar. Jetzt: unterer Teil jeder Sektion,
   eigener Raum durch mehr Polster unten, groesser und kraeftiger. */
@media (max-width:820px){
  .split .split__half{ padding-bottom:9rem; }  /* schlaegt die spaetere .split__half-Regel */
  /* Das SVG haelt sonst seine Eigenhoehe (390 x 800/600 = 520px) und waechst
     nicht mit der Haelfte -- explizit fuellen lassen, sonst liegt der neue
     Fussraum ausserhalb der Zeichenflaeche. */
  .split .split__viz{ width:100%; height:100%; opacity:.95; }  /* schlaegt die spaetere Basisregel (opacity .5) */
  .split .split__viz > g{ opacity:.9; }                           /* Markup-Attribut opacity=.55 uebersteuern */
  .viz-anim{ transform-box:view-box; transform-origin:300px 300px;
    transform:translate(0, 415px) scale(1.35); }
  .viz-anim .flow{ stroke-width:2.2; }
  .viz-anim .rise{ stroke-width:2.2; }
  .viz-anim .pulse-ring{ stroke-width:2.4; }
  /* Das Sketch-Etikett "FIG.02" liegt mobil genau hinter der Eyebrow-Zeile */
  .split__half--construct .split__viz text{ display:none; }
}

/* Kein separates Dreiecks-Motiv (Kundenentscheidung 09/2026): die Haus-Skizze
   der Construct-Haelfte entfaellt auf allen Breiten -- das Dreieck lebt in den
   aufsteigenden Dreiecken beider Haelften. */
.viz-house{ display:none; }

/* Aufsteigende Dreiecke statt Pulsringe (Kundenwunsch): steigen aus der
   Welle auf, werden dabei groesser und verblassen -- gestaffelt zu dritt. */
@keyframes rise{
  0%  { transform:translateY(0) scale(.7);    opacity:0; }
  14% { opacity:.95; }
  100%{ transform:translateY(-140px) scale(1.25); opacity:0; }
}
.rise{ transform-box:fill-box; transform-origin:50% 100%;
  animation:rise 4.4s cubic-bezier(.2,.6,.3,1) infinite; }
.rise--2{ animation-delay:1.5s; animation-duration:4.8s; }
.rise--3{ animation-delay:2.9s; animation-duration:4.1s; }

/* technischer Hintergrund je Hälfte */
.split__viz{ position:absolute; inset:0; z-index:1; opacity:.5; pointer-events:none; }
.split__half--industry .split__viz{ color:var(--industry-2); }
.split__half--construct .split__viz{ color:#f2796f; }

/* Der Opener hat keine Kopfleiste mehr (08/2026): "Mehr erfahren" sitzt unten
   an der HMG-Solution-Marke, die Sprachwahl im Schnellkontakt. Die Regeln fuer
   .splash-header sind damit entfallen. */

/* Zentrale, große Dach-Wortmarke */
.splash-brand{
  position:absolute; top:clamp(64px,11vh,116px); left:50%; transform:translateX(-50%);
  z-index:6; text-align:center; pointer-events:none; width:min(92vw,680px);
}
.splash-brand__logo{ height:clamp(56px,8.5vw,108px); width:auto; margin:0 auto;
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.65)); }
.splash-brand__tag{ display:block; margin-top:.9rem; font-family:var(--font-mono);
  font-size:clamp(.64rem,1.3vw,.8rem); letter-spacing:.24em; text-transform:uppercase;
  color:#d6dae1; text-shadow:0 2px 12px rgba(0,0,0,.8); }
.splash-brand__tag b{ color:#fff; font-weight:500; }
@media (max-width:820px){
  .splash-brand{ position:relative; top:auto; left:auto; transform:none; width:100%;
    padding:5.5rem clamp(28px,8vw,48px) 2.6rem; z-index:6; }
  .splash-brand__logo{ height:clamp(52px,16vw,80px); }
}

/* Scroll-Hinweis */
.split__scroll{
  position:absolute; left:50%; bottom:70px; transform:translateX(-50%); z-index:5;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg-mute); display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
/* Der Strich fuehrt jetzt zum Knopf hinunter, also andersherum verlaufen:
   oben aus der Schrift heraus, unten kraeftig am Knopf ankommend. */
.split__scroll .line{ width:1px; height:34px; background:linear-gradient(transparent,var(--fg-soft)); }

/* "Mehr erfahren" sitzt seit 08/2026 unten mittig ueber der HMG-Solution-Marke,
   nicht mehr in einer Kopfleiste (der Opener hat keine Navigation mehr). */
.split__more{
  /* Sitzt am Ende des Strichs, UNTER den Symbolen. Vorher stand er weiter
     oben mitten im Kreis-/X-Cluster (gemessen y 672-768) und wurde davon
     angeschnitten. */
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:6;
  display:inline-flex; align-items:center; gap:.55em;
  /* min-height statt mehr Polsterung: haelt die Flaeche bei >=44px (Touch-Ziel),
     ohne die Pille optisch aufzublasen. */
  padding:.7em 1.4em; min-height:44px;
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; text-decoration:none;
  background:rgba(10,12,16,.62); border:1px solid rgba(255,255,255,.20); border-radius:999px;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  transition:background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.split__more svg{ width:1.05em; height:1.05em; transition:transform var(--t-fast); }
.split__more:hover{ background:rgba(10,12,16,.85); border-color:rgba(255,255,255,.42); }
.split__more:hover svg{ transform:translateY(3px); }
.split__more:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* ---------- Mobil: vertikaler Stack ---------- */
@media (max-width:820px){
  .split{ height:auto; min-height:0; display:flex; flex-direction:column; }
  .split__half{ position:relative; inset:auto; clip-path:none !important; min-height:62svh; padding:7rem clamp(28px,8vw,48px) 3.5rem; }
  /* Unterkante gerade: die schraege Naht liefert die darueberliegende
     Construct-Haelfte. Vorher ergaben zwei gegenlaeufige Schraegen plus
     20px Abstand einen bis zu 100px hohen Keil aus Seitenhintergrund. */
  .split__half--industry{ align-items:flex-start; text-align:left; padding-top:2.4rem; min-height:52svh;
    padding-bottom:calc(9rem + 40px); }
  /* Mobil ist der Kasten nur die Haelfte: 40 % horizontal holt Traverse, Haken und Rohr
     ins Bild. Ohne Saettigungsfilter, Deckkraft .50 (gemessen bei 390 und 768 px: Kicker ab 4,6,
     Liste ab 5,6, Claim ab 11,2; bei .55 faellt der Kicker bei 768 px auf 4,4). */
  .split__half--industry .split__bg{
    opacity:.50; object-position:40% center;
    filter:none;
  }
  /* Mobil laeuft der Text ueber die volle Breite — der seitliche Schleier
     greift dort nicht, also von unten aufziehen. */
  .split__half--industry::after,
  .split__half--construct::after{
    background:linear-gradient(180deg, rgba(8,8,10,.30) 0%, rgba(8,8,10,.62) 46%, rgba(8,8,10,.72) 100%); }
  .split__half--construct{ align-items:flex-start; text-align:left; margin-top:-40px; padding-top:6rem;
    position:relative; z-index:2;
    clip-path:polygon(0 40px, 100% 0, 100% 100%, 0 100%) !important; }
  .split__half--construct .split__logo{ margin-left:0; }
  .split__half--construct .split__list{ align-items:flex-start; }
  .split__half--construct .split__list li{ flex-direction:row; }
  .split__seam, .split__node, .split__scroll{ display:none; }
  /* Mobil laeuft der Split als Stapel: Link normal in den Fluss setzen. */
  .split__more{ position:static; transform:none; display:flex; width:max-content;
    margin:1.6rem auto 2.2rem; }
  .split:has(.split__half:hover){ --seam:50%; }
  .split__half{ filter:none !important; }
}

/* Leistungsbegriffe am Desktop einzeilig ausschreiben statt umbrechen.
   Nur die Liste waechst ueber die 30ch des Containers hinaus -- Logo, Kicker
   und Claim bleiben unangetastet (30ch am Claim waere wegen seiner groesseren
   Schrift deutlich breiter und wuerde die Headline umbrechen lassen).
   Ab 1200px liegen zwischen Textkante und diagonaler Naht 446px, die
   laengste Zeile braucht 378px; darunter bleibt der Umbruch, sonst laeuft
   der Text ueber die Naht. Construct ist rechtsbuendig: die Liste waechst
   per translateX nach links, damit ihre rechte Kante am Rand bleibt. */
@media (min-width:1200px){
  .split__list{ width:max-content; }
  .split__list li{ white-space:nowrap; }
  .split__half--construct .split__list{ transform:translateX(calc(30ch - 100%)); }
}

/* ---------- Dach-Story-Sektion ---------- */
.umbrella{ background:var(--ink); position:relative; }
.umbrella .split-marks{ display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap; margin-top:1.6rem; }
.umbrella .split-marks img{ height:30px; opacity:.9; }
.umbrella .split-marks .plus{ color:var(--solution); font-family:var(--font-mono); }

.duo{ display:grid; gap:1.4rem; grid-template-columns:1fr; margin-top:2.5rem; }
@media (min-width:820px){ .duo{ grid-template-columns:1fr 1fr; } }
.duo__card{
  position:relative; padding:clamp(26px,3vw,40px); border:1px solid var(--line); border-radius:var(--radius);
  background:var(--ink-2); overflow:hidden; transition:border-color var(--t), transform var(--t) var(--ease);
}
.duo__card[data-brand="industry"]{ --accent:var(--industry); --accent-2:var(--industry-2); }
.duo__card[data-brand="construct"]{ --accent:var(--construct); --accent-2:#d9605a; } /* Textakzent wie [data-brand=construct], nicht die dunklere Flaechenfarbe (3,48:1) */
.duo__card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent); clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),0 100%); }
.duo__card:hover{ border-color:var(--accent); transform:translateY(-4px); }
.duo__card img{ height:34px; margin-bottom:1.2rem; }
.duo__card h3{ margin-bottom:.6rem; }
.duo__card{ display:flex; flex-direction:column; align-items:flex-start; }
.duo__card > :not(img):not(.tlink){ width:100%; }
.duo__card img{ width:auto; height:34px; }  /* Logo behaelt sein Seitenverhaeltnis (war durch width:100% verzogen) */
.duo__card .tlink{ margin-top:auto; padding-top:1.3rem; } /* beide CTAs auf einer Kante */

.stat-row{ display:grid; gap:1.5rem 2rem; grid-template-columns:repeat(2,1fr); margin-top:3rem; }
/* Desktop: vier Kennzahlen gleichmaessig verteilt, die letzte endet auf der rechten Flucht
   (space-between statt vier gleich breiter Spalten, in denen rechts Luft blieb). */
@media (min-width:760px){ .stat-row{ display:flex; justify-content:space-between; gap:2rem; } .stat-row .stat{ flex:0 1 auto; } }


/* ---------- Reduced Motion (fehlte in dieser Datei) ---------- */
@media (prefers-reduced-motion:reduce){
  .split__half, .split__seam, .split__node, .split__half::before, .split__enter{ transition:none !important; }
  .rise{ animation:none !important; opacity:.6; }
  .split:has(.split__half--industry:hover), .split:has(.split__half--construct:hover){ --seam:50%; }
}