:root {
  --gold: rgb(208, 163, 39);
  --inactiveColor: rgb(160,160,160);
  --inactiveColor2: rgb(150,150,150);
  --activeColor: rgb(255,255,255);
  --red: #c62828;
  --green: rgb(46, 125, 50);;
  --orange: #f9a825;
  --dt-column-ordering-color: white !important;
  --dt-html-background: rgba(30,30,30,0.7);
}



*,
*::before,
*::after { 
  box-sizing: border-box;
}


button {
  background: var(--gold);
  color:rgb(0, 0, 0);
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  filter: brightness(1.2);
}

@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v31-latin-regular.woff2') format('woff2');
}



@font-face {
  font-family: 'Helvetica';
  font-style: normal;
  font-weight: normal;
  src: local('Helvetica'), url('../fonts/Helvetica.woff') format('woff');
}


@font-face {
  font-family: 'Helvetica Compressed';
  font-style: normal;
  font-weight: normal;
  src: local('Helvetica Compressed'), url('../fonts/helvetica-compressed-5871d14b6903a.woff') format('woff');
}


@font-face {
  font-family: 'Helvetica Bold';
  font-style: normal;
  font-weight: normal;
  src: local('Helvetica Bold'), url('../fonts/Helvetica-Bold.woff') format('woff');
}


@font-face {
  font-family: 'Helvetica Light';
  font-style: normal;
  font-weight: normal;
  src: local('Helvetica Light'), url('../fonts/helvetica-light-587ebe5a59211.woff') format('woff');
}


html, body {
  margin: 0;
}

body {
  padding:          0 0 72px 0;
  margin:           0;
  position:         relative;
  background-color: rgb(30,30,30);
  color:            rgb(255,255,255);
  font-family:      'Helvetica', sans-serif;
  /* Verhindert, dass die ganze Seite bei Pull-to-Refresh wegspringt */
  overscroll-behavior-y: contain; 
  /* Ermöglicht das typische iPhone-Gummiband-Gefühl */
  -webkit-overflow-scrolling: touch;
}
@media only screen and (min-width: 600px) {
  body {
    padding: 0;
  }
}

h1 {
  font-size: 1.8rem;
}

h2 {
  font-size: 1.3rem;
  margin: 30px 0 10px 0;
  color: rgb(220, 220, 220);
}

input {
  padding:       10px;
  background:  #333;
  border:        1px solid #444;
  color:       white;
  border-radius: 5px;
  font-family:   'Helvetica', sans-serif;
  font-size:     1rem;
}
input:focus {
  outline: 2px solid var(--gold);
  border:  1px solid var(--gold)!important;
}



input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    /* WICHTIG: Die URL muss /2000/svg am Ende haben! */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}


select {
  padding:       0 10px;
  background:  #333;
  border:        1px solid #444;
  color:       white;
  border-radius: 5px;
  height:        40px;
}
select:focus {
  outline: 2px solid var(--gold);
}


.none-mobile-inline {
  display: none;
}
@media only screen and (min-width: 600px) {
  .none-mobile-inline {
    display: inline;
  }
}

/* Der Container des Schalters */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}

/* Verstecke die Standard-Checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Toggle Switch */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #444;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px; width: 18px;
  left: 4px; bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

/* Farbe wenn aktiviert (Gelb passend zu deinem Design) */
input:checked + .slider {
  background-color: var(--gold);
}

input:checked + .slider:before {
  transform: translateX(24px);
}

/* Deaktiviert-Status */
input:disabled + .slider {
  opacity: 0.3;
  cursor: not-allowed;
}


.hidden {
  display: none;
}


a {
  color: rgb(220,220,220);
  text-decoration: none;
}

a:hover {
  color: rgb(255,255,255);
  text-decoration: none;
}
a:visited {
  color: rgb(220,220,220);
  text-decoration: none;
}

/* fuer Seitenraender */
.wrapper-page {
  width:  90%;
  margin: 0 auto;
}
@media only screen and (min-width: 600px) {
  .wrapper-page {
    margin: 0 20px 40px 20px;
    width: auto;
  }
}


/* PTR */
#pull-to-refresh {
    position: fixed;
    top: -60px; /* Startet außerhalb des Sichtfelds */
    left: 0;
    right: 0;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transform: translateY(-100%); 
    /* transition: transform 0.2s cubic-bezier(0,0,0.31,1), opacity 0.2s; */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
    pointer-events: none;
    opacity: 0;
}

.refresh-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top: 3px solid var(--gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    background: #1a1a1a; /* Ein dunkler Hintergrund hilft bei der Sichtbarkeit */
    padding: 5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}




/* Loading */
/* Das Overlay fixiert über den ganzen Bildschirm */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Leicht abgedunkelt */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
}

/* Sichtbar-Klasse */
.loader-overlay.active {
    visibility: visible;
    opacity: 1;
}

/* Der Spinner selbst */
.spinner-large {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(241, 196, 15, 0.2);
    border-top-color: #f1c40f;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


/* toast  */
.toast-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
}

.toast {
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: toast-in 0.3s ease-out;
    box-shadow:              0 0 10px 1px rgba(0, 0, 0, 0.25);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter:         blur(9px);
}
.toast.error {
  background: var(--red);
  background: rgba(221, 83, 83,0.2);
  border: 1px solid var(--red);
  color: white;
} 
.toast.success {
  background: var(--green);
  background: rgba(46, 125, 50,0.2);
  border: 1px solid var(--green);
} 

