/* ============================================================
 * app.css — Phase-2 PurgeCSS + Merge, Darkmode entfernt.
 * Reihenfolge: styles → additional → accentcolor → header
 *              → quicksearch → print (@media print)
 * ============================================================ */

/* CSS-Variablen — zentrales Farb-Set (Stufe 1 der Darkmode-Vorbereitung,
   07/2026): alle im Backend effektiv rendernden Farben laufen über diese
   Variablen. Tote Alt-Theme-Selektoren (ce_*, mod_*, smartmenu, #bottom …)
   behalten bewusst ihre Literale — sie werden nie gerendert. Achtung: die
   Zeichenfolge Stern+Slash beendet einen CSS-Kommentar AUCH mitten im Text
   (genau das hat diese Regel am 06.07. browserseitig gekillt). Ein künftiger
   Dark-Mode braucht nur noch diesen Block umzuschalten (Stufe 2; dazu
   fehlen dann noch Chart.js-/Toast-Paletten + Inline-Styles in Templates).
   Text auf gefüllten Akzent-/Danger-Flächen bleibt literal #fff
   (theme-invariant, Buttons behalten weißen Text auch im Dark-Mode). */
:root {
    /* Native Widgets (Scrollbars, Selects, Date-Picker) folgen dem Modus;
       Basis hell, html[data-theme="dark"] (unten) schaltet um. */
    color-scheme: light;

    /* Flächen */
    --bg-primary:    #ffffff;
    --bg-secondary:  #f4f4f4;
    --bg-soft:       #fafbfa;             /* kaum abgesetzte Panels (Finanz-Filter) */
    --bg-code:       #f5f5f5;             /* code/pre */
    --bg-header:     #252538;             /* dunkler Header — bleibt auch im Dark-Mode dunkel */
    --input-bg:      #ffffff;             /* echter Input-Hintergrund (vorher fälschlich #f4f4f4 —
                                             einziger Alt-Nutzer war der Autofill-Hack, der Felder grau färbte) */
    --table-odd:     #ffffff;
    --table-even:    rgba(0, 0, 0, 0.03);
    --table-sum:     rgba(0, 0, 0, 0.07);  /* Summenzeilen (tr.summe) — kräftiger als das Zebra */
    --hover-bg:      rgba(0, 0, 0, .04);  /* Standard-Hover-Wash (Subnav/Zeitnav/Filter) */

    /* Text */
    --text-primary:  #1d1c1d;             /* echter body-Wert (vorher #333-Altlast aus darkmode.css) */
    --text-heading:  #3b3c42;             /* h1–h6 */
    --text-secondary:#616061;             /* .smaller */
    --ui-text:       #555;                /* Nav-Tabs, Segmente, Sekundär-Buttons */
    --text-muted:    #888;                /* gedämpfte Labels/Hints (schluckt #777/#8a94a0/#969696-Drift) */

    /* Linien, Schatten, Overlay */
    --border-color:  rgba(0, 0, 0, 0.1);
    --control-border:rgba(0, 0, 0, .2);   /* Input-/Button-Rahmen (#ccc auf Weiß = identisch) */
    --control-border-hover: #999;
    --link-underline:rgba(160, 160, 160, 0.65); /* Punktlinie klassenloser Links */
    --shadow:        rgba(0, 0, 0, 0.1);
    --scrollbar-thumb: rgba(0, 0, 0, 0.22);
    --overlay:       rgba(0, 0, 0, .7);   /* mobiles Menü-Overlay */

    /* Akzent */
    --accent-color:  #20a478;             /* Kanon-Grün; Alt-Drift #20ae7e hierauf vereinheitlicht */
    --accent-weak:   rgba(32, 164, 120, .12); /* aktive Chips/Segmente */
    --accent-wash:   rgba(32, 164, 120, .08); /* Akzent-Hover */
    --accent-soft-border: #a9d9c8;        /* Rahmen der Primär-Buttons */

    /* Signale (Text-Utilities .red/.green/… + Status-Hintergründe) */
    --red:           #BA2E3A;
    --green:         #20a478;             /* bewusst eigene Variable neben --accent-color:
                                             Text-Signal kann im Dark-Mode heller werden als der UI-Akzent */
    --blue:          rgba(18, 100, 163, 1); /* Achtung: Klasse heißt .grey, rendert aber blau */
    --navy:          #000099;
    --orange:        #FF7F50;
    --danger:        #c0392b;             /* destruktive Buttons */
    --danger-dark:   #a93226;
    --danger-soft-border: #e0b4ae;
    --green-bg:      rgba(32, 164, 120, 0.15);
    --red-bg:        rgba(186, 46, 58, 0.15);
    --blue-bg:       rgba(0, 138, 215, 0.15);
    --yellow-bg:     rgba(255, 255, 47, 0.15);

    /* Stufe 1b — Inline-Style-Ablösung (Klassen am Dateiende) */
    --text-faint:    #bbb;                /* Platzhalter-/Ghost-Text (schluckt #aaa-#ccc-Inline-Drift) */
    --red-dim:       #b08a8a;             /* leise destruktive Links */
    --box-green-bg:  #f4f9f6;             /* Pastell-Hinweisboxen */
    --box-green-border: #cde9dd;
    --box-blue-bg:   #f5f8fc;
    --box-blue-border:  #cdd9ec;
    --box-yellow-bg: #fff8e1;
    --box-yellow-border:#ffe69c;
    --box-red-bg:    #f8d7da;
    --box-red-border:   #f5c6cb;
    --box-red-text:  #721c24;
    --box-yellow-text:  #7a4a00;
    --box-green-text:   #1e5b22;
    --box-blue-text:    #3a4a63;

    /* Stufe 2 — Toasts (flash_toast.js/dup_check.js lesen diese zur Laufzeit)
       + Info-Signal. Werte = bisherige JS-Konstanten. */
    --info:          #b8860b;
    --toast-success-bg: rgba(232, 249, 240, 0.92);
    --toast-warn-bg: rgba(255, 235, 237, 0.92);
    --toast-info-bg: rgba(255, 246, 220, 0.92);
    /* Breite der Datums-Spalte in den Listen-Tabellen (Aufbau Nr|Datum|Titel).
       Bewusst breiter als der reine Datumstext (dd.mm.yyyy ≈ 5rem), damit
       Luft zwischen Datum und der linksbündigen Titel-/Bezeichnungsspalte
       entsteht. Genutzt in der Suche (suche.php, page-scoped) und auf den
       Finanzlisten via .finanzliste. Hier zentral drehen. */
    --datum-col-width: calc(7rem + 10px);
    /* Standard-Feldbreite aller Formularfelder (input/select/textarea, s.u.).
       In rem (Wurzel-Schrift), NICHT em — Begruendung an der Regel selbst.
       Seiten mit eigenem Grid-/Flex-Formular (einstellungen.php: Profil-Grid,
       iCal-Feld) deckeln ihre Spalten hierauf, sonst waechst das Feld auf
       breiten Monitoren unbegrenzt mit dem Container. Hier zentral drehen. */
    --field-w: 33.2rem;
}

/* === styles.css === */


/* TABLES --> */ 

/* ZEBRA-STREIFEN — ein System, eine Ausnahme.

   Standard (~100 Tabellen): CSS zaehlt die Zeilen selbst. Die Tabelle waehlt per
   .odd / .even nur, welche Zeile den Streifen bekommt (beide Varianten faerben
   dieselbe Farbe, sie starten nur versetzt). Beim Sortieren ordnet tablesorter
   die <tr> um und :nth-child rechnet sich automatisch neu.
   Kopfzeilen sind geschuetzt: tr.white setzt --bg-primary mit !important.

   Ausnahme (tr.row-even / tr.row-odd, serverseitig in PHP vergeben): nur dort,
   wo :nth-child nicht richtig zaehlen kann, weil Zeilen dazwischenliegen, die
   keinen Streifen tragen duerfen — Monats-Header (auftritte.php Aktuell-Ansicht)
   und versteckte Detailzeilen (user.php). Solche Tabellen sind bewusst NICHT
   sortierbar: die Klasse klebt an der Zeile und muesste sonst nach jedem Sort
   neu vergeben werden. Wer eine davon sortierbar macht, muss sie vorher auf
   .odd / .even umstellen.
   Optisch identisch, da --table-odd == --bg-primary in beiden Themes. */
table.odd tr:nth-child(odd) {
    background-color: var(--table-even);
}

table.even tr:nth-child(even) {
    background-color: var(--table-even);
}

tr.row-even {
    background-color: var(--table-even);
}

tr.row-odd {
    background-color: var(--table-odd);
}

/* SUMMENZEILEN (Quartals-/Jahres-Gesamt in den Finanztabellen): kräftigerer
   Wash als der Zebra-Streifen + Summenstrich oben, Schrift wie .strong.
   !important wie bei tr.white — die Zeilen zählen im nth-child-Zebra mit
   und fielen sonst je nach Position mal gestreift, mal transparent aus. */
tr.summe {
    background-color: var(--table-sum) !important;
}
tr.summe > td {
    border-top: 1px solid var(--control-border);
    font-weight: 600;
}

/* Month-Header hat keine Hintergrundfarbe */
tr.transparent {
    background-color: transparent !important;
}

/* <-- Tables  */


.h5-header { 
  margin-bottom:25px;
  line-height:1.3;
  word-wrap:break-word;
  font-weight:700;
  font-size:1.333rem  
}

.gig-month-header {
  font-weight: bold; text-align: left; padding: 5px;
  
}
/* Masonry --> */

	.item { /* Masonry bricks or child elements */
	    margin: 0 0 2em 1em;
	    width: 95%;
	    font-size:0.9em
	}

@media only screen and (min-width: 1024px) {
  .masonry {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {

  .masonry {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

	/* <-- Masonry */


/* Page-Navigation Buttons */


.content {
	margin-top:-30px auto!important;
  margin-bottom:30px auto;
	-webkit-column-count: 1;
	-webkit-column-gap: 0;
	-moz-column-count: 1;
	-moz-column-gap: 0;
	column-count: 1;
	column-gap: 0;
}



@media screen and (min-width:895px) {    /* ab dieser breite nur noch einspaltig */
	.content {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}
}
/* ── tablesorter: Klick-Affordanz + Sortier-Icon ─────────────────────────────
   Gilt fuer alle Tabellen mit class="tablesorter" (auftritte, fixkosten,
   pianocello, cronjobs, EUeR-Aushilfen, Investitionen, user_tabellen, …).
   Kopfzellen sind je nach Seite <td> ODER <th> — beide adressieren.

   Das Icon liefert kein <i class="fa">, sondern tablesorter selbst: der
   headerTemplate-Default '{content}{icon}' (assets/js/tablesorter_parsers.js)
   setzt <i class="tablesorter-icon"> in jeden Header. Nur so gibt es ein echtes
   Element, auf dem zwei Pseudo-Elemente uebereinander liegen koennen. Ohne
   JavaScript existiert es nicht — dann fehlt das Icon, und sortiert wird ohnehin
   nicht. */
.tablesorter thead td,
.tablesorter thead th { cursor: pointer }
/* Spalten mit sorter:false bekommen die Klasse von tablesorter selbst. Ohne das
   hier verspraeche der Zeiger eine Klickbarkeit, die es nicht gibt. */
.tablesorter thead td.sorter-false,
.tablesorter thead th.sorter-false { cursor: default }
.tablesorter thead .sorter-false .tablesorter-icon { display: none }

/* Das <i> ist ein atomarer Inline-Kasten und damit eine Umbruchstelle: ohne
   nowrap rutscht das Icon unter den Spaltentitel und die Kopfzeile wird doppelt
   so hoch. Spaltentitel sind durchweg kurz (laengster im Projekt: 18 Zeichen),
   nowrap kostet hier also nichts. Gilt fuer beide Sortier-Arten. */
.tablesorter thead .tablesorter-header-inner,
a.sortlink { white-space: nowrap }

/* ── .sort-icon: EIN Icon fuer beide Sortier-Arten ───────────────────────────
   1. tablesorter (client-seitig, sortiert die geladenen Zeilen): das <i> kommt
      aus '{icon}', die Klasse aus cssIcon — beides Default in
      assets/js/tablesorter_parsers.js. Zustand steckt in der Kopfzelle
      (.tablesorter-headerAsc/-Desc), die tablesorter selbst setzt.
   2. Kundenkartei (server-seitig, ORDER BY ueber den GANZEN Datenbestand, nicht
      nur die 200er-Seite): das <i> schreibt der $sortLink-Helper, den Zustand
      traegt es selbst als .is-asc / .is-desc.
   Beide sehen identisch aus, obwohl das eine im Browser und das andere in der
   Datenbank sortiert. */
.sort-icon {
    position: relative;                 /* Bezug fuer das ::after-Overlay */
    display: inline-block;
    margin-left: 6px;
    font-family: 'Font Awesome 6 Free'; /* selbst gehostet, in header.php geladen */
    font-weight: 900;                   /* Solid-Face */
    font-style: normal;
    font-size: 12px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
/* Grundzustand: beide Chevrons, grau. Bleibt auch aktiv liegen — das Overlay
   faerbt nur die eine Haelfte, weil fa-sort / fa-sort-up / fa-sort-down in
   FontAwesome deckungsgleich gezeichnet sind. */
.sort-icon::before {
    content: '\f0dc';                   /* fa-sort */
    color: var(--text-muted, #616061);
    opacity: 0.5;
}
.tablesorter thead .tablesorter-headerAsc  .sort-icon::after,
.tablesorter thead .tablesorter-headerDesc .sort-icon::after,
.sort-icon.is-asc::after,
.sort-icon.is-desc::after {
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-color, #20a478);
}
.tablesorter thead .tablesorter-headerAsc .sort-icon::after,
.sort-icon.is-asc::after  { content: '\f0de' }                                  /* fa-sort-up */
.tablesorter thead .tablesorter-headerDesc .sort-icon::after,
.sort-icon.is-desc::after { content: '\f0dd' }                                  /* fa-sort-down */

/* Sortier-Links der Kundenkartei: erben die Textfarbe der Kopfzeile und tragen
   keine Punktlinie (geklasster Link → a:not([class]) greift nicht). Die
   Affordanz liefern Zeiger und Icon. */
a.sortlink { color: inherit; text-decoration: none }

input[readonly] {cursor:not-allowed;}
i.fa{margin-right:0.5em;position:relative;}
ul.dot { list-style: none; padding: 0; margin: 0; }
ul.dot li:before { content: "â‹…"; padding-right: 3px; }
ul.dot li { padding: 0; margin: 0; }
span.underline{text-decoration:underline}
.orange {color:var(--orange)}
.fadeout {color:var(--green)}
.grey {color:var(--blue)}
span.red {color:var(--red)}
span.blue {color:var(--navy)}
.pointer {cursor: pointer;}

.smaller{color: var(--text-secondary); font-size:smaller}
.small{font-size:small}

.italic{font-style:italic}

span.notizen{color:var(--green); font-size:smaller}

.red {color:var(--red)}
.id{width:10px!important}
.datetime{width:100px!important}
.green {color:var(--green);}
/* Aktiver Filter-Link (Finanz-Filterbar + History-Panels); .current ist vom Hauptmenue belegt */
.filter-link {color:inherit;}
.filter-link.is-active {color:var(--accent-color);}
.background-green {background-color: var(--green-bg)!important}
.background-red {background-color: var(--red-bg)!important}
.background-blue {background-color: var(--blue-bg)!important}
.background-yellow {background-color: var(--yellow-bg)!important}

/* GoBD-Festschreibung: stornierte Originale bleiben sichtbar, sind aber
   erkennbar erledigt (Gegenbuchung existiert). Farbneutral via opacity,
   funktioniert daher in Light + Dark gleichermaßen. */
tr.ist-storniert td { text-decoration: line-through; opacity: .55; }

/* Festschreib-Banner (einnahmen/ausgaben-Liste) + Hinweis-Box in der
   Bearbeiten-Ansicht festgeschriebener Einträge */
.fest-banner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    border: 1px solid var(--control-border); border-radius: 8px;
    background: var(--bg-soft);
    padding: 10px 14px; margin: 0 0 18px;
}
.fest-banner-text { display: flex; flex-direction: column; gap: 2px; }
.fest-banner form { margin: 0; }
/* KU-Grenzen-Warnung (inc_ku_grenzen_banner): gleiche Box, die linke Kante
   signalisiert die Stufe — Bernstein = Vorwarnung, Rot = Grenze gerissen. */
.fest-banner.ku-warn  { border-left: 3px solid #b45309; }
.fest-banner.ku-alarm { border-left: 3px solid var(--red); }
.fest-hinweis {
    border: 1px solid var(--control-border); border-left: 3px solid var(--accent-color);
    border-radius: 8px; background: var(--bg-soft);
    padding: 10px 14px; margin: 0 0 14px; max-width: 620px;
}
.fest-hinweis .fa-lock { color: var(--accent-color); margin-right: 6px; }

/* Änderungshistorie pro Datensatz (inc_edit_history_panel.php) —
   read-only-Verlauf auf Edit-Seiten + vorgang.php. In der rechten
   Grid-Spalte (Edit-Masken zweispaltig) startet das Panel oben bündig. */
.edit-history { margin-top: 26px; max-width: 680px; }
.autogrid_row > .column > .edit-history:first-child { margin-top: 0; }
.edit-history h5 { margin: 0 0 6px; }
.edit-history-list { line-height: 1.6; overflow-wrap: anywhere; }
.edit-history-time, .edit-history-wer { color: var(--text-muted); }

.privat {color:var(--text-muted)}

table {width:100%;text-align:left; border: 0px}
table.gigs td{padding:2px 8px;line-height:2}
/* Finanzlisten (Einnahmen/Ausgaben/Auszahlungen): Aufbau Nr | Datum | Titel.
   Datums-Spalte (Spalte 2) auf feste Breite mit Luft zur Titel-Spalte —
   gleicher Abstand wie in der Suche. Greift nur auf so markierte Tabellen,
   nicht auf Statistik-/Abschreibungs-Tabellen derselben Seiten. */
table.gigs.finanzliste tr > :nth-child(2) {
    width: var(--datum-col-width);
    white-space: nowrap;
}
/* Listen, deren ERSTE Spalte das Datum ist (Kundenkartei-Edit: die
   gestapelten Datensatz-Listen Angebote/Belege/Einnahmen/Anfragen). Gleiche
   Datums-Breite/Luft wie in den Finanzlisten — nur in Spalte 1 statt 2. */
table.gigs.datumliste tr > :first-child {
    width: var(--datum-col-width);
    white-space: nowrap;
}
tr.white {background-color: var(--bg-primary)!important;}

/* --- Stufe 1: breite Datentabellen mobil sanft scrollbar + kompakter --- */
@media (max-width: 767px) {
  /* Tabelle wird zum eigenen Scroll-Container (kein Wrapper noetig) */
  table.gigs {
    display: block;
    width: 100%;
    /* display:block macht die Tabelle shrink-to-fit; min-width:100% zwingt
       sie auf volle Breite (sonst schmaler als der Container, wenn der
       Inhalt schmal ist), scrollt aber weiterhin, wenn der Inhalt breiter wird. */
    min-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  table.gigs td,
  table.gigs th { padding: 3px 8px; line-height: 1.6; font-size: 0.9rem; }
  /* schlanke, sichtbare Scrollleiste als Affordance ("hier gibt's mehr") */
  table.gigs::-webkit-scrollbar { height: 6px; }
  table.gigs::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
}

/* --- Scroll-Fenster mit fixiertem Tabellenkopf (EÜR-Includes, UStVA)
   Der Wrapper scrollt selbst (vertikal wie horizontal), die erste Zeile
   bleibt dabei als Kopf oben sichtbar. Bewusst Container- statt
   Viewport-sticky: der overflow-Wrapper und die eingeblendete
   .stickyheader-Kopfleiste machen Viewport-sticky unbrauchbar. */
.tabellen-scroll {
    overflow: auto;
    /* Fensterhöhe minus Platz für Kopf/Menü. Die EÜR lässt Headline +
       Jahres-Tabs bewusst draußen — der Container darf dafür anfangs unten
       rausragen. Auf sehr flachen Viewports (Handy quer) nicht unter
       320px fallen. */
    max-height: max(320px, calc(100vh - 180px));
}
/* Kopf = erste Zeile der ERSTEN Zeilengruppe (thead, sonst das auch implizit
   erzeugte tbody). Ein nacktes tr:first-child klebte bei thead+tbody-Tabellen
   (EÜR-Zusammenfassung) zusätzlich die erste Datenzeile fest. */
.tabellen-scroll table > :first-child > tr:first-child td,
.tabellen-scroll table > :first-child > tr:first-child th {
    position: sticky;
    top: 0;
    background: var(--bg-primary);
    box-shadow: 0 1px 0 var(--border-color); /* Kante beim Drunterscrollen */
    z-index: 2;
}
/* Stufe 1 (oben) macht table.gigs mobil selbst zum Scroll-Container —
   im Wrapper muss der Wrapper beide Achsen übernehmen, sonst klebt der
   Kopf an der falschen Box (die Tabelle scrollt vertikal nie). */
.tabellen-scroll table.gigs {
    display: table;
    overflow: visible;
}
/* Variante .viewport-sticky (EÜR-Jahresansicht, UStVA-Seiten): ab Desktop KEIN eigenes
   Scroll-Fenster — der Wrapper gibt overflow und max-height frei, die
   Tabelle steht im normalen Seitenfluss und derselbe Sticky-Kopf klebt
   stattdessen am Viewport: sichtbar, solange die SEITE durch die Tabelle
   scrollt, am Tabellenende schiebt ihn der Folge-Content mit raus. Das geht
   hier, weil das Backend keinen .stickyheader-Klon rendert (Theme-Erbe, nur
   das tote fixed-header-JS läuft) — oben liegt also nichts drüber. Einzig
   die nav_top-Leiste (#fix-wrapper, sticky, Höhe nach Inhalt) braucht einen
   Offset: --navtop-h pflegt main.js auf <html>, sonst greift 0px.
   Mobil bleibt das Scroll-Fenster von oben — der fürs Querscrollen nötige
   overflow-Wrapper macht Viewport-sticky dort technisch unmöglich. */
@media only screen and (min-width: 768px) {
    .tabellen-scroll.viewport-sticky {
        overflow: visible;
        max-height: none;
    }
    .tabellen-scroll.viewport-sticky table > :first-child > tr:first-child td,
    .tabellen-scroll.viewport-sticky table > :first-child > tr:first-child th {
        top: var(--navtop-h, 0px);
    }
}
@media (max-width: 767px) {
  /* gleiche schlanke Scrollleisten-Affordance wie bei Stufe 1 */
  .tabellen-scroll::-webkit-scrollbar { height: 6px; width: 6px; }
  .tabellen-scroll::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
}

table.table_smaller td{padding:2px 1px;line-height:2;font-size:13px;white-space:nowrap}

li.current {color: var(--accent-color)!important}
a.current {color: var(--accent-color)!important}
.hidden{display:none!important}
ul.circle {padding-left: 1.25rem;}
ul.circle li {list-style-type: circle;}
img.center {
    display: block;
    margin-left: auto;
    margin-right: auto
  }
  .suche {font-size:14px!important}

  input.button{font-size:12px!important}

  /* Change Autocomplete styles in Chrome*/
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus
  input:-webkit-autofill,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover
  textarea:-webkit-autofill:focus,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus {
      -webkit-box-shadow: 0 0 0px 1000px var(--input-bg) inset;
      -webkit-text-fill-color: var(--text-primary);
    transition: background-color 5000s ease-in-out 0s;
  }


	.fadeout {
	  animation: fadeOut 4s;
	  animation-fill-mode: forwards;
	}

	@keyframes fadeOut {
	  0% {
	    opacity: 1;
	  }
	  100% {
	    opacity: 0;
	  }
	}

.autogrid_row {
    margin-left: -15px;
    margin-right: -15px;
    display: flex;
    flex-wrap: wrap;
    box-sizing:border-box
}

 .autogrid_row > .column {
    padding-left: 15px;
    padding-right: 15px;
    flex-basis: 1;
    flex-grow: 1;
    width: 100%;
    position: relative;
    box-sizing:border-box
}

.col_1 {
    flex: 0 0 calc((100% / 12) * 1);
    max-width:calc((100% / 12) * 1)
}

.col_2 {
    flex: 0 0 calc((100% / 12) * 2);
    max-width:calc((100% / 12) * 2)
}

.col_3 {
    flex: 0 0 calc((100% / 12) * 3);
    max-width:calc((100% / 12) * 3)
}

.col_4 {
    flex: 0 0 calc((100% / 12) * 4);
    max-width:calc((100% / 12) * 4)
}

.col_5 {
    flex: 0 0 calc((100% / 12) * 5);
    max-width:calc((100% / 12) * 5)
}

.col_6 {
    flex: 0 0 calc((100% / 12) * 6);
    max-width:calc((100% / 12) * 6)
}

.col_7 {
    flex: 0 0 calc((100% / 12) * 7);
    max-width:calc((100% / 12) * 7)
}

.col_8 {
    flex: 0 0 calc((100% / 12) * 8);
    max-width:calc((100% / 12) * 8)
}

.col_9 {
    flex: 0 0 calc((100% / 12) * 9);
    max-width:calc((100% / 12) * 9)
}

.col_10 {
    flex: 0 0 calc((100% / 12) * 10);
    max-width:calc((100% / 12) * 10)
}

.col_11 {
    flex: 0 0 calc((100% / 12) * 11);
    max-width:calc((100% / 12) * 11)
}

.col_12 {
    flex: 0 0 calc((100% / 12) * 12);
    max-width:calc((100% / 12) * 12)
}

.autogrid_row > .column > .attributes {
    background-size:cover
}

.full {
    flex:0 0 100%
}

@media only screen and (max-width: 767px) {

     .autogrid_row {
        margin-left: 0 !important;
        margin-right:0 !important
    }

    .col_1_m {
        flex: 0 0 calc((100% / 12) * 1);
        max-width:calc((100% / 12) * 1)
    }

    .col_2_m {
        flex: 0 0 calc((100% / 12) * 2);
        max-width:calc((100% / 12) * 2)
    }

    .col_3_m {
        flex: 0 0 calc((100% / 12) * 3);
        max-width:calc((100% / 12) * 3)
    }

    .col_4_m {
        flex: 0 0 calc((100% / 12) * 4);
        max-width:calc((100% / 12) * 4)
    }

    .col_5_m {
        flex: 0 0 calc((100% / 12) * 5);
        max-width:calc((100% / 12) * 5)
    }

    .col_6_m {
        flex: 0 0 calc((100% / 12) * 6);
        max-width:calc((100% / 12) * 6)
    }

    .col_7_m {
        flex: 0 0 calc((100% / 12) * 7);
        max-width:calc((100% / 12) * 7)
    }

    .col_8_m {
        flex: 0 0 calc((100% / 12) * 8);
        max-width:calc((100% / 12) * 8)
    }

    .col_9_m {
        flex: 0 0 calc((100% / 12) * 9);
        max-width:calc((100% / 12) * 9)
    }

    .col_10_m {
        flex: 0 0 calc((100% / 12) * 10);
        max-width:calc((100% / 12) * 10)
    }

    .col_11_m {
        flex: 0 0 calc((100% / 12) * 11);
        max-width:calc((100% / 12) * 11)
    }

    .col_12_m {
        flex: 0 0 calc((100% / 12) * 12);
        max-width:calc((100% / 12) * 12)
    }

    /* Gestapelte Zwei-Spalten-Layouts (col_6 -> col_12_m) klebten mobil
       aneinander: die zweite Spalte begann direkt an der letzten Zeile der
       ersten (Vorlagen -> „Wiederkehrende Einträge", Stammdaten -> „Logo
       hochladen", NC -> „iCal-Abo" …). Luft zwischen gestapelten Spalten im
       gleichen 25px-Rhythmus wie Headline-/mb-m-Abstände. Dashboard
       ausgenommen: .dash-col trägt eigene Widget-Abstände + Drag&Drop-
       Trennlinien, die ein Spaltenabstand stören würde. */
    .autogrid_row > .column.col_12_m:not(.dash-col):not(:last-child) {
        margin-bottom: 25px;
    }

    /* Gestapelte Spalten randbuendig: col_12_m steht mobil allein in der
       Zeile, das 15px-H-Padding hat keine Abstands-Funktion mehr — es
       rueckte Grid-Inhalte nur gegen randbuendige Headlines/Subnavs/
       Formulare ein (die autogrid_row nullt mobil ihre Negativ-Margins,
       s.o.). Inputs in Spalten sind damit so breit wie auf einnahmen/
       ausgaben neu (Formulare ohne Grid). Nicht-gestapelte Spalten
       (col_6_m usw.) behalten ihr Padding als Spaltenabstand. Der
       Dashboard-Edit-Rahmen (body.dash-editing .dash-col) rechnet
       horizontal mit den 15px, existiert aber nur am Desktop
       (.dash-toolbar-actions ist mobil display:none). */
    .autogrid_row > .column.col_12_m {
        padding-left: 0;
        padding-right: 0;
    }
}


/* === additional.css === */
@charset "UTF-8";
/* Link-Kennzeichnung: Punktlinie NUR fuer klassenlose Links (Tabellen-,
   Fliesstext-Links) — Links haben sonst keine Farbe/Underline, die Linie
   ist die einzige Affordance. Frueher global auf a, wogegen jede
   Komponente einzeln ankaempfen musste (brand-mark, vgf-link, nc-Icons,
   subnav, zeitnav, …); geklasste Links sind seit der :not([class])-
   Verengung (07/2026) automatisch frei. Komponenten mit KLASSENLOSEN
   Links (nav.subnav, nav.zeitnav, mainmenu, mlist) brauchen ihr
   border-bottom:none weiterhin. Geklasste TEXT-Links, die die Linie
   behalten sollen, stehen als Ausnahme in der zweiten Regel
   (Button-Varianten uebersteuern spaeter im File wie gehabt). */
a:not([class]) {border-bottom: dotted 1px var(--link-underline)}
a.js-post-delete, a.tabelle, a.berechnen_anzeigen {border-bottom: dotted 1px var(--link-underline)}
a:hover {border-bottom: none; color:var(--accent-color)}
.strong { font-weight: 600;}
li .mlist a{border-bottom:none!important}
.grey a {color:var(--blue)}

@font-face {
    font-family: 'FontAwesome';
    font-weight: 400;
    font-style: normal;
    font-display:swap
}

.fa {
    font-display: swap;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing:grayscale
}

.fa-lg {
    font-size: 1.33333333em;
    line-height: .75em;
    vertical-align:-15%
}

.fa-2x {
    font-size:2em
}

.fa-3x {
    font-size:3em
}

.fa-4x {
    font-size:4em
}

.fa-5x {
    font-size:5em
}

.fa-fw {
    width: 1.28571429em;
    text-align:center
}

.fa-ul {
    padding-left: 0;
    margin-left: 2.14285714em;
    list-style-type:none
}

.fa-ul > li {
    position:relative
}

.fa-li {
    position: absolute;
    left: -2.14285714em;
    width: 2.14285714em;
    top: .14285714em;
    text-align:center
}

.fa-li.fa-lg {
    left:-1.85714286em
}

.fa-border {
    padding: .2em .25em .15em;
    border: solid .08em #eee;
    border-radius:.1em
}

.fa-pull-left {
    float:left
}

.fa-pull-right {
    float:right
}

.fa.fa-pull-left {
    margin-right:.3em
}

.fa.fa-pull-right {
    margin-left:.3em
}

.fa.pull-left {
    margin-right:.3em
}

.fa.pull-right {
    margin-left:.3em
}

.fa-spin {
    -webkit-animation: fa-spin 2s infinite linear;
    animation:fa-spin 2s infinite linear
}

.fa-pulse {
    -webkit-animation: fa-spin 1s infinite steps(8);
    animation:fa-spin 1s infinite steps(8)
}

@-webkit-keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform:rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform:rotate(359deg)
    }
}

@keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform:rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform:rotate(359deg)
    }
}

.fa-rotate-90 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform:rotate(90deg)
}

.fa-rotate-180 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform:rotate(180deg)
}

.fa-rotate-270 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform:rotate(270deg)
}

