/*-----------------------------------------------
| style.css                                      |
|                                                |
| release: 01.10.2022                            |
| � intellisys.io                                |
------------------------------------------------*/

/* =============================================================================
  SECTION: GLOBALS / BASE
  Beschreibung: Variablen, Fonts, Global-Elemente
  ============================================================================= */

:root {

  --color-main-green: #afc422;
  --color-main-gray: #51545b;

  --color-main-lines: #D3D3D3;
  --color-main-caption: #000;

  --color-main-link: #000080;

  --color-main-wrapper-bg: #ddd;


  /* Zusatzfarben */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-200: #e3e3e3;
  --color-gray-100: #f9f9f9;
  --color-gray-300: #dddddd;
  --color-card-bg: #b3b3b3;
  --color-card-text: #000;
  --color-editmode: #0089CC;
  --color-infobar: #e9c46a;
  --color-accent-warning: #ff0000;

  --font-primary: Fira Sans, Arial, sans-serif;

  --font-size-default: 14px;
  --font-size-caption: 18px;

}

@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Fira-Sans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =============================================================================
  SECTION: GLOBAL LAYOUT / BODY
  ============================================================================= */

body {

  font-family: var(--font-primary);
  font-size: var(--font-size-default);
  line-height: 1.428571429;

  background-color: var(--color-white);
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;

}

img {
  border: 0px;
  /* max-width: 100%; */
  /* height: auto; */
}

/* Download-Button (für Editor-Links und allgemeine Verwendung) */
.download-button {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 20px;
  background-color: var(--color-main-gray);
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}

.download-button:hover {
  text-decoration: none;
  filter: brightness(0.95);
}



.SnackBarWrapper {

  display: none;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;

}


.SnackBar {

  background-color: var(--color-white);

  width: 20%;
  padding: 20px 120px;
  border: 1px solid var(--color-black);

  /* text-align: center; */

}

.SnackBarCaption {
  font-size: 28px;
  margin: 20px;
}

.SnackBarContent {
  margin: 20px;
}

.SnackBarButton {

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: var(--color-main-green);
  color: var(--color-white);

  font-size: 18px;
  text-align: center;

  border-radius: 40px;

  padding: 8px 8px;

  height: 40px;
  cursor: pointer;
}

.SnackBarButton:hover {
  background-color: var(--color-main-gray);
}



.Wrapper {
  position: relative;
  width: 100%;
  height: 100%;

}

.MainFrame {

  position: relative;
  background-color: var(--color-white);

}


.Line_Head {

  background-color: var(--color-main-lines);
  height: 1px;
  margin: 20px 30px 0px 30px;

}


.MainGrid {
  position: relative;
  display: grid;
  margin: 0px 30px;

  grid-template-areas: 'MainContent VGridLine1 SecondContent';
  grid-template-columns: auto 3px 400px;

  justify-items: center;

}


.MainContent {

  grid-area: MainContent;
  width: 100%;
}

.VGridLine1 {

  grid-area: VGridLine1;
  background-color: var(--color-main-lines);
  width: 1px;

}

.HGridLine1 {

  background-color: var(--color-main-lines);
  height: 1px;

}


.musikantenWarpper {
  position: absolute;
  width: 360px;
  bottom: -4px;
}

.SecondContent {

  grid-area: SecondContent;

}

.SCKontakt {

  width: 360px;
  border: 1px solid var(--color-main-lines);
  margin-top: 20px;

}



.SCKontaktCaption {

  font-size: var(--font-size-caption);
  background-color: var(--color-main-gray);
  color: var(--color-white);
  padding: 5px 10px;

}

/* =============================================================================
  SECTION: VERANSTALTUNGEN
  ============================================================================= */

.SCVeranstaltungen {

  width: 360px;
  border: 1px solid var(--color-main-lines);
  margin-top: 20px;

}

.SCVeranstaltungenCaption {
  font-size: var(--font-size-caption);
  background-color: var(--color-main-gray);
  color: var(--color-white);
  padding: 5px 10px;
}

.SCVeranstaltungenContent {

  margin: 10px;

}


.SCVeranstaltungenContent a {
  color: var(--color-black);

}


.SCVeranstaltungenContentRow {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-top: 10px;
}

.SCVeranstaltungenContentImage {
  margin: 5px 10px 5px 5px;
  height: 24px;
  width: 26px;
}