@keyframes toast-in {
    from { transform: translateY(100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.toast.fade-out {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease-in;
}





/* .hidden {
  display: none;
}
*/
.error {
  color: var(--red);
}

.error-login {
  color:   var(--red);
  font-size: .9rem;
  margin: 5px 0;
}






/* Header */
.header {
  height:  4px;
  width:   100%;
  display: flex;
}
.header .black {
  background-color: #000;
  width:            33.33%;
}
.header .red {
  background-color: rgb(185,50,33);
  width:            33.33%;
}
.header .gold {
  background-color: var(--gold);
  width:            33.34%;
}


/* Profil Icon */
.profile {
  position:        absolute;
  z-index:         10;
  display:         flex;
  justify-content: flex-end;
  flex-direction:  column;
  flex-wrap:       wrap;
  align-items:     flex-end;
  top:             16px;
  right:           16px;
}

.profile > .profile-icon {
  width:               50px;
  height:              50px;
  font-size:           1.4rem;
  cursor:              pointer;
  border-radius:       50%;
  background-color:    var(--gold);
  cursor:              pointer;
  display:             flex;
  justify-content:     center;
  align-items:         center;
  background-position: center;
  background-size:     cover;
  color:               rgb(0,0,0);
}
@media only screen and (min-width: 600px) {
  .profile > .profile-icon {
    width:               36px;
    height:              36px;
    font-size:           1rem;
  }
}

.profile > .profile-icon:hover {
  filter: brightness(1.2);
}


.profile > .profile-menu > .profile-menu-border > .profile-menu-item {
  display:         block;
  text-decoration: none;
  color:           var(--inactiveColor);
  padding:         5px 0;
  font-size:       .9rem;
  cursor:          pointer;
}

.profile > .profile-menu > .profile-menu-border > .profile-menu-item:hover {
  text-decoration: none;
  color:           var(--activeColor);
}



/* Das Menü-Container Styling */
.profile-menu {
    position: absolute;
    top: 44px; /* Je nach Header-Höhe */
    right: 10px;
    /* background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5); */
    
    /* Animation-Setup */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* "Snappy" Bewegung */
    z-index: 1000;
}

.profile-menu.open {
  display: flex;
}

.profile-menu-border {
  margin:                  4px 0 0 0;
  width:                   120px;
  display:                 flex;
  flex-direction:          column;
  padding:                 10px 10px;
  border:                  1px solid rgba(200, 200, 200, .25);
  border-radius:           4px;
  background-color:        rgba(50, 50, 50, 0.45);
  box-shadow:              0 0 10px 1px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter:         blur(7px);
}

/* Die Klasse, die per JS getoggled wird */
.profile-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Ein kleiner Pfeil oben am Menü (optional) */
/* .profile-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 20px;
    width: 10px;
    height: 10px;
    background: #2a2a2a;
    border-left: 1px solid #444;
    border-top: 1px solid #444;
    transform: rotate(45deg);
} */




/* Navigation auf großen Geräten */
.wrapper-nav {
  display: flex;
  justify-content: center;
}
@media only screen and (min-width: 600px) {
  .wrapper-nav {
    display: flex;
    justify-content: flex-start;
  }
}

.wrapper-nav > .wrapper-nav-zirkel {
  width: 80px;
  margin: 30px 0px;
}
@media only screen and (min-width: 600px) {
  .wrapper-nav > .wrapper-nav-zirkel {
    margin: 10px 10px 0 -13px;
  }
}

.wrapper-nav > .wrapper-nav-zirkel > svg > path {
  fill: rgb(180,180,180);
}

.navigation {
  display: none;
}
@media only screen and (min-width: 600px) {
  .navigation {
    display: block;
    margin:  14px 0 80px 0;
  }
}
.navigation > a {
  font-size:       1rem;
  font-weight:     800;
  text-decoration: none;
  color:           var(--inactiveColor);
}
.navigation > a:not(:first-child) {
  margin: 0 0 0 20px;
}
.navigation > a:hover {
  text-decoration: none;
  color:           var(--activeColor);
}
.navigation > a.active {
  color: var(--activeColor);
}



/* Navigation auf kleinen Geräten */
.mobile-bottom-nav {
  position:                sticky;
  position:                fixed;
  bottom:                  0;
  left:                    0;
  right:                   0;
  display:                 flex;
  align-items:             center;
  background-color:        rgba(40,40,40, 0.8);
  border-top:              2px solid rgb(100,100,100);
  width:                   100%;
  height:                  70px;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter:         blur(7px);
  z-index:                 1000;
}
@media only screen and (min-width: 600px) {
  .mobile-bottom-nav {
    display: none;
    height:  0;
    width:   0;
  }
}

.mobile-bottom-nav > .item {
  display:          flex;
  flex-direction:   column;
  justify-content:  center;
  color:            var(--inactiveColor);
  flex-grow:        1;
  align-items:      center;
  text-decoration:  none;
  width:            25%;
}
.mobile-bottom-nav > .item.active {
  color: var(--activeColor);
}
.mobile-bottom-nav > .item > .label{
  font-size:  .65rem;
  margin-top: 3px;
}
.mobile-bottom-nav > .item > .icon {
  fill:   var(--inactiveColor);
  width:  24px;
  height: 24px;
}
.mobile-bottom-nav > .item.active > .icon {
  fill: var(--activeColor);
}


/* Tour beim erstmaligen oeffnen */
/* Ergänzungen für vertikales Scrollen in der Tour-Card auf Mobilgeräten */
#tourOverlay.tour-overlay {
    padding: 20px 0; /* Verringert den äußeren Abstand auf kleinen Screens */
}

#tourOverlay .tour-card {
    max-height: 85vh;             /* Maximal 85% der Bildschirmhöhe nutzen */
    display: flex;
    flex-direction: column;
    overflow-y: auto;             /* Vertikales Scrollen auf der Card aktivieren */
    -webkit-overflow-scrolling: touch; /* Flüssiges Scrollen auf iOS */
}

#tourOverlay .tour-media-container {
    flex-shrink: 0;               /* Verhindert das Zusammenquetschen des Medien-Containers */
}




/* content */
.content > .content-header {
  display:         flex;
  justify-content: flex-start;
  align-items:     center;
}

.content > .content-header > .content-add {
  width:            36px;
  height:           36px;
  border-radius:    50%;
  background-color: var(--gold);
  /* align-self:       flex-start; */
  display:          flex;
  align-items:      center;
  justify-content:  center;
  border:           none;
  margin:           0 0 0 20px;
  padding: 0;
  cursor:           pointer;
}

.content > .content-header > .content-add > svg > path {
  fill: rgb(60,60,60);
}


/* modal */


.modal {
    display:            none;
    position:           fixed;
    z-index:            1000;
    left:               0;
    top:                0;
    width:              100%;
    height:             100%;
    background-color: rgba(30,30,30,0.5);
    align-items:        flex-start;
    justify-content:    center;
    overflow-y:         auto; 
    -webkit-overflow-scrolling: touch;
}
.modal.open {
  display: flex;
}

.modal > .modal-content {
    margin: 40px auto;
    /* height:         stretch; */
    /* height:         100%; */
    padding:        20px;
    border-radius:  10px;
    width:          90%;
    max-width:      400px;
    color:        white;
    display:        flex;
    flex-direction: column;
    gap:            10px;
    border:                  1px solid rgba(200, 200, 200, .25);
    border-radius:           4px;
    background-color:        rgba(50, 50, 50, 0.2);
    box-shadow:              0 0 10px 1px rgba(0, 0, 0, 0.25);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter:         blur(20px);
}
.modal > .modal-content > input {
  padding:       10px;
  margin:        0px;
  background:    #333;
  border:        1px solid #444;
  color:         white;
  border-radius: 5px;
  font-size:     1rem;
}

.modal > .modal-content > select {
  padding:       10px;
  margin:        0px;
  background:    #333;
  border:        1px solid #444;
  color:         white;
  border-radius: 5px;
  font-size:     1rem;
  /* height:        40px; */
}

