:root {
  --orange: #f08a24;
  --dark-orange: #e76f00;
  --background: #f7f7f7;
  --text-color: #333;
  --hover-color: #ff7f11;
}
/* Box-Sizing setzen für alle Elemente */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Allgemeine Styles */

body {
  margin: 0;
  font-family: 'Arial', sans-serif;
  background-color: #fff;  /* Allgemeiner Hintergrund */
  color: var(--text-color);  /* Textfarbe */
  scroll-behavior: smooth;
}
a {
  color: var(--text-color);
  text-decoration: underline;
}

a:hover {
  color: var(--orange);
  text-decoration: underline;
}
header {
  text-align: center;
  padding: 2rem 1rem 1rem;
  background-color: var(--background); /* Hintergrundfarbe für Header */
  color: var(--dark-orange);  /* Textfarbe im Header */
}

header img.logo {
  max-width: 100%;
  height: auto;
}

/* Optional für sehr große Bildschirme, damit es nicht zu riesig wird */
@media (min-width: 1024px) {
  header img.logo {
    max-width: 400px;
  }
}

header h1 {
  margin-top: 1rem;
  color: var(--dark-orange);
  font-size: 2rem;
}

nav {
  background-color: #fff;
  position: sticky;
  top: 0;
  padding: 1rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  display: flex;
  justify-content: center;
  gap: 2rem;
  border-top: 3px solid var(--orange);  /* Orangene obere Linie */

}

nav a {
  text-decoration: none;
  color: var(--orange);
  font-weight: bold;
}

/* NUR Sprachumschaltung etwas dezenter: */
.language-switch {
    background-color: var(--background);
    color: var(--dark-orange);
  width: 100%;
  text-align: right;
  font-size: 0.8rem;
}
}
.language-switch a {
    background-color: var(--background);
    color: var(--dark-orange);
  font-weight: normal;
  font-size: 0.9rem;  /* Etwas kleiner */
}

@media (max-width: 600px) {
  nav {
    flex-wrap: nowrap;   /* Links umbrechen erlaubt */
    text-align: center;
    gap: 1rem;         /* Kleinerer Abstand */
  }

  .language-switch {
      background-color: var(--background);
    width: 100%;
    text-align: right;
    font-size: 0.7rem;
    margin-top: 0rem;
  }
}

.language-switch a {
    color: var(--dark-orange);
    padding: 0 0.3rem; /* Weniger Abstand zwischen DE und EN */
}

section {
  padding: 1rem 1rem;
  max-width: 1100px;
  margin: auto;
  scroll-margin-top: 35px; /* oder so hoch wie deine feste Navbar */
margin-bottom: 1rem; /* etwas Abstand zwischen Abschnitten */
}

section h2 {
  margin-top: 2.5rem; /* Abstand vor neuer Hauptüberschrift */
}
section h3 {
  margin-top: 0.5rem; /* Abstand vor neuer Hauptüberschrift */
}

section h4 {
  margin-top: 0.5rem; /* kleiner Abstand vor Unterüberschriften */
}

section img.foto {
  max-width: 200px;
  float: right;
  margin-left: 1.5rem;
  border-radius: 8px;
}



.kontakt-formular {
  background: #fff8f0;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin: 2rem auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.kontakt-formular label {
  font-weight: bold;
  color: #cc5500;
}

