/* =============================================================================
   DELTA METRON — shared.css
   ─────────────────────────────────────────────────────────────────────────
   Bauteile, die Web-App UND oeffentliche Seiten zeigen: Fuss und Marken-
   Abzeichen, Knopf-Arten (Register 4.0a), Tastenkappe, Firmenlogos
   (_applyLogo, logo-config.js). Braucht tokens.css
   davor. Seitenspezifische Ergaenzungen (Lage, Groesse) stehen in
   global.css bzw. site.css — nie Farbe, Rahmen oder Hover.
   Seit 05.10.2026 aus global.css und app.html hierher verschoben.
============================================================================= */

/* ═══════════════════════════════════════════════════════════════════════════
   12d. FOOTER
═══════════════════════════════════════════════════════════════════════════ */
.dm-footer {
    /* Kein eigener Hintergrund — der Fuss liegt auf dem Seitengrund. */
    background: transparent;
    color: var(--t3);
    font-family: var(--f-main);
    margin-top: auto;
    /* Oben kein eigener Abstand: Seitenende -> Fuss sind 96px, allein aus
       .dm-page.on (bis 26.09.2026 addierten sich 96 + 24 + 120 + 24 = 264px).
       Unten Platz, damit die schwebende Leiste nichts vom Fuss verdeckt. */
    padding-top: 0;
    padding-bottom: calc(var(--sp-sl-xl) * 2);
    /* border-top + box-shadow entfernt — keine full-width Trennlinie mehr */
}

.dm-footer-inner {
    /* Footer-Background bleibt full-width (visual continuity), aber Inner-Content
       wird gleichermaßen gecontainert wie .dm-page (max-width 1536px, zentriert,
       gleiches Horizontal-Padding). Vorher war nur padding gesetzt — Footer-Content
       lief über die volle Browser-Breite und brach die visuelle Alignment mit
       Sidebar + Page-Content (vor allem bei >1536px Displays sichtbar). */
    max-width: 1280px;                                       /* = .dm-page */
    margin: 0 auto;                                          /* zentriert wie .dm-page */
    /* Seitlich 24px wie die Seite (--main-padding): bis 26.09.2026 16px — der
       Fuss stand 8px links vor den Karten, das Abzeichen braucht die Kante. */
    padding: 0 var(--sp-sl-lg) var(--sp-sl-lg);
    width: 100%;
    box-sizing: border-box;
}

/* Kopf: Marken-Abzeichen + Satz. Ohne Platz links (Normalfall ohne Skript)
   steht das Abzeichen UEBER dem Satz; schwebt es (html.dm-brand-float), ist
   der Platz leer und der Satz allein — das Abzeichen rastet links daneben ein. */
.dm-footer-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-sl-md);                            /* 16 */
    margin: 0 0 var(--sp-sl-xl);                     /* 48 zu den Spalten */
}
html.dm-brand-float .dm-footer-brandslot { display: none; }
.dm-footer-claim {
    font-size: var(--fs-sl-lg);                      /* 20px */
    font-weight: var(--fw-medium);                   /* 500 */
    color: var(--t1);
    line-height: 1.25;
    margin: 0;
    max-width: 32rem;
    /* KEINE Mindesthoehe (bis ft9 50px wie das Abzeichen): sie legte rund 12px
       unsichtbar unter den Text, Satz -> Spalten waren sichtbar 60 statt 48px.
       Das Einrasten braucht sie nicht — main.js richtet das Abzeichen an der
       Mitte des Satzes aus, egal wie hoch er ist. */
}

/* ── Marken-Abzeichen .dm-brand (Register „Marken-Abzeichen“) ──
   Glas wie Steuerleiste und Schnellzugriff (Token --glass-*), gleiche Hoehe
   wie die Leiste (4 + 40 + 4 + Rand = 50px). Schwebend: fest, 48px ueber dem
   unteren Rand, links neben der Inhaltskante — Lage setzt das Skript. */