.modal > .modal-content > input:disabled {
  padding:       0px 10px 16px 10px;
  margin-top:    -5px;
  background:    transparent;
  border:        none;
  opacity:       1;
}

.modal > .modal-content > select:disabled {
  padding:       0px 10px 16px 10px;
  margin-top:    -5px;
  background:    transparent;
  border:        none;
  opacity:       1;
}


.modal > .modal-content > label {
  font-size: .8rem;
  color:   rgb(150, 150, 150);
}

.modal > .modal-content > .modal-buttons {
  display:         flex;
  justify-content: space-between;
  margin-top:      15px;
}

/* .modal > .modal-content > .modal-buttons > button {
  color:       rgb(0, 0, 0);
  border:        none;
  padding:       10px 20px;
  border-radius: 5px;
  cursor:        pointer;
} */

.modal > .modal-content > .modal-buttons > .button-save {
  /* background:    var(--gold); */
  /* color:       rgb(0, 0, 0); */
}

.modal > .modal-content > .modal-buttons > .button-cancel {
  background:  rgb(100,100,100);
  color:       rgb(180, 180, 180);
}



.modal-foto-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.modal-foto-section > img {
  width: 60%;
  height: 50%;
  border-radius: 50%;
  object-fit: cover;
}


.modal-initalen {
  width: 100px;
  height: 100px;
  border: 2px solid rgb(180,180,180);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;
  color: rgb(220,220,220);
  align-self: center;
  background-color: rgb(70, 70, 70);
  align-self: center;
  /* object-fit: cover; */
}







/* Aemter */
.amt-wrapper-emv {
  margin-bottom: 70px;
}
.amt-wrapper-praesidium {
  margin-bottom: 70px;
}
.amt-wrapper-aktive {
  margin-bottom: 70px;
}
.amt-wrapper-fuexe {
  margin-bottom: 70px;
}
.amt-wrapper-pudel {
  margin-bottom: 70px;
}

.aemter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
    padding: 20px;
}
@media only screen and (min-width: 600px) {
  .aemter-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

.amt-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;

    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.amt-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.amt-image-wrapper {
    position: relative;
    height: 300px;
}
@media only screen and (min-width: 600px) {
  .amt-image-wrapper {
      height: 200px;
  }
}

.amt-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.amt-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: #fff;
    padding: 20px 10px 10px;
    padding: 40px 10px 10px;
    font-weight: bold;
    /* font-family: 'Helvetica Bold'; */
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;

    /* Ein satterer Verlauf von Schwarz zu Transparent */
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    padding: 30px 10px 15px; /* Mehr Platz nach oben für den Verlauf */
    letter-spacing: 2px;
    font-weight: 700;    
}

.amt-info {
    padding: 15px;
    position: relative;
}

.amt-info .conkneipant {
  width: 40px;
  position: absolute;
  top: 8px;
  right: 10px;
}

.amt-info .conkneipant .kordel path {
  fill: var(--gold);
}


.amt-info h3 {
    margin: 0;
    font-size: 1.25rem;
    margin-bottom: 5px;
    color: #eee;
    color: #fff;
    height: 55px;
    padding: 16px;
    /* background: rgba(255, 255, 255, 0.03); Ganz zarter Schimmer */
    /* backdrop-filter: blur(5px); */
}

.amt-details {
  color: rgb(180,180,180);
  font-size: .9rem;
  margin-top: 14px;
  color: #aaa;
  display: flex;
  justify-content: center;
  align-items: center;
}
.amt-contact-links {
  padding: 4px 6px;
  font-size: 1.2rem;
  justify-content: center;
  gap: 25px;
  /* margin-top: 15px; */
}

.amt-contact-links a {
    transition: color 0.3s ease, transform 0.2s ease;
    margin: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.amt-contact-links a:hover {
    color: #fff; /* Oder Gold: #ffd700 */
    transform: scale(1.2);
}


.amt-contact-links a svg {
    width: 20px;
    height: 20px;
    fill: #888;
    transition: all 0.3s ease;
    cursor: pointer;
}

.amt-contact-links a:hover svg {
    fill: rgb(255,255,255);
    /* background: rgba(255, 255, 255, 0.15); */
    border-color: rgba(255, 255, 255, 0.5);
}











/* Mitgliederliste */
#mitgliederTable {
    border-collapse: collapse !important;
    width: 100%;
}
#mitgliederTable a {
  /* color: #fff; */
  text-decoration: none;
}
#mitgliederTable a:hover {
  color: #fff;
  text-decoration: none;
}

.avatar-cell {
    position: relative;
    /* display: flex;
    align-items: center; */
    /* gap: 10px; */
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    overflow: hidden;
    padding-left: 4px !important;
    padding-right: 0 !important;
}

.mini-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #444;
    cursor: pointer;
}

/* .avatar-cell > .initialen {
    width: 30px;
    height: 30px;
    font-size: .9rem;
    border-radius: 50%;
    background-color: var(--gold);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
} */

/* .photo-preview {
    display: none;
    position: absolute;
    left: 40px;
    top: -50px;
    z-index: 100;
    width: 150px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    border: 2px solid #fff;
}

.avatar-cell:hover .photo-preview {
    display: block;
} */

.badge {
  padding: 4px 10px;
  border-radius: 14px;
}

.badge.badge-fux {
  background-color: rgba(0, 159, 255, 0.2);
  border: 1px solid rgb(0, 159, 255);
  color: rgb(0, 159, 255);
  font-size: .8rem;
}

.badge.badge-aktiv {
  background-color: rgba(105,194,86,0.2);
  border: 1px solid rgb(105,194,86);
  color: rgb(105,194,86);
  font-size: .8rem;
}

.badge.badge-em {
  background-color: rgba(255,0,0,0.2);
  border: 1px solid rgb(255,0,0);
  color: rgb(255,151,151);
  font-size: .8rem;
}



/* DataTables Styling Anpassung */
table.dataTable thead th.dt-orderable-asc span.dt-column-order,
table.dataTable thead th.dt-orderable-desc span.dt-column-order {
    color: white !important;
    opacity: 1 !important;
}

/* Abstand für Icons im Header schaffen */
table.dataTable thead th {
    padding-right: 25px !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter:         blur(6px);
}


#mitgliederTable thead th {
    /* background-color: #2a2a2a !important; */
    color: white;
}
#mitgliederTable tbody {
    color: rgb(180, 180, 180);
}

/* Autosave Loading indicator */
.autosave-indicator {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 0.75rem;
    color: var(--gold);
    opacity: 0;
    transition: opacity 0.3s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.autosave-indicator.show {
    opacity: 1;
}

.dot-pulse {
    width: 6px;
    height: 6px;
    background-color: var(--gold);
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(0.8); opacity: 0.5; }
}