.SCPraxisforum {
  /* =============================================================================
     SECTION: PRAXISFORUM
     ============================================================================= */

  margin: 20px 0;
  width: 360px;
  border: 1px solid var(--color-main-lines);

}

.SCPraxisforumCaption {
  font-size: var(--font-size-caption);
  background-color: var(--color-main-gray);
  color: var(--color-white);
  padding: 5px 10px;
}

.SCPraxisforumContent {
  margin: 10px;
}


.PraxisforumTermine {
  margin: 10px 20px 30px 20px;
}

.PraxisforumTermineCaption {
  font-size: var(--font-size-caption);
  color: var(--color-main-caption);
  margin: 10px 0 6px 0;
}

.PraxisforumTermineGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.PraxisforumTerminItem {
  background-color: var(--color-main-wrapper-bg);
  border-left: 5px solid var(--color-main-green);
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.PraxisforumTerminMeta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 0.95em;
}

.TerminBadgeOnline {
  background: #e6f4ea;
  color: #1e7e34;
  border: 1px solid #c9e7d1;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
}

.TerminBadgePraesenz {
  background: #e8f0fe;
  /* soft blue background */
  color: #1a56db;
  /* blue text */
  border: 1px solid #cddbf9;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
}

/* Neue Badges: deutlich unterscheidbar von Online/Präsenz */
.TerminBadgeAusgebucht {
  background: #fdecea;
  /* soft red background */
  color: #b42318;
  /* dark red text */
  border: 1px solid #f7c5c0;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
}

.TerminBadgeBegrenzt {
  background: #fff4e5;
  color: #a15c00;
  border: 1px solid #ffd7a6;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
}

/* Mini-Variante für die Sidebar-Datumzeile */
.TerminBadgeAusgebucht.mini,
.TerminBadgeBegrenzt.mini {
  padding: 1px 6px;
  font-size: 11px;
  line-height: 1.1;
}

.PraxisforumTerminContent {
  color: var(--color-card-text);
}


.ArtikelWrapper {
  background-color: var(--color-main-wrapper-bg);
  border-left: 5px solid var(--color-main-green);
  padding: 20px;
  margin: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* frühere ArtikelWrapper-Statusfarben entfernt; finale Definition am Dateiende bleibt */

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

/* Hält Überschrift und (Ausgebucht/Begrenzte Plätze)-Badges zusammen */
.ArtikelTitleRow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ArtikelCaption {
  color: var(--color-main-caption);
  font-size: var(--font-size-caption);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ArtikelLine {
  background-color: var(--color-main-lines);
  height: 2px;
  margin: 20px 0px;
}

/* Spezielle Trennlinie für Beratungsstellen (größerer Abstand) */
.BeratungsstellenLine {
  background-color: var(--color-main-lines);
  height: 2px;
  margin: 40px 0px;
}




.ArtikelDate {

  color: #666;
  font-size: 0.95em;
  margin-left: auto;
  /* schiebt Datum + Icon nach rechts */
  display: flex;
  align-items: center;
  gap: 8px;
}

.ArtikelEditIcon img {
  display: block;
  cursor: pointer;
}







/* =============================================================================
  SECTION: STARTSEITE
  ============================================================================= */

.StartseiteWrapper {
  /* display: flex;
    flex-wrap: wrap;
    */

  display: grid;

  justify-items: center;
  align-items: center;

  /* grid-template-columns: 1fr 1fr 1fr;  */


}

.StartseiteSectionGrid {

  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); */
  grid-template-columns: 1fr;

}

.AlleArtikelLink a {
  color: var(--color-main-link);
}

/* =============================================================================
  SECTION: UNS / TEAM CARDS (Elster-ähnlicher Card-Stil)
  ============================================================================= */

.UnsPersonGridItem {
  background: var(--color-white);
  border: 1px solid var(--color-main-lines);
  /* border-radius: 12px; */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: border-color 180ms ease;
  margin: 10px;
  overflow: hidden;
  width: 350px;
}

.UnsPersonGridItem:hover {

  border-color: var(--color-main-green);
  /* leichtes Grün */
}

.UnsPersonCaptionWrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px;
  cursor: pointer;
  user-select: none;
  background: var(--color-white);
}

/* .UnsPersonCaptionWrapper:hover {
  background: var(--color-gray-100);
}

.UnsPersonCaptionWrapper:focus-visible {
  outline: 2px solid var(--color-main-green);
  outline-offset: 2px;
} */

.UnsPersonCaption {
  font-size: 16px;
  color: var(--color-main-caption);
  margin: 10px 10px 10px 20px;
}

