@font-face {
  font-family: 'trattatello';
  src: local('trattatello'),
       url('fonts/Trattatello/web/font/Trattatello.woff2') format('woff2');
}

@font-face {
  font-family: 'Spectral';
  src: url('fonts/Spectral/Spectral-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Spectral';
  src: url('fonts/Spectral/Spectral-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Schrift';
  src: url('fonts/NeueSchrift-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


html, body {
  height: 100%;

  margin: 0;
  padding: 0;
  overflow-x: auto;   /* horizontaler Scroll */
  overflow-y: hidden;   /* vertikaler Scroll */
  background: rgb(255, 255, 255);
  color: black;
  cursor: none;
}

body {
  /* display: flex;
  flex-direction: column; */
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;  /* statt height */
  
}

a {
    text-decoration: none; /* Entfernt die Unterstreichung */
    color: inherit;       /* Übernimmt die Farbe des umgebenden Textes */
}

a:visited {
    color: inherit;       /* Farbe bleibt auch nach Besuch gleich */
}

.fake-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 1px;
  height: 200%;
  background: black;
  pointer-events: none;
  z-index: 21999;
  transform: translate(-100%, -50%);
  rotate: 0deg;
}

.cursor-dot {
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 1px;
  background: black;
  transform: translate(-50%, -50%);
}

.site-title {
  text-decoration: none;
  color: inherit;
  cursor: pointer;

}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 12vh;   /* Höhe des Headers */
  display: flex;
  flex-direction: column;   /* jetzt vertikal stapeln */
  justify-content: center;  /* vertikal zentriert */
  align-items: center;      /* horizontal zentriert */
  z-index: 21002;
}

h1 {
  margin: 0;
  font-size: clamp(2.5rem, 3.8vw, 3.2rem);
  font-family: 'Spectral', serif;
  font-weight: 700;
  color: white;
  -webkit-text-stroke: #000000 1px;
  /* color: black;
  -webkit-text-stroke: 0; */
}

body.marginalized-mode .header h1 {
  text-shadow:
    0 0 6px rgba(0, 0, 0, 0.025),
    0 0 16px rgba(0, 0, 0, 0.015),
    0 0 30px rgba(0, 0, 0, 0.01);
    /* color: #000000bb; */
}

.header-subtitle {
  margin-top: -1rem;
  font-size: clamp(1rem, 1vw, 1.5rem);
  font-family: 'trattatello', sans-serif;
  font-weight: normal;
  flex-direction: column;   /* jetzt vertikal stapeln */
}

.kirby-button {
  display: inline-block;
  padding-left: 1em;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 0.04em;
  color: black;
  font-family: 'trattatello', sans-serif;
}

/* main {
  margin-top: 12vh;          
  height: 100%; 
  min-width: 0; 
  display: grid;
  grid-template-rows: 1fr 10vh;  
  overflow-x: visible;      
} */

main{
  margin-top: 12vh;
  height: calc(100vh - 12vh);   /* ✅ statt 100% */
  min-height: 0;                /* ✅ wichtig für grid/flex */
 display: block;
  grid-template-rows: 1fr 10vh;
    display: flex;              /* ✅ wichtig */
  flex-direction: column;     /* ✅ wichtig */
  overflow: visible;     

}

.timeline-horizontal {
  position: relative;
  /*width: calc(var(--years) * 80px);   breit genug für horizontalen Scroll */
  width: calc(var(--years) * var(--year-width));
  height: auto;       /* füllt die erste Grid-Zeile */
  overflow-x: auto;
  /* overflow-y: visible; */
 
}

.timeline-lane {
  position:relative;
  /* border-top: 1px solid black; */
  overflow: visible;
}

.timeline-lane-label {
  position: fixed; 
  width: 10vh;
  text-align: center;
  left: 0;
  transform: translateX(-100%);
  rotate: -90deg; 
  z-index: 1000;
  /* border: #66ff00 solid 1px; */
  text-shadow: 0px 0px 20px #ffffff, 0px 0px 20px #ffffff,0px 0px 20px #ffffff, 0px 0px 20px #ffffff, 0px 0px 20px #ffffff, 0px 0px 20px #ffffff, 0px 0px 20px #ffffff;
  font-size: clamp(0.9rem, 1vw, 1.2rem);
  font-family: 'Spectral', serif;
  pointer-events: auto;
  background: transparent;
  border: 0;
  cursor: pointer;
 
}

.timeline-container {
  position: relative;
  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0; /* Abstand über margin innerhalb items */
  
  
  /* background-color: #f1d0d0; */
  height: 20vh;
}

:root {
  /* --timeline-axis-offset: 6rem; */
  --drawer-peek: 34px;      /* muss zu deinem PEEK im JS passen */
  --tagtab-h: 34px;          /* wird per JS gemessen */
  /* --drawer-gap: 6px;        */
  --drawer-closed-h: calc(var(--drawer-peek) + var(--tagtab-h) + var(--drawer-gap));
}

/* .timeline-container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--timeline-axis-offset);
  height: 0.15rem;
  
} */


.timeline-title {
  /* padding: 0.5rem 0.8rem; */
  /* font-size: var(--timeline-font-size); */
  cursor: pointer;
  /* font-weight: bold; */
  /* text-shadow: 0 0 20px #ffffff; */
  /* white-space: nowrap;
  user-select: none; */
  background: transparent;
  line-height: 1em;
  border: none;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
  bottom: 100%;
  /* margin-bottom: clamp(0.3rem, 1vh, 0.6rem); */
  align-items: baseline;
  margin-left: -1em;
  font-size: clamp(12px, 0.8vw, 20px);
  font-family: 'Spectral', serif;
  /* outline: 1px solid yellow; */
}

.timeline-title:focus,
.timeline-title:active {
  background: transparent;
  border: none;
}


.timeline-detail {
  display: none;
  margin-top: 0.5rem;
  background: white;
  border: 1px solid black;
  padding: 0.75rem;
  width: 240px;
  position: absolute;
  top: 2.5rem;
  left: 0;
  z-index: 16000;
}


.timeline-item { 
  position: absolute;
  font-size: var(--timeline-font-size);
  left: var(--x);
  top: var(--timeline-axis-offset);  /* vertikale Positionierung entlang der Achse */
  min-width: 1rem;
  height: 1.2rem;
  transform: translateY(var(--y, 0px));
  width: var(--w);
  /* background-color: #ffbf00; */
  border-radius: 2px;

  display: grid;
  
  vertical-align: inherit;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  /* outline: red solid 1px; */
  padding: 0.2rem;
  pointer-events: auto;
  /* bottom: calc(var(--timeline-axis-offset) + var(--y, 0rem)); */
  border-bottom: #000000 solid 1px;
  z-index: 90;
  /* transform: translateX(-50%) translateY(var(--y, 0px)); */
  transition: opacity 0.25s ease;
  /* font-style: italic; */
  /*height: auto;             ✅ WICHTIG */
  white-space: normal;     /* ✅ erlaubt Umbruch */
  opacity: calc(var(--tag-o, 1) * var(--marg-o, 1));
}



.timeline-item.is-open .timeline-detail {
  display: block;
}

.timeline-item.is-dimmed {
  --tag-o: 0.2;
}

.timeline-item.is-active {
  --tag-o: 1;
}


.timeline-year {
  margin-bottom: 0.5rem;
}

:root {
  --timeline-axis-offset: clamp(1rem, 9vh, 9rem);
}

.timeline-item.is-point {
  width: auto;
  max-width: 5em;
  border-bottom: none;
  background-image: none;
  /* color:#ff0000 */
}

.timeline-item.is-point::before {
  display: none;
}

.timeline-item.is-point .timeline-title {
  position: relative;
  display: inline-block;   /* wichtig! */
}


.timeline-item.is-point::after {
  content: "";
  position: absolute;
  transform: none;
  left: calc(0.5px);
  top: 30%;  
  width: 0.1rem;
  height: 0.6rem;
  background: currentColor;
  opacity: 0.8;
}


.timeline-footer {
  position: absolute;
  bottom: 34px;

  align-self: stretch;
  width: 100%;

  overflow: hidden;
  white-space: nowrap;

  background: transparent;   /* kein weißer Balken mehr */
  z-index: 3000;
  pointer-events: none;      /* optional, damit nichts blockiert */

  margin-top: 0;
}


.timeline-footer-bar {
  position: relative;
  width: calc(var(--years) * var(--year-width));
  height: 24px;
  bottom: 0;
  background: transparent; 
}

/* Grundtick: jedes Jahr */
.timeline-footer-tick {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 4px;
  background: black;
  transform: translateX(-50%);
  /* outline: 2px solid red; */
  z-index: 1900;
}

/* alle 5 Jahre */
.timeline-footer-tick.is-five {
  height: 7px;
}

/* Jahrzehnte (optional stärker) */
.timeline-footer-tick.is-decade {
  height: 10px;
}

.timeline-footer-year {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 0.8rem;
  white-space: nowrap;
}

.timeline-footer-year {
  font-size: clamp(0.75rem, 1vw, 0.78rem);
}



/* .marginalized-overlay {
  position: fixed;
  inset: 0;
  background: rgb(255, 255, 255); 
  z-index: 90;
  pointer-events: none;
} */

/* .marginalized-overlay{
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 40000;       
  pointer-events: auto; 
} */

.marginalized-overlay[hidden] {
  display: none;
}

body.marginalized-mode .timeline-item{
  --marg-o: 0.1;
}

body.marginalized-mode .timeline-item[data-marginalized="true"]{
  --marg-o: 1;
}

/* wenn marginalized-mode AUS ist: */
body:not(.marginalized-mode) .timeline-item{
  --marg-o: 1;
}

body.marginalized-mode .timeline-item[data-marginalized="true"] .timeline-title {
  opacity: 1;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 100;

}

/* ==============================
   marginalized overlay dimming
============================== */

/* Standard: alles leicht gedimmt */
#marginalized-overlay .timeline-item,
#marginalized-overlay .m-event {
  opacity: 0.18;
  transition: opacity .2s ease;
}

/* Active: voll sichtbar */
#marginalized-overlay .timeline-item.is-active,
#marginalized-overlay .m-event.is-active {
  opacity: 1;
}

