@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Zalando+Sans+Expanded:ital,wght@0,200..900;1,200..900&display=swap');

:root {
   line-height: 1.5;
  font-weight: 400;
    --bs-border-color: #000000;
  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;
  --bs-primary-rgb: 0,0,0;
  --bs-primary-bg: #252a42;
  --bs-primary-hover-bg: #131622;
  --bs-secondary-color: #000000;
   font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body{
    background-image: url(https://www.onezerobank.com/Content/images/unsub/big.png);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
}


.accordion{
  --bs-accordion-active-bg: #dddddd;
  --bs-accordion-active-color: #000000;

}
.form-check-input:checked
 {
    background-color: #111111;
    border-color: #000000;
}

.list-group-item.active{
    background-color: #ddd !important;
    border-color: #000000!important;
    color: #000000!important;
}

.dropdown-menu{
  --bs-dropdown-bg: #000000;
  --bs-dropdown-link-hover-bg: #111111;
  --bs-dropdown-color: #fff;
  --bs-dropdown-link-color: #fff;
  --bs-dropdown-link-active-bg: #111111;
}
.btn{

  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1em;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
      font-family: "Zalando Sans Expanded", sans-serif;
    /*  box-shadow: 6px 6px 0 #000000;
      --bs-btn-border-radius: 2rem;
  transform: skewX(-15deg);*/
        transition: 0.5s;
    border-width: 2px;
}
.btn:hover{
      /* box-shadow: 6px 6px 0 #131622; */

}
 /* 
.btn span{
   transform: skewX(15deg);

}

.form-check-input{
     box-shadow: 6px 6px 0 #000000;
   }

  .form-check-input:checked{
     box-shadow: 6px 6px 0 #59d81e;
   }
*/
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary-bg);
    --bs-btn-border-color: var(--bs-primary-bg);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary-bg);
    --bs-btn-hover-border-color: var(--bs-primary-bg);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary-bg);
    --bs-btn-active-border-color: var(--bs-primary-bg);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0d6efd;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-primary-bg);
    --bs-gradient: none;
}
a {
  font-weight: 500;
  color:var(--bs-primary-bg);
  text-decoration: inherit;
}
a:hover {
  color: var(--bs-primary-hover-bg);
}
/*.btn-primary{
  --bs-btn-bg: #ffcb77;
     --bs-btn-color: var(--bs-primary-bg) !important;
    --bs-btn-border-color: var(--bs-primary-bg);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg:  var(--bs-primary-hover-bg);
    --bs-btn-hover-border-color: var(--bs-primary-hover-bg);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary-hover-bg);
    --bs-btn-active-border-color: var(--bs-primary-hover-bg);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-primary-bg);
    --bs-btn-disabled-border-color: var(--bs-primary-bg);
 
}*/


:root,
[data-bs-theme="light"] {
  /* Brand */
  --brand-purple: #38003c;
  --brand-green: #00ff85;
  --brand-cyan:  #04f5ff;

  /* Light UI */
  --bs-body-bg: #ffffff;
  --bs-body-color: #1b001d;

  --bs-primary: var(--brand-purple);
  --bs-secondary: #2a2a2e;
  --bs-success: var(--brand-green);
  --bs-info: var(--brand-cyan);

  --bs-link-color: #000;
  --bs-link-hover-color: #222;

  --bs-border-color: #9d8fa7;
  --bs-secondary-bg: #f6f2f8;

  /* Focus ring (Bootstrap uses RGB vars) */
  --bs-primary-rgb: 56, 0, 60;
  --bs-success-rgb: 0, 255, 133;
  --bs-info-rgb: 4, 245, 255;
  --bs-link-color-rgb: 4, 245, 255;

  --bs-focus-ring-color: rgba(4, 245, 255, 0.35);
}

/* Dark theme */
[data-bs-theme="dark"] {
  --brand-purple: #38003c;
  --brand-green: #00ff85;
  --brand-cyan:  #04f5ff;

  --bs-body-bg: #1b001d;
  --bs-body-color: #ffffff;

  --bs-primary: #4a0a50;       /* lite ljusare lila för dark */
  --bs-secondary: #2a2a2e;
  --bs-success: var(--brand-green);
  --bs-info: var(--brand-cyan);

  --bs-link-color: var(--brand-cyan);
  --bs-link-hover-color: #37f8ff;

  --bs-border-color: #3a3a40;
  --bs-secondary-bg: #1f1f23;

  --bs-primary-rgb: 74, 10, 80;
  --bs-success-rgb: 0, 255, 133;
  --bs-info-rgb: 4, 245, 255;
  --bs-link-color-rgb: 4, 245, 255;

  --bs-focus-ring-color: rgba(0, 255, 133, 0.25);
}

