/* =====================================================================
* DWE — custom.css
* Custom-Anpassungen ZUSÄTZLICH zum YOOtheme-Customizer (theme.1.css).
* Wird nach theme.1.css geladen und überschreibt diese.
* ===================================================================== */
/* =====================================================================
* HEADER — BUTTON-PAAR (Menü + Kontakt)
* Gleiche Höhe, Gap dazwischen, gemeinsamer Abstand zum Seitenrand.
* ===================================================================== */
/* Gleichmäßige vertikale Ausrichtung + Gap der beiden Buttons */
.tm-header .uk-navbar-right {
gap: 28px;
align-items: center;
}
/* Widget-Wrapper um den Kontakt-Button neutralisieren (sonst vertikaler Versatz) */
.tm-header .uk-navbar-right .uk-navbar-item,
.tm-header .uk-navbar-right .uk-grid,
.tm-header .uk-navbar-right .uk-grid > *,
.tm-header .uk-navbar-right .uk-margin {
margin: 0;
padding: 0;
}
ul.falang-language-switcher {padding: 0;list-style: none;}
ul.falang-language-switcher li {display: inline-block;margin-right: 10px;}
.tm-header-mobile .uk-icon {color: white !important; border: solid 1px white;
padding: 12px;}
.uk-offcanvas-bar ul.uk-nav.uk-nav-default li:first-of-type a {
border-bottom: 0;
}
/* Offcanvas: Impressum/Datenschutz bündig mit Nav-Text (20px wie .uk-nav > li > a) */
.uk-offcanvas-bar .uk-panel.uk-text-small {
padding-left: 20px;
}
/* ---------------------------------------------------------------------
* MENÜ-BUTTON (.uk-navbar-toggle) — transparent, Outline
* Links Label "Menü", rechts Hamburger-Icon, dazwischen Trennlinie.
* ------------------------------------------------------------------- */
.tm-header .uk-navbar-toggle {
height: 44px; /* gleiche Höhe wie Kontakt-Button */
min-height: 44px;
align-items: stretch; /* Trennlinie über volle Höhe */
padding: 0;
column-gap: 0;
border: 1px solid currentColor;
background-color: transparent;
color: #ffffff; /* weiß auf dem dunklen Overlay-Header */
transition: background-color .45s cubic-bezier(.53, 0, 0, 1),
color .45s cubic-bezier(.53, 0, 0, 1),
border-color .45s cubic-bezier(.53, 0, 0, 1);
}
/* Linke Zelle: Beschriftung */
.tm-header .uk-navbar-toggle::before {
content: "Menu";
display: flex;
align-items: center;
padding: 5px 40px 0 24px; /* mehr Luft rechts vom Text (zum Divider) */
text-transform: uppercase;
font-size: 18px;
font-weight: 700;
letter-spacing: .04em;
line-height: 1;
}
/* Rechte Zelle: Hamburger-Icon mit Trennlinie links */
.tm-header .uk-navbar-toggle > [uk-navbar-toggle-icon],
.tm-header .uk-navbar-toggle .uk-navbar-toggle-icon {
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px;
border-left: 1px solid currentColor;
}
/* Hover / geöffnet: weiß gefüllt, Petrol Text + Linien */
.tm-header .uk-navbar-toggle:hover,
.tm-header .uk-navbar-toggle[aria-expanded="true"] {
background-color: #ffffff;
border-color: #ffffff;
color: #003349;
}
/* =====================================================================
* DEFAULT-BUTTON (.uk-button-default) — "unser" DWE-Button
* Weiß gefüllt, Petrol Uppercase-Text, rechts Pfeil-Zelle mit
* Trennlinie und abgeschrägter rechter Kante (clip-path, kein SVG).
* ===================================================================== */
.uk-button.uk-button-default {
position: relative;
display: inline-flex; /* schrumpft auf Inhalt -> kompakt */
align-items: center;
box-sizing: border-box;
isolation: isolate; /* eigener Stacking-Kontext für die Füll-Ebene */
height: 45px;
padding: 5px 0 0 24px; /* nur links Textabstand */
background-color: #003349; /* = dunkelblaue Randfarbe (bleibt als 1px-Linie sichtbar) */
color: #003349;
font-size: 18px;
font-weight: 700;
letter-spacing: .04em;
line-height: 1;
text-transform: uppercase;
/* Abschrägung der rechten Kante (CSS statt SVG) */
clip-path: polygon(0 0, 100% 0, calc(100% - 13.64px) 100%, 0 100%);
transition: color .45s cubic-bezier(.53, 0, 0, 1);
}
/* Weiße Füllung 1px nach innen -> dunkelblaue Rand-Linie bleibt rundum (auch an der Schräge) stehen */
.uk-button.uk-button-default::before {
content: "";
position: absolute;
inset: 0;
z-index: -1; /* über der dunklen Fläche, unter Text/Pfeil */
background-color: #ffffff;
/* Innenform = äußere Form senkrecht um 1px eingerückt -> überall gleich dicke
Randlinie, auch auf der Schräge. Punkte berechnet für Höhe 45px / Schräge 13.64px (73,14°). */
clip-path: polygon(1px 1px, calc(100% - 1.35px) 1px, calc(100% - 14.38px) 44px, 1px 44px);
transition: background-color .45s cubic-bezier(.53, 0, 0, 1);
}
/* Rechte Pfeil-Zelle: Trennlinie (border-left) + Pfeil, volle Höhe */
.uk-button.uk-button-default::after {
content: "→";
display: flex;
align-items: center;
justify-content: center;
align-self: stretch;
margin-top: -5px;
margin-left: 56px; /* Abstand Text -> Trennlinie (wie im Entwurf, großzügig) */
padding: 5px 28px 0 18px; /* rechts extra Platz für die Schräge */
border-left: 1px solid currentColor;
font-size: 18px;
}
/* Hover: komplett Petrol gefüllt (Füllung wird dunkel), weißer Text + Linie + Pfeil */
.uk-button.uk-button-default:hover,
.uk-button.uk-button-default:focus {
color: #ffffff;
}
.uk-button.uk-button-default:hover::before,
.uk-button.uk-button-default:focus::before {
background-color: #003349;
}
/* =====================================================================
* HERO — LINIEN-ÜBERLAGERER (cyan)
* Diagonale + obere + untere Horizontale. Rein CSS (kein Bild, kein SVG).
*
* Markup (als HTML-/Code-Element in die Hero-Sektion einfügen):
*
*
*
*
*
*
* Jede Linie ist ein eigenes Element -> später einzeln animierbar.
* Alle Maße als Variablen -> hier zentral justieren.
* ===================================================================== */
@media (min-width: 959px) {
.dwe-hero-lines {
--line-color: #6fd2e0; /* cyan */
--line-width: 1px;
--diag-x: 55%; /* X der Diagonale am oberen Rand (y=0) */
--diag-angle: 16.86deg; /* FESTER Winkel aus der Vertikalen (= 73,14° aus der Horizontalen) */
--diag-tan: 0.3031; /* tan(16.86°) — für exakten Schnittpunkt der oberen Linie */
--top-y: 130px; /* Y der oberen Horizontale (sitzt unter dem Header) */
--bottom-offset: 50px; /* Abstand der unteren Linie / des Overlays zum Hero-Boden */
position: absolute;
inset: 0 0 var(--bottom-offset) 0; /* unten Platz lassen -> nicht bis ganz unten */
z-index: 2;
pointer-events: none; /* blockiert keine Klicks/Hover */
overflow: hidden; /* clippt die lange Diagonale am Overlay-Rand */
}
.dwe-hero-lines > span {
position: absolute;
background-color: var(--line-color);
}
/* Diagonale: fester Winkel, vom oberen Rand nach unten-links (rotiertes Element) */
.dwe-hero-lines__diagonal {
top: 0;
left: var(--diag-x);
width: var(--line-width);
height: 300vh; /* lang genug; wird vom Overlay-overflow geclippt */
transform-origin: top center;
transform: rotate(var(--diag-angle));
}
/* Obere Horizontale: X-Start exakt auf der Diagonale berechnet -> berühren sich */
.dwe-hero-lines__top {
top: var(--top-y);
left: calc(var(--diag-x) - var(--top-y) * var(--diag-tan));
right: 0;
height: var(--line-width);
}
/* Untere Horizontale: volle Breite, --bottom-offset über dem Hero-Boden */
.dwe-hero-lines__bottom {
bottom: 0;
left: 0;
right: 0;
height: var(--line-width);
}
}
/* Hero als Positions-Kontext (Klasse wird per JS gesetzt) + Headline über den Linien */
.dwe-hero {
position: relative;
}
.dwe-hero > .uk-width-1-1 {
position: relative;
z-index: 3;
}
.uk-section-primary:not(.uk-preserve-color) .uk-text-emphasis {color:#00FFFF !important;}
/* =====================================================================
* OFFCANVAS-MENÜ (#tm-dialog) — Backdrop-Blur + Reveal-Animationen
* Backdrop nach enerblock (menu__back): blur + Abdunklung, fadet ein.
* Aktiv-Klassen werden per JS gesetzt: dwe-menu-ready (Setup vorhanden),
* dwe-menu-open (Menü offen). Liegt auf .
* ===================================================================== */
/* Backdrop hinter dem Panel
.dwe-menu-back {
--menu-back-color: rgba(0, 0, 0, .5);
--menu-back-blur: .75rem;
position: fixed;
inset: 0;
z-index: 999;
background-color: var(--menu-back-color);
opacity: 0;
pointer-events: none;
transition: opacity .6s ease;
}
.dwe-menu-open .dwe-menu-back {
opacity: 1;
-webkit-backdrop-filter: blur(var(--menu-back-blur));
backdrop-filter: blur(var(--menu-back-blur));
}*/
/* (A) Panel: mehr Innen-Padding (Luft zum Rand, wie enerblock) */
.uk-offcanvas-bar {
scrollbar-width: none; /* Firefox: Scrollbar ausblenden (bleibt scrollbar) */
-ms-overflow-style: none; /* alte Edge/IE */
}
/* Chrome/Safari/neue Edge: Scrollbar ausblenden */
.uk-offcanvas-bar::-webkit-scrollbar {
display: none;
}
/* (B) Masken-Reveal: Text steigt aus der abgeschnittenen Zeile hoch.
* Maske = .el-item (overflow hidden), Bewegung = .el-content.
* Nur wenn JS aktiv -> ohne JS bleibt alles sichtbar. */
.dwe-menu-ready #tm-dialog .uk-offcanvas-bar .el-item {
overflow: hidden;
}
.dwe-menu-ready #tm-dialog .uk-offcanvas-bar .el-content {
transform: translateY(105%);
transition: transform .7s cubic-bezier(.53, 0, 0, 1);
transition-delay: 0s; /* beim Schließen kein Delay */
}
/* Logo separat: sanftes Fade + Slide (kann nicht maskiert werden) */
.dwe-menu-ready #tm-dialog .uk-offcanvas-bar div.uk-margin-xlarge-bottom {
opacity: 0;
transform: translateY(1.5rem);
transition: opacity .6s cubic-bezier(.53, 0, 0, 1),
transform .6s cubic-bezier(.53, 0, 0, 1);
transition-delay: 0s;
}
/* Offen: Text fährt hoch, Logo blendet ein */
.dwe-menu-open #tm-dialog .uk-offcanvas-bar .el-content {
transform: none;
}
.dwe-menu-open #tm-dialog .uk-offcanvas-bar div.uk-margin-xlarge-bottom {
opacity: 1;
transform: none;
}
/* Stagger-Delays: Logo -> Hauptmenü -> Footer-Links */
.dwe-menu-open #tm-dialog div.uk-margin-xlarge-bottom { transition-delay: .05s; }
.dwe-menu-open #tm-dialog .uk-list-large .el-item:nth-child(1) .el-content { transition-delay: .14s; }
.dwe-menu-open #tm-dialog .uk-list-large .el-item:nth-child(2) .el-content { transition-delay: .21s; }
.dwe-menu-open #tm-dialog .uk-list-large .el-item:nth-child(3) .el-content { transition-delay: .28s; }
.dwe-menu-open #tm-dialog .uk-list-large .el-item:nth-child(4) .el-content { transition-delay: .35s; }
.dwe-menu-open #tm-dialog .uk-list-large .el-item:nth-child(5) .el-content { transition-delay: .42s; }
.dwe-menu-open #tm-dialog .uk-list-large .el-item:nth-child(6) .el-content { transition-delay: .49s; }
.dwe-menu-open #tm-dialog .uk-list:not(.uk-list-large) .el-item:nth-child(1) .el-content { transition-delay: .56s; }
.dwe-menu-open #tm-dialog .uk-list:not(.uk-list-large) .el-item:nth-child(2) .el-content { transition-delay: .62s; }
/*dwe lines*/
.dwe-lines {}
.dwe-lines .uk-container {/*
border-top: #003349 1px solid;
border-bottom: #003349 1px solid;
padding-top: 50px;
padding-bottom: 50px;
border-left: solid 1px #003349;*/
}
.dwe-lines.uk-section-secondary, .dwe-lines.uk-section-default {
border-bottom: solid 0px #003349;
position: relative;
overflow: hidden; /* clippt die rotierte Diagonale am Sektionsrand */
}
/* Schräge Diagonale (fester Winkel) — nur auf Sektionen mit Klasse .schraegstrich */
.schraegstrich:after {
content: "";
position: absolute;
top: 0;
left: var(--diag-x, 35%); /* X am oberen Rand */
width: 1px;
height: 140%; /* lang genug; overflow clippt */
background-color: #003349;
transform-origin: top center;
transform: rotate(var(--diag-angle, 16.86deg)); /* 73,14° aus der Horizontalen, nach unten-links */
pointer-events: none;
z-index: 1;
}
.dwe-lines.uk-section-secondary:before, .dwe-lines.uk-section-default:before {content: "";
position: absolute;
top: 0;
left: 60px;
width: .5px; height: 100%;
background-color: #003349;
}
.dwe-lines.uk-section-secondary .uk-container:before
{content: "";
position: absolute;
top: 0;
width: 100%;
height: 30px;
border: solid #003349 0px;
}
.dwe-lines.uk-section-default .uk-container:before
{content: "";
position: absolute;
top: 0;
width: 100%;
height: 30px;
border:0px solid #003349;
}
.dwe-lines.uk-section-secondary .uk-container:after
{content: "";
content: "";
position: absolute;
bottom: 0;
width: 100%;
left: 0;
height: 70px;
border: 1px solid #003349;
}
.dwe-lines.uk-section-default .uk-container:after
{content: "";
content: "";
position: absolute;
bottom: 0;
width: 100%;
left: 0;
height: 70px;
border: 1px solid #003349;
}
.dwe-lines .imagerahmen { position:relative; border: solid 1px #003349; padding: 30px 45px;}
.dwe-lines .imagerahmen img { }
/* Hero-Linien V2 — Figma-Layout, Diagonale im Site-Standardwinkel */
.dwe-hero-lines--v2 {
--dwe-hero-gap: 56px; /* Lücke Headline-Box → Intro-Text, Linie sitzt mittig drin */
}
@media (min-width: 1200px) {
.dwe-hero-lines--v2 {
--dwe-hero-gap: 80px; /* = UIkit-Gutter ab l, Desktop bleibt wie bisher */
}
}
.dwe-hero-lines--v2 .dwe-hero-lines {
--diag-x: 58.4%; /* Diagonale mittig durch den Korridor, schneidet den Text nicht */
--top-y: 134px;
--bottom-offset: 0px;
/* Winkel bewusst nicht gesetzt → Site-Standard 16.86°, synchron zu allen Schrägen */
}
.dwe-hero-lines--v2 .dwe-hero-lines__top,
.dwe-hero-lines--v2 .dwe-hero-lines__bottom {
left: 0;
right: 0;
}
/* Intro-Row: Lücke kommt aus --dwe-hero-gap statt aus dem UIkit-Gutter
(der schrumpft unter 1200px von 80px auf 30px — dann lag die Linie im Text) */
.dwe-hero-lines--v2 .uk-grid + .uk-grid-margin {
margin-top: var(--dwe-hero-gap);
}
/* Mittellinie: an die Headline gekoppelt → sitzt auf jedem Screen mittig
zwischen Headline und Intro-Text, kann nie in den Text rutschen */
.dwe-hero-lines--v2 .boxed-heading {
position: relative;
}
.dwe-hero-lines--v2 .boxed-heading::after {
content: "";
position: absolute;
top: calc(100% + var(--dwe-hero-gap) / 2); /* immer exakt halbe Lücke; Regler ist --dwe-hero-gap */
left: -100vw;
right: -100vw; /* volle Breite, Überstand clippt html { overflow-x: clip } */
height: 1px;
background-color: #6fd2e0;
pointer-events: none;
}
/*
.dwe-lines .imagerahmen:before {
content: "";
position: absolute;
width: 45px;
height: 30px;
border: solid 1px black;
left: -1px;
top: -1px;
z-index: 9999;
}
.dwe-lines .imagerahmen:after { content: "";
position: absolute;
width: 45px;
height: 30px;
border: solid 1px black;
left: -1px;
bottom: -1px;
z-index: 9999;}
.dwe-lines .imagerahmen .uk-margin:before {
content: "";
position: absolute;
width: 45px;
height: 30px;
border: solid 1px black;
right: -1px;
top: -1px;
z-index: 9999;
}
.dwe-lines .imagerahmen .uk-margin:after { content: "";
position: absolute;
width: 45px;
height: 30px;
border: solid 1px black;
right: -1px;
bottom: -1px;
z-index: 9999;}
*/
@media (min-width: 959px) {
.dwe-lines .textrahmen {
padding-right: 70px;position: relative;
}
.dwe-lines .textrahmen:before {
content: "";
position: absolute;
top: 0;
left: 70px;
width: 0px; height: 100%;
background-color: #003349;
}
.dwe-lines .textrahmen:after {
content: "";
position: absolute;
top: -160px;
width: .5px;
height: calc(100% + 320px);
background-color: #003349;
right: 0px;
}
/* =====================================================================
* SEKTION .dwe-lines2 — CYAN LINIEN-OVERLAY
* Diagonale + obere/mittlere/untere Horizontale + orange Schnittpunkt-
* Marker. Overlay (.dwe-l2) wird per JS injiziert. Maße als Variablen.
* ===================================================================== */
.dwe-lines2 { position: relative; }
.dwe-lines2 .uk-container { position: relative; z-index: 2; } /* Inhalt über den Linien */
.dwe-l2 {
--line: #6fd2e0; /* cyan */
--accent: #e8552a; /* orange Marker */
--w: 1px;
--diag-x: 54%; /* X der Diagonale am oberen Rand */
--diag-angle: 16.86deg; /* 73,14° aus der Horizontalen (läuft nach unten-links) */
--diag-tan: 0.3031; /* tan(16.86°) — für die Marker-X-Position */
--h-top: 8px; /* Y der oberen Horizontale */
--h-mid: 290px; /* Y der mittleren Horizontale (unter der Headline) */
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden; /* clippt die rotierte Diagonale */
}
.dwe-l2 span { position: absolute; }
/* Horizontale (volle Breite) */
.dwe-l2__h { left: 0; right: 0; height: var(--w); background-color: var(--line); }
.dwe-l2__h--top { top: var(--h-top); }
.dwe-l2__h--mid { top: var(--h-mid); }
.dwe-l2__h--bot { bottom: 0; }
/* Diagonale (fester Winkel) */
.dwe-l2__diag {
top: 0;
left: var(--diag-x);
width: var(--w);
height: 220%; /* lang genug; overflow clippt */
background-color: var(--line);
transform-origin: top center;
transform: rotate(var(--diag-angle));
}
/* Orange Marker an den Schnittpunkten Diagonale × Horizontale (kleine Rauten) */
.dwe-l2__tick {
width: 9px;
height: 9px;
background-color: var(--accent);
transform: translate(-50%, -50%) rotate(45deg);
}
.dwe-l2__tick--top { top: var(--h-top); left: calc(var(--diag-x) - var(--h-top) * var(--diag-tan)); }
.dwe-l2__tick--mid { top: var(--h-mid); left: calc(var(--diag-x) - var(--h-mid) * var(--diag-tan)); }
}
/* Lines 3 */
/* Lines 3 */
@media (min-width: 959px) {
/* ===== Kernkompetenz: Linien-System dwe-lines3 v8 — responsive ===== */
.dwe-lines3 {
position: relative;
overflow: hidden;
--l: #6fd2e0;
--v3-gap: 81px; /* Abstand V3 zur rechten Bildkante */
--sep-up: 63px; /* Trenner: Abstand über der unteren Row */
--row-gap: 140px; /* margin-bottom der oberen Row */
--bottom-gap: 78px; /* Luft unter der Abschlusslinie */
--img-off: 80px; /* Gutter: Bild-Einzug in der Spalte */
--v4-right: 0px; /* V4: Abstand zur rechten Contentkante */
--diag-right: 143px; /* Diagonale: Abstand zur rechten Contentkante */
--bleed: 3000px; /* Überhang über die Viewportkante */
--dwe-edge: 40px; /* Mindest-Seitenrand unterhalb Container-Maxbreite */
--dwe-l3-text-pad: 40px; /* Luft um den Textblock oben rechts, alle 4 Seiten */
}
.dwe-lines3 .uk-container { position: relative; z-index: 2; }
/* Seitenrand: tm-grid-expand frisst das Container-Padding —
Rand deshalb auf der Sektion, greift erst wenn der Container anstößt */
@media (min-width: 960px) {
.dwe-lines3 {
padding-left: var(--dwe-edge);
padding-right: var(--dwe-edge);
}
}
/* Abschlusslinie */
.dwe-lines3::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(var(--l), var(--l)) no-repeat 0 calc(100% - var(--bottom-gap)) / 100% 1px;
}
/* ---- Bildbox: schrumpft auf die echte Bildbreite ---- */
.dwe-lines3 .dwe-l3-row-top .uk-first-column > .uk-margin {
position: relative;
width: max-content;
max-width: 100%;
}
/* Top-Linie: auf Bild-Oberkante, viewportbreit */
.dwe-lines3 .dwe-l3-row-top .uk-first-column > .uk-margin::before {
content: "";
position: absolute;
top: 0;
left: calc(-1 * var(--bleed));
width: calc(var(--bleed) * 3);
height: 1px;
background: var(--l);
pointer-events: none;
z-index: 3;
}
/* Bild-Linie: bündig unterm Foto, bis exakt V3 */
.dwe-lines3 .dwe-l3-row-top .uk-first-column > .uk-margin::after {
content: "";
position: absolute;
top: 100%;
left: calc(-1 * var(--bleed));
width: calc(var(--bleed) + 100% + var(--v3-gap) + 1px);
height: 1px;
background: var(--l);
pointer-events: none;
z-index: 3;
}
/* ---- V1–V3: an der Bildspalte, misst sich selbst ---- */
.dwe-lines3 .dwe-l3-row-top .uk-first-column { position: relative; }
.dwe-lines3 .dwe-l3-row-top .uk-first-column::before {
content: "";
position: absolute;
pointer-events: none;
z-index: -1;
left: 0;
right: calc(-1 * var(--v3-gap));
top: 0;
height: calc(100% + var(--row-gap) - var(--sep-up));
background-image:
linear-gradient(var(--l), var(--l)),
linear-gradient(var(--l), var(--l)),
linear-gradient(var(--l), var(--l));
background-repeat: no-repeat;
background-size: 1px 100%, 1px 100%, 1px 100%;
background-position:
left var(--img-off) top 0,
right var(--v3-gap) top 0,
right 0 top 0;
}
}
/* ---- Textblock oben rechts: Luft zu Top-Linie, V3 und V4 ----
padding-left muss --v3-gap mitrechnen, sonst startet der Text ab 1200px
links von V3. Gilt ab 960 durchgehend, sonst Sprung an der 1200er-Kante. */
@media (min-width: 960px) {
.dwe-lines3 .dwe-l3-row-top .uk-grid-item-match {
padding-left: calc(var(--v3-gap) + var(--dwe-l3-text-pad));
}
.dwe-lines3 .dwe-l3-row-top .uk-grid-item-match > .uk-panel {
padding: var(--dwe-l3-text-pad) var(--dwe-l3-text-pad) var(--dwe-l3-text-pad) 0;
}
}
/* ---- Trenner + V4 ---- */
.dwe-lines3 .dwe-l3-row { position: relative; }
.dwe-lines3 .dwe-l3-row::before {
content: "";
position: absolute;
left: calc(-1 * var(--bleed));
width: calc(var(--bleed) * 2 + 100%);
top: calc(-1 * var(--sep-up) - 150vh);
height: calc(150vh + 1px);
pointer-events: none;
z-index: -1;
background-image:
linear-gradient(var(--l), var(--l)),
linear-gradient(var(--l), var(--l));
background-repeat: no-repeat;
background-size: 100% 1px, 1px 100%;
background-position:
left 0 bottom 0,
right calc(var(--bleed) + var(--v4-right)) top 0;
}
/* ---- Diagonale ---- */
.dwe-lines3 .dwe-l3-row::after {
content: "";
position: absolute;
top: calc(-1 * var(--sep-up));
right: var(--diag-right);
width: 1px;
height: 150vh;
background: var(--l);
transform-origin: center top;
transform: rotate(var(--diag-angle, 16.86deg));
pointer-events: none;
z-index: -1;
}
/* UIkit-Gutter wird bei 1200 kleiner */
@media (max-width: 1200px) {
.dwe-lines3 { --img-off: 30px; }
}
/* iPad Portrait + schmales Desktop-Fenster (960–1199):
Row schrumpft auf ~939px, Bildspalte auf ~313px, Bild auf ~283px.
V3 mit 81px Gap lag tief in der Textspalte, die Bild-Linie stach
über die Bildkante hinaus — beide auf die Spaltenkante zurückgeholt. */
@media (min-width: 960px) and (max-width: 1199px) {
.dwe-lines3 {
--dwe-edge: 32px;
--v3-gap: 0px;
--v4-right: 0px;
--diag-right: 64px;
--bottom-gap: 56px;
--img-off: 30px;
/* .uk-margin-xlarge-bottom ist hier 70px statt 140px —
sonst laufen V1–V3 exakt 70px über den Trenner hinaus */
--row-gap: 70px;
}
/* Bild-Linie endet bündig am Bild, kein 81px-Überhang in den Text */
.dwe-lines3 .dwe-l3-row-top .uk-first-column > .uk-margin::after {
width: calc(var(--bleed) + 100% + 1px);
}
}
/* ===== Schmales Fenster / Tablet Portrait: Linien einfangen ===== */
@media (max-width: 1023px) {
.dwe-lines3 {
/* V3 sitzt exakt auf der Spaltenkante, kein Überhang in den Text */
--v3-gap: 0px;
/* V4 an die Contentkante statt darüber hinaus */
--v4-right: 0px;
--diag-right: 80px;
}
/* Bild-Linie endet an der Spaltenkante, nicht 81px dahinter */
.dwe-lines3 .dwe-l3-row-top .uk-first-column > .uk-margin::after {
width: calc(var(--bleed) + 100% + 1px);
}
}
/* ===== Gestapeltes Grid (<960): nur Top-, Bild- und Abschlusslinie ===== */
@media (max-width: 959px) {
/* .dwe-lines3 {
--dwe-edge: 24px;
--bottom-gap: 40px;
--top-gap: 88px;
--line-gap: 40px;
padding-left: var(--dwe-edge);
padding-right: var(--dwe-edge);
padding-top: calc(var(--top-gap) + var(--line-gap));
}
.dwe-lines3 .dwe-l3-row::before,
.dwe-lines3 .dwe-l3-row::after,
.dwe-lines3 .dwe-l3-row-top .uk-first-column::before { display: none; }
.dwe-lines3 .dwe-l3-row-top > * { padding-left: 0; }
.dwe-lines3 .dwe-l3-row-top .uk-first-column > .uk-margin,
.dwe-lines3 .dwe-l3-row-top .uk-first-column > .uk-margin > picture {
width: auto;
}
.dwe-lines3 .dwe-l3-row-top .uk-first-column > .uk-margin {
padding-top: var(--line-gap);
}
.dwe-lines3 .dwe-l3-row-top .uk-first-column > .uk-margin::before {
top: 0;
left: calc(-1 * var(--bleed));
width: calc(var(--bleed) * 2 + 100%);
}
.dwe-lines3 .dwe-l3-row-top .uk-first-column > .uk-margin::after {
left: calc(-1 * var(--bleed));
width: calc(var(--bleed) + 100%);
}
.dwe-lines3 .dwe-l3-row-top > * + * { margin-top: 48px; }
.dwe-lines3 .dwe-l3-row { padding-bottom: 24px; }
*/
}
@media (max-width: 639px) {
.dwe-lines3 {
}
}
/* DWE LINES 4 */
/* ===== Section 2: Linien-System dwe-lines4 ===== */
.dwe-lines4 {
position: relative;
overflow: hidden;
--l: #1b3a52; /* Linienfarbe dunkel */
--img-off: 80px; /* Gutter: Bild-Einzug in der Spalte */
--bleed: 3000px; /* Überhang über die Viewportkante */
}
.dwe-lines4 .uk-container { position: relative; z-index: 2; }
/* Bildbox schrumpft auf die echte Bildbreite */
.dwe-lines4 .dwe-l4-row > .uk-width-2-5\@m > .uk-margin {
position: relative;
width: max-content;
max-width: 100%;
}
/* Top-Linie: auf Bild-Oberkante, von V1 bis rechte Viewportkante */
.dwe-lines4 .dwe-l4-row > .uk-width-2-5\@m > .uk-margin::before {
content: "";
position: absolute;
top: 0;
left: calc(-1 * var(--img-off));
width: calc(var(--img-off) + 100% + var(--bleed));
height: 1px;
background: var(--l);
pointer-events: none;
z-index: 3;
}
/* Bottom-Linie: auf Bild-Unterkante */
.dwe-lines4 .dwe-l4-row > .uk-width-2-5\@m > .uk-margin::after {
content: "";
position: absolute;
top: 100%;
left: calc(-1 * var(--img-off));
width: calc(var(--img-off) + 100% + var(--bleed));
height: 1px;
background: var(--l);
pointer-events: none;
z-index: 3;
}
/* V1 + V2 + V3: an der Bildspalte, volle Sectionhöhe */
.dwe-lines4 .dwe-l4-row > .uk-width-2-5\@m { position: relative; }
.dwe-lines4 .dwe-l4-row > .uk-width-2-5\@m::before {
content: "";
position: absolute;
pointer-events: none;
z-index: 0;
left: 0;
right: 0;
top: -150vh;
height: 300vh;
background-image:
linear-gradient(var(--l), var(--l)),
linear-gradient(var(--l), var(--l)),
linear-gradient(var(--l), var(--l));
background-repeat: no-repeat;
background-size: 1px 100%, 1px 100%, 1px 100%;
background-position:
left 0 top 0,
left var(--img-off) top 0,
right 0 top 0;
}
/* UIkit-Gutter wird bei 1200 kleiner */
@media (max-width: 1200px) {
.dwe-lines4 { --img-off: 30px; }
}
/* Gestapeltes Grid: Vertikale raus */
@media (max-width: 959px) {
.dwe-lines4 .dwe-l4-row > .uk-width-2-5\@m::before { display: none; }
.dwe-lines4 .dwe-l4-row > .uk-width-2-5\@m > .uk-margin { width: auto; }
}
/* dwe-lines 5 */
/* =====================================================================
* HERO: Linien-System dwe-lines5
* Obere Horizontale + mittlere Horizontale (mittig zwischen Headline
* und Text) + Diagonale um die Section-Mitte. Rein per Klassen.
*
* Einbau im Builder:
* Section → Erweitert → CSS-Klasse: dwe-lines5
* Text-Row → Erweitert → CSS-Klasse: dwe-l5-row
* Optional Cyan-Text: Section zusätzlich dwe-hero-cyan
* ===================================================================== */
.dwe-lines5 {
position: relative;
overflow: hidden;
--l: #6fd2e0; /* Linienfarbe */
--line-width: 1px;
--diag-x: 55%; /* X der Diagonalen-Mitte */
--diag-angle: 16.86deg; /* Site-Standardwinkel */
--top-y: 21.7%; /* Y der oberen Linie */
--row-gap: 120px; /* Abstand Headline ↔ Text, Linie sitzt mittig drin */
--bleed: 3000px; /* Überhang über die Viewportkante */
}
/* Obere Linie, volle Breite */
.dwe-lines5::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(var(--l), var(--l)) no-repeat left 0 top var(--top-y) / 100% var(--line-width);
}
/* Diagonale: dreht um die Section-Mitte — immer zentriert, läuft immer voll durch */
.dwe-lines5::after {
content: "";
position: absolute;
z-index: 2;
pointer-events: none;
top: 50%;
left: var(--diag-x);
width: var(--line-width);
height: 300vh;
background: var(--l);
transform: translate(-50%, -50%) rotate(var(--diag-angle));
}
/* Text-Row: Margin selbst gesetzt — Puffer unter eigener Kontrolle */
.dwe-lines5 .dwe-l5-row {
position: relative;
margin-top: var(--row-gap) !important;
}
/* Mittlere Linie: exakt mittig zwischen Headline und Text */
.dwe-lines5 .dwe-l5-row::before {
content: "";
position: absolute;
z-index: 2;
pointer-events: none;
left: calc(-1 * var(--bleed));
width: calc(var(--bleed) * 2 + 100%);
top: calc(-0.5 * var(--row-gap));
height: var(--line-width);
background: var(--l);
}
/* Kleinere Screens: weniger Abstand, Puffer bleibt 40px pro Seite */
@media (max-width: 1199px) {
.dwe-lines5 { --row-gap: 80px; }
}
/* ---- Variante: Cyan-Text (Headline + Text) ---- */
.dwe-hero-cyan {
--hero-cyan: #81fbfd;
}
.dwe-hero-cyan h1,
.dwe-hero-cyan h1.uk-text-emphasis,
.dwe-hero-cyan .uk-panel,
.dwe-hero-cyan .uk-panel.uk-text-emphasis {
color: var(--hero-cyan) !important; /* Fallback für alte Browser */
color: color(display-p3 0.506 0.984 0.992) !important; /* = #81fbfd im P3-Raum, wie in Figma */
}
/* Mobile: Diagonale ausblenden */
@media (max-width: 959px) {
.dwe-lines5::after { display: none; }
}
/* Mobile: obere Linie ausblenden */
@media (max-width: 639px) {
.dwe-lines5::before {
display: none;
}
}
/* Her0 4 lines */
/* ===== Hero-4-Linien — Klasse an die Section, kein HTML-Element nötig ===== */
.hero4-lines {
position: relative;
overflow: hidden;
--line-color: #6fd2e0;
--line-width: 1px;
--diag-x: 79.7%; /* X-Anker der Diagonale an der Oberkante */
--diag-angle: 16.86deg; /* Winkel aus dem Entwurf (steiler als Site-Standard) */
--top-y: 0px; /* obere Linie exakt auf Oberkante */
--bottom-offset: 0px; /* untere Linie exakt auf Unterkante */
}
/* Obere + untere Horizontale (beide volle Breite) */
.hero4-lines::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background-image:
linear-gradient(var(--line-color), var(--line-color)),
linear-gradient(var(--line-color), var(--line-color));
background-repeat: no-repeat;
background-size: 100% var(--line-width), 100% var(--line-width);
background-position:
left 0 top var(--top-y),
left 0 bottom var(--bottom-offset);
}
/* Diagonale */
@media (min-width: 960px) {
.hero4-lines::after {
content: "";
position: absolute;
z-index: 2;
pointer-events: none;
top: 0;
left: var(--diag-x);
width: var(--line-width);
height: 300vh;
background: var(--line-color);
transform-origin: center top;
transform: rotate(var(--diag-angle));
}
}
/*. Hero 5 Lines */
/* ===== Hero-5-Linien (Engineering & Konstruktion) — Klasse an die Section ===== */
.hero5-lines {
position: relative;
overflow: hidden;
--line-color: #6fd2e0;
--line-width: 1px;
--diag-x: 53.8%; /* X-Anker der Diagonale an der Oberkante */
--diag-angle: 16.86deg; /* Site-Standardwinkel (Entwurf: 17.35° ≈ Rundung) */
--top-y: 80px; /* obere Linie, eingerückt von der Oberkante */
--bottom-offset: 70px; /* untere Linie, eingerückt von der Unterkante */
}
/* Obere + untere Horizontale (beide volle Breite) */
.hero5-lines::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background-image:
linear-gradient(var(--line-color), var(--line-color)),
linear-gradient(var(--line-color), var(--line-color));
background-repeat: no-repeat;
background-size: 100% var(--line-width), 100% var(--line-width);
background-position:
left 0 top var(--top-y),
left 0 bottom var(--bottom-offset);
}
/* Diagonale — läuft durch die volle Sektionshöhe */
.hero5-lines::after {
content: "";
position: absolute;
z-index: 2;
pointer-events: none;
top: 0;
left: var(--diag-x);
width: var(--line-width);
height: 300vh;
background: var(--line-color);
transform-origin: center top;
transform: rotate(var(--diag-angle));
}
/* Linien auf Mobile ausblenden */
@media (max-width: 959px) {
.hero5-lines::before,
.hero5-lines::after {
display: none;
}
}
/* Grid Lines */
/* ===== Highlights-Raster — Klasse ans GRID-ELEMENT (nicht an die Section!) ===== */
.dwe-grid-lines {
--line-color: #6fd2e0;
--line-width: 1px;
--cell-pad-top: 85px; /* Luft über der Zell-Headline */
--cell-pad-bottom: 75px; /* Luft unterm Text */
--cell-pad-x: 55px; /* Luft links/rechts in der Zelle */
--title-gap: 115px; /* Abstand Headline → Text */
}
/* Gutter aus + Außenrahmen oben/links */
.dwe-grid-lines.uk-grid,
.dwe-grid-lines > .uk-grid {
margin-left: 0;
border: 0 solid var(--line-color);
border-top-width: var(--line-width);
border-left-width: var(--line-width);
}
/* Zellen: Rahmen rechts/unten -> innere Trenner + restlicher Außenrahmen */
.dwe-grid-lines.uk-grid > *,
.dwe-grid-lines > .uk-grid > * {
padding-left: 0;
margin-top: 0;
border: 0 solid var(--line-color);
border-right-width: var(--line-width);
border-bottom-width: var(--line-width);
}
/* Innenabstände der Zellen (ersetzt den Gutter) */
.dwe-grid-lines .el-item {
padding: var(--cell-pad-top) var(--cell-pad-x) var(--cell-pad-bottom);
}
/* Abstand Headline -> Fließtext */
.dwe-grid-lines .el-item .el-content {
margin-top: var(--title-gap);
}
/* Zell-Fließtext im Leucht-Cyan der Headline (exakt: #82FBFD) */
.dwe-grid-lines .el-item .el-content,
.dwe-grid-lines .el-item .el-content p {
color: #82fbfd;
opacity: 1;
}
/* Gallery Lines */
/* ===== Referenzen-Linien — Section + Rows ===== */
.dwe-ref-lines {
position: relative;
overflow: hidden;
--line-color: #153247;
--line-width: 1px;
--gap-half: 40px; /* halber Reihenabstand (Rows haben real 80px Gap) */
--h-inset: 0px; /* Einzug der Horizontalen vom Rand */
--gutter: 80px; /* echter Grid-Gutter der Rows */
--text-w: 300px; /* Breite des Textblocks (uk-width-medium) */
--v-out: 60px; /* wie weit die äußeren Vertikalen rausrücken */
}
.dwe-ref-lines .dwe-ref-row,
.dwe-ref-lines .uk-container { position: relative; }
/* Horizontale über jeder Reihe */
.dwe-ref-lines .dwe-ref-row::before {
content: "";
position: absolute;
z-index: 2;
pointer-events: none;
top: calc(-1 * var(--gap-half));
left: calc(50% + var(--gutter) / 2);
transform: translateX(-50%);
width: calc(100vw - 2 * var(--h-inset));
height: var(--line-width);
background: var(--line-color);
}
/* Abschlusslinie unter der letzten Reihe */
.dwe-ref-lines .uk-container::after {
content: "";
position: absolute;
z-index: 2;
pointer-events: none;
bottom: calc(-1 * var(--gap-half));
left: 50%;
transform: translateX(-50%);
width: calc(100vw - 2 * var(--h-inset));
height: var(--line-width);
background: var(--line-color);
}
/* Drei Vertikale — je Reihe ein Segment, Segmente ketten sich nahtlos.
Links: Textkante minus v-out. Mitte: mittig zwischen Text und Bildern.
Rechts: Containerkante plus v-out. */
.dwe-ref-lines .dwe-ref-row::after {
content: "";
position: absolute;
z-index: 2;
pointer-events: none;
top: calc(-1 * var(--gap-half));
bottom: calc(-2 * var(--gap-half)); /* überlappt in die nächste Reihe */
left: calc(-1 * var(--v-out));
right: calc(-1 * var(--v-out));
background-image:
linear-gradient(var(--line-color), var(--line-color)),
linear-gradient(var(--line-color), var(--line-color)),
linear-gradient(var(--line-color), var(--line-color));
background-repeat: no-repeat;
background-size:
var(--line-width) 100%,
var(--line-width) 100%,
var(--line-width) 100%;
background-position:
left calc(20% + var(--gutter) / 2 - var(--text-w) / 2 - var(--v-out) * 0.4) top 0,
left calc(30% + var(--gutter) * 0.75 + var(--text-w) / 4 + var(--v-out) * 0.4) top 0,
right 0 top 0;
}
/* Letzte Reihe: Vertikale enden exakt auf der Abschlusslinie */
.dwe-ref-lines .dwe-ref-row--last::after {
bottom: calc(-1 * var(--gap-half));
}
/* ===== iPad / Tablet (960–1199px): Bilder rücken hinter die Mittellinie ===== */
@media (min-width: 960px) and (max-width: 1199px) {
/* Bilder-Spalte einrücken, damit sie rechts der Mittel-Vertikalen beginnt */
.dwe-ref-lines .dwe-ref-row > .uk-width-3-5\@m {
padding-left: 90px;
}
/* Bildpaare enger zusammen */
.dwe-ref-lines .dwe-referenzen-slider--left .uk-slider-items,
.dwe-ref-lines .dwe-referenzen-slider--right .uk-slider-items {
margin-left: -20px;
}
.dwe-ref-lines .dwe-referenzen-slider--left .uk-slider-items > *,
.dwe-ref-lines .dwe-referenzen-slider--right .uk-slider-items > * {
padding-left: 20px;
}
/* Bilder kleiner, damit nichts auf den Linien liegt */
.dwe-ref-lines .dwe-referenzen-slider--left .el-image,
.dwe-ref-lines .dwe-referenzen-slider--right .el-image {
max-width: 120px;
}
}
/* ===== Mobile (bis 959px): Pfeile raus aus dem Bild ===== */
@media (max-width: 959px) {
/* Bild schmaler, damit links/rechts Platz für die Pfeile bleibt */
.dwe-ref-lines .dwe-referenzen-slider--left .el-image,
.dwe-ref-lines .dwe-referenzen-slider--right .el-image {
max-width: calc(100% - 130px);
margin-inline: auto;
}
/* Pfeile an den Außenrand */
.dwe-ref-lines .uk-position-center-left.uk-position-small { left: 4px !important; }
.dwe-ref-lines .uk-position-center-right.uk-position-small { right: 4px !important; }
/* Größere Klickfläche + besser sichtbar */
.dwe-ref-lines .uk-slidenav {
padding: 6px 10px;
}
.dwe-ref-lines .uk-slidenav svg {
width: 18px;
height: 30px;
}
/* Vertikale Linien aus */
.dwe-ref-lines .dwe-ref-row::after { display: none; }
/* Abstand zwischen Slidern und Text */
.dwe-referenzen-slider--left,
.dwe-referenzen-slider--right {
margin-bottom: 60px !important;
}
}
/* Referenz-Linien mobil ausblenden */
@media (max-width: 639px) {
.dwe-ref-lines .dwe-ref-row::before,
.dwe-ref-lines .uk-container::after {
display: none;
}
}
/* Referenzen: Slider */
.dwe-referenzen-slider--right .uk-slider-items.uk-grid {
justify-content: end;
}
.dwe-referenzen-slider--left .uk-slider-items.uk-grid {
justify-content: start;
}
/* Abstände zwischen Slidern und Text auf mobile erhöhen */
@media (max-width: 959px ) {
.dwe-referenzen-slider--left, .dwe-referenzen-slider--right {
margin-bottom: 60px !important;
}
}
/* Zeitstrahl */
/* ===== Historie-Timeline-Slider =====
Klassen: dwe-timeline am Panel-Slider-Element, dwe-timeline-section an der Section */
/* --- Section: Rahmenlinien --- */
.dwe-timeline-section {
position: relative;
overflow: hidden;
--edge-inset: 70px; /* Abstand Rahmen-Vertikale/Band-Ende vom Rand */
--f-color: #153247;
--f-top: 70px; /* obere Horizontale = Padding-Grenze der Section */
--f-bottom2: 40px; /* Höhe des unteren Linien-Kastens */
border-top: solid 1px #153247;
}
.dwe-timeline-section::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background-image:
linear-gradient(var(--f-color), var(--f-color)),
linear-gradient(var(--f-color), var(--f-color)),
linear-gradient(var(--f-color), var(--f-color)),
linear-gradient(var(--f-color), var(--f-color)),
linear-gradient(var(--f-color), var(--f-color));
background-repeat: no-repeat;
background-size: 100% 1px, 100% 1px, 100% 1px, 1px 100%, 1px 100%;
background-position:
left 0 top var(--f-top),
left 0 bottom var(--f-bottom2),
left 0 bottom 0,
left var(--edge-inset) top 0,
right var(--edge-inset) top 0;
}
/* --- Slider-Grundmaße --- */
.dwe-timeline {
position: relative;
--slide-h: 780px;
--band-center: calc(var(--slide-h) / 2);
--band-h: 145px;
--band-color: rgba(21, 50, 71, 0.85);
--seam-color: #6fd2e0;
--year-color: #82fbfd;
--text-shift: 60px; /* seitlicher Einzug von Jahr + Text im eigenen Slide */
--text-size: 21px;
}
/* Durchlaufendes Doppel-Band — endet an den Rahmen-Vertikalen */
.dwe-timeline::before {
content: "";
position: absolute;
z-index: 0;
pointer-events: none;
top: calc(var(--band-center) - var(--band-h));
height: calc(2 * var(--band-h));
left: 50%;
transform: translateX(-50%);
width: calc(100vw - 2 * var(--edge-inset, 70px));
background: var(--band-color);
}
/* Cyan-Naht in der Bandmitte */
.dwe-timeline::after {
content: "";
position: absolute;
z-index: 0;
pointer-events: none;
top: var(--band-center);
left: 50%;
transform: translateX(-50%);
width: calc(100vw - 2 * var(--edge-inset, 70px));
height: 1px;
background: var(--seam-color);
}
/* Slides über dem Band — Bilder liegen dadurch ungetönt VOR den blauen Balken */
.dwe-timeline .uk-slider-items > * { position: relative; z-index: 1; }
.dwe-timeline .el-item { position: relative; height: var(--slide-h); }
/* Bilder: volle Slide-Breite, halbe Höhe, enden/beginnen an der Naht */
.dwe-timeline .el-item .el-image {
position: absolute;
left: 0;
width: 100%;
height: var(--band-center);
object-fit: cover;
}
.dwe-timeline .uk-slider-items > :nth-child(odd) .el-image {
top: 0;
border-bottom: 1px solid var(--seam-color);
}
.dwe-timeline .uk-slider-items > :nth-child(even) .el-image {
top: var(--band-center);
border-top: 1px solid var(--seam-color);
}
/* Jahreszahl: im Bandstreifen — bleibt im eigenen Slide, gegenüber vom Bild.
So laufen die Jahre chronologisch von links nach rechts. */
.dwe-timeline .el-item .el-title {
position: absolute;
margin: 0 !important;
left: var(--text-shift);
width: calc(100% - 2 * var(--text-shift));
height: var(--band-h);
display: flex;
align-items: center;
color: var(--year-color);
font-size: 36px;
}
/* Bild oben -> Jahr im unteren Streifen */
.dwe-timeline .uk-slider-items > :nth-child(odd) .el-title {
top: var(--band-center);
}
/* Bild unten -> Jahr im oberen Streifen */
.dwe-timeline .uk-slider-items > :nth-child(even) .el-title {
top: calc(var(--band-center) - var(--band-h));
}
/* Text: im eigenen Slide unter/über dem Jahr — spannt seine Zone voll auf */
.dwe-timeline .el-item .el-content {
position: absolute;
margin: 0 !important;
left: var(--text-shift);
width: calc(100% - 2 * var(--text-shift));
font-size: var(--text-size);
line-height: 1.6;
overflow-wrap: break-word;
-webkit-hyphens: auto;
hyphens: auto;
height: calc(var(--band-center) - var(--band-h));
display: flex;
align-items: safe center;
overflow: hidden;
}
.dwe-timeline .uk-slider-items > :nth-child(odd) .el-content { bottom: 0; }
.dwe-timeline .uk-slider-items > :nth-child(even) .el-content { top: 0; }
/* Pfeile: DWE-Stil — kurzer Stiel, dicker Strich */
.dwe-timeline [class*="uk-position-center-left"],
.dwe-timeline [class*="uk-position-center-right"] {
display: block !important;
top: var(--band-center);
bottom: auto;
transform: translateY(-50%);
opacity: 1;
margin: 0;
}
.dwe-timeline [class*="uk-position-center-left"] {
left: calc(50% - 50vw + var(--nav-inset, 12px));
right: auto;
}
.dwe-timeline [class*="uk-position-center-right"] {
right: calc(50% - 50vw + var(--nav-inset, 12px));
left: auto;
}
.dwe-timeline .uk-slidenav {
color: #153247;
padding: 0;
width: 40px;
height: 24px;
position: relative;
}
.dwe-timeline .uk-slidenav svg { display: none; }
.dwe-timeline .uk-slidenav::before {
content: "";
position: absolute;
left: 2px;
right: 2px;
top: 50%;
height: 4px;
background: currentColor;
transform: translateY(-50%);
}
.dwe-timeline .uk-slidenav::after {
content: "";
position: absolute;
top: 50%;
width: 14px;
height: 14px;
border-top: 4px solid currentColor;
border-right: 4px solid currentColor;
background: none;
}
.dwe-timeline .uk-slidenav-next::after {
right: 2px;
transform: translateY(-50%) rotate(45deg);
}
.dwe-timeline .uk-slidenav-previous::after {
left: 2px;
transform: translateY(-50%) rotate(-135deg);
}
/* Dotnav als Striche */
.dwe-timeline .uk-dotnav > * > * {
width: 34px;
height: 3px;
border-radius: 0;
background: rgba(21, 50, 71, 0.25);
}
.dwe-timeline .uk-dotnav > .uk-active > * { background: #153247; }
/* ===== Schmale Desktops: 3 statt 4 Slides — Textspalten bleiben breit und lesbar ===== */
@media (max-width: 1399px) {
.dwe-timeline { --text-shift: 30px; }
.dwe-timeline .uk-slider-items > * { width: 33.3333% !important; }
}
/* ===== Mobil: Karte spannt exakt von Vertikale zu Vertikale, Pfeile mittig im Linien-Kasten ===== */
@media (max-width: 959px) {
.dwe-timeline { --text-size: 17px; }
.dwe-timeline-section { --f-top: 40px; --edge-inset: 20px; }
/* Band und Naht aus — Rahmen bleibt komplett */
.dwe-timeline::before,
.dwe-timeline::after { display: none; }
/* Content bündig an die Rahmen-Vertikalen */
.dwe-timeline-section .uk-container {
padding-left: var(--edge-inset);
padding-right: var(--edge-inset);
}
/* Karte exakt von Linie zu Linie — kein Peek mehr */
.dwe-timeline .uk-slider-items > * { width: 100% !important; }
/* Harter Reset für Jahr + Text — schlägt die Desktop-odd/even-Regeln.
Nur Geometrie! Optik (padding, text-align) kommt weiter unten. */
.dwe-timeline .uk-slider-items > :nth-child(odd) .el-title,
.dwe-timeline .uk-slider-items > :nth-child(even) .el-title,
.dwe-timeline .uk-slider-items > :nth-child(odd) .el-content,
.dwe-timeline .uk-slider-items > :nth-child(even) .el-content {
position: static;
left: auto;
right: auto;
top: auto;
bottom: auto;
width: auto;
}
/* Karte im normalen Fluss */
.dwe-timeline .el-item { height: auto; }
.dwe-timeline .el-item .el-image {
position: static;
display: block;
width: 100%;
height: 320px;
border: 0 !important;
}
.dwe-timeline .el-item .el-title {
display: block;
height: auto;
background: #153247;
color: var(--year-color);
font-size: 26px;
padding: 14px 18px;
border-bottom: 2px solid var(--seam-color);
}
.dwe-timeline .el-item .el-content {
display: block;
height: auto;
overflow: visible;
padding: 16px 18px 0;
text-align: center;
}
/* Pfeile: an der Section verankert -> mittig im unteren Linien-Kasten */
.dwe-timeline.uk-slider { position: static; }
.dwe-timeline > .uk-position-relative { position: static !important; }
.dwe-timeline [class*="uk-position-center-left"],
.dwe-timeline [class*="uk-position-center-right"] {
top: auto;
bottom: calc(var(--f-bottom2) / 2 - 2px);
transform: translateY(50%);
}
.dwe-timeline [class*="uk-position-center-left"] { left: calc(50% - 46px); right: auto; }
.dwe-timeline [class*="uk-position-center-right"] { left: calc(50% + 10px); right: auto; }
.dwe-timeline .uk-slidenav { width: 36px; height: 20px; }
.dwe-timeline .uk-slidenav::before { height: 3px; }
.dwe-timeline .uk-slidenav::after {
width: 11px;
height: 11px;
border-top-width: 3px;
border-right-width: 3px;
}
}
/* =====================================================================
* BILD-AUFZIEH-EFFEKT (.dwe-img-reveal) — SELBSTSTÄNDIG, MIT RAHMEN
* EINE Klasse zeichnet den Rahmen (Box + Gap ums Bild) UND den scroll-
* gescrubbten clip-path-Reveal. Die Aufzieh-Linien liegen als Overlay
* INNERHALB des Rahmens und laufen von den Bildkanten bis an den Rahmen
* — und nie darüber hinaus.
* Richtung IMMER per Modifier setzen (ohne Modifier = Default from-left):
* .dwe-img-reveal--from-left Anker oben-links, öffnet nach rechts/unten
* .dwe-img-reveal--from-right Anker oben-rechts, öffnet nach links/unten
* --reveal (0..1) wird per GSAP gesetzt (siehe initImageReveal in
* dwe-animations.js). Default 1 = voll sichtbar (Fallback ohne JS /
* prefers-reduced-motion). Klasse auf den BILD-WRAPPER (direktes Kind = ![]()
).
* ===================================================================== */
.dwe-img-reveal {
--reveal: 1;
--reveal-min: 28%; /* Startgröße des Bildausschnitts */
--line-color: #003349;
--frame-gap-y: 30px; /* Abstand Rahmen <-> Bild (oben/unten) */
--frame-gap-x: 45px; /* Abstand Rahmen <-> Bild (links/rechts) */
--inset: calc((100% - var(--reveal-min)) * (1 - var(--reveal)));
position: relative;
box-sizing: border-box;
width: fit-content; /* Rahmen hugt Bild + Gap */
max-width: 100%;
border: 1px solid var(--line-color);
padding: var(--frame-gap-y) var(--frame-gap-x);
}
.dwe-img-reveal > img {
display: block;
clip-path: inset(0 var(--inset) var(--inset) 0); /* from-left: öffnet nach unten-rechts */
}
/* from-right: Anker oben-rechts -> öffnet nach unten-links */
.dwe-img-reveal--from-right > img {
clip-path: inset(0 0 var(--inset) var(--inset));
}
/* Aufzieh-Linien — Overlay INNERHALB des Rahmens (inset:0 = Innenkante,
also innerhalb des Borders), daher immer im Rahmen eingeschlossen.
Jede Linie spannt die volle Rahmen-Innenfläche; die bewegliche
Koordinate (left bei v, top bei h) kommt in px aus initImageReveal. */
.dwe-img-reveal .dwe-ext {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.dwe-img-reveal .dwe-ext span { position: absolute; background-color: var(--line-color); }
.dwe-img-reveal .dwe-ext__v { width: 1px; top: 0; bottom: 0; } /* left kommt inline aus JS */
.dwe-img-reveal .dwe-ext__h { height: 1px; left: 0; right: 0; } /* top kommt inline aus JS */
/* =====================================================================
* ROTATOR (.dwe-rotate) — synchroner Crossfade-„Slider" für mehrere
* -Slides in EINEM Element (Headline + Text laufen im Gleichtakt).
* JS (initRotate) findet den Span-Track, vergibt die Klassen unten und
* setzt eine feste Höhe (= höchster Slide) -> kein Layout-Springen.
* Ohne JS / bei reduzierter Bewegung bleiben einfach alle Spans sichtbar.
* ===================================================================== */
.dwe-rotate-track { position: relative !important; }
.dwe-rotate-track > br { display: none !important; } /* Trenn-
zwischen den Slides aus */
/* Hohe Spezifität + !important: YOOtheme-Theme-CSS darf position/opacity NICHT aushebeln. */
.dwe-rotate-track > .dwe-rotate-slide {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
margin: 0 !important;
opacity: 0 !important;
pointer-events: none;
transition: opacity var(--rot-fade, .9s) ease;
will-change: opacity;
}
.dwe-rotate-track > .dwe-rotate-slide.is-active {
opacity: 1 !important;
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
.dwe-rotate-track > .dwe-rotate-slide { transition: none; }
}
/* =====================================================================
* STACK-EFFEKT (.stacker) — Karten stapeln sich beim Scrollen übereinander
* (position: sticky); je Karte bleibt nur die Überschrift sichtbar, die
* nächste schiebt hoch und verdeckt den Rest. --i (Index) + --stack-step
* (Überschrift-Höhe) werden per JS gesetzt (siehe initStack).
* ===================================================================== */
.stacker {
position: sticky;
top: calc(var(--stack-base, 100px) + var(--i, 0) * var(--stack-step, 92px));
}
/* Aufeinanderfolgende Stack-Karten OHNE Grid-Abstand: In der Lücke (YOOtheme
.uk-grid-margin) blitzte der Sektionsgrund zwischen Karten-Unterkante und
der Border der nächsten Karte durch -> wirkte als Doppellinie. */
.stacker + .stacker { margin-top: 0 !important; }
/* Karten-Styling nach Entwurf: heller Grund, cyane Trennlinie oben,
Titel links, graue Beschreibung rechts, oranger Pfeil oben rechts.
WICHTIG für den Deck-Stack: Titel + Pfeil sitzen oben verankert (align-items:start)
und bilden zusammen den KOPF-STREIFEN der Höhe --stack-step. Der Fließtext beginnt
ERST UNTERHALB dieses Streifens — so bleibt beim Stapeln nur Titel + Pfeil sichtbar
(kein angeschnittener Text, egal wie lang die Beschreibung ist).
Muss deckend sein, damit die nächste Karte die vorige verdeckt. */
.stacker > .uk-card, .uk-card.stacker2 {
--stack-line: #6fd2e0; /* cyane Trennlinie */
--card-pad-top: 38px; /* obere Polsterung = Start des Kopf-Streifens */
position: relative;
box-sizing: border-box;
/* mind. so hoch wie der Kopf-Streifen, aber auch >= höchste Karte der Gruppe
(--card-min per JS), damit jede Karte die vorige beim Stapeln voll verdeckt. */
min-height: max(var(--stack-step, 92px), var(--card-min, 0px));
background-color: #edf2ed; /* deckend, = heller Sektions-Grund */
box-shadow: none;
border-radius: 0;
border-top: 1px solid var(--stack-line);
}
@media (min-width: 959px) {
.stacker > .uk-card, .uk-card.stacker2 {
padding: var(--card-pad-top) 72px 44px 8px; /* rechts Platz für den Pfeil */
}
}
.stacker > .uk-card:hover { background-color: #edf2ed; } /* kein Default-Hover-BG */
/* Titel links — oben im Kopf-Streifen */
.stacker .uk-card-title, .stacker2 .uk-card-title {
grid-column: 1;
grid-row: 1;
align-self: start;
margin: 0;
color: #003349;
font-family: 'Bai Jamjuree', sans-serif;
font-size: 1.9rem;
font-weight: 500;
line-height: 1.1;
}
/* Beschreibung (grau) — VOLLE Kartenbreite, beginnt UNTER dem Kopf-Streifen */
.stacker .el-content, .stacker2 .el-content {
grid-column: 1 / -1; /* volle Kartenbreite (über beide Spalten) */
grid-row: 1; /* gleiche Reihe wie Titel -> vertikale Position via margin-top */
align-self: start;
width: 100%;
margin: 0;
/* Versatz nach unten = Kopf-Streifen-Höhe minus obere Polsterung, PLUS Puffer.
Zusätzlich blendet initStack den Text scroll-gekoppelt aus, bevor die nächste
Karte ihn überfährt (kein Durchblitzen am Streifen-Rand). */
margin-top: calc(var(--stack-step, 92px) - var(--card-pad-top, 38px) + 20px);
color: #6e6e6e;
font-size: .95rem;
line-height: 1.55;
}
.stacker .el-content p, .stacker2 .el-content p { margin: 0; }
/* Pfeil oben rechts, orange — auf Höhe des Titels im Kopf-Streifen */
.stacker .uk-card .el-image.uk-icon, .uk-card.stacker2 .el-image.uk-icon {
position: absolute;
top: var(--card-pad-top, 38px);
right: 8px;
color: #e8552a;
}
.stacker .uk-card .uk-icon svg, .uk-card.stacker2 .uk-icon svg { width: 26px; height: 26px; }
.stacker .uk-card .uk-icon svg line,
.stacker .uk-card .uk-icon svg polyline, .uk-card.stacker2 .uk-icon svg line,
.uk-card.stacker2 .uk-icon svg polyline { stroke: #e8552a; }
/* ============================================================
STACKER – MOBILE v3 (< 960px)
Ersetzt v2 komplett.
Neu: Intro-Text pinnt mit (Cards schieben sich drüber),
426px-Mindesthöhe raus → kürzere Scrollwege.
============================================================ */
@media (max-width: 958.98px) {
/* Basis-Offset zentral am Container – erbt an Intro-Panel UND Cards */
*:has(> .stacker) {
--stack-base: 116px; /* Mobile-Header (110px) + Luft */
}
/* Intro-Text bleibt stehen, die Cards schieben sich drüber
(das mobile Pendant zum sticky Bild am Desktop) */
*:has(> .stacker) > .uk-panel:first-child {
position: sticky;
top: var(--stack-base);
}
.stacker {
--stack-step: 84px !important; /* Höhe der eingeklappten Titel-Streifen */
--card-min: 0px !important; /* 426px-Zwang weg → Cards nur noch so hoch wie ihr Inhalt */
}
/* Card: mobile Innenabstände */
.stacker > .uk-card,
.uk-card.stacker2 {
--card-pad-top: 26px;
padding: var(--card-pad-top) 48px 30px 8px;
}
/* Titel klein genug, damit der 84px-Streifen nie Text anschneidet */
.stacker .uk-card-title,
.stacker2 .uk-card-title {
font-size: clamp(1.35rem, 7vw, 1.5rem);
}
}
/* =====================================================================
* TEXT-REVEAL (.text-revealer) — Scramble/Decode-Reveal mit Block-Cursor
* (wie enerblock): Cursor läuft L->R, Zeichen entschlüsseln sich. Markup
* wird per JS aufgebaut (initTextReveal).
* ===================================================================== */
.text-revealer .tr-word { display: inline-block; white-space: nowrap; }
.text-revealer .tr-cursor {
display: inline-block;
width: 0.5em;
height: 0.72em;
margin-left: 0.04em;
background-color: currentColor; /* Block in Textfarbe (weiß auf dunklem Hero) */
vertical-align: baseline;
transform: translateY(0.02em);
pointer-events: none;
}
/* =====================================================================
* FOOTER — blaue Fläche (.dwe-footer-blau) [v6 · responsive + mobile]
* Vollständig hier verwaltet — KEIN CSS im YOOtheme-Builder.
* (Altes Builder-CSS auf der Section — #footer#0::before mit #0D3047 +
* clip-path — bitte im Builder löschen; wird hier zusätzlich gekillt.)
*
* Blau kommt AUSSCHLIESSLICH aus --dwe-footer-blau-bg (#003349).
*
* ≥ 1200px: Schräge (16,86° aus der Vertikalen), dockt oben an die
* Section drüber und läuft unten bis zur Section-Unterkante.
* Logo per --dwe-logo-shift nach links, mit Clamp gegen
* Anschneiden an der Card-Kante.
* < 1200px: Vollbreiter blauer Block, Logo exakt mittig (Paddings
* kompensieren den Anschluss oben), darunter die 3 Spalten
* gleichmäßig (je 1/3) auf hellem Grund. < 640px gestapelt.
* ===================================================================== */
footer .uk-subnav>* {
flex: initial ; width: 100%;;
}
.uk-subnav>*>:first-child {
display: block;}
footer {
--dwe-footer-blau-bg: #003349;
--dwe-footer-anschluss: 140px; /* Section-Padding oben */
--dwe-footer-anschluss-unten: 70px; /* Section-Padding unten (Desktop) */
--dwe-schraege-right: 48px; /* Schräge: größer = weiter links */
--dwe-logo-shift: 90px; /* Logo: Versatz nach links (Desktop) */
--dwe-logo-pad: 24px; /* Luft ums Logo im Mobile-Block */
}
/* Clipping-Garantie für die Full-Bleed-Fläche */
footer > .uk-section:first-of-type { overflow: hidden; }
/* Altes Builder-::before/::after der Section neutralisieren (falscher
Blauton #0D3047 + clip-path -> der "dunklere Strich") */
footer > .uk-section:first-of-type::before,
footer > .uk-section:first-of-type::after { content: none !important; }
/* Fläche kommt nur vom ::before — Spalte/Card nie selbst einfärben */
footer .dwe-footer-blau { position: relative; background: transparent !important; }
footer .dwe-footer-blau > * { position: relative; z-index: 1; }
footer .dwe-footer-blau.uk-card-primary,
footer .dwe-footer-blau .uk-card-primary { background: transparent !important; }
footer .dwe-footer-blau::before {
content: "";
position: absolute;
top: calc(-1 * var(--dwe-footer-anschluss));
bottom: calc(-1 * var(--dwe-footer-anschluss-unten));
left: -50vw;
right: var(--dwe-schraege-right);
background: var(--dwe-footer-blau-bg);
z-index: 0;
clip-path: none !important;
}
/* ---------- Desktop: Schräge + Logo nach links ---------- */
@media (min-width: 1200px) {
footer .dwe-footer-blau::before {
transform: skewX(-16.86deg) !important;
transform-origin: right var(--dwe-footer-anschluss);
}
/* max() clampt den Shift: Logo wird nie an der Card-Kante abgeschnitten */
footer .dwe-footer-blau .uk-card-body {
background-position: max(0px, calc(50% - var(--dwe-logo-shift))) 0 !important;
}
}
/* Kontakt-Button: Pfeil-Segment eindampfen in der schmalen Übergangszone
(kann weg, wenn der Button im Builder kompakter gebaut wird) */
@media (min-width: 1200px) and (max-width: 1449.98px) {
footer .uk-button::after {
margin-left: 24px !important;
padding: 5px 16px 0 10px !important;
}
}
/* ---------- Mobile (< 1200): Block oben, Spalten hell drunter ---------- */
@media (max-width: 1199.98px) {
footer { --dwe-footer-anschluss-unten: 0px; } /* Block endet an der Logo-Spalte */
footer .dwe-footer-blau {
width: 100% !important; /* Logo-Block auf eigene Zeile */
/* unten = oben + Anschluss -> Logo sitzt exakt mittig im sichtbaren Band */
padding-top: var(--dwe-logo-pad);
padding-bottom: calc(var(--dwe-logo-pad) + var(--dwe-footer-anschluss));
}
footer .dwe-footer-blau::before {
right: -50vw; /* volle Breite, Section clippt */
transform: none !important;
}
footer .dwe-footer-blau .uk-card-body {
min-height: 100px;
background-position: 50% 50% !important; /* Logo mittig */
}
}
/* 3 Spalten gleichmäßig verteilt (wrapper-unabhängig, greift auch
im Customizer-Preview — deshalb Geschwister-Selektor) */
@media (min-width: 640px) and (max-width: 1199.98px) {
footer .dwe-footer-blau ~ * { width: 33.333% !important; }
}
@media (max-width: 959.98px) {
footer { --dwe-footer-anschluss: 70px; } /* Section-Padding ist hier 70px */
}
/* Container-Padding auf kleineren Screens */
@media (max-width: 1200px) {
footer .uk-container { padding-left: 30px; padding-right: 30px; }
}
/* =====================================================================
* MOBILE — LINIEN IN .dwe-lines.uk-section-secondary AUS (< 960px)
* TEST: alle Grid-/Schräg-Linien, die in Secondary-Sektionen gezeichnet
* werden, auf Mobile abschalten. Diagonale nur, wenn sie in einer
* Secondary-Sektion sitzt -> Diagonalen anderer Sektionen bleiben.
* Reversibel (Backup: backups/custom.css.2026-06-25_vor-linien-secondary-mobile-off).
* ===================================================================== */
@media (max-width: 959px) {
.dwe-lines.uk-section-secondary::before,
.dwe-lines.uk-section-secondary .uk-container::before,
.dwe-lines.uk-section-secondary .uk-container::after,
.dwe-lines.uk-section-secondary.schraegstrich::after {
display: none;
}
}
/* =====================================================================
* MOBILE — LINIEN IN .dwe-lines.uk-section-default AUS (< 960px)
* Gleiches Muster wie bei .uk-section-secondary, nur für default-Sektionen.
* Reversibel (Backup: backups/custom.css.2026-06-25_vor-linien-default-mobile-off).
* ===================================================================== */
@media (max-width: 959px) {
.dwe-lines.uk-section-default::before,
.dwe-lines.uk-section-default .uk-container::before,
.dwe-lines.uk-section-default .uk-container::after,
.dwe-lines.uk-section-default.schraegstrich::after {
display: none;
}
}
/* =====================================================================
* MOBILE — ÜBERSCHRIFTEN: LANGE WÖRTER UMBRECHEN (< 960px)
* Ein einzelnes überlanges Wort bricht sonst nicht um und läuft über den
* Rand / wird abgeschnitten. break-word bricht NUR dann mitten im Wort,
* wenn es sonst überlaufen würde — normale Wörter bleiben unberührt.
* word-wrap = Legacy-Alias für maximale Browser-Abdeckung.
* ===================================================================== */
@media (max-width: 959px) {
h1, h2, h3, h4, h5, h6 {
word-wrap: break-word; /* Legacy-Alias (sehr alte Browser) */
overflow-wrap: break-word; /* Standard, alle modernen Browser */
}
}
@media (max-width: 959px) {
.parateaserbild .uk-background-cover { min-height: 314px !important;}
}
/* Hero-Headline: mobil kompakter */
@media (max-width: 959px) {
.boxed-heading {
font-size: clamp(46px, 11vw, 50px);
}
}
@media (max-width: 959px) {
.bacon {
top: initial !important;
bottom: initial !important;
left: initial !important;
right: initial !important;
margin-left: initial !important;
}
}
/* === DWE Kontaktformular === */
/* Inputs: transparent, weißer Unterstrich, weiße Schrift
[data-form-id="7F4F3022-da04a06f"] input,
[data-form-id="7F4F3022-da04a06f"] select,
[data-form-id="7F4F3022-da04a06f"] textarea {
background: transparent !important;
border: none !important;
border-bottom: 1px solid #fff !important;
border-radius: 0 !important;
color: #fff !important;
padding: 8px 0 !important;
box-shadow: none !important;
}
[data-form-id="7F4F3022-da04a06f"] input.uk-checkbox { background: white !important;}
[data-form-id="7F4F3022-da04a06f"] input:focus,
[data-form-id="7F4F3022-da04a06f"] select:focus,
[data-form-id="7F4F3022-da04a06f"] textarea:focus {
border-bottom-color: #fff !important;
outline: none !important;
}
[data-form-id="7F4F3022-da04a06f"] ::placeholder { color: #fff !important; opacity: 1 !important; }
[data-form-id="7F4F3022-da04a06f"] select { color: #fff !important; }
[data-form-id="7F4F3022-da04a06f"] select {
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.1' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 100% 50%;
padding-right: 20px;
}
[data-form-id="7F4F3022-da04a06f"] input:-webkit-autofill {
-webkit-text-fill-color: #fff !important;
-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
transition: background-color 9999s ease-in-out 0s;
} */
/* =====================================================================
* NEUE BILD-REVEAL-KLASSEN (WebP-fest, self-contained)
* .dwe-bild-reveal-links / -rechts — Bild + Rahmen ziehen scroll-gescrubbt auf.
* Geometrie REIN per CSS über --reveal (0..1, animiert in initBildReveal)
* -> zuverlässig, keine px-Messung. clip-path greift auch bei -WebP.
* -links: Anker oben-links -> öffnet nach unten-rechts
* -rechts: Anker oben-rechts -> öffnet nach unten-links
* ===================================================================== */
.dwe-bild-reveal-links,
.dwe-bild-reveal-rechts {
--reveal: 1; /* Fallback ohne JS / reduced-motion: voll sichtbar */
--reveal-min: 28%; /* Startgröße des Ausschnitts */
--line-color: #003349;
--frame-gap-y: 30px; /* Abstand Rahmen <-> Bild (oben/unten) */
--frame-gap-x: 45px; /* Abstand Rahmen <-> Bild (links/rechts) */
--inset: calc((100% - var(--reveal-min)) * (1 - var(--reveal)));
position: relative;
box-sizing: border-box;
width: fit-content; /* Rahmen hugt Bild + Gap */
max-width: 100%;
border: 1px solid var(--line-color);
padding: var(--frame-gap-y) var(--frame-gap-x);
}
/* /![]()
als Block */
.dwe-bild-reveal-links > picture, .dwe-bild-reveal-rechts > picture,
.dwe-bild-reveal-links > img, .dwe-bild-reveal-rechts > img,
.dwe-bild-reveal-links > picture > img, .dwe-bild-reveal-rechts > picture > img {
display: block;
}
/* Reveal: clip-path auf dem Bild — auch in (WebP-fest) */
.dwe-bild-reveal-links > img,
.dwe-bild-reveal-links > picture > img {
clip-path: inset(0 var(--inset) var(--inset) 0); /* öffnet nach unten-rechts */
}
.dwe-bild-reveal-rechts > img,
.dwe-bild-reveal-rechts > picture > img {
clip-path: inset(0 0 var(--inset) var(--inset)); /* öffnet nach unten-links */
}
/* Aufzieh-Linien — Overlay INNERHALB des Rahmens (inset:0), wie .dwe-img-reveal.
Jede Linie spannt die volle Rahmen-Innenfläche; die bewegliche Koordinate
(left bei v, top bei h) kommt in px aus initBildReveal. */
.dwe-bild-reveal-links .dwe-ext,
.dwe-bild-reveal-rechts .dwe-ext {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.dwe-bild-reveal-links .dwe-ext span,
.dwe-bild-reveal-rechts .dwe-ext span { position: absolute; background-color: var(--line-color); }
.dwe-bild-reveal-links .dwe-ext__v,
.dwe-bild-reveal-rechts .dwe-ext__v { width: 1px; top: 0; bottom: 0; } /* left kommt inline aus JS */
.dwe-bild-reveal-links .dwe-ext__h,
.dwe-bild-reveal-rechts .dwe-ext__h { height: 1px; left: 0; right: 0; } /* top kommt inline aus JS */
/* TEXT HINTERGRUND */
.boxed-heading span {
display: inline;
background: #16344a;
color: #f5f3ec;
padding: 0.12em 0.35em;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
line-height: 1.35;
}
/* Text Block orange */
.typing-cursor {
display: inline-block;
width: 0.30em;
height: 1em;
margin-left: 0.4em;
background: #ff6c41;
vertical-align: text-bottom;
animation: blink 1s step-end infinite;
}
/* PANEL */
.tech-panel {
position: relative;
overflow: hidden;
background: rgba(0, 51, 73, .85);
padding: 50px 150px 50px 60px; /* oben | rechts | unten | links */
}
/* Fließtext weiß */
.tech-panel .el-content {
color: #fff;
}
/* Diagonaler Strich – sitzt in der rechten Padding-Zone */
.tech-panel::after {
content: "";
position: absolute;
top: -25%;
right: 70px;
width: 2px;
height: 150%;
background: #64e0ec;
transform: rotate(12deg);
pointer-events: none;
}
/* Unter 960px (UIkit-Breakpoint m): Strich weg, Padding links = rechts */
@media (max-width: 959px) {
.tech-panel::after {
display: none;
}
.tech-panel {
padding: 50px 60px; /* oben/unten | links/rechts */
}
}
@media (max-width: 639px) {
.tech-panel {
padding: 32px 28px; /* oben/unten | links/rechts */
}
.tech-panel::after {
right: 36px;
}
}
/* ================AKKORDEON================== */
/* ===== DWE-Akkordeon (Klasse: dwe-akkordeon) ===== */
.dwe-akkordeon {
--dunkel: #003349;
--orange: #ec6636;
--hell: #edf1ec; /* exakte Hintergrundfarbe der Section eintragen! */
counter-reset: eintrag;
}
.dwe-akkordeon .uk-accordion-icon {
display: none;
}
/* Einträge: viel Luft, Vollbreite, deckender Hintergrund */
.dwe-akkordeon > * {
padding: 110px 0; /* Stellschraube Zeilenhöhe */
border-top: 1px solid rgba(0, 51, 73, .35);
background-color: var(--hell); /* deckend – wichtig fürs Überlappen */
transition: background-color .4s ease, padding .4s ease;
/* Linien + Farbe bis an den Bildschirmrand */
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-left: calc(50vw - 50%);
padding-right: calc(50vw - 50%);
}
.dwe-akkordeon > :last-child {
border-bottom: 1px solid rgba(0, 51, 73, .35);
}
.dwe-akkordeon > :nth-child(n+2) {
margin-top: 0;
}
/* Offener Eintrag */
.dwe-akkordeon > .uk-open {
background-color: var(--dunkel);
padding-top: 140px;
padding-bottom: 140px;
}
/* Überlapp-Effekt beim Scrollen (nur Desktop) */
@media (min-width: 960px) {
.dwe-akkordeon > * {
position: sticky;
top: 0;
}
}
/* Titelzeile */
.dwe-akkordeon .uk-accordion-title,
.dwe-akkordeon .uk-accordion-title:hover {
display: flex;
align-items: center;
column-gap: 20px;
font-family: "EixampleVillaExtraBold", sans-serif;
font-weight: normal; /* Fette steckt im Font selbst */
font-size: clamp(1.6rem, 3.5vw, 3rem);
text-transform: uppercase;
color: var(--dunkel);
transition: color .4s ease;
}
.dwe-akkordeon > .uk-open .uk-accordion-title,
.dwe-akkordeon > .uk-open .uk-accordion-title:hover {
color: #fff;
}
/* Nummer 01 / 02 / 03 */
.dwe-akkordeon .uk-accordion-title::after {
counter-increment: eintrag;
content: counter(eintrag, decimal-leading-zero) " /";
order: -1;
flex: 0 0 30%;
}
/* Eigenes Plus */
.dwe-akkordeon .uk-accordion-title::before {
content: "";
order: 1;
margin-left: auto;
flex: none;
width: 34px;
height: 34px;
background-image:
linear-gradient(var(--orange), var(--orange)),
linear-gradient(var(--orange), var(--orange));
background-position: center;
background-repeat: no-repeat;
background-size: 100% 3px, 3px 100%;
transition: background-size .4s ease, transform .4s ease;
}
.dwe-akkordeon > .uk-open .uk-accordion-title::before {
background-size: 100% 3px, 3px 0;
transform: rotate(180deg);
}
/* Inhalt */
.dwe-akkordeon .uk-accordion-content {
margin-left: calc(30% + 20px);
max-width: 620px;
color: #fff;
}
/* Akkordeon: Mobile-Optimierung */
@media (max-width: 959px) {
.dwe-akkordeon > *,
.dwe-akkordeon > .uk-open {
padding-top: 28px;
padding-bottom: 28px;
}
.dwe-akkordeon .uk-accordion-content,
.dwe-akkordeon > .uk-open .uk-accordion-content {
margin-left: 0;
}
.dwe-akkordeon .uk-accordion-title,
.dwe-akkordeon .uk-accordion-title:hover {
font-size: clamp(20px, 3.75vw, 1.6rem);
column-gap: 12px;
hyphens: auto;
overflow-wrap: break-word;
}
.dwe-akkordeon .uk-accordion-title::after {
flex-basis: auto;
}
}
/*=============VIDEO PIN================*/
:root {
--video-hoehe: 70vh;
}
.video-pin {
position: sticky !important;
top: 0;
min-height: var(--video-hoehe) !important;
}
.video-pin-inhalt {
margin-top: calc(-1 * var(--video-hoehe));
padding-top: 6vh;
min-height: var(--video-hoehe);
}
/* WICHTIG, nicht löschen: zeichnet alles nach dem Video ÜBER dem gepinnten Video */
.video-pin ~ * {
position: relative;
}
/* Video-Pin: mobil "Overlay light" — Video scrollt normal, Slider ragt in die Video-Unterkante */
@media (max-width: 959px) {
.video-pin {
position: relative !important; /* Sticky aus — relative, nie static (Video-Anker!) */
top: auto;
}
.video-pin-inhalt {
margin-top: -120px; /* Wie tief der Slider ins Video schneidet — nach Geschmack */
padding-top: 0;
min-height: 0;
}
}
}
/*=============DWE OVERLAY=============*/
/* ===== Bild-Kacheln (Klasse: dwe-kachel) ===== */
/* Oranger Pfeil oben rechts */
.dwe-kachel .uk-inline-clip::after {
content: "";
position: absolute;
top: 24px;
right: 24px;
width: 80px;
height: 80px;
background: url("data:image/svg+xml;utf8,") center / contain no-repeat;
pointer-events: none;
transition: transform .3s ease;
}
.dwe-kachel:hover .uk-inline-clip::after {
transform: translate(4px, -4px);
}
/* Blauer Tint, Bild bleibt sichtbar */
.dwe-kachel .uk-overlay-primary {
background-color: rgba(0, 51, 73, .55);
}
/* Textblock: unten links statt mittig */
.dwe-kachel .uk-position-center {
inset: auto auto 0 0;
transform: none;
width: 100%;
max-width: 100%;
padding: 26px 32px;
text-align: left;
}
/* Titel: Fließtext-Font, normale Schreibweise, weiß */
.dwe-kachel .el-title {
margin: 0;
font-family: "Bai Jamjuree", sans-serif;
font-weight: 600;
font-size: 1.5rem;
text-transform: none;
color: #fff;
}
/* Cyan-Linie unterm Titel */
.dwe-kachel .el-title::after {
content: "";
display: block;
width: 75%;
height: 1px;
margin-top: 16px;
background: #64e0ec;
}
/* alten grauen Trenner ausblenden */
.dwe-kachel hr {
display: none;
}
/* SECTION: a2.2 */
/*
.section-a2-2 .uk-grid::after {
content: "";
width: 100%;
height: 1px;
background: #00FFFF;
display: block;
}
.section-a2-2 .uk-grid::before {
content: "";
width: 100%;
height: 1px;
background: #00FFFF;
display: block;
}
*/
/* Basis für alle Horizontalen */
.dwe-row-top,
.dwe-row-bottom {
position: relative;
}
.dwe-row-top::before,
.dwe-row-top::after,
.dwe-row-bottom::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 1px;
background: #00FFFF;
pointer-events: none;
}
/* 1. Obere Linie */
.dwe-row-top::before {
top: -40px;
}
/* 2. Mittellinie (nur EINMAL, unter Row 1) */
.dwe-row-top::after {
bottom: -60px;
}
/* 3. Untere Linie */
.dwe-row-bottom::after {
bottom: -50px;
}
/* Vertikale ganz rechts */
.dwe-col-text {
position: relative;
}
.dwe-col-text::after {
content: "";
position: absolute;
right: 6%; /* Einrückung vom rechten Rand */
top: -140px; /* Überstand über die obere Horizontale */
bottom: -60px; /* Endet auf der Mittellinie */
width: 1px;
background: #74E2E6;
pointer-events: none;
}
/* =====================================================================
* BILD-REVEAL OHNE LINIEN
* .dwe-bild-revealohnelinien-links / -rechts — wie .dwe-bild-reveal-*,
* aber KOMPLETT ohne Fassung: kein Rahmen, kein Innenabstand, keine
* Aufzieh-Linien. Nur das Bild zieht sich scroll-gescrubbt auf
* (clip-path via --reveal, animiert in initBildReveal).
* -links: Anker oben-links -> öffnet nach unten-rechts
* -rechts: Anker oben-rechts -> öffnet nach unten-links
* ===================================================================== */
.dwe-bild-revealohnelinien-links,
.dwe-bild-revealohnelinien-rechts {
--reveal: 1; /* Fallback ohne JS / reduced-motion: voll sichtbar */
--reveal-min: 28%; /* Startgröße des Ausschnitts */
--inset: calc((100% - var(--reveal-min)) * (1 - var(--reveal)));
position: relative;
box-sizing: border-box;
width: fit-content;
max-width: 100%;
}
/* /![]()
als Block */
.dwe-bild-revealohnelinien-links > picture, .dwe-bild-revealohnelinien-rechts > picture,
.dwe-bild-revealohnelinien-links > img, .dwe-bild-revealohnelinien-rechts > img,
.dwe-bild-revealohnelinien-links > picture > img, .dwe-bild-revealohnelinien-rechts > picture > img {
display: block;
}
/* Reveal: clip-path auf dem Bild — auch in (WebP-fest) */
.dwe-bild-revealohnelinien-links > img,
.dwe-bild-revealohnelinien-links > picture > img {
clip-path: inset(0 var(--inset) var(--inset) 0); /* öffnet nach unten-rechts */
}
.dwe-bild-revealohnelinien-rechts > img,
.dwe-bild-revealohnelinien-rechts > picture > img {
clip-path: inset(0 0 var(--inset) var(--inset)); /* öffnet nach unten-links */
}
/* Vom JS injizierte Linien-Overlays hier sicher aus */
.dwe-bild-revealohnelinien-links .dwe-ext,
.dwe-bild-revealohnelinien-rechts .dwe-ext { display: none; }
/* Umbruch */
.umbruch {
hyphens: auto;
}
/* ===== dwe-lines: alle Standard-Linien einheitlich 1px ===== */
.dwe-lines.uk-section-secondary::before,
.dwe-lines.uk-section-default::before {
width: 1px;
}
@media (min-width: 959px) {
.dwe-lines .textrahmen::after {
width: 1px;
}
}
@media (max-width: 959px) {
.uk-padding-large.ic-desktop-only { padding: 0; }
}
/* =========================================================
KARRIERE-SEITE
========================================================= */
.dwe-karriere--overlay .el-title {
width: 400px;
}
/* KARRIERE-AKKORDEON – FORTLAUFENDE NUMMERIERUNG */
/*
* Diese Klasse muss auf einem Element liegen,
* das alle dynamischen Akkordeon-Items gemeinsam umschließt.
*
* Wichtig:
* Der Wrapper darf nicht pro dynamischem Item wiederholt werden.
*/
.dwe-karriere--akkordeon-wrapper {
counter-reset: karriere-akkordeon;
}
/*
* Das bestehende Styling von .dwe-accordeon bleibt erhalten.
* Nur die Nummerierung wird für das Karriere-Akkordeon überschrieben.
*/
.dwe-karriere--akkordeon-wrapper
.dwe-karriere--akkordeon
.uk-accordion-title::after {
counter-increment: karriere-akkordeon !important;
content: counter(karriere-akkordeon, decimal-leading-zero) " /" !important;
/*
* Kann entfallen, falls diese Angaben bereits zuverlässig
* über .dwe-accordeon gesetzt werden.
*/
order: -1;
flex: 0 0 30%;
}
.dwe-karriere--akkordeon .el-item {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
.dwe-karriere--akkordeon .uk-accordion-title {
font-size: clamp(1.6rem, 1.8rem, 2rem) !important;
transition: transform 0.4s ease-in-out !important;
/* max-width: 60% !important; */
}
@media (min-width: 1200px) {
.dwe-karriere--akkordeon .uk-accordion-title {
max-width: 60% !important;
}
}
.dwe-karriere--akkordeon a.uk-accordion-title:hover {
transform: scale(1.08);
}
.dwe-karriere--akkordeon .uk-accordion-content {
margin-left: calc(18% + 20px) !important;
}
.dwe-karriere--hr {
border-top: 1px solid #00FFFF !important;
}
/* ARTIKEL / BEITRAG */
article.uk-article.post .uk-article-meta {
display: none;
}
article.uk-article.post h1 {
color: #003349 !important;
}