body {

	margin-left: 10px;
	margin-right: 20px;
	background-color: white;
}

h2:not(:first-child) {
	page-break-before: always;
}
.public{
	color:blue;
}
.event{
	font-weight: bold;
	background-color: #f2bd36;
}
.date {
	font-weight: bold;
	font-size: smaller;
	float: right;

}
td {
	vertical-align:top;
	width:16%;
	}
	
 td:first-child {
	width:3%;
	text-align: center;
	vertical-align: middle;
	color: grey;
	
}

table {
	table-layout: fixed;
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
ul {
	padding: 0px;
	margin: 0px;
	margin-left:  1.5em;
	font-size:smaller;
}

.week{
	color:grey;
}
img {
	display: none;
}

/* Zelle */
.cell {
  position: relative;
  padding: .25rem .25rem .25rem .25rem;
}
.cell .date {
  display: block;
  font-size: .8rem;
  color: #666;
  margin-bottom: .15rem;
}

/* Container für Balken */
.bars {
  position: relative;
  width: 100%;
  margin-bottom: .25rem; /* Abstand zur Event-Liste */
}

/* Balkensegmente */
.bar {
  position: absolute;
  left: 2px;
  right: 2px;
  height: 14px;
  line-height: 14px;
  border-radius: 7px;
  background: #e3eefc;            /* Default-Farbe */
  border-left: 6px solid #90c2ff; /* kleine “Leitplanke” links */
  padding-left: 6px;               /* Platz für Label */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Segment-Formen: Start/Mitte/Ende/Single */
.seg-start  { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.seg-mid    { border-radius: 0; border-left-width: 0; padding-left: 0; }
.seg-end    { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.seg-single { /* Einzelloser Wochenbalken innerhalb einer Woche */
}

/* Label nur am Wochenanfang */
.bar-label {
  font-size: .75rem;
  font-weight: 600;
  padding: 0 .25rem;
}

/* Kategorien einfärben (aus TYPE) */
.cat-intern  { background: #E8F5E9; border-color:#81C784; }
.cat-public  { background: #FFF3E0; border-color:#FFB74D; }
.cat-event   { background: #F3E5F5; border-color:#BA68C8; }
.cat-free    { background: #E0F7FA; border-color:#4DD0E1; }

/* Liste der Uhrzeit-Events */
ul.events {
  margin: 0;
  padding-left: 1rem;
}
ul.events li {
  margin: 0;
  line-height: 1.2;
}
/* in calendar_yearly.css ergänzen */
ul.events { list-style: none; margin: 0; padding-left: 0.9rem; }
ul.events li::marker { content: ""; }    /* falls Browser Marker rendert */

/* Container für einen Jahresabschnitt */
.year { display: block; }

/* Eine Woche: KW-Spalte + 7-Tage-Grid nebeneinander */
.week {
  display: grid;
  grid-template-columns: 4.5rem 1fr; /* links KW, rechts die 7 Tage */
  gap: .25rem 0.5rem;
  margin-bottom: .75rem;
}

/* KW-Box */
.kw {
  font-weight: 700;
  text-align: right;
  padding-right: .5rem;
}

/* 7-Tage-Grid (Spalten) + Lanes (Zeilen) für Balken als Overlay-Layer */
.week-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* Erst die Lanes für Balken, darunter (visuell) die Tagesinhalte */
  grid-auto-rows: 18px;                       /* Lane-Höhe (zu PHPs $laneHeight) */
  min-height: calc(var(--lane-rows, 0) * 18px + 1.5rem); /* Platz für Balken + Datum/Events */
}

/* Tageszellen als "Unterbau" – sie sollen unter den Bars liegen */
.day {
  position: relative;
  display: flex;
  align-items: flex-end;   /* Datum/Events unten ansetzen */
  border: 1px solid #eee;
  min-height: 4.5rem;
  padding-top: calc(var(--lane-rows, 0) * 18px + .25rem); /* Platz für Bars oben */
  background: #fff;
}

/* Inhalt einer Zelle */
.cell { width: 100%; padding: .25rem; }
.cell .date { display:block; font-size:.8rem; color:#666; margin-bottom:.15rem; }

/* Events-Liste */
ul.events { list-style: none; margin: 0; padding-left: .9rem; }
ul.events li { margin: 0; line-height: 1.2; }
ul.events li::marker { content: ""; }

.week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(var(--lane-rows, 0), 18px) auto; 
  /* erst die Balken-Zeilen, dann eine große Zeile für die Tagesinhalte */
  position: relative;
  border: 1px solid #ddd;
}

.day {
  border: 1px solid #eee;
  background: #fff;
  padding: .25rem;
}

/* Jede .day landet automatisch in der letzten Zeile (Events-Zeile) */
.week-grid .day {
  grid-row: calc(var(--lane-rows, 0) + 1);
}

/* Balken (liegen in den ersten Lane-Zeilen) */
.week-grid > .bar {
  height: 16px;
  line-height: 16px;
  border-radius: 8px;
  background: #e3eefc;
  border-left: 6px solid #90c2ff;
  padding-left: 6px;
  white-space: nowrap;
  z-index: 2;
  margin: 1px 2px;
}

.bar-label {
  font-size: .78rem;
  font-weight: 600;
  padding: 0 .35rem 0 .15rem;
}