.dm-brand-wrap { position: relative; display: inline-flex; }
.dm-brand-wrap.is-float { position: fixed; z-index: 10; left: 0; top: 0; }
/* Licht hinter dem Glas: ein stehendes Farbband aus den Farben der Marke
   (User) — Reihenfolge seit ft9: Bronze (--dmkc-ev, EV/EBITDA) · Tuerkis
   (--brand-acc) · Blau (--acc) · Indigo (--dmkc-grw, Growth), alle vier
   gleichzeitig, ohne Bewegung. Bronze nicht mehr neben Indigo: die beiden
   mischten sich unter der Unschaerfe zu Rosa, Bronze verschwand. Pillenform
   statt Oval (ft8): im Oval hatten die Endfarben kaum Flaeche. Ohne Aussage — kein Rot/Gruen, anders
   als das Trendlicht im Kurschart, das sich auf die Kurve daneben bezieht.
   Stehend, weil ein Element im Augenwinkel, das sich von selbst bewegt, beim
   Lesen ablenkt. Nur mit Glasoptik, wie beim Chart. */
.dm-brand-glow {
    display: none;
    position: absolute;
    /* Kleiner als das Abzeichen und nur leicht verwischt: das Licht sitzt
       HINTER dem Glas, statt als Hof nach aussen zu strahlen (ft3 war
       -8/-16px, 45 %, 24px — zu stark, User). */
    inset: 4px 16px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--dmkc-ev)   45%, transparent),
        color-mix(in srgb, var(--brand-acc) 45%, transparent),
        color-mix(in srgb, var(--acc)       45%, transparent),
        color-mix(in srgb, var(--dmkc-grw)  45%, transparent));
    filter: blur(16px);
    pointer-events: none;
}
:root[data-chart-glass="on"] .dm-brand-glow { display: block; }
.dm-brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-sl-sm);
    box-sizing: border-box;
    height: 50px;
    padding: var(--sp-sl-xs) var(--sp-sl-md) var(--sp-sl-xs) var(--sp-sl-sm);
    border-radius: var(--r-sl-card);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-filter);
            backdrop-filter: var(--glass-filter);
    border: 1px solid var(--glass-edge);
    box-shadow: 0 10px 30px rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.22);
    color: var(--t1);
    text-decoration: none;
    white-space: nowrap;
}
[data-theme="light"] .dm-brand { box-shadow: 0 10px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08); }
/* Groesser seit ft7 (User): Zeichen 34px, Name 16px — Hoehe bleibt 50px (Grundlinie mit der Leiste). */
.dm-brand-logo { width: 34px; height: 34px; object-fit: contain; display: block; flex: none; }
.dm-brand-name { font-size: var(--fs-sl-bd); font-weight: var(--fw-semibold); color: var(--t1); }

/* Link columns */
.dm-footer-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 14rem));   /* Produkt · Rechtliches · Kontakt · Folgen (Folgen seit 06.10.2026) */
    gap: var(--sp-sl-lg);                            /* 24 */
}

.dm-footer-col {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sl-sm);                            /* 8 — STYLE-LOCK */
    min-width: 10rem;
}

.dm-footer-col-title {
    font-family: var(--f-main);
    font-size: var(--fs-sl-sm);                      /* 12px — Label-Tier */
    font-weight: var(--fw-medium);                   /* 500 */
    color: var(--t3);                                /* normale Schreibweise (bis 26.09.2026 Versalien) */
    line-height: 1.25;
    margin: 0 0 var(--sp-sl-sm);                     /* 8 + Spalten-gap 8 = 16 zum ersten Link */
}

.dm-footer-link {
    font-size: var(--fs-sl-md);                      /* 14px — wie Landingpage-Footer (war 12, zu klein) */
    color: var(--t2);                                /* lesbarer (war t3, zu blass) */
    text-decoration: none;
    transition: color 0.15s;
    /* Zeile 24px, kein Polster: mit dem Spalten-gap 8 genau 32px je Link
       (vorher 1,6 x 14 + 2 x 4 + 8 = 38,4px, nicht auf der Leiter). */
    line-height: 24px;
    padding: 0;
}

