/* style.css */
<script src="https://unpkg.com/lucide@latest"></script>
<script>
  lucide.createIcons();
</script>

	body {
		margin: 0;
		padding: 0;
		background-color: green !important;
		color: #f5f5f7;
	}
	
	html, body {
	  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
				   "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	  letter-spacing: -0.2px;
	}
	
	.container {
		max-width: 1300px;
		margin: 0 auto;
		padding: 20px;
	}
	
.site-header { position: sticky; top: 0; z-index: 30; background: #eee; }

.header-container{
  position: relative;                 /* Referenz für absolute Nav */
  max-width: 1300px;                  /* wie .container */
  margin: 0 auto;
  padding: 12px 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;/* Logo | (leer) | leer – egal, Nav wird absolut */
  align-items: center;
  gap: 16px;

  /* Platz für den (fixen) Badge oben rechts, ohne die Mitte zu verschieben */
  padding-right: clamp(110px, 22vw, 240px);
}

.logo { justify-self: start; z-index: 2; }

/* Nav immer exakt geometrisch mittig, unabhängig von Logo/Breite rechts */
.main-nav{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 24px;
  align-items: center;
  white-space: nowrap;
  z-index: 1;
}
.main-nav .nav-link{
  text-decoration: none;
  color: #1d2733;
  font-weight: 600;
}	
	
	header {
		background-color: #e9e9eb;
		color: black;
		padding: 0px 0;
	}
		
	.logo {
		font-size: 1.5em;
		font-weight: bold;
	}
	
	.logo .question {
		color: #ffeb3b;
	}
	
	.nav-link {
		color: black;
		margin-left: 10px;
		text-decoration: none;
		font-weight: 500;
		font-size: 14px;
	}
	
	.nav-link:hover {
		text-decoration: underline;
	}
	
	h1, h2, h3 {
		color: #2c3e50;
		margin-top: 20px;
		font-size: 20px;
	}
	
	ul {
		list-style-type: none;
		padding-left: 0;
	}
	
	li {
		margin: 10px 0;
	}
	
	/*Jetzt starten-Button*/
	
	.button {
		background-color: #4CAF50;
		color: white;
		padding: 10px 20px;
		text-decoration: none;
		border-radius: 20px;
		border-color: black;
		display: inline-block;
		margin-top: 20px;
		transition: background-color 0.3s ease;
	}
	
	.button:hover {
		background-color: #388e3c;
	}
	
	.result-highlight {
		font-weight: bold;
		font-size: 1.1em;
	}
	
	.result-green { color: #9db68c; }
	.result-yellow { color: #ffba6a; }
	.result-red { color: #d87778; }
	
	footer {
		text-align: center;
		font-size: 0.9em;
		color: #888;
		padding: 20px 0;
		margin-top: 40px;
	}
	
	.hero {
		text-align: center;
		margin: 30px auto 30px auto;
		padding-bottom: 15px;
	}
	
	.hero h1 {
		font-size: 2.4em;
		margin-bottom: 10px;
	}
	
	.hero .subtitle {
		font-size: 1.2em;
		color: #555;
		margin-bottom: 35px;
	}
	
	.logo-img {
		height: 32px;
		width: auto;
		display: inline-block;
		vertical-align: middle;
		margin-top: -2px;
	}
	
	/* Eingabefeld:*/
	.form-container {
		max-width: 400px;
		margin: 2rem auto;
		background: white;
		padding: 2rem;
		border-radius: 12px;
		box-shadow: 0 2px 10px rgba(0,0,0,0.1);
		animation: fadeInUp 0.5s ease-out;
		font-size: 14px;
	}
	
	.form-group {
		margin-bottom: 1.5rem;
	}
	
	.form-group label {
		display: block;
		margin-bottom: 0.5rem;
		font-weight: 600;
		font-size: 14px;
	}
	
	.form-group input,
	.form-group select {
		width: 100%;
		padding: 0.6rem;
		border: 1px solid #ccc;
		border-radius: 6px;
		font-size: 14px;
	}
	
	.btn-primary {
		background-color: #4CAF50;
		color: white;
		padding: 0.75rem 1.5rem;
		border: none;
		border-radius: 6px;
		cursor: pointer;
		font-size: 1rem;
		box-shadow: 0 2px 4px rgba(0,0,0,0.2);
		transition: background-color 0.3s ease;
	}
	
	.btn-primary:hover {
		background-color: #45a049;
	}
	
	/* Animation */
	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	.alert-success {
		background-color: #dff0d8;
		color: #3c763d;
		padding: 12px 20px;
		border-radius: 6px;
		margin-bottom: 20px;
		border: 1px solid #c3e6cb;
		animation: fadeInSlideDown 0.5s ease-in-out;
		font-weight: 500;
	}
	
	@keyframes fadeInSlideDown {
		0% {
			opacity: 0;
			transform: translateY(-10px);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	.entry-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin-top: 20px;
		margin-bottom: 30px;
	}
	
	.entry-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding: 12px 16px;
		border-radius: 6px;
		box-shadow: 0 1px 4px rgba(0,0,0,0.05);
	}
	
	.entry-info {
		font-size: 0.95em;
	}
	
	.entry-info .amount {
		color: #2c3e50;
		font-weight: bold;
		font-size: 1.1em;
	}
	
	.button-delete {
		background-color: #e53935;
		color: white;
		padding: 8px 14px;
		border-radius: 4px;
		text-decoration: none;
	}
	
	.button-delete:hover {
		background-color: #c62828;
	}
	
	.entry-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		border-radius: 8px;
		padding: 12px 16px;
		margin-bottom: 10px;
		box-shadow: 0 2px 6px rgba(0,0,0,0.03);
	}
	
	.delete-btn {
		background-color: #e74c3c;
		color: white;
		border: none;
		padding: 8px 12px;
		font-size: 1em;
		border-radius: 6px;
		cursor: pointer;
		transition: background-color 0.2s ease;
	}
	
	.delete-btn:hover {
		background-color: #c0392b;
	}
	
	
	/* Neue Abschnitte für Verbindlichkeiten & Investitionen */
	.fin-section {
		margin-top: 30px;
	}
	
	.fin-section h3 {
		font-size: 1.3em;
		border-left: 4px solid #3f51b5;
		padding-left: 10px;
		margin-bottom: 10px;
	}
	
	.fin-section .entry-box {
		border-left: 4px solid #90a4ae;
	}
	
	
	/* Optimierte Tabelle */
	
	.cashflow-table {
		width: 80%;
		border-collapse: collapse;
		margin-top: 2rem;
		font-size: 14px;
		text-align: left;
	}
	
	.cashflow-table thead {
		background-color: #3446eb;
		color: white;
		font-size: 14px;
	}
	
	.cashflow-table th,
	.cashflow-table td {
		padding: 0.8rem 1rem;
		border: 1px solid #ccc;
		font-size: 14px;
	}
	
	.cashflow-table tbody tr:nth-child(even) {
		background-color: #f9f9f9;
		font-size: 14px;
	}
	
	.cashflow-table tbody tr:nth-child(odd) {
		background-color: #ffffff;
		font-size: 14px;
	}
	
	.cashflow-table td {
		text-align: right;
		font-size: 14px;
	}
	
	.cashflow-table th:first-child,
	.cashflow-table td:first-child {
		text-align: left;
		font-size: 14px;
	}
	
	.kpi-wrapper {
	  max-width: 1300px;
	  margin: 0 auto;
	  padding: 0 1rem;
	}
	
	.kpi-grid {
	  display: grid;
	  gap: 1.5rem;
	  margin-bottom: 30px;
	}
	
	.kpi-grid.kpi-top {
	  grid-template-columns: repeat(3, 1fr);
	}
	
	.kpi-grid.kpi-middle,
	.kpi-grid.kpi-bottom {
	  grid-template-columns: repeat(2, 1fr);
	}
	
	.kpi-card, .card {
	  background-color: #f6f6f6;
	  border: 1px solid rgba(0, 0, 0, 0.1);
	  border-left: 6px solid #4caf50;
	  border-radius: 0.75rem;
	  padding: 7px 5px;
	  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	  text-align: center;
	  font-size: 15px;
	  transition: transform 0.2s ease, box-shadow 0.2s ease;
	}
	
	.kpi-card:hover, .card:hover {
	  transform: translateY(-3px);
	  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
	}
	
	.kpi-red { 
		border-left: 8px solid #d87778;
	}
	.kpi-green {
		border-left: 8px solid #9db68c; 
	}
	.kpi-neutral { 
		border-left: 8px solid #7baac4; 
	}
	.kpi-card.result-green {
		border-left: 8px solid #9db68c; 
	}
	.kpi-card.result-yellow {
		border-left: 8px solid #ffba6a; 
	}
	.kpi-card.result-red {
		border-left: 8px solid #d87778; 
	}
	
	.results-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  flex-wrap: wrap;
	  margin-bottom: 2rem;
	  gap: 1rem;
	}
	
	.results-header h1 {
	  font-size: 1.8rem;
	  color: #6c7c98;
	}
	
	.month-selector label {
	  font-size: 1.1rem;
	  margin-right: 0.5rem;
	}
	
	.month-selector select {
	  padding: 0.6rem 1rem;
	  font-size: 1.1rem;
	  border-radius: 0.5rem;
	  border: 1px solid #ccc;
	  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	  transition: box-shadow 0.2s ease;
	}
	
	.month-selector select:focus {
	  outline: none;
	  box-shadow: 0 0 5px rgba(52, 70, 235, 0.4);
	}
	
	.diagram-toggle {
	  text-align: center;
	  margin-bottom: 1rem;
	}
	
	.diagram-toggle label {
	  margin: 0 1rem;
	  font-size: 14px;
	  cursor: pointer;
	}
	
	.diagram-toggle input[type="radio"] {
	  margin-right: 0.5rem;
	}
	
	.plotly-legend {
	  text-align: center;
	  margin-top: 10px;
	}
	
	/* Bucket-Bereich – optimiert und vereinheitlicht */
	
	.bucket-section {
	  max-width: 1300px;
	  padding-top: 30px;
	  margin: 0 auto;
	}
	
	*, *::before, *::after { box-sizing: border-box; }
	
	.bucket-list {
	  display: flex;
	  flex-direction: column;
	  gap: 1rem;
	}
	
	.bucket-card-income {
	  width: 100%;
	  background-color: white;
	  border-left: 8px solid #7baac4;
	  padding: 0.5rem;
	  border-radius: 10px;
	  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
	  font-size: 10px;
	}
	
	.bucket-card-fix {
	  width: 100%;
	  background-color: white;
	  border-left: 8px solid #d87778;
	  padding: 0.5rem;
	  border-radius: 10px;
	  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
	  font-size: 10px;
	}
	
	.bucket-card-variable {
	  width: 100%;
	  background-color: white;
	  border-left: 8px solid #afa0d0;
	  padding: 0.5rem;
	  border-radius: 10px;
	  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
	  font-size: 10px;
	}
	
	.bucket-card-invest {
	  width: 100%;
	  background-color: white;
	  border-left: 8px solid #9db68c;
	  padding: 0.5rem;
	  border-radius: 10px;
	  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
	  font-size: 10px;
	}
	
	.bucket-header {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  gap: 1rem;
	  padding: 0.5rem;
	  border-radius: 8px;
	  background-color: white;
	  width: 100%;
	  box-sizing: border-box; /* <-- hinzufügen */
	  font-size: 15px;
	}
	
	.bucket-header:hover {
	  background-color: #e0e0e0;
	}
	
	.bucket-emoji {
	  font-size: 1.8rem;
	  margin-right: 1rem;
	  flex-shrink: 0;
	}
	
	.bucket-info {
	  flex-grow: 1;
	  font-size: 15px;
	  line-height: 1.4;
	  min-width: 150px;
	}
	
	.expand-button {
	  flex-shrink: 0;
	  height: 25px;
	  padding: 0.4rem 1rem;
	  font-size: 12px;
	  background-color: #e7defc;
	  border: 1px solid #ccc;
	  border-radius: 6px;
	  cursor: pointer;
	  white-space: nowrap;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  box-sizing: border-box; /* <-- hinzufügen */
	}
	
	.bucket-details-box {
	  background: #fff;
	  border: 1px solid #ccc;
	  border-radius: 10px;
	  padding: 1rem;
	  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
	  display: none; /* initial eingeklappt */
	  margin-top: 1rem;
	  font-size: 14px;
	}
	
	.entry-table {
	  width: 100%;
	  border-collapse: collapse;
	}
	
	.entry-table th,
	.entry-table td {
	  padding: 8px;
	  border-bottom: 1px solid #ccc;
	  text-align: left;
	}
	
	.chart-grid {
	  display: grid;
	  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	  gap: 60px;
	  margin-top: 2rem;
	}
	
	canvas {
	  max-width: 100%;
	  height: auto;
	}
	
	.pie-chart-grid {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: space-between;
	  gap: 60px;
	  margin-top: 2rem;
	}
	
	.chart-section {
	  margin-top: 0rem;
	  padding: 1rem 0;
	}
	
	.pie-row-center {
	  display: flex;
	  justify-content: center;
	  margin-bottom: 2rem;
	}
	
	.pie-row-three {
	  display: flex;
	  justify-content: space-between;
	  flex-wrap: wrap;
	  gap: 1rem;
	}
	
	.pie-chart-container {
	  flex: 1 1 30%;
	  min-width: 200px;
	  max-width: 250px;
	  text-align: center;
	}
	
	.pie-row-center canvas {
	  width: 600px !important;
	  height: auto !important;
	  max-height: 600px;
	}
	
	.pie-chart-container canvas {
	  width: 100% !important;
	  height: auto !important;
	  max-height: 200px;
	}
	
	
	.pie-chart-container {
	  position: relative;
	  margin: 0 auto;
	}
	
	.pie-chart-container.large {
	  width: 400px;
	  height: 400px;
	}
	
	.pie-chart-container.small {
	  width: 250px;
	  height: 250px;
	}
	
	/* NEU */
	
	.chart-row {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  flex-wrap: wrap;
	  gap: 1rem;
	  margin: 0rem auto;
	  margin-bottom: 2rem;
	  width: 1000px;
	}
	
	.chart-center {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  margin-bottom: 1.5rem;
	}
	
	.chart-grid {
	  flex-wrap: nowrap;
	}
	
	.chart-wrapper {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  margin: 0 auto;  /* Damit es mittig ist */
	}
	
	.large-chart-wrapper {
	  width: 350px;
	  height: 350px;
	}
	
	.chart-legend {
	  display: flex;
	  justify-content: center;
	  gap: 1rem;
	  margin-bottom: 2rem;
	}
	
	.chart-legend-item {
	  display: flex;
	  align-items: center;
	  gap: 0.3rem;
	  font-size: 0.9rem;
	}
	
	.chart-legend-color {
	  width: 16px;
	  height: 16px;
	  border-radius: 3px;
	}
	
	#chart-container {
	  border-radius: 15px;       /* Ecken abrunden */
	  overflow: hidden;          /* verhindert, dass Plotly über die Rundung hinausragt */
	  border: 1px solid #ccc;    /* optional Rahmen */
	}
	
	.small-chart-wrapper canvas {
	  max-width: 200px;
	  max-height: 200px;
	  gap: 0.5rem;
	}
	
	/* Visuals */
	
	.visual-cards {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center; /* Zentriert die Karten */
	  gap: 2rem; /* Abstand zwischen den Karten */
	  margin-top: 2rem;
	}
	
	.visual-card {
	  width: 280px;
	  background-color: #f4f6fa;
	  border: 1px solid #ccc;
	  padding: 1.2rem 1rem;
	  border-radius: 0.75rem;
	  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	  text-align: center;
	  display: flex;
	  flex-direction: column;
	  justify-content: flex-start;
	  gap: 0.5rem;
	  position: relative;
	  transition: transform 0.2s ease;
	}
	
	
	
	.visual-card h3 {
	  font-size: 16px;
	  color: #3446eb;
	  margin: 0.2rem auto 0;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  gap: 0.4rem;
	}
	
	.visual-card p {
	  margin: 0.1rem 0;
	  font-size: 14px;
	  line-height: 1.4;
	}
	
	.card {
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 6px rgba(0,0,0,0.05);
		min-width: 160px;
		text-align: center;
		display: flex;
		align-items: center;
	}
	
	.gray-panel {
	  background-color: #f5f5f5;
	  border: 1px solid #ccc;
	  padding: 1.5rem;
	  border-radius: 12px;
	  margin: 2rem auto;       /* auto links/rechts = zentriert */
	  width: 50%;
	  display: flex;
	  flex-direction: column;
	  align-items: center;     /* Inhalt innerhalb mittig */
	}
	
	.cashflow-table {
	  width: 100%;
	  border-collapse: collapse;
	  margin-top: 1rem;
	  text-align: center;      /* Text im Table mittig */
	}
	
	.cashflow-table thead {
	  background-color: #6c7c98;
	  font-size: 14px;
	}
	
	.cashflow-table th,
	.cashflow-table td {
	  padding: 0.75rem 1rem;
	  text-align: left;
	  border-bottom: 1px solid #ddd;
	  font-size: 14px;
	}
	
	.cashflow-table tr.highlight-year {
	  background-color: #d7dbda;
	  color: black;
	  font-weight: bold;
	}
	
	.cashflow-table tr:hover {
	  background-color: #f1f1f1;
	}
	
	.card[data-tooltip] {
	  position: relative;
	}
	
	.card[data-tooltip]::after {
	  content: attr(data-tooltip);
	  position: absolute;
	  white-space: pre-line;
	  background: #E0EEEE;
	  color: #696969;
	  padding: 8px 12px;
	  border-radius: 8px;
	  top: 100%;
	  left: 50%;
	  transform: translateX(-50%);
	  opacity: 0;
	  pointer-events: none;
	  font-size: 1rem;
	  line-height: 1.5rem;
	  width: 260px;
	  z-index: 10;
	  transition: opacity 0.2s ease-in-out;
	}
	
	.card[data-tooltip]:hover::after {
	  opacity: 1;
	}
	
	/* Visuals der Kostentöpfe */
	.progress-bar {
	  width: 100%;
	  height: 12px;
	  background-color: #eee;
	  border-radius: 6px;
	  overflow: hidden;
	  margin-top: 0.5rem;
	}
	
	.progress {
	  height: 100%;
	  background-color: #4caf50;
	  transition: width 0.4s ease;
	}
	
	.comparison-section {
	  margin-top: 2rem;
	  margin-bottom: 1.5rem;
	}
	
	.comparison-header {
	  text-align: center;
	  margin-bottom: 0rem;
	  margin-top: rem;
	}
	
	.section-heading {
	  font-size: 20px;
	  font-weight: bold;
	  text-align: center;
	  margin: 0 auto;
	  border-bottom: 2px solid #ccc;
	  display: inline-block;
	  padding-bottom: 0.3rem;
	  padding-top: 1.5rem;
	}
	
	.visual-cards [title] {
	  pointer-events: none;
	}
	
	.kpi-card[data-tooltip]::after {
	  content: attr(data-tooltip);
	  position: absolute;
	  bottom: 110%;
	  left: 50%;
	  transform: translateX(-50%);
	  background-color: #E0EEEE;
	  color: #696969;
	  padding: 8px 12px;
	  border-radius: 6px;
	  font-size: 1rem;
	  line-height: 1.5rem;
	  white-space: pre-line;
	  opacity: 0;
	  pointer-events: none;
	  transition: opacity 0.3s ease;
	  width: 260px;
	  text-align: center;
	  z-index: 10;
	}
	
	.kpi-card:hover::after {
	  opacity: 1;
	}
	
	.comparison-section .visual-card::after {
	  display: none !important;
	  content: none !important;
	}
	
	.visual-card[data-tooltip] {
	  position: relative;
	  cursor: help;
	}
	
	.visual-card[data-tooltip]::after {
	  content: attr(data-tooltip);
	  position: absolute;
	  bottom: 110%;
	  left: 50%;
	  transform: translateX(-50%);
	  background-color: #E0EEEE;
	  color: #696969;
	  padding: 8px 12px;
	  border-radius: 6px;
	  font-size: 1rem;
	  line-height: 1.5rem; 
	  white-space: pre-line;
	  opacity: 0;
	  pointer-events: none;
	  transition: opacity 0.3s ease;
	  width: 260px;
	  text-align: center;
	  z-index: 10;
	}
	
	.visual-card[data-tooltip]:hover::after {
	  opacity: 1;
	}
	
	.results-header-top {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 2rem;
	  gap: 1rem;
	}
	
	.results-header-controls {
	  display: flex;
	  gap: 1rem;
	  align-items: center;
	}
	
	.results-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  flex-wrap: wrap;
	  margin-bottom: 2rem;
	  gap: 1rem;
	}
	
	
	.results-header-strict {
	text-align: center;
	}
	
	.results-title {
	  font-size: 1.8rem;
	  color: #6c7c98;
	  margin: 10px;
	  flex: 1;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	}
	
	.controls {
		text-align: center;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	
	.controls select {
	  width: 140px;   /* Immer gleiche Breite! */
	  max-width: 140px;
	  padding: 0.5rem 1rem;
	  font-size: 1rem;
	  border-radius: 6px;
	  border: 1px solid #ccc;
	  box-sizing: border-box;
	  font-size: 15px;
	}
	
	.pdf-button {
	  background-color: #4CAF50;
	  color: white;
	  padding: 0.5rem 1.2rem;
	  border: none;
	  border-radius: 20px;
	  cursor: pointer;
	  font-size: 1rem;
	  white-space: nowrap;
	  transition: background-color 0.3s ease;
	}
	
	.pdf-button:hover {
	  background-color: #45a049;
	}
	
	.modal {
	  position: fixed;
	  z-index: 9999;
	  left: 0; top: 0;
	  width: 100%; height: 100%;
	  overflow: auto;
	  background-color: rgba(0,0,0,0.6);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.modal-content {
	  background-color: #fff;
	  padding: 2rem;
	  border-radius: 8px;
	  width: 300px;
	  text-align: center;
	  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
	}
	
	.modal-content input {
	  width: 100%;
	  padding: 0.5rem;
	  margin-top: 1rem;
	  margin-bottom: 1rem;
	}
	
	.modal-content button {
	  padding: 0.5rem 1rem;
	  background-color: #4CAF50;
	  color: white;
	  border: none;
	  border-radius: 6px;
	  cursor: pointer;
	}
	
	.modal-content .close {
	  position: absolute;
	  top: 10px;
	  right: 20px;
	  font-size: 1.5rem;
	  cursor: pointer;
	}
	
	/* Button für Kostentopf erstellen */
	.button-link {
	  display: inline-block;
	  padding: 0.5rem 1rem;
	  background-color: #7baac4;
	  color: white;
	  text-decoration: none;
	  border-radius: 5px;
	  font-weight: bold;
	  transition: background-color 0.3s;
	}
	
	.button-link:hover {
	  background-color: #5d8fa0;
	}
	
	.bucket-row {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 10px;
	  margin-bottom: 20px;
	}
	
	.bucket-card {
	  border: 1px solid #ddd;
	  border-radius: 12px;
	  padding: 16px;
	  flex: 1 1 180px;
	  max-width: 200px;
	  text-align: center;
	  background-color: #fafafa;
	  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
	}
	
	.bucket-emoji {
	  font-size: 32px;
	  margin-bottom: 8px;
	}
	
	.main-container {
	  max-width: 1500px;
	  margin: 0 auto;
	  padding: 20px;
	}
	
	.start-saldo-box {
	  display: flex;
	  align-items: center;
	  gap: 10px;
	  background: #f7f7f7;
	  border: 1px solid #ccc;
	  padding: 10px 20px;
	  border-radius: 10px;
	  width: fit-content;
	  margin: 25px auto;
	  margin-top: 50px; 
	  font-size: 14px;
	}
	
	.start-saldo-input {
	  width: 100px;
	  padding: 5px;
	  border: 1px solid #bbb;
	  border-radius: 4px;
	}
	
	.start-saldo-button {
	  padding: 5px 10px;
	  background-color: #4CAF50;
	  color: white;
	  border: none;
	  border-radius: 4px;
	  cursor: pointer;
	}
	
	/*Videos auf Startseite*/
	
	.video-section {
	  margin-top: 80px;
	  margin-bottom: 20px;
	  text-align: center;
	}
	
	.video-grid {
	  display: grid;
	  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	  gap: 1.5rem;
	  max-width: 1200px;
	  margin: 0 auto;
	  padding: 0 1rem;
	}
	
	.video-box video {
	  width: 100%;
	  height: 100%;
	  display: block;
	  border-radius: 12px;
	  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	  object-fit: cover;
	  background: #000;
	}
	
	/* Reserviert Höhe, auch bevor das Video geladen ist */
	.video-box {
	  aspect-ratio: 16 / 9;
	  position: relative;
	}
	
	.step2-video {
	  text-align: center;
	}
	
	.step2-video .video-box {
	  display: inline-block;
	  width: 50%;
	}
	
	.lightbox {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  z-index: 9999;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.lightbox-backdrop {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  background: rgba(0,0,0,0.85);
	  top: 0;
	  left: 0;
	  z-index: 0;
	}
	
	.lightbox-content {
	  position: relative;
	  max-width: 90%;
	  max-height: 80%;
	  z-index: 1;
	}
	
	.lightbox video {
	  width: 100%;
	  height: auto;
	  border-radius: 12px;
	  box-shadow: 0 0 20px rgba(255,255,255,0.3);
	}
	
	.close-btn {
	  position: absolute;
	  top: -30px;
	  right: 0;
	  font-size: 2rem;
	  color: white;
	  cursor: pointer;
	  z-index: 2;
	}
	
	.hidden {
	  display: none;
	}
	
	.chart-wrapper { text-align: center; }
	.chart-caption { margin-top: .5rem; font-weight: 500; }
	
	/* Kleine Donuts: Canvas oben, Beschriftung darunter */
	.chart-row.small-charts .chart-wrapper {
	  display: flex;
	  flex-direction: column;   /* ⬅️ untereinander statt nebeneinander */
	  align-items: center;
	  justify-content: flex-start;
	}
	
	.chart-row.small-charts .chart-wrapper canvas {
	  display: block;           /* kein inline-Layout */
	  max-width: 220px;         /* gewünschte Chart-Größe */
	  width: 100%;
	  height: auto;
	}
	
	.chart-caption {
	  margin-top: .5rem;
	  text-align: center;
	  font-weight: 600;
	}
		
	/* Standard: Desktop */
	.results-anim{
	  width: 340px;
	  height: 340px;
	  margin: -150px 20px -180px auto;   /* zentriert, Luft oben/unten */
	  pointer-events: none;     /* blockiert keine Klicks */
	}
	
	/* Tablet */
	@media (max-width: 1024px){
	  .results-anim{
		width: 200px;
		height: 200px;
		margin: 0px auto 0px;
	  }
	}
	
	/* Mobil */
	@media (max-width: 720px){
	  .results-anim{
		width: 200px;
		height: 200px;
		margin: -60px auto -60px;  /* sitzt schön mittig über den KPIs */
	  }
	}
	
	/* Optionaler sichtbarer Fallback bei deaktiviertem JS */
	.results-anim-fallback{
	  display: none;
	  text-align: center;
	  color: #6b7280;
	  font-size: .9rem;
	  margin: 10px 0 8px;
	}
	noscript .results-anim-fallback{ display:block; }
	
	/* Motion-Respekt */
	@media (prefers-reduced-motion: reduce){
	  .results-anim{ display:none !important; }
	}
	
/*AUFBEREITUNG FÜR MOBILE ANSICHT*/

	@media (max-width: 901px) {
			.logo-img {
			height: 35px;
			width: auto;
			display: inline-block;
			vertical-align: middle;
			padding-bottom: 10px;
		}
	}	
	@media (max-width: 1180px) {
	
		.container {
			max-width: 600px;
			margin: 0 auto;
			padding: 0px;
		}
		
		header {
			background-color: #e9e9eb;
			color: black;
			padding: 10px 0;
		}
	
		.hero {
			text-align: center;
			margin: 30px auto 0px auto;
		}
	
		.hero h1 {
			font-size: 25px;
			margin-bottom: 10px;
			font-weight: 600;
		}
	
		.hero .subtitle {
			font-size: 16px;
			color: #555;
			margin: 0 10px 0 10px;
		}
	
		h1, h2, h3 {
			color: #2c3e50;
			margin-top: 10px;
			font-size: 16px;
		}
		
		.section-heading {
		  font-size: 18px;
		  padding-top: 0rem;
		  margin: 0 10px 0 10px
		}
	
		.kpi-wrapper {
		max-width: 500px;
		margin: 0 auto;
		padding: 0 0.5rem;
		}

	
		/* Navigationsbar */   
		.nav-link {
			color: black;
			margin-left: 5px;
			text-decoration: none;
			font-weight: 500;
			font-size: 14px;
		}
	  
		/* Logo */ 
	
		results-header-strict {
			text-align: center;
		}   
	
		.results-title {
			font-size: 1.1rem;
			color: #6c7c98;
			margin: 15px;
			flex: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-align: center;
		}
	  
		.controls {
			text-align: center;
			margin-top: 10px;
			margin-bottom: 30px;
		}
	
		.controls select {
			width: 120px;   /* Immer gleiche Breite! */
			max-width: 120px;
			padding: 0.5rem 1rem;
			border-radius: 6px;
			border: 1px solid #ccc;
			box-sizing: border-box;
			font-size: 12px;
			margin-bottom: 0px;
		}
	
		.pdf-button {
			background-color: #4CAF50;
			color: white;
			padding: 0.5rem 1.2rem;
			border: none;
			border-radius: 6px;
			cursor: pointer;
			font-size: 0.7rem;
			white-space: nowrap;
			transition: background-color 0.3s ease;
		}
	
		.start-saldo-box {
			display: flex;
			align-items: center;
			gap: 10px;
			background: #f7f7f7;
			border: 1px solid #ccc;
			padding: 10px 20px;
			border-radius: 10px;
			width: fit-content;
			margin: 20px auto;
			font-size: 0.7rem;
		}
	
		.kpi-grid {
			display: grid;
			gap: 0.5rem;
			margin-bottom: 20px;
		}
	
		/*Anordnung der KPI Felder*/
	
		.kpi-grid.kpi-top {
			grid-template-columns: repeat(3, 1fr);
		}
	
		.kpi-grid.kpi-middle,
		.kpi-grid.kpi-bottom {
			grid-template-columns: repeat(2, 1fr);
		}
	
		/*KPI Design*/
	
		.kpi-card, .card {
		background-color: #f6f6f6;
		 border: 1px solid rgba(0, 0, 0, 0.1);
		 border-left: 6px solid #4caf50;
		 border-radius: 0.5rem;
		 padding: 0.25rem 0.25rem;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		text-align: center;
		font-size: 12px;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
		}
	
		.kpi-card:hover, .card:hover {
		 transform: translateY(-3px);
		 box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
		}
	
		.kpi-red { 
			border-left: 8px solid #d87778;
		}
		.kpi-green {
			border-left: 8px solid #9db68c; 
		}
		.kpi-neutral { 
			border-left: 8px solid #7baac4; 
		}
		.kpi-card.result-green {
			border-left: 8px solid #9db68c; 
		}
		.kpi-card.result-yellow {
			border-left: 8px solid #ffba6a; 
		}
		.kpi-card.result-red {
			border-left: 8px solid #d87778; 
		}
	
		.kpi-card[data-tooltip]::after {
			 content: attr(data-tooltip);
			 position: absolute;
			 bottom: 110%;
			 left: 50%;
			 transform: translateX(-50%);
			 background-color: #E0EEEE;
			 color: #696969;
			 padding: 8px 12px;
			 border-radius: 6px;
			 font-size: 1rem;
			 line-height: 1.5rem;
			 white-space: pre-line;
			 opacity: 0;
			 pointer-events: none;
			 transition: opacity 0.3s ease;
			 width: 160px;
			 text-align: center;
			 z-index: 10;
			}
	
		.kpi-card:hover::after {
			  opacity: 1;
		}
	
		.chart-row {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			gap: 1rem;
			margin: 0rem auto;
			margin-bottom: 2rem;
			width: 100%;
		}
	
		.large-chart-wrapper {
			width: 300px;
			height: 300px;
		}
	
		.chart-legend-item {
			display: flex;
			align-items: center;
			gap: 0.15rem;
			font-size: 0.65rem;
		}
	
		.chart-caption {
			margin-top: 0.4rem;
			text-align: center;
			font-weight: 600;
			font-size: 0.8rem;
		}
	
		#chart-container {
			background-color: #e6f2ff; /* mobile BG */
			border-radius: 0px;
			overflow: hidden;
			border: none;
		}
	
		.small-chart-wrapper canvas {
			max-width: 200px;
			max-height: 200px;
			gap: 0.5rem;
		}
	
		.bucket-section {
			width: 100%;
			margin: 0 auto;
			padding: 0.5rem 1rem;
		}
	
		.bucket-list {
			display: flex;
			flex-direction: column;
			gap: 1rem;
		}	
	
		.bucket-info {
			flex-grow: 1;
			font-size: 0.8rem;
			line-height: 1.4;
			min-width: 150px;
			margin: 0px auto;
		}
	
		.expand-button {
			flex-shrink: 0;
			height: 25px;
			 padding: 0.4rem 0.4rem;
			 font-size: 0.7rem;
			 background-color: #e7defc;
			 border: 1px solid #ccc;
			 border-radius: 6px;
			cursor: pointer;
			white-space: nowrap;
			 display: flex;
			 align-items: center;
			justify-content: center;
			 box-sizing: border-box; /* <-- hinzufügen */
			 margin-right: right;
		}
	
		.bucket-name {
			font-weight: bold;
			margin-bottom: 4px;
			font-size: 1.5rem;
		}
	
		.bucket-header {
			display: grid;
			grid-template-columns: auto auto auto;
			align-items: center;
			gap: 0rem;
			font-size: 0.8rem;
		}
	
		.bucket-details-box {
			background: #fff;
			border: 1px solid #ccc;
			border-radius: 10px;
			padding: 1rem;
			box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
			display: none; /* initial eingeklappt */
			margin-top: 1rem;
			margin-right: 0px;
		}
	
		/* Ausgeklappte Tabelle bei den Eingaben */
	
		.entry-table,
		.entry-table thead,
		.entry-table tbody,
		.entry-table th,
		.entry-table td,
		.entry-table tr {
			display: block;
			width: 100%;
		}
	
		.entry-table thead {
			display: none;
		}
	
		.entry-table tr {
			margin-bottom: 1rem;
			border: 1px solid #ccc;
			border-radius: 8px;
			padding: 0.5rem;
			background-color: #f9f9f9;
			margin-right: 20px;
		}
	
		.entry-table td {
			text-align: left;
			padding: 0.4rem 0.8rem;
			position: relative;
			font-size: 12px;
		}
	
		.entry-table td::before {
			content: attr(data-label);
			font-weight: bold;
			display: block;
			margin-bottom: 0.2rem;
			color: #555;
		}
	  
		.bucket-details-inner {
		width: 100%;
		overflow-x: hidden;
		box-sizing: border-box;
	  }
	
	  .entry-table td {
		word-wrap: break-word;
		overflow-wrap: break-word;
		white-space: normal;
	  }
	
	  .entry-table tr {
		box-sizing: border-box;
	  }
	  
	/* Cashflow-Jahrestabelle*/
	
		.card {
			background-color: #ffffff;
			border-radius: 8px;
			box-shadow: 0 2px 6px rgba(0,0,0,0.05);
			text-align: center;
			display: flex;
			align-items: center;
		}
		
		.gray-panel {
		  padding: 1rem 0rem;
		  width: 90%;
		  border: 1px solid #ccc;
		}
		
		.cashflow-table {
		  width: 80%;
		}
		
		.cashflow-table thead {
			background-color: #6c7c98;
			color: white;
		}
		
		.cashflow-table th,
		.cashflow-table td {
			padding: 0.5rem 0.65rem;
			border: 1px solid #ccc;
			font-size: 11px;
		}
		
		.cashflow-table tbody tr:nth-child(even) {
			background-color: #f9f9f9;
		}
		
		.cashflow-table tbody tr:nth-child(odd) {
			background-color: #ffffff;
		
		}
		
		.cashflow-table td {
			text-align: right;
		}
		
		.cashflow-table th:first-child,
		.cashflow-table td:first-child {
			text-align: left;
			font-size: 11px;
		}
		
		.diagram-toggle label {
		  margin: 0 1rem;
		  font-size: 12px;
		  gap: 5px;
		  cursor: pointer;
		}
		
		.step2-video {
		  text-align: center;
		}
		
		.step2-video .video-box {
		  display: inline-block;
		  width: 100%;
		}
		
		/* Eingabefeld:*/
		
		.form-container{
			max-width: 320px;      /* statt 260px */
			padding: 1.25rem;      /* wieder Innenabstand */
		}
		
		.form-group {
			margin-bottom: 1.5rem;
			line-height: 7px;
		}
	
		.form-group label {
			display: block;
			margin-bottom: 0.5rem;
			font-weight: 600;
			font-size: 14px;
			height: 8px;
		}
	
		.form-group input,
		.form-group select {
			width: 100%;
			padding: 0.6rem;
			border: 1px solid #ccc;
			border-radius: 6px;
			font-size: 14px;
		}
		
		.visual-cards {
		  gap: 1rem; /* Abstand zwischen den Karten */
		  margin-top: 1rem;
		}
								
	} 
	
  .page-loader{
    position: fixed; inset: 0; z-index: 9999;
    display: grid; place-items: center;
    background: rgba(245,245,247,.96);   /* helles Overlay */
    transition: opacity .25s ease, visibility .25s ease;
  }
  .page-loader.hidden{ opacity: 0; visibility: hidden; }
  .page-loader__anim{ width: 160px; height: 160px; }
  @media (max-width:760px){ .page-loader__anim{ width: 120px; height: 120px; } }
  @media (prefers-reduced-motion: reduce){
    .page-loader__anim{ display:none; }
  }
	
html, body { background: #f5f5f7 !important; }

/* =========================
   DESKTOP (>= 901px) – bleibt wie gehabt
   ========================= */
.user-badge{
  position: fixed;
  top: 12px;
  right: 24px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff;               /* deine bisherige Optik */
  border: 1px solid #e6e8ec;
  box-shadow: 0 8px 24px rgba(16,24,40,.1);
}
.ub-avatar{
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #43b559; color: #fff;
  font-weight: 700; font-size: 13px;
}
.ub-label{ font-size: 12px; color: #7a8595; line-height: 1; }
.ub-email{ font-size: 14px; font-weight: 700; color: #1d2733; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ub-logout{ margin-left: 6px; font-size: 13px; color: #3867ff; text-decoration: none; }

/* =========================
   MOBILE (<= 900px) – Badge links, Menü rechts
   ========================= */
@media (max-width: 900px){

  /* Der Header ist der Bezugspunkt für absolute Positionen */
  .site-header .header-container{
    position: relative;
    min-height: 64px;               /* gibt Höhe für die Zeile */
    display: flex;
    align-items: center;
    justify-content: center;        /* Logo bleibt mittig */
    z-index: 5;
  }

  /* Badge links in derselben Zeile; kompakt (nur Avatar) */
  .site-header .user-badge{
    position: absolute !important;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 8px;
    pointer-events: auto;
  }
  .site-header .user-badge .ub-label,
  .site-header .user-badge .ub-email,
  .site-header .user-badge .ub-logout{
    display: none !important;       /* nur Avatar anzeigen */
  }
  .site-header .user-badge .ub-avatar{
    width: 32px; height: 32px; font-size: 13px;
  }

  /* Menü-Button (egal ob .nav-toggle oder .hamb) rechts ausrichten */
  .site-header .nav-toggle,
  .site-header .hamb{
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px; height: 34px;      /* dezent */
    display: inline-flex;
    align-items: center; justify-content: center;
    background: transparent; border: 0;
    z-index: 10;
    pointer-events: auto;
  }

  /* Dropdown-Nav standardmäßig zu (falls vorhanden) */
  .main-nav{ display: none; }
  .main-nav.is-open{ display: flex; }

  /* Desktop-Nav-Links im Header verstecken, falls sie sonst überlagern */
  .main-nav .nav-link{ padding: 8px 6px; }

  /* Sicherheit: keine Blur-/Glass-Effekte im Header mobil */
  .site-header .user-badge,
  .site-header .auth-badge{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }
}

/* =========================
   KLICKBARKEIT-SICHERUNG
   ========================= */
.site-header{ position: sticky; top: 0; z-index: 50; }
.site-header::before, .site-header::after{ pointer-events: none; }
.site-header .header-container, .site-header .user-badge, .site-header .nav-toggle, .site-header .hamb{ pointer-events: auto; z-index: 10; }

/* Header über allem (ohne Layout-Shift) */
.site-header{position:relative; z-index:20;}
.site-header .header-container{position:relative; min-height:64px;}

/* --- MOBIL: Badge links, Burger rechts --- */
@media (max-width:900px){

  /* Badge kompakt links, klickbar */
  .site-header .user-badge,
  .site-header .auth-badge{
    position:absolute !important;
    left:12px; top:50%; transform:translateY(-50%);
    background:transparent !important; border:0 !important; box-shadow:none !important;
    padding:0 !important; gap:8px; z-index:30; pointer-events:auto;
  }
  .site-header .user-badge .ub-label,
  .site-header .user-badge .ub-email,
  .site-header .ub-logout{ display:none !important; }
  .site-header .user-badge .ub-avatar{ width:32px; height:32px; font-weight:700; }

  /* Burger sichtbar rechts (beide Varianten abdecken) */
  .site-header .nav-toggle,
  .site-header .hamb{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    width:36px; height:36px; z-index:30; pointer-events:auto;
  }
  /* damit Klicks wirklich auf dem Button landen */
  .site-header .nav-toggle *{ pointer-events:none; }

  /* Falls irgendwo mobile die Nav offen/zu steuert – nicht anfassen,
     wir regeln hier NUR Sichtbarkeit/Position des Buttons. */
}

/* Blur/Filter sicher raus – verhindert „weichgezeichnete“ Badge */
.site-header .user-badge,
.site-header .auth-badge{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  filter:none !important;
}

/* Schutz: Elemente direkt unter dem Header sollen keine Klicks abfangen */
.site-header + *{ position:relative; z-index:0; }

/* Header liegt sicher über dem Inhalt (damit Klicks ankommen) */
.site-header{ position:relative; z-index: 1000; }
.site-header .header-container{ position:relative; min-height:64px; }

/* ======== MOBIL: Badge links, Burger rechts, Dropdown darunter ======== */
@media (max-width: 900px){

  /* Logo zentriert, Header bleibt eine Zeile hoch */
  .site-header .logo{ text-align:center; }
  .site-header .logo img{ display:inline-block; }

  /* Badge kompakt LINKS, klickbar */
  .site-header .user-badge,
  .site-header .auth-badge{
    position:absolute !important;
    left:12px; top:50%; transform:translateY(-50%);
    background:transparent !important; border:0 !important; box-shadow:none !important;
    padding:0 !important; gap:8px; z-index: 1010; pointer-events:auto;
  }
  .site-header .user-badge .ub-label,
  .site-header .user-badge .ub-email,
  .site-header .ub-logout{ display:none !important; }
  .site-header .user-badge .ub-avatar{ width:32px; height:32px; font-weight:700; }

  /* Burger RECHTS, sichtbar und klickbar (deckt .nav-toggle ab) */
  .site-header .nav-toggle{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    width:36px; height:36px; border:0; background:transparent; z-index: 1010;
    cursor:pointer;
  }
  /* Hamburger-Balken (Icon) */
  .nav-toggle__bar,
  .nav-toggle__bar::before,
  .nav-toggle__bar::after{
    display:block; position:relative; width:22px; height:2px; background:#1d2733;
    content:""; transition:transform .2s ease, opacity .2s ease;
  }
  .nav-toggle__bar::before{ position:absolute; left:0; top:-7px; }
  .nav-toggle__bar::after { position:absolute; left:0; top: 7px; }

  /* „X“ wenn aufgeklappt */
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar{ transform:rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::before{ transform:rotate(90deg); top:0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::after{ opacity:0; }

  /* Desktop-Navigation nicht zeigen */
  .site-header .main-nav{ display:none; }

  /* Dropdown-Panel unter dem Header – volle Breite, klickbar */
  .site-header .main-nav.is-open{
    display:flex;
    position:absolute; left:12px; right:12px; top:100%;
    flex-direction:column; gap:10px;
    background:#fff; border:1px solid #e6e8ec; border-radius:12px;
    padding:12px; margin-top:8px;
    box-shadow:0 12px 24px rgba(0,0,0,.12);
    z-index: 1005;
  }
  .site-header .main-nav .nav-link{
    display:block; padding:10px 8px; text-decoration:none; color:#1d2733; font-weight:600;
  }
}

/* Jedweden Blur/Filter zuverlässig ausschalten (gegen „verschwommen“) */
.site-header .user-badge,
.site-header .auth-badge{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  filter:none !important;
}

/* Sicherheit: Der nachfolgende Bereich liegt UNTER dem Header */
.site-header + *{ position:relative; z-index:0; }

/* ---------- MOBILE FIX: Badge klickbar, Burger klickbar, Dropdown korrekt ---------- */
@media (max-width: 900px){
  /* Header sicher oben und klickbar */
  .site-header{ position:relative; z-index:1000; }
  .site-header .header-container{ position:relative; }

  /* Badge links – darf Klicks annehmen */
  .site-header .user-badge,
  .site-header .auth-badge{
    position:absolute !important;
    left:12px; top:50%; transform:translateY(-50%);
    background:transparent !important; border:0 !important; box-shadow:none !important;
    padding:0 !important; pointer-events:auto; z-index:1015;
  }
  .site-header .user-badge .ub-label,
  .site-header .user-badge .ub-email,
  .site-header .ub-logout{ display:none !important; }
  .site-header .user-badge .ub-avatar{ width:32px; height:32px; }

  /* Burger rechts – sichtbar & klickbar */
  .site-header .nav-toggle{
    display:inline-flex !important;
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    width:36px; height:36px; border:0; background:transparent;
    align-items:center; justify-content:center; cursor:pointer;
    pointer-events:auto; z-index:1015;
  }
  .nav-toggle__bar,
  .nav-toggle__bar::before,
  .nav-toggle__bar::after{
    display:block; position:relative; width:22px; height:2px; background:#1d2733;
    content:""; transition:transform .2s ease, opacity .2s ease;
  }
  .nav-toggle__bar::before{ position:absolute; left:0; top:-7px; }
  .nav-toggle__bar::after { position:absolute; left:0; top: 7px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar{ transform:rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::before{ transform:rotate(90deg); top:0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::after{ opacity:0; }

  /* WICHTIG: Desktop-Zentrierung der Nav hart neutralisieren,
     damit sie geschlossen NICHT als unsichtbare Fläche über dem Header liegt */
  .site-header .main-nav{
    display:none !important;             /* wirklich weg, fängt keine Klicks */
    position:static !important;
    left:auto !important; right:auto !important; top:auto !important;
    transform:none !important;
    margin:0 !important;
  }

  /* Geöffnetes Dropdown: korrekt unter dem Header, volle Breite mit Rand */
  .site-header .main-nav.is-open{
    display:flex !important;
    position:absolute !important;
    left:12px; right:12px; top:100%;
    transform:none !important;
    flex-direction:column; gap:10px;
    background:#fff; border:1px solid #e6e8ec; border-radius:12px;
    padding:12px; margin-top:8px;
    box-shadow:0 12px 24px rgba(0,0,0,.12); z-index:1010;
    max-width:calc(100vw - 24px);
  }
  .site-header .main-nav .nav-link{
    display:block; padding:10px 8px; text-decoration:none; color:#1d2733; font-weight:600;
  }

  /* Kein Blur/Filter auf dem Header-Zeug (gegen „verschwommen“) */
  .site-header .user-badge,
  .site-header .auth-badge{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    filter:none !important;
  }
}

/* ===== MOBILE HOTFIX: Header über Bild, Bild fängt keine Klicks ===== */
@media (max-width: 900px){

  /* Feste Headerhöhe für Berechnungen */
  :root { --header-h: 64px; }

  /* Header ganz nach oben und über alles */
  .site-header{
    position: fixed;       /* statt sticky -> echte Schicht */
    top: 0; left: 0; right: 0;
    z-index: 9999;         /* über dem Hero-Bild */
  }
  .site-header .header-container{ min-height: var(--header-h); }

  /* Inhalt nach unten schieben, damit nichts verdeckt wird */
  body{ padding-top: var(--header-h); }

  /* Burger: große Trefferfläche, klicksicher */
  .site-header .nav-toggle{
    width: 48px; height: 48px;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    border: 0; background: transparent; cursor: pointer; z-index: 10001;
  }
  .site-header .nav-toggle *{ pointer-events: none; } /* Klick landet garantiert auf dem Button */

  /* Badge links, klickbar */
  .site-header .user-badge{
    position: absolute !important;
    left: 12px; top: 50%; transform: translateY(-50%);
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    padding: 0 !important; z-index: 10001; pointer-events: auto;
  }
  .site-header .user-badge .ub-label,
  .site-header .user-badge .ub-email,
  .site-header .user-badge .ub-logout{ display: none !important; }
  .site-header .user-badge .ub-avatar{ width: 32px; height: 32px; }

  /* NAV: geschlossen unsichtbar & nicht klickbar */
  #mainnav{
    display: none !important;
    position: static !important;
    pointer-events: none !important;
  }
  /* NAV: geöffnet als fixes Dropdown direkt UNTER dem Header – volle Breite */
  #mainnav.is-open{
    display: flex !important;
    position: fixed !important;
    left: 12px; right: 12px; top: calc(var(--header-h) + 8px);
    flex-direction: column; gap: 10px;
    background: #fff; border: 1px solid #e6e8ec; border-radius: 12px;
    padding: 12px; box-shadow: 0 12px 24px rgba(0,0,0,.12);
    pointer-events: auto !important; z-index: 10000;  /* unter Badge/Burger, über Bild */
    max-width: calc(100vw - 24px);
  }
  #mainnav .nav-link{ display: block; padding: 10px 8px; color: #1d2733; text-decoration: none; font-weight: 600; }

  /* ⛔️ Der eigentliche Bug: Hero-Bild lag darüber.
     -> Bild und Hero-Container mobil unter den Header schichten und Klicks nicht abfangen */
  .site-header + *,
  .site-header + * *{
    position: relative;
    z-index: 0 !important;        /* alles unter den Header */
  }
  /* Nur Bilder direkt unter dem Header sollen keine Klicks fangen (lassen Links/Text weiter klickbar) */
  .site-header + * img{
    pointer-events: none;         /* verhindert, dass das Bild Badge/Burger blockiert */
  }

  /* Logo mittig lassen */
  .site-header .logo{ text-align: center; }
  .site-header .logo img{ display: inline-block; }
}

/* ===== MOBILE NAV: fixiere Position, rechts unter dem Burger, Bild darunter ===== */
@media (max-width:900px){
  :root { --header-h: 64px; }

  /* Header immer über dem Hero, Inhalt nach unten schieben */
  .site-header{ position:fixed; top:0; left:0; right:0; z-index:10000; }
  .site-header .header-container{ min-height:var(--header-h); overflow:visible; }
  body{ padding-top:var(--header-h); }

  /* Burger groß & klickbar */
  .site-header .nav-toggle{
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    width:48px; height:48px; display:inline-flex !important; align-items:center; justify-content:center;
    border:0; background:transparent; cursor:pointer; z-index:10002;
  }
  .site-header .nav-toggle *{ pointer-events:none; }

  /* Badge LINKS, klickbar (nur Avatar sichtbar) */
  .site-header .user-badge{
    position:absolute !important; left:12px; top:50%; transform:translateY(-50%);
    padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important;
    z-index:10002; pointer-events:auto;
  }
  .site-header .user-badge .ub-label,
  .site-header .user-badge .ub-email,
  .site-header .user-badge .ub-logout{ display:none !important; }

  /* Geschlossene Nav darf NICHTS abfangen */
  #mainnav{
    display:none !important;
    position:static !important;
    pointer-events:none !important;
    margin:0 !important; padding:0 !important;
  }

  /* Geöffnetes Dropdown: FIXIERT rechts unter dem Header – NICHT zentriert */
  #mainnav.is-open{
    display:flex !important;
    position:fixed !important;
    top:calc(var(--header-h) + 8px) !important;
    right:12px !important;
    left:auto !important;                 /* <<< zentrieren explizit abschalten */
    inset:auto auto auto  auto !important;/* killt evtl. alte 'inset' Regeln   */
    transform:none !important;
    flex-direction:column; gap:10px;
    background:#fff; border:1px solid #e6e8ec; border-radius:12px;
    padding:12px; margin:0 !important;
    width:min(92vw, 360px) !important;    /* schöne Breite */
    box-shadow:0 12px 24px rgba(0,0,0,.12);
    z-index:10001; pointer-events:auto !important;
  }
  #mainnav .nav-link{ display:block; padding:10px 8px; color:#1d2733; text-decoration:none; font-weight:600; }

  /* Hero-Bild/Container dürfen Header NICHT überdecken oder Klicks fangen */
  .site-header + *{ position:relative; z-index:0 !important; }
  .site-header + * img{ pointer-events:none; }

  /* Sicherheitsnetz: falls irgendeine frühere Regel die Nav mittig schiebt */
  .site-header .main-nav{ text-align:left !important; justify-content:flex-start !important; }
}

/* ===== FINALE, ENTKOPPELTE MOBILE-NAV ===== */
@media (max-width:900px){
  :root{ --ff-header: 64px; }

  /* Header fix oben, über allem */
  .site-header{ position:fixed; top:0; left:0; right:0; z-index:11000; background:#fff; }
  .site-header .header-container{ min-height:var(--ff-header); position:relative; overflow:visible !important; }
  body{ padding-top:var(--ff-header); }
  body.ff-menu-open{ overflow:hidden; }

  /* Burger rechts – große Klickfläche */
  .site-header .nav-toggle{
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center;
    border:0; background:transparent; cursor:pointer; z-index:12002;
  }
  .site-header .nav-toggle *{ pointer-events:none; }
  .nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after{
    display:block; position:relative; width:22px; height:2px; background:#1d2733; content:"";
  }
  .nav-toggle__bar::before{ position:absolute; left:0; top:-7px; content:""; }
  .nav-toggle__bar::after { position:absolute; left:0; top: 7px; content:""; }

  .site-header .user-badge .ub-logout{ display:none !important; }
  .site-header .user-badge .ub-avatar{ width:32px; height:32px; }

  /* Desktop-Navigation mobil vollständig abschalten */
  #mainnav{ display:none !important; }

  /* *** Eigenes fixiertes Overlay rechts unter dem Header *** */
  .ff-mobile-menu[hidden]{ display:none !important; }
  .ff-mobile-menu{
    position:fixed; top:calc(var(--ff-header) + 8px); right:12px; left:auto;
    z-index:12001; /* über Content/Bilder, unter Badge/Burger */
  }
  .ff-mobile-nav{
    display:flex; flex-direction:column; gap:10px;
    width:min(92vw, 360px);
    background:#fff; border:1px solid #e6e8ec; border-radius:12px;
    padding:12px; box-shadow:0 12px 24px rgba(0,0,0,.14);
  }
  .ff-mobile-nav .nav-link{ display:block; padding:10px 8px; text-decoration:none; font-weight:600; color:#1d2733; }

  /* Content darf den Header nie überdecken oder Klicks abfangen */
  .container, .header-container, .site-header + *{ overflow:visible !important; position:relative; z-index:0 !important; }
  /* Hero/Images sollen keine Header-Klicks abfangen */
  .site-header + * img{ pointer-events:none; }
}

@media (max-width:900px){

  /* Badge mobil kompakt, aber Logout-Button bleibt klickbar */
  .site-header .user-badge{
    position:absolute !important;
    left:12px; top:50%; transform:translateY(-50%);
    background:transparent !important; border:0 !important; box-shadow:none !important;
    padding:0 !important; z-index:12002; display:flex; align-items:center; gap:6px;
  }

  .site-header .user-badge .ub-label,
  .site-header .user-badge .ub-email{ display:none !important; }

  .site-header .user-badge .ub-avatar{
    width:32px; height:32px; font-weight:700;
  }

  /* Logout-Link sichtbar, kleine kompakte Darstellung */
  .site-header .user-badge .ub-logout{
    display:inline-block !important;
    font-size:13px; color:#3867ff; text-decoration:none;
    margin-left:4px;
  }
}

/* ===== USER BADGE DROPDOWN ===== */
.user-badge{
  position:relative;
  cursor:pointer;
}

.user-badge .ub-avatar{
  width:32px; height:32px;
  border-radius:50%;
  background:#43b559; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
}

/* Dropdown */
.user-dropdown{
  position:absolute;
  top:calc(100% + 8px); left:0;
  background:#fff; border:1px solid #e6e8ec; border-radius:8px;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  padding:8px 12px;
  min-width:160px;
  z-index:15000;
}

.user-dropdown .ud-email{
  font-size:13px; margin-bottom:6px; color:#555;
  word-break:break-all;
}

.user-dropdown .ud-logout{
  font-size:14px; font-weight:600;
  color:#3867ff; text-decoration:none;
}
.user-dropdown .ud-logout:hover{ text-decoration:underline; }

/* Mobile: Dropdown soll rechts vom Avatar kleben */
@media(max-width:900px){
  .user-dropdown{
    left:auto; right:0;
  }
}

.user-dropdown{
  position:absolute;
  top:100%;              /* direkt unter dem Badge */
  left:0;
  margin-top:4px;        /* nur kleiner Abstand */
  background:#fff;
  border:1px solid #e6e8ec;
  border-radius:8px;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  padding:8px 12px;
  min-width:160px;
  z-index:15000;
}

/* ===== DESKTOP DEFAULT (≥901px) – bewahrt dein altes Layout ===== */
@media (min-width:901px){
  /* Header wie gehabt (nicht fixed) */
  .site-header{ position:sticky; top:0; z-index:1000; background:transparent; }

  /* Desktop-Nav sichtbar */
  #mainnav{ display:flex !important; }

  /* Burger & mobiles Overlay AUS */
  .nav-toggle{ display:none !important; }
  #mobilemenu, .ff-mobile-menu{ display:none !important; }

  /* Badge im Desktop-Stil (deine ursprünglichen Werte) */
  .user-badge{
    position: fixed;
    top: 12px; right: 24px; z-index: 1000;
    display:flex; align-items:center; gap:10px;
    padding:8px 12px; border-radius:12px;
    background:#fff; border:1px solid #e6e8ec;
    box-shadow:0 8px 24px rgba(16,24,40,.1);
  }
  .ub-avatar{ width:26px; height:26px; font-size:13px; font-weight:700; color:#fff; background:#43b559; border-radius:50%; display:grid; place-items:center; }
  .ub-label{ font-size:12px; color:#7a8595; line-height:1; display:inline; }
  .ub-email{ font-size:14px; font-weight:700; color:#1d2733; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline; }
  .ub-logout{ margin-left:6px; font-size:13px; color:#3867ff; text-decoration:none; display:inline; }

  /* Falls du das Badge-Dropdown behalten willst: auf Desktop ausblenden */
  .user-dropdown{ display:none !important; }
}

/* ===== MOBILE (≤900px) – Burger + Overlay + kompaktes Badge ===== */
@media (max-width:900px){
  :root{ --ff-header:64px; }

  /* Header fix oben, Content nach unten schieben */
  .site-header{ position:fixed; top:0; left:0; right:0; z-index:11000; background:#fff; }
  .site-header .header-container{ min-height:var(--ff-header); position:relative; }
  body{ padding-top:var(--ff-header); }
  body.ff-menu-open{ overflow:hidden; }

  /* Desktop-Nav aus */
  #mainnav{ display:none !important; }

  /* Burger sichtbar rechts */
  .nav-toggle{
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center;
    border:0; background:transparent; cursor:pointer; z-index:12002;
  }
  .nav-toggle *{ pointer-events:none; }

  /* Kompaktes Badge links + Dropdown */
  .user-badge{
    position:absolute !important; left:12px; top:50%; transform:translateY(-50%);
    padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important;
    display:flex; align-items:center; gap:6px; z-index:12002; cursor:pointer;
  }
  .ub-label, .ub-email{ display:none !important; }      /* mobil nur Avatar zeigen */
  .ub-avatar{ width:32px; height:32px; font-weight:700; border-radius:50%; background:#43b559; color:#fff; display:flex; align-items:center; justify-content:center; }

  /* Badge-Dropdown (Logout) nahe am Avatar */
  .user-dropdown[hidden]{ display:none !important; }
  .user-dropdown{
    position:absolute; top:100%; right:0; margin-top:4px;
    background:#fff; border:1px solid #e6e8ec; border-radius:8px;
    box-shadow:0 6px 16px rgba(0,0,0,.12); padding:8px 12px; min-width:180px; z-index:15000;
  }
  .user-dropdown .ud-email{ font-size:13px; color:#555; margin-bottom:6px; }
  .user-dropdown .ud-logout{ font-size:14px; font-weight:600; color:#3867ff; text-decoration:none; }

  /* Mobiles Overlay-Menü rechts unter dem Header */
  .ff-mobile-menu[hidden]{ display:none !important; }
  .ff-mobile-menu{ position:fixed; top:calc(var(--ff-header) + 8px); right:12px; z-index:12001; }
  .ff-mobile-nav{
    display:flex; flex-direction:column; gap:10px; width:min(92vw, 360px);
    background:#fff; border:1px solid #e6e8ec; border-radius:12px; padding:12px; box-shadow:0 12px 24px rgba(0,0,0,.14);
  }
  .ff-mobile-nav .nav-link{ display:block; padding:10px 8px; text-decoration:none; font-weight:600; color:#1d2733; }
}

/* === DESKTOP (≥901px): voller Badge mit Mail + Abmelden === */
@media (min-width:901px){
  /* Desktop-Nav sichtbar, Burger/Overlay aus – falls noch nicht so gesetzt */
  #mainnav{ display:flex !important; }
  .nav-toggle, #mobilemenu, .ff-mobile-menu{ display:none !important; }

  /* Badge: feste Position & kompletter Inhalt sichtbar */
  .user-badge{
    position: fixed; top:12px; right:24px; z-index:1000;
    display:flex; align-items:center; gap:10px;
    padding:8px 12px; border-radius:12px; background:#fff;
    border:1px solid #e6e8ec; box-shadow:0 8px 24px rgba(16,24,40,.1);
    cursor:default;
  }
  .ub-avatar{
    width:26px; height:26px; border-radius:50%;
    display:grid; place-items:center; background:#43b559; color:#fff; font-weight:700; font-size:13px;
  }
  .ub-text{ display:block; }
  .ub-label{ font-size:12px; color:#7a8595; line-height:1; }
  .ub-email{ font-size:14px; font-weight:700; color:#1d2733; white-space:nowrap; max-width:240px; overflow:hidden; text-overflow:ellipsis; }
  .ub-logout{ margin-left:6px; font-size:13px; color:#3867ff; text-decoration:none; }
  .ub-logout:hover{ text-decoration:underline; }

  /* Mobiles Dropdown auf Desktop komplett aus */
  .user-dropdown{ display:none !important; }
  		/* Logo */ 
	.logo-img {
		height: 35px;
		width: auto;
		display: inline-block;
		vertical-align: left !important;
		padding-bottom: 10px;
	}
  
}

/* === MOBIL (≤900px): Avatar + Dropdown === */
@media (max-width:900px){
  /* Kompakter Badge links; Text/Logout im Header ausblenden */
  .user-badge{
    position:absolute !important; left:12px; top:50%; transform:translateY(-50%);
    padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important;
    display:flex; align-items:center; gap:6px; z-index:12002; cursor:pointer;
  }
  .ub-text, .ub-logout{ display:none !important; }  /* ← nur Avatar im Header */
  .ub-avatar{ width:32px; height:32px; border-radius:50%; background:#43b559; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
  

  /* Dropdown dicht am Avatar (wie zuletzt gewünscht) */
  .user-dropdown[hidden]{ display:none !important; }
  .user-dropdown{
    position:absolute; top:100%; right:0; margin-top:4px;
    background:#fff; border:1px solid #e6e8ec; border-radius:8px;
    box-shadow:0 6px 16px rgba(0,0,0,.12); padding:8px 12px; min-width:180px; z-index:15000;
  }
  .user-dropdown .ud-email{ font-size:13px; color:#555; margin-bottom:6px; word-break:break-all; }
  .user-dropdown .ud-logout{ font-size:14px; font-weight:600; color:#3867ff; text-decoration:none; }
  .user-dropdown .ud-logout:hover{ text-decoration:underline; }
}

/* === FORCE: Logout-Link mobil ausblenden === */
/* Diesen Block GANZ ans Ende setzen, NACH allen Desktop-Regeln. */
@media (max-width:900px){
  /* nur Avatar im Header */
  .site-header .user-badge .ub-text{ display:none !important; }

  /* Logout neben dem Badge aus */
  .site-header .user-badge .ub-logout{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  /* Falls irgendwo ein anderer Logout-Link im Header steckt */
  .site-header a.ub-logout,
  .site-header a[href*="account_logout"]{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}

@media (min-width:1025px) and (max-width:1280px){
  .ub-email{ max-width:200px; }
}

/* ===== Header-Logo: Größenfix + links pinnen ===== */

/* Mobile: kleines Logo, kein 100%-Stretch */
.site-header .logo a{ display:inline-block; line-height:0; }
.site-header .logo .logo-img{
  width:auto !important;          /* überschreibt img{width:100%} */
  height:24px;                    /* mobile Größe */
  max-width:none !important;
  object-fit:contain;
  z-index:1;
}

/* Desktop (>=901px): Logo links fix, Nav zentriert, Logo mit fester Höhe */
@media (min-width:901px){
  .site-header .header-container{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    min-height:72px;
  }
  .site-header .logo{
    position:absolute; left:24px; top:50%;
    transform:translateY(-50%);
    margin:0 !important; text-align:left !important;
    z-index:2;
  }
  .site-header .logo .logo-img{
    height:32px !important;       /* Desktop-Größe */
    width:auto !important;
    max-width:none !important;
  }

  /* Desktop-Nav sichtbar, Burger aus (Sicherheit) */
  #mainnav{ display:flex !important; }
  .nav-toggle, #mobilemenu, .ff-mobile-menu{ display:none !important; }
}