.fa-flip-horizontal {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
    -webkit-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform:scale(-1, 1)
}

.fa-flip-vertical {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
    -webkit-transform: scale(1, -1);
    -ms-transform: scale(1, -1);
    transform:scale(1, -1)
}

:root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-flip-horizontal, :root .fa-flip-vertical {
    filter:none
}

.fa-stack {
    position: relative;
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    vertical-align:middle
}

.fa-stack-1x, .fa-stack-2x {
    position: absolute;
    left: 0;
    width: 100%;
    text-align:center
}

.fa-stack-1x {
    line-height:inherit
}

.fa-stack-2x {
    font-size:2em
}

.fa-inverse {
    color:#fff
}

.fa-glass:before {
    content: "\f000"
}

.fa-music:before {
    content: "\f001"
}

.fa-search:before {
    content: "\f002"
}

.fa-envelope-o:before {
    content: "\f003"
}

.fa-heart:before {
    content: "\f004"
}

.fa-star:before {
    content: "\f005"
}

.fa-star-o:before {
    content: "\f006"
}

.fa-user:before {
    content: "\f007"
}

.fa-film:before {
    content: "\f008"
}

.fa-th-large:before {
    content: "\f009"
}

.fa-th:before {
    content: "\f00a"
}

.fa-th-list:before {
    content: "\f00b"
}

.fa-check:before {
    content: "\f00c"
}

.fa-remove:before, .fa-close:before, .fa-times:before {
    content: "\f00d"
}

.fa-search-plus:before {
    content: "\f00e"
}

.fa-search-minus:before {
    content: "\f010"
}

.fa-power-off:before {
    content: "\f011"
}

.fa-signal:before {
    content: "\f012"
}

.fa-gear:before, .fa-cog:before {
    content: "\f013"
}

.fa-trash-o:before {
    content: "\f014"
}

.fa-home:before {
    content: "\f015"
}

.fa-file-o:before {
    content: "\f016"
}

.fa-clock-o:before {
    content: "\f017"
}

.fa-road:before {
    content: "\f018"
}

.fa-download:before {
    content: "\f019"
}

.fa-arrow-circle-o-down:before {
    content: "\f01a"
}

.fa-arrow-circle-o-up:before {
    content: "\f01b"
}

.fa-inbox:before {
    content: "\f01c"
}

.fa-play-circle-o:before {
    content: "\f01d"
}

.fa-rotate-right:before, .fa-repeat:before {
    content: "\f01e"
}

.fa-refresh:before {
    content: "\f021"
}

.fa-list-alt:before {
    content: "\f022"
}

.fa-lock:before {
    content: "\f023"
}

.fa-flag:before {
    content: "\f024"
}

.fa-headphones:before {
    content: "\f025"
}

.fa-volume-off:before {
    content: "\f026"
}

.fa-volume-down:before {
    content: "\f027"
}

.fa-volume-up:before {
    content: "\f028"
}

.fa-qrcode:before {
    content: "\f029"
}

.fa-barcode:before {
    content: "\f02a"
}

.fa-tag:before {
    content: "\f02b"
}

.fa-tags:before {
    content: "\f02c"
}

.fa-book:before {
    content: "\f02d"
}

.fa-bookmark:before {
    content: "\f02e"
}

.fa-print:before {
    content: "\f02f"
}

.fa-camera:before {
    content: "\f030"
}

.fa-font:before {
    content: "\f031"
}

.fa-bold:before {
    content: "\f032"
}

.fa-italic:before {
    content: "\f033"
}

.fa-text-height:before {
    content: "\f034"
}

.fa-text-width:before {
    content: "\f035"
}

.fa-align-left:before {
    content: "\f036"
}

.fa-align-center:before {
    content: "\f037"
}

.fa-align-right:before {
    content: "\f038"
}

.fa-align-justify:before {
    content: "\f039"
}

.fa-list:before {
    content: "\f03a"
}

.fa-dedent:before, .fa-outdent:before {
    content: "\f03b"
}

.fa-indent:before {
    content: "\f03c"
}

.fa-video-camera:before {
    content: "\f03d"
}

.fa-photo:before, .fa-image:before, .fa-picture-o:before {
    content: "\f03e"
}

.fa-pencil:before {
    content: "\f040"
}

.fa-map-marker:before {
    content: "\f041"
}

.fa-adjust:before {
    content: "\f042"
}

.fa-tint:before {
    content: "\f043"
}

.fa-edit:before, .fa-pencil-square-o:before {
    content: "\f044"
}

.fa-share-square-o:before {
    content: "\f045"
}

.fa-check-square-o:before {
    content: "\f046"
}

.fa-arrows:before {
    content: "\f047"
}

.fa-step-backward:before {
    content: "\f048"
}

.fa-fast-backward:before {
    content: "\f049"
}

.fa-backward:before {
    content: "\f04a"
}

.fa-play:before {
    content: "\f04b"
}

.fa-pause:before {
    content: "\f04c"
}

.fa-stop:before {
    content: "\f04d"
}

.fa-forward:before {
    content: "\f04e"
}

.fa-fast-forward:before {
    content: "\f050"
}

.fa-step-forward:before {
    content: "\f051"
}

.fa-eject:before {
    content: "\f052"
}

.fa-chevron-left:before {
    content: "\f053"
}

.fa-chevron-right:before {
    content: "\f054"
}

.fa-plus-circle:before {
    content: "\f055"
}

.fa-minus-circle:before {
    content: "\f056"
}

.fa-times-circle:before {
    content: "\f057"
}

.fa-check-circle:before {
    content: "\f058"
}

.fa-question-circle:before {
    content: "\f059"
}

.fa-info-circle:before {
    content: "\f05a"
}

.fa-crosshairs:before {
    content: "\f05b"
}

.fa-times-circle-o:before {
    content: "\f05c"
}

.fa-check-circle-o:before {
    content: "\f05d"
}

.fa-ban:before {
    content: "\f05e"
}

.fa-arrow-left:before {
    content: "\f060"
}

.fa-arrow-right:before {
    content: "\f061"
}

.fa-arrow-up:before {
    content: "\f062"
}

.fa-arrow-down:before {
    content: "\f063"
}

.fa-mail-forward:before, .fa-share:before {
    content: "\f064"
}

.fa-expand:before {
    content: "\f065"
}

.fa-compress:before {
    content: "\f066"
}

.fa-plus:before {
    content: "\f067"
}

.fa-minus:before {
    content: "\f068"
}

.fa-asterisk:before {
    content: "\f069"
}

.fa-exclamation-circle:before {
    content: "\f06a"
}

.fa-gift:before {
    content: "\f06b"
}

.fa-leaf:before {
    content: "\f06c"
}

.fa-fire:before {
    content: "\f06d"
}

.fa-eye:before {
    content: "\f06e"
}

.fa-eye-slash:before {
    content: "\f070"
}

.fa-warning:before, .fa-exclamation-triangle:before {
    content: "\f071"
}

.fa-plane:before {
    content: "\f072"
}

.fa-calendar:before {
    content: "\f073"
}

.fa-random:before {
    content: "\f074"
}

.fa-comment:before {
    content: "\f075"
}

.fa-magnet:before {
    content: "\f076"
}

.fa-chevron-up:before {
    content: "\f077"
}

.fa-chevron-down:before {
    content: "\f078"
}

.fa-retweet:before {
    content: "\f079"
}

.fa-shopping-cart:before {
    content: "\f07a"
}

.fa-folder:before {
    content: "\f07b"
}

.fa-folder-open:before {
    content: "\f07c"
}

.fa-arrows-v:before {
    content: "\f07d"
}

.fa-arrows-h:before {
    content: "\f07e"
}

.fa-bar-chart-o:before, .fa-bar-chart:before {
    content: "\f080"
}

.fa-twitter-square:before {
    content: "\f081"
}

.fa-facebook-square:before {
    content: "\f082"
}

.fa-camera-retro:before {
    content: "\f083"
}

.fa-key:before {
    content: "\f084"
}

.fa-gears:before, .fa-cogs:before {
    content: "\f085"
}

.fa-comments:before {
    content: "\f086"
}

.fa-thumbs-o-up:before {
    content: "\f087"
}

.fa-thumbs-o-down:before {
    content: "\f088"
}

.fa-star-half:before {
    content: "\f089"
}

.fa-heart-o:before {
    content: "\f08a"
}

.fa-sign-out:before {
    content: "\f08b"
}

.fa-linkedin-square:before {
    content: "\f08c"
}

.fa-thumb-tack:before {
    content: "\f08d"
}

.fa-external-link:before {
    content: "\f08e"
}

.fa-sign-in:before {
    content: "\f090"
}

.fa-trophy:before {
    content: "\f091"
}

.fa-github-square:before {
    content: "\f092"
}

.fa-upload:before {
    content: "\f093"
}

.fa-lemon-o:before {
    content: "\f094"
}

.fa-phone:before {
    content: "\f095"
}

.fa-square-o:before {
    content: "\f096"
}

.fa-bookmark-o:before {
    content: "\f097"
}

.fa-phone-square:before {
    content: "\f098"
}

.fa-twitter:before {
    content: "\f099"
}

.fa-facebook-f:before, .fa-facebook:before {
    content: "\f09a"
}

.fa-github:before {
    content: "\f09b"
}

.fa-unlock:before {
    content: "\f09c"
}

.fa-credit-card:before {
    content: "\f09d"
}

.fa-feed:before, .fa-rss:before {
    content: "\f09e"
}

.fa-hdd-o:before {
    content: "\f0a0"
}

.fa-bullhorn:before {
    content: "\f0a1"
}

.fa-bell:before {
    content: "\f0f3"
}

.fa-certificate:before {
    content: "\f0a3"
}

.fa-hand-o-right:before {
    content: "\f0a4"
}

.fa-hand-o-left:before {
    content: "\f0a5"
}

.fa-hand-o-up:before {
    content: "\f0a6"
}

.fa-hand-o-down:before {
    content: "\f0a7"
}

.fa-arrow-circle-left:before {
    content: "\f0a8"
}

.fa-arrow-circle-right:before {
    content: "\f0a9"
}

.fa-arrow-circle-up:before {
    content: "\f0aa"
}

.fa-arrow-circle-down:before {
    content: "\f0ab"
}

.fa-globe:before {
    content: "\f0ac"
}

.fa-wrench:before {
    content: "\f0ad"
}

.fa-tasks:before {
    content: "\f0ae"
}

.fa-filter:before {
    content: "\f0b0"
}

.fa-briefcase:before {
    content: "\f0b1"
}

.fa-arrows-alt:before {
    content: "\f0b2"
}

.fa-group:before, .fa-users:before {
    content: "\f0c0"
}

.fa-chain:before, .fa-link:before {
    content: "\f0c1"
}

.fa-cloud:before {
    content: "\f0c2"
}

.fa-flask:before {
    content: "\f0c3"
}

.fa-cut:before, .fa-scissors:before {
    content: "\f0c4"
}

.fa-copy:before, .fa-files-o:before {
    content: "\f0c5"
}

.fa-paperclip:before {
    content: "\f0c6"
}

.fa-save:before, .fa-floppy-o:before {
    content: "\f0c7"
}

.fa-square:before {
    content: "\f0c8"
}

.fa-navicon:before, .fa-reorder:before, .fa-bars:before {
    content: "\f0c9"
}

.fa-list-ul:before {
    content: "\f0ca"
}

.fa-list-ol:before {
    content: "\f0cb"
}

.fa-strikethrough:before {
    content: "\f0cc"
}

.fa-underline:before {
    content: "\f0cd"
}

.fa-table:before {
    content: "\f0ce"
}

.fa-magic:before {
    content: "\f0d0"
}

.fa-truck:before {
    content: "\f0d1"
}

.fa-pinterest:before {
    content: "\f0d2"
}

.fa-pinterest-square:before {
    content: "\f0d3"
}

.fa-google-plus-square:before {
    content: "\f0d4"
}

.fa-google-plus:before {
    content: "\f0d5"
}

.fa-money:before {
    content: "\f0d6"
}

.fa-caret-down:before {
    content: "\f0d7"
}

.fa-caret-up:before {
    content: "\f0d8"
}

.fa-caret-left:before {
    content: "\f0d9"
}

.fa-caret-right:before {
    content: "\f0da"
}

.fa-columns:before {
    content: "\f0db"
}

.fa-unsorted:before, .fa-sort:before {
    content: "\f0dc"
}

.fa-sort-down:before, .fa-sort-desc:before {
    content: "\f0dd"
}

.fa-sort-up:before, .fa-sort-asc:before {
    content: "\f0de"
}

.fa-envelope:before {
    content: "\f0e0"
}

.fa-linkedin:before {
    content: "\f0e1"
}

.fa-rotate-left:before, .fa-undo:before {
    content: "\f0e2"
}

.fa-legal:before, .fa-gavel:before {
    content: "\f0e3"
}

.fa-dashboard:before, .fa-tachometer:before {
    content: "\f0e4"
}

.fa-comment-o:before {
    content: "\f0e5"
}

.fa-comments-o:before {
    content: "\f0e6"
}

.fa-flash:before, .fa-bolt:before {
    content: "\f0e7"
}

.fa-sitemap:before {
    content: "\f0e8"
}

.fa-umbrella:before {
    content: "\f0e9"
}

.fa-paste:before, .fa-clipboard:before {
    content: "\f0ea"
}

.fa-lightbulb-o:before {
    content: "\f0eb"
}

.fa-exchange:before {
    content: "\f0ec"
}

.fa-cloud-download:before {
    content: "\f0ed"
}

.fa-cloud-upload:before {
    content: "\f0ee"
}

.fa-user-md:before {
    content: "\f0f0"
}

.fa-stethoscope:before {
    content: "\f0f1"
}

.fa-suitcase:before {
    content: "\f0f2"
}

.fa-bell-o:before {
    content: "\f0a2"
}

.fa-coffee:before {
    content: "\f0f4"
}

.fa-cutlery:before {
    content: "\f0f5"
}

.fa-file-text-o:before {
    content: "\f0f6"
}

.fa-building-o:before {
    content: "\f0f7"
}

.fa-hospital-o:before {
    content: "\f0f8"
}

.fa-ambulance:before {
    content: "\f0f9"
}

.fa-medkit:before {
    content: "\f0fa"
}

.fa-fighter-jet:before {
    content: "\f0fb"
}

.fa-beer:before {
    content: "\f0fc"
}

.fa-h-square:before {
    content: "\f0fd"
}

.fa-plus-square:before {
    content: "\f0fe"
}

.fa-angle-double-left:before {
    content: "\f100"
}

.fa-angle-double-right:before {
    content: "\f101"
}

.fa-angle-double-up:before {
    content: "\f102"
}

.fa-angle-double-down:before {
    content: "\f103"
}

.fa-angle-left:before {
    content: "\f104"
}

.fa-angle-right:before {
    content: "\f105"
}

.fa-angle-up:before {
    content: "\f106"
}

.fa-angle-down:before {
    content: "\f107"
}

.fa-desktop:before {
    content: "\f108"
}

.fa-laptop:before {
    content: "\f109"
}

.fa-tablet:before {
    content: "\f10a"
}

.fa-mobile-phone:before, .fa-mobile:before {
    content: "\f10b"
}

.fa-circle-o:before {
    content: "\f10c"
}

.fa-quote-left:before {
    content: "\f10d"
}

.fa-quote-right:before {
    content: "\f10e"
}

.fa-spinner:before {
    content: "\f110"
}

.fa-circle:before {
    content: "\f111"
}

.fa-mail-reply:before, .fa-reply:before {
    content: "\f112"
}

.fa-github-alt:before {
    content: "\f113"
}

.fa-folder-o:before {
    content: "\f114"
}

.fa-folder-open-o:before {
    content: "\f115"
}

.fa-smile-o:before {
    content: "\f118"
}

.fa-frown-o:before {
    content: "\f119"
}

.fa-meh-o:before {
    content: "\f11a"
}

.fa-gamepad:before {
    content: "\f11b"
}

.fa-keyboard-o:before {
    content: "\f11c"
}

.fa-flag-o:before {
    content: "\f11d"
}

.fa-flag-checkered:before {
    content: "\f11e"
}

.fa-terminal:before {
    content: "\f120"
}

.fa-code:before {
    content: "\f121"
}

.fa-mail-reply-all:before, .fa-reply-all:before {
    content: "\f122"
}

.fa-star-half-empty:before, .fa-star-half-full:before, .fa-star-half-o:before {
    content: "\f123"
}

.fa-location-arrow:before {
    content: "\f124"
}

.fa-crop:before {
    content: "\f125"
}

.fa-code-fork:before {
    content: "\f126"
}

.fa-unlink:before, .fa-chain-broken:before {
    content: "\f127"
}

.fa-question:before {
    content: "\f128"
}

.fa-info:before {
    content: "\f129"
}

.fa-exclamation:before {
    content: "\f12a"
}

.fa-superscript:before {
    content: "\f12b"
}

.fa-subscript:before {
    content: "\f12c"
}

.fa-eraser:before {
    content: "\f12d"
}

.fa-puzzle-piece:before {
    content: "\f12e"
}

.fa-microphone:before {
    content: "\f130"
}

.fa-microphone-slash:before {
    content: "\f131"
}

.fa-shield:before {
    content: "\f132"
}

.fa-calendar-o:before {
    content: "\f133"
}

.fa-fire-extinguisher:before {
    content: "\f134"
}

.fa-rocket:before {
    content: "\f135"
}

.fa-maxcdn:before {
    content: "\f136"
}

.fa-chevron-circle-left:before {
    content: "\f137"
}

.fa-chevron-circle-right:before {
    content: "\f138"
}

.fa-chevron-circle-up:before {
    content: "\f139"
}

.fa-chevron-circle-down:before {
    content: "\f13a"
}

.fa-html5:before {
    content: "\f13b"
}

.fa-css3:before {
    content: "\f13c"
}

.fa-anchor:before {
    content: "\f13d"
}

.fa-unlock-alt:before {
    content: "\f13e"
}

.fa-bullseye:before {
    content: "\f140"
}

.fa-ellipsis-h:before {
    content: "\f141"
}

.fa-ellipsis-v:before {
    content: "\f142"
}

.fa-rss-square:before {
    content: "\f143"
}

.fa-play-circle:before {
    content: "\f144"
}

.fa-ticket:before {
    content: "\f145"
}

.fa-minus-square:before {
    content: "\f146"
}

.fa-minus-square-o:before {
    content: "\f147"
}

.fa-level-up:before {
    content: "\f148"
}

.fa-level-down:before {
    content: "\f149"
}

.fa-check-square:before {
    content: "\f14a"
}

.fa-pencil-square:before {
    content: "\f14b"
}

.fa-external-link-square:before {
    content: "\f14c"
}

.fa-share-square:before {
    content: "\f14d"
}

.fa-compass:before {
    content: "\f14e"
}

.fa-toggle-down:before, .fa-caret-square-o-down:before {
    content: "\f150"
}

.fa-toggle-up:before, .fa-caret-square-o-up:before {
    content: "\f151"
}

.fa-toggle-right:before, .fa-caret-square-o-right:before {
    content: "\f152"
}

.fa-euro:before, .fa-eur:before {
    content: "\f153"
}

.fa-gbp:before {
    content: "\f154"
}

.fa-dollar:before, .fa-usd:before {
    content: "\f155"
}

.fa-rupee:before, .fa-inr:before {
    content: "\f156"
}

.fa-cny:before, .fa-rmb:before, .fa-yen:before, .fa-jpy:before {
    content: "\f157"
}

.fa-ruble:before, .fa-rouble:before, .fa-rub:before {
    content: "\f158"
}

.fa-won:before, .fa-krw:before {
    content: "\f159"
}

.fa-bitcoin:before, .fa-btc:before {
    content: "\f15a"
}

.fa-file:before {
    content: "\f15b"
}

.fa-file-text:before {
    content: "\f15c"
}

.fa-sort-alpha-asc:before {
    content: "\f15d"
}

.fa-sort-alpha-desc:before {
    content: "\f15e"
}

.fa-sort-amount-asc:before {
    content: "\f160"
}

.fa-sort-amount-desc:before {
    content: "\f161"
}

.fa-sort-numeric-asc:before {
    content: "\f162"
}

.fa-sort-numeric-desc:before {
    content: "\f163"
}

.fa-thumbs-up:before {
    content: "\f164"
}

.fa-thumbs-down:before {
    content: "\f165"
}

.fa-youtube-square:before {
    content: "\f166"
}

.fa-youtube:before {
    content: "\f167"
}

.fa-xing:before {
    content: "\f168"
}

.fa-xing-square:before {
    content: "\f169"
}

.fa-youtube-play:before {
    content: "\f16a"
}

.fa-dropbox:before {
    content: "\f16b"
}

.fa-stack-overflow:before {
    content: "\f16c"
}

.fa-instagram:before {
    content: "\f16d"
}

.fa-flickr:before {
    content: "\f16e"
}

.fa-adn:before {
    content: "\f170"
}

.fa-bitbucket:before {
    content: "\f171"
}

.fa-bitbucket-square:before {
    content: "\f172"
}

.fa-tumblr:before {
    content: "\f173"
}

.fa-tumblr-square:before {
    content: "\f174"
}

.fa-long-arrow-down:before {
    content: "\f175"
}

.fa-long-arrow-up:before {
    content: "\f176"
}

.fa-long-arrow-left:before {
    content: "\f177"
}

.fa-long-arrow-right:before {
    content: "\f178"
}

.fa-apple:before {
    content: "\f179"
}

.fa-windows:before {
    content: "\f17a"
}

.fa-android:before {
    content: "\f17b"
}

.fa-linux:before {
    content: "\f17c"
}

.fa-dribbble:before {
    content: "\f17d"
}

.fa-skype:before {
    content: "\f17e"
}

.fa-foursquare:before {
    content: "\f180"
}

.fa-trello:before {
    content: "\f181"
}

.fa-female:before {
    content: "\f182"
}

.fa-male:before {
    content: "\f183"
}

.fa-gittip:before, .fa-gratipay:before {
    content: "\f184"
}

.fa-sun-o:before {
    content: "\f185"
}

.fa-moon-o:before {
    content: "\f186"
}

.fa-archive:before {
    content: "\f187"
}

.fa-bug:before {
    content: "\f188"
}

.fa-vk:before {
    content: "\f189"
}

.fa-weibo:before {
    content: "\f18a"
}

.fa-renren:before {
    content: "\f18b"
}

.fa-pagelines:before {
    content: "\f18c"
}

.fa-stack-exchange:before {
    content: "\f18d"
}

.fa-arrow-circle-o-right:before {
    content: "\f18e"
}

.fa-arrow-circle-o-left:before {
    content: "\f190"
}

.fa-toggle-left:before, .fa-caret-square-o-left:before {
    content: "\f191"
}

.fa-dot-circle-o:before {
    content: "\f192"
}

.fa-wheelchair:before {
    content: "\f193"
}

.fa-vimeo-square:before {
    content: "\f194"
}

.fa-turkish-lira:before, .fa-try:before {
    content: "\f195"
}

.fa-plus-square-o:before {
    content: "\f196"
}

.fa-space-shuttle:before {
    content: "\f197"
}

.fa-slack:before {
    content: "\f198"
}

.fa-envelope-square:before {
    content: "\f199"
}