/* 1. Den Header im Scroll-Body (das Original) verstecken */
/* .dt-scroll-body thead {
    visibility: collapse;
    line-height: 0 !important;
} */

/* 2. Die fixierte Spalte (Biername) braucht einen deckenden Hintergrund */
/* In v5.x heißen die Klassen dtfc-fixed-start */

.dtfc-fixed-start,
.dtfc-fixed-left {
    /* background-color: #2a2a2a !important;  */
    background-color: rgba(40,40,40,0.7);
    background-color: var(--dt-html-background)!important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter:         blur(6px);
    z-index: 5;
    /* opacity: 1 !important; */
}

/* 3. Den Header der fixierten Spalte im Scroll-Head deckend machen */
.dt-scroll-head .dtfc-fixed-start {
    z-index: 10;
}

/* 4. Korrektur: DataTables 2 fügt oft leere Scroll-Sizing Divs ein */
.dt-scroll-sizing {
    height: 0 !important;
    overflow: hidden !important;
}

/* suchen */
.dt-search {
  margin: 30px 0 20px 0;
}

.dt-search > label {
  display: none;
}

/* brutaler fix, falls die header spalten nicht zum rest passen */
/* .dt-scroll-head, .dt-scroll-headInner, .dt-scroll-headInner table {
    width: 100% !important;
} */

/* sorting icons */
.dt-column-order {
  font-size: .6rem;
  opacity: 0.8 !important;
  /* filter: invert(1); */
}









/* Download buttons */
button.dt-button {
    background-color: var(--gold)!important;
    color: rgb(60, 60, 60) !important;
    padding: 6px !important;
    border-radius: 5px !important;
}
button.dt-button:hover {
    filter: brightness(1.2)!important;
    /* color: rgb(60, 60, 60) !important; */
}

/* Info Modal bei kopieren */
.dt-button-info {
  border:                  1px solid rgba(200, 200, 200, .25)!important;
  border-radius:           4px!important;
  background-color:        rgba(50, 50, 50, 0.3)!important;
  box-shadow:              0 0 10px 1px rgba(0, 0, 0, 0.25)!important;
  -webkit-backdrop-filter: blur(7px)!important;
  backdrop-filter:         blur(7px)!important;
}


/* Icon fuers aufklappen */
table.dataTable tbody td.dt-control:before {
  border-left: 10px solid rgb(208, 163, 39);
}

table.dataTable tbody tr.dt-hasChild td.dt-control:before {
  border-top: 10px solid rgb(208, 163, 39);
}

/* Icon fuers aufklappen in header */
table.dataTable thead>tr>th.dt-ordering-asc .dt-column-order:before, table.dataTable thead>tr>th.dt-ordering-desc .dt-column-order:after, table.dataTable thead>tr>td.dt-ordering-asc .dt-column-order:before, table.dataTable thead>tr>td.dt-ordering-desc .dt-column-order:after {
  opacity: .8;
}





/* Styling für die aufgeklappte Detail-Zeile */
tr.dt-hasChild td {
  background-color: #333 !important; /* Etwas heller als der Hintergrund */
}

/* Die neu erschienene Detail-Zeile selbst stylen */
#mitgliederTable tr.dt-hasChild + tr {
    background-color: #333; /* Konsistent zum Design */
    margin: 0;
    padding: 0;
}
#mitgliederTable tr.dt-hasChild + tr td {
    border-top: 1px solid #333;
}

.child-row-content {
  /* padding: 15px; */
  padding: 0;
  font-size: .9rem;
  /* background: #2a2a2a; */
  /* border: 1px solid #444; */
  /* border-left: 1px solid #444;
  border-right: 1px solid #444; */
  /* border-radius: 8px; */
  display: flex;
  gap: 20px;
}

.child-info-block {
  padding: 40px 58px;
  color: rgb(180,180,180);
  flex: 1;
}

.admin-actions {
  margin-top: 20px;
}

.child-info-block p {
  margin: 0;
  padding: 4px 0;
}
.child-info-block p.padding-top-extra {
  margin-top: 14px;
  padding: 4px 0;
}
.child-info-block a {
  color: rgb(180,180,180);
}


.child-info-block h4 {
  font-family: 'Helvetica Bold';
  margin: 0 0 10px 0;
  color: #fff;
  font-size: 0.9rem;
  text-transform: uppercase;
}


/* Badges für Aemter */
.badge-selection-container {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 15px;
    padding: 5px 0;
}

.badge-selectable, .badge-selectable-radio {
    padding: 6px 12px;
    border-radius: 20px;
    background: #333; /* Grau für inaktiv */
    color: #999;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    user-select: none;
}

.badge-selectable:hover, .badge-selectable-radio:hover  {
    background: #444;
}

.badge-selectable.active, .badge-selectable-radio.active {
    background: var(--gold); /* Deine Gold-Farbe */
    color: #000;
    font-weight: bold;
    /* font-display: 'Helvetica Bold'; */
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}













/* Termine */
.termine {

}


.termine > .termine-wrapper {

}

.termine > .termine-wrapper > .termin-item {
  margin: 12px 0 24px 0;
  background: rgb(40, 40, 40);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}


.termine > .termine-wrapper > .termin-item.abgesagt {
  opacity: 0.4;
}
.termine > .termine-wrapper > .termin-item.abgesagt > .termin-first-row > .details > .name span {
  text-decoration: line-through;
}

.termine > .termine-wrapper > .termin-item > .termin-first-row > .details > .name > .badge-abgesagt {
  background:   #ff4444;
  color:        white;
  font-size:      0.7em;
  padding:        2px 6px;
  border-radius:  4px;
  margin-left:    10px;
  vertical-align:  middle;
  text-decoration: none!important;
}
.termine > .termine-wrapper > .termin-item > .termin-first-row > .details > .name > .button-edit {
  background: none;
  border:     none;
  cursor:     pointer;
  padding:    0 5px;
}


.termine > .termine-wrapper > .termin-item > .termin-first-row {
  display: flex;
  height: 90px;
}
.termine > .termine-wrapper > .termin-item > .termin-first-row > .datum {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  margin:          14px 20px 14px 10px;
  width:           60px;
  justify-content: center;
  background:    rgb(60, 60, 60);
  border-right:    4px solid rgb(60, 60, 60);
  border-radius:   10px;
}

