@media (orientation: portrait) {
  .hide-on-mobile {
    display: none;
  }
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

:root {
  --background: #B9B2A5;
  --background-dark: #A69F94;
  --text: #000;
  --grey: #ccc;
  --green: #00ff36;
  --orange: #FD9233;
  --pink: #FF00BB;
  --purple: #8054F1;
  --padding: 1.5rem;
  --border-width: calc(0.08 * var(--font-size-large));
  --light: rgba(255,255,255,0.5);
  --font-size-default: 4vh;
  --font-size-medium: 3.3vh;
  --font-size-small: 2vh;
  --font-size-large: 15vh;
}
@media (orientation: portrait) {
  :root {
    --font-size-default: 5vw;
    --font-size-medium: 4.4vw;
    --font-size-small: 3.3vw;
    --font-size-large: 20vw;
    --padding: 1rem;
  }
}

html, body {
  padding: 0;
  margin: 0;
  font-family: neue-haas-grotesk-display, sans-serif;
  color: var(--color);
  background: var(--background);
  color: var(--text);
  font-size: 16px;
  overflow: hidden;
}
@media (orientation: portrait) {
  html, body {
    font-size: 18px;
  }
}

.padding {
  padding: var(--padding);
}

.highlight {
  text-decoration: underline;
  text-underline-offset: 0.1em;
  text-decoration-color: var(--orange);
}
.highlight.pink {
  text-decoration-color: var(--pink);
}
.highlight.green {
  text-decoration-color: var(--green);
}
.highlight.purple {
  text-decoration-color: var(--purple);
}

.canvas {
  display: flex;
  flex-direction: column;
  gap: 0em;
  justify-content: space-between;
  z-index: 10;
}
.canvas .bottom {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.canvas .bottom .description {
  margin-bottom: 3rem;
}
.canvas .chart {
  position: relative;
  height: 50dvh;
  width: 100%;
  position: relative;
  margin-top: calc(1.5 * var(--padding));
  margin-bottom: calc(1.5 * var(--padding));
}
@media (orientation: portrait) {
  .canvas .chart {
    height: 45dvh;
    margin-top: calc(1 * var(--padding));
    margin-bottom: calc(1 * var(--padding));
  }
}
.canvas .chart .bar, .canvas .chart .flugverkehr, .canvas .chart .errichtung {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--orange);
  position: absolute;
  right: 0;
  z-index: 100;
  overflow: hidden;
  z-index: -1;
}
.canvas .chart .bar .label, .canvas .chart .flugverkehr .label, .canvas .chart .errichtung .label {
  font-size: var(--font-size-small);
  padding: 0.5em;
  position: absolute;
}
.canvas .chart .flugverkehr {
  background: var(--purple);
  left: var(--border-width);
  overflow: hidden;
  z-index: -1;
}
.canvas .chart .flugverkehr .label {
  white-space: nowrap;
}
.canvas .chart .flugverkehr .bar-inner .icon {
  left: 0;
}
.canvas .chart .errichtung {
  background: var(--green);
  width: 0;
  overflow: hidden;
}
.canvas .chart .mineralisch, .canvas .chart .hybrid, .canvas .chart .holz {
  border-radius: 100%;
  width: 22em;
  height: 22em;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--grey);
  position: absolute;
  right: 15em;
  top: 35%;
  transform: translate3D(50%, -50%, 0) scale(0);
}
.canvas .chart .hybrid {
  width: 14em;
  height: 14em;
  background: var(--purple);
}
.canvas .chart .holz {
  width: 6em;
  height: 6em;
  background: var(--orange);
}
.canvas .chart .line {
  display: inline-block;
  width: var(--border-width);
  height: 100%;
  background: var(--text);
  position: absolute;
}
.canvas .chart .left-line, .canvas .chart .right-line {
  left: 0;
  transform-origin: center center;
  transform: scaleY(0.6);
}
@media (orientation: portrait) {
  .canvas .chart .left-line, .canvas .chart .right-line {
    transform: scaleY(0.4);
  }
}
.canvas .chart .right-line {
  left: unset;
  right: 0;
}