/* Falls du .is-dimmed nutzt: (optional) */
#marginalized-overlay .timeline-item.is-dimmed,
#marginalized-overlay .m-event.is-dimmed {
  opacity: 0.18;
}

.timeline-stage {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;

  display: flex;              /* ✅ wichtig */
  flex-direction: column;     /* ✅ wichtig */

  overflow-x: auto;           /* ✅ HIER horizontal scrollen */
  overflow-y: hidden;         /* ok */

  /* padding-bottom: var(--drawer-closed-h); */
  box-sizing: border-box;
    position: relative; /* <- NEU */

}

.timeline-meta-title {
  display: block;
  font-weight: 600;
  font-size: clamp(0.72rem, 0.9vw, 0.85rem);
  color: black;
  margin-bottom: 0.25rem;
}

.timeline-tags-block,
.timeline-sources-block {
  position: relative;
  z-index: 5;
}

.timeline-caption {
  font-size: clamp(0.72rem, 0.9vw, 0.85rem);
  margin-top: 0.5rem;
  font-style: italic;
  font-family: 'Spectral', serif;
  max-width: 80%;
}

/* FONTSIZE SLIDER */

.slider-container {
  z-index: 21001;
  position: fixed;
  display: flex;
  padding-top: 3rem;
  justify-content: center;
  align-items: center;
  padding-left: 80%;
}

.display-text {
  text-align: center;
  padding-top: 2rem;
}

:root {
  --timeline-font-size: 20px;
}

.timeline-item {
  font-size: var(--timeline-font-size);
}


