/* Custom overrides */
:root {
  --accent: #a6c5e9;
  --color-text: #4d4d4d;
}

body {
  color: #4d4d4d !important;
}

/* Optional: automatische Hover-Farbe (wenn vom Browser unterstützt) */
@supports (background-color: color-mix(in srgb, red, black)) {
    :root {
        --accent-hover: color-mix(in srgb, var(--accent), #000 15%);
    }
}

/* Akzentlinien (Header/Überschriften) von Rot -> Blau */
#header {
    border-bottom-color: var(--accent) !important;
}

header.major > :last-child {
    border-bottom-color: var(--accent) !important;
}

/* Link-Unterstreichung (border-bottom) von Rot -> Blau */
a {
    border-bottom-color: var(--accent) !important;
}

/* Sidebar Toggle (Hamburger) von Rot -> Blau */
#sidebar .toggle {
    border-bottom: 0 !important;
}

#sidebar .toggle:before {
    color: var(--accent) !important;
}

/* Bei manchen Breakpoints hat der Toggle ein Hintergrund-Element */
#sidebar .toggle:after {
    background: var(--accent) !important;
    opacity: 0.18;
}

#sidebar .toggle:hover:after {
    opacity: 0.28;
}

.highlight {
    background-color: #eef3f7;
    padding: 1em;
    border-radius: 8px;
    
}
.button-primary {
    background-color: #7e8fa0 !important;
    color: #000 !important;
}

/* Buttons (Theme-Klasse .button) von Rot -> Blau */
a.button,
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
    background-color: var(--accent) !important;
    box-shadow: inset 0 0 0 2px var(--accent) !important;
    color: #000 !important;
    border-bottom: 0 !important;
}

a.button:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
    background-color: var(--accent-hover, var(--accent)) !important;
    box-shadow: inset 0 0 0 2px var(--accent-hover, var(--accent)) !important;
    border-bottom: 0 !important;
}

/* Outline/Alt-Buttons (falls verwendet) */
a.button.alt,
.button.alt {
    background-color: transparent !important;
    color: var(--accent) !important;
    box-shadow: inset 0 0 0 2px var(--accent) !important;
    border-bottom: 0 !important;
}

a.button.alt:hover,
.button.alt:hover {
    background-color: var(--accent) !important;
    color: #000 !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
}

strong {
    font-weight: bold;
}


.notice {
    display: block;      /* statt inline-block */
    background-color: #d9e6f2;
    padding: 0.5em 1em;
    border-radius: 5px;
    margin: 1em 0;       /* Abstand oben/unten */
}


/* Link-Hoverfarbe ersetzen */
a:hover,
nav a:hover {
    color: var(--accent) !important;
    border-bottom-color: var(--accent) !important;
}

/* Linienfarbe ersetzen */
hr,
hr + * {
    border-color: #4a5a6a !important;
}



/* Mailadresse wie normaler Text ohne Unterstreichung */
#main a[href^="mailto:"] {
    background-color: #fff !important;  /* Weißer Hintergrund */
    color: #000 !important;             /* Schwarze Schrift */
    text-decoration: none !important;   /* Unterstreichung entfernen */
    padding: 0.1em 0.2em;
    border-radius: 3px;
    transition: color 0.3s, background-color 0.3s;
}

#main a[href^="mailto:"] {
    background-color: #eef3f7 !important;
    color: #000 !important;
    text-decoration: none !important;
    padding: 0.1em 0.2em;
    border-radius: 3px;
    display: inline-block;                 /* wichtig für transform */
    transition: transform 0.15s ease, 
                color 0.15s ease, 
                background-color 0.15s ease;
}

#main a[href^="mailto:"]:hover {
    transform: scale(1.03);
    color: #4a5a6a !important;
}



#main a.termin-link {
    background-color: #eef3f7 !important;
    color: #000 !important;
    text-decoration: none !important;
    padding: 0.1em 0.2em;
    border-radius: 3px;
    display: inline-block;
    transition: transform 0.15s ease, 
                color 0.15s ease, 
                background-color 0.15s ease;
}

#main a.termin-link:hover {
    transform: scale(1.03);
    color: #4a5a6a !important;
}


#startseite img {
    width: 100%;
    max-width: 1400px;
    height: auto;
    display: block;
    margin: 0;
}
#versuch ostseebild weniger unterabstand
/* Bild selbst */
.image.main img {
    display: block;   
    margin-bottom: 0; /* kein Abstand unter dem Bild */
    padding: 0;
}