.termine > .termine-wrapper > .termin-item > .termin-first-row > .datum.border-transparent {
  border-left: 4px solid rgb(60, 60, 60);
}
.termine > .termine-wrapper > .termin-item > .termin-first-row > .datum.border-red {
  border-left: 4px solid rgba(242, 3, 3, 0.7);
}
.termine > .termine-wrapper > .termin-item > .termin-first-row > .datum.border-green {
  border-left: 4px solid rgba(0, 210, 13, 0.7);
}
.termine > .termine-wrapper > .termin-item > .termin-first-row > .datum.border-orange {
  border-left: 4px solid rgba(255, 158, 0, 0.7);
}



.termine > .termine-wrapper > .termin-item > .termin-first-row > .datum > .tag {
  font-size:   2.2rem;
  font-family: 'Helvetica Light';
  font-family: 'Roboto Condensed';
}
.termine > .termine-wrapper > .termin-item > .termin-first-row> .datum  > .monat {
  font-size: .75rem;
  color:     rgb(180,180,180);
}
.termine > .termine-wrapper > .termin-item > .termin-first-row > .details {
  align-content: center;
  flex-grow:     1;
}
.termine > .termine-wrapper > .termin-item > .termin-first-row > .details > .name {
  font-size: 1.25rem;
  /* color:     var(--gold); */
}
.termine > .termine-wrapper > .termin-item > .termin-first-row > .details > .ort {
  font-size:  .75rem;
  margin-top: 3px;
  color:    var(--inactiveColor2);
}
.termine > .termine-wrapper > .termin-item > .termin-first-row > .more {
  padding:       10px;
  cursor:        pointer;
  align-content: center;
}

.termine > .termine-wrapper > .termin-item > .termin-first-row > .more svg {
    transition: transform 0.3s ease;
}
.termine > .termine-wrapper > .termin-item > .termin-first-row > .more.active svg {
    transform: rotate(180deg);
}


.termine > .termine-wrapper > .termin-item > .termin-second-row {
  /* margin:             20px 0 0 56px; */
  padding:            0 14px;
  display:            grid;
  grid-template-rows: 0fr; /* Startzustand: Höhe 0 */
  transition:         grid-template-rows 0.3s ease-out;
  overflow:           hidden;
}

.termine > .termine-wrapper > .termin-item > .termin-second-row.open {
  grid-template-rows: 1fr;
  /* padding:            0 0 10px 0; */
}

.termine > .termine-wrapper > .termin-item > .termin-second-row .termin-label {
  /* padding: 20px 0 7px 0; */
  font-size: .75rem;
  color: var(--inactiveColor2);
  text-transform: uppercase;
}

.termine > .termine-wrapper > .termin-item > .termin-second-row > div {
  min-height: 0;
}

.termine > .termine-wrapper > .termin-item > .termin-second-row > div > .termin.spacer {
  font-size: 0;
  height: 10px;
  line-height: 0;
}