/* =========================================
   DESKTOP FOCUS: Labels bleiben sichtbar
   (WICHTIG: NICHT die ganze lane ausblenden!)
   ========================================= */

/* body[data-focus] .timeline-lane-label{
  opacity: 0.25;
  pointer-events: auto;
}

body[data-focus] .timeline-container{
  opacity: 0;
  pointer-events: none;
}

body[data-focus="erfindungen"] .timeline-lane[data-category="erfindungen"] .timeline-container,
body[data-focus="kultur"]      .timeline-lane[data-category="kultur"]      .timeline-container,
body[data-focus="politik"]     .timeline-lane[data-category="politik"]     .timeline-container,
body[data-focus="persönlichkeit"] .timeline-lane[data-category="persönlichkeit"] .timeline-container{
  opacity: 1;
  pointer-events: auto;
}

body[data-focus="erfindungen"] .timeline-lane[data-category="erfindungen"] .timeline-lane-label,
body[data-focus="kultur"]      .timeline-lane[data-category="kultur"]      .timeline-lane-label,
body[data-focus="politik"]     .timeline-lane[data-category="politik"]     .timeline-lane-label,
body[data-focus="persönlichkeit"] .timeline-lane[data-category="persönlichkeit"] .timeline-lane-label{
  opacity: 1;
} */

/* =========================================
   DESKTOP FOCUS
   ========================================= */

/* alle Labels erstmal gedimmt, aber klickbar */
body[data-focus] .timeline-lane-label {
  opacity: 0.25;
  pointer-events: auto;
}

/* alle Inhalte aus */
body[data-focus] .timeline-container {
  opacity: 0;
  pointer-events: none;
}

/* nur aktive Kategorie an */
body[data-focus="erfindungen"] .timeline-lane[data-category="erfindungen"] .timeline-container,
body[data-focus="kultur"] .timeline-lane[data-category="kultur"] .timeline-container,
body[data-focus="politik"] .timeline-lane[data-category="politik"] .timeline-container,
body[data-focus="persönlichkeit"] .timeline-lane[data-category="persönlichkeit"] .timeline-container {
  opacity: 1;
  pointer-events: auto;
  position: relative;
  z-index: 300;
}

/* aktives Label */
body[data-focus="erfindungen"] .timeline-lane[data-category="erfindungen"] .timeline-lane-label,
body[data-focus="kultur"] .timeline-lane[data-category="kultur"] .timeline-lane-label,
body[data-focus="politik"] .timeline-lane[data-category="politik"] .timeline-lane-label,
body[data-focus="persönlichkeit"] .timeline-lane[data-category="persönlichkeit"] .timeline-lane-label {
  opacity: 1;
}

/* Optional: weich */
.timeline-container,
.timeline-lane-label{
  transition: opacity 160ms ease;
}

.timeline-container {
  transform: translateY(var(--focus-lane-shift, 0px));
  transition: opacity 160ms ease, transform 160ms ease;
}

/* aktive Lane im Focus visuell nach oben holen */
/* body[data-focus] .timeline-lane .timeline-container {
  transform: translateY(var(--focus-lane-shift, 0px));
} */

/* =============================== */
/* MOBILE TIMELINE (scoped)        */
/* =============================== */

.m-timeline { display: none; }

/* Mobile only */
@media (max-width: 768px) {

  /* Desktop-Timeline ausblenden (NUR mobile!) */
  .timeline-stage { display: none !important; }

  /* Wichtig: scrollbar soll gehen -> wir scrollen in main */
  html, body {
    height: 100%;
    overflow: hidden; /* verhindert doppelt-scroll */
  }



  main {
    height: calc(100vh + 12vh);
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-top: -12vh; /* damit Timeline ganz oben startet */
  }
  main::-webkit-scrollbar { display: none; }

h1 {
  font-size: 3rem;
}


  .header{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 12vh;
    background: transparent;

    /* ✅ Header über ALLEM */
    z-index: 50000;

    /* ✅ eigener Stacking-Context */
    isolation: isolate;
    overflow: visible;
  }



  /* ✅ Fade-Band unter dem Header */
  .header::after{
    content:"";
    position: absolute;
    left: 0; right: 0;
    top: 0;
    height: 22vh;                 /* Fade reicht nach unten */
    pointer-events: none;

    /* ✅ Fade sichtbar + milchig */
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0.95) 0%,
      rgb(255, 255, 255) 40%,
      rgba(255,255,255,0.0) 100%
    );

    /* ✅ WICHTIG: über dem restlichen Content */
    z-index: 1;
  }

  /* Header-Inhalt nochmal über dem Fade */
  .header h1,
  .header .header-subtitle,
  .header a {
    position: relative;
    z-index: 2;
  }


  /* Links bleiben klickbar */
  .header a{
    position: relative;
    z-index: 2;
  }

.m-timeline {
  display: block;
  position: relative;
  height: auto;         /* wichtig */
  min-height: 100%;     /* ok */
  background: rgba(255, 255, 255, 0.865);

}

.m-frame {
  position: relative;
  height: auto;         /* wichtig */
  min-height: 100%;     /* ok */
  padding-bottom: 7vh;
}

  /* 3-Spalten Frame: Rail | Grid | Rail */
  .m-frame {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    gap: 0;
  }

    /* Rails + Inhalte niemals klick-blockierend */
  .m-rail,
  .m-rail-inner,
  .m-rail-inner * {
    pointer-events: none !important;
    z-index: 2;            /* über grid, aber unter header/cats */

  }

  /* Events bleiben klickbar */
  .m-event,
  .m-event * {
    pointer-events: auto;
    
  }

  .m-rail {
    position: relative;
    opacity: 0.8;
    font-family: 'Spectral', serif;
    /* font-size: 0.75rem; */
    font-size: clamp(0.8rem, 2vw, 1.2rem);
    z-index: 10;
    align-self: stretch;
  }

  .m-rail-inner {
    position: relative;
    width: 100%; /* Höhe setzt JS dynamisch */
    
  }