/* Buttons */
.btn-primary {
  --bs-btn-bg: var(--brand-purple);
  --bs-btn-border-color: var(--brand-purple);
  --bs-btn-hover-bg: #4a0a50;
  --bs-btn-hover-border-color: #4a0a50;
  --bs-btn-active-bg: #2b002f;
  --bs-btn-active-border-color: #2b002f;
  --bs-btn-focus-shadow-rgb: 4, 245, 255;
}

.btn-success {
  --bs-btn-bg: var(--brand-green);
  --bs-btn-border-color: var(--brand-green);
  --bs-btn-color: #0b0b0c;
  --bs-btn-hover-bg: #33ff9f;
  --bs-btn-hover-border-color: #33ff9f;
  --bs-btn-active-bg: #00cc6a;
  --bs-btn-active-border-color: #00cc6a;
  --bs-btn-focus-shadow-rgb: 0, 255, 133;
}

.btn-info {
  --bs-btn-bg: var(--brand-cyan);
  --bs-btn-border-color: var(--brand-cyan);
  --bs-btn-color: #0b0b0c;
  --bs-btn-hover-bg: #37f8ff;
  --bs-btn-hover-border-color: #37f8ff;
  --bs-btn-active-bg: #03c4cc;
  --bs-btn-active-border-color: #03c4cc;
  --bs-btn-focus-shadow-rgb: 4, 245, 255;
}

/* Subtle glow for focus (nice with neon) */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

/* Navbar */
.navbar {
  background: var(--brand-purple);
}
.navbar .navbar-brand,
.navbar .nav-link {
  color: #000;
}
.navbar .nav-link:hover {
  color: var(--brand-cyan);
}

/* Cards / panels (works nicely in dark mode too) */
.card {
  border-color: var(--bs-border-color);
  border: none;
}
.card-img-top{
  min-height: 100px;
  background-color: #00ff85;
}
.card-header {
  border-bottom-color: var(--bs-border-color);
}

/* Badges */
.badge.bg-primary { background-color: var(--brand-purple) !important; }
.badge.bg-success { background-color: var(--brand-green) !important; color: #0b0b0c; }
.badge.bg-info    { background-color: var(--brand-cyan) !important;  color: #0b0b0c; }

body {
    font-family: "Inter", sans-serif;

  margin: 0;
 
}

.mobile-app {
  --mobile-ink: #13051f;
  --mobile-muted: #6b6470;
  --mobile-purple: #3b0756;
  --mobile-purple-soft: #f2e9f8;
  --mobile-green: #168844;
  --mobile-green-soft: #eaf7ee;
  --mobile-amber: #f5a000;
  --mobile-amber-soft: #fff4d8;
  --mobile-red: #df3c3c;
  --mobile-red-soft: #fff0f1;
  --mobile-line: #e8e3eb;
  --mobile-surface: #ffffff;
  --mobile-bg: #f7f8fa;
  min-height: 100vh;
  background: var(--mobile-bg);
  color: var(--mobile-ink);
  padding-bottom: 92px;
}

.mobile-app * {
  letter-spacing: 0;
}

.mobile-page {
   min-height: 100vh;
  background: var(--mobile-surface);
  box-shadow: 0 18px 70px rgba(21, 15, 34, 0.08);
}

.mobile-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 64px;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(232, 227, 235, 0.72);
  backdrop-filter: blur(18px);
}

.mobile-icon-btn {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: var(--mobile-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mobile-title {
  min-width: 0;
  text-align: center;
}

.mobile-title strong {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.15;
}

.mobile-title span {
  display: block;
  color: var(--mobile-muted);
  font-size: 0.82rem;
  line-height: 1.2;
  margin-top: 2px;
}

.mobile-section {
  padding: 18px;
}

.mobile-hero-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.mobile-card {
  background: #fff;
  border: 1px solid var(--mobile-line);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(35, 20, 46, 0.07);
}

.playground-card {
  overflow: hidden;
  border-radius: 8px;
}

.playground-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.playground-card__body {
  padding: 18px;
}

.mobile-h1,
.mobile-app h1.mobile-h1 {
  color: var(--mobile-ink);
  font-family: "Inter", sans-serif;
  font-size: clamp(1.55rem, 6vw, 2.15rem);
  line-height: 1.05;
  font-weight: 850;
  margin: 0;
}

.mobile-h2,
.mobile-app h2.mobile-h2 {
  color: var(--mobile-ink);
  font-family: "Inter", sans-serif;
  font-size: 1.15rem;
  line-height: 1.25;
  font-weight: 850;
  margin: 0;
}

.mobile-label {
  color: var(--mobile-muted);
  font-size: 0.8rem;
  font-weight: 650;
}

.mobile-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mobile-muted);
  font-size: 0.92rem;
}

.mobile-divider {
  height: 1px;
  background: var(--mobile-line);
  margin: 16px 0;
}

.mobile-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 800;
}