/* Optional: Container */
.image.main.welcome-photo {
    margin-bottom: 0;  /* falls der Container selbst Abstand hat */
}

/* Section direkt darunter */
#startseite {
    margin-top: 0;     /* entfernt extra Abstand über der Section */
    padding-top: 0;    /* falls padding existiert */
}



        /* Ausnahme für Ostsee-Bild */
.image.main.welcome-photo {
   margin: 2em 0 1em 0 !important; 
    padding: 0 !important;     /* entfernt Padding */
}

.image.main.welcome-photo img {
    display: block;
    margin: 0 !important;      /* entfernt Abstand unter dem Bild */
    padding: 0 !important;
}

/* Section direkt darunter */
#startseite {
    margin-top: 0 !important;  /* entfernt Abstand über der Section */
    padding-top: 0 !important;
}





.image.main.welcome-photo picture,
.image.main.welcome-photo img {
  width: 100%;
  height: auto !important;  /* überschreibt framework-seitige Höhenangaben */
  object-fit: contain;
  display: block;
}


/* Bewerbungsfoto / Portraitbild "Über mich" */
#uebermich .image.left {
    max-width: 220px !important;  /* Container begrenzen */
}

#uebermich .image.left img {
    width: 100% !important;       /* Bild passt sich Container an */
    height: auto !important;      /* Höhe proportional */
}



/* Gruppenbild (Gruppentherapie) */
#gruppentherapie img {
    width: 100%;
    max-width: 600px;
    height: auto;
}

/* Praxisbilder */
#praxis img {
    width: 100%;
    max-width: 600px;
    height: auto;
}

/* Bild bei Beratung */
#beratung img {
    width: 100%;
    max-width: 500px;
    height: auto;
}

/* Abstand zwischen Portraitbild und Text bei "Über mich" */
#uebermich .image.left {
    margin-right: 20px;   /* Abstand nach rechts */
    float: left;          /* stellt sicher, dass Text daneben fließt */
    max-width: 220px !important;  /* wie vorher */
}

#uebermich ul {
    overflow: hidden;     /* verhindert, dass der Text um das Bild herumläuft */
}



#sidebar ul li ul.submenu {
    display: block;
    padding-left: 1.2em;
    margin-top: 0.3em;
}

#sidebar ul li ul.submenu li a {
    font-size: 0.9em;
    color: #4a5a6a;
    text-decoration: none;
}

#sidebar ul li ul.submenu li a:hover {
    color: #2c3e50;
}



#impressum,
#datenschutz,
#barrierefreiheit {
    display: none;
}


.einzug {
    margin-left: 30px;       /* Einrückung */
    position: relative;
}

.einzug::before {
    content: "→ ";
    position: absolute;
    left: -20px;
}


.section-divider {
  border: none;              /* Standard-Border entfernen */
  height: 1px;               /* Linienhöhe */
  background-color: #e0e0e0; /* Hellgrau */
  margin: 40px 0;            /* Abstand oben/unten */
}



#versuch das menü sympbol sichbar zu machen


#versuch die impressum leiste zu fixieren


#footer-links {
    position: fixed;      /* immer sichtbar */
    bottom: 0;            /* am unteren Rand des Viewports */
    left: 50%;            /* horizontal zentrieren */
    transform: translateX(-50%); /* wirklich zentrieren */
    background-color: rgba(255, 255, 255, 0.9); /* optional leicht transparent */
    padding: 0.5em 1em;   /* Abstand innen */
    z-index: 1000;        /* über allem */
    text-align: center;
}

#footer-links a {
    color: #888;
    font-size: 0.8em;
    text-decoration: none;
}

#footer-links a:hover {
    color: #555;
}

/* Optional: Content-Padding, damit nichts verdeckt wird */
body {
    padding-bottom: 2.5em;
}


#footer-links {
    position: fixed;      /* bleibt immer sichtbar */
    bottom: 0;            /* am unteren Bildschirmrand */
    left: 50%;            /* horizontal zentriert */
    transform: translateX(-50%); /* wirklich zentrieren */
    background-color: rgba(255,255,255,0.9); /* optional leicht transparent */
    padding: 0.5em 1em;
    z-index: 1000;        /* über allem */
    text-align: center;
}