.fa-wordpress:before {
    content: "\f19a"
}

.fa-openid:before {
    content: "\f19b"
}

.fa-institution:before, .fa-bank:before, .fa-university:before {
    content: "\f19c"
}

.fa-mortar-board:before, .fa-graduation-cap:before {
    content: "\f19d"
}

.fa-yahoo:before {
    content: "\f19e"
}

.fa-google:before {
    content: "\f1a0"
}

.fa-reddit:before {
    content: "\f1a1"
}

.fa-reddit-square:before {
    content: "\f1a2"
}

.fa-stumbleupon-circle:before {
    content: "\f1a3"
}

.fa-stumbleupon:before {
    content: "\f1a4"
}

.fa-delicious:before {
    content: "\f1a5"
}

.fa-digg:before {
    content: "\f1a6"
}

.fa-pied-piper-pp:before {
    content: "\f1a7"
}

.fa-pied-piper-alt:before {
    content: "\f1a8"
}

.fa-drupal:before {
    content: "\f1a9"
}

.fa-joomla:before {
    content: "\f1aa"
}

.fa-language:before {
    content: "\f1ab"
}

.fa-fax:before {
    content: "\f1ac"
}

.fa-building:before {
    content: "\f1ad"
}

.fa-child:before {
    content: "\f1ae"
}

.fa-paw:before {
    content: "\f1b0"
}

.fa-spoon:before {
    content: "\f1b1"
}

.fa-cube:before {
    content: "\f1b2"
}

.fa-cubes:before {
    content: "\f1b3"
}

.fa-behance:before {
    content: "\f1b4"
}

.fa-behance-square:before {
    content: "\f1b5"
}

.fa-steam:before {
    content: "\f1b6"
}

.fa-steam-square:before {
    content: "\f1b7"
}

.fa-recycle:before {
    content: "\f1b8"
}

.fa-automobile:before, .fa-car:before {
    content: "\f1b9"
}

.fa-cab:before, .fa-taxi:before {
    content: "\f1ba"
}

.fa-tree:before {
    content: "\f1bb"
}

.fa-spotify:before {
    content: "\f1bc"
}

.fa-deviantart:before {
    content: "\f1bd"
}

.fa-soundcloud:before {
    content: "\f1be"
}

.fa-database:before {
    content: "\f1c0"
}

.fa-file-pdf-o:before {
    content: "\f1c1"
}

.fa-file-word-o:before {
    content: "\f1c2"
}

.fa-file-excel-o:before {
    content: "\f1c3"
}

.fa-file-powerpoint-o:before {
    content: "\f1c4"
}

.fa-file-photo-o:before, .fa-file-picture-o:before, .fa-file-image-o:before {
    content: "\f1c5"
}

.fa-file-zip-o:before, .fa-file-archive-o:before {
    content: "\f1c6"
}

.fa-file-sound-o:before, .fa-file-audio-o:before {
    content: "\f1c7"
}

.fa-file-movie-o:before, .fa-file-video-o:before {
    content: "\f1c8"
}

.fa-file-code-o:before {
    content: "\f1c9"
}

.fa-vine:before {
    content: "\f1ca"
}

.fa-codepen:before {
    content: "\f1cb"
}

.fa-jsfiddle:before {
    content: "\f1cc"
}

.fa-life-bouy:before, .fa-life-buoy:before, .fa-life-saver:before, .fa-support:before, .fa-life-ring:before {
    content: "\f1cd"
}

.fa-circle-o-notch:before {
    content: "\f1ce"
}

.fa-ra:before, .fa-resistance:before, .fa-rebel:before {
    content: "\f1d0"
}

.fa-ge:before, .fa-empire:before {
    content: "\f1d1"
}

.fa-git-square:before {
    content: "\f1d2"
}

.fa-git:before {
    content: "\f1d3"
}

.fa-y-combinator-square:before, .fa-yc-square:before, .fa-hacker-news:before {
    content: "\f1d4"
}

.fa-tencent-weibo:before {
    content: "\f1d5"
}

.fa-qq:before {
    content: "\f1d6"
}

.fa-wechat:before, .fa-weixin:before {
    content: "\f1d7"
}

.fa-send:before, .fa-paper-plane:before {
    content: "\f1d8"
}

.fa-send-o:before, .fa-paper-plane-o:before {
    content: "\f1d9"
}

.fa-history:before {
    content: "\f1da"
}

.fa-circle-thin:before {
    content: "\f1db"
}

.fa-header:before {
    content: "\f1dc"
}

.fa-paragraph:before {
    content: "\f1dd"
}

.fa-sliders:before {
    content: "\f1de"
}

.fa-share-alt:before {
    content: "\f1e0"
}

.fa-share-alt-square:before {
    content: "\f1e1"
}

.fa-bomb:before {
    content: "\f1e2"
}

.fa-soccer-ball-o:before, .fa-futbol-o:before {
    content: "\f1e3"
}

.fa-tty:before {
    content: "\f1e4"
}

.fa-binoculars:before {
    content: "\f1e5"
}

.fa-plug:before {
    content: "\f1e6"
}

.fa-slideshare:before {
    content: "\f1e7"
}

.fa-twitch:before {
    content: "\f1e8"
}

.fa-yelp:before {
    content: "\f1e9"
}

.fa-newspaper-o:before {
    content: "\f1ea"
}

.fa-wifi:before {
    content: "\f1eb"
}

.fa-calculator:before {
    content: "\f1ec"
}

.fa-paypal:before {
    content: "\f1ed"
}

.fa-google-wallet:before {
    content: "\f1ee"
}

.fa-cc-visa:before {
    content: "\f1f0"
}

.fa-cc-mastercard:before {
    content: "\f1f1"
}

.fa-cc-discover:before {
    content: "\f1f2"
}

.fa-cc-amex:before {
    content: "\f1f3"
}

.fa-cc-paypal:before {
    content: "\f1f4"
}

.fa-cc-stripe:before {
    content: "\f1f5"
}

.fa-bell-slash:before {
    content: "\f1f6"
}

.fa-bell-slash-o:before {
    content: "\f1f7"
}

.fa-trash:before {
    content: "\f1f8"
}

.fa-copyright:before {
    content: "\f1f9"
}

.fa-at:before {
    content: "\f1fa"
}

.fa-eyedropper:before {
    content: "\f1fb"
}

.fa-paint-brush:before {
    content: "\f1fc"
}

.fa-birthday-cake:before {
    content: "\f1fd"
}

.fa-area-chart:before {
    content: "\f1fe"
}

.fa-pie-chart:before {
    content: "\f200"
}

.fa-line-chart:before {
    content: "\f201"
}

.fa-lastfm:before {
    content: "\f202"
}

.fa-lastfm-square:before {
    content: "\f203"
}

.fa-toggle-off:before {
    content: "\f204"
}

.fa-toggle-on:before {
    content: "\f205"
}

.fa-bicycle:before {
    content: "\f206"
}

.fa-bus:before {
    content: "\f207"
}

.fa-ioxhost:before {
    content: "\f208"
}

.fa-angellist:before {
    content: "\f209"
}

.fa-cc:before {
    content: "\f20a"
}

.fa-shekel:before, .fa-sheqel:before, .fa-ils:before {
    content: "\f20b"
}

.fa-meanpath:before {
    content: "\f20c"
}

.fa-buysellads:before {
    content: "\f20d"
}

.fa-connectdevelop:before {
    content: "\f20e"
}

.fa-dashcube:before {
    content: "\f210"
}

.fa-forumbee:before {
    content: "\f211"
}

.fa-leanpub:before {
    content: "\f212"
}

.fa-sellsy:before {
    content: "\f213"
}

.fa-shirtsinbulk:before {
    content: "\f214"
}

.fa-simplybuilt:before {
    content: "\f215"
}

.fa-skyatlas:before {
    content: "\f216"
}

.fa-cart-plus:before {
    content: "\f217"
}

.fa-cart-arrow-down:before {
    content: "\f218"
}

.fa-diamond:before {
    content: "\f219"
}

.fa-ship:before {
    content: "\f21a"
}

.fa-user-secret:before {
    content: "\f21b"
}

.fa-motorcycle:before {
    content: "\f21c"
}

.fa-street-view:before {
    content: "\f21d"
}

.fa-heartbeat:before {
    content: "\f21e"
}

.fa-venus:before {
    content: "\f221"
}

.fa-mars:before {
    content: "\f222"
}

.fa-mercury:before {
    content: "\f223"
}

.fa-intersex:before, .fa-transgender:before {
    content: "\f224"
}

.fa-transgender-alt:before {
    content: "\f225"
}

.fa-venus-double:before {
    content: "\f226"
}

.fa-mars-double:before {
    content: "\f227"
}

.fa-venus-mars:before {
    content: "\f228"
}

.fa-mars-stroke:before {
    content: "\f229"
}

.fa-mars-stroke-v:before {
    content: "\f22a"
}

.fa-mars-stroke-h:before {
    content: "\f22b"
}

.fa-neuter:before {
    content: "\f22c"
}

.fa-genderless:before {
    content: "\f22d"
}

.fa-facebook-official:before {
    content: "\f230"
}

.fa-pinterest-p:before {
    content: "\f231"
}

.fa-whatsapp:before {
    content: "\f232"
}

.fa-server:before {
    content: "\f233"
}

.fa-user-plus:before {
    content: "\f234"
}

.fa-user-times:before {
    content: "\f235"
}

.fa-hotel:before, .fa-bed:before {
    content: "\f236"
}

.fa-viacoin:before {
    content: "\f237"
}

.fa-train:before {
    content: "\f238"
}

.fa-subway:before {
    content: "\f239"
}

.fa-medium:before {
    content: "\f23a"
}

.fa-yc:before, .fa-y-combinator:before {
    content: "\f23b"
}

.fa-optin-monster:before {
    content: "\f23c"
}

.fa-opencart:before {
    content: "\f23d"
}

.fa-expeditedssl:before {
    content: "\f23e"
}

.fa-battery-4:before, .fa-battery:before, .fa-battery-full:before {
    content: "\f240"
}

.fa-battery-3:before, .fa-battery-three-quarters:before {
    content: "\f241"
}

.fa-battery-2:before, .fa-battery-half:before {
    content: "\f242"
}

.fa-battery-1:before, .fa-battery-quarter:before {
    content: "\f243"
}

.fa-battery-0:before, .fa-battery-empty:before {
    content: "\f244"
}

.fa-mouse-pointer:before {
    content: "\f245"
}

.fa-i-cursor:before {
    content: "\f246"
}

.fa-object-group:before {
    content: "\f247"
}

.fa-object-ungroup:before {
    content: "\f248"
}

.fa-sticky-note:before {
    content: "\f249"
}

.fa-sticky-note-o:before {
    content: "\f24a"
}

.fa-cc-jcb:before {
    content: "\f24b"
}

.fa-cc-diners-club:before {
    content: "\f24c"
}

.fa-clone:before {
    content: "\f24d"
}

.fa-balance-scale:before {
    content: "\f24e"
}

.fa-hourglass-o:before {
    content: "\f250"
}

.fa-hourglass-1:before, .fa-hourglass-start:before {
    content: "\f251"
}

.fa-hourglass-2:before, .fa-hourglass-half:before {
    content: "\f252"
}

.fa-hourglass-3:before, .fa-hourglass-end:before {
    content: "\f253"
}

.fa-hourglass:before {
    content: "\f254"
}

.fa-hand-grab-o:before, .fa-hand-rock-o:before {
    content: "\f255"
}

.fa-hand-stop-o:before, .fa-hand-paper-o:before {
    content: "\f256"
}

.fa-hand-scissors-o:before {
    content: "\f257"
}

.fa-hand-lizard-o:before {
    content: "\f258"
}

.fa-hand-spock-o:before {
    content: "\f259"
}

.fa-hand-pointer-o:before {
    content: "\f25a"
}

.fa-hand-peace-o:before {
    content: "\f25b"
}

.fa-trademark:before {
    content: "\f25c"
}

.fa-registered:before {
    content: "\f25d"
}

.fa-creative-commons:before {
    content: "\f25e"
}

.fa-gg:before {
    content: "\f260"
}

.fa-gg-circle:before {
    content: "\f261"
}

.fa-tripadvisor:before {
    content: "\f262"
}

.fa-odnoklassniki:before {
    content: "\f263"
}

.fa-odnoklassniki-square:before {
    content: "\f264"
}

.fa-get-pocket:before {
    content: "\f265"
}

.fa-wikipedia-w:before {
    content: "\f266"
}

.fa-safari:before {
    content: "\f267"
}

.fa-chrome:before {
    content: "\f268"
}

.fa-firefox:before {
    content: "\f269"
}

.fa-opera:before {
    content: "\f26a"
}

.fa-internet-explorer:before {
    content: "\f26b"
}

.fa-tv:before, .fa-television:before {
    content: "\f26c"
}

.fa-contao:before {
    content: "\f26d"
}

.fa-500px:before {
    content: "\f26e"
}

.fa-amazon:before {
    content: "\f270"
}

.fa-calendar-plus-o:before {
    content: "\f271"
}

.fa-calendar-minus-o:before {
    content: "\f272"
}

.fa-calendar-times-o:before {
    content: "\f273"
}

.fa-calendar-check-o:before {
    content: "\f274"
}

.fa-industry:before {
    content: "\f275"
}

.fa-map-pin:before {
    content: "\f276"
}

.fa-map-signs:before {
    content: "\f277"
}

.fa-map-o:before {
    content: "\f278"
}

.fa-map:before {
    content: "\f279"
}

.fa-commenting:before {
    content: "\f27a"
}

.fa-commenting-o:before {
    content: "\f27b"
}

.fa-houzz:before {
    content: "\f27c"
}

.fa-vimeo:before {
    content: "\f27d"
}

.fa-black-tie:before {
    content: "\f27e"
}

.fa-fonticons:before {
    content: "\f280"
}

.fa-reddit-alien:before {
    content: "\f281"
}

.fa-edge:before {
    content: "\f282"
}

.fa-credit-card-alt:before {
    content: "\f283"
}

.fa-codiepie:before {
    content: "\f284"
}

.fa-modx:before {
    content: "\f285"
}

.fa-fort-awesome:before {
    content: "\f286"
}

.fa-usb:before {
    content: "\f287"
}

.fa-product-hunt:before {
    content: "\f288"
}

.fa-mixcloud:before {
    content: "\f289"
}

.fa-scribd:before {
    content: "\f28a"
}

.fa-pause-circle:before {
    content: "\f28b"
}

.fa-pause-circle-o:before {
    content: "\f28c"
}

.fa-stop-circle:before {
    content: "\f28d"
}

.fa-stop-circle-o:before {
    content: "\f28e"
}

.fa-shopping-bag:before {
    content: "\f290"
}

.fa-shopping-basket:before {
    content: "\f291"
}

.fa-hashtag:before {
    content: "\f292"
}

.fa-bluetooth:before {
    content: "\f293"
}

.fa-bluetooth-b:before {
    content: "\f294"
}

.fa-percent:before {
    content: "\f295"
}

.fa-gitlab:before {
    content: "\f296"
}

.fa-wpbeginner:before {
    content: "\f297"
}

.fa-wpforms:before {
    content: "\f298"
}

.fa-envira:before {
    content: "\f299"
}

.fa-universal-access:before {
    content: "\f29a"
}

.fa-wheelchair-alt:before {
    content: "\f29b"
}

.fa-question-circle-o:before {
    content: "\f29c"
}

.fa-blind:before {
    content: "\f29d"
}

.fa-audio-description:before {
    content: "\f29e"
}

.fa-volume-control-phone:before {
    content: "\f2a0"
}

.fa-braille:before {
    content: "\f2a1"
}

.fa-assistive-listening-systems:before {
    content: "\f2a2"
}

.fa-asl-interpreting:before, .fa-american-sign-language-interpreting:before {
    content: "\f2a3"
}

.fa-deafness:before, .fa-hard-of-hearing:before, .fa-deaf:before {
    content: "\f2a4"
}

.fa-glide:before {
    content: "\f2a5"
}

.fa-glide-g:before {
    content: "\f2a6"
}

.fa-signing:before, .fa-sign-language:before {
    content: "\f2a7"
}

.fa-low-vision:before {
    content: "\f2a8"
}

.fa-viadeo:before {
    content: "\f2a9"
}

.fa-viadeo-square:before {
    content: "\f2aa"
}

.fa-snapchat:before {
    content: "\f2ab"
}

.fa-snapchat-ghost:before {
    content: "\f2ac"
}

.fa-snapchat-square:before {
    content: "\f2ad"
}

.fa-pied-piper:before {
    content: "\f2ae"
}

.fa-first-order:before {
    content: "\f2b0"
}

.fa-yoast:before {
    content: "\f2b1"
}

.fa-themeisle:before {
    content: "\f2b2"
}

.fa-google-plus-circle:before, .fa-google-plus-official:before {
    content: "\f2b3"
}

.fa-fa:before, .fa-font-awesome:before {
    content: "\f2b4"
}

.fa-handshake-o:before {
    content: "\f2b5"
}

.fa-envelope-open:before {
    content: "\f2b6"
}

.fa-envelope-open-o:before {
    content: "\f2b7"
}

.fa-linode:before {
    content: "\f2b8"
}

.fa-address-book:before {
    content: "\f2b9"
}

.fa-address-book-o:before {
    content: "\f2ba"
}

.fa-vcard:before, .fa-address-card:before {
    content: "\f2bb"
}

.fa-vcard-o:before, .fa-address-card-o:before {
    content: "\f2bc"
}

.fa-user-circle:before {
    content: "\f2bd"
}

.fa-user-circle-o:before {
    content: "\f2be"
}

.fa-user-o:before {
    content: "\f2c0"
}

.fa-id-badge:before {
    content: "\f2c1"
}

.fa-drivers-license:before, .fa-id-card:before {
    content: "\f2c2"
}

.fa-drivers-license-o:before, .fa-id-card-o:before {
    content: "\f2c3"
}

.fa-quora:before {
    content: "\f2c4"
}

.fa-free-code-camp:before {
    content: "\f2c5"
}

.fa-telegram:before {
    content: "\f2c6"
}

.fa-thermometer-4:before, .fa-thermometer:before, .fa-thermometer-full:before {
    content: "\f2c7"
}

.fa-thermometer-3:before, .fa-thermometer-three-quarters:before {
    content: "\f2c8"
}

.fa-thermometer-2:before, .fa-thermometer-half:before {
    content: "\f2c9"
}

.fa-thermometer-1:before, .fa-thermometer-quarter:before {
    content: "\f2ca"
}

.fa-thermometer-0:before, .fa-thermometer-empty:before {
    content: "\f2cb"
}

.fa-shower:before {
    content: "\f2cc"
}

.fa-bathtub:before, .fa-s15:before, .fa-bath:before {
    content: "\f2cd"
}

.fa-podcast:before {
    content: "\f2ce"
}

.fa-window-maximize:before {
    content: "\f2d0"
}

.fa-window-minimize:before {
    content: "\f2d1"
}

.fa-window-restore:before {
    content: "\f2d2"
}

.fa-times-rectangle:before, .fa-window-close:before {
    content: "\f2d3"
}

.fa-times-rectangle-o:before, .fa-window-close-o:before {
    content: "\f2d4"
}

.fa-bandcamp:before {
    content: "\f2d5"
}

.fa-grav:before {
    content: "\f2d6"
}

.fa-etsy:before {
    content: "\f2d7"
}

.fa-imdb:before {
    content: "\f2d8"
}

.fa-ravelry:before {
    content: "\f2d9"
}

.fa-eercast:before {
    content: "\f2da"
}

.fa-microchip:before {
    content: "\f2db"
}

.fa-snowflake-o:before {
    content: "\f2dc"
}

.fa-superpowers:before {
    content: "\f2dd"
}

.fa-wpexplorer:before {
    content: "\f2de"
}

.fa-meetup:before {
    content: "\f2e0"
}

span.serif {
    font-family:Georgia, Times, serif
}

span.highlight {
    background: rgb(51, 51, 51);
    color: #fff;
    padding-left: 3px;
    padding-right:3px
}

.line-through {
    text-decoration:line-through
}

a.btn {
    display: inline-block;
    padding: 12px 20px;
    margin-bottom: 15px;
    cursor: pointer;
    width: auto;
    background: rgb(152, 152, 152);
    border: 2px solid rgb(152, 152, 152);
    color: #fff;
    font-weight: 700;
    font-size: .8rem;
    min-width: 140px;
    text-align:center !important
}

a.btn.outline {
    background: none;
    color:rgb(152, 152, 152)
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background-repeat: no-repeat;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -ms-hyphens: none;
    -webkit-hyphens: none;
    hyphens:auto
}

a {
    hyphens:none
}

ol, ul {
    list-style:none
}

table {
    border-spacing:0
}

body {
    position: relative;
    text-size-adjust:100%
}

.inside {
    position: relative;
    text-align:left
}

.block {
    overflow:hidden
}

.clear, #clear {
    height: 0;
    font-size: 0;
    line-height: 0;
    clear:both
}

.invisible {
    width: 0;
    height: 0;
    left: -1000px;
    top: -1000px;
    position: absolute;
    overflow: hidden;
    display:inline
}

* + html #main {
    position:static
}

header, footer, nav, section, article, figure {
    display:block
}

#container:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility:hidden
}

.animate {
    opacity:0
}

.animate.nowaypoint {
    opacity:1
}

p {
    margin-bottom: 15px;
    word-wrap:break-word
}

#wrapper {
    position: relative;
    z-index:10
}

#container {
    position: relative;
    width: 100%;
    margin: 0;
    background:var(--bg-primary)
}

i.ti {
    display:inline-block
}

.mb-m {
    margin-bottom:50px !important
}

@media only screen and (max-width: 767px) {

    .mb-m {
        margin-bottom:25px !important
    }
}

.bg-accent {
    background-color:rgb(152, 152, 152)
}

.h-align-left {
    text-align:left
}

.hidden {
    display:none
}

body.viewport_tablet .vis-desktop, body.viewport_mobile .vis-desktop {
    display:none !important
}

body.viewport_desktop .vis-mobile, body.viewport_tablet .vis-mobile {
    display:none !important
}

body.viewport_desktop .vis-tablet, body.viewport_mobile .vis-tablet {
    display:none !important
}

body.viewport_tablet .vis-desktop-mobile {
    display:none !important
}

body.viewport_mobile .vis-desktop-tablet {
    display:none !important
}

body.viewport_desktop .vis-mobile-tablet {
    display: none !important
}

.line-through {
    text-decoration:line-through
}

.uppercase {
    text-transform:uppercase
}

.lowercase {
    text-transform:lowercase
}

span.highlight {
    background: rgb(51, 51, 51);
    color: #fff;
    padding-left: 3px;
    padding-right:3px
}

span.serif {
    font-family:Georgia, Times, serif
}

sup {
    font-family: Verdana, Arial, sans-serif;
    font-size:.5em
}

.inline-block {
    display:inline-block
}

.hide {
    display:none
}

body {
    overflow-x: hidden;
    background-repeat:repeat
}

a {
    color: var(--text-primary);
    text-decoration:none
}

p a {
    color:rgb(152, 152, 152)
}

body.sidebar #main {
    overflow: visible;
    width: 73%;
    float: left;
    position:relative
}

body.sidebar.right #main .mod_article {
    padding-left:0 !important
}

body.sidebar.right #main {
    border-right:1px solid rgb(229, 229, 229)
}

body.sidebar #right {
    overflow: visible;
    padding-left: 40px;
    width: 27%;
    float: left;
    position:relative
}

body.sidebar #right .ce_text {
    padding: 5%;
    background:var(--bg-secondary)
}

body.sidebar #left {
    width: 27%;
    position: relative;
    padding-right: 40px;
    overflow:visible
}

body.sidebar.left #main {
    width: 73%;
    float: right;
    border-right: 0;
    border-left: 1px solid rgb(229, 229, 229);
    overflow:visible
}

body.sidebar.both #left {
    width: 20%;
    position: relative;
    padding-left: 0;
    padding-right: 0;
    float: left;
    overflow:visible
}

body.sidebar.both #right {
    left: 60%;
    margin-right: -22%;
    width: 20%;
    position: relative;
    padding-left: 0;
    padding-right: 0;
    float: left;
    overflow:visible
}

body.sidebar.both #right .inside {
    padding-right:0
}

body.sidebar.both #main {
    width: 54%;
    float: right;
    border-right: 0;
    border-left: 1px solid rgb(229, 229, 229);
    border-right: 1px solid rgb(229, 229, 229);
    margin-right: 23%;
    overflow:visible
}

.mainmenu {
    overflow: visible !important;
    float:right
}

.mainmenu .mod_article {
    float:right
}

.mainmenu ul {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align:right
}

.mainmenu ul ul {
    width: auto;
    display: none;
    white-space: nowrap;
    border-radius: 0;
    padding: 10px;
    position: absolute;
    top: 100%;
    margin-left: 0;
    background: #fff;
    box-shadow:1px 8px 15px rgba(0, 0, 0, .1)
}

.mainmenu ul ul ul {
    border-top: 0;
    margin-top: 0;
    box-shadow:0 0 15px rgba(0, 0, 0, .1)
}

.mainmenu ul:after {
    content: "";
    clear: both;
    display:block
}

.mainmenu ul li {
    display: inline-block;
    text-align: left;
    list-style-type: none;
    z-index:10
}

.mainmenu ul li {
    position:relative
}

.mainmenu ul li:last-of-type a {
    padding-right:0
}

.mainmenu ul li:hover > ul {
    display:block
}

.mainmenu ul li a {
    display: block;
    text-decoration: none;
    position: relative;
    line-height: 1em;
    min-height: inherit;
    text-align: center;
    font-size: 1rem;
    text-transform: uppercase;
    float: none;
    padding: 0 15px;
    line-height: inherit;
    font-weight: 700;
    color: #696969;
    transition: color 0.3s ease, opacity 0.3s ease;
    -webkit-transition:color 0.3s ease, opacity 0.3s ease
}

.mainmenu ul li a.trail, .mainmenu ul li a.active {
    color:rgb(152, 152, 152)
}

.mainmenu ul li a i {
    margin-right: 5px;
    display:none
}

.mainmenu ul li a i {
    display: inline-block;
    width:20px
}

.mainmenu ul ul li.last ul {
    right:inherit
}

.mainmenu ul ul li {
    float: none;
    position: relative;
    line-height: 32px;
    min-height: 0;
    display:block
}

.mainmenu ul ul li a {
    text-transform: none;
    text-align: left;
    border: 0;
    padding: 0 1.5rem !important;
    line-height: 32px !important;
    color: #393939;
    font-size: .9rem;
    letter-spacing: 0;
    font-weight:400
}

.mainmenu ul ul li a.last {
    border-bottom:0
}

.mainmenu ul ul li a.submenu:after {
    font-family: "FontAwesome";
    content: "\f105";
    position: absolute;
    right: 8px;
    background:none !important
}

.mainmenu ul ul ul {
    position: absolute;
    left: 100%;
    top:0
}

.mainmenu ul li.click_open ul {
    display: none;
    animation:none
}

.mainmenu ul li.click_open ul.active {
    display:block
}

nav.mainmenu a.menuheader {
    font-weight: 700;
    font-size:1.1rem
}

.mmenu_trigger {
    display: none;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    color:rgb(255, 255, 255)
}

.mmenu_trigger .label {
    margin-right: 8px;
    cursor:pointer
}

.mmenu_trigger .burger {
    height: 21px;
    width: 21px;
    position: relative;
    font-size: 7px;
    cursor: pointer;
    transition:.2s all
}

.mmenu_trigger .burger .burger_lines:after {
    left: 0;
    top:-15px
}