.UnsPersonCaptionPlus {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-gray-100);
  font-weight: 700;
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
  font-size: 32px;
  color: var(--color-main-gray);
  margin: auto 30px auto auto;
}

.UnsPersonCaptionWrapper:hover .UnsPersonCaptionPlus {
  background: var(--color-gray-200);
}

.UnsPersonText {
  padding: 0 16px 16px 16px;
  color: var(--color-card-text);
  border-top: 1px solid var(--color-gray-200);
  display: none;
}


.UnsWrapper {
  background-color: var(--color-main-wrapper-bg);
  border-left: 5px solid var(--color-main-green);
  padding: 20px;
  margin: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}




/* StoryMore nutzt ebenfalls UnsPersonCaptionPlus -> Style bleibt konsistent */

/* 
.ArtikelLine {
  background-color: #AFC422;
  height: 2px;
  margin: 20px 0px;
} */


















.IntroSectionGrid {

  display: grid;

  justify-items: center;
  align-items: center;

  grid-template-columns: 1fr 1fr 1fr;

}

.IntroSectionItemFirst {

  border-radius: 20px 20px 15px 15px;
  height: 350px;
  max-width: 300px;
  background-color: var(--color-card-bg);
  color: var(--color-card-text);
  margin: 60px 0;

}

.IntroSectionItemSecond {

  border-radius: 20px 20px 15px 15px;
  height: 350px;
  max-width: 300px;
  background-color: var(--color-card-bg);
  color: var(--color-card-text);
  margin: 60px 0;

}

/* =============================================================================
  SECTION: VERANSTALTUNGEN (Layout)
  ============================================================================= */

.VeranstaltungSectionGrid {

  display: grid;
}



/* =============================================================================
  SECTION: RECHTSPRECHUNG
  ============================================================================= */

.RechtsprechungSectionGrid {

  display: grid;

  align-items: center;
  grid-template-columns: 1fr;

}





.RechtsprechungWrapper {

  margin: 10px 10px 10px 20px;

}


.no-content-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 150px;
}

.no-content-message {
  text-align: center;
  padding: 15px;
  background-color: var(--color-gray-100);
  border: 1px solid var(--color-gray-300);
  border-radius: 5px;
  width: 100%;
  max-width: 600px;
  /* Begrenzung für bessere Lesbarkeit */
}






/* =============================================================================
  SECTION: UEBERUNS
  ============================================================================= */

.SectionGrid {

  display: grid;

  justify-items: center;
  align-items: center;

  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));

}






.ContentWrapper {
  position: relative;
  margin: 20px 0px 20px 0px;
}


.MainContentWrapper {
  position: relative;
  float: left;
  margin-left: 10px;
  width: 77%;

  min-height: 550px;
  border-right: 1.5px groove #D3D3D3;

  display: flex;
  flex-wrap: wrap;


}

.SecondContentWrapper {
  position: relative;
  float: right;

  width: 20%;
  margin-right: 20px;

}







/* =============================================================================
  SECTION: ARTIKEL / GENERISCHER CONTENT
  ============================================================================= */










.SCCryptMailContent {
  cursor: pointer;
}

.SCCryptMailContent a {
  color: rgb(69, 120, 0);
  text-decoration: none;
}



/* background-color:#e9c46a; */
/* background-color:#f4a261; */



/* =============================================================================
  SECTION: HEADER / CAPTION / LOGO
  ============================================================================= */

.Caption_Logo {
  width: 194px;
  margin: 0px 20px 0px auto;
  background-image: url('img/head.logo.svg');
  height: 160px;
}

.CaptionDiv {
  background-image: url('img/logo.background.svg');
  margin: 0px 30px 10px 30px;
}



.BSMenueWrapper {
  font-size: var(--font-size-caption);
}


/* =============================================================================
  SECTION: BERATUNGSSTELLEN
  ============================================================================= */

.BeratungsstellenWrapper {

  position: relative;
  margin: 10px 40px 10px 50px;

}



.DefaultPointerWrapper {
  position: relative;
  margin: 10px 40px 10px 20px;
  cursor: pointer;
}


/* =============================================================================
  SECTION: STELLENANGEBOT (Platzhalter – spezifische Klassen bei Bedarf)
  ============================================================================= */

.DefaultWrapper {
  position: relative;
  margin: 10px 40px 10px 20px;
}