.m-rail-left {
  display: flex;
  justify-content: flex-start;
}

.m-rail-right {
  display: flex;
  justify-content: flex-end;
}

  /* Kategorie-Spalten */
.m-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 1000px; /* wird vom JS überschrieben */
  z-index: 1; 
  /* background-color: aqua; */
}

  .m-col {
    position: relative;
    min-height: 1000px; /* wird von JS überschrieben */
    padding: 0 6px;
  }

  /* Achse pro Kategorie (wie im Wunschbild: Linien nach oben) */
  .m-axis {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgb(0, 0, 0);
    transform: translateX(-50%);
    /* opacity: 0.6; */
  }



  .m-event.is-dimmed{
  opacity: 0.18;
}

.m-event.is-active{
  opacity: 1;
}

  .m-year {
    display: none; /* im Wunschbild stehen Jahre am Rand, nicht am Event */
  }

  .m-title {
  position: relative;
  z-index: 20;

  display: inline-block;   /* <-- wichtig, nicht inline */
  max-width: 12ch;
  box-sizing: border-box;

  background: rgba(255,255,255,0.96);
  border: 0;
  padding: 2px 6px;

  font: inherit;
  font-family: 'Spectral', serif;
  line-height: 1.05;
  font-size: clamp(0.85rem, 2.15vw, 1.15rem);

  white-space: normal;
  word-break: break-word;

  text-shadow: none;
}

  /* Kategorien unten fix im mobilen frame */
  .m-cats {
    position: fixed;
    left: 40px;
    right: 40px;
    bottom: 0;
    height: 7vh;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    text-align: center;
    font-family: 'Spectral', serif;
    border-top: 0;
    /* color: blue; */
    z-index: 100;
    font-size: clamp(0.9rem, 0.95vw, 1.2rem);
    background: transparent; /* wichtig, weil wir das Band per ::before bauen */
  }

    /* ✅ Fade-Band hinter den Kategorien */
  .m-cats::before {
    content: "";
    position: absolute;
    left: -40px;   /* auch unter die Rails ziehen */
    right: -40px;
    bottom: 0;
    height: 23vh;  /* wie weit das Fade nach oben geht */
    pointer-events: none;
    background: linear-gradient(
      to top,
      rgba(255, 255, 255, 0.961) 0%,
      rgba(255, 255, 255, 0.742) 35%,
      rgba(255,255,255,0.0) 100%
    );
  }

  .m-cat {
    position: relative;
    z-index: 1; /* über dem Fade */
    font-size: clamp(1rem, 0.95vw, 1.2rem);
    /* color: aqua; */
    /* opacity: 0.3; */
  }


body[data-focus] .m-cat{
  opacity: 0.3;
  transition: opacity 160ms ease;
}

/* aktive Kategorie */
body[data-focus="erfindungen"] .m-cat[data-cat="erfindungen"],
body[data-focus="kultur"] .m-cat[data-cat="kultur"],
body[data-focus="politik"] .m-cat[data-cat="politik"],
body[data-focus="persönlichkeit"] .m-cat[data-cat="persönlichkeit"]{
  opacity: 1;
}

  /* Jahreslabels am Rand */
  .m-yearlabel {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    transform: translateY(-50%);
    white-space: nowrap;
  }

/* mobile rail ticks */
.m-tick {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 1px;
  background: black;
  /* opacity: 0.8; */
}

/* jedes Jahr */
.m-tick.is-year {
  width: 5px;
  /* opacity: 0.5; */
}

/* alle 5 Jahre */
.m-tick.is-five {
  width: 12px;
  /* opacity: 0.6; */
}

/* Jahrzehnte
.m-tick.is-decade {
  width: 5px;
  opacity: 0.8;
} */

.m-rail-left .m-tick {
  left: 0;
  transform: translateY(-50%);
}

.m-rail-right .m-tick {
  left: auto;
  right: 0;
  transform: translateY(-50%);
}

/* Label */
.m-yearlabel {
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  white-space: nowrap;
  font-size: 0.9em;
  opacity: 0.9;
}



  /* 🔥 alles was wie TAG-Overlay aussieht: weg */
  #alltags,
  #alltags-overlay,
  #alltagsPanel,
  #tags,
  #tags-overlay,
  #tagsPanel,
  .alltags,
  .alltags-overlay,
  .tags,
  .tags-overlay,
  .tag-cloud,
  .tagcloud,
  .tag-bubbles,
  .tagbubble,
  .all-tags,
  [data-overlay*="tag"],
  [class*="alltags"],
  [class*="tag-overlay"],
  [class*="tagcloud"],
  [class*="tag-bubble"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }


  /* mobile timeline IMMER oben */
  .m-timeline {
    display: block !important;
    position: relative !important;
    z-index: 1; 
  }

  .m-timeline,
  .m-frame,
  .m-grid { z-index: 1 !important; }
  /* .m-cats { z-index: 21040 !important; } */


  /* sorgt dafür, dass die Linie “hinter” dem Text liegt */
.m-event.is-range{
  position: absolute;
  left: 50%;
  right: auto;
  width: max-content;
  z-index: 1;
  isolation: isolate;
  pointer-events: none;
  transform:
    translateX(calc(-50% + var(--x-offset)))
    translateY(var(--y-offset));
}

.m-event.is-range::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, 0);
  transform: translateX(calc(-50% + var(--range-x)));
  pointer-events: none;
  z-index: 0;
}

  /* kleine “Caps” oben/unten (optional, aber sieht gut aus) */
.m-event.is-range::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 10px;
  transform: translateX(calc(-50% + var(--range-x)));
  pointer-events: none;
  z-index: 0;
  /* background:
    linear-gradient(rgb(0,0,0), rgb(0,0,0)) top / 100% 0.5px no-repeat,
    linear-gradient(rgb(0,0,0), rgb(0,0,0)) bottom / 100% 0.5px no-repeat; */
}