.mmenu_trigger .burger .burger_lines:before {
    left: 1em;
    top:15px
}

.mmenu_trigger .burger:after {
    content: '';
    display: block;
    position: absolute;
    height: 150%;
    width: 150%;
    top: -25%;
    left:-25%
}

.mmenu_trigger .burger .burger_lines {
    top: 50%;
    margin-top:-1px
}

.mmenu_trigger .burger .burger_lines, .mmenu_trigger .burger .burger_lines:after, .mmenu_trigger .burger .burger_lines:before {
    pointer-events: none;
    display: block;
    content: '';
    width: 100%;
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    height: 2px;
    position: absolute;
    transform:rotate(0)
}

.mmenu_trigger .burger .burger_lines:after {
    left: 0;
    top:-7px
}

.mmenu_trigger .burger .burger_lines:before {
    left: 0;
    top:7px
}

.mmenu_trigger .burger.transform .burger_lines, .mmenu_trigger .burger.transform .burger_lines:after, .mmenu_trigger .burger.transform .burger_lines:before {
    transition:.2s top .2s, .1s left, .2s transform, .4s background-color .2s
}

.mmenu_trigger .burger.transform.open .burger_lines, .mmenu_trigger .burger.transform.open .burger_lines:after, .mmenu_trigger .burger.transform.open .burger_lines:before {
    transition:.2s background-color, .2s top, .2s left, .2s transform .15s
}

.mmenu_trigger .burger.transform.open .burger_lines {
    background-color:transparent
}

.mmenu_trigger .burger.transform.open .burger_lines:before, .mmenu_trigger .burger.transform.open .burger_lines:after {
    left: 0;
    top:0
}

.mmenu_trigger .burger.transform.open .burger_lines:before {
    transform:rotate(-45deg)
}

.mmenu_trigger .burger.transform.open .burger_lines:after {
    transform:rotate(45deg)
}

.mmenu_trigger .burger.rotate .burger_lines, .mmenu_trigger .burger.rotate .burger_lines:after, .mmenu_trigger .burger.rotate .burger_lines:before {
    transition:all .2s
}

.mmenu_trigger .burger.rotate.open {
    transform:rotate(180deg)
}

.mmenu_trigger .burger.rotate.open .burger_lines {
    background-color:transparent
}

.mmenu_trigger .burger.rotate.open .burger_lines:before, .mmenu_trigger .burger.rotate.open .burger_lines:after {
    left: 0;
    top:0
}

.mmenu_trigger .burger.rotate.open .burger_lines:before {
    transform:rotate(135deg)
}

.mmenu_trigger .burger.rotate.open .burger_lines:after {
    transform:rotate(-135deg)
}

@media only screen and (min-width: 768px) {
    #mmenu {
        display:none
    }
}

#mmenu {
    left: 0;
    right: 0;
    height: calc(100% - 70px);
    position: fixed;
    top: 70px;
    z-index: 1000;
    min-width: 80%;
    transform: translateY(calc(-100% - 55px));
    transition: transform 0.3s ease;
    -webkit-transition: transform 0.3s ease;
    background:var(--bg-primary)
}

body.mmenu_open #mmenu {
    transform:translate(0) !important
}

#mmenu .scrollable {
    height: calc(100% - 50px);
    overflow-y:auto
}

#mmenu #mmenu_top {
    padding: 20px;
    background: var(--bg-primary);
    overflow: visible;
    position:relative
}

#mmenu #mmenu_middle {
    padding: 0 20px 20px 20px;
    background:var(--bg-primary)
}

#mmenu #mmenu_bottom {
    background: var(--bg-primary);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding:5px 20px 10px 20px
}

#mmenu .mod_navigation li.submenu {
    position:relative
}

#mmenu .mod_navigation li.submenu .opener {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 34px;
    z-index:10
}

#mmenu .mod_navigation li.submenu a {
    z-index:5
}

#mmenu .mod_navigation li a.submenu:after {
    content: "\f107";
    font-family: FontAwesome;
    position: absolute;
    right: 10px;
    top: 3px;
    margin-left: 15px;
    transition-duration: 0.3s;
    transition-property:transform
}

#mmenu .mod_navigation.mobile_horizontal li a.submenu.open:after {
    transform:rotate(180deg)
}

#mmenu .mod_navigation.mobile_horizontal li a.submenu:after {
    transform:rotate(-90deg)
}

#mmenu .mod_navigation.mobile_horizontal li a.submenu.open:after {
    transform: rotate(90deg);
    float: left;
    margin-left:0
}

#mmenu .mod_navigation.mobile_horizontal li a.submenu.open {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    padding-bottom: 10px;
    margin-bottom:10px
}

#mmenu .mod_navigation.mobile_horizontal .level_2 li a.submenu.open {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom:0
}

#mmenu .mod_navigation.mobile_horizontal .level_2 li a.submenu.open:after {
    transform:rotate(90deg)
}

#mmenu li i {
    margin-right:10px
}


#mmenu .mod_search {
    width:75%
}

#mmenu .mod_search input {
    border-radius: 5px;
    background: rgba(255, 255, 255, .2);
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIzMy43MDZweCIgaGVpZ2h0PSIzMy43MDZweCIgdmlld0JveD0iMCAwIDMzLjcwNiAzMy43MDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMzLjcwNiAzMy43MDYiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnIG9wYWNpdHk9IjAuOCI+PHBhdGggZmlsbD0iIzkzOTM5MyIgZD0iTTE3Ljc1NSwwLjk0NUMxNi4yMDksMC4zMTgsMTQuNTc2LDAsMTIuOSwwYy0xLjY3NSwwLTMuMzA4LDAuMzE4LTQuODU0LDAuOTQ1QzYuNDQ1LDEuNTk0LDUuMDEsMi41NDcsMy43NzgsMy43NzhDMi41NDcsNS4wMSwxLjU5NCw2LjQ0NSwwLjk0NCw4LjA0N0MwLjMxOCw5LjU5MywwLDExLjIyNiwwLDEyLjljMCwxLjY3NiwwLjMxOCwzLjMwOSwwLjk0NCw0Ljg1NGMwLjY0OSwxLjYwMSwxLjYwMywzLjAzNywyLjgzNCw0LjI2OWMxLjIzMSwxLjIzLDIuNjY3LDIuMTg2LDQuMjY5LDIuODM0YzEuNTQ2LDAuNjI3LDMuMTc5LDAuOTQ0LDQuODU0LDAuOTQ0YzEuNjc2LDAsMy4zMDktMC4zMTcsNC44NTQtMC45NDRjMS42MDItMC42NDgsMy4wMzctMS42MDQsNC4yNy0yLjgzNGMxLjIyOS0xLjIzLDIuMTg1LTIuNjY4LDIuODM0LTQuMjY5YzAuNjI1LTEuNTQ2LDAuOTQzLTMuMTc5LDAuOTQzLTQuODU0YzAtMS42NzUtMC4zMTgtMy4zMDgtMC45NDMtNC44NTRjLTAuNjQ5LTEuNjAyLTEuNjA0LTMuMDM3LTIuODM0LTQuMjY5QzIwLjc5MiwyLjU0NywxOS4zNTQsMS41OTQsMTcuNzU1LDAuOTQ1eiBNMjAuNjU4LDIwLjY1OGMtNC4yNzcsNC4yNzYtMTEuMjM3LDQuMjc2LTE1LjUxNSwwYy00LjI3OC00LjI3Ny00LjI3Ny0xMS4yMzcsMC0xNS41MTVzMTEuMjM3LTQuMjc3LDE1LjUxNSwwUzI0LjkzNywxNi4zODEsMjAuNjU4LDIwLjY1OHoiLz48cmVjdCB4PSIyNi45NTIiIHk9IjIwLjY5NyIgdHJhbnNmb3JtPSJtYXRyaXgoMC43MDcxIC0wLjcwNzEgMC43MDcxIDAuNzA3MSAtMTEuNTYzOCAyNy45MTc1KSIgZmlsbD0iIzkzOTM5MyIgd2lkdGg9IjEuOTMxIiBoZWlnaHQ9IjE0LjQ0MiIvPjwvZz48L3N2Zz4=);
    background-repeat: no-repeat;
    background-position: 93% center;
    background-size: 20px;
    padding: 5px 50px 5px 20px;
    height: 36px !important;
    margin-bottom:0
}

#mmenu .mod_search .widget {
    width: 100% !important;
    margin-bottom: 0;
    height:auto !important
}

#mmenu .mod_search .submit {
    display:none
}

#mmenu .mod_search .label {
    display:none
}

#mmenu .mod_navigation li a {
    display: block;
    padding:4px 40px 4px 0
}

#mmenu .mod_navigation li a.open, #mmenu .mod_navigation li a.active, #mmenu .mod_navigation li a:focus {
    font-weight:700
}

#mmenu nav.mobile_horizontal {
    display:none
}

#mmenu nav.mobile_horizontal li.hidden {
    display:none !important
}

#mmenu nav.mobile_horizontal ul ul li {
    display:none
}

#mmenu nav.mobile_horizontal li.open > ul > li {
    display:block
}

#mmenu nav.mobile_horizontal li.open > a {
    font-weight:700
}

#mmenu nav.mobile_vertical ul > li > ul {
    display:none
}

#mmenu nav.mobile_vertical ul > li.open > ul {
    display:block
}

#mmenu nav.mobile_vertical ul ul {
    padding-left:15px
}

#mmenu .mod_mmenu_custom_nav a {
    display: inline-block;
    margin-right:8px
}

.mmenu_overlay {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--overlay);
    z-index: 10;
    display:none
}

@media only screen and (max-width: 767px) {
    .onepage_page .header .mod_navigation.onepagenav {
        display:none !important
    }
}

.back a:before {
    font-family: "FontAwesome";
    content: '\f100';
    margin-right:5px
}

code, pre {
    font-family: monospace;
    color: var(--ui-text) !important;
}
code {
    background: var(--bg-code);
    padding: .1em .35em;
    border-radius: 3px;
}
pre {
    background: var(--bg-code);
    display: block;
    padding: 10px;
    margin-bottom: 10px;
    overflow-x: auto;
}
pre code {
    background: none;
    padding: 0;
}

blockquote {
    border-left: 5px solid rgb(152, 152, 152);
    padding-left:25px
}

blockquote p {
    font-family: Georgia, Times, serif;
    font-style: italic;
    text-align: justify;
    font-size:1.1rem
}

blockquote p:before {
    content: '"';
     text-indent:0;
    display:inline-block;
    font-weight:700;
    width:20px;
    font-size:2rem;
    line-height:1.1rem
}
 blockquote em{
    font-size:.6em;
    font-style:normal;
    line-height:1;
    font-weight:700
}
 blockquote a{
    color:rgb(152,152,152)
}
.mod_socials i{
    transition:All 0.3s ease;
    -webkit-transition:All 0.3s ease
}
.ce_table{
    position:relative;
    overflow:visible
}
.ce_table table{
    margin-bottom:10px;
    width:99.9%;
    text-align:center;
    white-space:nowrap;
    position:relative
}
.ce_table table td{
    border-top:solid 1px #E3E3E3;
    padding:12px;
    text-align:left
}
.ce_table table td p{
    margin:0
}
.ce_table table th{
    text-align:left;
    padding:12px;
    color:rgb(255,255,255);
    font-weight:700;
    background:rgb(152,152,152)
}
.ce_table table tfoot td{
    color:rgb(152,152,152);
    font-weight:700
}
.ce_table.overflow{
    overflow-x:auto
}
.ce_table .table-clean td.col_first,.ce_table .table-clean th.col_first,.ce_table.table-clean td.col_first,.ce_table.table-clean th.col_first{
    padding-left:0
}
.ce_table table a{
    text-decoration:underline
}

hr.hr_datatable{
    padding:0;
    border:none;
    border-top:1px solid var(--border-color);
    color:#ccc;
    text-align:center;
    height:1px;
    margin:25px 0;
    clear:both;
    width:30em;
    max-width: 100%;
    float:left
}
.ce_text ul,.ce_text ol{
    margin-bottom:15px
}
.ce_text li,.ce_text ol{
    line-height:1.5em
}
.ce_text ul,.ce_text ol{
    padding-left:25px
}
.ce_text ul li{
    list-style-type:disc;
    list-style-position:outside;
    position:relative;
    margin-bottom:4px
}
.ce_text ol{
    list-style:decimal;
    padding-left:26px
}
.ce_text ol ol{
    list-style:upper-alpha
}
.ce_text ol ol ol{
    list-style:lower-roman
}
.ce_gallery .borders li.col_last{
    border-right-color:transparent
}
.ce_gallery .image_container i.fa.fa-plus-circle{
    position:relative;
    height:50px;
    width:50px
}
.ce_gallery .image_container i.fa.fa-plus-circle:before{
    content:'';
    width:50px;
    height:1px;
    background:rgb(255,255,255);
    display:inline-block;
    position:absolute;
    top:25px;
    left:0;
    -webkit-transition:all 0.2s;
    transition:all 0.2s
}
.ce_gallery .image_container i.fa.fa-plus-circle:after{
    content:'';
    width:50px;
    height:1px;
    background:rgb(255,255,255);
    display:inline-block;
    position:absolute;
    top:25px;
    left:0
}
.ce_gallery li:hover .image_container i.fa.fa-plus-circle:before{
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg)
}
.ce_elevatezoom li.col_first{
    clear:both
}
.ce_headline [class^="label"]{
    position:relative;
    top:-.6em;
    font-size:.6em;
    padding:1px 6px
}
.ce_text.format-p-large p{
    font-size:1.3rem
}
.ce_text.format-p-small p{
    font-size:.9rem
}
.ce_accordion .toggler.ui-state-active:before{
    font-family:FontAwesome;
    content:"\f106"
}
.ce_accordion_v2 .toggler.ui-state-active:before,.ce_accordion.style2 .toggler.ui-state-active:before{
    content:" \f068";
    color:rgb(255,255,255);
    border-color:rgb(255,255,255)
}
.ce_accordion_v2 .toggler.ui-state-active,.ce_accordion.style2 .toggler.ui-state-active{
    color:rgb(255,255,255);
    background:rgb(0,0,0)
}
a.btn{
    display:inline-block;
    padding:15px 50px;
    margin-bottom:15px;
    cursor:pointer;
    transition:all 0.2s ease-out 0s;
    width:auto;
    background:rgb(152,152,152);
    border:2px solid rgb(152,152,152);
    font-weight:700;
    min-width:140px;
    text-align:center!important;
    position:relative;
    position:relative;
    -webkit-transition-property:all;
    transition-property:all;
    -webkit-transition-duration:0.2s;
    transition-duration:0.2s;
    font-size:1rem
}
a.btn{
    color:#fff
}
a.btn:hover{
    opacity:.8
}
a.btn.outline{
    background:transparent;
    color:rgb(152,152,152)
}
a.btn.outline:hover{
    background:rgb(37,37,37);
    border-color:rgb(37,37,37);
    color:rgb(255,255,255)
}
a.btn.small{
    padding:9px 15px;
    font-size:.75rem
}
a.btn.large{
    padding:20px 30px
}
a.btn.large{
    padding:15px 50px
}
a.btn.expand{
    width:100%
}
a.btn.success{
    background:rgb(157,213,93);
    border-color:rgb(157,213,93)
}
a.btn.alert{
    background:rgb(247,80,90);
    border-color:rgb(247,80,90)
}
a.btn.warning{
    background:rgb(240,138,36);
    border-color:rgb(240,138,36)
}
a.btn.info{
    background:rgb(160,211,232);
    border-color:rgb(160,211,232);
    color:rgb(51,51,51)
}
a.btn.success:hover,a.btn.alert:hover,a.btn.warning:hover,a.btn.info:hover{
    opacity:.8
}
.ce_text a.btn{
    margin-top:15px
}
#main .mod_article{
    position:relative
}
.mod_login table td,.mod_login table{
    border:0
}
.mod_login{
    /* padding:5% ist prozentual zur ELTERN-Breite. Auf Breitbild-Monitoren
       explodiert der Innenabstand (z.B. 124px je Seite bei 2560px) und presst
       die Spalte auf ~200px zusammen -> Label + Recovery-Hinweis brechen um und
       das 300px-Eingabefeld laeuft aus dem Kasten. clamp() deckelt den Abstand
       (mobil weiter klein, auf grossen Screens max. 40px). Die erste
       padding:5%-Zeile bleibt als Fallback fuer Browser ohne clamp(). */
    padding:5%;
    padding: clamp(14px, 5%, 40px);
    background:var(--bg-primary);
    margin:10px auto;
    max-width:450px
}
.mod_login input.submit,.mod_login button.submit{
    margin:0
}
.mod_login .formbody{
    margin:0
}
.mod_login .widget-submit{
    margin-bottom:0;
    margin-top:15px
}
.mod_eventlist_v4 i.fa-location-arrow{
    margin-right:4px;
    position:absolute;
    left:0;
    top:0;
    width:70px;
    background:rgba(0,0,0,.5);
    height:100%
}
.mod_eventlist_v4 i.fa-location-arrow:before{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    font-size:1.667rem;
    line-height:1.667rem
}
.mod_eventlist_v4 i.fa-clock-o{
    margin-right:5px
}
.mod_search input,.mod_search .widget-text{
    width:45%;
    float:left;
    height:48px!important
}
.mod_search input.submit,.mod_search button.submit{
    border:1px solid rgb(152,152,152);
    border-radius:0
}
.mod_search button.submit{
    border:0!important
}
.mod_search p.header{
    margin-top:15px;
    background:none!important;
    clear:both
}
.mod_search input:not(.submit),.mod_search button:not(.submit){
    -webkit-appearance:textfield!important
}
.mod_search .widget-submit{
    float:left
}
.newsreader .date{
    display:inline-block;
    margin-right:20px
}
.newsreader .info{
    font-size:.8em;
    margin-bottom:35px;
    background:#f8f8f8;
    padding:30px
}
.newsreader .date:before{
    font-family:FontAwesome;
    content:"\f073";
    margin-right:5px
}
.newsreader .author{
    display:inline-block;
    margin-right:20px
}
.newsreader .author:before{
    font-family:FontAwesome;
    content:"\f007";
    margin-right:5px
}
.newsreader .comments{
    display:inline-block
}
.newsreader .comments:before{
    font-family:FontAwesome;
    content:"\f0e6";
    margin-right:5px
}
.newsreader .back{
    padding-top:10px;
    margin-top:40px;
    border-top:1px solid #ddd;
    overflow:hidden;
    margin-left:0;
    width:100%;
    float:none;
    position:relative;
    clear:both
}
.newsreader .back a{
    font-size:.6667rem;
    text-transform:uppercase
}
input,textarea,select{
    padding:10px;
    background-color:rgba(255,255,255,.5);
    border:1px solid var(--control-border);
    transition:all 0.15s linear 0s;
    width:100%;
    font-family:inherit
}
input[type=checkbox],input[type=radio]{
    width:auto;
    padding:0;
    background-color:transparent;
    border:0;
    transition:none;
    vertical-align:middle;
    margin-right:6px;
    position:relative;
    top:-2px
}
input[type=checkbox]:hover,input[type=radio]:hover{
    border:0
}
/* type="search" (Kunden-Picker u.ä.) dient nur der AutoFill-Abwehr und soll
   optisch ein normales Textfeld bleiben: Browser-Sonderoptik samt
   Lösch-Button und Safari-Kontakt-Icon abschalten. */
input[type=search]{
    -webkit-appearance:textfield;
    appearance:textfield
}
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration{
    display:none
}
input[type=search]::-webkit-contacts-auto-fill-button{
    display:none;
    pointer-events:none
}


@media only screen and (min-width: 768px) {
  label{
      margin-bottom:3px
  }
}

form .widget input,form .widget textarea,form .widget select{
    width:100%
}
textarea{
    height:400px
}
input:hover:not([type="submit"]),button:hover:not([type="submit"]),textarea:hover{
    border:1px solid var(--control-border-hover)
}
input:focus,textarea:focus{
    background-color:#fff;
    border:1px solid rgb(152,152,152);
    border-radius:0
}
form div.widget{
    margin-bottom:20px
}
form select{
    background-image:url(data:image/png;
    base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAANCAYAAAC+ct6XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjBBRUQ1QTQ1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjBBRUQ1QTU1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMEFFRDVBMjVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMEFFRDVBMzVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk5mU4QAAACUSURBVHjaYmRgYJD6////MwY6AyaGAQIspCieM2cOjKkIxCFA3A0TSElJoZ3FUCANxAeAWA6IOYG4iR5BjWwpCDQCcSnNgxoIVJCDFwnwA/FHWlp8EIpHSKoGgiggLkITewrEcbQO6mVAbAbE+VD+a3IsJTc7FQAxDxD7AbEzEF+jR1DDywtoCr9DbhwzDlRZDRBgACYqHJO9bkklAAAAAElFTkSuQmCC);
    background-position:center right;
    background-repeat:no-repeat;
    -webkit-appearance:none;
    -moz-appearance:none;
    line-height:1.3;
    height:51px;
    padding:5px 35px 5px 10px;
    border:1px solid var(--control-border);
    border-radius:0
}
form select option{
    padding-right:10px;
    padding-left:10px
}
form textarea{
    font-family:inherit
}
form p.error{
    color:var(--red)
}
input.submit,button.submit{
    display:inline-block;
    padding:15px 20px;
    height:48px;
    cursor:pointer;
    transition:all 0.2s ease-out 0s;
    width:auto;
    background:rgb(152,152,152);
    color:#fff;
    border-radius:3px;
    font-weight:700;
    font-size:1rem;
    min-width:140px;
    text-align:center;
    position:relative;
    -webkit-appearance:none
      }
    /* Modernisiert 05.07. passend zur .subnav-actions-Optik: radius 8px,
       weight 600, auto-Hoehe statt 55px-Klotz, Akzentgruen vereinheitlicht
       (#20ae7e -> var(--accent-color)). Seit e474561+: Primaer-Buttons
       invertiert wie Loeschen — weiss mit gruenem Text/Rand, fuellt sich
       erst bei Hover (Max' Wunsch). Layout-Mechanik (min-width, Mobile-
       Stacking, Drittel-Regel unten) bewusst unveraendert. */
    ul.actions li a.button, input[type="submit"], button.button, #nc-test-btn {
    display: inline-block;
    padding: 10px 18px;
    height: auto;
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.2s ease-out 0s;
    background: var(--bg-primary);
    width: auto;
    color: var(--accent-color, #20a478);
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    font-family: inherit;
    min-width: 140px;
    text-align: center;
    position: relative;
    -webkit-appearance: none;
    text-decoration: none;
    border: 1px solid var(--accent-soft-border)
    }
    /* Hover fuellt gruen — Pendant zur Loeschen-Hover-Fuellung in rot.
       Gilt auch fuer Submits ausserhalb von ul.actions (Login etc.).
       :not(:disabled): sonst fuellt der Hover auch deaktivierte Buttons und
       sie wirken klickbar (z.B. Kundenkartei-Merge ohne Auswahl). */
    input[type="submit"]:not(.btn-danger):not(:disabled):hover, button.button:not(.btn-danger):not(:disabled):hover, #nc-test-btn:not(:disabled):hover {
    background: var(--accent-color, #20a478);
    color: #fff;
    border-color: var(--accent-color, #20a478);
    }

/* Form-Controls erben die Seitenschrift -- Browser-Default fuer input/select/
   textarea ist sonst ~13px (erben NICHT vom body). Behebt zu kleine Schrift in
   Login/TOTP und allen Formularen app-weit. */
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="image"]),
textarea,
select {
  font-family: inherit;
  font-size: 1rem;
}

/* Deaktivierte Buttons app-weit ausgegraut (Logo-Upload vor geladenem Bild,
   Kundenkartei-Merge ohne Auswahl, …) — vorher galt das nur in ul.actions,
   freistehende disabled-Submits sahen voll aktiv aus. */
input[type="submit"]:disabled, button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Marken-Schriftzug (Login) -- kraeftiger + engeres Tracking (vgl. gagenheld.de) */
/* Marken-Schriftzug (Login): Open Sans hat nur 400/600 -> kein sichtbares Bold.
   Raleway ist mit 800/900 geladen und gibt die kraeftige Wortmarke (vgl. Landing). */
.gh-wordmark { font-family: 'Raleway', sans-serif; font-weight: 800; letter-spacing: -0.02em; }
/* Die Marken-Zeile ("Gagenheld Login") bricht nie um — wie .brand-mark im
   Header (dort via white-space:nowrap). Relevant v.a. bis Raleway geladen
   ist: der fette System-Fallback ist breiter und kippte die Zeile sonst um. */
.mod_login h3 { white-space: nowrap; }
/* Login-Labels immer ueber dem Feld. Sonst haengen sie am inline-Default:
   die restlichen App-Formulare stapeln nur, weil ihre Inputs width:100% sind
   — im Login ist input.text aber auf 300px fixiert. In einer breiten Spalte
   passen kurzes Label ("Passwort") + 300px-Feld sonst nebeneinander. */
.mod_login label { display: block; }
  ul.actions li {
  display: inline-block;
  margin-right: 10px; /* optional, falls du Abstand zwischen den Links haben möchtest */
  }

/* --- Action-Buttons: klare Hierarchie + Mobile-Layout --- */
ul.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.actions li { margin: 0; }

/* Zweite Aktions-Reihe (z.B. Angebote: Auftragsbestaetigung unter
   Aendern/Loeschen/Zurueck) -- kleiner Abstand zur Reihe darueber. */
ul.actions + ul.actions { margin-top: 10px; }

/* Dezenter Export-Link (z.B. Angebote iCal) direkt unter den Aktions-
   Buttons -- wie der ".csv exportieren"-Link in den Tabellen: eigene
   Zeile, kleiner Abstand. */
ul.actions + .smaller { display: block; margin-top: 12px; }

/* Primaer -- "Aendern": invertiert (weiss/gruen), Hover-Fuellung kommt
   aus der globalen Submit-Hover-Regel oben. */

/* Destruktiver Submit (z.B. "deaktivieren"): rot gefuellt */
ul.actions input[type="submit"].btn-danger {
  background: var(--danger);
  border-color: var(--danger-dark);
  color: #fff;
}
ul.actions input[type="submit"].btn-danger:hover { background: var(--danger-dark); }

/* Sekundaer -- "Zurueck": dezenter Outline-Button */
ul.actions li a.button:not(.js-post-delete) {
  background: var(--bg-primary);
  color: var(--ui-text);
  border-color: var(--control-border);
}
ul.actions li a.button:not(.js-post-delete):hover { background: var(--bg-secondary); }