.intro-text p {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: var(--padding);
  padding-bottom: 5rem;
  max-width: 45ch;
  hyphens: manual;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.intro-text p.d0 {
  opacity: 1;
}
@media (orientation: portrait) {
  .intro-text p {
    max-width: none;
    padding-bottom: 4rem;
  }
}
.chart {
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.chart .scroll-down-button {
  opacity: 0;
  position: absolute;
  cursor: pointer;
  z-index: 10000;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  display: flex;
  background: var(--pink);
  text-align: center;
  justify-content: center;
  pointer-events: none;
}
.chart .bar {
  background: var(--orange);
  width: 10%;
  height: 0;
}
.chart .bar-inner {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.chart .bar-inner .icon {
  position: absolute;
  bottom: 0;
  left: 0.5rem;
}
.chart .bar-inner .icon img {
  width: 2.5rem;
  height: 2.5rem;
}
.chart .flug-bar {
  width: 10%;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--purple);
}
.chart .flug-bar .bar-inner .icon {
  left: 0rem;
}
.chart .bau-bar,
.chart .black-bar {
  width: 10%;
  height: 0;
  position: absolute;
  bottom: 0;
  background: var(--green);
}
.chart .black-bar {
  background: var(--text);
}
.chart .bau-bar-1,
.chart .black-bar-1 {
  right: 0;
}
.chart .bau-bar-2,
.chart .black-bar-2 {
  right: 10%;
}
.chart .bau-bar-3,
.chart .black-bar-3 {
  right: 20%;
}
.chart .bau-bar-4 {
  right: 30%;
}

.bg-grey {
  background: var(--grey);
}

.bg-green {
  background: var(--green);
}

.bg-pink {
  background: var(--pink);
}

.bg-purple {
  background: var(--purple);
}

.bg-orange {
  background: var(--orange);
}

.bg-text {
  background: var(--text);
}

p {
  margin-top: 0;
  font-size: var(--font-size-default);
  line-height: 1.1;
  margin-bottom: 0;
}
p.small {
  font-size: var(--font-size-small);
  line-height: 1.2;
}
p.large {
  font-size: var(--font-size-large);
  line-height: 0.9;
}

.button {
  background: var(--background);
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0.5em 1.5em;
  border-radius: 1em;
  color: #000;
  font-size: var(--font-size-medium);
  text-decoration: none;
  cursor: pointer;
  font-size: var(--font-size-small);
}
.button:hover {
  background: var(--pink);
}
.button.active {
  background: var(--background-dark);
}

.home-button {
  display: none;
}

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: calc(1 * var(--padding)) var(--padding);
  background: var(--background);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  z-index: 1000;
  transform: translateY(-100%);
  gap: var(--padding);
  font-size: var(--font-size-small);
}
.top-bar .indicator-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  width: 100%;
  cursor: pointer;
}
.top-bar .button-wrapper {
  white-space: nowrap;
}
.top-bar .indicator {
  margin: 0 0.25em;
  border-left: 1px solid;
  border-right: 1px solid;
  position: relative;
  width: 1em;
  height: 0.75em;
  transform: translateY(-20%);
}
.top-bar .indicator:after {
  content: " ";
  height: 1px;
  background: black;
  position: absolute;
  top: 0.3em;
  left: 0;
  right: 0;
}