.m-title {
  position: relative;
  z-index: 20;

  display: inline-block;
  max-width: 16ch;
  box-sizing: border-box;

  background: rgba(255,255,255,0.96);
  border: 0;
  padding: 2px 6px;

  font: inherit;
  font-family: 'Spectral', serif;
  line-height: 1.12;

  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;

  text-shadow: none;
}

    /* Titel wird sticky */
.m-event.is-range .m-title{
  position: sticky;
  top: 33vh;
  z-index: 20;
  background: rgba(255,255,255,0.96);
  padding: 2px 6px;
  transform: translateY(var(--stack-offset, 0px));
  will-change: transform;

  pointer-events: auto;
}

  /* button soll sich wie das alte <div class="m-cat"> verhalten */
  button.m-cat{
    all: unset;                /* 🔥 killt ALLE UA button styles */
    display: block;            /* <div> war block → füllt Grid-Zelle */
    width: 100%;
    height: 100%;
    text-align: center;        /* du hattest text-align:center auf .m-cats */
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 1;
  }

  /* Firefox: entfernt extra inner padding/border */
  button.m-cat::-moz-focus-inner{
    border: 0;
    padding: 0;
  }

  /* optional: wenn du GAR keinen Fokus willst */
  button.m-cat:focus{ outline: none; }

    /* ✅ Focus: Grid wird 1 Spalte */
  body[data-focus] .m-grid{
    grid-template-columns: 1fr !important;
  }

  /* ✅ Focus: alle Spalten verstecken */
  body[data-focus] .m-col{
    display: none !important;
  }

  /* ✅ Focus: nur die gewählte Spalte zeigen */
  body[data-focus="erfindungen"] .m-col[data-cat="erfindungen"],
  body[data-focus="kultur"]      .m-col[data-cat="kultur"],
  body[data-focus="politik"]     .m-col[data-cat="politik"],
  body[data-focus="persönlichkeit"] .m-col[data-cat="persönlichkeit"]{
    display: block !important;
  }

    /* Hauptlinie: wird jetzt horizontal */
  .fake-cursor{
    width: 200%;
    height: 1px;
    transform: translate(-50%, -100%); /* oberhalb vom Finger statt links vom Cursor */
    rotate: 0deg;
  }

  /* der kleine Strich am Cursor: wird jetzt vertikal (wie ein "Tick") */
  .cursor-dot{
    width: 1px;
    height: 12px;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
  }


/* Titel optisch links/rechts ausrichten */
.m-event.is-left  { text-align: right; }
.m-event.is-right { text-align: left;  }

/* bisschen max-width hilft, damit es “am Strich” bleibt */
.m-event .m-title{
  max-width: 12ch;           /* tweak: 10–16ch */
}

/* OVERVIEW: alles was "zu viel" ist, verstecken */
body:not([data-focus]) .m-event.is-overflow{
  opacity: 0;
  pointer-events: none;
}

/* im Focus wieder sichtbar */
body[data-focus] .m-event.is-overflow{
  opacity: 1;
  pointer-events: auto;
}

body[data-focus] .m-col{
  overflow: visible;
}

/* Mobile: Events sitzen auf Achse und werden nur via --x-offset / --y-offset verschoben */
.m-event{
  position: absolute;
  left: 50%;
  right: auto;
  width: max-content;
  max-width: 14ch;
  text-align: center;
  z-index: 1;
  --x-offset: 10px;
  --y-offset: 0px;

  transform:
    translateX(calc(-50% + var(--x-offset)))
    translateY(calc(-50% + var(--y-offset)));
}

.m-event:not(.is-range){
  z-index: 3;
}





  /* optional: links/rechts leicht anders alignen */
  .m-event.is-left  { text-align: right; }
  .m-event.is-right { text-align: left;  }

@media (max-width: 768px) {
  :root{
    /* Höhe deiner Tag-Bar unten – ggf. 56/64/72 testen */
    --tagbar-h: 28px;
  }

  /* Container der Kategorien unten */
  .m-cats,
  .m-catbar,
  .m-categories {
    bottom: calc(var(--tagbar-h) + env(safe-area-inset-bottom)) !important;
  }

  /* falls die einzelnen Buttons fixed/absolute sind */
  .m-cat[data-cat]{
    margin-bottom: 0;
  }

/* =========================================
   MOBILE: im Focus nur noch 1 Kategorie-Button zeigen
   ========================================= */
body[data-focus] .m-cats{
  grid-template-columns: 1fr !important;
}

body[data-focus] .m-cat{
  display: none !important;
}

body[data-focus="erfindungen"] .m-cat[data-cat="erfindungen"],
body[data-focus="kultur"] .m-cat[data-cat="kultur"],
body[data-focus="politik"] .m-cat[data-cat="politik"],
body[data-focus="persönlichkeit"] .m-cat[data-cat="persönlichkeit"]{
  display: block !important;
  opacity: 1 !important;
}

  /* nur im Fokus: Spalte bekommt mehr Innenraum */
  body[data-focus] .m-col{
    padding-left: 18px;
    padding-right: 18px;
  }

  /* optional: Titel dürfen etwas breiter sein → weniger Umbrüche */
  body[data-focus] .m-event{
    max-width: 20ch;   /* vorher 14ch */
  }

    body[data-focus] .m-event{
    left: 52%;   /* oder 48% je nachdem */
  }
  body[data-focus] .m-axis{
    left: 52%;
  }

  /* Wenn NICHT offen: Actions (Alle wählen/abwählen etc.) ausblenden */
.tagDrawer:not(.is-open) #tagAll,
.tagDrawer:not(.is-open) #tagClear,
.tagDrawer:not(.is-open) .tagDrawer__actions,
.tagDrawer:not(.is-open) .tagDrawer__header {
  display: none !important;
}

/* =========================
   MOBILE marginalized mode
   ========================= */

body.marginalized-mode .m-event {
  opacity: 0.12;
  transition: opacity 0.2s ease;
}

body.marginalized-mode .m-event[data-marginalized="true"] {
  opacity: 1;
}

body.marginalized-mode .m-event[data-marginalized="true"] .m-title {
  font-style: italic;
  letter-spacing: 0.02em;
  text-shadow: 0 0 10px rgba(135, 135, 135, 0.8);
  /* outline: 1px solid rgba(173, 8, 8, 0.68); */
}

body.marginalized-mode .m-event[data-marginalized="false"] .m-title {
  font-style: normal;
  letter-spacing: -0.015em;
  opacity: 0.75;
}


}