/* Destruktiv -- "Loeschen": rot, abgesetzt vom primaeren Gruen */
ul.actions li a.js-post-delete {
  background: var(--bg-primary);
  color: var(--danger);
  border-color: var(--danger-soft-border);
}
ul.actions li a.js-post-delete:hover {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

/* Destruktive <button>-Aktionen (z.B. Import ruecknehmen): rot-Outline in der
   js-post-delete-Optik, aber ohne dessen post_delete.js-Confirm-Semantik. */
button.button.btn-danger {
  color: var(--danger);
  border-color: var(--danger-soft-border);
}
button.button.btn-danger:hover {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

/* Mobil: volle Breite, gestapelt, grosse Touch-Targets, Loeschen ans Ende */
@media (max-width: 767px) {
  ul.actions { flex-direction: column; gap: 10px; }
  ul.actions li,
  ul.actions li a.button,
  ul.actions button.button,
  ul.actions input[type="submit"] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  ul.actions li:has(a.button:not(.js-post-delete)) { order: 2; }
  ul.actions li:has(a.js-post-delete) { order: 3; margin-top: 8px; }
}

/* Desktop: Aendern/Loeschen/Zurueck als gleich breite Drittel auf die
   Input-Breite ziehen (statt links gedraengt). Breite spiegelt die Felder
   (input,select,textarea: --field-w / max 100%, s.u.). Greift nur bei der
   Edit-Form-Kombi Submit + js-post-delete -- Listen-Aktionen (nur Link)
   und Einzel-Buttons bleiben unberuehrt. */
@media (min-width: 768px) {
  ul.actions:has(input[type="submit"]):has(a.js-post-delete) {
    width: var(--field-w);
    max-width: 100%;
    flex-wrap: nowrap;
  }
  ul.actions:has(input[type="submit"]):has(a.js-post-delete) > li {
    flex: 1 1 0;
    margin: 0;
  }
  ul.actions:has(input[type="submit"]):has(a.js-post-delete) > li > input[type="submit"],
  ul.actions:has(input[type="submit"]):has(a.js-post-delete) > li > a.button {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

input.submit[type="submit"]:hover,button.submit[type="submit"]:hover{
    background:rgba(152,152,152,.9)
}
input.submit,button.submit,form div.widget{
    font-family:inherit
}
input.submit i:before,button.submit i:before{
    font-family:FontAwesome;
    margin-right:5px
}
form div.widget{
    position:relative
}
html{
    scroll-padding:70px 0 0 0
}
#viewport-pixel{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:0;
    z-index:-1000;
    visibility:hidden;
    opacity:1
}
@media only screen and (min-device-width :768px) and (max-device-width :1024px){
    #viewport-pixel{
        opacity:.75
    }
}
@media only screen and (max-width:767px){
    #viewport-pixel{
        opacity:.5
    }
}
@media only screen and (max-width:767px){
    #slider{
        padding-top:0!important
    }
    .mainmenu{
        display:none
    }
    #nav-open-btn{
        display:block
    }
    body{
        padding:0
    }
    #wrapper{
        width:100%
    }
    #nav-open-btn{
        right:20px
    }
    html{
        -webkit-text-size-adjust:none
    }
    table{
        font-size:.7333rem
    }
    body.sidebar #main,body.sidebar #right,body.sidebar #left{
        width:100%!important;
        margin:0!important;
        float:none!important;
        border:0!important
    }
    body.sidebar #right,body.sidebar #left{
        margin-top:15px!important;
        border-top:4px solid #ddd!important;
        width:100%!important;
        float:none!important;
        position:static!important;
        padding-left:0!important;
        padding-right:0!important
    }
    body.sidebar #right .inside,body.sidebar #left .inside{
        padding-top:0;
        padding-bottom:0
    }
    body.sidebar #container{
        padding-left:0!important;
        padding-right:0!important
    }
    .ce_gallery .borders li.col_last{
        border-right:1px solid transparent;
        width:50%
    }
    .mod_search input,.mod_search button,.mod_search .widget-text,.mod_search .widget-submit{
        width:100%!important;
        float:none;
        margin-bottom:5px;
        margin-left:0!important
    }
    .more a{
        padding:2px 5px;
        font-size:80%
    }
    .newsreader .info{
        padding:5px 15px
    }
    .mmenu_trigger{
        display:flex
    }
}
.ce_text_image_bar .inside{
    display:flex;
    flex-wrap:wrap;
    position:static;
    padding-left:0;
    padding-right:0
}
.ce_text_image_bar{
    position:relative;
    background:rgb(248,248,248)
}
.ce_text_image_bar .text-table{
    display:table;
    height:100%;
    width:100%
}
.ce_text_image_bar.bg-accent .ce_hyperlink a{
    background:rgb(51,51,51);
    border-color:rgb(51,51,51)
}
.ce_text_image_bar ul{
    padding-left:20px
}
.ce_text_image_bar li{
    list-style-type:disc
}
.ce_teambox .socials.color i.fa-facebook{
    background:rgb(67,96,152)!important;
    color:rgb(255,2552,255)!important
}
.ce_teambox .socials.color i.fa-twitter{
    background:rgb(40,169,226)!important;
    color:rgb(255,2552,255)!important
}
.ce_teambox .socials.color i.fa-xing{
    background:rgb(0,93,94)!important;
    color:rgb(255,2552,255)!important
}
.ce_teambox .socials.color i.fa-tumblr{
    background:rgb(45,73,102)!important;
    color:rgb(255,2552,255)!important
}
.ce_teambox .socials.color i.fa-google-plus{
    background:rgb(217,82,50)!important;
    color:rgb(255,2552,255)!important
}
.ce_teambox .socials.color i.fa-flickr{
    background:rgb(250,29,132)!important;
    color:rgb(255,2552,255)!important
}
.ce_teambox .socials.color i.fa-linkedin{
    background:rgb(2,116,179)!important;
    color:rgb(255,2552,255)!important
}
.ce_teambox .socials.color i.fa-instagram{
    background:rgb(167,124,98)!important;
    color:rgb(255,2552,255)!important
}
.ce_teambox .socials.color i.fa-pinterest{
    background:rgb(205,33,40)!important;
    color:rgb(255,2552,255)!important
}
.ce_teambox .socials.color i.fa-vimeo-square{
    background:rgb(52,192,238)!important;
    color:rgb(255,2552,255)!important
}
.ce_teambox .socials.color i.fa-youtube{
    background:rgb(220,33,48)!important;
    color:rgb(255,2552,255)!important
}
@keyframes blink{
    0%{
        opacity:1
    }
    50%{
        opacity:0
    }
    100%{
        opacity:1
    }
}
@-webkit-keyframes blink{
    0%{
        opacity:1
    }
    50%{
        opacity:0
    }
    100%{
        opacity:1
    }
}
@-moz-keyframes blink{
    0%{
        opacity:1
    }
    50%{
        opacity:0
    }
    100%{
        opacity:1
    }
}
.ce_text_imagebox{
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
    position:relative;
    overflow:visible
}
.ce_text_imagebox .inside{
    position:absolute;
    z-index:20;
    margin:0 auto;
    padding:5%;
    width:100%;
    text-align:left
}
.ce_text_imagebox p{
    margin-bottom:0
}
.ce_text_imagebox a{
    transition:all 0.3s ease;
    -webkit-transition:all 0.3s ease
}
.ce_text_imagebox:hover a:hover{
    box-shadow:0 70px 70px rgba(0,0,0,.2);
    transform:translate(0,-10px);
    -webkit-transform:translate(0,-10px);
    z-index:10
}
#slider .ce_text_imagebox{
    margin:0
}
#slider .ce_text_imagebox .inside h1,#slider .ce_text_imagebox .inside h2,#slider .ce_text_imagebox .inside h3,#slider .ce_text_imagebox .inside h4,#slider .ce_text_imagebox .inside h5,#slider .ce_text_imagebox .inside h6{
    margin-bottom:5px
}
#slider .ce_text_imagebox .inside .btn{
    margin-top:35px
}
#slider .ce_text_imagebox:hover a{
    opacity:1
}
.ce_text_imagebox.oversize .inside{
    position:static;
    -webkit-transform:translateY(0%);
    -ms-transform:translateY(0%);
    transform:translateY(0%)
}
@-webkit-keyframes pulseImageMap{
    0%{
        -webkit-box-shadow:0 0 0 0 rgba(255,255,255,.4)
    }
    70%{
        -webkit-box-shadow:0 0 0 10px rgba(255,255,255,0)
    }
    100%{
        -webkit-box-shadow:0 0 0 0 rgba(255,255,255,0)
    }
}
@keyframes pulseImageMap{
    0%{
        -moz-box-shadow:0 0 0 0 rgba(0,0,0,.4);
        box-shadow:0 0 0 0 rgba(0,0,0,.4)
    }
    70%{
        -moz-box-shadow:0 0 0 10px rgba(0,0,0,0);
        box-shadow:0 0 0 10px rgba(0,0,0,0)
    }
    100%{
        -moz-box-shadow:0 0 0 0 rgba(0,0,0,0);
        box-shadow:0 0 0 0 rgba(0,0,0,0)
    }
}
a.btn.success:hover,a.btn.alert:hover,a.btn.warning:hover,a.btn.info:hover{
    opacity:.8
}
.page_navigation{
    position:fixed;
    z-index:1000;
    right:40px;
    top:50%;
    transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
    overflow:visible
}
.page_navigation ul{
    position:relative;
    display:block;
    height:100%;
    margin:0;
    padding:0;
    list-style:none
}
.page_navigation ul:before{
    content:'';
    left:50%;
    margin-left:3px;
    z-index:1;
    width:1px;
    top:20px;
    background:rgb(50,50,50);
    position:absolute;
    height:calc(100% - 40px)
}
.page_navigation ul:after{
    content:'';
    left:50%;
    margin-left:4px;
    z-index:1;
    width:1px;
    top:20px;
    background:rgba(255,255,255,.2);
    position:absolute;
    height:calc(100% - 40px)
}
.page_navigation a{
    position:relative;
    display:inline-block;
    z-index:10;
    padding:20px
}
.page_navigation .title{
    font-size:.6667rem;
    font-family:Source Sans Pro,sans-serif;
    font-weight:700;
    position:absolute;
    top:.4667rem;
    right:30px;
    padding:12px 20px;
    transition:all .5s ease;
    -webkit-transition:all .5s ease;
    white-space:nowrap;
    letter-spacing:1px;
    text-transform:uppercase;
    pointer-events:none;
    opacity:0;
    color:#333;
    border-radius:10px;
    background:rgba(255,255,255,.98);
    box-shadow:0 1px 3px rgba(31,31,31,.2);
    line-height:1
}
.page_navigation li:hover .title{
    opacity:1
}
.page_navigation li .circle{
    position:absolute;
    display:block;
    width:8px;
    height:8px;
    transition:-webkit-transform .5s ease;
    transition:transform .5s ease;
    border-radius:100%;
    background:rgb(255,255,255);
    box-shadow:0 0 0 2px rgb(50,50,50)
}
.page_navigation a.active .circle{
    box-shadow:0 0 0 4px #fff
}
.page_navigation li .circle:before{
    position:absolute;
    top:1px;
    left:1px;
    display:block;
    width:6px;
    height:6px;
    content:'';
    transition:all .5s ease;
    -webkit-transition:all .5s ease;
    opacity:0;
    border-radius:50%;
    background:rgb(255,255,255);
    box-shadow:0 0 0 3px rgb(50,50,50)
}
.page_navigation a.active .circle:before{
    opacity:1;
    background:rgb(50,50,50)
}
.page_navigation a.active .circle:before{
    box-shadow:0 0 0 3px rgb(255,255,255);
    background:rgb(50,50,50)
}
.page_navigation a.active .circle{
    box-shadow:0 0 0 4px rgb(50,50,50)
}
.page_navigation li:hover .circle,.page_navigation a.active .circle{
    -webkit-transform:translateZ(0) scale(1.2);
    transform:translateZ(0) scale(1.2)
}
.mod_quickmenu{
    position:fixed;
    bottom:120px;
    right:18px;
    z-index:100;
    padding-top:100px
}
.mod_quickmenu ul:hover li{
    margin-top:0
}
.mod_quickmenu li{
    display:block;
    float:right;
    clear:right;
    transition-property:margin-top;
    transition-duration:0.5s;
    transition-timing-function:cubic-bezier(0,1,.5,1)
}
.mod_quickmenu.collapse li{
    margin-top:-35px
}
.mod_quickmenu li a{
    display:block;
    line-height:40px;
    width:40px;
    border:1px solid rgb(100,100,100);
    border-radius:3px;
    overflow:hidden;
    transition:All 0.3s ease;
    -webkit-transition:All 0.3s ease;
    white-space:nowrap;
    background:rgba(255,255,255,.9);
    margin-bottom:3px;
    font-size:15px
}
.mod_quickmenu li a i{
    width:40px;
    text-align:center;
    font-size:19px
}
.mod_quickmenu li a span{
    margin-right:10px;
    font-size:15px
}
.mod_quickmenu li a:hover{
    width:140px
}
@media only screen and (max-width:767px){
    .ce_text_imagebox .inside{
        padding:20px
    }
    .ce_text_imagebox .content{
        width:100%!important
    }
    .page_navigation{
        display:none
    }
    .mod_quickmenu{
        display:none
    }
    a.btn{
        display:block
    }
    .ce_text_image_bar .inside{
        height:auto!important
    }
}
.mod_customcatalogfilter.immorealty_filter .filter_range .ui-slider-range{
    background:rgb(50,50,50)
}
.mod_customcatalogfilter.immorealty_filter .filter_range .ui-slider{
    clear:both;
    margin:0 10px
}
.mod_customcataloglist.cc_cardealer .list-options i.fa-th{
    border-left:1px solid rgb(220,220,220)
}
.mod_customcataloglist.cc_cardealer .list-options i.fa-list{
    background:rgb(250,250,250)
}
.mod_customcataloglist.cc_cardealer .list-options i.fa-list{
    background:rgb(240,240,240)
}
.mod_customcataloglist.cc_cardealer.grid-view .list-options i.fa-list{
    background:rgb(250,250,250)
}
.mod_customcataloglist.cc_cardealer.grid-view .list-options i.fa-th{
    background:rgb(240,240,240)
}
.mod_customcatalogfilter.cardealer_filter .filter_range .ui-slider-range{
    background:rgb(50,50,50)
}
.mod_customcatalogfilter.cardealer_filter .filter_range .ui-slider{
    clear:both;
    margin:0 10px
}
.mod_customcatalogfilter.catalog_filter .filter_range .ui-slider-range{
    background:rgb(50,50,50)
}
.mod_customcatalogfilter.catalog_filter .filter_range .ui-slider{
    clear:both;
    margin:0 10px
}
.mod_customcatalogfilter.accommodations_filter .filter_range .ui-slider-range{
    background:rgb(50,50,50)
}
.mod_customcatalogfilter.accommodations_filter .filter_range .ui-slider{
    clear:both;
    margin:0 10px
}
.mod_customcatalogfilter.cc_directory .filter_geolocation .ui-slider-range{
    background:rgb(225,225,225)!important;
    border-color:rgb(225,225,225)
}
.mod_customcatalogfilter.cc_directory .filter_geolocation .ui-widget-content{
    border-color:rgb(225,225,225)
}
.mod_customcatalogfilter.cc_directory .filter_geolocation .ui-state-default{
    background:rgb(62,62,62);
    border-color:rgb(62,62,62);
    border-radius:100%
}
.mod_customcatalogfilter.cc_directory .filter_geolocation .ui-slider{
    clear:both;
    margin:0 10px
}
.mod_customcatalogfilter.hotelapart_filter .filter_range .ui-slider-range{
    background:rgb(50,50,50)
}
.mod_customcatalogfilter.hotelapart_filter .filter_range .ui-slider{
    clear:both;
    margin:0 10px
}
.mod_customcatalogfilter.cc_product_catalog .filter_range .ui-slider-range{
    background:rgb(50,50,50)
}
.mod_customcatalogfilter.cc_product_catalog .filter_range .ui-slider{
    clear:both;
    margin:0 10px
}
.mod_customcatalogfilter.cc_product_catalog .filter_geolocation .ui-slider-range{
    background:rgb(225,225,225)!important;
    border-color:rgb(225,225,225)
}
.mod_customcatalogfilter.cc_product_catalog .filter_geolocation .ui-widget-content{
    border-color:rgb(225,225,225)
}
.mod_customcatalogfilter.cc_product_catalog .filter_geolocation .ui-state-default{
    background:rgb(62,62,62);
    border-color:rgb(62,62,62);
    border-radius:100%
}
.mod_customcatalogfilter.cc_product_catalog .filter_geolocation .ui-slider{
    clear:both;
    margin:0 10px
}
.mod_customcatalogfilter.cc_booklibrary .filter_range .ui-slider-range{
    background:rgb(50,50,50)
}
.mod_customcatalogfilter.cc_booklibrary .filter_range .ui-slider{
    clear:both;
    margin:0 10px
}
html,body{
    font-size:15px
}
body{
    color:var(--text-primary);
    font-family:'Open Sans',sans-serif;
    line-height:1.8rem;
    font-weight:400
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
    margin-bottom:25px;
    line-height:1.3;
    color:var(--text-heading);
    word-wrap:break-word;
    font-weight:700
}
h1,.h1,.h1 p{
    font-size:3rem;
    padding-top:0
}
h2,.h2,.h2 p{
    font-size:2.333rem
}
h3,.h3,.h3 p{
    font-size:1.867rem
}
h4,.h4,.h4 p{
    font-size:1.5rem
}
h5,.h5,.h5 p{
    font-size:1.333rem
}
h6,.h6,.h6 p{
    font-size:1.2rem
}
.column[class*="mb-"]:not[class*="-m"]>h1,.column[class*="mb-"]:not[class*="-m"]>h2,.column[class*="mb-"]:not[class*="-m"]>h3,.column[class*="mb-"]:not[class*="-m"]>h4,.column[class*="mb-"]:not[class*="-m"]>h5,.column[class*="mb-"]:not[class*="-m"]>h6,.column[class*="mb-"]:not[class*="-m"]>.attributes>h1,.column[class*="mb-"]:not[class*="-m"]>.attributes>h2,.column[class*="mb-"]:not[class*="-m"]>.attributes>h3,.column[class*="mb-"]:not[class*="-m"]>.attributes>h4,.column[class*="mb-"]:not[class*="-m"]>.attributes>h5,.column[class*="mb-"]:not[class*="-m"]>.attributes>h6,.column[class*="mb-"]:not[class*="-m"]>.attributes>.h1,.column[class*="mb-"]:not[class*="-m"]>.attributes>.h2,.column[class*="mb-"]:not[class*="-m"]>.attributes>.h3,.column[class*="mb-"]:not[class*="-m"]>.attributes>.h4,.column[class*="mb-"]:not[class*="-m"]>.attributes>.h5,.column[class*="mb-"]:not[class*="-m"]>.attributes>.h6,.column[class*="mb-"]:not[class*="-m"]>.h1,.column[class*="mb-"]:not[class*="-m"]>.h2,.column[class*="mb-"]:not[class*="-m"]>.h3,.column[class*="mb-"]:not[class*="-m"]>.h4,.column[class*="mb-"]:not[class*="-m"]>.h5,.column[class*="mb-"]:not[class*="-m"]>.h6,.ce_text.h1>p,.ce_text.h2>p,.ce_text.h3>p,.ce_text.h4>p,.ce_text.h5>p,.ce_text.h6>p{
    margin-bottom:0
}
.logo{
    width:200px;
    height:100px
}
.stickyheader .logo{
    width:170px;
    height:70px
}
@media only screen and (max-width:767px){
    .logo{
        width:150px;
        height:70px
    }
}
.logo{
    margin-top:auto;
    margin-bottom:auto;
    float:left;
  }
.stickyheader .header.cloned{
    line-height:70px
}
.stickyheader{
    position:fixed;
    z-index:10000;
    left:0;
    top:0;
    width:100%;
    top:-100%;
  }
body.fixed-header .stickyheader{
    top:0
}
.header{
    width:100%;
    top:0;
    z-index:1030;
    position:relative;
    background:var(--bg-primary);
    line-height:100px
}
.header.cloned{
    box-shadow:0 0 2px 2px var(--shadow);
}
.header .inside{
    padding-left:40px;
    padding-right:40px
}
#contentwrapper{
    background:var(--bg-primary)
}
#top .inside,.header .inside,#footer .inside,#bottom .inside,body.sidebar #container,.mod_article:not(.fullwidth)>.container{
    padding-left:40px;
    padding-right:40px
}
body.content_page.sidebar.left #main .mod_article>.container{
    padding-right:0
}
body.content_page.sidebar.right #main .mod_article>.container{
    padding-left:0
}
body.content_page.sidebar #left .mod_article>.container{
    padding-left:0;
    padding-right:0
}
body.content_page.sidebar #right .mod_article>.container{
    padding-left:0;
    padding-right:0
}
.mod_article{
    overflow:visible;
    position:relative;
    overflow:visible;
    background-size:cover;
    background-position:center
}
.mod_article:before,.mod_article:after{
    content:'\0020';
    display:block;
    overflow:hidden;
    visibility:hidden;
    width:0;
    height:0
}
.mod_article:after{
    clear:both
}
.mod_article>.container{
    position:relative
}
.mod_article:not(.fullwidth)>.container{
    padding-top:35px;
    padding-bottom:100px
}
body.content_page.sidebar #main .mod_article>.container,body.content_page.sidebar #left .mod_article>.container,body.content_page.sidebar #right .mod_article>.container{
    padding-top:40px;
    padding-bottom:40px
}
#top-wrapper{
    width:100%
}
#top-wrapper.fixed{
    box-shadow:0 0 2px 2px rgba(0,0,0,.1);
    background:rgba(0,0,0,.8)
}
#top{
    position:relative;
    z-index:1100;
    font-size:.93rem;
    line-height:2.5rem;
    background:var(--bg-secondary);
    color:rgba(255,255,255,.7)
}
#top-wrapper.fixed #top{
    max-height:0;
    overflow:hidden
}