.DefaultCaption {

  color: var(--color-main-caption);
  font-size: var(--font-size-caption);

}


.DefaultContent {
  position: relative;
}

.DefaultDate {
  position: relative;

}


.DefaultFormResponseFrame {
  border: none;

  height: 0px;
  width: 0px;
}


#SaveEditorButton {

  width: 100%;

  background-color: var(--color-main-green);
  color: #ffffff;

  font-size: var(--font-size-caption);

  padding: 14px 20px;
  margin: 0px 10px 10px 0px;
  border: none;
  border-radius: 8px 8px 8px 8px;

  cursor: pointer;
}

#SaveEditorButton:hover {
  background-color: var(--color-main-gray);
}

.EditModeButton {

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: var(--color-main-green);
  color: var(--color-white);

  font-size: var(--font-size-caption);
  text-align: center;

  border-radius: 8px 8px 8px 8px;

  padding: 8px 8px;
  margin: 10px 0;

  height: 30px;
  cursor: pointer;
}


/* =============================================================================
  SECTION: ORDER BUTTON (UI-Komponente)
  ============================================================================= */

.OrderButtonGrid {

  display: grid;

  grid-template-columns: 4fr 1fr;
  grid-template-areas: 'OrderButtonResult OrderButton';

  align-items: center;

}


.OrderButton {

  grid-area: OrderButton;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: var(--color-main-green);
  color: var(--color-white);

  font-size: var(--font-size-caption);
  text-align: center;

  border-radius: 8px 8px 8px 8px;

  padding: 8px 8px;

  height: 30px;
  cursor: pointer;
}

.OrderButton_CheckMark {

  display: none;
  height: 16px;
  width: 16px;
  background-image: url('img/check-mark-16.png');
}




.OrderButton:hover {
  background-color: var(--color-main-gray);
}

.OrderButtonResult {

  grid-area: OrderButtonResult;

}




/* ================================ /ORDER BUTTON ============================= */


/* =============================================================================
  SECTION: WAIT ANIMATION (UI-Komponente)
  ============================================================================= */

.WaitAnimation {

  display: none;

  width: 16px;
  height: 16px;

  border: 4px solid transparent;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;

}

@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(1turn);
  }
}


/* ============================== /WAIT ANIMATION ============================ */




/* =============================================================================
  SECTION: BERATUNGSSTELLEN (Grid & Items)
  ============================================================================= */

.BeratungsstellenGrid {

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

}

.BeratungsstellenGridItem {
  background: var(--color-white);
  border: 1px solid var(--color-main-lines);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: border-color 180ms ease;
  margin: 10px;
  overflow: hidden;
  width: 350px;
}

.BeratungsstellenGridItem:hover {
  border-color: var(--color-main-green);
}

.BeratungsstellenCaptionWrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px;
  cursor: pointer;
  user-select: none;
  background: var(--color-white);
}

.BerSteLandCaption {
  font-size: var(--font-size-caption);
}

.BeratungsstellenCaption {
  /* font-size: 16px; */
  color: var(--color-main-caption);
  margin: 10px 10px 10px 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.BeratungsstellenCaptionPlus {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-gray-100);
  color: var(--color-main-gray);
  font-weight: 700;
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
  font-size: 32px;
}

.BeratungsstellenCaptionWrapper:hover .BeratungsstellenCaptionPlus {
  background: var(--color-gray-200);
}

.BeratungsstellenText {
  padding: 0 16px 16px 16px;
  color: var(--color-card-text);
  border-top: 1px solid var(--color-gray-200);
  display: none;
}



.BeratungsstellenGrid a {
  color: var(--color-main-link);
}


.fireworksDiv {
  position: absolute;
  background-color: transparent;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: none;
}

/* =============================================================================
  SECTION: ARBEITSMATERIALIEN
  ============================================================================= */

.ArbeitsmaterialienSectionGrid {

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

}


.ArbeitsmaterialienContent {
  position: relative;
}

.ArbeitsmaterialienContent a {

  color: var(--color-main-link);
  text-decoration: none;

}


.SCKontakt a {
  color: var(--color-main-link);
}





/* =============================================================================
  SECTION: MAIN MENUE
  ============================================================================= */

.MainMnu_Wrapper {
  position: relative;
  margin: 0px 30px;
}

.MainMnu_Content {


  background-color: var(--color-main-green);

}

.MenueExp_Wrapper {
  display: flex;

}