/* PROJEKTE */
.chart .axis-label {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-bottom: calc(1 * var(--padding));
  gap: calc(0.5 * var(--padding));
  z-index: 100;
}
.chart .axis-label .left {
  font-size: var(--font-size-medium);
}
.chart .axis-label .right {
  opacity: 0;
}
@media only screen and (max-width: 767.98px) {
  .chart .axis-label {
    flex-direction: column;
  }
  .chart .axis-label > * {
    width: 100%;
    justify-content: flex-start;
  }
}
.chart .svg-paths-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.chart .svg-paths {
  width: 50%;
  transform-origin: center center;
  height: 100%;
}
.chart .svg-paths .svg-base-line {
  stroke: var(--text);
  stroke-width: calc(1.5 * var(--border-width));
  fill: none;
  transform: translateY(calc(0.25 * var(--border-width)));
}
@media (orientation: portrait) {
  .chart .svg-paths .svg-base-line {
    stroke-width: calc(2.2 * var(--border-width));
  }
}
.chart .svg-paths .svg-base-line.svg-base-line-eu {
  stroke-dasharray: 10;
}
@media (orientation: portrait) {
  .chart .svg-paths .svg-base-line.svg-base-line-eu {
    stroke-dasharray: 10 20;
  }
}
.chart .year2030goal {
  transform: translateX(-55%);
  opacity: 0;
  display: inline-block;
  position: absolute;
  font-size: var(--font-size-small);
  text-align: right;
}
.chart .base-line-label {
  display: none;
  position: absolute;
  right: 2rem;
  font-size: var(--font-size-small);
  text-align: right;
  font-weight: bold;
  transform-origin: right;
}
@media (orientation: portrait) {
  .chart .base-line-label {
    right: 0;
  }
}
.chart .chart-area {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5rem;
  right: 2rem;
}
@media only screen and (max-width: 767.98px) {
  .chart .chart-area {
    left: 2.5rem;
    right: 0;
  }
}
.chart .circles {
  position: relative;
  pointer-events: none;
  width: 100%;
  height: 100%;
}
.chart .circle {
  opacity: 0;
  width: 1.3rem;
  height: 1.3rem;
  background: var(--green);
  border-radius: 100%;
  position: absolute;
  transform: translateY(-50%) translateX(-50%);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 2;
}
@media (orientation: portrait) {
  .chart .circle {
    width: 0.8rem;
    height: 0.8rem;
  }
}
.chart .circle:hover, .chart .circle.active {
  width: 2rem;
  height: 2rem;
}
.chart .circle.active {
  border: 5px solid black;
}
.chart .circle.category-holz {
  background: var(--green);
}
.chart .circle.category-hybrid {
  background: var(--purple);
}
.chart .circle.category-mineralisch {
  background: var(--grey);
}
.chart .circle.category-sanierung {
  background: var(--pink);
}
.chart .axis, .chart .ticks {
  opacity: 0;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 100%;
  color: black;
}
.chart .axis.zero, .chart .ticks.zero {
  font-weight: bold;
  z-index: 1000;
}
.chart .axis {
  font-size: var(--font-size-small);
  width: 3em;
  text-align: right;
  padding-right: 1em;
}
.chart .axis > span {
  display: inline-block;
  height: 0;
  position: relative;
}
.chart .axis > span > span {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
}
.chart .x-axis {
  opacity: 0;
  position: absolute;
  bottom: -1rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-small);
}
@media (orientation: portrait) {
  .chart .x-axis {
    display: none;
  }
}
.chart .x-axis .year {
  color: #000;
  position: relative;
}
.chart .x-axis .year:before {
  content: " ";
  border-left: 1px solid #000;
  height: 0.5rem;
  display: block;
  position: absolute;
  left: 50%;
  transform: translateY(-100%);
  top: -0.25rem;
}
.chart .x-axis .year span {
  position: absolute;
  transform: translateX(-50%);
}
.chart .x-axis .year.year2030:before {
  height: calc(50vh + 0.5rem);
}
.chart .ticks {
  position: relative;
  width: 100%;
}
.chart .ticks .tick {
  border-top: 1px solid var(--light);
  height: 0;
}
.chart .ticks .tick.zero {
  border-top: 2px solid white;
}

/* 
.projekte {
	.projekte-chart {
		margin: calc(2*var(--padding)) 0;
		height: 55vh;
		position: relative;
		display: flex;
		flex-direction: row;

		&:before {
			content: 'Netto-CO2-Emissionen in Tonnen';
			position: absolute;
			color: black;
			transform: translateY(-150%);
		}
		.svg-paths {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			resize: both;

			line {
				stroke-width: 3px;
				stroke: #000;
			}
			.eu-line {
				stroke-dasharray: 1%, 1%;
			}

			.grey {
				fill: var(--grey);
			}

			.purple {
				fill: var(--purple);
			}

			.green {
				fill: var(--green);

				&.highlight {
					stroke: var(--background);
					stroke-width: 3px;
					z-index: 100;
				}
			}
		}
		.axis, .ticks {
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			height: 100%;
			color: black;
			&.zero {
				font-weight: bold;
			}
		}
		.axis {
			text-align: right;
			padding-right: 0.5em;
			span {
				display: inline-block;
				height: 1em;
				transform: translateY(-50%);
			}
		} 
		.ticks {
			position: relative;
			width: 100%;
			.tick {
				border-top: 1px solid var(--light);
				height: 1em;
			}
			.tick.zero {
				border-top: 2px solid var(--light);
			}
		}

		.tooltip {
			position: absolute;
			left: 39%;
			top: 48%;
			width: 35vw;
			height: 15vw;

			@include respond-to(portrait) {
				width: 80vw;
				height: 35vw;
				left: 5%;
				top: 20%;
			}
			display: grid;
			grid-template-columns: 1fr 2fr;
			background: var(--background-dark);

			.image {
				aspect-ratio: 1;
				height: 15vw;
				width: 15vw;
				position: relative;
				@include respond-to(portrait) {
					width: 35vw;
					height: 35vw;	
				}
				overflow: hidden;
				img {
					object-fit: cover;
					width: 100%;
					height: 100%;
				}

				.button {
					background: var(--green);
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					text-align: center;
					margin: var(--padding);
				}
			}
			.data {
				padding: var(--padding);
				display: flex;
				gap: 1rem;
				flex-wrap: wrap;
				.title {
					font-size: 2.5em;
					width: 100%;
				}
				.office, .net, .year, .type {
					width: calc(50% - 0.5rem);	
					font-size: 1.5em;
					span {
						display: block;
						font-size: 1rem;
					}
				}
			}
		}
	}
}
*/
hr {
  background: none;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: 1rem 0;
  width: 100%;
}