.header .ce_search_label i{
    font-size:18px;
    margin-right:5px;
    transition:all 0.5s ease
}
#top .top_metanavi{
    overflow:visible
}
#top .top_metanavi a:hover{
    opacity:.7
}
#top .top_metanavi li{
    display:inline-block;
    position:relative;
    padding:0 4px
}
#top .top_metanavi li.submenu a:after{
    font-family:"FontAwesome";
    content:"\f107";
    margin-left:4px
}
#top .top_metanavi li.submenu li a:after{
    display:none
}
#top .top_metanavi li i{
    display:none
}
#top .top_metanavi li ul{
    display:none;
    position:absolute;
    left:0;
    background:rgba(255,255,255,1);
    box-shadow:0 0 2px 2px rgba(0,0,0,.1);
    -webkit-animation-name:fadeIn;
    animation-name:fadeIn;
    -webkit-animation-duration:0.3s;
    animation-duration:0.3s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both
}
#top .top_metanavi li ul li{
    display:block;
    padding-left:20px;
    padding-right:20px;
    text-align:left;
    font-size:.9em;
    line-height:35px
}
#top .top_metanavi li ul li.last{
    border-bottom:0
}
#top .top_metanavi li ul li a{
    margin:0;
    color:rgb(85,85,85)!important;
    display:block
}
#top .top_metanavi li:hover ul{
    display:block
}
#bottom{
    background:rgb(15,15,15)
}
#bottom .inside{
    margin:0 auto;
    padding:20px 40px;
    overflow:hidden;
    font-size:.93em
}
#bottom .inside .left{
    float:left
}
#bottom .inside .right{
    float:right
}
#bottom .inside,#bottom .inside a{
    color:rgba(255,255,255,.4);
    transition:All 0.3s ease;
    -webkit-transition:All 0.3s ease
}
#bottom .inside a:hover{
    color:rgba(255,255,255,1);
    border-bottom:1px solid
}
#bottom .inside .left a{
    margin-right:15px
}
#bottom .inside .right a{
    margin-left:15px
}
#bottom .ce_text p{
    margin-bottom:0;
}
.bg-accent{
    background-color:#20ae7e
}
p a{
    color:#20ae7e
}
.header.original .mainmenu ul li a.trail,.header.original .mainmenu ul li a.active,.header.cloned .mainmenu ul li a.trail,.header.cloned .mainmenu ul li a.active{
    color:#20ae7e
}
.ce_table table th{
    background:#20ae7e
}
blockquote a{
    color:#20ae7e
}
.mod_search .submit{
    border:1px solid #20ae7e
}
input:focus,textarea:focus{
    border:1px solid #20ae7e
}
input.submit[type="submit"],button.submit[type="submit"]{
    background:#20ae7e
}
input.submit[type="submit"]:hover,button.submit[type="submit"]:hover{
    background:rgba(30,136,210,.9)
}
a.btn{
    background:#20ae7e;
    border-color:#20ae7e
}
a.btn.outline{
    color:#20ae7e
}
blockquote{
    border-color:#20ae7e
}
#offcanvas-top{
    background:#20ae7e
}
.mod_customcatalogfilter.immorealty_filter .filter_range .ui-slider-range{
    background:#20ae7e
}
.header .mainmenu ul li a.highlight span{
    background:#20ae7e
}
.mod_customcatalogfilter.cardealer_filter .filter_range .ui-slider-range{
    background-color:#20ae7e
}
body .mainmenu ul li a:hover:before,body .mainmenu ul li a.trail:before,body .mainmenu ul li a.active:before{
    background-color:#20ae7e
}
.mod_eventlist_v4 i.fa-location-arrow{
    background-color:#20ae7e
}
.ce_accordion_v2 .toggler.ui-state-active{
    background:#20ae7e
}
.ce_revolutionslider .tp-dottedoverlay.accent-color-90{
    background:#20ae7e;
    opacity:.9
}
.ce_revolutionslider .tp-dottedoverlay.accent-color-80{
    background:#20ae7e;
    opacity:.8
}
.ce_revolutionslider .tp-dottedoverlay.accent-color-70{
    background:#20ae7e;
    opacity:.7
}
.ce_revolutionslider .tp-dottedoverlay.accent-color-60{
    background:#20ae7e;
    opacity:.6
}
.ce_revolutionslider .tp-dottedoverlay.accent-color-50{
    background:#20ae7e;
    opacity:.5
}
.ce_revolutionslider .tp-dottedoverlay.accent-color-40{
    background:#20ae7e;
    opacity:.4
}
.ce_revolutionslider .tp-dottedoverlay.accent-color-30{
    background:#20ae7e;
    opacity:.3
}
.ce_revolutionslider .tp-dottedoverlay.accent-color-20{
    background:#20ae7e;
    opacity:.2
}
.ce_revolutionslider .tp-dottedoverlay.accent-color-10{
    background:#20ae7e;
    opacity:.1
}
.mainmenu{
    float:right
}
.mainmenu ul{
    position:static
}
.mainmenu ul li a.first{
    padding-left:0
}
.mainmenu ul li{
    margin-left:15px;
    margin-right:15px
}
.mainmenu ul li.first{
    margin-left:0
}
.mainmenu ul li.last{
    margin-right:0
}
.mainmenu ul li ul li{
    margin-left:0;
    margin-right:0
}
.mainmenu ul li a{
    text-transform:none;
    padding:0;
    font-weight:400;
    font-size:1.067rem
}
.fixed .mainmenu ul li ul li a:not(.active):not(.trail){
    color:rgb(57,57,57)
}
.header .mainmenu ul ul li a{
    transition:All 0.3s ease;
    -webkit-transition:All 0.3s ease;
    color:inherit
}
.header .mainmenu ul ul li span{
    position:relative
}
.header .mainmenu ul ul li a span:before{
    position:absolute;
    content:'';
    height:1px;
    background:rgb(0,0,0);
    bottom:0;
    width:100%;
    left:0;
    transform:scaleX(0);
    transition:transform 0.3s ease-in-out
}
.header .mainmenu ul ul li a:hover span:before{
    transform:scaleX(1)
}
.header .mainmenu ul ul li a.active span:before,.header .mainmenu ul ul li a.trail span:before{
    position:absolute;
    content:'';
    height:1px;
    background:rgb(0,0,0);
    bottom:0;
    width:100%;
    left:0;
    transform:scaleX(1)!important
}
.mainmenu ul li a:hover{
    opacity:.8;
    transition:opacity 0.3s ease;
    -webkit-transition:opacity 0.3s ease
}
.mainmenu ul li:not(.click_open):hover>ul{
    -webkit-animation-name:fadeIn;
    animation-name:fadeIn;
    -webkit-animation-duration:0.3s;
    animation-duration:0.3s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both
}
.mainmenu ul ul li:hover>ul{
    -webkit-animation-name:none;
    animation-name:none
}
.mainmenu ul li a{
    text-align:center
}
.mainmenu ul ul li a[target=_blank]{
    padding-right:30px!important
}
.mainmenu ul ul li a[target=_blank]:after{
    font-family:"FontAwesome";
    content:"\f08e";
    position:absolute;
    right:5px
}
.mainmenu ul li.floatbox{
    position:static;
    margin-left:0!important;
    ;
    margin-right:0!important
}
.mainmenu ul li a.nav-icon span{
    transform:translateY(30%);
    -webkit-transform:translateY(30%);
    display:inline-block;
    line-height:40px
}
.mainmenu ul ul li a.nav-icon span{
    line-height:inherit;
    transform:translateY(0);
    -webkit-transform:translateY(0)
}
.mainmenu ul li a i{
    transform:translateY(-133%);
    -webkit-transform:translateY(-133%);
    position:absolute;
    top:50%;
    width:100%;
    left:0;
    display:inline-block
}
.mainmenu ul ul li a i{
    transform:translateY(0);
    -webkit-transform:translateY(0);
    position:static;
    width:1.5em
}
body .header .mainmenu ul li a[class*="highlight"]{
    color:rgba(255,255,255,.9)!important
}
.header .mainmenu ul li a.highlight span{
    padding:10px;
    border-radius:3px
}
.smartmenu-content{
    position:fixed;
    z-index:100000000;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(24,24,24,1);
    visibility:hidden;
    text-align:center;
    opacity:0;
    transition:All 0.5s ease;
    -webkit-transition:All 0.5s ease
}
.smartmenu-content.open{
    visibility:visible;
    opacity:1
}
.smartmenu-content .smartmenu-table{
    margin-top:20vh
}
.smartmenu-content .mod_navigation .level_1 ul{
    display:none
}
.smartmenu-content .mod_navigation li:not(.floatbox){
    font-size:1.7rem;
    line-height:2rem;
    font-weight:400;
    padding:.5rem;
    text-transform:uppercase
}
.smartmenu-content .mod_navigation .level_2 li{
    font-size:1.2rem;
    line-height:1.3rem;
    text-transform:none
}
.smartmenu-content .mod_navigation ul.level_1{
    padding:20px
}
.smartmenu-content .mod_navigation a{
    color:rgb(255,255,255);
    transition:All 0.3s ease;
    -webkit-transition:All 0.3s ease;
    position:relative
}
.smartmenu-content .mod_navigation a.active,.smartmenu-content .mod_navigation a.trail{
    border-bottom:1px solid rgb(255,255,255)
}
.smartmenu-content .mod_navigation a.submenu{
    margin-left:35px
}
.smartmenu-content .mod_navigation ul.level_2 a.submenu{
    margin-left:25px
}
.smartmenu-content .mod_navigation a:hover{
    opacity:.8
}
.smartmenu-content .subitems_trigger{
    display:inline-block;
    margin-left:10px
}
.smartmenu-content .subitems_trigger:before{
    content:'[+]';
    color:rgba(255,255,255,.8)
}
.smartmenu-content .mod_navigation li.open>.subitems_trigger:before{
    content:'[-]'
}
.smartmenu-content .smartmenu-close{
    position:absolute;
    right:40px;
    top:40px;
    width:35px;
    height:35px;
    cursor:pointer
}
.smartmenu-content .smartmenu-close:before,.smartmenu-content .smartmenu-close:after{
    display:inline-block;
    width:35px;
    height:1px;
    background:rgb(255,255,255);
    content:'';
    transition:All 0.3s ease;
    -webkit-transition:All 0.3s ease;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg)
}
.smartmenu-content .smartmenu-close:after{
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
    margin-left:-35px
}
.smartmenu{
    float:right;
    margin-left:20px;
    line-height:40px;
    display:none
}
.smartmenu .smartmenu-trigger{
    height:100px;
    width:35px;
    position:relative;
    z-index:1000000000;
    transition:All 0.3s ease;
    -webkit-transition:All 0.3s ease;
    cursor:pointer
}
.header.cloned .smartmenu .smartmenu-trigger{
    height:70px
}
.smartmenu .smartmenu-trigger .line{
    height:1px;
    background:#393939;
    width:35px;
    position:absolute;
    display:block;
    top:50%;
    margin-top:-1px
}
.smartmenu .smartmenu-trigger .line:before,.smartmenu .smartmenu-trigger .line:after{
    display:inline-block;
    width:35px;
    height:1px;
    background:#393939;
    position:absolute;
    left:0;
    content:'';
    top:50%;
    margin-top:-13px;
    transition:All 0.3s ease;
    -webkit-transition:All 0.3s ease
}
.smartmenu .smartmenu-trigger .line:before{
    margin-top:11px
}
.sidebar_trigger{
    display:none
}
textarea{
    height:inherit
}
input,textarea,select{
    background-color:var(--input-bg);
    padding:15px;
    font-size:1rem /* nicht .9rem: Form-Controls app-weit 1rem (vgl. Font-Inherit-
                      Block oben); .9rem liess select/textarea kleiner als input */
}
.mod_search input{
    border-radius:0
}
.mod_search input.submit,.mod_search button.submit{
    width:auto
}
#slider{
    position:relative;
    z-index:5
}
.ce_accordion .toggler.ui-state-active{
    border-bottom:1px dotted rgb(220,220,220)
}
.ce_table table td{
    border-top:0;
    border-bottom:solid 1px rgb(227,227,227)
}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
    color:var(--text-secondary)!important
}
input:-moz-placeholder,textarea:-moz-placeholder{
    color:var(--text-secondary)!important;
    opacity:1
}
input::-moz-placeholder,textarea::-moz-placeholder{
    color:var(--text-secondary)!important;
    opacity:1
}
input:-ms-input-placeholder,textarea:-ms-input-placeholder{
    color:var(--text-secondary)!important
}
form{
    transition:All 0.7s ease;
    -webkit-transition:All 0.7s ease
}
form div.widget{
    position:relative
}
body.no_scroll{
    overflow:hidden
}
body #colorbox{
    z-index:99999
}
@keyframes mousewheel{
    0%{
        margin-top:6px;
        opacity:0
    }
    30%{
        opacity:1
    }
    100%{
        margin-top:18px;
        opacity:0
    }
}
@-webkit-keyframes mousewheel{
    0%{
        margin-top:6px;
        opacity:0
    }
    30%{
        opacity:1
    }
    100%{
        margin-top:18px;
        opacity:0
    }
}
@media only screen and (min-width:768px){
    .onepage_page.horizontal_scrolling{
        overflow-x:visible
    }
    .onepage_page.horizontal_scrolling #fix-wrapper{
        position:fixed
    }
    .onepage_page.horizontal_scrolling #slider .inside{
        overflow:hidden
    }
    .onepage_page.horizontal_scrolling #slider .inside .mod_article{
        float:left;
        width:100vw;
        vertical-align:top
    }
    .onepage_page.horizontal_scrolling #bottom{
        position:fixed;
        bottom:0;
        width:100%;
        z-index:10
    }
}
@media only screen and (min-width :768px) and (max-width :1024px){
    .smartmenu{
        display:block
    }
    .mainmenu{
        display:none
    }
}

@media only screen and (max-width:767px){
    #main .mod_article:not(.fullwidth)>.container,#left .mod_article>.container,#right .mod_article>.container,.header .inside{
        padding-left:20px!important;
        padding-right:20px!important
    }
    #main .mod_article.fullwidth{
        padding-left:0px!important;
        padding-right:0px!important
    }
    .mod_article:not(.fullwidth)>.container{
        padding-top:50px;
        padding-bottom:50px
    }
    .header{
        padding-bottom:0;
        padding-top:0
    }
    #fix-wrapper{
        top:0;
        left:0;
        width:100%
    }
    #bottom .inside .left,#bottom .inside .right{
        float:none
    }
    #bottom .inside .right a{
        margin-left:0;
        margin-right:15px
    }
    #footer .inside{
        padding:40px 20px
    }
    #bottom .inside{
        padding-left:20px;
        padding-right:20px
    }
    #footer .totop:before{
        display:none
    }
    a.btn.small,a.btn{
        font-size:.9rem
    }
    h1,.h1,.h1 p{
        font-size:1.733rem;
        margin-bottom:15px
    }
    h2,.h2,.h2 p{
        font-size:1.6rem;
        margin-bottom:10px
    }
    h3,.h3,.h3 p{
        font-size:1.467rem;
        margin-bottom:10px
    }
    h4,.h4,.h4 p{
        font-size:1.2rem;
        margin-bottom:10px
    }
    h5,.h5,.h5 p{
        font-size:1.067rem;
        margin-bottom:10px
    }
    h6,.h6,.h6 p{
        font-size:1.067rem;
        margin-bottom:10px
    }
    .header .mod_langswitcher{
        position:absolute;
        right:70px;
        top:50%;
        margin-top:-19px;
        line-height:40px;
        margin-left:0!important
    }
    .header .mod_langswitcher{
        display:none
    }
    .header .mod_search{
        display:none
    }
    .header.cloned{
        box-shadow:none
    }
    body.fixed-header .header.cloned{
        box-shadow:0 0 2px 2px var(--shadow)
    }
    #top{
        display:none
    }
    .mod_langswitcher .mod_langswitcher_inside:before{
        top:-1px
    }
    #top .top_metanavi{
        display:none
    }
    #top .mod_socials{
        display:none
    }
    #top .inside{
        padding-left:20px;
        padding-right:20px
    }
    .offcanvas-trigger{
        display:none
    }
}


/* === accentcolor.css === */
.mainmenu ul li a {
     font-weight: 700
}
 #mmenu .mod_navigation li a {
     font-family: 'Open Sans';
     font-weight: 700
}
 .header .mainmenu ul li a, .header .mainmenu ul li ul a.active, .header .ce_search_label i, .header .mod_langswitcher .mod_langswitcher_inside, .header .header_metanavi a, .header .mod_socials a {
     color: #ffffff
}
 .mod_langswitcher .mod_langswitcher_inside:before {
     border-color: #ffffff
}
 .header .mod_socials:before {
     border-color: #ffffff
}
 .header .smartmenu .smartmenu-trigger .line, .header .smartmenu .smartmenu-trigger .line:before, .header .smartmenu .smartmenu-trigger .line:after {
     background: #ffffff
}
 .sidebar_trigger .burger .burger_lines:after, .sidebar_trigger .burger .burger_lines:before, .sidebar_closed .sidebar_trigger .burger .burger_lines, .sidebar_closed .sidebar_trigger .burger .burger_lines:after, .sidebar_closed .sidebar_trigger .burger .burger_lines:before {
     background: #ffffff
}
.header {
     background-color: var(--bg-header)
}
 .ce_revolutionslider .tp-dottedoverlay.accent-color-90, .ce_revolutionslider .tp-dottedoverlay.accent-color-80, .ce_revolutionslider .tp-dottedoverlay.accent-color-70, .ce_revolutionslider .tp-dottedoverlay.accent-color-60, .ce_revolutionslider .tp-dottedoverlay.accent-color-50, .ce_revolutionslider .tp-dottedoverlay.accent-color-40, .ce_revolutionslider .tp-dottedoverlay.accent-color-30, .ce_revolutionslider .tp-dottedoverlay.accent-color-20, .ce_revolutionslider .tp-dottedoverlay.accent-color-10 {
     background: #20ae7e;
}
 body .mm-menu a:hover, body .mm-menu a.active, body .mm-menu a.trail {
     background-color: #20ae7e;
}
 .bg-accent {
     background-color: #20ae7e;
}
 p a {
     color: var(--accent-color);
}
 .header.original .mainmenu ul li a.trail, .header.original .mainmenu ul li a.active, .header.cloned .mainmenu ul li a.trail, .header.cloned .mainmenu ul li a.active, .mod_pct_megamenu .mod_navigation a.active {
     color: var(--accent-color);
}
 .mod_pct_megamenu .mod_navigation a.active:before, .header .mainmenu ul ul li a.active span:before, .header .mainmenu ul ul li a.trail span:before {
     background-color: #20ae7e;
}
 #top-wrapper.fixed .mainmenu a.active, #top-wrapper.fixed .mainmenu a.trail {
     color: var(--accent-color);
}
 #nav-open-btn:before {
     background: #20ae7e;
}
 .ce_table table th {
     background: #20ae7e;
}
 blockquote a {
     color: var(--accent-color);
}
 .mod_search .submit {
     border: 1px solid #20ae7e;
}
 input:focus, textarea:focus {
     border:1px solid var(--accent-color);
}
 input.submit[type="submit"], button.submit[type="submit"] {
     background: var(--accent-color);
}
 input.submit[type="submit"]:hover, button.submit[type="submit"]:hover {
     background: var(--accent-color);
}
/* Feldbreite in rem (Wurzel-Schrift), NICHT em (Eigenschrift): input rendert
   mit 1rem, select/textarea mit .9rem -> bei em waeren Dropdowns/Textareas
   schmaler als Text-Inputs. rem entkoppelt die Breite von der Feldschrift.
   Wert = --field-w (:root, ganz oben). */
input, select, textarea {
  width: var(--field-w); max-width: 100%
}
  a.btn {
     background: #20ae7e;
     border-color: #20ae7e;
}
  a.btn.outline {
     color: #20ae7e;
}
 blockquote {
     border-color: var(--accent-color);
}
 #offcanvas-top {
     background: #20ae7e;
}
 #footer a:hover, #bottom .inside a:hover {
     color: #20ae7e;
}
 .mod_customcatalogfilter.immorealty_filter .filter_range .ui-slider-range {
     background: #20ae7e;
}
 .mod_customcatalogfilter.cardealer_filter .filter_range .ui-slider-range {
     background-color: #20ae7e;
}
 body .mainmenu ul li a:hover:before, body .mainmenu ul li a.trail:before, body .mainmenu ul li a.active:before {
     background-color: var(--accent-color);
}
 .mod_eventlist_v4 i.fa-location-arrow {
     background-color: #20ae7e;
}
 body .mm-menu a.active, body .mm-menu a.trail {
     background-color: #20ae7e;
}
 .header .mainmenu ul li a.highlight span {
     background-color: #20ae7e;
}
 .ce_accordion_v2 .toggler.ui-state-active, .ce_accordion.style2 .toggler.ui-state-active {
     background: #20ae7e;
}
 .mmenu_trigger .burger .burger_lines, .mmenu_trigger .burger .burger_lines:after, .mmenu_trigger .burger .burger_lines:before {
     background: var(--accent-color);
}
 .mmenu_trigger {
     color: var(--accent-color);
}


/* === header.css === */
@media only screen and (min-width: 768px) {
     #top .inside {
         display: block;
    }
     .header.original .mainmenu ul .megamenu-wrapper {
         top: 0!important;
    }
     .mainmenu ul li, .mainmenu ul ul li {
         line-height: 45px;
    }
     .mainmenu {
         float: none;
         margin-bottom: 40px;
         display: block;
    }
     .mainmenu ul {
         text-align: left;
    }
     .mainmenu ul li {
         display: block;
         text-align: left;
         position: relative;
         right: auto;
         padding-left: 15px;
         padding-right: 15px;
    }
     body .header .mainmenu ul li {
         margin-left: 0;
         margin-right: 0;
    }
     body .header.original .mainmenu ul li a:before {
         display: none;
    }
     .mainmenu ul li ul li {
         padding-left: 0;
         padding-right: 0;
    }
     .mainmenu ul li a {
         text-align: left;
    }
     .mainmenu ul ul {
         left: 100%;
         top: 0;
    }
     /* Item-Trenner der vertikalen Sidebar entfernt (07/2026): in Light waren
        die rgba-schwarz-Linien auf dem dunklen Header ohnehin unsichtbar, im
        Dark-Mode wurden sie als helle Balken sichtbar — nav_top und nav_wide
        nullen sie schon immer. Leere Regeln bewusst stehen gelassen, damit
        die Selektoren als Anker dokumentiert bleiben. */
     .mainmenu ul li:not(.floatbox) {
         border-bottom: 0;
    }
     .mainmenu ul li.first:not(.floatbox) {
         border-top: 0;
    }
     .mainmenu ul li ul li.first, .mainmenu ul li ul li {
         border-top: 0!important;
         border-bottom: 0!important;
    }
     .mainmenu ul ul {
         border-top: 0;
         margin-top: 0;
    }
     nav.mainmenu li.megamenu ul li {
         min-width: 180px;
    }
     .header.original {
         height: 100%;
    }
     #header .inside {
         padding-right: 0;
         padding-left: 0;
    }
     #fix-wrapper {
         width: 300px;
         position: fixed;
         box-shadow: 5px 0px 10px -2px var(--shadow);
         top: 0;
    }
     #slider, #wrapper, #bottom, #offcanvas-top, #footer {
         margin-left: 300px;
    }
     #top .inside {
         padding-left: 30px;
         padding-right: 30px;
    }
     #top .mod_socials {
         margin-left: 0;
    }
     .logo {
         float: none;
         height: 33px;
         margin-left: 30px;
    }
     #fix-wrapper.fixed .header {
         position: relative;
    }
     #fix-wrapper {
         height: 100%!important;
    }
     #fix-wrapper.fixed .header {
         box-shadow: none;
    }
     #top .mod_socials {
         float: none;
    }
     .mainmenu ul li a {
         padding-left: 0;
    }
     #nav-open-btn {
         display: none;
    }
     #top-wrapper {
         height: 100%;
    }
     .offcanvas-trigger {
         display: none;
    }
     .stickyheader {
         display: none!important;
    }
     .header .mainmenu ul li a span {
         transform: translateY(0);
         -webkit-transform: translateY(0);
         display: inline-block;
    }
     .header .mainmenu ul li a i.fa {
         transform: translateY(0);
         -webkit-transform: translateY(0);
         position: static;
    }
     #top .top_metanavi {
         display: none;
    }
     nav.mainmenu li.megamenu ul {
         padding: 20px;
    }
     .smartmenu {
         display: none!important;
    }
     body .header .mainmenu ul li[class*="highlight"].last {
         margin-top: 40px;
         border-bottom: 0;
    }
     body .header .mainmenu ul li a[class*="highlight"] span {
         padding: 0px 15px;
    }
     body .header .mainmenu ul li a[class*="highlight"]:not(.last) span {
         line-height: 2rem;
    }
     .sidebar_closed #fix-wrapper {
         left: -250px;
    }
     #fix-wrapper {
         left: 0;
         transition: all 0.3s ease;
         -webkit-transition: all 0.3s ease;
    }
     .sidebar_closed #slider, .sidebar_closed #wrapper, .sidebar_closed #bottom, .sidebar_closed #offcanvas-top, .sidebar_closed #footer {
         margin-left: 50px;
         transition: margin-left 0.3s ease;
         -webkit-transition: margin-left 0.3s ease;
    }
     #slider, #wrapper, #bottom, #offcanvas-top, #footer {
         transition: margin-left 0.3s ease;
         -webkit-transition: margin-left 0.3s ease;
    }
     .sidebar_closed .logo, .sidebar_closed .mod_langswitcher, .sidebar_closed .mod_socials, .sidebar_closed .mod_search, .sidebar_closed .smartmenu, .sidebar_closed .header_metanavi {
         opacity: 0!important;
    }
     .sidebar_closed .mainmenu {
         float: right;
    }
     .sidebar_closed .mainmenu ul {
         width: 50px;
         overflow: hidden;
    }
     .sidebar_closed .mainmenu li {
         padding-right: 0;
         padding-left: 0;
         overflow: hidden;
    }
     .sidebar_closed .mainmenu li a {
         text-align: center;
    }
     .sidebar_closed .mainmenu li i {
         font-size: 22px;
         animation: fadeIn 0.5s;
    }
     .sidebar_closed .mainmenu li span {
         display: none!important;
    }
     .sidebar_trigger {
         display: block;
         line-height: 1;
         height: 35px;
    }
     .sidebar_trigger {
         position: relative;
         color: rgb(0,0,0);
         display: none;
    }
     .sidebar_trigger .burger {
         height: 21px;
         width: 21px;
         position: absolute;
         right: 15px;
         top: 10px;
         font-size: 7px;
         cursor: pointer;
         transition: .2s all;
         transform: rotate(180deg);
    }
     .sidebar_trigger .burger .burger_lines:after {
         left: 0;
         top: 0;
         transform: rotate(45deg);
         background: rgb(0,0,0);
    }
     .sidebar_trigger .burger .burger_lines:before {
         left: 0;
         top: 0;
         transform: rotate(-45deg);
         background: rgb(0,0,0);
    }
     .sidebar_trigger .burger:after {
         content: "";
         display: block;
         position: absolute;
         height: 150%;
         width: 150%;
         top: -25%;
         left: -25%;
    }
     .sidebar_trigger .burger .burger_lines {
         top: 50%;
         margin-top: -1px;
         background-color: transparent;
    }
     .sidebar_trigger .burger .burger_lines, .sidebar_trigger .burger .burger_lines:after, .sidebar_trigger .burger .burger_lines:before {
         pointer-events: none;
         display: block;
         content: "";
         width: 100%;
         border-radius: 10px;
         height: 2px;
         position: absolute;
    }
     .sidebar_trigger .burger.rotate .burger_lines, .sidebar_trigger .burger.rotate .burger_lines:after, .sidebar_trigger .burger.rotate .burger_lines:before {
         transition: all .2s;
    }
     .sidebar_closed .sidebar_trigger .burger .burger_lines:after {
         left: 0;
         top: -7px;
    }
     .sidebar_closed .sidebar_trigger .burger .burger_lines:before {
         left: 0;
         top: 7px;
    }
     .sidebar_closed .sidebar_trigger .burger .burger_lines, .sidebar_closed .sidebar_trigger .burger .burger_lines:after, .sidebar_closed .sidebar_trigger .burger .burger_lines:before {
         transform: rotate(0);
         background: rgb(0,0,0);
    }
     .mod_pct_megamenu {
         top: 50%!important;
         transform: translateY(-50%);
         margin-left: 285px;
         margin-right: 25px;
         position: fixed;
    }
     .header .mainmenu a.pct_megamenu:after, .header .mainmenu a.submenu:after {
         position: absolute;
         right: 10px;
    }
}


/* === quicksearch.css === */
/* Quicksearch & Help Overlay (CMD+K / ?) */

.qs-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    background: rgba(10, 10, 20, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.18s ease-out;
}

.qs-overlay.qs-open {
    display: block;
    opacity: 1;
}

.qs-panel {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translate(-50%, -16px);
    width: min(640px, calc(100% - 32px));
    background: var(--bg-primary, #ffffff);
    color: var(--text-primary);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.18s ease-out;
    opacity: 0;
}

.qs-overlay.qs-open .qs-panel {
    transform: translate(-50%, 0);
    opacity: 1;
}

/* ---- Quicksearch-spezifisch ---- */

#qs-form {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
}

#qs-form .qs-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    opacity: 0.55;
}

#qs-input {
    flex: 1 1 auto;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font-size: 18px;
    line-height: 1.4;
    padding: 6px 0;
    font-family: inherit;
}

#qs-input::placeholder {
    color: var(--text-muted, #888);
    opacity: 0.7;
}

#qs-form .qs-kbd-row {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.qs-kbd {
    display: inline-block;
    padding: 2px 7px;
    font-size: 11px;
    line-height: 1.4;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--text-muted, #888);
    background: var(--bg-secondary, #f4f4f4);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
    border-radius: 4px;
}

#qs-hints {
    padding: 10px 18px 14px;
    background: var(--bg-secondary, #f4f4f4);
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-muted, #777);
}

#qs-hints b {
    color: var(--accent-color, #20a478);
    font-weight: 600;
}

#qs-hints .qs-hint-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}

#qs-hints .qs-help-tip {
    display: block;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-color, rgba(0, 0, 0, 0.08));
    opacity: 0.85;
}

#qs-form:focus-within {
    box-shadow: inset 0 -2px 0 0 var(--accent-color, #20a478);
}

/* ---- Ladezustand: Submit navigiert zu suche.php, das kann je nach
   Nextcloud-Erreichbarkeit dauern. Solange: Spinner statt Lupe,
   Laufbalken auf der Unterkante, Status-Label neben esc. ---- */

#qs-form {
    position: relative;
}

#qs-form .qs-icon-spinner {
    display: none;
}

.qs-panel.qs-loading #qs-form .qs-icon-search {
    display: none;
}

.qs-panel.qs-loading #qs-form .qs-icon-spinner {
    display: block;
    opacity: 1;
    color: var(--accent-color, #20a478);
    animation: qs-spin 0.8s linear infinite;
}

.qs-loading-label {
    display: none;
    font-size: 12px;
    line-height: 1.4;
    color: var(--accent-color, #20a478);
    white-space: nowrap;
}

.qs-panel.qs-loading .qs-loading-label {
    display: inline-block;
}

.qs-panel.qs-loading #qs-hints {
    opacity: 0.5;
    transition: opacity 0.3s ease-out;
}

.qs-progress {
    height: 2px;
    overflow: hidden;
    pointer-events: none;
}

#qs-form .qs-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.qs-progress-bar {
    display: none;
    height: 100%;
    width: 35%;
    background: var(--accent-color, #20a478);
    border-radius: 2px;
}

.qs-panel.qs-loading .qs-progress-bar,
form.qs-form-loading .qs-progress-bar {
    display: block;
    animation: qs-progress-slide 1.1s ease-in-out infinite;
}

/* Gleiches Feedback am Seiten-Suchformular (Dashboard-Widget, suche.php) */
form#search .qs-form-loading-label {
    display: none;
}

form#search.qs-form-loading .qs-form-loading-label {
    display: block;
    margin-top: 4px;
}

@keyframes qs-spin {
    to { transform: rotate(360deg); }
}

@keyframes qs-progress-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
}

/* ---- Help-Overlay-spezifisch ---- */

/* Hilfe-Panel breiter als die Quicksearch und mit Sicherheits-Scroll,
   damit auf kleinen Bildschirmen nichts unten abgeschnitten wird. */
#qs-help-panel {
    width: min(760px, calc(100% - 32px));
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
}

#qs-help-panel .qs-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    font-weight: 600;
    font-size: 15px;
    flex: 0 0 auto;
}

#qs-help-panel .qs-help-body {
    padding: 4px 12px 12px;
    overflow-y: auto;
    column-count: 2;
    column-gap: 18px;
    column-rule: 1px solid var(--border-color, rgba(0, 0, 0, 0.06));
}

/* Eine Gruppe (Header + Rows) bleibt zusammen — verhindert verwaiste Überschriften
   am Spaltenende. Zusätzlich auch einzelne Sections/Rows nicht zerreißen. */
#qs-help-panel .qs-help-group,
#qs-help-panel .qs-help-section,
#qs-help-panel .qs-help-row {
    break-inside: avoid;
    page-break-inside: avoid;
}

#qs-help-panel .qs-help-section {
    margin: 10px 8px 2px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #888);
    font-weight: 600;
}

#qs-help-panel .qs-help-section:first-child {
    margin-top: 4px;
}

#qs-help-panel .qs-help-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 7px;
    font-size: 12.5px;
    line-height: 1.35;
}

#qs-help-panel .qs-help-row:hover {
    background: var(--bg-secondary, #f4f4f4);
}

#qs-help-panel .qs-help-row .qs-help-label {
    color: inherit;
}

#qs-help-panel .qs-help-row .qs-help-keys {
    display: inline-flex;
    gap: 4px;
    flex: 0 0 auto;
}

#qs-help-panel .qs-help-footer {
    padding: 10px 20px;
    background: var(--bg-secondary, #f4f4f4);
    font-size: 11px;
    color: var(--text-muted, #888);
    border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    flex: 0 0 auto;
}

/* Auf schmalen Bildschirmen einspaltig */
@media (max-width: 600px) {
    #qs-help-panel .qs-help-body {
        column-count: 1;
    }
}

