/*----------------------------------------------*/
/* Externe Links kennzeichnen */
a.external::after {
  content: "";
  display: inline-block;
  width: 16px;   /* Icon-Größe */
  height: 16px;
  margin-left: 4px;
  vertical-align: text-top;
    background-image: url("https://www.frankfurt-pt.de/images/external-link.png"); /* Icon im Template-Ordner */
  
  background-size: contain;
  background-repeat: no-repeat;
}

/*---------------------------------------------------------------*/
/* secondary Button in Cassiopeia anpassen */
.btn-secondary {
font-weight: 300;          /* leicht & modern */
  font-size: 1.05rem;        /* passt sich an root font-size an */
  line-height: 1.4;
  color: var(--text1);
  border-radius: 0.4rem;
}
.btn-secondary:hover,
.btn-secondary:focus {
  border-color: #3b0f4a;
}
/*---------------------------------------------------------------*/

/*--- Farbdefinition / Variablen ---*/
:root {
  --primary: #c0a0c8; /* z Logo  | od Oli   */
  --accent1: #e4e0da; /* #f5f493 | #e7d9cb; e0cfe5; #E8C9C4; #ececec;*/
  --accent2: #f5dbf0; /* #fad2ab | #f5dbf0; #BFD8C6*/
  --accent3: #e9d7e9; /* #c9d9ef | #f9c3f9; #f7cdf7 #B3CCE6*/
  --accent4: #eee5f1; /* #c1f5c0 | #eee5f1;  #C6B4B4*/
  --text1: #333; /* grau */
  --text2: #0056b3; /* blau */


}
h3.highlight {
  font-weight: 300;          /* leicht & modern */
  font-size: 1.55rem;        /* passt sich an root font-size an */
  line-height: 1.4;
  color: var(--text1);
  border-radius: 0.4rem;
}

h4.highlight {
  font-weight: 300;          /* leicht & modern */
  font-size: 1.25rem;        /* ca. 20px, passt sich an root font-size an */
  line-height: 1.4;
  color: var(--text1);
  background-color: var(--accent4);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  display: inline-block;
}
/* Für Smartphones (max. 600px Breite) */
@media (max-width: 600px) {
  h4.highlight {
    font-size: 1rem;    /* ca. 16px */
    padding: 0.4rem 0.8rem;
  }
}

/* Für Tablets (601px – 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
  h4.highlight {
    font-size: 1.125rem; /* ca. 18px */
  }
}

/* Für große Bildschirme (z. B. Desktop > 1200px) */
@media (min-width: 1200px) {
  h4.highlight {
    font-size: 1.5rem;   /* ca. 24px */
  }
}
/*---------alt h3.highlight------------------------------------------------------*/
h1 {
  font-weight: 300;          /* leicht & modern */
  font-size: 1.55rem;        /* passt sich an root font-size an */
  line-height: 1.4;
  color: var(--text1);
  border-radius: 0.4rem;
} 


/*---------------------------------------------------------------*/

h5.highlight {
  font-weight: 300;          /* leicht & modern */
  font-size: 1.0rem;        /* ca. 20px, passt sich an root font-size an */
  color: var(--text1);
  background-color: var(--accent4);
  padding: 0.3rem 0.6rem;
  border-radius: 0.5rem;
  display: inline-block;
}
h6.highlight {
  font-weight: 300;          /* leicht & modern */
  font-size: 1.0rem;        /* ca. 20px, passt sich an root font-size an */
  color: var(--text1);
  background-color: var(--accent4);
  padding: 0.001rem 0.4rem;
  border-radius: 0.5rem;
  display: inline-block;
}

