/*
 * rechnungen.io – Logo-Lockup
 * Ergänzt die bestehenden Logo-Klassen (.nav-logo, .footer-logo, .panel-logo,
 * .sidebar-logo a, .logo). Überschreibt bewusst nichts davon –
 * Schriftart, Farbe und Größe bleiben in den jeweiligen Seiten definiert.
 *
 * Alle Maße sind em-basiert und skalieren daher automatisch mit der
 * font-size der jeweiligen Logo-Klasse mit.
 */

/* ── Hexagon-Icon vor der Wortmarke ──────────────────────────────
   height 1.6em  = ca. 2,5x Versalhöhe von Syne (capHeight 0.65em)
   vertical-align: -0.475em zentriert das Icon optisch auf der
   Versalhöhe der Wortmarke:  0.325em (Mitte Versalhöhe) − 0.8em (halbe Iconhöhe)
*/
.logo-mark {
    height: 1.6em;
    width: auto;
    vertical-align: -0.475em;
    margin-right: 0.5em;
    flex: none;
}

/* ── Mini-Hexagon als Punkt zwischen "rechnungen" und "io" ───────
   Ersetzt den literalen Punkt. background: currentColor erbt
   automatisch die Orange-Farbe des umgebenden <span>.
   height 0.44em ≈ x-Höhe (0.5em); vertical-align 0.03em zentriert
   das Hexagon im x-Höhen-Band.
   Breite = Höhe × 0.866 (Geometrie des Pointy-Top-Hexagons).
*/
.nav-logo > span::before,
.footer-logo > span::before,
.panel-logo > span::before,
.sidebar-logo a > span::before,
.logo > span::before {
    content: "";
    display: inline-block;
    width: 0.38em;
    height: 0.44em;
    margin: 0 0.18em;
    vertical-align: 0.03em;
    background: currentColor;
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* Fallback: Browser ohne clip-path zeigen einen quadratischen Punkt
   statt eines Hexagons – akzeptabel, aber nie einen leeren Kasten. */
@supports not (clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)) {
    .nav-logo > span::before,
    .footer-logo > span::before,
    .panel-logo > span::before,
    .sidebar-logo a > span::before,
    .logo > span::before {
        width: 0.3em;
        height: 0.3em;
        border-radius: 1px;
    }
}