/* Allgemein */
body {
  font-family: 'Georgia', serif;
  margin: 0;
  padding: 0;
  background-color: #d6bfa8; /* sanft bräunlich */
  color: #4b3b2b; /* dunkelbraun für Text */
  line-height: 1.6;
}

/* Menü */
nav {
  background-color: #8b6d5c; /* dunkler Braunton */
  padding: 15px 20px;
  text-align: center;
}

nav a {
  color: #ffffff; /* Weiß für guten Kontrast */
  text-decoration: none;
  margin: 0 15px;
  font-weight: bold;
  font-size: 1.1em;
}

nav a:hover {
  color: #f0d8b0; /* helles Braun beim Hover */
}

/* Startbereich */
.section-start {
  background-image: url('bilder/meinbild.jpg'); /* Dein Hintergrundbild */
  background-size: cover;
  background-position: center;
  color: white;
  padding: 250px 20px; /* mehr Platz für große Überschrift */
  text-align: center;
  border-radius: 20px;
  margin: 20px 20px 0 20px;  /* unten = 0 */
}

/* Startseite: erster Textblock direkt am Startbild */
.section-start + section {
  margin-top: 0;
}

.section-start h1 {
  font-size: 4em; /* sehr große Überschrift */
  margin-top: 250px;   /* schiebt die Überschrift 250px nach unten */
  margin-bottom: 20px;
}

.section-start p {
  font-size: 1.5em; /* Unterüberschrift */
}

/* Abschnitte / Textboxen */
section {
  padding: 40px 20px;
  border-radius: 20px;
  margin: 20px;
  background-color: #f0e0d6; /* sanft hellbraun */
}

h1, h2 {
  font-family: 'Georgia', serif;
}

p {
  font-size: 1.1em;
}

img {
  max-width: 100%;
  border-radius: 15px;
}

/* Untermenü – Seite "Meine Ausbildungen" */
.submenu {
  background-color: #f0e0d6; /* hellbrauner Hintergrund */
  padding: 10px;
  text-align: center;
  margin: 20px;
  border-radius: 10px;
}

.submenu a {
  margin: 0 10px;
  font-weight: bold;
  text-decoration: none;
  color: #4b3b2b;
}

.submenu a:hover {
  color: #8b6d5c; /* dunkler Braunton beim Hover */
}


/* Layout für Ausbildungsblöcke */
.ausbildung-block {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin: 40px 0;
}

.ausbildung-block img {
  max-width: 250px;
  border-radius: 15px;
}

.ausbildung-block div {
  flex: 1;
}
/* Kontaktseite */
.kontakt-block {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: 20px;
}

.kontakt-block img {
  max-width: 150px;   /* deutlich kleiner als bisher */
  border-radius: 12px;
}

.kontakt-block a {
  color: #4b3b2b; /* dunkelbraun */
  text-decoration: none;
  font-weight: bold;
}