.dm-footer-link:hover {
    color: var(--t1);
}

/* Kontakt-Links mit Icon davor (E-Mail, YouTube) — Icon + Text in einer Zeile.
   Icons in ihrer jeweiligen Marken-/Akzentfarbe, Text bleibt neutral. */
.dm-footer-link-icon {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-sl-sm);
}
.dm-footer-link-icon svg {
    width: var(--icon-sm);                           /* 16 (vorher 18 — kein App-Mass) */
    height: var(--icon-sm);
    flex-shrink: 0;
}
.dm-footer-link-mail svg { color: var(--acc); }        /* E-Mail: Akzent-Blau */
.dm-footer-link-yt svg { color: #FF0000; }             /* YouTube: Marken-Rot */
.dm-footer-link-yt svg .yt-play { fill: #fff; }          /* das Dreieck weiss wie im Original — sonst ein Loch in Hintergrundfarbe */

/* Divider */
.dm-footer-divider {
    height: 1px;
    background: var(--bdr-soft);
    /* 24 ueber und unter der Linie (User; ft9 kurz 48 oben). */
    margin: var(--sp-sl-lg) 0;
}

/* Bottom */

.dm-footer-disc {
    font-size: var(--fs-sl-sm);                      /* 12px */
    color: var(--t3);                                /* lesbarer (war t4, zu blass) */
    line-height: 20px;                               /* vorher 1,7 = 20,4px */
    margin: 0 0 var(--sp-sl-md);                     /* 16 — STYLE-LOCK (war 20) */
    max-width: 60rem;
}

.dm-footer-copy {
    display: flex;
    align-items: center;
    gap: var(--sp-sl-md);                            /* 16 — STYLE-LOCK */
    font-size: var(--fs-sl-sm);                      /* 12px */
    color: var(--t3);                                /* war --t4: in Hell #D0D0D0 auf #E4E4E4 unlesbar */
}

/* Version: getoente Pille (Register 3.3 — Marken tragen Flaeche, keinen Rahmen). */
.dm-footer-version {
    padding: var(--sp-sl-xs) var(--sp-sl-sm);        /* 4 / 8 */
    border-radius: var(--r-sl-inner);
    background: var(--neutral-bg);
    color: var(--t2);
    font-size: var(--fs-sl-sm);                      /* 12px (1.2) */
    font-weight: var(--fw-medium);
}

/* Responsive */
@media (max-width: 960px) {
    .dm-footer-inner { padding: 0 var(--sp-sl-md) var(--sp-sl-lg); }   /* 0 / 16 / 24 */
    .dm-footer-links { grid-template-columns: repeat(2, minmax(0, 14rem)); row-gap: var(--sp-sl-xl); }
}
/* Handy: alle Spalten untereinander — lange Eintraege (E-Mail) stossen sonst
   an die Nachbarspalte. */
@media (max-width: 600px) {
    .dm-footer-links { grid-template-columns: minmax(0, 1fr); }
}

/* ═════════════════════════════════════════════════════════════════════
   KNOPF-STANDARD — Register 4.0a / 4.1 (Bauteile seit 22.09.2026)
   ─────────────────────────────────────────────────────────────────────
   Je Art EINE Klasse. Sie traegt das ganze Aussehen. Eine Ort-Klasse
   daneben darf nur Lage und Groesse setzen — nie Farbe, Rahmen, Hover.

     .dm-sel-group  Behaelter einer Auswahl (role="tablist"): keine Flaeche,
                    keine Bahn, kein Rahmen, 8px zwischen den Knoepfen
     .dm-sel        Auswahl — eine von mehreren (role="tab")
                      Ruhe     keine Flaeche, --t3, 500
                      Hover    --sel-hover, --t1
                      aktiv    --sel-on, --t1, Gewicht bleibt 500 — NUR ueber aria-selected
     .dm-act        Aktion — tut oder oeffnet etwas
                      Ruhe     Rahmen --act-bdr, Text --t1
                      Hover    + --act-hover; offenes Menue ebenso
     .dm-ico        Symbolknopf — Aktion als Symbol, 28x28, Symbol 16px
                      gesetzt  Symbol gefuellt, sonst unveraendert — NUR ueber
                               aria-pressed (Lesezeichen). Nur fuer Symbole
                               mit geschlossener Form.

   Alle: 28px hoch, Radius 6. Flaechen und Rahmen sind Anteile der
   Schriftfarbe (durchscheinend) — gleiches Bild auf Seite, Karte, Menue,
   Glas, in allen Themes. Deaktiviert: 40 %, kein Hover (Register 4.2).
   Fokus ohne Blau: Aktion/Symbol wie Hover + kraeftigerer Rahmen,
   Auswahl mit feinem Innenrand (--t1 40 %). */
.dm-sel-group {
    display: inline-flex;
    gap: var(--sp-sl-sm);
    flex-wrap: wrap;
}
.dm-sel,
.dm-act,
.dm-ico,
.dm-main {
    display: inline-flex; align-items: center; justify-content: center;
    box-sizing: border-box;
    height: 28px;
    border-radius: var(--r-sl-control);
    background: transparent;
    font-family: var(--f-main);
    font-size: var(--fs-sl-sm);
    font-weight: var(--fw-medium);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color .12s var(--ease), background-color .12s var(--ease), border-color .12s var(--ease), opacity .12s var(--ease);
}
.dm-sel-group[hidden], .dm-sel[hidden], .dm-act[hidden], .dm-ico[hidden], .dm-main[hidden] { display: none; }
/* Auch ein Link kann ein Knopf sein (Impressum, Datenschutz). */
a.dm-act, a.dm-ico, a.dm-main { text-decoration: none; }
.dm-sel svg, .dm-act svg, .dm-ico svg, .dm-main svg { width: var(--icon-sm); height: var(--icon-sm); display: block; flex: none; }
/* Auswahl nur mit Symbol: quadratische 28er-Box (Register 4.1 / 13.2). */
.dm-sel:has(> svg:only-child) { width: 28px; padding: 0; }
.dm-sel {
    gap: var(--sp-sl-sm);
    padding: 0 var(--sp-sl-sm);
    border: none;
    color: var(--t3);
}
.dm-sel:hover { color: var(--t1); background: var(--sel-hover); }
.dm-sel[aria-selected="true"] {
    color: var(--t1);
    background: var(--sel-on);
    /* Gewicht bleibt 500 (seit 26.09.2026): 600 ist breiter, beim Umschalten
       rueckten die Nachbarn um 1-2px. Die Flaeche markiert die Auswahl. */
}
.dm-act {
    gap: var(--sp-sl-sm);
    padding: 0 var(--sp-sl-sm);
    border: 1px solid var(--act-bdr);
    color: var(--t1);
}
.dm-ico {
    width: 28px;
    padding: 0;
    border: 1px solid var(--act-bdr);
    color: var(--t1);
}
.dm-act:hover,
.dm-ico:hover,
.dm-act[aria-expanded="true"],
.dm-ico[aria-expanded="true"] { background: var(--act-hover); }
.dm-ico[aria-pressed="true"] svg { fill: currentColor; }
/* HAUPTKNOPF — die Ausnahme (Register 4.0a): voll gefuellt in der
   Markenfarbe, Schrift weiss, kein Rahmen; beim Ueberfahren eine Stufe
   dunkler. Hoechstens einer je Fenster oder Bereich („Founding-Platz
   sichern", „Absenden", „Uebernehmen"). */
.dm-main {
    gap: var(--sp-sl-sm);
    padding: 0 var(--sp-sl-md);
    border: none;
    background: var(--brand-acc);
    color: var(--btn-action-text);
    font-weight: var(--fw-semibold);
}
.dm-main:hover,
.dm-main:focus-visible { background: var(--brand-acc-h); }
.dm-main:focus-visible { outline: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--btn-action-text) 50%, transparent); }
.dm-sel:disabled, .dm-act:disabled, .dm-ico:disabled,
.dm-sel[aria-disabled="true"], .dm-act[aria-disabled="true"], .dm-ico[aria-disabled="true"] {
    opacity: 0.4; cursor: default; background: transparent;
}
.dm-main:disabled, .dm-main[aria-disabled="true"] { opacity: 0.4; cursor: default; background: var(--brand-acc); }
.dm-act:focus-visible,
.dm-ico:focus-visible {
    outline: none; background: var(--act-hover);
    border-color: color-mix(in srgb, var(--t1) 40%, transparent);
}
.dm-sel:focus-visible {
    outline: none; color: var(--t1);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1) 40%, transparent);
}