.MenueItem_BS {

  position: relative;

  float: left;
  cursor: pointer;
  vertical-align: middle;
  text-align: center;

  border-right: 3px solid var(--color-white);
  margin-right: 4px;

  border-Bottom: 3px solid var(--color-main-green);
  padding: 10px;
  margin-bottom: 10px;

}

.MenueItem_BS:hover {

  background-color: #dcdcdc;

}

.MenueItem_MainMenue {

  cursor: pointer;
  padding: 10px 10px;
  vertical-align: middle;
  text-align: center;
  color: var(--color-white);
  background-color: var(--color-main-gray);
  font-size: var(--font-size-caption);
  border-right: 3px solid white;

}


.MenueItem_ExpButton {
  display: none;
  cursor: pointer;
  padding: 10px 10px;
  vertical-align: middle;
  text-align: center;
  color: var(--color-black);
  background-color: var(--color-white);
  font-size: 16px;
  margin: 5px 0px 0px 0px;
  border: 1px solid var(--color-black);

  /*
    background-repeat: no-repeat;
    background-image: url('img/menu.24.png');
    */
}


.MenueItem_MainMenue:hover {

  background-color: var(--color-main-gray);


  /* box-shadow: 0px 7px 7px -4px rgba(0, 0, 0, 0.75) */
}


/* ================================ /MAIN MENUE ============================== */


/* =============================================================================
  SECTION: EDIT MODE MENUE BUTTONS
  ============================================================================= */

.MenueItem_EDITMode {

  cursor: pointer;
  padding: 10px 10px;
  vertical-align: middle;
  text-align: center;
  color: #fff;
  background-color: var(--color-editmode);
  font-size: 16px;
  border-right: 3px solid var(--color-white);

}


.MenueItem_EDITMode:hover {

  background-color: rgb(81, 84, 91);


  /* box-shadow: 0px 7px 7px -4px rgba(0, 0, 0, 0.75) */
}

/* =============================================================================
  SECTION: RESPONSIVE (<=1182px)
  Beschreibung: Menü, Layout, Grid/Seiten zusammengefasst
  ============================================================================= */



@media screen and (max-width: 1182px) {

  /* Menü-Umschaltung */
  .MenueExp_Wrapper {
    flex-direction: column;
    display: none;
  }

  .MenueItem_MainMenue {
    border-top: 3px solid white;
  }

  .MenueItem_ExpButton {
    display: block;
  }

  .CaptionDiv {
    margin: 0px 0px 20px 0px;
  }

  .Line_Head {
    margin: 20px 0px 0px 0px;

  }


  .ArtikelWrapper {
    margin: 10px 5px;
  }




  /* Hauptlayout/Grids */
  .MainGrid {
    position: relative;
    /* margin: 0px 5px; */
    display: grid;
    grid-template-areas: 'MainContent' 'SecondContent';
    grid-template-columns: auto;
    justify-items: center;
  }

  .SCVeranstaltungen,
  .SCPraxisforum {
    /* display: none; */
  }

  .musikantenWarpper {
    width: 100%;
  }

  .VGridLine1 {
    display: none;
  }

  .SCKontakt,
  .SCVeranstaltungen,
  .SCPraxisforum {
    width: 100%;
  }

  .UnsPersonGridItem,
  .BeratungsstellenGridItem {
    width: 100%;
  }

  /* Redundante Duplikate entfernt: zweite Kopien identischer Regeln gelöscht */


}


/* =============================================================================
  SECTION: RESPONSIVE (<=680px)
  ============================================================================= */
@media screen and (max-width: 680px) {
  #PraxisforumTerminePanel #TermineContainer {
    flex-direction: column;
  }

  #PraxisforumTerminePanel .TerminBox {
    flex: 1 1 100%;
  }

  #PraxisforumTerminePanel .TerminBox textarea.TerminConten {
    width: 100%;
  }

  #PraxisforumTerminePanel .TerminBox div[style*='display:flex'][style*='gap:6px'] {
    flex-wrap: wrap;
  }
}

/* =============================================================================
  SECTION: RESPONSIVE (<=500px)
  ============================================================================= */
@media screen and (max-width: 500px) {

  .StartseiteSectionGrid {
    /* grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); */
    grid-template-columns: 1fr;
  }

  .SectionGrid {
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
  }

  .StartseiteSectionGrid .ArtikelHead {
    flex-direction: column;
    align-items: flex-start;
  }

  .StartseiteSectionGrid .ArtikelDate {
    margin-left: 0;
    /* auf kleiner Breite nicht rechts ausrichten */
    flex-direction: row;
  }

  .RechtsprechungSectionGrid .ArtikelHead {
    flex-direction: column;
    align-items: flex-start;
  }

  .RechtsprechungSectionGrid .ArtikelDate {
    margin-left: 0;
    /* auf kleiner Breite nicht rechts ausrichten */
    flex-direction: row;
  }




}