.overlay-close,
.overlay-close:visited,
.overlay-close:hover,
.overlay-close:active,
.overlay-close:focus {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: transparent;
  color: black;
  -webkit-text-fill-color: black;
  text-decoration: none;
  outline: none;
  box-shadow: none;
}

@media (max-width: 768px) {
  .overlay-close {
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 50010;

    display: inline-block;
    padding: 0.2rem 1rem;

    font-family: 'trattatello', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    line-height: 1.1;

    background: transparent;
    border: none;
    border-radius: 0;
    white-space: nowrap;
  }
}

}

/* ===== DESKTOP TAG DRAWER (layout-neutral) ===== */

/* Backdrop layer (never affects layout) */
.tagDrawer{
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: transparent;
  pointer-events: none;
}

/* backdrop only when open */
.tagDrawer.is-open{
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.003) !important;
}

/* panel is always fixed inside the fixed layer */
.tagDrawer__panel{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: auto;                 /* ✅ wächst nach Inhalt */
  max-height: clamp(220px, 70vh, 85vh); /* ✅ responsiv: min / ideal / max */

  background: rgba(255,255,255,0.98);
  border-top: 1px solid #000;
  border-radius: 6px 6px 0 0;

  display: flex;
  flex-direction: column;
  overflow: hidden;             /* ✅ panel bleibt “clean”, scrollt innen */
  will-change: transform;
  transform: translateY(100%);
  transition: transform 220ms ease;
  pointer-events: auto;
}


  /* Overlay bleibt transparent (sonst: weißer Fullscreen) */
  .tagDrawer{ background: transparent !important; }

  /* Optional: beim Open leichtes Dim */
  .tagDrawer.is-open{
    background: rgba(0, 0, 0, 0.01) !important;
  }

  /* Panel muss wirklich bis unten */
  .tagDrawer__panel{
    bottom: 0 !important;                 /* <- wichtig */
    background: rgba(255,255,255,0.98);   /* weiß gehört hier hin */
    padding-bottom: env(safe-area-inset-bottom);
    max-height: 90dvh;                    /* oder 100dvh */
  }

  /* GANZ wichtig: du hast im Desktop CSS: .is-open bottom: 30px; -> das killt mobile */
  /* .tagDrawer.is-open .tagDrawer__panel{
    bottom: 0 !important;
  } */

  /* Tab auch safe-area korrekt */
  .tagTab{
    bottom: calc(3px + env(safe-area-inset-bottom)) !important;
    font-size: clamp(0.9rem, 0.95vw, 1.05rem);
  }

/* Peek without backdrop */
.tagDrawer.is-peek .tagDrawer__panel{
  transform: translateY(calc(100% - var(--peek, 34px)));
}

/* Open */
.tagDrawer.is-open .tagDrawer__panel{
  transform: translateY(0);
  bottom: 30px;
  background-color: #ffffff;
}

/* Drag = no transition jitter */
.tagDrawer.is-dragging .tagDrawer__panel{
  transition: none !important;
}

/* Handle */
.tagDrawer__handle{
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}
.tagDrawer__handle::before{
  content:"";
  cursor: grab;
  user-select: none;
  touch-action: none;
}


.tagTab{
  font-family: 'trattatello', serif;
  letter-spacing: 0.04em;
  font-size: clamp(1rem, 1.05vw, 1.1rem);
  line-height: 1.3;
  position: fixed;
  left: 50%;
  bottom: 3px;
  transform: translateX(-50%);
  z-index: 10002;     /* über timeline, unter header ok */
  background: rgb(255, 255, 255);
  border: 1px solid #000;
  border-radius: 80%;
  padding: 2px 14px;
  cursor: pointer;
  /* outline: 1px solid pink; */
}


.tagDrawer__list ul li {
  list-style-type: none;
  margin: 0; /* optional, um Abstände zu entfernen */
  padding-top: 0.2rem;
  font-family: 'Spectral', serif;
  font-size: clamp(0.85rem, 2.15vw, 1.15rem);
  font-style: italic;
  align-content: column;
  display: inline-block;
  padding: 0.7rem 1.5rem;
  background-color: #ffffff;
  border: 0.7px solid #000000;
  border-radius: 60%;
}

/* Overlay-Tags als Buttons */
.tagDrawer__list li {
  list-style: none;
  list-style-type: none;
  margin: 0; /* optional, um Abstände zu entfernen */
  padding-top: 0.2rem;
  font-family: 'Spectral', serif;
  font-style: italic;
  align-content: column;
  display: inline-block;
  padding: 0.7rem 1.5rem;
  background-color: #ffffff;
  border: 0.7px solid #000000;
  border-radius: 60%;
  font-size: inherit;
}

.tagDrawer__list li.is-active {
  background: black;
  color: white;
}

.tagDrawer__list li.is-inactive {
  opacity: 0.9;
  background: white;
  outline: 0.7px solid black;
}


button#tagAll,
button#tagClear,
button#tagVisible {
  font-family: 'Spectral', serif;
  border: none;
  background-color: white;
}

/* =================================
   CACHE MISS – Italic + Deconstruction
   ================================= */

/* 1️⃣ Marginalisierte = klare Gegenstimme */
body.marginalized-mode .timeline-item[data-marginalized="true"] .timeline-title{
  font-style: italic;
  letter-spacing: 0.02em;
  opacity: 1;
}

