@font-face {
  font-display: swap;
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/webfonts/funnel-display-v3-latin-regular.woff2') format('woff2'),
       url('/assets/webfonts/funnel-display-v3-latin-regular.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 500;
  src: url('/assets/webfonts/funnel-display-v3-latin-500.woff2') format('woff2'),
       url('/assets/webfonts/funnel-display-v3-latin-500.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/webfonts/funnel-display-v3-latin-600.woff2') format('woff2'),
       url('/assets/webfonts/funnel-display-v3-latin-600.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/webfonts/funnel-display-v3-latin-700.woff2') format('woff2'),
       url('/assets/webfonts/funnel-display-v3-latin-700.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 800;
  src: url('/assets/webfonts/funnel-display-v3-latin-800.woff2') format('woff2'),
       url('/assets/webfonts/funnel-display-v3-latin-800.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Funnel Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/webfonts/funnel-sans-v3-latin-regular.woff2') format('woff2'),
       url('/assets/webfonts/funnel-sans-v3-latin-regular.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Funnel Sans';
  font-style: normal;
  font-weight: 500;
  src: url('/assets/webfonts/funnel-sans-v3-latin-500.woff2') format('woff2'),
       url('/assets/webfonts/funnel-sans-v3-latin-500.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Funnel Sans';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/webfonts/funnel-sans-v3-latin-600.woff2') format('woff2'),
       url('/assets/webfonts/funnel-sans-v3-latin-600.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Funnel Sans';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/webfonts/funnel-sans-v3-latin-700.woff2') format('woff2'),
       url('/assets/webfonts/funnel-sans-v3-latin-700.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Funnel Sans';
  font-style: normal;
  font-weight: 800;
  src: url('/assets/webfonts/funnel-sans-v3-latin-800.woff2') format('woff2'),
       url('/assets/webfonts/funnel-sans-v3-latin-800.woff') format('woff');
}

/* Typography */
h1 { font-size: 1.2rem; margin-bottom: 0.3rem;}
html, body { min-height: 100%; margin: 0;}
body { font-family: 'Funnel Sans'; font-size: 1rem; line-height: 1.3; background-color: #f4f6f8;}

/* Layout */
.app { display: flex; min-height: 100vh;}

/* Sidebar */
.sidebar { width: 80px;flex: 0 0 80px; background: linear-gradient(160deg,rgb(5, 73, 104) 0%, rgb(0, 125, 119) 100% ); transition: width .3s ease, flex-basis .3s ease; }
.sidebar.open { width: 250px; flex-basis: 250px;}

/* Logo */
.logo {height: 63px; margin-bottom: 0.5rem; display: flex; align-items: center; border-bottom: 1px solid #ffffff32; background: transparent; cursor: pointer; border-right: 0; border-top: 0; border-left: 0;}
.logo-small { display: block; width: 26px;}
.logo-full { display: none;}
.sidebar.open .logo-small {display: none;}
.sidebar.open .logo-full {display: block; width: 40%;}

/* Navigation */
.sidebar { display: flex;flex-direction: column;}
.sidebar #hnav {flex: 1;}
.sidebar #hnav ul {list-style: none;}
/* geschlossen */
.sidebar:not(.open) #hnav a,
.sidebar:not(.open) .newlink {display: flex;align-items: center; justify-content: center; width: 64px; height: 44px; margin: 0.3rem auto; padding: 0; color: #fff; text-decoration: none; transition: background .4s ease, border-radius .4s ease;}
/* geöffnet */
.sidebar.open #hnav a,
.sidebar.open .newlink { display: flex; align-items: center; justify-content: flex-start; margin: 0.3rem 0.9rem; padding: 0.6rem 0.5rem; color: #fff; text-decoration: none; transition: background .4s ease, border-radius .4s ease;}
.sidebar.open .newlink {margin: 1.3rem 0.9rem;}
.sidebar:not(.open) .newlink {margin: 1.3rem auto;}
/* Icon */
.sidebar #hnav i, .sidebar .newlink i { width: 24px; min-width: 24px; text-align: center;}
/* Label */
.sidebar #hnav .label, .sidebar .newlink .label { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 0; opacity: 0; margin-left: 0; transform: translateX(-8px); transition: max-width .3s ease, opacity .2s ease, transform .3s ease, margin-left .3s ease;}
.sidebar.open #hnav .label, .sidebar.open .newlink .label { max-width: 180px; opacity: 1; margin-left: .5rem; transform: translateX(0); }
/* Hover / Active */
.sidebar #hnav li.active a,
.sidebar #hnav a:hover,
.sidebar #hnav a:focus,
.sidebar #hnav a.trail,
.sidebar .newlink:hover,
.sidebar .newlink:focus { background: #ffffff24; border-radius: 4px;}
/* Neuer Link unten */
.sidebar .newlink { position: relative; margin-top: auto; background: #ffffff24; border-radius: 4px; border: 1px solid #ffffff32;}
/* Trennlinie oberhalb, ohne die Button-Optik kaputtzumachen */
.sidebar .newlink::before { content: ""; position: absolute; top: -1rem; left: -0.9rem; right: -0.9rem; border-top: 1px solid #ffffff32;}

/* Content */
main { flex: 1; min-width: 0;}
.badge, span.small {padding: 0; color: #5a7080; background: none; font-weight: 400; font-size: 0.9rem; letter-spacing: 0.1rem;}
span.small {letter-spacing: inherit;}
.amount {font-size: 2.5rem; font-weight: 600; color: #212529;}

.table td, .table th { padding: 0.8rem 1rem ;}
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0;}
.table tbody th { font-weight: 400 !important; color: #007d77; padding: 1rem;}
.table thead th { background-color: #e8f0f4;text-transform: uppercase; font-weight: 400; color: #5a7080; letter-spacing: 0.05rem; font-size: 0.85rem;}
td.active-link::before, td.inactive-link::before, .dot-green::before, .dot-blue::before, .dot-yellow::before, .dot-red::before {content: ''; display: inline-block; width: 0.4rem; height: 0.4rem; background-color: #007d77; border-radius: 50%; margin-right: 0.4rem; vertical-align: middle;}
.dot-blue::before {background-color: #0dcaf0;}
.dot-yellow::before {background-color: #ffc107;}
td.inactive-link::before, .dot-red::before {background-color: #c41e1e;}
td.active-link {color: #007d77;}
td.inactive-link {color: #c41e1e;}
.table td, .text-soft {color: #5a7080;}
.form-check-input:focus { outline: 0; box-shadow: 0 0 0 .25rem #007d7734!important;}

#createnew {display: none;}

.form-check-input:checked { background-color: #007d77; border-color: #007d77;}
.delete {color: #c41e1e;}
.edit {color: #e9a41b;}
.badge-table {background-color: #e8f0f4; padding: 0.2rem 0.7rem; border-radius: 4px; font-size: 0.9rem;}
.copy-link::after, .extern-link::after { content: '\f0c5'; font-family: "Font Awesome 7 Pro"; font-weight: 400; font-size: 0.9rem; color: #fff; margin-left: .5rem;}
.extern-link::after {content: '\f08e';}
.copy-link:hover::after, .extern-link:hover::after {color: #5a7080;}

.progress {height: 0.3rem;}
.progress .progress-bar {border-radius: 15px;}


/*Breakpoints*/
@media (max-width: 1399.98px) {
.amount {font-size: 2.1rem;}
.badge, span.small {font-size: 0.8rem;}
}

@media (max-width: 1199.98px) {

}

@media (max-width: 991.98px) { 

}

@media (max-width: 767.98px) { 

}

@media (max-width: 575.98px) {

}

@media (max-width: 459.98px) { 

}

@media (max-width: 399.98px) { 

}