/* --------------------------------------------------------------------------
 * ESGO Logistics - Onepager-Grundgeruest (Figma "One Pager vs ivo")
 *
 * Gemeinsame Basis fuer /info_spediteure und /info_verlader (je ein Frame
 * 583 x 825 aus demselben Figma-File) sowie fuer den Studi-Onepager auf
 * /karriere/handelsvertreter-nebenberuflich (eigener Frame 761 x 1784, siehe
 * --studi-Abschnitt ganz unten). Alle Positionen und Groessen stammen
 * unveraendert aus dem Design und werden ueber die Einheit --u skaliert:
 *
 *     --u = 100cqw / 583   ->  1 Design-Pixel
 *
 * Damit bleibt das Layout bei jeder Breite proportionsgetreu. Die Koordinaten
 * stehen als Custom Properties (--x/--y/--w/--h/--fs/--lh) im jeweiligen
 * Template, weil es reine Design-Daten sind; die Gestaltungsregeln liegen
 * hier. Seitenspezifische Verlaufsfarben/Crops stehen als eigene Klassen
 * unten (z. B. .op-grad-marge fuer den Spediteur-, .op-grad-kapazitaet fuer
 * den Verlader-Pager) statt in separaten CSS-Dateien.
 * -------------------------------------------------------------------------- */