#footer-links a {
    color: #888;
    font-size: 0.8em;
    text-decoration: none;
}

#footer-links a:hover {
    color: #555;
}

/* Platz lassen, damit Content nicht hinter der Leiste verschwindet */
body {
    padding-bottom: 2.5em; /* entspricht Höhe der Leiste */
}

#versuch ohne javascript
#footer-bar {
    position: fixed;       /* immer sichtbar */
    bottom: 0;             /* ganz unten */
    left: 0;               /* linksbündig */
    width: 100%;           /* volle Breite */
    background-color: #f9f9f9; /* dezenter Hintergrund */
    border-top: 1px solid #ddd; /* Trennlinie */
    padding: 0.7em 1em;    /* Abstand innen */
    text-align: center;    /* Links zentrieren */
    z-index: 1000;         /* über allem */
    box-shadow: 0 -1px 3px rgba(0,0,0,0.05); /* optional: Schattenkante */
}

#footer-bar a {
    color: #888;
    font-size: 0.9em;
    text-decoration: none;
    margin: 0 0.5em;      /* Abstand zwischen Links */
}

#footer-bar a:hover {
    color: #555;
}

/* Platz lassen, damit Content nicht hinter der Leiste verschwindet */
body {
    padding-bottom: 3em;  /* entspricht Höhe der Leiste */
}


#versuch impressum in sidebar 
/* Flex-Container für Sidebar, damit Footer unten bleibt */
#sidebar .inner {
    display: flex;
    flex-direction: column;
    height: 100vh; /* volle Sidebar-Höhe */
}

/* Menü nimmt den verfügbaren Platz */
#menu > ul {
    flex: 1;
    overflow-y: auto; /* falls Menü zu lang ist */
}

/* Footer-Link links unten */
#menu .sidebar-footer {
    margin-top: 2em; /* schiebt die Links ans untere Ende */
    list-style: none;
    padding-left: 0;
    border-top: 1px solid #ddd; /* feine Trennlinie oben */
}

#menu .sidebar-footer li a {
    font-size: 1em;
    color: #888;       /* dezent */
    text-decoration: none;
    padding: 0.5em 0;  /* Abstand nach oben/unten */
}

#menu .sidebar-footer li a:hover {
    color: #555;
}

#impressum, #datenschutz {
    display: none; /* standardmäßig versteckt */
}





/* Hinweistext nicht klickbar, aber wie die Links stylen */
#menu .sidebar-footer li.sidebar-footer-text {
    color: #4a5a6a;          /* gleiche Farbe wie Menüpunkte */
    font-size: 2em;         /* gleiche Schriftgröße wie die Sidebar */
    text-decoration: none;     /* kein Unterstrich */
    cursor: default;           /* kein Mauszeiger beim Hover */
    padding: 0.5em 0;          /* Abstand oben/unten wie die Links */
}


.sidebar-footer-text {
    font-size: 1rem;
    opacity: 0.7;
    margin-top: 10px;
}



#versuch abstand unter h3 verringern 

<h3 style="margin-bottom: 5px;">
  <p class="notice" style="background-color: yellow;">
    <strong>Gesunder Selbstwert - Online</strong>
  </p>
</h3>


#versuch sidebar ab impressung nach unten bündig zu machen

/* Sidebar Flexbox */
#sidebar > .inner {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 100% !important;
    padding-top: 2.5em !important;
    padding-bottom: 2.5em !important;
}

/* Menu nimmt nur nötigen Platz */
#menu {
    flex: 0 1 auto;
}

/* Footer bleibt unten */
.sidebar-footer {
    flex: 0 0 auto;
    margin-top: auto;
}

.sidebar-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-footer ul li {
    padding: 0.5em 0;
}

/* Mobile */
@media screen and (max-width: 1280px) {
    #sidebar > .inner {
        min-height: auto !important;
    }
}

#optisch die menüpunkte wieder an vorlage anpassen

/* Footer Links in normalem Grau/Schwarz wie obere Menüpunkte */
.sidebar-footer a {
    color: inherit;
}

.sidebar-footer a:hover {
    color: var(--accent);
}

/* Footer Links in normalem Grau/Schwarz wie obere Menüpunkte */
.sidebar-footer a {
    color: #7f888f !important;
}

.sidebar-footer a:hover {
    color: var(--accent) !important;
}

/* Copyright Text größer */
.sidebar-footer ul li:last-child {
    font-size: 1rem;
}

