/* ==========================
   1) Design Tokens / Defaults
   ========================== */
:root{
  /* Maße */
  --header-h:	70px;
  --subbar-h:	50px;
  --subbar-gap:	16px;     /* Abstand zwischen Header & Subbar */
  --footer-h:	80px;
  --pad-x:		40px;
  --pad-y:		20px;
  --radius:		8px;

  /* Farben (Domain kann überschreiben) */
/*  --page- bg: #fafafa; /* */
/*  --bra nd:   #6b46c1;     /* Akzent für Tiles */
  --text:    #222;
  --muted:   #6b7280;
  --border:  #ccc;
  --panel-bg:#fff;

/*  --page- bg:   #f5faf7; /* */
/*  --header- bg: #0ea5e9; /* */
  
  /* TRC Farben aus Logo */
/*  --page- bg:	#F5F5F5;   /* dezentes Grau */
/*  --header- bg:	#111111;   /* sanftes Rot #C54D39   silbergrau #C0C0C0*/
/*  --bra nd:		#B13620;   /* kräftiger Basiston */
/*  --brand- dk:	#A73624;   /* Hover/Active */
  --border:		#E5E7EB;   /* optional: Rahmen/Linien */
/*  --header- col:	#CCCC22;   /* türkis #0E7490 */


  /* Effekte */
  --shadow: 0 2px 5px rgba(0,0,0,.2);

  /* Typo */
/*  --font-sans: "Segoe UI", SegoeUI, -apple-system, system-ui, Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  --font-size: 15px; */
  
  
/* === Typo-Update (serifenlos, Arial/Tahoma bevorzugt) === */

  --font-sans: Arial, Tahoma, "Segoe UI", Roboto, Helvetica, sans-serif;
  /* optional: Grundgröße leicht anheben */
   --font-size: 15.5px;


  /* Header bleibt immer gleich */
/*  --header- bg: #673ab7;*/

  /* Tiles */
  --tile-w: 240px;        /* feste Breite je Kachel */
  --tile-gap-x: 18px;
  --tile-gap-y: 18px;
}

/* Anwendung (wie zuletzt besprochen) */
header{ background: var(--header-bg); }
footer .footer-top{ background: var(--page-bg); }
footer .footer-bottom{ background: var(--header-bg); }
main{ background: var(--page-bg); }





/* ==========================
   2) Basis & Typografie
   ========================== */
html, body{
  height: 100%;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size);
  line-height: 1.5;
  color: var(--text);
  background: var(--page-bg);
  overflow: hidden; /* nur <main> scrollt */

  /* neutrales Rendering 
  text-rendering: auto;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
  */
  
  font-family: var(--font-sans);
  /* schärferes Rendering für Sans-Serif */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.01em;

}

/* Überschriften etwas kräftiger & ruhiger sperren */
h1, h2, h3{
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: .2em 0;
}

/* UI-Elemente minimal kräftiger */
button, .subbar-btn, input, select, textarea{
  font-family: var(--font-sans);
  font-weight: 600;
}

/* Tabellen & kleinere UI-Texte gut lesbar */
table, th, td, .badge, .mono{
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0.005em;
}


/* ==========================
   3) Header (fix oben)
   ========================== */
header{
  position: fixed; top:0; left:0; right:0; height: var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding: 8px 20px;
  background: var(--header-bg); /* ← EINZIGER Background! */
  flex: 0 0 auto;
  color: var(--header-col);		/* fff */
  box-shadow: var(--shadow);
  z-index:1000;
}
.header-left, .header-right{ display:flex; align-items:center; gap:12px; }
header img, header .logo { height: 40px; }