.op-stage {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.op-frame {
    container-type: inline-size;
    width: 100%;
    min-width: 620px;   /* darunter waere der Fliesstext des Onepagers unlesbar */
    max-width: 1000px;
    margin: 0 auto;
}

.op-canvas {
    --u: calc(100cqw / 583);
    position: relative;
    width: 100%;
    aspect-ratio: 583 / 825;
    overflow: hidden;
    border-radius: calc(10 * var(--u));
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    color: #ffffff;
    /* Kein Zeilenumbruch-Zwang: Figma bricht Text an den Boxgrenzen */
    overflow-wrap: break-word;
}

/* --- Basis-Bausteine ---------------------------------------------------- */

.op-el {
    position: absolute;
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    width: calc(var(--w) * var(--u));
    height: calc(var(--h) * var(--u));
}

.op-img {
    display: block;
    max-width: none;
    pointer-events: none;
    user-select: none;
}

.op-flip {
    transform: scaleX(-1);
}

/* Rotierte Dekoflaechen werden um ihren Mittelpunkt gedreht. */
.op-rot {
    position: absolute;
    left: calc(var(--cx) * var(--u));
    top: calc(var(--cy) * var(--u));
    width: calc(var(--w) * var(--u));
    height: calc(var(--h) * var(--u));
    transform: translate(-50%, -50%) rotate(var(--rot));
}

.op-rot .op-img {
    position: absolute;
    left: calc(var(--ix) * var(--u));
    top: 0;
    width: calc(var(--iw) * var(--u));
    height: calc(var(--ih) * var(--u));
}

/* --- Typografie ---------------------------------------------------------- */

.op-t {
    font-size: calc(var(--fs) * var(--u));
    line-height: normal;
    margin: 0;
}

.op-lh {
    line-height: calc(var(--lh) * var(--u));
}

/* Figma zentriert die meisten Textboxen vertikal (flex + justify-center). */
.op-vc {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.op-outfit  { font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif; font-weight: 700; }
.op-w400    { font-weight: 400; }
.op-w500    { font-weight: 500; }
.op-w700    { font-weight: 700; }
.op-w800    { font-weight: 800; }

.op-center  { text-align: center; }
.op-right   { text-align: right; }
.op-nowrap  { white-space: nowrap; }

.op-accent  { color: #1dbd50; }

.op-shadow        { text-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.25); }
.op-shadow-strong { text-shadow: 0 calc(5 * var(--u)) calc(4.5 * var(--u)) rgba(0, 0, 0, 0.35); }
.op-shadow-hex    { text-shadow: 0 calc(4 * var(--u)) calc(4.6 * var(--u)) rgba(0, 0, 0, 0.35); }

/* Verlaufstext (Headline "Mehr Marge." und die Claim-Zeile).
   Der Schatten muss hier per drop-shadow kommen: bei background-clip:text ist die
   Schriftfarbe transparent, ein text-shadow wuerde durch die Glyphen schimmern
   und den Verlauf grau zumatschen. */
.op-grad {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.op-grad.op-shadow {
    text-shadow: none;
    filter: drop-shadow(0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.25));
}

.op-grad-marge      { background-image: linear-gradient(97.0626deg, #ffffff 10.683%, #1dbd50 92.757%); }
.op-grad-claim      { background-image: linear-gradient(11.1038deg, #1dbd50 61.125%, #ffffff 95.322%); }
.op-grad-kapazitaet { background-image: linear-gradient(97.9738deg, #ffffff 10.683%, #1dbd50 92.757%); }

/* --- Flaechen, die Figma NICHT als Bild exportiert ----------------------- */

/* Abgerundete Verlaufsbox hinter dem Prozent-Badge (Verlader, Node 1:115) */
.op-badge-box {
    border-radius: calc(20 * var(--u));
    background-image: linear-gradient(182.635deg, #407342 28.691%, #41b447 96.872%);
    box-shadow: inset 0 calc(4 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.25);
}

/* Weisse Verbindungsbalken zwischen den Schritt-Kreisen (Verlader) */
.op-bar {
    background: #ffffff;
    box-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.25);
}

/* --- Kontaktdaten als echte Links, optisch unveraendert ------------------ */

.op-link {
    color: inherit;
    text-decoration: none;
}

.op-link:hover,
.op-link:focus-visible {
    text-decoration: underline;
}

/* --- LKW-Freisteller (rotiert und beschnitten wie im Design) ------------- */

.op-truck {
    display: flex;
    align-items: center;
    justify-content: center;
}

.op-truck-inner {
    position: relative;
    flex: none;
    width: calc(238.232 * var(--u));
    height: calc(173.673 * var(--u));
    overflow: hidden;
    transform: rotate(5.35deg);
}

.op-truck-inner img {
    position: absolute;
    left: -8.45%;
    top: -6.28%;
    width: 117.67%;
    height: 106.28%;
    max-width: none;
}

/* --- Laptop-Mockup (Verlader-Pager, rotiert wie im Design) --------------- */

.op-laptop {
    display: flex;
    align-items: center;
    justify-content: center;
}

.op-laptop-inner {
    position: relative;
    flex: none;
    width: calc(297.993 * var(--u));
    height: calc(189.722 * var(--u));
    border-radius: calc(10 * var(--u));
    overflow: hidden;
    transform: rotate(-3.67deg);
}

/* Figma skaliert das Mockup im Ausschnitt hoch und versetzt es, damit die
   transparenten Raender des PNG wegfallen und das Geraet die Box fuellt. */
.op-laptop-inner img {
    position: absolute;
    left: -21.19%;
    top: -38.39%;
    width: 142.37%;
    height: 167.71%;
    max-width: none;
}

/* --- Offener LKW-Freisteller (Verlader-Pager, gespiegelt + rotiert) ------ */

.op-truck-open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.op-truck-open-inner {
    flex: none;
    width: calc(255.389 * var(--u));
    height: calc(170.144 * var(--u));
    transform: rotate(172.49deg) scaleY(-1);
}

.op-truck-open-inner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Vertikale Trennlinie im Kontaktpanel (90 Grad gedrehte Zierlinie) --- */

.op-vline {
    display: flex;
    align-items: center;
    justify-content: center;
}

.op-vline-inner {
    flex: none;
    width: calc(110 * var(--u));
    height: calc(10 * var(--u));
    transform: rotate(90deg);
}

.op-vline-inner img {
    display: block;
    width: 100%;
    height: 100%;
}

/* --- Scroll-Hinweis auf schmalen Viewports ------------------------------- */

.op-scroll-hint,
.op-scroll-hint--studi {
    display: none;
}

@media (max-width: 680px) {
    .op-scroll-hint {
        display: block;
    }
}

/* Der Studi-Pager ist mit 761 Design-Pixeln breiter und scrollt entsprechend
   frueher seitlich. */
@media (max-width: 860px) {
    .op-scroll-hint--studi {
        display: block;
    }
}

/* ==========================================================================
 * Studi-Onepager (/karriere/handelsvertreter-nebenberuflich)
 *
 * Eigener Figma-Frame "studi one pager ivo" (Node 1:5) mit 761 x 1784 px, also
 * einem anderen Raster als die beiden 583 x 825-Pager oben. Die --studi-
 * Modifier setzen deshalb nur --u und aspect-ratio neu; saemtliche Bausteine
 * (.op-el, .op-t, .op-img, .op-flip, .op-vc, ...) bleiben unveraendert.
 * ========================================================================== */

.op-frame--studi {
    /* 761 = Design-Breite: darunter wird nicht mehr verkleinert, sondern
       seitlich gescrollt. Die 9-px-Fliesstexte des Frames bleiben so
       mindestens in ihrer Originalgroesse lesbar. */
    min-width: 761px;
    max-width: 1100px;
}

.op-canvas--studi {
    --u: calc(100cqw / 761);
    aspect-ratio: 761 / 1784;
    font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
    font-weight: 500;
}

.op-canvas--studi p,
.op-canvas--studi ul {
    margin: 0;
}

/* --- Zusaetzliche Bausteine ---------------------------------------------- */

/* Grafiken, die wegen Schlagschatten ueber ihren Node hinausragen: Figma
   liefert den Ueberstand als Prozent-inset einer Zwischenebene. Die wird hier
   1:1 nachgebaut, statt die Endkoordinaten von Hand auszurechnen. */
.op-inner {
    position: absolute;
}

.op-size-full {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
}

.op-rot180 {
    transform: rotate(180deg);
}

/* --- Typografie-Ergaenzungen --------------------------------------------- */

.op-w600 { font-weight: 600; }
.op-w900 { font-weight: 900; }

.op-muted   { color: rgba(255, 255, 255, 0.75); }
.op-muted-2 { color: rgba(255, 255, 255, 0.69); }
.op-white   { color: #ffffff; }

.op-shadow-sm  { text-shadow: 0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.25); }
.op-shadow-tip { text-shadow: 0 calc(2 * var(--u)) calc(2.3 * var(--u)) rgba(0, 0, 0, 0.25); }
.op-shadow-xs  { text-shadow: 0 calc(1 * var(--u)) calc(1.4 * var(--u)) rgba(0, 0, 0, 0.25); }

/* --- Abschnittsleisten "01 | Deine Rolle" -------------------------------- */

.op-sec-bar {
    background-image: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.4));
    box-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.25);
}

.op-sec-tick {
    background: #ffffff;
    box-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.25);
}

/* --- Karten und Flaechen ------------------------------------------------- */

.op-card {
    background: rgba(255, 255, 255, 0.15);
    border: calc(2 * var(--u)) solid #1dbd50;
    border-radius: calc(13 * var(--u));
}

/* Grosse Flaeche hinter Abschnitt 04 */
.op-card-dark {
    background: rgba(32, 89, 51, 0.5);
    border: calc(2 * var(--u)) solid #ffffff;
    border-radius: calc(13 * var(--u));
}

/* "Gut fuer dich"-Kasten */
.op-card-tip {
    background-image: linear-gradient(to bottom, rgba(23, 109, 33, 0.71) 0%, rgba(58, 164, 116, 0.71) 220.34%);
    border: calc(2 * var(--u)) solid #ffffff;
    border-radius: calc(13 * var(--u));
}

/* DU / DU VERDIENST MIT / DIE PLATTFORM */
.op-card-flow {
    background-image: linear-gradient(to bottom, #1dbd50, #0b5322);
    border-radius: calc(13 * var(--u));
}

/* "Ein Nachmittag" */
.op-pill {
    background: rgba(29, 189, 80, 0.5);
    border: calc(1 * var(--u)) solid #ffffff;
    border-radius: calc(13 * var(--u));
}

/* Rahmen der drei Kennzahlen-Badges (30% / 2x / 6 Mon.) */
.op-badge-ring {
    background: rgba(255, 255, 255, 0.2);
    border: calc(2 * var(--u)) solid #1dbd50;
    border-radius: calc(30 * var(--u));
}

.op-contact-box {
    background: rgba(255, 255, 255, 0.15);
    border: calc(1.5 * var(--u)) solid #ffffff;
    border-radius: calc(10 * var(--u));
}

.op-rule {
    background: #ffffff;
}

.op-rule-soft {
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.25);
}

/* --- Aufzaehlung "Das bist du nicht" ------------------------------------- */

.op-list {
    padding: 0;
    list-style: disc;
}

.op-list li {
    margin-left: calc(13.5 * var(--u));
}

/* --- Fotos --------------------------------------------------------------- */

/* LKW-Foto: Figma skaliert es im Ausschnitt hoch, damit es die Box fuellt. */
.op-photo-truck {
    overflow: hidden;
}

.op-photo-truck img {
    position: absolute;
    left: -8.45%;
    top: -6.28%;
    width: 117.67%;
    height: 106.28%;
    max-width: none;
}

/* Dashboard-Mockup, im Design leicht gegen den Uhrzeigersinn gedreht. */
.op-photo-laptop {
    display: flex;
    align-items: center;
    justify-content: center;
}

.op-photo-laptop-inner {
    flex: none;
    width: calc(394.018 * var(--u));
    height: calc(283.794 * var(--u));
    transform: rotate(-3.27deg);
}

.op-photo-laptop-inner img {
    display: block;
    width: 100%;
    height: 100%;
}