.kontakt-formular input,
.kontakt-formular textarea {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.kontakt-formular input:focus,
.kontakt-formular textarea:focus {
  border-color: #ff7f11;
  outline: none;
}

.kontakt-formular button {
  background-color: #ff7f11;
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.kontakt-formular button:hover {
  background-color: #e76f00;
}

/* Datenschutz-Checkbox */
.datenschutz-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.datenschutz-checkbox input {
  width: auto;
  height: 1rem;
  accent-color: #ff7f11; /* Orangenes Häkchen */
}

.datenschutz-checkbox label {
  color: #555;
}

.datenschutz-checkbox a {
  color: #ff7f11;
  text-decoration: none;
}

.datenschutz-checkbox a:hover {
  text-decoration: underline;
}


footer {
  background-color: #f7f7f7;
  text-align: center;
  padding: 2rem;
  font-size: 0.9rem;
  color: #777;
  border-top: 1px solid #eee;
}

.footer-links a {
color: #777;
text-decoration: none;
margin: 0 0.5rem;
}

.footer-links a:hover {
color: var(--orange);
}

#ueber-mich {
max-width: 1100px;
margin: 0 auto;
padding: 2rem 1rem;
}


.ueber-mich-grid {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Desktop: zwei Spalten */
  gap: 2rem;
  align-items: start;
  font-size: 1rem; /* Schriftgröße einheitlich setzen */
}

.linke-spalte, .rechte-spalte {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.rechte-spalte p {
  margin-bottom: 0rem; /* oder 0.8rem – je nachdem wie kompakt du es willst */
margin-top: 0rem; /* oder 0.8rem – je nachdem wie kompakt du es willst */
}


/* Mobile Ansicht */
@media (max-width: 768px) {
  .ueber-mich-grid {
    grid-template-columns: 1fr; /* Eine Spalte */
    font-size: 0.95rem; /* Etwas kleinere Schrift für bessere Lesbarkeit */
  }
}

.bild img {
width: 100%;
height: auto;
border-radius: 8px;
}

.zusatz-info {
margin-top: 0;
}

.zusatz-info h3 {
margin-bottom: 0.5rem;
font-size: 1.1rem;
color: var(--orange);
}

.podcast-links,
.paper-links {
list-style: none;
padding-left: 0;
margin-bottom: 1rem;
}

.podcast-links li,
.paper-links li {
margin-bottom: 0.5rem;
}

.podcast-links a,
.paper-links a {
text-decoration: none;
color: #333;
font-size: 0.95rem;
transition: color 0.3s;
}

.podcast-links a:hover,
.paper-links a:hover {
color: var(--orange);
}





.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 37%; /* angepasst auf das Seitenverhältnis deines Audios */
  height: 0;
  overflow: hidden;
  max-width: 500px; /* optional, damit es nicht zu groß wird auf Desktop */
  margin: 0 auto; /* zentriert das iframe */
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#info-boxen {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

#info-boxen h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
}

.info-card {
  padding: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #fff;
}

.info-card h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.3rem;
  color: var(--orange); /* oder #f08a24, wenn du var(--orange) nutzt */
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.station {
  display: flex;
  flex-direction: column;
}

.jahr {
  font-weight: bold;
  font-size: 0.95rem;
  color: #666;
}

.text {
  font-size: 0.95rem;
  margin-top: 0.3rem;
}

ul {
  padding-left: 1.2rem;
  margin: 0;
  font-size: 0.95rem;
  list-style-type: disc;
}

ul li {
  margin-bottom: 0.5rem;
}

ul {
  margin: 0;
  padding-left: 1rem;
  list-style: disc;
  line-height: 1.6;
}
details {
  margin: 1.5rem 0;
  padding: 1rem 1.2rem;
  background-color: #fff7ee;
  border-left: 4px solid var(--orange);
  border-radius: 6px;
  transition: all 0.3s ease;
}

details[open] {
  background-color: #fff1dd;
}

summary {
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: bold;
  color: var(--orange);
  position: relative;
  padding-right: 1.5rem;
}

summary::after {
  content: '➤';
  font-size: 1rem;
  position: absolute;
  right: 0;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}

details[open] summary::after {
  transform: rotate(90deg);
}

ul {
  line-height: 1.8;
}

/* BILD- & TEXT-Layouts */
.bild-rechts, .bild-links {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-top: 2rem;
}

.bild-rechts {
  flex-direction: row;
}

.bild-links {
  flex-direction: row-reverse;
}

.bild-rechts img,
.bild-links img {
  width: 350px;
  height: auto;
  border-radius: 8px;
  flex-shrink: 0;
}

.bild-rechts p {
margin-bottom: 1rem;
}

.bild-links p {
margin-bottom: 1rem;
}
.bild-rechts ul, .bild-links ul {
  margin: 0;
}

@media (max-width: 700px) {
  .bild-rechts, .bild-links {
    flex-direction: column;
    align-items: center;
  }

  .bild-rechts img,
  .bild-links img {
    width: 100%;
    max-width: 350px;
  }
  .karte {
margin-top: 1rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
overflow: hidden;
border-radius: 8px;
}
:root {
--orange: #f08a24;
}

#impressum {
  max-width: 700px;
  margin: 0 auto;
  padding: 1rem 1rem;
  font-size: 1rem;
  line-height: 1.6;
}

#impressum h1 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

#impressum a {
  color: var(--orange);
  text-decoration: none;
}

#impressum a:hover {
  text-decoration: underline;
}
/* Allgemeine Styles für das Formular */
/* Standard-Kontaktformular */