/* Titel mittig im Header */
header h1{
  position:absolute; left:50%; transform:translateX(-50%);
  margin:0; text-align:center; width:60%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.header-badge{
  display:inline-block; padding:4px 10px; border-radius:999px;
  background:#ef4444; color:#fff; font-weight:700; font-size:12px; letter-spacing:.06em;
}

/* ==========================
   4) Subbar (fix unter Header)
   ========================== */
   
.subbar{
  position: fixed;
  top: calc(var(--header-h) + var(--subbar-gap));
  left: 0; right: 0; height: var(--subbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 20px;
  background:#e6e6e6; border-bottom:1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0,0,0,.1);
  z-index:999;
}
.subbar-left, .subbar-center, .subbar-right{
  display:flex; align-items:center; gap:8px; height:100%;
}
.subbar-left  { flex:1; justify-content:flex-start; }
.subbar-center{ flex:1; justify-content:center; }
.subbar-right { flex:1; justify-content:flex-end; }

.subbar-btn {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid #d1d5db;
  background: #f8fafc;
  color: inherit;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.subbar-btn:hover { background: #eef2f7; }
.subbar-btn.btn-ghost { background: transparent; border-color: transparent; }
.subbar-btn.btn-primary { background: #0ea5e9; border-color: #0284c7; color: #fff; }
.subbar-btn.btn-primary:hover { background: #0284c7; }

.subbar-btn.btn-ghost{ color: var(--brand); border-color: var(--brand); }
.subbar-btn.btn-ghost:hover{ background: var(--brand); color:#fff; }
.subbar-btn.btn-primary{ background: var(--brand); color:#fff; border-color: var(--brand); }
.subbar-btn.btn-primary:hover{ filter: brightness(0.95); }


/*
.subbar{
  position: fixed;
  top: calc(var(--header-h) + var(--subbar-gap));
  left: 0; right: 0; height: var(--subbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 20px;
  background:#e6e6e6; border-bottom:1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0,0,0,.1);
  z-index:999;
}
.subbar-left, .subbar-center, .subbar-right{
  display:flex; align-items:center; gap:8px; height:100%;
}
.subbar-left  { flex:1; justify-content:flex-start; }
.subbar-center{ flex:1; justify-content:center; }
.subbar-right { flex:1; justify-content:flex-end; }

/* Buttons in der Subbar 
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:32px; line-height:32px; padding:0 12px;
  border-radius:10px; font-weight:600; text-decoration:none;
  border:1px solid transparent; cursor:pointer; background:transparent;
}
.btn-ghost{ color: var(--brand); border-color: var(--brand); }
.btn-ghost:hover{ background: var(--brand); color:#fff; }
.btn-primary{ background: var(--brand); color:#fff; border-color: var(--brand); }
.btn-primary:hover{ filter: brightness(0.95); }
*/
/* ==========================
   5) Main (einziger Scrollbereich)
   ========================== */
main{
  position: fixed; left:0; right:0; bottom: var(--footer-h);
  top: var(--header-h); /* Standard ohne Subbar */
  overflow:auto; -webkit-overflow-scrolling:touch;
  padding: var(--pad-y) var(--pad-x);
  padding-top: calc(var(--pad-y) + 12px); /* H2 bekommt Luft */
  box-sizing:border-box;
  background: var(--page-bg);
}
/* Wenn Subbar da ist, rutscht Main weiter nach unten */
body:has(.subbar) main,
body.has-subbar main{
  top: calc(var(--header-h) + var(--subbar-h) + var(--subbar-gap));
}

/* H2 im Main */
.page-intro{ margin: 8px 0 12px; }
.page-title{ text-align:center; font-weight:700; letter-spacing:.2px; margin:6px 0 8px; }

/* ==========================
   6) Footer (fix unten, zweigeteilt)
   ========================== */
footer{
  position: fixed; left:0; right:0; bottom:0; height: var(--footer-h);
  color:#333;
  font-size:14px;
  text-align:center;
  z-index:1000;
}
footer .footer-top{
/*  height: calc(var(--footer-h) / 2);   */
  height: 20px;
  background: var(--page-bg);      /* ← koppelt an Main */
}

footer .footer-bottom{
/*  height: calc(var(--footer-h) / 2);   */
  height: 60px;
  background: var(--header-bg);		/* ← koppelt an Header */
  display:flex;
  align-items:center;
  justify-content: space-between;
  color: var(--header-col);			/*  #222; */
  padding: 0 20px;
  font-size: 14px;
  text-align:center;
}


footer::before{
  content:"";
  position:absolute;
/*  top: calc(var(--footer-h)/2);   */
  top: 20px;
  left:0;
  width:100%;
  height:1px;
  background:#000;
  z-index:1001;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.foot-user {
  margin-right: 8px;
  font-size: 0.85rem;
  opacity: 0.9;
}

.foot-logout-link {
  font-size: 0.85rem;
  text-decoration: none;
}
.foot-logout-link:hover {
  text-decoration: underline;
}

/* ==========================
   Footer Debug Buttons
   ========================== */

footer .foot-debug-form{
  display:inline-flex;
  gap:8px;
  align-items:center;
  margin-left:12px;
}

/* Wichtig: Footer-Buttons dürfen NICHT die Footer-Textfarbe erben */
footer .foot-debug-btn{
  appearance:none;
  -webkit-appearance:none;

  padding:4px 10px;
  border-radius:999px;

  border:1px solid rgba(0,0,0,.25);
  background: rgba(255,255,255,.92);

  color: var(--text);          /* <- FIX: dunkler Text */
  font-size:12px;
  line-height:1.2;
  font-weight:700;
  white-space:nowrap;

  cursor:pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

footer .foot-debug-btn:hover{
  background: rgba(255,255,255,1);
}

footer .foot-debug-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
}

/* ==========================
   7) Listen-Ansicht & Sonstiges
   ========================== */
.list-section { margin-bottom: 8px; }
.dir-heading  { margin: 10px 0 6px; font-size: 16px; font-weight: 700; color: var(--muted); }
.file-list    { list-style: none; margin: 0 0 6px; padding-left: 0; }
.file-list li { padding: 4px 0; }
.file-list a  { text-decoration: none; }
.file-list a:hover { text-decoration: underline; }
.dir-sep      { border: 0; border-top: 1px dashed #e0e0e0; margin: 8px 0 14px; }

/* Tabellen & Formulare (global) */
table{
  border-collapse: collapse; width: 90%; margin: 20px auto;
  background: var(--panel-bg); border-radius: var(--radius);
  box-shadow: 0 0 8px #ccc; overflow: hidden;
}
th, td{ border:1px solid var(--border); padding:8px 10px; text-align:left; }
th{ background:#f0f0f0; }
th.erstellt, td.erstellt{ text-align:center !important; vertical-align:middle; }


/* GLOBAL: Forms sollen NICHT automatisch wie Panels aussehen */
form{
  background: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
  margin: 0;
}

/* Optional: wenn du irgendwo wieder "Panel-Form" willst, explizit so nutzen */
.form-panel{
  background: var(--panel-bg);
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}



html, body{
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Form-Controls und Buttons erben sauber (Browser-Normalisierung) */
button, input, select, textarea {
  font: inherit;               /* inkl. family/size/weight/line-height */
}

/* Subbar & Header: hart auf Sans setzen (überstimmt Fremd-CSS) */
header, header *, .subbar, .subbar * {
  font-family: var(--font-sans) !important;
}

/* Tabellen/Listen/Links konsequent sans-serif */
table, th, td,
ul, ol, li,
a, .badge,
.wa-table, .wa-table * {
  font-family: var(--font-sans);
  letter-spacing: 0.005em;
}

/* Monospace gezielt beibehalten */
.mono, code, pre, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}
/* Robust: Footer & Subbar hart auf Sans (falls Fremd-CSS später lädt) */
footer, footer *,
.subbar, .subbar *,
header, header *{
  font-family: var(--font-sans) !important;
}
/* /global/public/css/start.css */

.start-page {
  padding: 12px 16px 20px;
}

.start-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}

/* Kacheln */
.start-tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 14px 16px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}

.start-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.start-tile-icon {
  font-size: 1.6rem;
  margin-bottom: 6px;
}

.start-tile-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.start-tile-sub {
  font-size: 0.85rem;
  opacity: 0.8;
}
/* =========================================================
   Buttons: einheitlich als "Fläche", nicht nur Rahmen
   ========================================================= */

/* Basis für echte Buttons (ohne Klassen) */
button,
input[type="button"],
input[type="submit"],
input[type="reset"]{
  font: inherit;
  border: 0;
  border-radius: var(--radius);
  padding: 8px 12px;
  background: rgba(255,255,255,.92);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover{
  background: rgba(255,255,255,1);
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled{
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}

/* Fokus: sichtbar aber nicht "weiß umrandet" */
button:focus-visible,
.subbar-btn:focus-visible{
  outline: 2px solid rgba(0,0,0,.22);
  outline-offset: 2px;
}

/* Subbar Buttons (A + Button) */
.subbar-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;

  border: 0;                    /* <- kein Mini-Rahmen */
  border-radius: var(--radius);
  padding: 8px 12px;
  background: rgba(255,255,255,.92); /* <- Fläche */
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

.subbar-btn:hover{
  background: rgba(255,255,255,1);
}

/* Ghost ist jetzt auch eine Fläche (nur dezent) */
.subbar-btn.btn-ghost{
  background: rgba(255,255,255,.82);
}

/* Primary als echte "Fläche" */
.subbar-btn.btn-primary{
  background: var(--accent, #0ea5e9);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.10);
}

.subbar-btn.btn-primary:hover{
  filter: brightness(0.98);
}

/* Icon-Buttons nicht kaputt-stylen */
.icon-btn{
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.8);
  box-shadow: none;
}
.icon-btn:hover{
  background: rgba(255,255,255,1);
}
/* footer höhen */
.footer-top{
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
}

.footer-bottom{
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* debug form kompakt (top ist nur 20px hoch) */
.foot-debug-form{
  display:inline-flex;
  gap:8px;
  align-items:center;
  margin-left:12px;
}

/* testflächen */
.fav-dim-left,
.fav-dim-right{
  width: 300px;
  height: 60px;
}

.fav-dim-left{  background: rgba(255, 0, 0, 0.18); }
.fav-dim-right{ background: rgba(0, 128, 255, 0.18); }

/* center testfläche: 15 * (5 + 40 + 5) = 750px */
.fav-dim-center{
  width: 750px;
  height: 60px;
  background: rgba(0, 255, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* favoriten icons */
.foot-favs{
  display: flex;
  align-items: center;
  justify-content: center;
}

.foot-fav{
  width: 40px;
  height: 40px;
  margin: 0 5px; /* 5 links + 5 rechts => 50 je icon-slot */
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 8px;
}

.foot-fav i,
.foot-fav-fallback{
  font-size: 22px;
  line-height: 1;
}

/* footer heights */
.footer-top{
  height: 20px;
}

.footer-bottom{
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 3 fixed areas: 400 / 750 / 400 */
.foot-area{
  height: 60px;
  display: flex;
  align-items: center;
}

.foot-area-left{
  width: 400px;
  background: rgba(255, 0, 0, 0.18); /* testfläche links */
  padding: 0 12px;
  justify-content: flex-start;
}

.foot-area-center{
  width: 750px; /* 15 * (5 + 40 + 5) */
  background: rgba(0, 255, 0, 0.12); /* testfläche mitte */
  justify-content: center;
}

.foot-area-right{
  width: 400px;
  background: rgba(0, 128, 255, 0.18); /* testfläche rechts */
  padding: 0 12px;
  justify-content: flex-end;
}

/* center placeholders */
.foot-favs{
  display: flex;
  align-items: center;
  justify-content: center;
}

.foot-fav-ph{
  width: 40px;
  height: 40px;
  margin: 0 5px; /* 5 links + 5 rechts */
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}

/* right content layout (optional minimal) */
.foot-r{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.foot-debug-form{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}


.footer-top{
  height: 20px;
}

.footer-bottom{
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 12px;
}

.foot-l{
  flex: 0 0 auto;
}

.foot-center{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.foot-r{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Favoriten */
.foot-favs{
  display: flex;
  align-items: center;
  justify-content: center;
}

.foot-fav{
  width: 40px;
  height: 40px;
  margin: 0 5px; /* 5 links + 5 rechts */
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}

.foot-fav i,
.foot-fav-fallback{
  font-size: 22px;
  line-height: 1;
}

.foot-debug-form{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Favoriten-Icons aus /global/images */
.foot-fav-img{
  width: 40px;
  height: 40px;
  object-fit: contain; /* bleibt quadratisch, ohne Verzerrung */
  display: block;
}

/* Debug Buttons zweizeilig */
.foot-debug-btn{
  height: 40px;
  min-width: 44px;
  padding: 4px 8px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
  gap: 2px;
}

.foot-debug-btn .dbg-name{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
}

.foot-debug-btn .dbg-state{
  font-size: 12px;
  font-weight: 900;
}


/* Footer Debug Toggles – hoher Kontrast */
.foot-debug-form{
  display:inline-flex;
  gap:8px;
  align-items:center;
  margin-right:12px;
}

.foot-debug-btn{
  appearance:none;
  border:2px solid rgba(0,0,0,.35);
  background:#ffffff;
  color:#111111;
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-width:74px;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}

.foot-debug-btn:hover{
  border-color:rgba(0,0,0,.55);
  box-shadow:0 3px 10px rgba(0,0,0,.14);
}

.foot-debug-btn:disabled{
  opacity:.40;
  cursor:not-allowed;
  box-shadow:none;
}

/* Zeilen */
.foot-debug-btn .dbg-name{
  font-size:12px;
  font-weight:900;
  letter-spacing:.5px;
  line-height:1.05;
  opacity:.95;
}

.foot-debug-btn .dbg-state{
  font-size:12px;
  font-weight:900;
  line-height:1.05;
}

/* Statusfarben */
.foot-debug-btn.is-on{
  border-color:#16a34a;
  background:#f0fdf4;
  color:#14532d;
}

.foot-debug-btn.is-off{
  border-color:#dc2626;
  background:#fef2f2;
  color:#7f1d1d;
}

/* =========================================================
   HARD OVERRIDE: Footer Debug Toggles (Kontrast garantieren)
   ========================================================= */
footer .foot-debug-btn{
  background:#ffffff !important;
  color:#0b0f19 !important;
  border:2px solid rgba(0,0,0,.55) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.18) !important;
}

footer .foot-debug-btn .dbg-name,
footer .foot-debug-btn .dbg-state{
  color: inherit !important;
  opacity: 1 !important;
}

/* Optional: ON/OFF klarer (falls du is-on/is-off Klassen nutzt) */
footer .foot-debug-btn.is-on{
  background:#f0fdf4 !important;
  border-color:#16a34a !important;
  color:#14532d !important;
}

footer .foot-debug-btn.is-off{
  background:#fef2f2 !important;
  border-color:#dc2626 !important;
  color:#7f1d1d !important;
}

/* Footer links zweizeilig */
.foot-l{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  gap:4px;
  text-align:left;
}
.foot-l1{
  font-weight:900;
  font-size:13px;
  opacity:.95;
}
.foot-l2{
  font-weight:700;
  font-size:12px;
  opacity:.9;
}

/* Footer rechts: Toggles + Userbox nebeneinander */
.foot-r{
  display:flex;
  align-items:center;
  gap:12px;
}

/* User/Logout zweizeilig */
.foot-userbox{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  line-height:1.1;
  gap:4px;
}
.foot-userline{
  font-weight:900;
  font-size:13px;
  opacity:.95;
}
.foot-logout-link{
  font-size:12px;
  opacity:.95;
}


/* Favoriten + Config-Button als Gruppe */
.foot-center{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px; /* Abstand zwischen Icons und Config */
}

/* Config Button: klein, pillig, nicht wie Icon */
.foot-favs-config{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;

  text-decoration:none;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;

  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.12);
  color: var(--header-col);
}

.foot-favs-config:hover{
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.75);
}