/* Dark Mode-Anpassungen (Hook: html[data-theme="dark"], gesetzt vom
   Theme-Boot-Script; Alt-Klasse html.darkmode war nie verdrahtet) */
html[data-theme="dark"] .qs-panel {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .qs-overlay {
    background: rgba(0, 0, 0, 0.6);
}


/* === print.css (@media print) === */
@media print {
html,
body {
	font-size: 12px!important;
}

#fix-wrapper,
#footer,
#bottom,
.mod_navigation,
.invisible,
.stickyheader,
form,
#left,
#right,
#slider
.mod_langswitcher,
#mmenu {
	display: none!important;
}

img {
   width: 100%;
   height: auto;
}

#main {
	border: 0!important;
	width: 100%!important;
	float: none!important;
	margin: 0!important;
}

#main .mod_article:not(.fullwidth) {
	padding-top: 10mm!important;
	padding-bottom: 10mm!important;
}

.animate {
  opacity: 1!important;
}

#slider,
#wrapper,
#bottom,
#offcanvas-top,
#footer {
	margin: 0 auto!important;
}


#colorbox {
	display: none!important;
}

}


/* === nav_top: Hauptmenü als schmale, fixierte Leiste oben ===================
   Aktiv über die Klasse html.nav_top (gesetzt in header.php bei
   einstellungen.nav_position = 'top'). Spiegelt die schmale, icon-only
   Sidebar — nur horizontal statt vertikal. Side-Mode (sidebar_closed) bleibt
   davon unberührt. Nur Desktop (>=768px); Mobile nutzt weiter das Burger-Menü.
   ========================================================================= */
@media only screen and (min-width: 768px) {
    /* Leiste: volle Breite, oben angepinnt, Höhe nach Inhalt (schmal).
       sticky statt des geerbten fixed der Sidebar-Basisregel: bleibt beim
       Scrollen oben, nimmt aber Platz im Fluss ein — der Content rutscht
       auch dann nicht unter die Leiste, wenn die Icon-Kette bei schmalen
       Fenstern (viele Module) auf zwei Zeilen umbricht. Ein statisches
       margin-top am Content entfällt dadurch komplett.
       z-index: über Seiteninhalt inkl. sticky-Tabellenköpfen (z-index 2),
       unter #mmenu (1000), Tour (9500), Quicksearch (99999) und Toasts. */
    html.nav_top #fix-wrapper {
        width: 100% !important;
        height: auto !important;
        position: sticky;
        top: 0;
        left: 0 !important;
        z-index: 500;
        box-shadow: 0 2px 8px -2px var(--shadow) !important;
    }
    html.nav_top #top-wrapper,
    html.nav_top .header.original,
    html.nav_top #header {
        height: auto !important;
    }
    /* leerer Balken oberhalb des Menüs entfällt im Top-Modus */
    html.nav_top #top {
        display: none !important;
    }
    html.nav_top .mainmenu {
        margin-bottom: 0 !important;
        float: none !important;
    }
    /* Header-Inhalt als Flexbox vertikal zentrieren. Verhindert, dass eine
       leere Zeilenbox (Whitespace erbt die große line-height des Headers)
       die Icons nach unten drückt. */
    html.nav_top #header .inside {
        display: flex;
        align-items: center;
        line-height: normal;
        padding-left: 26px !important;
        padding-right: 8px !important;
    }
    html.nav_top .mod_navigation.mainmenu {
        width: 100%;
    }
    /* Leeres Logo (reserviert sonst seine konfigurierte Breite) und den
       Mobile-Burger im Top-Modus entfernen → Icons starten ganz links. */
    html.nav_top #header .logo,
    html.nav_top #header .mmenu_trigger {
        display: none !important;
    }

    /* Inhalt nicht nach rechts einrücken (Sidebar-Versatz aufheben). Kein
       margin-top mehr: die sticky Leiste reserviert ihren Platz selbst. */
    html.nav_top #slider,
    html.nav_top #wrapper,
    html.nav_top #bottom,
    html.nav_top #offcanvas-top,
    html.nav_top #footer {
        margin-left: 0 !important;
    }

    /* Menü-Kette horizontal ausrichten */
    html.nav_top .mainmenu .vlist.level_1 {
        width: 100%;
    }
    html.nav_top .mainmenu .vlist.level_1 > li.floatbox {
        float: none !important;
        width: 100%;
        display: block;
    }
    html.nav_top .mainmenu ol.inner {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        float: none;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Einzel-Items: icon-only, quadratisch, kein vertikaler Rahmen */
    html.nav_top .mainmenu ul li.mlist {
        display: block;
        float: none;
        line-height: normal !important;
        padding: 0 !important;
        margin: 0 !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
        overflow: visible;
    }
    html.nav_top .mainmenu ul li.mlist a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        padding: 0;
        position: relative;
    }
    html.nav_top .mainmenu ul li.mlist a i.fa {
        position: static !important;
        margin: 0 !important;
        font-size: 20px;
        transform: none !important;
    }
    /* Labels ausblenden (Tooltip via title-Attribut bleibt). Der Mahn-Badge
       ist ebenfalls ein span und muss ausgenommen werden, sonst verschwindet
       die Benachrichtigung. */
    html.nav_top .mainmenu ul li.mlist a span:not(.mahn-badge) {
        display: none !important;
    }

    /* Trenner-Pünktchen vor Items im Horizontalmodus weglassen */
    html.nav_top .header.original .mainmenu ul li a:before {
        display: none !important;
    }

    /* Mahn-Badge bleibt oben-rechts im Icon-Button */
    html.nav_top .vlist .mlist a .mahn-badge {
        top: 5px;
        right: 12px;
    }
}

/* === Sidebar-Modus: oberen Leerstreifen entfernen ==========================
   Der leere #top-Balken (enthält nur ein hr.clear) erzeugt oberhalb des
   ersten Menü-Icons einen Abstand. Im Top-Modus ist er bereits ausgeblendet;
   hier ziehen wir die vertikale Sidebar gleich, damit das Home-Icon ebenso
   bündig oben sitzt. Nur Desktop (>=768px).
   ========================================================================= */
@media only screen and (min-width: 768px) {
    html.sidebar_closed #top {
        display: none !important;
    }
}

/* === nav_wide: breite Desktop-Sidebar — Layout 1:1 wie das mobile #mmenu ====
   Aktiv über html.nav_wide (header.php, nur Side-Modus + menu_wide=1). Ohne
   sidebar_closed greift die Theme-Standardbreite (300px). Die Werte sind direkt
   vom mobilen Burger-Menü übernommen (Punkt: gleiche Optik):
     #mmenu_middle      → padding-left:20px        (hier aufs a: 20px links)
     #mmenu li a        → display:block; padding:4px 40px 4px 0
     #mmenu li i        → margin-right:10px; natürliche Breite (kein 20px-Raster)
   Außerdem die Sidebar-Eigenheiten neutralisieren, die das mobile Menü nicht
   hat und die am <li> (nicht am <a>) hängen: 45px-line-height, 15px-Einzug
   und die Trenn-Linien (.mainmenu ul li:not(.floatbox){border-bottom}).
   ========================================================================= */
@media only screen and (min-width: 768px) {
    /* <ol class="inner"> hat sonst den UA-Default padding-left:40px + margin:1em
       (nur list-style ist global resettet) → großer Einzug + Lücken oben/unten.
       nav_top resettet das ebenso; hier dasselbe, damit 20px-Einzug exakt sitzt. */
    /* Schmaler als die 300px-Standardbreite (Feedback Max: lange Labels wie
       „Vorlagen & Wiederkehrende Einträge" brechen ohnehin). Sidebar-Breite
       UND Content-Versatz zusammen, sonst klafft eine Lücke. 300 − 38 = 262. */
    html.nav_wide #fix-wrapper {
        width: 262px;
    }
    html.nav_wide #slider,
    html.nav_wide #wrapper,
    html.nav_wide #bottom,
    html.nav_wide #offcanvas-top,
    html.nav_wide #footer {
        margin-left: 262px;
    }
    html.nav_wide .mainmenu ol.inner {
        margin: 0;
        padding: 0;
    }
    html.nav_wide .mainmenu ul li {
        line-height: normal;
        padding-left: 0;   /* statt 15px — mobiler 20px-Einzug kommt aufs a */
        padding-right: 0;
        border-top: 0 !important;
        border-bottom: 0 !important;
    }
    /* Flexbox + fixe Icon-Spalte + gap statt geerbter Margins: macht das
       Item-Layout unabhängig von den vielen .mainmenu-Icon-Regeln (width:100%,
       position:absolute, margin-right:5px …), die sonst durchschlagen und den
       Icon→Label-Abstand aufblähen. 20px Icon + 10px gap + 1rem Schrift =
       gleiche Optik wie das mobile #mmenu. */
    html.nav_wide .mainmenu ul li.mlist a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        text-align: left !important;
        line-height: 1.6 !important;
        padding: 6px 20px !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
    }
    html.nav_wide .mainmenu ul li.mlist a i.fa {
        position: static !important;
        transform: none !important;
        top: auto;
        left: auto;
        flex: 0 0 20px !important;
        width: 20px !important;
        min-width: 20px !important;
        margin: 0 !important;
        font-size: 1rem !important;
        text-align: center !important;
    }
    html.nav_wide .mainmenu ul li.mlist a span:not(.mahn-badge):not(.sys-badge):not(.menu-wbr) {
        display: inline !important;
        transform: none !important;
        font-size: 1rem !important;
        line-height: normal !important;
    }
    /* Erzwungener Umbruch nach "&" (nur hier). Leerer Block → 0px hoch, also
       keine Leerzeile, nur Bruchstelle. Mobil/sonst bleibt .menu-wbr aus. */
    html.nav_wide .mainmenu ul li.mlist a span.menu-wbr {
        display: block !important;
    }
    /* Dotted-Trenner vor Items (a:before) im mobilen Menü ebenfalls nicht da. */
    html.nav_wide .header.original .mainmenu ul li a:before {
        display: none !important;
    }

    /* CI-Wortmarke oben in der breiten Sidebar (Platz dank Beschriftungen).
       Ersetzt den leeren Logo-Platzhalter; #top-Leerstreifen weg wie im
       eingeklappten Modus, damit die Marke bündig oben sitzt. */
    html.nav_wide #top {
        display: none !important;
    }
    html.nav_wide .header .logo {
        display: none !important;
    }
    html.nav_wide .header .brand-mark {
        display: block;
        clear: both;
        padding: 16px 20px 26px;
        font-size: 24px;
    }
}

/* === CI-Wortmarke "Gagenheld" im Header ===================================
   Grüne Corporate-Wortmarke (#20a478, Raleway 800), wie in den Fälligkeits-
   Mails. Standardmäßig ausgeblendet; eingeblendet, wo Platz ist: mobil (dunkle
   Top-Leiste, mittig), Desktop nav_top (Top-Leiste, links) und nav_wide (breite
   Sidebar mit Beschriftungen, oben). In der eingeklappten Icon-Sidebar (50px)
   ist kein Platz — dort bleibt sie aus.
   ========================================================================= */

/* Menü-Label-Umbruch (.menu-wbr): standardmäßig aus (mobiles Menü + alle
   anderen Modi → natürlicher Textfluss). Nur in nav_wide oben aktiv. */
.menu-wbr { display: none; }

.brand-mark {
    display: none;
    font-family: 'Raleway', Arial, Helvetica, sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--accent-color);
    text-decoration: none;
    font-size: 22px;
    line-height: 1;
    white-space: nowrap;
}
/* Link bleibt, aber in keinem Zustand eine Deko. (Die dotted-Punktlinie
   trifft seit der a:not([class])-Verengung keine geklassten Links mehr.) */
.brand-mark,
.brand-mark:hover,
.brand-mark:focus,
.brand-mark:active {
    color: var(--accent-color);
    text-decoration: none !important;
}

/* Mobil: mittig im dunklen Top-Balken. Der Burger liegt links (left:20px),
   die Wortmarke wird über die volle Breite zentriert — kein Overlap. */
@media only screen and (max-width: 767px) {
    .header .brand-mark {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }
}

/* Desktop nav_top: horizontale Leiste vorhanden → Wortmarke links als
   Brand-Anker, Menü-Icons schließen rechts an (Logo/Burger sind hier aus). */
@media only screen and (min-width: 768px) {
    html.nav_top .header .brand-mark {
        display: block;
        font-size: 20px;
        margin-right: 22px;
        flex: 0 0 auto;
    }
}

/* ==========================================================================
   Dashboard (index.php) — anpassbare Widgets.
   Edit-Modus („Anpassen"-Button) via assets/js/dashboard_edit.js:
   body.dash-editing kollabiert die Widget-Bodies zu kompakten Karten
   (max-height statt display:none — Chart.js-ResizeObserver braucht einen
   stabilen Parent), zeigt Drag-Bars + Tray und macht die Spalten zu
   gestrichelten Drop-Zonen.
   ========================================================================== */
.dash-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.dash-toolbar .ce_headline { margin-bottom: 0; }
.dash-toolbar-actions { display: flex; gap: 8px; }
.dash-btn {
    font-size: 0.85rem;
    padding: 6px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
}
/* button.<klasse>:hover statt .<klasse>:hover: das globale
   button:hover:not([type="submit"]) (grauer 1px-Rahmen) ist spezifischer
   als eine reine Klasse — gleiche Spezifität + später im File gewinnt. */
button.dash-btn:hover {
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
}

.dash-widget { position: relative; margin-bottom: 2em; }
.dash-widget-bar { display: none; }
.dash-tray { display: none; }

/* Widgets sind nur eine halbe Content-Spalte breit: .gigs-Tabellen koennen
   dort auch OBERHALB des Mobil-Breakpoints breiter sein als das Widget
   (2-Spalten-Dashboard bei ~768–1100px Viewport) — kein Vorfahr trug
   overflow-x, die Tabelle ragte unscrollbar raus. Scroll-Container ist hier
   der Widget-Body, NICHT wie mobil die Tabelle selbst: display:block macht
   die innere Tabelle shrink-to-fit, auf breiten Viewports blieb dann rechts
   neben dem Zebra ein Leerstreifen. Als echte Tabelle streckt sie sich auf
   Body-Breite (globales table width:100%) und waechst nur bei Ueberlauf
   drueber hinaus. Mobil greift weiter Stufe 1 (table.gigs scrollt selbst). */
@media (min-width: 768px) {
  .dash-widget-body { overflow-x: auto; }
  .dash-widget-body::-webkit-scrollbar { height: 6px; }
  .dash-widget-body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
}

/* Summenzeile der Finanz-Widgets (Offene Einnahmen/Ausgaben): mobil scrollt die
   Tabelle horizontal, der Betrag steht in der weggescrollten „Summe"-Spalte —
   sichtbar bleibt nur eine leere Zeile, die wie ein größerer Abstand zum
   nächsten Widget wirkte (uneinheitliche Widget-Abstände). Mobil ausblenden;
   Desktop zeigt die Summe weiter. */
@media (max-width: 767px) {
  .dash-sumrow { display: none; }
}

/* --- Edit-Modus --- */
body.dash-editing .dash-widget { margin-bottom: 10px; }
body.dash-editing .dash-widget-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
body.dash-editing .dash-widget-bar:active { cursor: grabbing; }
.dash-widget-handle { color: var(--text-secondary); }
.dash-widget-title {
    flex: 1;
    font-weight: 600;
    font-size: 0.9rem;
}
.dash-widget-remove {
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 2px 6px;
    color: var(--text-secondary);
}
button.dash-widget-remove:hover {
    color: var(--red);
    border: 0; /* kein grauer Rahmen vom globalen button:hover */
}

/* Inhalte einklappen: kompakte Karten, nichts klickbar beim Ziehen. */
body.dash-editing .dash-widget-body,
body.dash-editing .dash-widget > h5 {
    max-height: 0;
    overflow: hidden;
    margin: 0;
    opacity: 0.5;
    pointer-events: none;
}
body.dash-editing .dash-col {
    outline: 2px dashed var(--border-color);
    /* Nach INNEN statt außen zeichnen: außen überlappten sich die Rahmen
       der linken und rechten Spalte in der Grid-Mitte. So bleiben 2×8px
       sichtbare Luft zwischen den Rahmen. */
    outline-offset: -8px;
    border-radius: 8px;
    /* Vertikales Innenpolster (horizontal bringt das Grid schon 15px mit):
       oben hing der erste Widget-Balken sonst direkt an der Linie. */
    padding-top: 14px;
    padding-bottom: 14px;
    min-height: 120px; /* leergeräumte Spalte bleibt Drop-Ziel */
}
/* Unten so viel Luft zur Linie wie oben (sonst addiert sich der
   Widget-Abstand zum Padding). */
body.dash-editing .dash-widget:last-child { margin-bottom: 0; }
.sortable-ghost {
    opacity: 0.4;
    outline: 2px dashed var(--accent-color);
    border-radius: 6px;
}

/* Tray: ausgeblendete Widgets als „+"-Chips. */
body.dash-editing .dash-tray {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 24px 0 8px;
    padding: 10px 12px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
}
body.dash-editing .dash-tray.is-empty { display: none; }
.dash-tray-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.dash-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    padding: 4px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-primary);
    cursor: pointer;
}
button.dash-chip:hover {
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
}

/* Mobil kein Edit-Modus: zum sinnvollen Ziehen zu eng. dashboard_edit.js
   prüft offsetParent des Buttons und steigt dann auch nach einem
   Re-Add-Reload nicht automatisch wieder in den Edit-Modus ein. */
@media only screen and (max-width: 767px) {
    .dash-toolbar-actions { display: none; }
}

/* „Balken" = Zeilenumbruch zwischen zwei dash-rows: bringt die Widgets
   darunter in beiden Spalten wieder auf eine Höhe. Im Normalmodus unsichtbar
   (die Ausrichtung wirkt über die getrennten autogrid_rows), im Edit-Modus
   als gestrichelte Linie mit ×-Entfernen. */
.dash-divider { display: none; }
body.dash-editing .dash-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    /* symmetrisch — die Zeilen-Rahmen sind durch outline-offset -8px
       ohnehin schon vom Elementrand eingerückt */
    margin: 10px 0;
}
.dash-divider-line {
    flex: 1;
    border-top: 2px dashed var(--border-color);
}
.dash-divider-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.dash-divider-remove {
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 2px 6px;
    color: var(--text-secondary);
}
button.dash-divider-remove:hover {
    color: var(--red);
    border: 0; /* kein grauer Rahmen vom globalen button:hover */
}

/* Frisch wieder eingeblendetes Widget nach dem Re-Add-Reload kurz markieren. */
@keyframes dashWidgetFlash {
    0%, 60% { outline-color: var(--accent-color); }
    100%    { outline-color: transparent; }
}
.dash-widget-flash {
    outline: 2px solid transparent;
    outline-offset: 4px;
    border-radius: 8px;
    animation: dashWidgetFlash 1.8s ease-out;
}

/* =====================================================================
   Sub-Navigation der Unterseiten (nav.subnav)
   Tab-Optik nach Vorbild der Hilfe-Seite (ehem. .help-tabs, jetzt zentral
   fuer alle Unterseiten-Menues: Auftritte, Einnahmen, Ausgaben, ...).
   Aktiver Tab: class="current" — Textfarbe kommt global von a.current
   (gruen, #20a478!important), Rahmen/Hintergrund von der Regel hier.
   Mobil (max-width:767px, App-Breakpoint) blendet subnav.js die Links aus
   und zeigt ein Select-Pendant (.subnav-select); Navigation laeuft ueber
   synthetische Klicks auf die Original-Links, damit Sonder-Handler
   (a.js-post-delete → POST mit CSRF, Inline-Confirms) erhalten bleiben. */
