/* --------------------------------------------------------------------------
 * 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). 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 {
    display: none;
}

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