h5.banki1 {
  font-weight: 300;          /* leicht & modern */
  font-size: 1.0rem;        /* passt sich an root font-size an */
  color: var(--text1);
  background-color: var(--accent1);
  padding: 0.3rem 0.6rem;
  border-radius: 0.3rem;
}
h5.banki2 {
  font-weight: 300;          /* leicht & modern */
  font-size: 1.0rem;        /* passt sich an root font-size an */
  color: var(--text1);
  background-color: var(--accent2);
  padding: 0.3rem 0.6rem;
  border-radius: 0.3rem;
}
h5.banki3 {
  font-weight: 300;          /* leicht & modern */
  font-size: 1.0rem;        /* passt sich an root font-size an */
  color: var(--text1);
  background-color: var(--accent3);
  padding: 0.3rem 0.6rem;
  border-radius: 0.3rem;
}
h5.banki4 {
  font-weight: 300;          /* leicht & modern */
  font-size: 1.0rem;        /* passt sich an root font-size an */
  color: var(--text1);
  background-color: var(--accent4);
  padding: 0.3rem 0.6rem;
  border-radius: 0.3rem;
}

/*-------------------------------------*/
/*---------------------------------------------------------------*/
/*Topbar -> Telefon/E-Mail*/
.container-topbar   {
  color: var(--text1);
  padding-top: 15px !important;
}



/*---------------------------------------------------------------*/

/*-------------------------------------*/
/* Accordion */
.accordion .nav-child {
  display: none;
  padding: 0.5rem 1rem;
  border-left: 2px solid #ccc;
}

.accordion input:checked + label + .nav-child {
  display: block;
}

.accordion .toggle {
  font-weight: 300;          /* leicht & modern */
  font-size: 1.25rem;        /* ca. 20px, passt sich an root font-size an */
  line-height: 1.4;
  color: var(--text1);
  background-color: var(--accent1);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  display: block;
  margin-bottom: 0.5rem; /* z. B. 8px */
}

/* Hover-Effekt */
.accordion .toggle:hover {
  font-weight: 300;          /* leicht & modern */
  font-size: 1.25rem;        /* ca. 20px, passt sich an root font-size an */
  line-height: 1.4;
  
  background: #e9ecef;   /* hellgrau */
  color: #0056b3;        /* blauer Text */
}

/* Optional auch für den aktiven Zustand */
.accordion input:checked + label.toggle {
  font-weight: 300;          /* leicht & modern */
  font-size: 1.25rem;        /* ca. 20px, passt sich an root font-size an */
  line-height: 1.4;
 
  background: #dee2e6;
}

.accordion .toggle::after {
  content: "▸";
  float: right;
  transition: transform 0.2s;
}

.accordion input:checked + label.toggle::after {
  transform: rotate(90deg);
}

/*---------------------------------------------------------------*/

