/* Erzeugt von skripte/marke-einbetten.mjs — nicht von Hand aendern.
   Quellen: bilder/retimo-wortmarke.svg · bilder/retimo-zeichen.svg

   Die Marke ist kein Schriftzug, sondern die vom Flyer nachgezeichnete Form:
   das R ohne Stamm auf Bogenhoehe, das E mit freiem Oberbalken. Keine Schrift
   bildet das ab.

   Als Maske und nicht als <img>, damit sie die Textfarbe erbt: eine Datei,
   jede Farbe. Der Text bleibt im Markup stehen und wird nur aus dem Sichtfeld
   geschoben — Vorlesehilfen und Suchmaschinen lesen weiter "Retimo".

   Zwei Ebenen: das Wort in currentColor, darueber das R als Roboterarm in der
   Signalfarbe. Gleiche viewBox, deshalb sitzt es von selbst an seiner Stelle.

   --marke-hoehe ist weiterhin die BUCHSTABENHOEHE, nicht die Kastenhoehe.
   Das Element ist etwas hoeher und breiter, weil der Greifer links und der
   Sockel unten herausragen; die negativen Raender ziehen den Ueberstand
   wieder ab, damit Grundlinie und linke Kante liegen bleiben, wo sie waren. */

.marke__wort {
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .3em;
}