/* 2️⃣ Dominante = strukturell instabil */

body.marginalized-mode .timeline-item[data-marginalized="false"] .timeline-title{
  font-style: normal;
  letter-spacing: -0.015em;
  opacity: 0.8;
  position: relative;
}

/* minimale horizontale Verschiebung */
body.marginalized-mode .timeline-item[data-marginalized="false"]{
  transform: translateY(var(--y)) translateX(-1px);
}

/* Unterlinie schwächer und fragmentierter */
body.marginalized-mode .timeline-item[data-marginalized="false"]{
  border-bottom: 1px solid rgba(0, 0, 0, 0.199);
}

/* Punktmarker ebenfalls schwächer */
body.marginalized-mode .timeline-item[data-marginalized="false"].is-point::after{
  opacity: 0.25;
}

body.marginalized-mode .timeline-item[data-marginalized="false"] .timeline-title{
  display: inline-block;
  transform: skewX(-2deg);
}

/* body.marginalized-mode h1::after{
  content: "SYSTEMATICALLY UNSEEN";
  display: block;
  font-size: 0.25em;
  letter-spacing: 0.15em;
  margin-top: 0.2em;
  font-weight: 400;
} */

.timeline-item.is-span{
  height: auto;          /* bleibt fix */
  overflow: visible;       /* erlaubt Text nach oben */  
  border-bottom: none;      /* falls noch aktiv */
  padding-bottom: 0.05em;   /* Platz für die Linie */
  --span-line-gap: 0.02em;  /* Abstand Text → Linie */
  /* outline: solid 1px greenyellow; */
  display: flex;
  align-items: flex-start;  

}

.timeline-item.is-span::after{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--span-line-gap)); /* ✅ Linie hängt am unteren Rand */
   border-bottom: #000000 solid 1px;
   border-radius: 4px;
  height: 4px;
  pointer-events: none;
    /* OPTIK wie border-bottom */
    
  /* background: rgba(0,0,0,0.65); */

  /* macht die Linie “crisper” */
  transform: translateZ(0);
  pointer-events: none;
}

.timeline-item.is-span .timeline-title{
  position: relative;
  display: inline-block;
  line-height: 1.05;
  background: rgba(255, 255, 255, 0.779);         /* ✅ killt optisch “Durchstreichung”, falls Linie nah kommt */
  padding-bottom: 0.00em;    /* kleiner Puffer */
  /* outline: 1px solid rgb(135, 160, 222); */
}

/* =========================================
   DESKTOP: im Focus nur noch das aktive Lane-Label zeigen
   ========================================= */
/* body[data-focus] .timeline-lane-label{
  display: none;
}

body[data-focus="erfindungen"] .timeline-lane[data-category="erfindungen"] .timeline-lane-label,
body[data-focus="kultur"] .timeline-lane[data-category="kultur"] .timeline-lane-label,
body[data-focus="politik"] .timeline-lane[data-category="politik"] .timeline-lane-label,
body[data-focus="persönlichkeit"] .timeline-lane[data-category="persönlichkeit"] .timeline-lane-label{
  display: block;
} */

@media (min-width: 769px) {
  html, body {
    height: 100%;
    overflow: hidden;
  }

  /* main{
    height: calc(100vh - 12vh);
    overflow: hidden;
  } */

  .timeline-stage{
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0;
    box-sizing: border-box;
  }

/* Wenn NICHT offen: Actions (Alle wählen/abwählen etc.) ausblenden */
.tagDrawer:not(.is-open) #tagAll,
.tagDrawer:not(.is-open) #tagClear,
.tagDrawer:not(.is-open) .tagDrawer__actions,
.tagDrawer:not(.is-open) .tagDrawer__header {
  display: none !important;
}
}

#marginalized-overlay .marginalized-overlay-content{
  position: relative;
  width: 100%;
  height: 100%;
}

@media (min-width: 769px) {

  /* Wenn kein Bild da ist → Bildbereich verstecken */
  #timeline-overlay .overlay-image:empty {
    display: none;
  }

  /* Dann darf die linke Spalte nur so breit sein wie der Button */
  #timeline-overlay .overlay-left:has(.overlay-image:empty) {
    max-width: auto;
    flex: 0 0 auto;
  }

  /* rechter Text rückt nach links */
  #timeline-overlay .overlay-left:has(.overlay-image:empty) + .rechts {
    margin-left: 0;
    max-width: 65ch;
  }

  #timeline-overlay {
    overflow: hidden;
  }

  #timeline-overlay .timeline-overlay-content {
    position: absolute;
    top: 5vh;
    left: 5%;
    right: 5%;

    height: 85vh;          /* wichtig */
    max-height: none;      /* dein altes max-height: 90vh raus */
    overflow: hidden;

    display: flex;
    align-items: flex-start;
    gap: clamp(10px, 1.6vw, 24px);
  }

  #timeline-overlay .overlay-left,
  #timeline-overlay .rechts {
    height: 100%;
    min-height: 0;         /* wichtig bei flex */
  }

  #timeline-overlay .rechts {
    overflow-y: auto;
    overflow-x: hidden;
  }

}


body.marginalized-mode::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 7;
  pointer-events: none;

  /* background-image: url("/media/image/cachemisssu.svg"); */
  background-repeat: no-repeat; 
  /* background-position: center;  */
  /* background-size: fill; */
  background-color: rgba(113, 113, 113, 0.1);

  opacity: 0.05;
}

