/* standardfarben ändern */
:root {
  --cassiopeia-color-primary: #4a4a4a;
  --cassiopeia-color-link: #e50041;
  --cassiopeia-color-hover: #ffffff;
  --hgrau: #cac9c5;
  --dgrau: #4a4a4a;
  --gruen: #339979;
  --gold: #c9ae5d;
  --gold-hell: #f2e5bd;
  --red: #e50041;
  --cassiopeia-font-weight-headings: 300;
}
/* Linkfarbe ändern */
a { color: var(--gold-hell); }
a:hover {
  color: var(--dgrau);
  background-color: var(--gold-hell);
}
@font-face {
  font-family: "Raleway";
src: url("../fonts/Raleway-VariableFont_wght.ttf") format("truetype");
}
h1 { 
  font-family: 'Raleway';
  font-weight: 700;
  color: var(--gold);
} 
h2, h3, h4 {
  font-family: 'Raleway';
   color: var(--gold-hell);  
}
body {
 line-height: 1.5;
 font-size: 110%;
 color: var(--hgrau);
}  
/* main-menu stylen   */

.container-header .mod-menu {
  color: var(--dgrau);
  justify-content: center;
}

.mod-menu {
  color: var(--dgrau);
  justify-content: center;
}
.mod-menu a:hover {
  background-color: var(--gold-hell);
  color: var(--dgrau);
}
.metismenu.mod-menu {
  justify-content: left;
}
.metismenu.mod-menu .metismenu-item.active > a {
  color: var(--dgrau); font-weight: bold;
}
/* Hamburger menue  */
.container-header .navbar-toggler {
 color: var(--dgrau);
 border-color: var(--dgrau);
}

body.site {
background-color: var(--dgrau);
background-size: cover;
}

.header {
background: var(--hgrau);
}
.container-header {
margin-top: 20px;
}
/*--Footer stylen mit ? Spalten --*/
.site-grid {
  margin-bottom: auto;
}
.footer .grid-child {
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: 2rem;
  padding-block-start: 1rem;
  padding-block-end: 1rem;
}
@media (width <= 991.98px) {
  .footer .grid-child {
    flex-direction: unset;
  }
}
.footer h3 {
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--gold);
}
.footer a:not(.btn):hover, .footer a:not(.btn):focus, .footer .btn-link:hover, .footer .btn-link:focus {
  color: var(--dgrau);
}
.footer {
  background-color: var(--hgrau);
  background-image: none;
}
.container-footer {
  margin-bottom: 20px;
}
.footer .menu-horizontal {
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}
/* weiterlesen-Button */
.btn-secondary {
    background-color: var(--gold-hell);
  }
.btn-secondary:hover {
    background-color: var(--gold);
  }
/*Zitate stylen */
blockquote{
    /*margin:50px auto;*/
  padding:1.2em 30px 1.2em 50px;
  border-left:4px solid var(--gold-hell);
  position: relative;
}

blockquote::before {
  display: inline;
  content: "\201D";
  font-size: 6em;
  position: absolute;
  left: 5px;
  top: 10px;
  color: var(--gold-hell);
 } 
 q {
  color: var(--gold-hell);
}


.Zeilenanfang {
  clear: both;
}
/*css für Sige ohne Rahmen*/
.sige_thumb img {
  display: inline-block;
  position: relative;
  background: #fff;
  border: 0px solid #ccc !important;
  margin: -5px 5px 5px -5px;
  padding: 0px !important;
  /*box-shadow: 6px 6px 8px grey!important;*/
  box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.5), 10px 8px 30px 0 rgba(0, 0, 0, 0.5)!important;
 /* box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.3), 0 12px 40px 0 rgba(0, 0, 0, 0.4);*/
}
/*-----------------------------------------------------------*/
/* Timeline-------------------------------- */
#timeline {
  position: relative;
  width: 100%;
  padding-inline: .5rem;
  margin: 30px auto;
}
#timeline:before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 100%;
  content: "";
  /*background-color: #3D8F75;*/
  background-color: var(--gold); 
  }