.termin-details-text {
    background: rgba(255, 255, 255, 0.05); /* Sehr dezent heller Hintergrund */
    padding: 12px 15px;
    margin: 10px 0 40px 0;
    border-radius: 4px 12px 12px 4px;      /* Abgerundete Ecken rechts */
    color: #e0e0e0 !important;             /* Etwas helleres Grau/Weiß */
    font-style: normal !important;         /* Nicht mehr kursiv */
    font-size: 0.95rem;
    line-height: 1.5;
    white-space: pre-wrap;                 /* Zeilenumbrüche beibehalten */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

/* Optional: Ein kleines Icon davor via Pseudo-Element */
.termin-details-text::before {
    content: 'ⓘ'; 
    margin-right: 8px;
    color: #d0a327;
    font-weight: bold;
}


.modal-temine-details:focus {
  outline: 2px solid var(--gold);
}

.termine > .termine-wrapper > .termin-item > .termin-second-row > div > .teilnehmer {
  margin:    24px 0 0 0;
  font-size: 0.9rem;
  color:     var(--inactiveColor);
}
.termine > .termine-wrapper > .termin-item > .termin-second-row > div > .button-group {
  align-content: center;
  display:       flex;
  align-items:   center;
  margin:        0px;
  width:         100%;
}
@media only screen and (min-width: 600px) {
  .termine > .termine-wrapper > .termin-item > .termin-second-row > div > .button-group {
    width: fit-content;
  }
}

.termine > .termine-wrapper > .termin-item > .termin-second-row > div > .button-group > button {
  margin:           6px 0 0 0;
  padding:          4px;
  height:           40px;
  width:            unset;
  flex:             1;
  text-align:       center;
  text-decoration:  none;
  display:          flex;
  justify-content:  center;
  align-items:      center;
  outline:          none;
  background-color: rgb(70,70,70);
  border-radius:    0;
}

@media only screen and (min-width: 600px) {
  .termine > .termine-wrapper > .termin-item > .termin-second-row > div > .button-group > button {
    flex: none;
    width: 100px;
  }
}

.termine > .termine-wrapper > .termin-item > .termin-second-row > div > .button-group > button svg {
  fill: rgb(150,150,150);
}
.termine > .termine-wrapper > .termin-item > .termin-second-row  > div > .button-group > button.active svg {
  fill: rgb(255,255,255);
}



.termine > .termine-wrapper > .termin-item > .termin-second-row  > div > .button-group > button.button-nein {
  border-radius: 10px 0 0 10px;
}
.termine > .termine-wrapper > .termin-item > .termin-second-row  > div > .button-group > .button-nein.active {
  background-color: rgba(242, 3, 3, 0.7);
}

.termine > .termine-wrapper > .termin-item > .termin-second-row  > div > .button-group > .button-vielleicht {
  /* border-left: 1px solid rgb(120,120,120); */
  border-left: 1px solid rgb(40,40,40);
  /* border-right: 1px solid rgb(120,120,120); */
  border-right: 1px solid rgb(40,40,40);
}
.termine > .termine-wrapper > .termin-item > .termin-second-row  > div > .button-group > .button-vielleicht.active {
  background-color: rgba(255, 158, 0, 0.7);
}
.termine > .termine-wrapper > .termin-item > .termin-second-row  > div > .button-group > .button-ja {
  border-radius: 0 10px 10px 0;
}
.termine > .termine-wrapper > .termin-item > .termin-second-row  > div > .button-group > .button-ja.active {
  background-color: rgba(0, 210, 13, 0.7);
}

.termine > .termine-wrapper > .termin-item > .termin-second-row  > div > .teilnehmer > .namen-liste-ja {
  color: rgba(0, 255, 13, 0.7);
}
.termine > .termine-wrapper > .termin-item > .termin-second-row  > div > .teilnehmer > .namen-liste-vielleicht {
  color: var(--orange);
}
.termine > .termine-wrapper > .termin-item > .termin-second-row  > div > .teilnehmer > .namen-liste-nein {
  color: var(--red);
}

.termine > .termine-wrapper > .termin-item > .termin-second-row  > div > .download {
  margin:          50px 0 20px 0;
  font-size:       .9rem;
  color:         rgb(160, 160, 160);
  display:         flex;
  justify-content: flex-start;
  align-items:     center;
}

.termine > .termine-wrapper > .termin-item > .termin-second-row  > div > .download > .button-export {
  margin:           0 0 0 4px;
  padding:          4px;
  height:           40px;
  width:            50px;
  text-align:       center;
  text-decoration:  none;
  display:          inline;
  outline:          none;
  border:           none;
  cursor:           pointer;
  background-color: transparent;
  color:           rgb(150,150,150)
} 







/* Profil */
.profil-card {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

/* Foto Styling */
.foto-container {
    text-align: center;
    margin-bottom: 30px;
}

.profil-foto {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    border: 3px solid #444;
    transition: border-color 0.3s;
}

.profil-foto:hover {
    border-color: #f1c40f; /* Gelb beim Hover */
}

/* Clean Input Styling */
.profil-row {
    margin-bottom: 15px;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
}

.profil-row label {
    display: block;
    font-size: 0.75rem;
    color: #888;
}

.clean-input {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    color: #fff;
    padding: 8px 5px;
    font-size: 1rem;
    outline: none;
    border-radius: 4px;
    transition: all 0.2s;
}

.clean-input:focus {
    border-color: #f1c40f; /* Gelber Rahmen */
    background: #2a2a2a;
}

/* Spezielle Anzeige für nicht-änderbare Felder */
.clean-input:disabled {
    color: rgb(160,160,160);
    cursor: not-allowed;
    font-weight: bold;
    /* font-family: 'Helvetica Bold'; */
}

.avatar-trigger {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    cursor: pointer;
}

.profil-initialen {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgb(70,70,70);
    color: rgb(220,220,220);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    /* font-family: 'Helvetica Bold';
    font-weight: bold; */
    border: 3px solid #555;
}

.foto-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0;
    transition: opacity 0.2s;
}

.btn-delete-foto {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.btn-delete-foto:hover {
    background: #c0392b;
    transform: scale(1.1);
}

.avatar-trigger:hover .foto-overlay {
    opacity: 1;
}














/* Login */
.login {
  display:         flex;
  width:           100%;
  height:          calc(100vH - 4px);
  justify-content: center;
  align-items:     center;
  flex-direction:  column;
}

.login > .login-wrapper {
  position:                relative;
  display:                 flex;
  flex-direction:          column;
  align-items:             center;
  /* margin:                  0 0 80px 0; */
  padding:                 30px 20px;
  border:                  1px solid rgba(200, 200, 200, .25);
  border-radius:           4px;
  background-color:        rgba(50, 50, 50, 0.45);
  box-shadow:              0 0 10px 1px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter:         blur(7px);
  text-align:              center;
  width:                   85%;
}
@media only screen and (min-width: 600px) {
  .login > .login-wrapper {
    width: 350px;
  }
}

.login > .login-wrapper > .login-zirkel {
  width:  44px;
  margin: 0 0 8px 0;
}

.login > .login-wrapper > .login-zirkel > path {
  fill: rgb(220,220,220);
}

.login > .login-wrapper > .login-area > h1 {
  font-size:   1.2rem;
  font-weight: normal;
  margin:      0;
  padding:     0;
}

.login .login-input {
  padding:          8px;
  margin:           20px 0 0 0;
  border-radius:    2px;
  border:           none;
  /* background-color: #fff; */
  color:            #fff;
  background-color: rgb(80,80,80);
  border:           1px solid rgb(100,100,100);
  width:            80%;
  font-size:        1rem;
}
@media only screen and (min-width: 600px) {
  .login .login-input {
    width: 250px;
  }
}

.login .login-input:focus {
  outline: 2px solid var(--gold);
}

.login .login-submit {
  margin:          32px 0 0 0;
  padding:         8px 14px;
  text-align:      center;
  text-decoration: none;
  display:         inline-block;
  color:           #000;
  background-color: var(--gold);
  outline:         none;
  border:          none;
  cursor:          pointer;
}

.login .login-hint {
  margin-top: 10px;
  font-size:  .8rem;
}

.activate-forgot-password {
  margin-top:      16px;
  font-size:       .8rem;
  color:           rgb(180,180,180);
  text-decoration: underline;
  cursor:          pointer;
}


.login .forgot-password-area {
  display: block;
}

.login .forgot-password-area.hidden {
  display: none;
}

.login .message-password-forgot {
  
}

.login .login-area {
  width: 100%;
}

.login.login-area {
  display: block;
}

.login .link-to-login {
  font-size:       .8rem;
  color:           rgb(180,180,180);
  text-decoration: underline;
  cursor:          pointer;
}




/* Verschiedenes Seite */
.verschiedenes {

}

.verschiedenes ul {
  margin: 0 0 0 24px;
  padding: 0;
}
.verschiedenes ul li {
  margin: 0;
  padding: 4px 0;
}
.verschiedenes ul li a {
  color: rgb(180,180,180);
} 
.verschiedenes ul li a:visited {
  color: rgb(180,180,180);
} 


.verschiedenes p {
  margin: 0;
  padding: 0;
} 
.verschiedenes p a {
  color: rgb(180,180,180);
} 
.verschiedenes p a:visited {
  color: rgb(180,180,180);
} 




/* blog */

.feed-container {
    max-width: 650px;
    margin: 20px auto;
    /* padding: 0 15px; */
}

.feed-composer {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.feed-composer:focus-within {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 215, 0, 0.3); /* Goldener Akzent */
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.composer-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.composer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.composer-non-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgb(120,120,120);
    background-color: rgb(80,80,80);
    color: rgb(200,200,200);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    align-self: center;
}

#postText {
    width: 100%;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.1rem;
    resize: none;
    outline: none;
    padding-top: 8px;
    min-height: 50px;
}

@media only screen and (min-width: 600px) {
  #postText {
    min-height: 40px;
  }
}

.composer-actions {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    align-items: center;
}

.action-item {
    cursor: pointer;
    color: #aaa;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
}

.action-item:hover {
    color: var(--gold);
}

.btn-post-submit {
    background: var(--gold);
    color: #000;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-post-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Media Preview Styling */
.media-preview-container {
    position: relative;
    margin-top: 15px;
    border-radius: 8px;
    overflow: hidden;
    max-height: 300px;
}

.media-preview-container img, 
.media-preview-container video {
    width: 100%;
    display: block;
    object-fit: cover;
}

.remove-media {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

.post-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    overflow: hidden;
}

.post-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.post-author-img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

.post-author-non-img {
  width: 45px;
  height: 45px;
  background-color: rgb(80, 80, 80);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  border: 1px solid rgb(120, 120, 120);
  color: rgb(200, 200, 200);
}



.post-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 1;
}