nav.subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    /* Der Content-Abstand kommt NUR von hier — Seiten duerfen keine
       <br>-Polster nach der Tab-Zeile stapeln (Aufraeum-Runde 07/2026,
       war je Seite unterschiedlich hoch). Wert-Historie 07.07.: 22px alt,
       14/18px zu eng, 42px (+eine br-Zeile) zu viel → 29px (Max: „13px
       weniger"). Zeitnav-Segmentleiste und Filter-Panel docken per
       Negativ-Margin naeher an (Regeln unten, wandern bei Aenderung mit:
       Ziel 18px bzw. 10px effektiv). */
    margin: 0 0 29px;
    border-bottom: 1px solid var(--border-color, #e3e3e3);
}
nav.subnav a {
    padding: 8px 14px;
    border-radius: 8px 8px 0 0;
    text-decoration: none;
    color: var(--ui-text);
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -1px;
    white-space: nowrap;
}
nav.subnav a:hover { background: var(--hover-bg); }
nav.subnav a.current {
    color: var(--text-primary);
    font-weight: 600;
    background: var(--bg-primary, #fff);
    border-color: var(--border-color, #e3e3e3);
}
/* <strong>-gewrappte Aktions-Links (z. B. "Neu") layout-transparent machen,
   damit das <a> direktes Flex-Kind bleibt (der -1px-Border-Trick braucht
   das); die Fettschrift erbt das <a> weiterhin. */
nav.subnav strong { display: contents; }

/* Zaehl-Badge IM Tab (offene Error-Log-Eintraege, Cronjob-Fehler, Pi-Warnungen,
   offene Migrations, faellige Abrechnungen — function_system_badges.php),
   Pendant zum .sys-badge am Menue-Eintrag (menu.php). Bewusst inline hinter
   dem Label statt absolut positioniert: subnav.js baut das mobile <select>
   aus a.textContent, dort gibt es kein Markup — so liest die Option
   "Error-Log 3" statt nur "Error-Log".

   Drei Toene nach Schwere (system_badge_html setzt den Modifier):
     Default   rot        etwas ist kaputt / abgelaufen
     --warn    bernstein  etwas will bald Aufmerksamkeit (Farbe wie die
                          mypi-Ampel "gelb", die ebenfalls --info nutzt)
     --info    grau       neutrale Zahl ohne Handlungsbedarf
   Farbwerte hartcodiert wie beim .sys-badge: der Badge traegt in beiden
   Themes dieselbe Signalfarbe, nur der Untergrund wechselt. */
nav.subnav a .subnav-badge {
    display: inline-block;
    margin-left: 6px;
    min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
    border-radius: 8px;
    background: #c92a2a; color: #fff;
    font-size: 10px; line-height: 16px; font-weight: 700; text-align: center;
    vertical-align: 1px;
}
nav.subnav a .subnav-badge--warn { background: #b8860b; }
nav.subnav a .subnav-badge--info { background: #616061; }

/* Aktions-Zeile ueber der Sub-Navigation: Erstell-/Sync-Aktionen (Neu,
   Rechnung erstellen, Sync abrufen, ...) getrennt von den Ansichts-Tabs.
   Kompakte Outline-Buttons in Akzentgruen; mobil bleibt die Zeile sichtbar
   (Aktionen wandern NICHT ins Select — subnav.js liest nur nav.subnav). */
.subnav-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}
.subnav-actions a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    color: var(--accent-color);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.5;
}
.subnav-actions a:hover { background: var(--accent-wash); }
.subnav-actions a i { font-size: .85em; }
/* Aktive Aktion (offenes Neu-/Erstell-Formular): gefuellt. !important noetig,
   weil das globale a.current sonst gruenen Text auf gruenen Grund legt —
   gleiche Prioritaet, aber hoehere Spezifitaet gewinnt hier. */
.subnav-actions a.current { background: var(--accent-color); color: #fff !important; }
@media (max-width: 767px) {
    .subnav-actions { margin-bottom: 10px; }
}
/* Aktionszeile ohne nav.subnav darunter (vorlagen.php): die Buttons stossen
   direkt an Listen bzw. Formulare. Dort fehlt der Tab-zu-Content-Abstand,
   den die Sub-Navigation sonst mitbringt — hier per Modifier nachgereicht. */
.subnav-actions--standalone { margin-bottom: 32px; }
@media (max-width: 767px) {
    .subnav-actions--standalone { margin-bottom: 22px; }
}

/* Archiv-Aufklapper der Jahres-Tabs (functions/function_jahres_tabs.php).
   Ein <details> als Tab-Geschwister: das <summary> traegt die Tab-Geometrie
   (gleiche Paddings/Radien wie nav.subnav a, inkl. -1px auf die Trennlinie),
   das Panel haengt als absolutes Popover darunter. Aufgeklappt sieht der Tab
   aus wie ein aktiver Tab, damit die Verbindung zum Panel lesbar bleibt.
   Aussenklick und Escape schliessen ihn (subnav.js) — <details> kann das
   von sich aus nicht. Der Aufklapper enthaelt echte <a>-Tabs, deshalb muss
   jede nav.subnav-a-Regel hier zurueckgedreht werden. */
nav.subnav .jahr-archiv {
    position: relative;
    display: flex;
}
nav.subnav .jahr-archiv > summary {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    margin-bottom: -1px;
    color: var(--ui-text);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    list-style: none;
}
/* Default-Dreieck weg (Safari braucht den ::-webkit-Pseudo, Rest list-style) */
nav.subnav .jahr-archiv > summary::-webkit-details-marker { display: none; }
nav.subnav .jahr-archiv > summary::after {
    content: "▾";
    color: var(--text-muted);
    font-size: .8em;
}
nav.subnav .jahr-archiv[open] > summary::after { content: "▴"; }
nav.subnav .jahr-archiv > summary:hover { background: var(--hover-bg); }
nav.subnav .jahr-archiv[open] > summary {
    color: var(--text-primary);
    font-weight: 600;
    background: var(--bg-primary, #fff);
    border-color: var(--border-color, #e3e3e3);
}
/* display NUR im offenen Zustand setzen. Ein festes display:grid auf dem
   Panel wuerde das native Zuklappen aushebeln: Chrome versteckt den Inhalt
   inzwischen ueber ::details-content (content-visibility), aeltere Engines
   dagegen ueber ein UA-display:none am Kind — das ein eigener display-Wert
   schlaegt. Zugeklappt haette das Panel dort dauerhaft ueber dem Inhalt
   gestanden (Headless-Chrome-Messung 07/2026: 160x262px trotz [open]=false). */
.jahr-archiv-panel { display: none; }
nav.subnav .jahr-archiv[open] > .jahr-archiv-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(2, minmax(70px, 1fr));
    gap: 2px;
    padding: 8px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e3e3e3);
    border-radius: 0 8px 8px 8px;
    box-shadow: 0 6px 18px -4px var(--shadow);
}
/* Tab-Geometrie der Jahres-Links im Panel zuruecknehmen: hier sind es
   Listeneintraege, keine Tabs (kein -1px-Rand, kein Tab-Radius). */
nav.subnav .jahr-archiv-panel a {
    padding: 6px 10px;
    margin-bottom: 0;
    border: none;
    border-radius: 6px;
    text-align: center;
}

/* Mobiles Select-Pendant (baut subnav.js zur Laufzeit) */
.subnav-select { display: none; }
@media (max-width: 767px) {
    /* Unter dem kompakten Select etwas weniger Luft als unter der
       Tab-Zeile; vor allem faellt die Trennlinie weg. */
    nav.subnav.has-select { border-bottom: none; margin-bottom: 12px; }
    nav.subnav.has-select a { display: none; }
    /* Archiv-Aufklapper entfaellt mobil: subnav.js hat seine Jahre bereits
       ins Select uebernommen (es liest alle <a> der nav, auch die im Panel). */
    nav.subnav.has-select .jahr-archiv { display: none; }
    nav.subnav.has-select .subnav-select {
        display: block;
        /* flex statt width:100%: ohne Chip fuellt das Select die Zeile
           wie zuvor, mit Filter-Chip (einnahmen/ausgaben) teilen sie
           sich die Zeile — Select links, Chip rechts */
        flex: 1 1 auto;
        min-width: 0;
        padding: 10px 12px;
        border: 1px solid var(--border-color, #ccc);
        border-radius: 8px;
        background: var(--bg-primary, #fff);
        color: var(--text-primary);
    }
    /* subnav.js haengt das Select ans Nav-ENDE (hinter den Chip) —
       optisch soll der Chip rechts vom Select stehen */
    nav.subnav.has-select .finanz-filter-toggle { order: 1; }
}

/* =====================================================================
   Zeit-Navigation (.zeitnav-row / nav.zeitnav)
   Monats-/Quartalswahl auf einnahmen.php, ausgaben.php, auszahlungen.php
   als zusammenhaengende Segmentleiste unter den Jahres-Tabs. Formensprache
   der Ebenen: Aktionen = gruene Outline-Buttons, Jahre = Tabs, Zeitwahl =
   Segmente, Filter = Pillen. Aktives Segment = gruener Tint wie
   .filter-link.is-active (Textfarbe gruen kommt global von a.current);
   volle Gruen-Fuellung bleibt den Aktions-Buttons vorbehalten.
   Die Row existiert seit 07.07. nur noch im Monats-/Quartals-Modus
   (Caller oeffnet UND schliesst sie); der Filter-Chip sitzt oben rechts
   in der nav.subnav, sein Panel rendert als Block unter der Zeit-Zeile. */
.zeitnav-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 0 0 18px;
}
/* Die Segmentleiste gehoert zur Navigation: naeher an die Jahres-Tabs
   (29px Nav-Margin - 11px = 18px) als der Content — sonst kippt die
   Hierarchie-Optik. Nur Desktop: mobil traegt nav.subnav.has-select
   12px, da wuerde der Negativ-Margin die Row ins Select schieben. */
@media (min-width: 768px) {
    nav.subnav + .zeitnav-row { margin-top: -11px; }
}
nav.zeitnav {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
    border: 1px solid var(--border-color, #dcdedd);
    border-radius: 8px;
    /* auto clippt wie hidden an der Rundung, laesst aber schmale
       Viewports scrollen (gleiches Muster wie .gigs-Tabellen) */
    overflow-x: auto;
    scrollbar-width: none;
}
nav.zeitnav::-webkit-scrollbar { display: none; }
nav.zeitnav a {
    padding: 6px 12px;
    color: var(--ui-text);
    text-decoration: none;
    white-space: nowrap;
    border-left: 1px solid var(--border-color);
    /* globales a{border-bottom:dotted…} (additional.css-Block) neutralisieren,
       wie bei nav.subnav a — sonst Punktlinie unter jedem Segment */
    border-bottom: none;
    line-height: 1.5;
}
nav.zeitnav a:first-child { border-left: none; }
nav.zeitnav a:hover { background: var(--hover-bg); }
/* Aktiv bewusst OHNE Ring/Rahmen: ein eckiger inset-Ring beisst sich an
   den gerundeten Container-Ecken (Max 06.07.); der Tint wird vom
   overflow-Clipping sauber mitgerundet, gruene Schrift kommt von a.current. */
nav.zeitnav a.current {
    background: var(--accent-weak);
    font-weight: 600;
}
@media (max-width: 767px) {
    .zeitnav-row { margin-bottom: 14px; }
    /* Leiste fuellt die Row-Zeile; Monate scrollen intern,
       Quartale verteilen sich auf die volle Breite. */
    nav.zeitnav { flex: 1 1 0; }
    nav.zeitnav a { flex: 1 0 auto; text-align: center; }
}

/* Filter-Aufklapper: Chip-Button seit 07.07. rechtsbuendig IN der
   nav.subnav auf Hoehe der Jahres-Tabs (inc_finanz_filter_chip.php;
   vorher eigene Chip-Zeile in der .zeitnav-row, die Max im Weg war).
   Das Panel ist KEIN Kind des Chips: inc_finanz_filter_bar.php rendert
   es weiter unten als Block in voller Breite — der Chip bleibt dadurch
   beim Auf-/Zuklappen an Ort und Stelle. subnav.js ignoriert den Button
   (liest nur <a>). .filter-link ausserhalb des Panels (History-Panels
   Rechnung/AB) bleibt unberuehrt ein Text-Link. */
.finanz-filter-toggle {
    margin-left: auto;
    /* nav.subnav ist align-items:stretch (Tab-Geometrie braucht das) —
       der Chip zentriert sich selbst, statt sich auf Tab-Hoehe zu recken */
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border: 1px solid var(--border-color, #dcdedd);
    border-radius: 999px;
    background: var(--bg-primary, #fff);
    color: var(--ui-text);
    font: inherit;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
.finanz-filter-toggle:hover { background: var(--hover-bg); }
.finanz-filter-toggle i {
    font-size: .85em;
    color: var(--text-muted);
}
.finanz-filter-toggle::after {
    content: "▾";
    color: var(--text-muted);
    font-size: .8em;
}
.finanz-filter-toggle[aria-expanded="true"]::after { content: "▴"; }
/* Aktiver Filter: gruener Tint auch am zugeklappten Chip sichtbar
   (steht nach :hover — gleiche Spezifitaet, Tint gewinnt beim Hovern) */
.finanz-filter-toggle.is-filtered {
    border-color: var(--accent-color);
    background: var(--accent-weak);
    font-weight: 600;
}
.finanz-filter-toggle.is-filtered i { color: var(--accent-color); }
/* Panel haengt optisch am Vorgaenger: nach der Zeit-Zeile (18px
   margin-bottom) verkuerzt -8px auf 10px Abstand; folgt es im
   Jahres-Modus direkt der nav.subnav (42px), zieht die Adjacent-Regel
   unten staerker an — wieder 10px, das Panel bleibt am Chip. [hidden]
   explizit, damit keine display-Regel das native Attribut aushebeln
   kann. */
.finanz-filter-panel {
    margin: -8px 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--border-color, #ececec);
    border-radius: 8px;
    background: var(--bg-soft);
}
/* Nur Desktop: mobil hat nav.subnav.has-select 12px margin-bottom,
   dort passt der -8px-Default (4px Abstand unterm Select).
   29px Nav-Margin - 19px = 10px, wie nach der Zeit-Zeile. */
@media (min-width: 768px) {
    nav.subnav + .finanz-filter-panel { margin-top: -19px; }
}
.finanz-filter-panel[hidden] { display: none; }
.finanz-filter-panel .filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
}
.finanz-filter-panel .filter-group:last-child { margin-bottom: 0; }
.finanz-filter-panel .filter-group-label {
    flex: 0 0 auto;
    margin-right: 2px;
    color: var(--text-muted);
    font-size: .78em;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.finanz-filter-panel .filter-link {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 999px;
    color: var(--ui-text);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.5;
    font-size: .92em;
}
.finanz-filter-panel .filter-link:hover { background: var(--hover-bg); }
.finanz-filter-panel .filter-link.is-active {
    border-color: var(--accent-color);
    background: var(--accent-weak);
    font-weight: 600;
}

/* ==========================================================================
   Inline-Style-Ablösung (Stufe 1b der Darkmode-Vorbereitung, 07/2026):
   Utilities + Kleinst-Komponenten für vormals per style="…" gesetzte Farben
   in den Templates. Nur Farb-/Wiederholungsanteile — einmalige Layout-
   Feinheiten (margin/width/…) bleiben bewusst inline im Markup.
   Bewusst NICHT umgestellt (Inline-Styles sind dort nötig/korrekt):
   PDF-Templates (pdf_*_anzeigen, hv_*_anzeigen, function_*_pdf,
   function_erechnung_footer), Mail-HTML (function_*_mail), Standalone-
   Seiten ohne app.css (health/briefing.php, Stammdaten-Interstitial).
   ========================================================================== */

/* Grundfläche ans html-Element: Light war das immer schon implizit weiß
   (UA-Canvas = weiß), im Dark-Mode rendert der UA-Canvas sonst fast-schwarz
   unter kurzen Seiten durch (color-scheme:dark). */
html { background: var(--bg-primary); }

/* --- Text-Utilities (Ergänzung zu .red/.green/.smaller oben) --- */
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.secondary { color: var(--text-secondary); } /* wie .smaller, nur ohne font-size */
.dim { color: var(--ui-text); }
.link-blue { color: var(--blue); }
.red-dim { color: var(--red-dim); }

/* --- Linien --- */
.sum-line { border-top: 2px solid var(--text-primary); } /* Summenzeile in Statistik-Tabellen */
.top-line { border-top: 1px solid var(--border-color); }

/* --- Pastell-Hinweisboxen (Duplikat-Merge, 2FA-Karten, Warnungen …) --- */
.hint-box { border: 1px solid var(--border-color); border-radius: 4px; padding: .75em 1em; margin-bottom: 1.2em; }
.hint-box--plain  { background: var(--bg-secondary); border-color: transparent; }
.hint-box--green  { background: var(--box-green-bg);  border-color: var(--box-green-border); }
.hint-box--blue   { background: var(--box-blue-bg);   border-color: var(--box-blue-border); }
.hint-box--yellow { background: var(--box-yellow-bg); border-color: var(--box-yellow-border); }
.hint-box--red    { background: var(--box-red-bg);    border-color: var(--box-red-border); color: var(--box-red-text); }

/* --- Code-/Secret-Kästen (TOTP-Schlüssel, Recovery-Codes) --- */
.code-box { font-size: 1.1em; background: var(--bg-code); border-radius: 6px; padding: 16px; }
/* QR-Code bewusst hell verdrahtet: muss auch in einem künftigen Dark-Mode
   weiß bleiben (Scan-Kontrast). */
#totp-qr { background: #fff; padding: 12px; }

/* --- Login/Setup: Legal-Footer --- */
.login-legal-footer { margin-top: 24px; text-align: center; font-size: .82rem; line-height: 1.9; color: var(--text-muted); }
.login-legal-footer a { color: inherit; text-decoration: none; }

/* --- "In Nextcloud speichern"-Block (Rechnung/Angebot/AB + Belege) --- */
.nc-save-note { margin: 1.2em 0; padding: .7em .9em; background: var(--bg-secondary); border-left: 3px solid var(--accent-color); border-radius: 4px; }
.nc-path-row { display: flex; align-items: center; margin-top: 6px; padding: 0 6px; background: var(--input-bg); border: 1px solid var(--control-border); border-radius: 3px; font-family: monospace; font-size: .85rem; overflow: hidden; }
.nc-path-row .nc-prefix { padding: 4px 0; color: var(--text-faint); white-space: nowrap; user-select: none; }
.nc-path-row .nc-dir { padding: 4px 0; color: var(--text-muted); white-space: nowrap; user-select: none; }
/* :hover/:focus mit abgedeckt — sonst gewinnt die globale input:hover-Rahmenregel */
.nc-path-row input, .nc-path-row input:hover, .nc-path-row input:focus { flex: 1; min-width: 0; border: 0; outline: none; padding: 4px 0; background: transparent; font: inherit; color: var(--text-primary); }

/* --- Datei-Picker-Modal (NC-Belegauswahl + dokumente.php teilen die Optik) --- */
.pick-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 24px; }
.pick-box { background: var(--bg-primary); border-radius: 8px; width: min(720px, 100%); height: min(560px, 80vh); display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); overflow: hidden; }
.pick-head { padding: 14px 20px; border-bottom: 1px solid var(--border-color); font-size: .95rem; }
.pick-crumb { padding: 10px 20px; border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); font-size: .85rem; color: var(--ui-text); display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.pick-foot { padding: 12px 20px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 8px; }
/* :hover je Variante mitgesetzt — sonst färbt die globale a:hover-Regel den Text um */
.pick-btn, .pick-btn:hover { display: inline-block; padding: 6px 14px; cursor: pointer; background: var(--bg-secondary); border: 1px solid var(--control-border); border-radius: 4px; text-decoration: none; color: var(--text-primary); }
.pick-btn--primary, .pick-btn--primary:hover { background: var(--accent-color); color: #fff; border: 0; }
.pick-btn--dark, .pick-btn--dark:hover { background: var(--ui-text); color: #fff; border: 0; }
.pick-empty { padding: 16px 20px; color: var(--text-faint); font-size: .9rem; }
.pick-error { padding: 16px 20px; color: var(--danger); font-size: .9rem; }
.pick-box--prompt { background: var(--bg-primary); border-radius: 8px; padding: 20px; width: min(640px, 100%); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); }
.crumb-link, .crumb-link:hover { color: var(--accent-color); text-decoration: none; padding: 0 4px; }
.crumb-sep { color: var(--text-faint); }

/* ==========================================================================
   Dark-Mode (Stufe 2 der Darkmode-Vorbereitung, 07/2026).
   Hook: html[data-theme="dark"] — gesetzt vom synchronen Theme-Boot-Script
   (includes/inc_theme_boot.php) aus localStorage('theme'): system|light|dark;
   bei "system" folgt es prefers-color-scheme inkl. Live-Wechsel. Ohne JS
   bleibt alles hell (kein data-theme = Light-Werte aus :root).
   Bewusst @media screen: Drucken aus dem Dark-Mode bekommt die hellen
   :root-Werte (sonst druckt es hellen Text auf weißem Papier).
   Die Palette überschreibt NUR die :root-Variablen + color-scheme —
   alle Komponenten hängen seit Stufe 1/1b an den Variablen.
   ========================================================================== */
@media screen {
html[data-theme="dark"] {
    color-scheme: dark;

    /* Flächen — Navy-Familie rund um den Bestands-Header #252538 */
    --bg-primary:    #1a1a2e;
    --bg-secondary:  #24243a;
    --bg-soft:       #1e1e33;
    --bg-code:       #14142a;
    --bg-header:     #252538;             /* Header bleibt, hebt sich minimal von der Fläche ab */
    --input-bg:      #15152b;             /* Inputs leicht "eingelassen" */
    --table-odd:     #1a1a2e;
    --table-even:    rgba(255, 255, 255, 0.045);
    --table-sum:     rgba(255, 255, 255, 0.10);
    --hover-bg:      rgba(255, 255, 255, 0.06);

    /* Text — gleiche Kräftigkeits-Stufung wie Light (primary > heading >
       ui-text > secondary > muted > faint) */
    --text-primary:  #e8e8ec;
    --text-heading:  #d8d9e2;
    --ui-text:       #c8c8d2;
    --text-secondary:#b6b6c0;
    --text-muted:    #8f8f9c;
    --text-faint:    #62626e;

    /* Linien, Schatten, Overlay */
    --border-color:  rgba(255, 255, 255, 0.12);
    --control-border:rgba(255, 255, 255, 0.24);
    --control-border-hover: #8a8a96;
    --link-underline:rgba(150, 150, 165, 0.65);
    --shadow:        rgba(0, 0, 0, 0.5);
    --scrollbar-thumb: rgba(255, 255, 255, 0.28);
    --overlay:       rgba(0, 0, 0, 0.7);

    /* Akzent — CI-Grün bleibt (Kontrast auf #1a1a2e ~4.6:1); Tints kräftiger */
    --accent-color:  #20a478;
    --accent-weak:   rgba(32, 164, 120, .22);
    --accent-wash:   rgba(32, 164, 120, .14);
    --accent-soft-border: #2e6b55;

    /* Signale — Textfarben heller (Lesbarkeit), gefüllte Flächen bleiben */
    --red:           #e56671;
    --green:         #35c493;
    --blue:          #5ea3dc;
    --navy:          #8899ee;             /* span.blue: Navy wäre auf dunkel unlesbar */
    --orange:        #ff9068;
    --danger:        #c0392b;
    --danger-dark:   #a93226;
    --danger-soft-border: #7a3d44;
    --red-dim:       #a78585;
    --green-bg:      rgba(53, 196, 147, 0.16);
    --red-bg:        rgba(229, 102, 113, 0.16);
    --blue-bg:       rgba(94, 163, 220, 0.16);
    --yellow-bg:     rgba(255, 214, 70, 0.14);

    /* Pastell-Boxen → transparente Farb-Tints */
    --box-green-bg:  rgba(32, 164, 120, 0.14);
    --box-green-border: rgba(32, 164, 120, 0.38);
    --box-blue-bg:   rgba(94, 163, 220, 0.13);
    --box-blue-border:  rgba(94, 163, 220, 0.35);
    --box-yellow-bg: rgba(255, 200, 60, 0.10);
    --box-yellow-border:rgba(255, 200, 60, 0.32);
    --box-red-bg:    rgba(229, 102, 113, 0.13);
    --box-red-border:   rgba(229, 102, 113, 0.35);
    --box-red-text:  #f2aab1;
    --box-yellow-text:  #ffd88a;
    --box-green-text:   #8fd8b4;
    --box-blue-text:    #a8c4e8;

    /* Toasts + Info */
    --info:          #e3b341;
    --toast-success-bg: rgba(18, 58, 44, 0.95);
    --toast-warn-bg: rgba(74, 26, 32, 0.95);
    --toast-info-bg: rgba(70, 55, 12, 0.95);
}

/* jQuery-UI (Datepicker & Co, CDN-Theme "base" ist hell verdrahtet):
   Grundflächen/Text/Kanten auf die Palette heben. Feintuning nach Sichtung. */
html[data-theme="dark"] .ui-widget-content { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); }
html[data-theme="dark"] .ui-widget-header { background: var(--bg-header); color: #fff; border-color: var(--border-color); }
html[data-theme="dark"] .ui-widget-content .ui-state-default,
html[data-theme="dark"] .ui-widget-header .ui-state-default { background: var(--bg-soft); color: var(--text-primary); border-color: var(--control-border); }
html[data-theme="dark"] .ui-widget-content .ui-state-hover,
html[data-theme="dark"] .ui-widget-content .ui-state-focus { background: var(--accent-weak); border-color: var(--accent-color); color: var(--text-primary); }
html[data-theme="dark"] .ui-widget-content .ui-state-active { background: var(--accent-color); border-color: var(--accent-color); color: #fff; }
html[data-theme="dark"] .ui-widget-content .ui-state-highlight { background: var(--accent-weak); border-color: var(--accent-soft-border); color: var(--text-primary); }

/* Formulare: Light nutzt halbtransparentes Weiß als Basis-BG (4613) — auf
   dunkel wäre das ein Milchglas-Schleier. Gewinner-Regel (6020er-Block)
   nutzt var(--input-bg); hier zusätzlich die Basis absichern. */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { background-color: var(--input-bg); }
}


/* ==========================================================================
   Seiten-Touren (assets/js/tour.js + tour_defs.js, 07/2026).
   Schwebender Start-Button unten rechts + Overlay mit Spotlight und
   Erklärkarte. Farben komplett über die :root-Variablen — Dark-Mode braucht
   hier keine eigenen Regeln.
   ========================================================================== */

/* Start-Button: dezente Pille, erscheint nur auf Seiten mit Tour-Definition */
.tour-fab {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 9500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--control-border);
    background: var(--bg-primary);
    color: var(--accent-color);
    font: inherit;
    font-size: .92em;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}
.tour-fab:hover { border-color: var(--accent-color); }
.tour-fab .fa { font-size: .95em; }
body.tour-open .tour-fab { display: none; }

/* Overlay: fängt alle Klicks; Abdunkelung liefert der Spotlight-Schatten.
   tour-dim = Schritte ohne Ziel-Element (zentrierte Karte) dunkeln selbst ab. */
.tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 99990; /* unter Quicksearch (99999), über allem Seiteninhalt */
}
.tour-overlay.tour-dim { background: rgba(8, 10, 18, 0.55); }

/* Spotlight: Loch im Dunkel via Riesen-box-shadow. Bewusst feste 6000px
   statt vmax: deckt jede reale Viewport-Diagonale, aber ein vmax-Monster
   (256000px auf 720p) hat den Compositor beim Rastern erstickt — eingefrorene
   Frames und geplatzte Captures im Test-Harness. */
.tour-spot {
    position: fixed;
    border-radius: 8px;
    box-shadow: 0 0 0 6000px rgba(8, 10, 18, 0.55);
    pointer-events: none;
}
.tour-overlay.is-ready .tour-spot { transition: all 0.22s ease; }

/* Erklärkarte */
.tour-card {
    position: fixed;
    width: min(340px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow: auto;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.18);
    padding: 14px 16px 12px;
}
.tour-overlay.is-ready .tour-card { transition: left 0.22s ease, top 0.22s ease; }
.tour-card--center {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Pfeil zur Ziel-Markierung: gedrehtes Quadrat in Karten-Optik */
.tour-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--bg-primary);
    transform: rotate(45deg);
}
.tour-card--below .tour-arrow {
    top: -7px;
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
}
.tour-card--above .tour-arrow {
    bottom: -7px;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.tour-close {
    position: absolute;
    top: 6px;
    right: 8px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 1.25em;
    line-height: 1;
    padding: 4px 6px;
    cursor: pointer;
}
.tour-close:hover { color: var(--text-primary); }

.tour-kicker {
    font-size: .72em;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin: 0 22px 6px 0;
}
.tour-title {
    font-weight: 700;
    font-size: 1.02em;
    color: var(--text-heading, var(--text-primary));
    margin: 0 0 6px;
}
.tour-text {
    font-size: .92em;
    line-height: 1.5;
    color: var(--ui-text);
}
.tour-text b { color: var(--text-primary); }

.tour-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}
.tour-btn {
    font: inherit;
    font-size: .9em;
    line-height: 1;
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
}
.tour-btn-primary {
    background: var(--accent-color);
    color: #fff;
}
.tour-btn-primary:hover { filter: brightness(1.07); }
.tour-btn-ghost {
    background: transparent;
    color: var(--ui-text);
    border-color: var(--control-border);
}
.tour-btn-ghost:hover { border-color: var(--accent-color); color: var(--accent-color); }

/* Mini-Fortschrittsbalken am Kartenfuß */
.tour-bar {
    height: 3px;
    border-radius: 2px;
    background: var(--bg-secondary);
    margin-top: 10px;
    overflow: hidden;
}
.tour-bar-fill {
    display: block;
    height: 100%;
    background: var(--accent-color);
    transition: width 0.22s ease;
}

@media print {
    .tour-fab, .tour-overlay { display: none !important; }
}

/* ── Gig-Flow-Fortschrittsbalken (Listen) ─────────────────────────────────
   Mini-Balken je Zeile im Dashboard-Widget "Laufende Anfragen"
   (index_gigflows.php) UND im Anstehend-Tab (anfragen.php) — Optik wie der
   grosse Balken auf vorgang.php. Vorher lokal im Widget-<style>. */
.gf-bar  { display:inline-block; width:52px; height:7px; border-radius:4px; background:var(--bg-secondary); overflow:hidden; vertical-align:middle; }
.gf-fill { display:block; height:100%; background:var(--accent-color); }

/* ── Leistungs-Positionen (Rechnung/Angebot erstellen) ────────────────────
   Kompakte Spalten-Zeilen statt vertikal gestapelter Felder — Markup in
   includes/inc_leistungen_zeilen.php, Verhalten in assets/js/
   leistungen_zeilen.js. Kopfzeile + Nummern-Spalte nur auf Desktop; mobil
   stapelt die Beschreibung auf volle Breite (fester Breakpoint 767px,
   flex-basis-auto-Footgun) und Mini-Labels (.lz-ml) ersetzen den Kopf. */
/* Spalten in rem, NICHT em: .lz-head rendert mit .smaller-Schrift — bei em
   bekämen Kopf und Zeilen verschiedene Spaltenbreiten und fluchten nicht. */
.lz-head, .lz-row {
    display: grid;
    grid-template-columns: 2.3rem minmax(0,1fr) 6rem 8.5rem 7rem 2.2rem;
    gap: 8px;
    align-items: start;
}
.lz-head::before { content: ""; }
.lz-head span { text-align: left; }
.lz-head .lz-head-betrag { text-align: right; }
/* Nummern-Spalte = Drag-Griff (leistungen_zeilen.js aktiviert draggable nur
   bei mousedown hierauf, sonst stoert es die Textauswahl in der Textarea).
   Rillen-Symbol IMMER sichtbar links neben der Nummer — nur-on-hover checkt
   man nicht (Max, 24.07.). */
#lz-list { counter-reset: lz; }
.lz-grip {
    counter-increment: lz;
    text-align: right;
    white-space: nowrap;
    padding-top: 13px;
    opacity: .6;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.12s ease-in;
}
.lz-grip:hover { opacity: 1; }
.lz-grip::before {
    content: "\2630"; /* ☰ — die typischen drei Rillen */
    font-size: .75em;
    margin-right: .3em;
    /* kleinere Schrift auf gemeinsamer Baseline hing optisch zu tief */
    vertical-align: 1px;
}
.lz-grip::after { content: counter(lz) "."; }
.lz-row.lz-dragging { opacity: .45; }
.lz-row + .lz-row {
    border-top: 1px dashed var(--border-color);
    padding-top: 12px;
    margin-top: 12px;
}
.lz-row textarea, .lz-row input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px 10px;
}
.lz-row textarea {
    /* height:auto schlaegt das globale textarea{height:400px} — sonst misst
       das Auto-Grow-JS beim height-Reset die 400px-Box statt des Inhalts.
       Kein min-height: rows=1 + Auto-Grow ⇒ Grundhoehe = Hoehe der
       Nachbar-Inputs (Max: Leistung exakt so hoch wie die anderen Felder). */
    height: auto;
    overflow: hidden;
    resize: none;
}
.lz-c-menge input, .lz-c-preis input { text-align: right; }
.lz-betrag {
    display: block;
    text-align: right;
    padding-top: 13px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* Rahmenlos wie das Unlink-✗ der Dokumentenverknuepfung (nc-pdf-unlink) */
.lz-del {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    margin-top: 9px;
    line-height: 1;
    font-size: 1.25rem;
    background: transparent;
    border: 0;
    color: var(--red);
    opacity: .55;
    cursor: pointer;
    transition: opacity 0.12s ease-in;
}
/* button.: schlaegt die globale button:hover:not([type=submit])-Rahmenregel */
button.lz-del:hover { opacity: 1; border: 0; }
.lz-ml { display: none; }
.lz-addline { margin: 12px 0 4px; }
.lz-summen {
    max-width: 26rem;
    margin: 14px 0 18px auto;
    padding-right: calc(2.2rem + 8px);
}
.lz-sumrow {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    padding: 3px 0;
}
/* display:flex wuerde sonst das UA-[hidden] aushebeln (Rabatt-/USt-Zeilen) */
.lz-sumrow[hidden] { display: none; }
.lz-sumrow span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lz-gesamt {
    border-top: 1px solid var(--border-color);
    font-weight: bold;
    margin-top: 4px;
    padding-top: 8px;
}
@media only screen and (max-width: 767px) {
    .lz-head { display: none; }
    .lz-row { grid-template-columns: minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,1.2fr) 2.2rem; }
    /* kein Drag&Drop auf Touch (wie Dashboard: mobil kein Edit) */
    .lz-grip { display: none; }
    .lz-c-leistung { grid-column: 1 / -1; }
    .lz-ml { display: block; margin-bottom: 3px; }
    .lz-betrag { padding-top: 13px; }
    .lz-c-del { align-self: end; }
    .lz-del { height: 2.6rem; margin: 0 0 4px; }
    .lz-summen { padding-right: 0; max-width: 100%; }
}

/* Formular-Sektions-Titel (Rechnung/Angebot erstellen): kleine h5-Zwischen-
   überschriften gliedern die lange Maske; gedrosselte Margins gegenüber dem
   h5-Default (25px-margin-bottom wäre im Formular zu luftig). */
h5.form-sect {
    font-size: 1.25rem;
    margin: 30px 0 12px;
}
/* Erste Sektion buendig mit dem Spaltenbeginn: das Verlauf-Panel rechts
   startet mit einem h5 ohne top-margin — "Empfänger" links soll fluchten. */
.pdf-modal-form > h5.form-sect:first-of-type { margin-top: 0; }