#timeline:after {
  display: table;
  width: 100%;
  clear: both;
  content: "";
}
.timeline-item:after,
.timeline-item:before {
  display: block;
  width: 100%;
  clear: both;
  content: "";
}
.timeline-item {
  position: relative;
  margin-bottom: 50px;
}
.timeline-item .timeline-icon {
  position: absolute;
  top: 0;
  left: 50%;
  width: 26px;
  height: 26px;
  margin-left: -23px;
  overflow: hidden;
  /*background-color: #3D8F75;*/
  background-color: var(--gold);  
  border-radius: 50%;
  /*border: 12px solid #fff;*/
  border: 12px solid var(--gold-hell);
  padding: 12px;
}
.timeline-item .timeline-content {
  width: 45%;
  padding: .5rem;
  /* background: #f4f4f4; */
  background: var(--hgrau);
  /*Schriftfarbe dunkelgrau */
  color: var(--dgrau);
  border-radius: var(--border-radius);
  /*box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);*/
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.2);
}
.timeline-item .timeline-content h2 {
  padding: .5rem;
  margin: -.5rem -.5rem .5rem -.5rem;
  font-size: 1.5rem;
  /*color: #fff;*/
  color: var(--gold-hell); font-weight: bold;
  /*background-color: #3D8F75;*/
  background-color: var(--gold);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.timeline-item .timeline-content p {
  margin-top: 1rem;
}
.timeline-item .timeline-content:before {
  position: absolute;
  top: 20px;
  left: 45%;
  width: 0;
  height: 0;
  content: "";
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  /*border-left: 7px solid #3D8F75;*/
  border-left: 7px solid var(--gold);
}
.timeline-item:nth-child(even) .timeline-content {
  float: right;
}
.timeline-item:nth-child(even) .timeline-content:before {
  right: 45%;
  left: inherit;
  content: "";
  /*border-right: 7px solid #3D8F75;*/
  border-right: 7px solid var(--gold);
  border-left: 0;
}

@media (max-width: 768px) {
  #timeline {
    width: 90%;
    padding: 0;
    margin: 30px;
  }
  #timeline:before {
    left: 0;
  }
  .timeline-item .timeline-content {
    float: right;
    width: 90%;
  }
  .timeline-item .timeline-content:before,
  .timeline-item:nth-child(even) .timeline-content:before {
    left: 10%;
    margin-left: -6px;
    /*border-right: 7px solid #3D8F75;*/
    border-right: 7px solid var(--gold);
    border-left: 0;
  }
  .timeline-item .timeline-icon {
    left: 0;
  }
}
/* ===========================================
   "Andrea Frister" – CSS-only, ohne JavaScript
   =========================================== */
/* ==========================================================
   Minimal sichere Version: Sichtbar + sanft fallend
   ========================================================== */
/* ===========================================
   Gold-Glow-Effekt – sanft pulsierendes Leuchten
   =========================================== */
.falling-title {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 2rem 0 3rem;
  perspective: 400px;

  /* Grundfarbe + Verlauf */
  color: #c9ae5d;

  animation: goldGlow 6s ease-in-out infinite;
}

/* Pulsierender Lichtverlauf (weicher Loop) */
@keyframes goldGlow {
  0%   { background-position: 0% 50%; opacity: 0.95; }
  25%  { background-position: 50% 50%; opacity: 1;   }
  50%  { background-position: 100% 50%; opacity: 0.95; }
  75%  { background-position: 50% 50%; opacity: 1;   }
  100% { background-position: 0% 50%; opacity: 0.95; }
}

/* Abstand zwischen Vor- und Nachname */
.falling-title .firstname {
  margin-right: 0.5em;
}