/* TASTENKAPPE .ss-kbd — Rahmen wie Aktionen (Register 4.0a, Ausnahme
   Tastenkappe). Bis 05.10.2026 im Inline-Style von app.html. */
.ss-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 var(--sp-sl-xs); box-sizing: border-box; font-size: var(--fs-sl-sm); font-weight: var(--fw-medium); color: var(--t1); background: transparent; border: 1px solid var(--act-bdr); border-radius: var(--r-sl-inner); flex: 0 0 auto; }

/* FIRMENLOGOS — seit 05.10.2026 aus global.css hierher (Landingpage nutzt
   denselben Mechanismus: _applyLogo in logo-config.js). */
/* ═══ ZENTRALER DEKO-RESET fuer alle von _applyLogo verarbeiteten Logos ═══
   Killt die alte, pro-Stelle kopierte Deko (weisser bg, padding, ring), damit
   ueberall dasselbe Verhalten gilt. Kategorie/Wrapper regeln Hintergrund+Groesse. */
img.dm-logo-applied {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  /* dezenter aeusserer Ring, damit die Kreiskante gegen die Card sichtbar bleibt
     (gilt fuer own/lokale Logos ohne Wrapper) */
  box-shadow: 0 0 0 1px rgba(128,128,128,0.28) !important;
}
/* Bei gewrappten (transparenten) Logos sitzt der Ring am Wrapper, nicht am img */
.dm-logo-wrap > img.dm-logo-applied { box-shadow: none !important; }
.dm-logo-wrap { box-shadow: 0 0 0 1px rgba(128,128,128,0.28); }