.post-author-name {
    font-weight: bold;
    /* font-family: 'Helvetica Bold'; */
    font-size: 1rem;
    color: #fff;
    line-height: 1.2;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
@media (min-width: 600px) {
    .post-author-name {
        max-width: 300px;
    }
}

.post-subtitle {
    display: flex;
    align-items: center;
    gap: 8px;
    /* flex-wrap: wrap; */
    margin: 2px 40px 0 0;
    overflow-x: scroll;
    white-space: nowrap;
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.post-subtitle::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.post-subtitle.scroll-variant {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Flüssiges Scrollen auf iOS */
}

.badge-amt {
    background: rgba(255, 215, 0, 0.15); /* Zartes Gold */
    background: #444;
    color: #ffd700;
    color: rgb(180,180,180);
    font-size: 0.65rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    border: 1px solid rgba(100, 100, 100, 1);
    white-space: nowrap; /* Kein Zeilenumbruch im Badge selbst */
}

.post-date {
    font-size: 0.75rem;
    color: #888;
}

/* Mobile Anpassung */
@media (max-width: 480px) {
    .post-author-name {
        font-size: 0.9rem;
    }
    .badge-amt {
        font-size: 0.6rem;
        padding: 1px 6px;
    }
}




/* .post-author-name {
    display: block;
    font-weight: bold;
} */

/* .post-date {
    font-size: 0.8rem;
    color: #888;
} */

.post-content p {
    margin: 0 0 15px 0;
    line-height: 1.5;
    color: #eee;
}

.post-media {
    margin: 0 -20px 15px -20px; /* Bild geht bis zum Rand der Karte */
    overflow: hidden;
}

.post-media img, .post-media video {
    width: 100%;
    display: block;
}

/* mehrere bilder / videos */
.post-media-grid {
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-top: 10px;
    border-radius: 8px;
    overflow: hidden;
}

/* Wenn es nur ein Bild ist, soll es vollflächig sein */
/* Wenn nur 1 Bild da ist, soll es die volle Breite nutzen */
.post-media-grid:has(.media-wrapper:only-child) {
    grid-template-columns: 1fr;
}

/* Wenn 2 oder 4 Bilder da sind, machen wir ein schönes 2er Grid */
.post-media-grid:has(.media-wrapper:nth-child(2):last-child),
.post-media-grid:has(.media-wrapper:nth-child(4):last-child) {
    grid-template-columns: 1fr 1fr;
}

/* Bei genau 3 Bildern: Das erste Bild nimmt die volle Breite, die anderen zwei darunter */
.post-media-grid:has(.media-wrapper:nth-child(3):last-child) {
    grid-template-columns: 1fr 1fr;
}
.post-media-grid:has(.media-wrapper:nth-child(3):last-child) .media-wrapper:first-child {
    grid-column: span 2;
    aspect-ratio: 16 / 9; /* Erstes Bild etwas breiter */
}



.media-wrapper {
    position: relative;
    aspect-ratio: 1 / 1; /* Quadratische Kacheln */
    background: #222;
    cursor: pointer;
    overflow: hidden;
}

.post-media-grid:has(.media-wrapper:only-child) .media-wrapper {
    aspect-ratio: auto;
}

/* Container für das Overlay-Bild */
.media-wrapper.has-more {
    position: relative;
}

/* Das "+X" Overlay */
.more-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Dunkler Schleier */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    font-family: 'Helvetica Bold';
    pointer-events: none; /* Klicks gehen durch auf das Bild/Video */
    z-index: 10;
}

/* Wir erzwingen ein 2x2 Grid, wenn mehr als 3 Bilder da sind */
.post-media-grid.limit-4 {
    grid-template-columns: repeat(2, 1fr);
}









.feed-media {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Verhindert Verzerrung */
    display: block;
    transition: transform 0.3s ease;
}

.media-wrapper:hover .feed-media {
    transform: scale(1.05);
}

/* Play-Button Hinweis für Videos in der Kachel */
.video-play-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.5);
    color: white;
    padding: 10px;
    border-radius: 50%;
    pointer-events: none;
}


/* Umfrage  */
.poll-container {
    background: #252525;
    border-radius: 12px;
    padding: 15px;
    margin: 12px 0;
    border: 1px solid #333;
}

.poll-question {
    margin: 0 0 15px 0;
    font-size: 1.05rem;
    color: #fff;
    font-weight: 600;
}

.poll-option {
    position: relative;
    background: #333;
    margin-bottom: 12px;
    height: 34px;
    border-radius: 34px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.1s ease;
    border: 1px solid transparent;
}

.poll-option:active { transform: scale(0.98); }

/* Wenn der User bereits abgestimmt hat */
.poll-option.has-voted { cursor: default; pointer-events: none; }
.poll-option.selected { border-color: #007bff; }

.poll-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(0, 123, 255, 0.25);
    transition: width 0.8s cubic-bezier(0.1, 0, 0.1, 1);
}

.poll-option.selected .poll-bar { background: rgba(0, 123, 255, 0.45); }

.poll-option-content {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 12px;
    font-size: .85rem;
    color: rgb(210,210,210);
}

.poll-perc { font-weight: bold; font-variant-numeric: tabular-nums; }

.poll-footer {
    margin-top: 10px;
    font-size: 11px;
    color: #888;
    text-align: right;
}


/* Mentions-System */
.mention {
    color: #007bff;
    font-weight: bold;
    cursor: pointer;
}

.mention-suggestions {
    position: absolute;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    z-index: 1001;
    max-height: 200px;
    overflow-y: auto;
    width: 250px;
}

.mention-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #333;
    transition: background 0.2s;
}

.mention-item:hover {
    background: #3d3d3d;
}

.mention-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 10px;
    background-size: cover;
    background-position: center;
}

.mention-name {
    color: #fff;
    font-size: 14px;
}









.post-footer {
    border-top: 1px solid rgba(100, 100, 255, 0.1);
    padding-top: 14px;
    display: flex;
    justify-content: space-between;
}

.btn-comment {
    background: transparent;
    border: none;
    color: #aaa;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0;
}

.btn-comment:hover {
    color: #fff;
}


.comment-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.comment-item {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.comment-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.comment-non-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgb(80,80,80);
    color: rgb(200,200,200);
    border: 1px solid rgb(120,120,120);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .9rem;
}

.comment-body {
    background: rgba(255, 255, 255, 0.03);
    padding: 8px 12px;
    border-radius: 12px;
    flex: 1;
}

.comment-body strong {
    color: #fff;
    font-size: 0.8rem;
}