.kontakt-block a:hover {
  color: #8b6d5c; /* Braun beim Hover */
}
/* --- Responsive Design für Handy / kleine Bildschirme --- */
@media (max-width: 768px) {
  
  /* Allgemeiner Text etwas kleiner */
  body {
    font-size: 0.95em;
    line-height: 1.5;
  }

  /* Überschriften anpassen */
  h1 {
    font-size: 2em;
  }
  h2 {
    font-size: 1.5em;
  }

  /* Menü enger */
  nav a {
    display: block;       /* Links untereinander */
    margin: 8px 0;
    font-size: 1em;
  }

  /* Kontakt-Block untereinander statt nebeneinander */
  .kontakt-block {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .kontakt-block img {
    max-width: 200px; /* auf Handy darf Bild wieder größer wirken */
    margin-top: 15px;
  }

  /* Ausbildungsblöcke (Text + Bild) untereinander */
  .ausbildung-block {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .ausbildung-block img {
    max-width: 250px;
    margin-bottom: 15px;
  }
}
/* --- Hamburger Menü --- */
.navbar {
  background-color: #8b6d5c;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.navbar .logo {
  color: white;
  font-weight: bold;
  font-size: 1.2em;
}

.navbar .menu {
  display: flex;
  gap: 15px;
}

.navbar .menu a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

.navbar .menu-toggle {
  display: none;
  font-size: 1.8em;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

/* --- Responsive: auf Handy umschalten --- */
@media (max-width: 768px) {
  .navbar .menu {
    display: none; /* Menü zuerst verstecken */
    flex-direction: column;
    background-color: #8b6d5c;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    padding: 10px 0;
    text-align: center;
  }

  .navbar .menu.show {
    display: flex; /* Menü sichtbar wenn "show" aktiv */
  }

  .navbar .menu-toggle {
    display: block; /* Hamburger-Button sichtbar */
  }
}
/* Kontaktseite zentriert und größer */
.kontakt-section {
  text-align: center;
  margin: 40px auto;
  max-width: 900px;
}

.kontakt-section h1 {
  font-size: 2.8em;   /* größere Überschrift */
  margin-bottom: 30px;
  color: #4b3b2b;     /* dunkles Braun */
}

.kontakt-block {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap; /* für Handy untereinander */
}

.kontakt-text {
  font-size: 1.3em;   /* Text etwas größer */
  line-height: 1.6;
}

.kontakt-block img {
  max-width: 300px;   /* größer als vorher */
  border-radius: 15px;
}

.kontakt-block a {
  color: #4b3b2b;
  text-decoration: none;
  font-weight: bold;
}

.kontakt-block a:hover {
  color: #8b6d5c;
}
/* =======================
   Angebote-Seite
   ======================= */

/* Angebote Layout */
.angebote-content {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap; /* sorgt dafür, dass es auf kleineren Bildschirmen umbricht */
}

.angebote-text {
  flex: 2; /* Text nimmt mehr Platz ein */
}

.angebote-bild {
  flex: 1;
  display: block;
  text-align: center;
}

.angebote-bild img {
  display: block;
  max-width: 300px; /* Bildgröße */
  margin: 20px auto;
  border-radius: 15px;
}

/* Handy-Ansicht */
@media (max-width: 768px) {
  .angebote-content {
    flex-direction: column; /* Text und Bilder untereinander */
  }
  .angebote-bild img {
    max-width: 100%; /* Bilder nutzen volle Breite am Handy */
  }
}

/* Preise Layout */
.preise-content {
  display: flex;
  align-items: center; /* Bild wird mittig zum Text ausgerichtet */
  gap: 40px;
  flex-wrap: wrap; /* bricht bei kleinen Bildschirmen um */
}

.preise-text {
  flex: 2; /* Text nimmt mehr Platz ein */
}

.preise-bild {
  flex: 1;
  text-align: center;
}

.preise-bild img {
  max-width: 500px;
  border-radius: 15px;
  display: block;
  margin: 0 auto;
}

/* Handy-Ansicht */
@media (max-width: 768px) {
  .preise-content {
    flex-direction: column; /* Text und Bild untereinander */
    text-align: center;
  }
  .preise-bild img {
    max-width: 100%;
  }
}
/* Layout für H3-Abschnitte */
.unterpunkt {
  display: flex;
  align-items: flex-start; /* Text oben ausgerichtet */
  gap: 20px;
  margin-bottom: 40px;
  flex-wrap: wrap; /* für Handy */
}

.unterpunkt-text {
  flex: 2;
}

.unterpunkt-bild {
  flex: 1;
  text-align: center;
}

.unterpunkt-bild img {
  max-width: 250px; /* Bildgröße anpassen */
  border-radius: 12px;
  display: block;
  margin: 0 auto;
}

/* Handy-Ansicht */
@media (max-width: 768px) {
  .unterpunkt {
    flex-direction: column; /* Text und Bild untereinander */
    text-align: center;
  }
  .unterpunkt-bild img {
    max-width: 100%;
  }
}
.submenu {
  display: flex;
  flex-direction: column; /* Links untereinander */
  gap: 8px; /* Abstand zwischen den Links */
  margin: 20px 0;
}

.submenu a {
  text-decoration: none;
  padding: 8px;
  background: #f5f5f5;
  border-radius: 6px;
  color: #333;
  transition: background 0.3s;
}

.submenu a:hover {
  background: #ddd;
}
/* --- Überschrift mit Hintergrundbild --- */
.section-header {
  background: url('bilder/header-pferd.jpg') no-repeat center center/cover;
  text-align: center;
  padding: 100px 20px;
  color: black;
}

.section-header h1 {
  font-size: 60px;
  margin-bottom: 10px;
}

.section-header p {
  font-size: 24px;
  margin-top: 0;
}

/* --- Zitat-Block --- */
.zitat {
  text-align: center;
  margin: 60px auto;
  padding: 30px;
  max-width: 800px;
}

.zitat blockquote {
  font-style: italic;
  font-size: 28px;
  line-height: 1.6;
  border-left: 4px solid #999;
  padding-left: 20px;
  color: #333;
}

/* --- Hervorgehobener Textblock --- */
.highlight-text {
  background-color: #f8f4ec; /* sanftes Beige, kannst du ändern */
  border-left: 5px solid #c5a880;
  padding: 40px 60px;
  margin: 50px auto;
  max-width: 900px;
  font-size: 18px;
  line-height: 1.7;
  font-family: 'Georgia', serif;
}

/* --- Text-Bild-Block --- */
.text-bild-block {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 60px auto;
  max-width: 1100px;
  flex-wrap: wrap;
}

.text-bild-block img {
  width: 45%;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.text-bild-block div {
  width: 50%;
}

.text-bild-block h2 {
  margin-top: 0;
}

.text-bild-block p {
  line-height: 1.6;
}

/* --- Mobile Ansicht --- */
@media (max-width: 768px) {
  .text-bild-block {
    flex-direction: column;
  }

  .text-bild-block img,
  .text-bild-block div {
    width: 100%;
  }

  .section-header {
    padding: 60px 20px;
  }

  .section-header h1 {
    font-size: 40px;
  }

  .section-header p {
    font-size: 18px;
  }
}

.hauptsaeulen {
  margin: 60px auto;
  max-width: 1100px;
}

.hauptsaeulen-grid {
  display: grid;
  grid-template-columns: 2fr 1fr; /* Text | Bild */
  gap: 30px 40px;
  align-items: start;
}

/* Titel über volle Breite */
.haupttitel {
  grid-column: 1 / -1;
  margin-bottom: 20px;
}

/* Text */
.saeule-text h3 {
  margin-top: 0;
}

/* Bilder */
.hauptsaeulen-grid img {
  width: 100%;
  max-width: 260px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* 📱 Handy */
@media (max-width: 768px) {
  .hauptsaeulen-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hauptsaeulen-grid img {
    margin: 0 auto 30px;
  }
}


.zitat-barock {
  position: relative;
  max-width: 900px;
  margin: 80px auto;
  padding: 50px 30px;
  text-align: center;
  font-style: italic;
  line-height: 1.7;
  color: inherit;
}

/* Gemeinsame Basis für oben & unten */
.zitat-barock::before,
.zitat-barock::after {
  content: "";
  display: block;
  height: 50px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 30px 0;
}

/* Oberer Barock-Schnörkel */
.zitat-barock::before {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 60'>\
<path d='M20 30 \
C80 5, 160 5, 220 30 \
S360 55, 420 30 \
S520 5, 580 30' \
stroke='%237a4a2e' stroke-width='2.5' fill='none'/>\
<path d='M300 10 \
C280 30, 280 30, 300 50 \
C320 30, 320 30, 300 10' \
stroke='%237a4a2e' stroke-width='2' fill='none'/>\
</svg>");
}

/* Unterer Barock-Schnörkel (gespiegelt) */
.zitat-barock::after {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 60'>\
<path d='M20 30 \
C80 55, 160 55, 220 30 \
S360 5, 420 30 \
S520 55, 580 30' \
stroke='%237a4a2e' stroke-width='2.5' fill='none'/>\
<path d='M300 10 \
C280 30, 280 30, 300 50 \
C320 30, 320 30, 300 10' \
stroke='%237a4a2e' stroke-width='2' fill='none'/>\
</svg>");
}

/* 📱 Mobile Optimierung */
@media (max-width: 600px) {
  .zitat-barock {
    padding: 35px 15px;
    font-size: 0.95rem;
  }

  .zitat-barock::before,
  .zitat-barock::after {
    height: 40px;
    margin: 20px 0;
  }
}
/* Bild mit Text & Rahmen */
.bild-mit-text {
  position: relative;
  max-width: 900px;              /* Bildgröße Desktop */
  margin: 60px auto;             /* zentriert + Abstand */
  border: 4px solid #7a4a2e;     /* Farbe wie h2 */
  border-radius: 12px;
  overflow: hidden;              /* Text bleibt im Bild */
}

.bild-mit-text img {
  width: 100%;
  display: block;
}

/* Text im Bild */
.bild-text {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 90%;
  padding: 15px 25px;

  background: rgba(255, 255, 255, 0.85); /* gut lesbar */
  color: #000;
  font-size: 1.2rem;
  text-align: center;
  font-style: italic;

  border-radius: 8px;
}

/* 📱 Mobile Optimierung */
@media (max-width: 768px) {
  .bild-mit-text {
    max-width: 95%;
    margin: 40px auto;
  }

  .bild-text {
    font-size: 1rem;
    padding: 12px 18px;
    bottom: 12px;
  }
}
.bild-text {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
}
.bild-text {
  background: rgba(0,0,0,0.55);
  color: white;
}

/* ===== HEADER STREIFEN Philosophie===== */
body.seite-barock .header-streifen {
  height: 280px;
  background: url("bilder/header.jpg") center/cover no-repeat;
  position: relative;
}

body.seite-barock .header-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

body.seite-barock .header-overlay h1 {
  color: white;
  font-size: 3rem;
  margin-bottom: 10px;
}

body.seite-barock .header-overlay p {
  color: white;
  font-size: 1.3rem;
}

/* ===== ZENTRIERTE TEXTE ===== */
body.seite-barock .zentrierter-text {
  max-width: 900px;
  margin: 50px auto;
  text-align: center;
  line-height: 1.6;
}

/* ===== GROSSE BILDER ===== */
body.seite-barock .grosses-bild {
  max-width: 1100px;
  margin: 60px auto;
}

body.seite-barock .grosses-bild img {
  width: 100%;
  border-radius: 12px;
}

/* ===== WECHSEL-ABSCHNITT ===== */
body.seite-barock .wechsel-abschnitt {
  max-width: 1100px;
  margin: 80px auto;
}

body.seite-barock .wechsel-abschnitt h2 {
  text-align: center;
  margin-bottom: 60px;
}

body.seite-barock .wechsel-block {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 60px;
}

body.seite-barock .wechsel-block p {
  flex: 1;
  line-height: 1.6;
}

body.seite-barock .wechsel-block img {
  width: 280px;
  border-radius: 10px;
}

/* LINKS / RECHTS */
body.seite-barock .wechsel-block.links {
  flex-direction: row;
  text-align: left;
}

body.seite-barock .wechsel-block.rechts {
  flex-direction: row-reverse;
  text-align: right;
}

/* LETZTER TEXT */
body.seite-barock .abschluss-text {
  text-align: center;
  max-width: 800px;
  margin: 60px auto 0;
  line-height: 1.6;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .header-overlay h1 {
    font-size: 2rem;
  }

  body.seite-barock .wechsel-block {
    flex-direction: column;
    text-align: center;
  }

  body.seite-barock .wechsel-block img {
    width: 100%;
    max-width: 320px;
  }
}

.seite-barock section {
  background-color: transparent;
  margin: 60px auto;
  padding: 40px 20px;
}

/* Philosophie-Seite: Abstand Text → Zitat verkleinern */
.seite-barock .zentrierter-text {
  margin-bottom: 20px;   /* vorher 50px */
}

.seite-barock .zitat-barock {
  margin-top: 30px;      /* vorher 80px */
}

@media (max-width: 768px) {
  .seite-barock .zentrierter-text {
    margin-bottom: 15px;
  }

  .seite-barock .zitat-barock {
    margin-top: 20px;
  }
}

/* Philosophie-Seite: große Bilder kleiner & ruhiger */
.seite-barock .grosses-bild {
  max-width: 550px;   /* ca. halb so breit wie vorher */
  margin: 40px auto;
}

@media (max-width: 768px) {
  .seite-barock .grosses-bild {
    max-width: 90%;
  }
}

/* Philosophie-Seite: große Bilder kleiner (erzwingt Override) */
body.seite-barock .grosses-bild {
  max-width: 550px !important;
  margin: 40px auto !important;
}

body.seite-barock .grosses-bild img {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* ===== Untermenü einklappbar nur am Handy ===== */
.submenu-wrapper {
  margin: 20px;
}

/* Button standard: versteckt (Desktop) */
.submenu-toggle {
  display: none;
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: 10px;
  background: #f0e0d6;
  color: #4b3b2b;
  font-weight: bold;
  font-size: 1.05rem;
  text-align: center;
  cursor: pointer;
}

/* Handy: Button sichtbar + Menü standardmäßig zu */
@media (max-width: 768px) {
  .submenu-toggle {
    display: block;
  }

  /* Menü am Handy standardmäßig verstecken */
  .submenu {
    display: none;
    margin-top: 10px;
  }

  /* wenn offen */
  .submenu.open {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .submenu a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(240, 224, 214, 0.75);
  }
}

/* ===== Startbild: Text kleiner & tiefer – NUR Handy ===== */
@media (max-width: 768px) {
  .section-start {
    height: 240px;              /* bleibt querformatig */
    padding: 0;
    position: relative;
  }

  .section-start h1 {
    position: absolute;
    bottom: 70px;               /* weiter nach unten */
    left: 50%;
    transform: translateX(-50%);
    margin: 0;

    font-size: 1.9em;           /* kleiner als jetzt */
    line-height: 1.1;
    text-align: center;
    width: 90%;
  }

  .section-start p {
    position: absolute;
    bottom: 40px;               /* noch weiter unten */
    left: 50%;
    transform: translateX(-50%);
    margin: 0;

    font-size: 0.95em;          /* deutlich kleiner */
    text-align: center;
    width: 90%;
  }
}


/* Startbild: schräger halbtransparenter Übergang (einheitlich) */
.section-start {
  position: relative;
  overflow: hidden;
}

/* Desktop */
.section-start::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;

  height: 150px;

  background: linear-gradient(
    to bottom,
    rgba(240, 224, 214, 0.0),
    rgba(240, 224, 214, 0.85)
  );

  clip-path: polygon(0 35%, 100% 0%, 100% 100%, 0% 100%);
}

/* 📱 Handy: deutlich niedriger */
@media (max-width: 768px) {
  .section-start::after {
    height: 30px;
  }
}

/* Startseite: Startbild unten gerade */
.section-start {
  border-radius: 20px 20px 0 0;   /* unten 0 */
  margin: 20px 20px 0 20px;       /* kein Abstand nach unten */
}

/* Startseite: erster Textblock oben gerade */
.section-start + section {
  margin-top: 0;
  border-radius: 0 0 20px 20px;   /* oben 0, unten rund */
}
@media (max-width: 768px) {
  .section-start {
    border-radius: 18px 18px 0 0;
    margin: 14px 14px 0 14px;
  }

  .section-start + section {
    border-radius: 0 0 18px 18px;
    margin: 0 14px 14px 14px;
  }
}

/* ===== STARTSEITE: Übergang & Ecken erzwingen (ganz am Ende lassen) ===== */

/* Übergangshöhe Desktop */
.section-start::after{
  height: 120px !important;
}

/* Übergangshöhe Handy */
@media (max-width: 768px){
  .section-start::after{
    height: 30px !important;   /* wenn du halb so hoch willst: 15px */
  }
}

/* Ecken: Bild unten gerade, oben rund */
.section-start{
  border-radius: 20px 20px 0 0 !important;
  margin: 20px 20px 0 20px !important;
}

/* Ecken: erster Textblock oben gerade */
.section-start + section{
  margin-top: 0 !important;
  border-radius: 0 0 20px 20px !important;
}

/* 🔧 FIX: Hamburger-Menü IMMER klickbar */
.navbar {
  position: sticky;
  top: 0;
  z-index: 9999;
}

.menu-toggle {
  position: relative;
  z-index: 10000;
}

/* Alles unter der Navbar darf sie NICHT überdecken */
.section-start,
.section-start::after,
.header-streifen,
.header-overlay {
  z-index: 1;
  pointer-events: auto;
}

/* ===== GLOBAL FIX: Hamburger-Menü immer klickbar (alle Seiten) ===== */
.navbar{
  position: sticky !important;
  top: 0 !important;
  z-index: 999999 !important;
}

.navbar *{
  pointer-events: auto !important;
}

.menu-toggle{
  position: relative !important;
  z-index: 1000000 !important;
}

/* Pseudo-Elemente/Overlays sollen niemals Klicks abfangen */
*::before,
*::after{
  pointer-events: none !important;
}

@media (max-width: 768px) {
  body.seite-start .bild-mit-text .bild-text {
    font-size: 0.85rem;
    line-height: 1.4;

    /* zentriert */
    text-align: center;

    /* breiter & ruhiger */
    width: calc(100% - 32px);
    max-width: none;

    /* etwas höher setzen */
    bottom: 30px;          /* vorher z. B. 10px */
    top: auto;

    left: 50%;
    transform: translateX(-50%);

    padding: 12px 14px;
    border-radius: 10px;

    background: rgba(0,0,0,0.45);
    color: white;
  }
}

@media (max-width: 480px) {
  body.seite-start .bild-mit-text .bild-text {
    font-size: 0.8rem;
    bottom: 26px;   /* noch ein Tick höher */
  }
}

/* 📱 Startbild am Handy: direkt unter Menü, volle Breite */
@media (max-width: 768px) {

  /* Menü ohne Abstand nach unten */
  .navbar {
    margin-bottom: 0 !important;
  }

  /* Startbild ohne Außenabstand & volle Breite */
  .section-start {
    margin: 0 !important;        /* kein Abstand außen */
    border-radius: 0 !important; /* keine Rundung -> wirkt wie "anschließend" */
    width: 100% !important;
  }
}

/* 📱 Startseite: Startbild unten wieder rund (inkl. Übergang) */
@media (max-width: 768px) {
  .section-start {
    border-radius: 0 0 18px 18px !important; /* nur unten rund */
    overflow: hidden !important;            /* wichtig: Übergang wird mit abgerundet */
  }
}

/* 📱 Startseite: Text beginnt weiter oben im Textblock */
@media (max-width: 768px) {
  .start-text {
    padding-top: 18px !important;
  }

  .start-text p:first-child {
    margin-top: 0 !important;
  }
}
/* 📱 Delfin-Horsetraining – Header als Streifen, ganzes Bild sichtbar */
@media (max-width: 768px) {

  body.delfin-horsetraining .section-header,
  body.delfin-horsetraining .header-streifen {
    height: 180px;                 /* Streifen statt Hochformat */
    background-size: contain;      /* GANZES Bild sichtbar */
    background-repeat: no-repeat;
    background-position: center top;
  }

  body.delfin-horsetraining .header-overlay {
    padding: 20px 15px;
  }

  body.delfin-horsetraining .header-overlay h1 {
    font-size: 1.6rem;             /* kleiner, aber präsent */
    margin-bottom: 6px;
  }

  body.delfin-horsetraining .header-overlay p {
    font-size: 1rem;
  }
}
/* 📱 NUR Delfin-Horsetraining: Header full width + Text im Bild */
@media (max-width: 768px) {
  body.delfin-horsetraining .section-header,
  body.delfin-horsetraining .header-streifen {
    width: 100vw !important;           /* volle Bildschirmbreite */
    margin: 0 !important;              /* kein Rand */
    border-radius: 0 !important;       /* keine Rundung */
    height: 170px !important;          /* Streifen-Höhe */
    padding: 0 !important;

    background-size: cover !important; /* füllt Fläche, Text bleibt im Bild */
    background-position: center 30% !important;
    background-repeat: no-repeat !important;
  }

  /* Overlay/Text wieder INS Bild zwingen */
  body.delfin-horsetraining .header-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 12px 14px !important;
    background: rgba(0,0,0,0.35) !important; /* Lesbarkeit */
  }

  body.delfin-horsetraining .header-overlay h1 {
    font-size: 1rem !important;   /* kleiner */
    margin: 0 0 6px 0 !important;
    color: #fff !important;
    line-height: 1.1 !important;
  }

  body.delfin-horsetraining .header-overlay p {
    font-size: 0.85rem !important;   /* kleiner */
    margin: 1 !important;
    color: #fff !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 768px) {
  body.delfin-horsetraining {
    margin: 0 !important;
    padding: 0 !important;
  }
}
/* 📱 NUR Delfin-Horsetraining: genau dieses Zitat kleiner */
@media (max-width: 768px) {

  body.delfin-horsetraining section.zitat {
    max-width: 90%;
    margin: 25px auto;
    padding: 18px 14px;
  }

  body.delfin-horsetraining section.zitat blockquote {
    font-size: 0.95rem;     /* Schrift kleiner */
    line-height: 1.45;
    margin: 0;
  }
}
@media (max-width: 768px) {

  body.delfin-horsetraining .header-streifen,
  body.delfin-horsetraining .section-header {
    margin-top: 0 !important;
    border-radius: 0 !important;   /* keine Rundung */
  }

}
@media (max-width: 768px) {

  body.delfin-horsetraining .header-overlay h1 {
    font-size: 1.4rem;     /* deutlich kleiner */
    line-height: 1.2;
    margin-bottom: 6px;
  }

  body.delfin-horsetraining .header-overlay p {
    font-size: 0.85rem;
    line-height: 1.3;
  }

}
@media (max-width: 768px) {

  /* Header direkt ans Menü anschließen */
  body.delfin-horsetraining .section-header {
    margin: 0 !important;
    padding: 50px 15px 60px;   /* oben Platz für Text, unten fürs Bild */
    border-radius: 0 !important;

    background-size: cover;
    background-position: center;
  }

  /* Überschrift im Header deutlich kleiner */
  body.delfin-horsetraining .section-header h1 {
    font-size: 1.6rem;
    line-height: 1.2;
    margin-bottom: 10px;
  }

  /* Untertitel im Header kleiner */
  body.delfin-horsetraining .section-header p {
    font-size: 0.95rem;
    line-height: 1.3;
    max-width: 90%;
    margin: 0 auto;
  }

}
/* =========================================================
   MOBILE FIXES – nur Handy, nur gezielte Elemente/Seiten
   (ganz ans Ende der style.css)
   ========================================================= */
@media (max-width: 768px) {

  /* ----------------------------
     Delfin-Horsetraining
     ---------------------------- */

  /* Header: direkt ans Menü, weniger hoch, Text mittig im Bild */
  body.delfin-horsetraining .section-header{
    margin: 0 !important;
    border-radius: 0 !important;

    width: 100vw !important;
    max-width: 100% !important;

    height: 160px !important;              /* Streifen: weniger hoch */
    padding: 0 14px !important;            /* nur seitlich */

    display: flex !important;              /* Text mittig */
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;

    background-size: cover !important;
    background-position: center 30% !important;
    background-repeat: no-repeat !important;
  }

  body.delfin-horsetraining .section-header h1{
    font-size: 1.35rem !important;          /* kleiner */
    line-height: 1.15 !important;
    margin: 0 0 6px 0 !important;
  }

  body.delfin-horsetraining .section-header p{
    font-size: 0.9rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    max-width: 95% !important;
  }

  /* Highlight-Text: gleiche Größe wie dein Zitat-Blockquote */
  body.delfin-horsetraining .highlight-text{
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    padding: 22px 16px !important;
    max-width: 92% !important;
    margin: 25px auto !important;
  }

  /* Text-Bild-Block: Bild zuerst, dann Überschrift & Text */
  body.delfin-horsetraining .text-bild-block{
    flex-direction: column !important;
    text-align: left !important;
    margin: 30px auto !important;
    padding: 0 14px !important;
  }
  body.delfin-horsetraining .text-bild-block img{
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto 14px auto !important;
  }
  body.delfin-horsetraining .text-bild-block div{
    width: 100% !important;
  }

  /* ----------------------------
     Ausbildungen
     ---------------------------- */

  /* Listen auf Handy linksbündig (nicht zentriert) */
  body.seite-ausbildungen .ausbildung-block ul,
  body.seite-ausbildungen .ausbildung-block li{
    text-align: left !important;
  }

  /* Unterpunkte: Bild zuerst, dann h3, dann Text */
  body.seite-ausbildungen .unterpunkt{
    flex-direction: column !important;
    text-align: left !important;
  }
  body.seite-ausbildungen .unterpunkt-bild{
    order: 1 !important;
    width: 100% !important;
  }
  body.seite-ausbildungen .unterpunkt-bild img{
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto 12px auto !important;
  }
  body.seite-ausbildungen .unterpunkt-text{
    order: 2 !important;
    width: 100% !important;
  }

  /* ----------------------------
     Philosophie (seite-barock)
     ---------------------------- */

  /* Header: direkt ans Menü, weniger hoch, keine Rundung, Text kleiner & mittig */
  body.seite-barock .header-streifen{
    margin: 0 !important;
    border-radius: 0 !important;

    width: 100vw !important;
    max-width: 100% !important;

    height: 160px !important;
    background-size: cover !important;          /* ruhiger Streifen */
    background-position: center 30% !important;
  }

  body.seite-barock .header-overlay h1{
    font-size: 1.35rem !important;              /* wie Delfin-Header */
    line-height: 1.15 !important;
    margin: 0 0 6px 0 !important;
  }

  body.seite-barock .header-overlay p{
    font-size: 0.9rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }

  /* Überschrift + Wechsel-Abschnitt: kein seitliches Scrollen */
  body.seite-barock .wechsel-abschnitt{
    max-width: 100% !important;
    width: 100% !important;
    margin: 40px auto !important;
    padding: 0 14px !important;
    overflow-x: hidden !important;
  }

  body.seite-barock .wechsel-abschnitt h2{
    overflow-wrap: anywhere !important;         /* bricht lange Wörter */
  }

  /* Wechsel-Blocks: Bild zuerst, dann Text darunter */
  body.seite-barock .wechsel-block{
    flex-direction: column !important;
    text-align: left !important;
    gap: 14px !important;
  }
  body.seite-barock .wechsel-block img{
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
  }

  /* ----------------------------
     Angebote – Vorschlag (nur Mobile)
     ---------------------------- */
  /* (Wenn du Bilder vor jedem h2 einfügst, werden sie so schön gestylt) */
  body.seite-angebote img.angebot-bild{
    display: block !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 18px auto 10px auto !important;
    border-radius: 14px !important;
  }

  /* ----------------------------
     Preise
     ---------------------------- */

  /* Listen linksbündig */
  body.seite-preise ul,
  body.seite-preise li{
    text-align: left !important;
  }

  /* Bild zwischen h1 und Inhalt (falls du es dort im HTML platzierst) */
  body.seite-preise img.preise-hero{
    display: block !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 16px auto 18px auto !important;
    border-radius: 14px !important;
  }
}

/* Angebote: Mobile-Bilder nur am Handy anzeigen */
.mobile-only { display: none; }

@media (max-width: 768px) {
  body.seite-angebote .mobile-only { 
    display: block; 
    width: 100%;
    max-width: 520px;
    margin: 16px auto 10px auto;
    border-radius: 14px;
  }

  /* Desktop-Bildspalte am Handy ausblenden */
  body.seite-angebote .angebote-bild,
  body.seite-angebote .angebote-bilder-untereinander,
  body.seite-angebote .angebote-bilder {
    display: none !important;
  }
}
@media (max-width: 768px) {
  body.seite-preise .preise-mobile-bild {
    display: block;
    width: 100%;
    max-width: 520px;
    margin: 14px auto 18px auto;
    border-radius: 14px;
  }

  /* Desktop-Bild rechts am Handy ausblenden */
  body.seite-preise .preise-bild {
    display: none !important;
  }
}
/* Preise: Mobile-Bild standardmäßig verstecken (Desktop) */
body.seite-preise .preise-mobile-bild {
  display: none !important;
}

/* Preise: am Handy Mobile-Bild zeigen + Desktop-Bild ausblenden */
@media (max-width: 768px) {
  body.seite-preise .preise-mobile-bild {
    display: block !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 14px auto 18px auto !important;
    border-radius: 14px !important;
  }

  body.seite-preise .preise-bild {
    display: none !important;
  }
}
/* =========================================================
   MOBILE FIXES – Delfin-Horsetraining + Philosophie (nur Handy)
   ========================================================= */
@media (max-width: 768px) {

  /* =========================
     Delfin-Horsetraining
     ========================= */

  /* verhindert horizontales Scrollen auf dieser Seite */
  body.delfin-horsetraining {
    overflow-x: hidden !important;
  }

  /* Header: NICHT 100vw (macht oft Scroll), sondern 100% */
  body.delfin-horsetraining .section-header {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;

    height: 160px !important;          /* bleibt so hoch wie jetzt */
    padding: 0 14px !important;

    background-size: cover !important;
    background-position: center 30% !important;
  }

  /* Highlight-Text: kleiner, schmaler, weniger wuchtig */
  body.delfin-horsetraining .highlight-text {
    max-width: 88% !important;         /* Rand links/rechts sichtbar */
    padding: 18px 14px !important;     /* etwas kompakter */
    margin: 18px auto !important;
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
  }

  /* Text-Bild-Blocks: Bild über h2, mehr "Rahmen" oben */
  body.delfin-horsetraining .text-bild-block {
    flex-direction: column !important;
    text-align: left !important;

    max-width: 92% !important;
    margin: 26px auto !important;
    padding: 18px 14px !important;     /* oben wieder mehr Abstand */
  }

  body.delfin-horsetraining .text-bild-block img {
    order: 1 !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto 12px auto !important;
  }

  body.delfin-horsetraining .text-bild-block div {
    order: 2 !important;
    width: 100% !important;
  }

  body.delfin-horsetraining .text-bild-block h2 {
    margin-top: 0 !important;          /* kein „klebt am Rand“ */
  }


  /* =========================
     Philosophie (seite-barock)
     ========================= */

  body.seite-barock {
    overflow-x: hidden !important;
  }

  /* Header: Breite sauber auf Handy, etwas weniger hoch */
  body.seite-barock .header-streifen {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;

    height: 140px !important;          /* etwas weniger hoch */
    background-size: cover !important;
    background-position: center 30% !important;
  }

  /* Abstand nach Header kleiner */
  body.seite-barock .header-streifen + .zentrierter-text {
    margin-top: 20px !important;       /* vorher sehr groß */
  }

  /* Wechsel-Abschnitt: Breite sicher passend + kein Seitenscroll */
  body.seite-barock .wechsel-abschnitt {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 14px !important;
    margin: 40px auto !important;
    overflow-x: hidden !important;
  }

  /* Überschrift und Text dürfen umbrechen */
  body.seite-barock .wechsel-abschnitt h2,
  body.seite-barock .wechsel-abschnitt p {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* Wechsel-Blöcke: Bild zuerst, dann Text */
  body.seite-barock .wechsel-block {
    flex-direction: column !important;
    text-align: left !important;
    gap: 14px !important;
  }

  body.seite-barock .wechsel-block img {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
  }
}
/* =========================================================
   FINAL OVERRIDE (nur Handy) – Delfin + Philosophie
   GANZ ANS ENDE der style.css!
   ========================================================= */
@media (max-width: 768px) {

  /* ---------- Delfin-Horsetraining: Header volle Handybreite ---------- */
  body.delfin-horsetraining { overflow-x: hidden !important; }

  body.delfin-horsetraining section.section-header{
    /* überschreibt dein allgemeines "section { margin:20px; border-radius:20px; }" */
    margin: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;

    height: 160px !important;      /* Höhe bleibt wie gehabt */
    padding: 0 14px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;

    background-size: cover !important;
    background-position: center 30% !important;
    background-repeat: no-repeat !important;
  }

  body.delfin-horsetraining section.section-header h1{
    font-size: 1.35rem !important;
    line-height: 1.15 !important;
    margin: 0 0 6px 0 !important;
  }
  body.delfin-horsetraining section.section-header p{
    font-size: 0.9rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    max-width: 95% !important;
  }

  /* ---------- Delfin-Horsetraining: Highlight noch kleiner/schlanker ---------- */
  body.delfin-horsetraining section.highlight-text{
    max-width: 84% !important;     /* noch schmaler -> mehr Rand */
    padding: 16px 12px !important;
    margin: 16px auto !important;
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
  }


  /* ---------- Philosophie: Header volle Handybreite + weniger hoch ---------- */
  body.seite-barock { overflow-x: hidden !important; }

  body.seite-barock section.header-streifen{
    margin: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;

    height: 130px !important;      /* weniger hoch */
    background-size: cover !important;
    background-position: center 30% !important;
    background-repeat: no-repeat !important;
  }

  body.seite-barock .header-overlay{
    padding: 10px 12px !important;
  }
  body.seite-barock .header-overlay h1{
    font-size: 1.35rem !important;
    line-height: 1.15 !important;
    margin: 0 0 6px 0 !important;
  }
  body.seite-barock .header-overlay p{
    font-size: 0.9rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }

  /* Abstand nach Header reduzieren */
  body.seite-barock section.header-streifen + section.zentrierter-text{
    margin-top: 18px !important;
  }

  /* ---------- Philosophie: Wechsel-Abschnitt darf NICHT breiter als Handy sein ---------- */
  body.seite-barock section.wechsel-abschnitt{
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 14px !important;
    margin: 32px auto !important;
    overflow-x: hidden !important;
  }

  body.seite-barock section.wechsel-abschnitt h2,
  body.seite-barock section.wechsel-abschnitt p{
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* Wechsel-Blöcke: Bild oben, Text darunter */
  body.seite-barock .wechsel-block{
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
    gap: 14px !important;
  }

  body.seite-barock .wechsel-block img{
    width: 100% !important;
    max-width: 420px !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  body.seite-barock .wechsel-block p{
    width: 100% !important;
  }
}
/* =========================================
   HANDY: globale Section-Ränder neutralisieren
   für ausgewählte Seiten
   ========================================= */
@media (max-width: 768px) {

  /* Delfin-Horsetraining */
  body.delfin-horsetraining section {
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
  }

  /* Philosophie */
  body.seite-barock section {
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
  }

}
@media (max-width: 768px) {

  body.delfin-horsetraining .section-header {
    height: 160px;
    padding: 0 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    background-size: cover;
    background-position: center;
  }

  body.delfin-horsetraining .section-header h1 {
    font-size: 1.4rem;
    margin-bottom: 6px;
  }

  body.delfin-horsetraining .section-header p {
    font-size: 0.9rem;
    line-height: 1.3;
  }

}
@media (max-width: 768px) {

  body.seite-barock .header-streifen {
    height: 130px;
    background-size: cover;
    background-position: center;
  }

  body.seite-barock .header-overlay h1 {
    font-size: 1.4rem;
    margin-bottom: 6px;
  }

  body.seite-barock .header-overlay p {
    font-size: 0.9rem;
  }

}
@media (max-width: 768px) {

  body.seite-barock .wechsel-abschnitt {
    padding: 0 16px;
  }

  body.seite-barock .wechsel-block {
    flex-direction: column;
    gap: 16px;
  }

  body.seite-barock .wechsel-block img {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

}
/* ===== FIX nur Handy: Delfin + Philosophie Header auf echte Handybreite ===== */
@media (max-width: 768px) {

  /* Seitliches Scrollen nur auf diesen Seiten verhindern */
  body.delfin-horsetraining,
  body.seite-barock {
    overflow-x: hidden !important;
  }

  /* --- Delfin: section-header ist ein <section> und erbt margin:20px -> raus damit --- */
  body.delfin-horsetraining section.section-header {
    margin: 0 !important;
    border-radius: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    /* volle Breite ohne "100vw"-Bug */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Text im Delfin-Header wieder mit seitlichem Innenabstand */
  body.delfin-horsetraining section.section-header > * {
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* --- Philosophie: header-streifen ebenfalls volle Breite --- */
  body.seite-barock section.header-streifen {
    margin: 0 !important;
    border-radius: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* --- Philosophie: wechsel-abschnitt darf NICHT breiter als Handy sein --- */
  body.seite-barock section.wechsel-abschnitt {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* sehr häufige Overflow-Quelle: lange Wörter/Links */
  body.seite-barock section.wechsel-abschnitt * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}
/* ===== Delfin-Horsetraining: Rundungen am Handy wieder aktivieren ===== */
@media (max-width: 768px) {

  /* Header bleibt eckig */
  body.delfin-horsetraining .section-header {
    border-radius: 0 !important;
  }

  /* Zitat */
  body.delfin-horsetraining section.zitat {
    border-radius: 20px !important;
  }

  /* Highlight-Text */
  body.delfin-horsetraining section.highlight-text {
    border-radius: 20px !important;
  }

  /* Text-Bild-Blöcke */
  body.delfin-horsetraining .text-bild-block {
    border-radius: 20px !important;
    padding-top: 30px; /* oberen Rand wieder etwas ruhiger machen */
  }

  /* Bilder in Text-Bild-Blöcken */
  body.delfin-horsetraining .text-bild-block img {
    border-radius: 15px !important;
  }
}
@media (max-width: 768px) {

  /* Hauptsäulen-Block abrunden */
  body.delfin-horsetraining section.hauptsaeulen {
    border-radius: 20px !important;
  }

}
@media (max-width: 768px) {

  /* Hauptsäulen – Ecken abrunden (Delfin-Seite, Handy) */
  section.hauptsaeulen {
    border-radius: 20px !important;
    overflow: hidden;
  }

}
@media (max-width: 768px) {

  /* Preise-Seite: Überschriften linksbündig auf Handy */
  .preise-content h1,
  .preise-content h2 {
    text-align: left !important;
  }

}
/* Untermenü einklappbar (Desktop + Handy) */
.submenu {
  display: none;
}

.submenu.show {
  display: flex;              /* bei dir sind Links untereinander */
  flex-direction: column;
  gap: 8px;
}

.submenu-toggle {
  display: block;
  margin: 20px auto 0;
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  background: #8b6d5c;
  color: white;
  font-weight: bold;
  cursor: pointer;
}
/* Desktop: Philosophie Header direkt ans Menüband */
@media (min-width: 769px) {
  body.seite-barock .header-streifen {
    margin-top: 0 !important;
  }
}
@media (min-width: 769px) {
  body.seite-barock section.header-streifen {
    margin: 0 !important;
  }
}
/* Ausbildungen: Submenu Toggle wie Textfeld einfärben */
.submenu-toggle {
  background: #f0e0d6 !important;
  color: #4b3b2b !important;
  border: 1px solid rgba(75, 59, 43, 0.25);
}
.submenu-toggle:hover {
  filter: brightness(0.97);
}
/* Desktop: Philosophie Header direkt ans Menüband */
@media (min-width: 769px) {
  body.seite-barock section.header-streifen {
    margin: 0 !important;
    border-radius: 0 !important;
  }
}
@media (min-width: 769px) {
  body.seite-barock section.zentrierter-text:first-of-type {
    margin-top: 20px;
  }
}