@media (min-width: 1700px){

.tagDrawer__list ul li {
  list-style-type: none;
  margin: 0; /* optional, um Abstände zu entfernen */
  padding-top: 0.2rem;
  font-family: 'Spectral', serif;
  font-size: 0.9rem;
  font-style: italic;
  align-content: column;
  display: inline-block;
  padding: 0.7rem 1.5rem;
  background-color: #ffffff;
  border: 0.3px solid #000000;
  border-radius: 60%;
}

/* Overlay-Tags als Buttons */
.tagDrawer__list li {
  list-style: none;
  list-style-type: none;
  margin: 0; /* optional, um Abstände zu entfernen */
  padding-top: 0.2rem;
  font-family: 'Spectral', serif;
  font-style: italic;
  align-content: column;
  display: inline-block;
  padding: 0.7rem 1.5rem;
  background-color: #ffffff;
  border: 0.4px solid #000000;
  border-radius: 60%;
}

.tagDrawer__list li.is-inactive {
  opacity: 0.9;
  background: white;
  outline: none;
}
}


@keyframes debugFlicker {
  0%   { opacity: 0.08; }
  10%  { opacity: 1; }
  20%  { opacity: 0.15; }
  30%  { opacity: 1; }
  40%  { opacity: 0.25; }
  50% { opacity: 0.75; }
  60%   { opacity: 0.08; }
  80%  { opacity: 0.25; }
  100% { opacity: 0.75; }
}

.timeline-title.debug-flicker {
  animation: debugFlicker 3s ease forwards;
}

.debug-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;

  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

body.marginalized-mode .debug-overlay{
  display: flex;
  animation: debugOverlayFade 2.2s ease forwards;
}

@keyframes debugOverlayFade{
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

.debug-star{
  width: 300px;
  height: 300px;
  overflow: visible;
}

.debug-star-shape{
  fill: black;
}

.debug-label{
  font-family: 'trattatello', serif;
  font-size: 2rem;
  letter-spacing: 0.12em;
  color: black;
  text-align: center;
}

.cursor-star{
  position: absolute;
  left: 0;
  top: 50%;

  width: 40px;
  height: 40px;

  transform: translate(-50%, -50%);
  pointer-events: none;

  opacity: 0;
}

.cursor-star-shape{
  fill: black;
}

body.title-hover .cursor-star{
  opacity: 1;
}

body.title-hover .cursor-dot{
  opacity: 0;
}

a,
button,
input,
textarea,
select,
.timeline-title,
.m-title,
.timeline-lane-label,
.m-cat,
.kirby-button,
.form-button,
.overlay-button {
  -webkit-tap-highlight-color: transparent;
}

a,
a:visited,
a:hover,
a:active,
a:focus {
  color: inherit;
  text-decoration: none;
  -webkit-text-fill-color: currentColor;
}

button,
input,
textarea,
select {
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.m-title,
.m-cat,
.timeline-title,
.timeline-lane-label,
.kirby-button,
.overlay-button,
.form-button {
  color: black;
  -webkit-text-fill-color: black;
}

#tagTab,
#tagTab:visited,
#tagTab:hover,
#tagTab:active,
#tagTab:focus {
  color: black;
  background: white;
  -webkit-text-fill-color: black;
  text-decoration: none;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.timeline-sources a,
.timeline-sources a:visited,
.timeline-sources a:hover,
.timeline-sources a:active,
.timeline-sources a:focus,
.overlay-sources a,
.overlay-sources a:visited,
.overlay-sources a:hover,
.overlay-sources a:active,
.overlay-sources a:focus {
  color: black;
  -webkit-text-fill-color: black;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

button,
button:visited,
button:hover,
button:active,
button:focus {
  color: black;
  -webkit-text-fill-color: black;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .fake-cursor {
    display: block;
  }
}

@media (hover: none) and (pointer: coarse) {
  .fake-cursor {
    display: none;
  }
}

@media (hover: none) {
  body {
    cursor: auto;
  }
}






@media (max-width: 768px) {
  .overlay-close,
  #overlay-close,
  button.overlay-close,
  button#overlay-close {
    all: unset;
    position: fixed !important;
    left: 50% !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    z-index: 99999 !important;

    display: inline-block !important;
    padding: 0.7rem 1.5rem !important;

    font-family: 'trattatello', sans-serif !important;
    font-size: 1.1rem !important;
    line-height: 1.1 !important;
    letter-spacing: 0.04em !important;

    color: black !important;
    -webkit-text-fill-color: black !important;
    background: #ffffff !important;
    border: 1px solid #000000 !important;
    border-radius: 60% !important;
    letter-spacing: 0.06em;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;

        position: fixed;
  }

  .overlay-close::before,
  .overlay-close::after,
  #overlay-close::before,
  #overlay-close::after,
  button.overlay-close::before,
  button.overlay-close::after,
  button#overlay-close::before,
  button#overlay-close::after {
    content: none !important;
    display: none !important;
  }


  .tagDrawer__panel{
    height: 68dvh !important;
    max-height: 68dvh !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  

  .tagDrawer__handle,
  .tagDrawer__actions{
    flex: 0 0 auto;
  }

  .tagDrawer__scroll{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    height: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: auto;
    padding-bottom: 0 0 24px 0;

    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .tagDrawer__scroll::-webkit-scrollbar{
    display: none;
  }

  .tagDrawer__list{
    margin: 0;
    padding: 0 0 1rem 0;
    height: auto !important;
    overflow: visible !important;
  }

}

@media (min-width: 769px) {
  #tagVisible {
    display: none !important;
  }
}

.overlay-title,
.m-title,
.timeline-title {
  hyphens: manual !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* UNTEN / Overlay / Tag Pills */
.tagSym {
  font-family: 'Neue Schrift' !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant-ligatures: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* OBEN neben Timeline-Titeln */
.timeline-title .tagSup,
.m-title .tagSup {
  display: inline-block;
  font-family: 'Neue Schrift' !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant-ligatures: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;

  font-size: 0.7em;
  vertical-align: super;
  line-height: 1;
  margin-left: 0.15em;
  opacity: 0.85;
}

.timeline-title .tagSupWrap,
.m-title .tagSupWrap {
  margin-left: 0.35em;
  white-space: nowrap;
}

.tagDrawer__list li {
    font-size: clamp(0.95rem, 0.9vw, 1.15rem) !important;
}