.comment-input-area {
    display: flex;
    gap: 8px;
    margin-top: 15px;
}

.comment-input-area input {
    flex: 1;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 8px 15px;
    color: #fff;
    outline: none;
    height: 42px;
}

.comment-input-area button {
    background: transparent;
    border: none;
    color: var(--gold);
    cursor: pointer;
}

.comment-header {
    display: flex;
    align-items: center;
}
.comment-header .comment-date {
    color: #aaa;
    padding-left: 6px;
    font-size: .7rem;
}


.comment-actions {
    font-size: 0.75rem;
    color: #666;
    display: flex;
    gap: 8px;
    gap: 2px;
    flex-grow: 1;
    justify-content: flex-end;
}

.comment-actions i {
    cursor: pointer;
    transition: color 0.2s;
}

.comment-actions i:hover {
    color: var(--gold);
}

.edit-comment-input {
    width: 100%;
    background: rgba(255,255,255,0.1);
    border: 1px solid var(--gold);
    color: #fff;
    border-radius: 4px;
    padding: 10px;
    margin: 5px 0;
}

.edit-btns {
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--gold);
}

.edit-btns span {
    cursor: pointer;
}

.edit-btns span:hover {
    filter: brightness(1.2);
    /* opacity: 0.7;
    text-decoration: underline; */
}

.edit-confirm { color: #28a745; } /* Grün für Speichern */
.edit-cancel { color: #dc3545; }  /* Rot für Abbrechen */


.action-icon {
  height: 20px;
  width: 20px;
  color: #aaa;
  cursor: pointer;
  transition: transform 0.1s ease;
  display: inline-block;
  vertical-align: middle;
  
}
.action-icon:hover {
  color: #fff;
}
.icon-more.is-active {
  transform: rotate(180deg);
}



.post-actions-menu {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 10px;
}

.action-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.2s;
    padding: 5px;
}

.action-btn:hover {
    opacity: 1;
}

.action-btn svg {
    fill: #888;
}

.action-btn.action-delete:hover svg {
    fill: #ff4d4d; /* Rot beim Löschen */
}
.action-btn.action-edit:hover svg {
    fill: var(--orange); /* Rot beim Löschen */
}
.action-btn.action-save:hover svg {
    fill: var(--green); /* Rot beim Löschen */
}

/* Der Spinner-Ring */
.loader-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    border-top-color: #000; /* Kontrast zum gelben Button */
    animation: spin 0.8s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

/* Optional: Button-Text während des Ladens leicht ausfaden */
.btn-post-submit:disabled {
    cursor: wait;
    filter: grayscale(0.5);
}


.btn-like {
    background: transparent;
    border: none;
    color: #aaa;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
    padding: 0;
}

.btn-like svg {
    fill: transparent;
    stroke: #aaa;
    stroke-width: 60px;
    transition: all 0.2s ease;
}

/* Wenn geliked */
.btn-like.active svg {
    fill: #ff4d4d;
    stroke: #ff4d4d;
    transform: scale(1.2);
}

.btn-like.active {
    color: #ff4d4d;
}

/* Kleiner Animationseffekt beim Klicken */
.btn-like:active svg {
    transform: scale(0.8);
}



/* lightbox */
.lightbox {
    display: none; /* Standardmäßig versteckt */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px); /* Moderner Blur-Effekt */
    justify-content: center;
    align-items: center;
    touch-action: none;
}

.lightbox-content {
    max-width: 95%;
    max-height: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox-content img, 
.lightbox-content video {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 40px;
    font-weight: bold;
    padding: 20px;
    cursor: pointer;
    user-select: none;
    z-index: 2010;
    transition: background 0.3s;
    background: rgba(0,0,0,0.2);
    border-radius: 5px;
    cursor: pointer;
    min-width: 60px; /* Größere Klickfläche für Daumen */
    min-height: 80px;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent; /* Verhindert das graue Flackern beim Tippen */
    z-index: 2100; /* Sicherstellen, dass es über dem Content liegt */
}

.lightbox-nav:hover {
    background: rgba(0,0,0,0.5);
}

.nav-prev { left: 10px; }
.nav-next { right: 10px; }

#lightbox-target img {
    transition: transform 0.1s ease-out; /* Kurze Verzögerung für Geschmeidigkeit */
    max-width: 95vw;
    max-height: 85vh;
    object-fit: contain;
    user-select: none;
    touch-action: none; /* Wichtig: Verhindert das Browser-Scrollen */
}

/* Auf Handys die Pfeile etwas kleiner machen */
@media (max-width: 600px) {
    .lightbox-nav { font-size: 30px; padding: 10px; }
}




.feed-media {
    cursor: pointer;
    transition: opacity 0.2s;
}
.feed-media:hover {
    opacity: 0.9;
}



#mediaPreview {
    display: none;
    background: #1a1a1a;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid #333;
}

#previewContent {
    display: flex;
    flex-wrap: wrap; /* Mehrere Bilder in die nächste Zeile fließen lassen */
    gap: 10px;
}

.preview-item {
    position: relative;
    width: 80px;
    height: 80px;
}

.preview-item img, 
.preview-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #444;
}

/* Optional: Ein "X" zum Entfernen einzelner Bilder (müsste im JS ergänzt werden) */
.preview-remove {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #dc3545;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.preview-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: #222;
    border-radius: 6px;
    border: 1px dashed #444;
    color: #666;
}

.preview-item img, .preview-item video {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}


.spinner-mini {
    width: 20px;
    height: 20px;
    border: 2px solid #444;
    border-top: 2px solid #007bff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 5px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}




.pswp-gallery-item {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    overflow: hidden;
    position: relative;
}

.pswp-gallery-item img, .pswp-gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Fix für das Video-Innere in der Lightbox */
.pswp__video-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: #000; */
}


/* Verhindert das "Springen" der Animation, wenn die Größe noch unbekannt ist */
.pswp__img--placeholder {
    display: none !important;
}

/* Erzwingt, dass das Bild im Sichtbereich erscheint */
/* 1. Platzhalter wieder erlauben (wichtig für den Ladevorgang) */
.pswp__img--placeholder {
    display: block !important;
    opacity: 0.2; /* Dezent im Hintergrund */
}

/* 2. Das Hauptbild: Wir lassen PhotoSwipe die Arbeit machen, 
   verhindern aber JEDE Verzerrung durch contain */
.pswp__img {
    object-fit: contain !important;
    /* background: #000; */
}

/* 3. Sicherstellen, dass der Container den ganzen Platz nutzt */
.pswp__zoom-container {
    /* background: #000; */
}

/* 4. Deine Video-Container-Logik ist gut, lassen wir so */
.pswp__video-container video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

html.pswp-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}