.mobile-status--ok,
.mobile-status--active {
  color: #0d6f35;
  background: var(--mobile-green-soft);
  border: 1px solid #a7dfb5;
}

.mobile-status--remark,
.mobile-status--medium,
.mobile-status--warning {
  color: #865600;
  background: var(--mobile-amber-soft);
  border: 1px solid #ffd989;
}

.mobile-status--damage,
.mobile-status--acute,
.mobile-status--danger {
  color: #a11620;
  background: var(--mobile-red-soft);
  border: 1px solid #f2b4b7;
}

.mobile-status--muted,
.mobile-status--neutral {
  color: #5c5961;
  background: #f1f0f3;
  border: 1px solid #dcd8df;
}

.progress-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: #eeeaf1;
  overflow: hidden;
}

.progress-track__bar {
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: var(--mobile-purple);
}

.progress-track__bar--green {
  background: linear-gradient(90deg, #168844, #40b569);
}

.mobile-primary-btn,
.mobile-app .mobile-primary-btn {
  min-height: 52px;
  border: 0;
  border-radius: 8px;
  background: var(--mobile-purple);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  font-family: "Inter", sans-serif;
  font-size: 0.98rem;
  font-weight: 850;
  text-transform: none;
  text-decoration: none;
  letter-spacing: 0;
  box-shadow: 0 12px 24px rgba(59, 7, 86, 0.18);
}

.mobile-primary-btn--green,
.mobile-app .mobile-primary-btn--green {
  background: linear-gradient(180deg, #24a75a, #168844);
  box-shadow: 0 12px 24px rgba(22, 136, 68, 0.2);
}

.mobile-secondary-btn,
.mobile-app .mobile-secondary-btn {
  min-height: 50px;
  border: 1px solid var(--mobile-line);
  border-radius: 8px;
  background: #fff;
  color: var(--mobile-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  font-weight: 760;
  text-transform: none;
  text-decoration: none;
  letter-spacing: 0;
}

.mobile-dashed-btn {
  min-height: 66px;
  border: 1px dashed #cfc8d5;
  border-radius: 8px;
  background: #fff;
  color: var(--mobile-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  font-weight: 720;
}

.mobile-bottom-bar {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 30;
  width: min(560px, 100%);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--mobile-line);
  backdrop-filter: blur(18px);
}

.mobile-bottom-bar a,
.mobile-bottom-bar button {
  border: 0;
  background: transparent;
  min-width: 0;
  min-height: 48px;
  color: #605a66;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 760;
  text-decoration: none;
}

.mobile-bottom-bar .active {
  color: var(--mobile-purple);
}

.accordion-list {
  display: grid;
  gap: 10px;
}

.accordion-row {
  border: 1px solid var(--mobile-line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.accordion-row__head {
  width: 100%;
  min-height: 58px;
  padding: 0 14px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  border: 0;
  background: #fff;
  color: var(--mobile-ink);
  text-align: left;
}

.accordion-row__title {
  min-width: 0;
  font-weight: 850;
}

.count-pill {
  min-width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #efeaf3;
  color: var(--mobile-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  font-size: 0.82rem;
  font-weight: 850;
}

.count-pill--purple {
  background: var(--mobile-purple);
  color: #fff;
}

.control-list {
  border-top: 1px solid var(--mobile-line);
}

.control-row {
  min-height: 54px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid #f0edf2;
}

.control-row:first-child {
  border-top: 0;
}

.status-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.status-dot--ok { background: #349b51; }
.status-dot--remark { background: #f5a000; }
.status-dot--damage { background: #df3c3c; }
.status-dot--muted { background: #a5a2aa; }
.status-dot--empty { background: #fff; border: 1px solid #cfc8d5; }

.status-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.status-choice {
  min-height: 58px;
  border: 1px solid var(--mobile-line);
  border-radius: 8px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 760;
}

.status-choice.is-active.status-choice--ok {
  background: var(--mobile-green-soft);
  border-color: #a7dfb5;
}

.status-choice.is-active.status-choice--remark {
  background: var(--mobile-amber-soft);
  border-color: #ffd989;
}

.status-choice.is-active.status-choice--damage {
  background: var(--mobile-red-soft);
  border-color: #f2b4b7;
}

.photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.photo-tile {
  position: relative;
  border: 1px solid var(--mobile-line);
  border-radius: 8px;
  aspect-ratio: 1.25 / 1;
  overflow: hidden;
  background: #f8f7f9;
}

.photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-tile__remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.photo-add-tile {
  border: 1px dashed #cfc8d5;
  border-radius: 8px;
  aspect-ratio: 1.25 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--mobile-ink);
  background: #fff;
  font-weight: 760;
}

.mobile-form-control,
.mobile-form-select {
  min-height: 48px;
  border: 1px solid #d9d3df;
  border-radius: 8px;
  background: #fff;
  color: var(--mobile-ink);
  padding: 10px 12px;
  width: 100%;
}

textarea.mobile-form-control {
  min-height: 96px;
  resize: vertical;
}

.mobile-bottom-actions {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 35;
  width: min(560px, 100%);
  transform: translateX(-50%);
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 24%);
  display: grid;
  gap: 8px;
}

@media (min-width: 700px) {
  .mobile-app {
    padding: 1em;
  }

  .mobile-page {
    border-radius: 1em;
    overflow: clip;
    min-height: calc(100vh - 48px);
  }
}

.controlo-svg {
  animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.85;
  }
}



h1 {
    font-family: "Zalando Sans Expanded", sans-serif;
  font-weight: bold;
  font-size: 2.2em;
  line-height: 1.1;
      color: #10334e;

}
.zalando{
      font-family: "Zalando Sans Expanded", sans-serif;

}
 
@media (prefers-color-scheme: light) {
  :root {
    color: #10334e;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}

/*
@media (prefers-color-scheme: dark) {
  :root {
    --bs-body-bg: none;
    --bs-body-color: #fff;
  }
}*/
 
          .path-0{
            animation:pathAnim-0 4s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
          }
          @keyframes pathAnim-0{
            0%{
              d: path("M 0,400 L 0,75 C 85.52153110047848,68.83732057416267 171.04306220095697,62.674641148325364 273,68 C 374.95693779904303,73.32535885167464 493.3492822966507,90.13875598086125 586,98 C 678.6507177033493,105.86124401913875 745.5598086124402,104.77033492822967 848,103 C 950.4401913875598,101.22966507177033 1088.4114832535886,98.77990430622009 1193,94 C 1297.5885167464114,89.22009569377991 1368.7942583732056,82.11004784688996 1440,75 L 1440,400 L 0,400 Z");
            }
            25%{
              d: path("M 0,400 L 0,75 C 103.26315789473685,69.35406698564594 206.5263157894737,63.70813397129187 311,69 C 415.4736842105263,74.29186602870813 521.1578947368421,90.52153110047847 599,90 C 676.8421052631579,89.47846889952153 726.8421052631578,72.20574162679426 812,75 C 897.1578947368422,77.79425837320574 1017.4736842105265,100.65550239234449 1128,104 C 1238.5263157894735,107.34449760765551 1339.2631578947367,91.17224880382776 1440,75 L 1440,400 L 0,400 Z");
            }
            50%{
              d: path("M 0,400 L 0,75 C 94.42105263157893,86.04306220095694 188.84210526315786,97.08612440191386 283,88 C 377.15789473684214,78.91387559808614 471.0526315789474,49.69856459330145 559,56 C 646.9473684210526,62.30143540669855 728.9473684210526,104.11961722488037 829,102 C 929.0526315789474,99.88038277511963 1047.157894736842,53.822966507177036 1152,42 C 1256.842105263158,30.177033492822964 1348.421052631579,52.588516746411486 1440,75 L 1440,400 L 0,400 Z");
            }
            75%{
              d: path("M 0,400 L 0,75 C 65.29186602870809,89.33492822966508 130.58373205741617,103.66985645933015 236,93 C 341.41626794258383,82.33014354066985 486.9569377990432,46.655502392344495 591,50 C 695.0430622009568,53.344497607655505 757.5885167464114,95.70813397129186 853,109 C 948.4114832535886,122.29186602870814 1076.688995215311,106.51196172248804 1180,96 C 1283.311004784689,85.48803827751196 1361.6555023923445,80.24401913875599 1440,75 L 1440,400 L 0,400 Z");
            }
            100%{
              d: path("M 0,400 L 0,75 C 85.52153110047848,68.83732057416267 171.04306220095697,62.674641148325364 273,68 C 374.95693779904303,73.32535885167464 493.3492822966507,90.13875598086125 586,98 C 678.6507177033493,105.86124401913875 745.5598086124402,104.77033492822967 848,103 C 950.4401913875598,101.22966507177033 1088.4114832535886,98.77990430622009 1193,94 C 1297.5885167464114,89.22009569377991 1368.7942583732056,82.11004784688996 1440,75 L 1440,400 L 0,400 Z");
            }
          }
          .path-1{
            animation:pathAnim-1 4s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
          }
          @keyframes pathAnim-1{
            0%{
              d: path("M 0,400 L 0,175 C 70.14354066985646,181.01913875598086 140.28708133971293,187.03827751196172 240,184 C 339.7129186602871,180.96172248803828 468.9952153110049,168.86602870813397 577,163 C 685.0047846889951,157.13397129186603 771.7320574162678,157.4976076555024 877,162 C 982.2679425837322,166.5023923444976 1106.0765550239234,175.14354066985646 1203,178 C 1299.9234449760766,180.85645933014354 1369.9617224880383,177.92822966507177 1440,175 L 1440,400 L 0,400 Z");
            }
            25%{
              d: path("M 0,400 L 0,175 C 109.26315789473685,176.9043062200957 218.5263157894737,178.80861244019138 314,175 C 409.4736842105263,171.19138755980862 491.1578947368421,161.66985645933013 588,153 C 684.8421052631579,144.33014354066987 796.8421052631579,136.51196172248802 879,138 C 961.1578947368421,139.48803827751198 1013.4736842105262,150.28229665071768 1102,158 C 1190.5263157894738,165.71770334928232 1315.2631578947369,170.35885167464116 1440,175 L 1440,400 L 0,400 Z");
            }
            50%{
              d: path("M 0,400 L 0,175 C 73.77033492822966,182.444976076555 147.54066985645932,189.88995215311004 247,183 C 346.4593301435407,176.11004784688996 471.6076555023924,154.88516746411483 586,143 C 700.3923444976076,131.11483253588517 804.0287081339713,128.56937799043064 900,144 C 995.9712918660287,159.43062200956936 1084.2775119617224,192.83732057416267 1173,201 C 1261.7224880382776,209.16267942583733 1350.8612440191387,192.08133971291866 1440,175 L 1440,400 L 0,400 Z");
            }
            75%{
              d: path("M 0,400 L 0,175 C 65.55980861244021,162.70334928229664 131.11961722488041,150.4066985645933 244,156 C 356.8803827751196,161.5933014354067 517.0813397129186,185.07655502392345 612,193 C 706.9186602870814,200.92344497607655 736.555023923445,193.28708133971293 811,181 C 885.444976076555,168.71291866028707 1004.6985645933014,151.7751196172249 1117,150 C 1229.3014354066986,148.2248803827751 1334.6507177033493,161.61244019138755 1440,175 L 1440,400 L 0,400 Z");
            }
            100%{
              d: path("M 0,400 L 0,175 C 70.14354066985646,181.01913875598086 140.28708133971293,187.03827751196172 240,184 C 339.7129186602871,180.96172248803828 468.9952153110049,168.86602870813397 577,163 C 685.0047846889951,157.13397129186603 771.7320574162678,157.4976076555024 877,162 C 982.2679425837322,166.5023923444976 1106.0765550239234,175.14354066985646 1203,178 C 1299.9234449760766,180.85645933014354 1369.9617224880383,177.92822966507177 1440,175 L 1440,400 L 0,400 Z");
            }
          }
          .path-2{
            animation:pathAnim-2 4s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
          }
          @keyframes pathAnim-2{
            0%{
              d: path("M 0,400 L 0,275 C 73.03349282296651,267.76555023923447 146.06698564593302,260.53110047846894 245,257 C 343.933014354067,253.46889952153109 468.7655502392346,253.6411483253588 563,259 C 657.2344497607654,264.3588516746412 720.8708133971293,274.90430622009575 820,276 C 919.1291866028707,277.09569377990425 1053.7511961722487,268.74162679425837 1163,267 C 1272.2488038277513,265.25837320574163 1356.1244019138758,270.12918660287085 1440,275 L 1440,400 L 0,400 Z");
            }
            25%{
              d: path("M 0,400 L 0,275 C 104.31578947368422,262.89473684210526 208.63157894736844,250.78947368421052 314,258 C 419.36842105263156,265.2105263157895 525.7894736842105,291.7368421052632 617,301 C 708.2105263157895,310.2631578947368 784.2105263157894,302.2631578947368 860,294 C 935.7894736842106,285.7368421052632 1011.3684210526317,277.2105263157895 1108,274 C 1204.6315789473683,270.7894736842105 1322.3157894736842,272.89473684210526 1440,275 L 1440,400 L 0,400 Z");
            }
            50%{
              d: path("M 0,400 L 0,275 C 117.20574162679424,269.555023923445 234.41148325358847,264.11004784689 312,256 C 389.5885167464115,247.88995215311004 427.5598086124403,237.11483253588517 533,245 C 638.4401913875597,252.88516746411483 811.3492822966506,279.43062200956933 914,279 C 1016.6507177033494,278.56937799043067 1049.043062200957,251.16267942583733 1125,246 C 1200.956937799043,240.83732057416267 1320.4784688995214,257.91866028708137 1440,275 L 1440,400 L 0,400 Z");
            }
            75%{
              d: path("M 0,400 L 0,275 C 101.44497607655498,290.3014354066986 202.88995215310996,305.60287081339715 292,299 C 381.11004784689004,292.39712918660285 457.88516746411494,263.88995215311 560,250 C 662.1148325358851,236.11004784688996 789.5693779904306,236.83732057416267 890,238 C 990.4306220095694,239.16267942583733 1063.8373205741627,240.76076555023926 1151,247 C 1238.1626794258373,253.23923444976074 1339.0813397129186,264.11961722488036 1440,275 L 1440,400 L 0,400 Z");
            }
            100%{
              d: path("M 0,400 L 0,275 C 73.03349282296651,267.76555023923447 146.06698564593302,260.53110047846894 245,257 C 343.933014354067,253.46889952153109 468.7655502392346,253.6411483253588 563,259 C 657.2344497607654,264.3588516746412 720.8708133971293,274.90430622009575 820,276 C 919.1291866028707,277.09569377990425 1053.7511961722487,268.74162679425837 1163,267 C 1272.2488038277513,265.25837320574163 1356.1244019138758,270.12918660287085 1440,275 L 1440,400 L 0,400 Z");
            }
          }

 
.timeline {
  position: relative;
  margin-left: 20px;
  padding-left: 20px;
  border-left: 2px solid #e5e7eb;
}

.timeline-item {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 16px 0;
}

.timeline-marker {
  position: absolute;
  left: -31px;
  top: 20px;
}

.dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #9ca3af;
  display: block;
}

/* Färger per typ */
.dot-action {
  background: #ef4444;
}

.dot-report {
  background: #3b82f6;
}

.dot-inspection {
  background: #10b981;
}

.dot-installation {
  background: #f59e0b;
}

.timeline-content {
  background: #f9fafb;
  border-radius: 8px;
  padding: 4px 12px 16px;
  width: 100%;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.timeline-source {
  font-weight: 600;
  text-transform: capitalize;
}

.timeline-date {
  color: #6b7280;
  white-space: nowrap;
}

.timeline-fieldkey {
  font-size: 0.9rem;
  color: #374151;
}