@supports (mask-image: url("data:image/svg+xml,%3Csvg/%3E")) or
          (-webkit-mask-image: url("data:image/svg+xml,%3Csvg/%3E")) {
    .marke__wort {
        position: relative;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-indent: -100em;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-9 -5 267 49.5' width='267' height='49.5' role='img' aria-label='ETIMO' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='butt' stroke-linejoin='miter'%3E %3Ctitle%3EETIMO%3C/title%3E %3Cpath d='M49 2 H76' /%3E %3Cpath d='M52 16 V37' /%3E %3Cpath d='M49 18 H73' /%3E %3Cpath d='M49 34 H76' /%3E %3Cpath d='M92 2 H123' /%3E %3Cpath d='M107.5 2 V37' /%3E %3Cpath d='M142 0 V37' /%3E %3Cpath d='M168 37 V0 L183.5 26 L199 0 V37' /%3E %3Crect x='224' y='3' width='30' height='31' rx='6' ry='6' /%3E %3Ctitle%3ER als Roboterarm%3C/title%3E %3Cmask id='gelenke' maskUnits='userSpaceOnUse' x='-9' y='-5' width='267' height='49.5'%3E %3Cg stroke='none'%3E %3Crect x='-9' y='-5' width='267' height='49.5' fill='%23fff' /%3E %3Ccircle cx='3' cy='2' r='2.4' fill='%23000' /%3E %3Ccircle cx='21' cy='2' r='2' fill='%23000' /%3E %3Ccircle cx='21' cy='21' r='2' fill='%23000' /%3E %3Ccircle cx='3' cy='21' r='2.2' fill='%23000' /%3E %3C/g%3E %3C/mask%3E %3Cg mask='url(%23gelenke)'%3E %3Cpath d='M3 2 H21 A6 6 0 0 1 27 8 V15 A6 6 0 0 1 21 21 H3' /%3E %3Cpath d='M3 19 V37' /%3E %3Cpath d='M15 20 L30 43.5' /%3E %3Cpath d='M0 -3 L-6 .5' /%3E %3Cpath d='M0 7 L-6 3.5' /%3E %3Cpath d='M-7 43.5 L0 37 H6 V43.5 Z' fill='%23000' stroke='none' /%3E %3Cg stroke-width='2.4'%3E %3Ccircle cx='3' cy='2' r='3.6' /%3E %3Ccircle cx='21' cy='2' r='3.2' /%3E %3Ccircle cx='21' cy='21' r='3.2' /%3E %3Ccircle cx='3' cy='21' r='3.4' /%3E %3C/g%3E %3C/g%3E %3C/svg%3E") no-repeat left center / contain;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-9 -5 267 49.5' width='267' height='49.5' role='img' aria-label='ETIMO' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='butt' stroke-linejoin='miter'%3E %3Ctitle%3EETIMO%3C/title%3E %3Cpath d='M49 2 H76' /%3E %3Cpath d='M52 16 V37' /%3E %3Cpath d='M49 18 H73' /%3E %3Cpath d='M49 34 H76' /%3E %3Cpath d='M92 2 H123' /%3E %3Cpath d='M107.5 2 V37' /%3E %3Cpath d='M142 0 V37' /%3E %3Cpath d='M168 37 V0 L183.5 26 L199 0 V37' /%3E %3Crect x='224' y='3' width='30' height='31' rx='6' ry='6' /%3E %3Ctitle%3ER als Roboterarm%3C/title%3E %3Cmask id='gelenke' maskUnits='userSpaceOnUse' x='-9' y='-5' width='267' height='49.5'%3E %3Cg stroke='none'%3E %3Crect x='-9' y='-5' width='267' height='49.5' fill='%23fff' /%3E %3Ccircle cx='3' cy='2' r='2.4' fill='%23000' /%3E %3Ccircle cx='21' cy='2' r='2' fill='%23000' /%3E %3Ccircle cx='21' cy='21' r='2' fill='%23000' /%3E %3Ccircle cx='3' cy='21' r='2.2' fill='%23000' /%3E %3C/g%3E %3C/mask%3E %3Cg mask='url(%23gelenke)'%3E %3Cpath d='M3 2 H21 A6 6 0 0 1 27 8 V15 A6 6 0 0 1 21 21 H3' /%3E %3Cpath d='M3 19 V37' /%3E %3Cpath d='M15 20 L30 43.5' /%3E %3Cpath d='M0 -3 L-6 .5' /%3E %3Cpath d='M0 7 L-6 3.5' /%3E %3Cpath d='M-7 43.5 L0 37 H6 V43.5 Z' fill='%23000' stroke='none' /%3E %3Cg stroke-width='2.4'%3E %3Ccircle cx='3' cy='2' r='3.6' /%3E %3Ccircle cx='21' cy='2' r='3.2' /%3E %3Ccircle cx='21' cy='21' r='3.2' /%3E %3Ccircle cx='3' cy='21' r='3.4' /%3E %3C/g%3E %3C/g%3E %3C/svg%3E") no-repeat left center / contain;
        height: calc(var(--marke-hoehe, 1.1rem) * 49.5 / 37);
        width: calc(var(--marke-hoehe, 1.1rem) * 267 / 37);
        margin-left: calc(var(--marke-hoehe, 1.1rem) * -9 / 37);
        margin-bottom: calc(var(--marke-hoehe, 1.1rem) * -7.5 / 37);
    }

    /* Das R. Farbe ueber --marke-signal aenderbar; auf dem Typenschild steht
       dort das dunklere Bernstein, weil das helle gegen Metall nur 1,78:1
       schafft. */
    .marke__wort::before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: var(--marke-signal, var(--signal, #f0bf1a));
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-9 -5 267 49.5' width='267' height='49.5' role='img' aria-label='R' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='butt' stroke-linejoin='miter'%3E %3Ctitle%3ER als Roboterarm%3C/title%3E %3Cmask id='gelenke' maskUnits='userSpaceOnUse' x='-9' y='-5' width='267' height='49.5'%3E %3Cg stroke='none'%3E %3Crect x='-9' y='-5' width='267' height='49.5' fill='%23fff' /%3E %3Ccircle cx='3' cy='2' r='2.4' fill='%23000' /%3E %3Ccircle cx='21' cy='2' r='2' fill='%23000' /%3E %3Ccircle cx='21' cy='21' r='2' fill='%23000' /%3E %3Ccircle cx='3' cy='21' r='2.2' fill='%23000' /%3E %3C/g%3E %3C/mask%3E %3Cg mask='url(%23gelenke)'%3E %3Cpath d='M3 2 H21 A6 6 0 0 1 27 8 V15 A6 6 0 0 1 21 21 H3' /%3E %3Cpath d='M3 19 V37' /%3E %3Cpath d='M15 20 L30 43.5' /%3E %3Cpath d='M0 -3 L-6 .5' /%3E %3Cpath d='M0 7 L-6 3.5' /%3E %3Cpath d='M-7 43.5 L0 37 H6 V43.5 Z' fill='%23000' stroke='none' /%3E %3Cg stroke-width='2.4'%3E %3Ccircle cx='3' cy='2' r='3.6' /%3E %3Ccircle cx='21' cy='2' r='3.2' /%3E %3Ccircle cx='21' cy='21' r='3.2' /%3E %3Ccircle cx='3' cy='21' r='3.4' /%3E %3C/g%3E %3C/g%3E %3C/svg%3E") no-repeat left center / contain;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-9 -5 267 49.5' width='267' height='49.5' role='img' aria-label='R' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='butt' stroke-linejoin='miter'%3E %3Ctitle%3ER als Roboterarm%3C/title%3E %3Cmask id='gelenke' maskUnits='userSpaceOnUse' x='-9' y='-5' width='267' height='49.5'%3E %3Cg stroke='none'%3E %3Crect x='-9' y='-5' width='267' height='49.5' fill='%23fff' /%3E %3Ccircle cx='3' cy='2' r='2.4' fill='%23000' /%3E %3Ccircle cx='21' cy='2' r='2' fill='%23000' /%3E %3Ccircle cx='21' cy='21' r='2' fill='%23000' /%3E %3Ccircle cx='3' cy='21' r='2.2' fill='%23000' /%3E %3C/g%3E %3C/mask%3E %3Cg mask='url(%23gelenke)'%3E %3Cpath d='M3 2 H21 A6 6 0 0 1 27 8 V15 A6 6 0 0 1 21 21 H3' /%3E %3Cpath d='M3 19 V37' /%3E %3Cpath d='M15 20 L30 43.5' /%3E %3Cpath d='M0 -3 L-6 .5' /%3E %3Cpath d='M0 7 L-6 3.5' /%3E %3Cpath d='M-7 43.5 L0 37 H6 V43.5 Z' fill='%23000' stroke='none' /%3E %3Cg stroke-width='2.4'%3E %3Ccircle cx='3' cy='2' r='3.6' /%3E %3Ccircle cx='21' cy='2' r='3.2' /%3E %3Ccircle cx='21' cy='21' r='3.2' /%3E %3Ccircle cx='3' cy='21' r='3.4' /%3E %3C/g%3E %3C/g%3E %3C/svg%3E") no-repeat left center / contain;
        pointer-events: none;
    }
}