/* Sanft fallende Buchstaben */
.falling-title .firstname span,
.falling-title .lastname span {
  display: inline-block;
  opacity: 0;
  transform: translateY(-100px) rotateX(45deg);
  animation: fallSoft 1.8s cubic-bezier(0.25, 1, 0.3, 1) forwards;
}

/* Vorname Buchstaben-Delay */
.falling-title .firstname span:nth-child(1) { animation-delay: 0s; }
.falling-title .firstname span:nth-child(2) { animation-delay: 0.1s; }
.falling-title .firstname span:nth-child(3) { animation-delay: 0.2s; }
.falling-title .firstname span:nth-child(4) { animation-delay: 0.3s; }
.falling-title .firstname span:nth-child(5) { animation-delay: 0.4s; }
.falling-title .firstname span:nth-child(6) { animation-delay: 0.5s; }

/* Nachname Buchstaben-Delay */
.falling-title .lastname span:nth-child(1) { animation-delay: 0.7s; }
.falling-title .lastname span:nth-child(2) { animation-delay: 0.8s; }
.falling-title .lastname span:nth-child(3) { animation-delay: 0.9s; }
.falling-title .lastname span:nth-child(4) { animation-delay: 1.0s; }
.falling-title .lastname span:nth-child(5) { animation-delay: 1.1s; }
.falling-title .lastname span:nth-child(6) { animation-delay: 1.2s; }
.falling-title .lastname span:nth-child(7) { animation-delay: 1.3s; }

/* Keyframes: sanftes Fallen */

@keyframes fallSoft {
  0% {
    opacity: 0;
    transform: translateY(-100px) rotateX(45deg);
  }
  70% {
    opacity: 1;
    transform: translateY(5px) rotateX(0deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@supports not (-webkit-background-clip: text) {
  .falling-title {
    background: none;
    color: #c9ae5d;
  }
}

/* ===========================================
   Sichtbarer, weicher Gold-Glow (Endlosschleife)
   =========================================== */
.falling-title {
  color: #c9ae5d;
  text-shadow:
    0 0 8px rgba(201, 174, 93, 0.6),
    0 0 16px rgba(169, 139, 60, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.3);
  animation: goldGlow 4s ease-in-out infinite;
}

/* Pulsierende Lichtintensität */
@keyframes goldGlow {
  0% {
    text-shadow:
      0 0 6px rgba(201, 174, 93, 0.4),
      0 0 12px rgba(169, 139, 60, 0.3),
      0 2px 4px rgba(0, 0, 0, 0.2);
  }
  50% {
    text-shadow:
      0 0 14px rgba(201, 174, 93, 0.9),
      0 0 28px rgba(169, 139, 60, 0.7),
      0 3px 8px rgba(0, 0, 0, 0.35);
  }
  100% {
    text-shadow:
      0 0 6px rgba(201, 174, 93, 0.4),
      0 0 12px rgba(169, 139, 60, 0.3),
      0 2px 4px rgba(0, 0, 0, 0.2);
  }
}
/* Titel über Hamburger Menü */
@media (max-width: 991.98px) {
  button.navbar-toggler {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
  }

  button.navbar-toggler::before {
    content: "Menü";
    line-height: 1;
    font-size: .9rem;
  }
}
/* Mobile: "Menü" neben das Hamburger-Icon (links) */
@media (max-width: 991.98px) {

  button.navbar-toggler {
    display: inline-flex;
    flex-direction: row;
    align-items: center;

    width: auto;              /* wichtig: feste Breite aufheben */
    max-width: none;
    overflow: visible;        /* falls Cassiopeia clippt */
    white-space: nowrap;      /* nicht umbrechen */

    padding-inline: .75rem;   /* gibt Platz für Text */
    gap: .5rem;
  }

  button.navbar-toggler::before {
    content: "Menü";
    display: inline-block;
    line-height: 1;
    font-size: .95rem;
  }
}
@media (max-width: 400px) {
  button.navbar-toggler::before { font-size: .85rem; }
}