/* =============================================================================
  SECTION: RESPONSIVE (<=350px)
  ============================================================================= */
@media screen and (max-width: 350px) {}



/* =============================================================================
  SECTION: INFOBAR – DEVMODE
  ============================================================================= */
#InfoBar_DevMode {
  position: relative;
  height: 40px;

}

.InfoBar_DevMode_Item {
  float: left;
  margin: 10px;
}

/* ============================== /INFOBAR DEVMODE =========================== */

/* =============================================================================
  SECTION: INFOBAR – EDITMODE
  ============================================================================= */
#InfoBar_EDITMode {
  position: relative;
  height: 40px;
  background-color: var(--color-infobar);
}

.InfoBar_EDITMode_Item {
  float: left;
  margin: 10px;
}

/* ============================== /INFOBAR EDITMODE ========================== */







/* =============================================================================
  SECTION: INFOBAR – NOJS
  ============================================================================= */
#InfoBar_NoJs {
  position: relative;
  height: 40px;
  background-color: var(--color-infobar);
}

.InfoBar_NoJs_Item {
  float: left;
  margin: 10px;
}

/* =============================== /INFOBAR NOJS ============================= */


/* =============================================================================
  SECTION: INFOBAR – N/A
  ============================================================================= */
#InfoBar_NA {
  position: relative;
  margin: 20px 40px 0px 40px;
  border: 1px dotted var(--color-accent-warning);

}

.InfoBar_NA_Item {
  float: left;
  margin: 10px;
}

/* ================================ /INFOBAR N/A ============================= */





.Feed_ArrowUp {
  float: right;
  height: 42px;
  width: 63px;
  margin-right: 10px;
  background: url('img/up-arrow.png') repeat-x top;
  cursor: pointer;
}

/* =============================================================================
  SECTION: UTILITIES / HELPERS
  ============================================================================= */

.Clear_Both {
  clear: both
}

.Clear_Right {
  clear: right
}

.Clear_Left {
  clear: left
}



.HLine {
  background-color: var(--color-main-lines);
  height: 1px;
}

.Line_Black {
  background-color: var(--color-black);
  height: 1px;
}

/* =============================================================================
  SECTION: FEED (Impressum/Datenschutz-Leiste am Seitenende)
  ============================================================================= */

.FeedWrapper {

  position: relative;
  display: flex;

  background-color: var(--color-main-gray);

  /* height:50px;  */
  /* margin: 0 10px; */

}

.FeedLink {
  margin: auto 30px auto auto;
}

.FeedLink a {
  color: #ffffff;
  text-decoration: none;
}

/* =============================================================================
  SECTION: DEFAULT BUTTON (generischer Aktionsbutton)
  ============================================================================= */

.DefaultButton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background-color: var(--color-main-green);
  color: var(--color-white);

  font-size: var(--font-size-caption);
  text-align: center;

  border-radius: 8px;
  padding: 8px 12px;
  height: 40px;
  cursor: pointer;

  /* Platzierung analog zu bestehenden UI-Buttons */
  width: fit-content;
  margin: 10px 20px;
}

.DefaultButton:hover {
  background-color: var(--color-main-gray);
}

.DefaultButton_CheckMark {
  display: none;
  height: 16px;
  width: 16px;
  background-image: url('img/check-mark-16.png');
}

/* ================================ /DEFAULT BUTTON ========================= */

/* =============================================================================
  SECTION: STATE OVERRIDES (muss zuletzt kommen)
  Beschreibung: Überschreibt die Standard-Border-Farbe des ArtikelWrappers
  abhängig vom Status (Ausgebucht/Begrenzt). Steht bewusst am Ende, um
  Kontextspezifische Regeln wie `.StartseiteSectionGrid .ArtikelWrapper` zu
  überstimmen.
  ============================================================================= */

.ArtikelWrapper.ArtikelWrapper--full {
  border-left-color: #b42318;
  /* Ausgebucht */
}

.ArtikelWrapper.ArtikelWrapper--limited {
  border-left-color: #ffab44;
  /* Begrenzte Plätze */
}