/* ═══ LOGO-KATEGORIEN (Worker via X-DM-Logo-Cat, angewandt durch _applyLogo) ═══
   TRANSPARENTE Logos bekommen einen Wrapper (.dm-logo-wrap): der Wrapper ist der
   volle Kreis mit Hintergrundfarbe, das Bild darin wird auf 70% verkleinert ->
   Quadrat liegt IM Kreis, laeuft nie ueber. Lokale Logos (ohne Kategorie) haben
   keinen Wrapper -> nur rund gestanzt (unangetastet). */
.dm-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  box-sizing: border-box;
  flex: 0 0 auto;
}
.dm-logo-wrap > img {
  width: 70% !important;
  height: 70% !important;
  object-fit: contain !important;   /* schlaegt .sid-logo object-fit:cover */
  border-radius: 0 !important;
  box-shadow: none !important;       /* schlaegt .sid-logo Ring */
  display: block !important;
  background: transparent !important;  /* schlaegt .idx-badge-logo/.search-item-logo eigenen bg */
}
/* Alle Firmenlogos sind rund (seit 26.09.2026, User). Die eckige Variante
   .dm-logo-sq (Kalender) ist entfallen — Register „Logos rund“. */

/* dunkles Logo -> heller Kreis */
.dm-logo-wrap.logo-cat-light { background: #ffffff; }
/* helles Logo -> dunkler Kreis */
.dm-logo-wrap.logo-cat-dark  { background: #1a1a1a; }
/* eigener Hintergrund -> sollte gar keinen Wrapper haben; falls doch, transparent */
.dm-logo-wrap.logo-cat-own   { background: transparent; }
.dm-logo-wrap.logo-cat-own > img { width: 100% !important; height: 100% !important; }
/* mehrfarbig -> folgt dem Theme */
/* logo-cat-multi ist abgeschafft: der Worker liefert seit LOGO_VER 3 nur noch
   light|dark|own, die Entscheidung faellt dort anhand der Logo-Helligkeit.
   Vorher haengte der Kreis am Theme — dasselbe Logo sah im Light- und im
   Dark-Mode anders aus, obwohl sich das Logo nicht geaendert hat.
   Diese Regel faengt nur noch Antworten ab, die als LOGO_VER 2 in einem
   Browser-Cache liegen (max-age 4 Wochen), und behandelt sie wie 'light'.
   TODO 2026-Q4: entfernen, wenn kein Client mehr LOGO_VER 2 gecacht hat. */
.dm-logo-wrap.logo-cat-multi { background: #ffffff; }

/* TEXTFELDER .set-* (Register 5.1c / 5.4) — seit 06.10.2026 aus app.html
   (Inline-Stil) hierher: App-Einstellungen UND Anmeldefenster der Landingpage
   nutzen dasselbe Feld, eine Definition. */
.set-field{ margin-bottom:var(--sp-sl-md); }
.set-field-label{ display:block; font-size:var(--fs-sl-sm); font-weight:var(--fw-medium); color:var(--t2); margin-bottom:var(--sp-sl-xs); }
.set-field-hint{ font-size:var(--fs-sl-sm); color:var(--t3); margin-top:var(--sp-sl-xs); }
/* Textfeld nach Register 5.1 (seit 22.09.2026): wie das Zahlenfeld .dmi und
   wie ein Aktionsknopf — keine Flaeche, Rahmen --act-bdr, Ueberfahren und
   Fokus: Rahmen tritt auf 40 % Schriftfarbe vor. Vorher gefuellt (--surf-2)
   mit festem --bdr und hellem --t3-Ring beim Fokus. */
.set-input{ width:100%; box-sizing:border-box; padding:var(--sp-sl-xs) var(--sp-sl-sm); font-family:var(--f-main); font-size:var(--fs-sl-md); line-height:normal; color:var(--t1); background:transparent; border:1px solid var(--act-bdr); border-radius:var(--r-sl-control); outline:none; transition:border-color .12s var(--ease); }
.set-input:hover, .set-input:focus{ border-color:color-mix(in srgb, var(--t1) 40%, transparent); }
/* Fokus zeigt das Feld ueber seinen Rahmen — kein zusaetzlicher Ring. Noetig,
   seit die Regel hier VOR global.css steht: dessen allgemeines :focus-visible
   (Register 3.3) wuerde sonst einen zweiten Rand zeichnen. */
.set-input:focus-visible{ outline:none; }
/* Chrome faerbt vorausgefuellte Felder hellblau — das Feld bleibt Karte. */
.set-input:-webkit-autofill, .set-input:-webkit-autofill:hover, .set-input:-webkit-autofill:focus{ -webkit-box-shadow:0 0 0 1000px var(--card) inset; -webkit-text-fill-color:var(--t1); caret-color:var(--t1); }
.set-textarea{ resize:vertical; min-height:110px; font-family:inherit; }
.set-field-row{ display:flex; gap:var(--sp-sl-md); }
.set-field-row .set-field{ flex:1; }

/* PLATZHALTER in jedem Eingabefeld (Register 5.4, seit 22.09.2026; seit 06.10.2026 hier statt in global.css): --t3 aus
   dem Theme — die leiseste Schriftfarbe, klar leiser als ein echter Wert
   (--t1). Vorher uneinheitlich: --t3, --t2 oder das Browser-Grau.
   opacity:1, weil Firefox Platzhalter zusaetzlich abdunkelt. */
input::placeholder,
textarea::placeholder { color: var(--t3); opacity: 1; }