/*---------------------------------------------------------------*/
/*Logo + Menü*/
.brand-logo img {
    max-width: 250px !important;
    height: auto !important;
  padding: 15px 0px !important;
}
.brand-logo {
    padding: 0px 10px 0px !important;
}
/*---------------------------------------------------------------*/
/* Header */
.container-header {
background-image: linear-gradient(135deg, #f3eee4 0%, #f3eee4 100%); /* #c0a0c8, #723a89 / #34ab8b / bfa6c7*/
}
/*---------------------------------------------------------------*/

/* Footer */

.footer  {
    color: #6a696a;
    background-color: #b673bf;
    background-image: linear-gradient(135deg, #f3eee4 0%, #f3eee4 100%); /* # FFFBF2 #fef6e3 */
    margin-top: 1em;
    padding: 15px 0;           /* oben/unten mehr Abstand */
  }
.footer a {
  color: #6a696a;            /* Standard-Linkfarbe */
  text-decoration: none;     /* Unterstreichung aus, falls gewünscht */
  padding: 5px 10px;         /* etwas "Klickfläche" */
  transition: all 0.3s ease; /* sanfter Übergang */
}

.footer a:hover {
  color: var(--text1) !important;   /* Textfarbe beim Hover */
  background-color: var(--accent4); /* Hintergrund beim Hover */
  border-radius: 5px;               /* abgerundete Ecken */
  text-decoration: none !important;  
}

/*---------------------------------------------------------------*/
/* Hintergrundfarbe des Hamburger-Buttons */
.navbar-toggler {
    background-color: #dbcfbb; /* Hintergrundfarbe Button */
    border-color: #ffffff;     /* Rahmenfarbe */
}
/* Farbe der drei Linien im Hamburger-Icon */
.navbar-toggler-icon {
    background-image: none; /* Entfernt Standard-Bild */
    width: 1.5em;
    height: 1.5em;
    position: relative;
}
/* Eigene Linienfarbe (weiß in diesem Beispiel) */
.navbar-toggler-icon::before,
.navbar-toggler-icon::after,
.navbar-toggler-icon div {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #ffffff; /* Linienfarbe */
    position: absolute;
    left: 0;
}
.navbar-toggler-icon::before {
    top: 0;
}
.navbar-toggler-icon::after {
    bottom: 0;
}

/*---------------------------------------------------------------*/
/* hero - Startseite Bild */
@media (min-width: 1024px) {
.box {
  width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
 }
  }
.hero {
  /*background-image: url('/images/lavendel1.png'); */
  /*background-image: url('/images/hg_hp2a.jpg'); */
  /*background-image: url('/images/hg9.png'); */
  /*background-image: url('/images/startseite-hg.png'); */
   background-image: linear-gradient(135deg, #dad3c8 0%, #eee5f1 100%);

  background-size: cover;
  background-position: center;
  border-radius: 10px;
  padding: 50px 50px;
  text-align: left;
  filter: brightness(1.02) contrast(1.0); /* 1.0 = normal, >1 heller, <1 dunkler | contrast(1.1);*/
  /* border-radius: 15px;  - runde Ecken*/
 }

/*--- Button Startseite ---*/
.btn-hero {
 /* background-color: rgba(216, 180, 254, 0.30); /*  15% Deckkraft */
  padding: 5px 10px;
  color: #683f27;
  text-decoration: none;
  border: 1px solid #b4afa7;
  font-weight: 300;          /* leicht & modern */
  font-size: 1.0rem;        /* passt sich an root font-size an */
  border-radius: 0.5rem;
}
/*---------------------------------------------------------------*/
/*--- Textfarbe global ---*/
body {
  color: var(--text1) !important; /* z. B. dunkles Grau – gut lesbar auf hellem Hintergrund */
  font-weight: 300;          /* leicht & modern */
  font-size: 1.05rem;        /* passt sich an root font-size an */
  line-height: 1.4;
  border-radius: 0.5rem;

  background: #f6f5f5 !important;
  /*background: #FFFBF2 !important;*/ 
}

/*---------------------------------------------------------------*/
/*--- 4 Karten je 1 pro Praxis ---*/


.praxis-card {
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  border-top: 5px solid var(--accent);
}
.praxis-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,.1);
}
.praxis-1 { --accent: var(--accent1); border-radius: 10px; }
.praxis-2 { --accent: var(--accent2); border-radius: 10px; }
.praxis-3 { --accent: var(--accent3); border-radius: 10px; }
.praxis-4 { --accent: var(--accent4); border-radius: 10px; }

.btn-accent {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #676464;
  border-radius: 8px;
  transition: background-color 0.2s ease-in-out;
}

.btn-accent:hover {
  background-color: color-mix(in srgb, var(--accent) 80%, #000 20%);
  border-color: color-mix(in srgb, var(--accent) 80%, #000 20%);
  color: #fff;
}

.praxis-card .card-text {
  color: #444; /* dunkles Grau, gut lesbar */
}
.praxis-card .card-title {
  color: #2e2e2e; /* Anthrazit | #3a0b52;  ein dunkler Lila-Ton */
}

/* Hintergrundfarbe (Beitrag) für Kategorie "ajPraxis" */
.ajpraxis-box {
 /* background-color: #F7F7F7;  #F7F7F7 #F2F2F2; #d0bbd7; #e0cfe5*/
  background-color: #fff !important; 
  padding: 30px 20px;
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  
}/* Hintergrundfarbe (Beitrag) für Kategorie "ajPraxis" */
.ajpraxis2-box {
  background-color: #eeebf0 !important; /* #F7F7F7 #F2F2F2; #d0bbd7; #e0cfe5 #ebe2f1*/
  padding: 30px 20px;
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}

/* Hintergrundfarbe (body) für Kategorie "ajPraxis" */
body.bg-ajpraxis {
  background-color: var(--accent1);
}
    
/* Hintergrundfarbe für Kategorie "p2Praxis" */
.p2praxis-box {
  background-color: #fff; /*#BFD8C6;*/
  padding: 2rem;
  border-radius: 10px;
  margin-bottom: 2rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  align-items: start;
}

/* Hintergrundfarbe (body) für Kategorie "p2Praxis" */
body.bg-p2praxis {
  background-color: #f5dbf0;
}

/* Hintergrundfarbe für Kategorie "p3Praxis" */
.p3praxis-box {
  background-color: #F2F2F2; /*#B3CCE6;*/
  padding: 2rem;
  border-radius: 10px;
  margin-bottom: 2rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}
/* Hintergrundfarbe (body) für Kategorie "p3Praxis" */
body.bg-p3praxis {
  background-color: #f9c3f9;
}

/* Hintergrundfarbe für Kategorie "p4Praxis" */
.p4praxis-box {
  background-color: #fff; /*#C6B4B4;*/
  padding: 2rem;
  border-radius: 10px;
  margin-bottom: 2rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}
/* Hintergrundfarbe (body) für Kategorie "p4Praxis" */
body.bg-p4praxis {
  background-color: #eee5f1;
}
/*---------------------------------------------------------------*/
/* Hintergrundfarbe für Kategorie "allgPraxis" */
.allgpraxis-box {
  background-color: #fff; /*#ecebf0;  #d0bbd7; #e0cfe5*/
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  border-radius: 5px;

    margin-bottom: 10px;
 /* box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);*/
}

/* Hintergrundfarbe für Kategorie "allgPraxis2" */
.allgpraxis2-box {
  background-color: #ebe2f1; /*#ecebf0;  #d0bbd7; #e0cfe5*/
  padding-top: 30px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 30px;

    margin-bottom: 10px;
 /* box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);*/
}
/*---------------------------------------------------------------*/
/* Hintergrundfarbe des Menüs */
/*.container-header .mod-menu {
  background-color: #dbcfbb !important; 
} */
/* Textfarbe der Menüeinträge */
.container-header .mod-menu a {
  color: #6a696a !important; /*  */
    padding-left: 5px;
    padding-right: 5px;
  border-radius: 5px;
}
/* Hover-Effekt für Menüeinträge */
.container-header .mod-menu a:hover {
  background-color: var(--accent4) !important; /*  */
    padding-left: 5px;
    padding-right: 5px;
}
/*---------------------------------------------------------------*/
/* Container für Layout Text - Bild - über mich & co*/
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end; /* wichtig: Elemente gleich hoch */
  max-width: 100% !important;
  }

.text-links {
    flex: 1 1 100%;
    padding: 10px;
}

.image-container {
    flex: 1 1 45%;
    padding: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end; /* Bild nach unten ausrichten */
}

.image-container img {
    width: 400px;
    height: auto; /* auto oder z.B. 200px, falls Höhe auch fix sein soll */
}
.image {
  align-self: start;   /* explizit Bild oben */
}

/* Responsiv: Wenn Bildschirm kleiner wird */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        align-items: left;
    }
    .text-links, .image-container {
        flex: 1 1 100%;  /* Stellt sicher, dass beide Elemente untereinander auf mobilen Geräten sind */
        text-align: left;
    }
}

.rounded-image-box {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-left: 0;
  flex-wrap: nowrap;
}

.rounded-image-box img {
  width: 200px;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  align-self: start;
  margin-top: 3rem;
  
}

.rounded-image-text {
  flex: 1;
}

/* RESPONSIVE: Bei kleinen Bildschirmen Bild oben, Text darunter */
@media (max-width: 600px) {
  .rounded-image-box {
    flex-direction: column;
    align-items: center;
    text-align: left;
  }

  .rounded-image-box img {
    margin-left: 0;
  }

  .rounded-image-text {
    flex: unset;
    width: 100%;
  }
}
/* Ende Container für Layout Text - Bild - über mich*/
/*---------------------------------------------------------------*/