#sidebar {
  height: 100dvh;
  overflow-y: hidden;
  overflow-x: hidden;
  transform: translateX(100%);
  opacity: 0;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
  position: fixed;
  z-index: 1000;
  background: var(--background-dark);
  top: 0;
  bottom: 0;
  right: 0;
  width: 30vw;
  min-width: 400px;
  font-size: var(--font-size-medium);
  line-height: 1.1;
  letter-spacing: 0;
}
#sidebar.category-holz {
  --highlight: var(--green);
}
#sidebar.category-mineralisch {
  --highlight: var(--grey);
}
#sidebar.category-hybrid {
  --highlight: var(--purple);
}
#sidebar.category-sanierung {
  --highlight: var(--pink);
}
@media (orientation: portrait) {
  #sidebar {
    transform: translateY(100%);
  }
}
#sidebar.open {
  transform: translateX(0) translateY(0);
  opacity: 1;
}
#sidebar .close-sidebar-button {
  cursor: pointer;
  background: none;
  font-size: 3rem;
  line-height: 1;
  font-weight: 200;
  border: 0;
  padding: 0;
  margin: 0;
  position: absolute;
  top: calc(0.5 * var(--padding));
  right: var(--padding);
  color: #000;
}
#sidebar .sidebar-inner {
  height: 100dvh;
  overflow-y: scroll;
  padding: var(--padding);
  padding-top: 2em;
  padding-bottom: 4em;
}
@media (orientation: portrait) {
  #sidebar {
    width: 100%;
    min-width: 0;
  }
}
#sidebar .project-pagination {
  font-size: 1rem;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: var(--padding);
  padding-bottom: calc(1.5 * var(--padding));
  width: 100%;
  display: flex;
  justify-content: space-between;
}
#sidebar .project-pagination .project-next-button,
#sidebar .project-pagination .project-prev-button {
  width: 5em;
  text-align: center;
}
#sidebar .project-pagination .project-next-button {
  margin-right: 20px;
}
#sidebar figure {
  margin: 1rem 0 1rem 0;
  padding: 0;
}
#sidebar .project-image-wrapper {
  aspect-ratio: 4/3;
  overflow: hidden;
  margin-left: calc(-1 * var(--padding));
  margin-right: calc(-1 * var(--padding));
  width: calc(100% + 2 * var(--padding));
  margin-top: 1em;
}
#sidebar .project-image-wrapper.hide {
  display: none;
}
#sidebar .project-image {
  object-fit: cover;
  object-position: center center;
  width: 100%;
  height: 100%;
}
#sidebar .project-image-caption {
  font-size: var(--font-size-small);
}
#sidebar .title {
  display: block;
  font-size: var(--font-size-default);
}
#sidebar .office {
  display: block;
  font-size: var(--font-size-small);
}
#sidebar .type {
  display: block;
}
#sidebar .headline {
  font-size: var(--font-size-small);
  display: block;
  line-height: 1.3;
}
#sidebar .fact-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em;
  margin-top: 1em;
}
#sidebar .download-pdf-link {
  display: inline-block;
  background: var(--highlight);
  margin-top: 1em;
}
#sidebar .download-pdf-link + * {
  margin-top: 1em;
}
#sidebar .download-pdf-link:hover {
  background: var(--background);
}
#sidebar .download-pdf-link.hide {
  display: none;
}
#sidebar .project-prev-button,
#sidebar .project-next-button {
  background: var(--highlight);
}
#sidebar .project-prev-button:hover,
#sidebar .project-next-button:hover {
  background: var(--background);
}