.section-title {
    font-size: 1.3em;
}

.about-me {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: 100%;           /* Container volle Breite */
  margin: 0;
  padding-top: 40px;
  padding-bottom: 40px;
  box-sizing: border-box;
}
/* Liste rechts vom Bild */
.text-list {
  flex: 1;               /* nimmt restlichen Platz bis zum rechten Rand */
  padding-left: 0;
  margin: 0;
}
/* Bulletpoints wiederherstellen */
#uebermich ul {
    overflow: visible; /* vorher hidden */
    padding-left: 1.2em; /* Platz für Bullet-Points */
    margin: 0;
}


/* Portraitbild */
.portrait {
  width: 350px;               /* Bildgröße */
  height: 350px;
  border-radius: 50%;         /* rund */
  object-fit: cover;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12); /* Schatten */
  flex-shrink: 0;             /* Bild nicht kleiner ziehen */
}



/* Section-Divider */
.section-divider {
  border: none;
  height: 1px;
  background-color: #e0e0e0;
  margin: 40px 0;             /* Abstand über und unter der Linie */
}

/* Responsive für mobile Geräte */
@media (max-width: 700px) {
  .about-me {
    flex-direction: column;   /* Bild oben, Liste darunter */
    align-items: center;
    text-align: center;
  }

  .portrait {
    width: 250px;
    height: 250px;
    margin-bottom: 16px;
  }

  .text-list {
    list-style-position: outside;
  }
}


/* schriften

/* ===== Open Sans ===== */
@font-face {
    font-family: 'Open Sans';
    src: url('assets/fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('assets/fonts/OpenSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('assets/fonts/OpenSans-Bold.ttf') format('truetype');
    font-weight: 800; /* Extra Bold */
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('assets/fonts/OpenSans-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Open Sans';
    src: url('assets/fonts/OpenSans-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: 'Open Sans';
    src: url('assets/fonts/OpenSans-BoldItalic.ttf') format('truetype');
    font-weight: 800; /* Extra Bold Italic */
    font-style: italic;
}

/* ===== Roboto Slab ===== */
@font-face {
    font-family: 'Roboto Slab';
    src: url('assets/fonts/RobotoSlab-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto Slab';
    src: url('assets/fonts/RobotoSlab-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto Slab';
    src: url('assets/fonts/RobotoSlab-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

/* ===== Anwendung ===== */
body {
    font-family: 'Open Sans', sans-serif;
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'Roboto Slab', serif;
}

#sidebar .toggle {
  background-color: #fff !important;
}

#sidebar .toggle {
  background-color: #fff !important;
}

#sidebar .toggle:before {
  font-family: none !important;
  content: '' !important;
  display: block !important;
  width: 1.8rem !important;
  height: 4px !important;
  background: #a6c5e9 !important;
  border-radius: 3px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -12px) !important;
  box-shadow: 0 12px 0 #a6c5e9, 0 24px 0 #a6c5e9 !important;
}

/* Versuch, die abstände über den überschriten anzugleichen

/* Einheitlicher Abstand über allen Sections */
#main > section {
    margin-top: 3em;
}

/* Oder gezielt für die betroffenen */
#angebot,
#einzeltherapie {
    margin-top: 3em;
}

/* liste unter über mich linksbündig in mobiler version */

@media (max-width: 700px) {
  .about-me {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .about-me ul.text-list {
    text-align: left;
    align-self: flex-start;  /* verhindert Zentrierung durch align-items */
    width: 100%;             /* volle Breite nutzen */
  }
}


.quellen-text {
    font-size: 0.85em;
    color: #666;
}

.quellen-toggle {
    color: inherit;
}

.quellen-toggle:hover {
    text-decoration: none;
}


/* Toggle für FAQ, damit es ein- und ausgeblendet wird */


  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }
  .faq-answer.faq-open {
    max-height: 1000px; /* groß genug für jede Antwort */
  }
  .faq-question {
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
  }
  .faq-question:hover {
    opacity: 0.8;
  }
  .faq-arrow {
    font-size: 0.8em;
    transition: transform 0.3s;
    flex-shrink: 0;
    margin-left: 1em;
  }
  .faq-arrow.faq-open {
    transform: rotate(180deg);
  }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  padding-top: 0;
}
.faq-answer.faq-open {
  max-height: 1000px;
  padding-top: 0.75em; /* Abstand hier anpassen */
}