.projects-in-view .circles {
  pointer-events: all;
}
@media (orientation: portrait) {
  .projects-in-view #toolbar .pagination {
    display: none;
  }
}
@media (orientation: portrait) {
  .projects-in-view #toolbar .view {
    display: initial;
  }
}

#toolbar {
  padding: var(--padding);
  padding-bottom: calc(1.25 * var(--padding));
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
#toolbar > * {
  width: 33%;
}
@media (orientation: portrait) {
  #toolbar > * {
    width: 100%;
  }
}
#toolbar .view {
  opacity: 0;
  text-align: center;
}
@media (orientation: portrait) {
  #toolbar .view {
    display: none;
    width: 100%;
  }
}
#toolbar .pagination .prev-button {
  opacity: 0.25;
}
#toolbar .legende {
  opacity: 0;
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  gap: 1em;
  white-space: nowrap;
}
@media (orientation: portrait) {
  #toolbar .legende {
    display: none;
  }
}
#toolbar .legende .dot {
  width: 0.9em;
  height: 0.9em;
  display: inline-block;
  transform: translateY(10%);
  border-radius: 100%;
  margin-right: 0.15em;
}

.list-view {
  display: none;
  position: fixed;
  padding: var(--padding);
  padding-top: 3rem;
  padding-bottom: 5rem;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100dvh;
  overflow-y: scroll;
  -ms-overflow-x: hidden;
  scrollbar-width: none;
}
.list-view::-webkit-scrollbar {
  display: none;
}
.list-view table {
  padding: 0;
  width: 100%;
}
.list-view table thead {
  position: sticky;
  top: 0;
  background: var(--background);
  z-index: 10;
}
.list-view table td, .list-view table tr, .list-view table th {
  padding-left: 0;
  padding-right: 0.5em;
  text-align: left;
}
.list-view table th {
  font-size: var(--font-size-small);
  font-weight: normal;
  padding-top: 2rem;
  padding-bottom: 1rem;
  padding-right: 1rem;
  border-bottom: 1px solid var(--background-dark);
  vertical-align: bottom;
  white-space: nowrap;
}
@media (orientation: portrait) {
  .list-view table th:nth-child(4), .list-view table th:nth-child(5) {
    display: none;
  }
}
.list-view table td {
  font-size: var(--font-size-medium);
  padding: 1rem 1rem 1rem 0;
  border-bottom: 1px solid var(--light);
  vertical-align: top;
}
@media (orientation: portrait) {
  .list-view table td:nth-child(4), .list-view table td:nth-child(5) {
    display: none;
  }
}
.list-view table .category-holz,
.list-view table .category-mineralisch,
.list-view table .category-hybrid,
.list-view table .category-sanierung {
  --highlight: var(--green);
}
.list-view table .category-holz td:first-child,
.list-view table .category-mineralisch td:first-child,
.list-view table .category-hybrid td:first-child,
.list-view table .category-sanierung td:first-child {
  padding-left: 1.5rem;
  position: relative;
}
.list-view table .category-holz td:first-child:before,
.list-view table .category-mineralisch td:first-child:before,
.list-view table .category-hybrid td:first-child:before,
.list-view table .category-sanierung td:first-child:before {
  content: " ";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 1.5rem;
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  background: var(--highlight);
}
.list-view table .category-mineralisch {
  --highlight: var(--grey);
}
.list-view table .category-hybrid {
  --highlight: var(--purple);
}
.list-view table .category-sanierung {
  --highlight: var(--pink);
}
.list-view table .button:hover {
  background: var(--highlight);
}
.list-view table .office {
  font-size: var(--font-size-small);
  display: block;
}

.h2030 {
  transform: translateX(-0.5%);
}

.has-tooltip {
  position: relative;
}
.has-tooltip:hover {
  background: var(--grey);
}
.has-tooltip:hover .tooltip {
  display: block;
}
.has-tooltip .tooltip {
  display: none;
  position: absolute;
  right: 0;
  top: 2.75em;
  width: 18em;
  text-align: left;
  height: auto;
  padding: var(--padding);
  background: var(--grey);
  z-index: 100000;
}

sub {
  vertical-align: baseline;
  position: relative;
  bottom: -0.1em;
}

/*# sourceMappingURL=app.css.map */