/* Place your custom styles here */

.page-title {
    text-align: center;
}

.title-centered .page-title {
    text-align: center;
}

.button {
  display: inline-block;
  padding: 5px 15px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: #fff;
  outline: #8a8a8a;
  background-color: #8a8a8a;
  border: ppx;
  border-radius: 150px;
  box-shadow: 4px 4px #363636;
}

.button:hover {color: black; background-color: #63e368}

.button:active {
  color: #63e368;
  background-color: #b11116;
  box-shadow: 1px 1px black;
  transform: translateY(2px);
}

.header{
	font-size: 45px;
	font-weight: bold;
	font-family: Arial, ,Verdana, Helvetica, sans-serif;
}

.pdf-embed{
	transform: translateX(-50%);
	border: 2px solid black;
	position: relative;
	min-width: 394px;
	height: 1175px;
	width: 820px;
	left: 50%;
	top: 50%;
}

.img_center img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.img_right img {
  display: block;
  margin-left: auto;
  margin-right: 0;
}

.float-left {
  float: left;
  margin: 0 15px 15px 0; /* Rechts- und unten Abstand */
  max-width: 40%; /* Bildgröße begrenzen */
}

.float-right {
  float: right;
  margin: 0 0 15px 15px; /* Links- und unten Abstand */
  max-width: 40%;
}

blockquote {
  margin-left: 2em;        /* Einrückung nach links */
  padding-left: 1em;       /* Innenabstand links */
  border-left: 3px solid #ccc; /* Optional: dezente Linie */
  color: #555;             /* Optional: etwas hellere Schrift */
  font-style: normal;      /* Kein kursiv, falls Theme kursiv macht */
}

table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
    font-family: Arial, sans-serif;
}

table th, table td {
    border: 1px solid #ccc;
    padding: 8px 12px;
    text-align: left;
}

table th {
    background-color: #f0f0f0;
}

table tr:nth-child(even) {
    background-color: #fafafa;
}

table td code {
    font-family: inherit;
    font-size: inherit;
    background: none;
    padding: 0;
}

/* Aktive Seite farblich hervorheben */
.sidebar-nav .active-page > a,
.sidebar-nav .mm-active > a {
    background-color: #8d836a !important; /* hintergrund */
    color: #dfe6f3 !important;               /*  Text */
	font-weight: bold;
}

.sidebar-nav a.mm-active.active-page {
    text-align: center !important;
    display: block !important;
}

/* Falls dein Desktop-Mode in settings.css.html.twig Toggle ausblendet, wieder sichtbar machen */
@media (min-width: 1200px) {
  #fixed-hamburger .toggle-button { visibility: visible !important; }
}

/* Fester Button oben links, immer über Menü und Panel */
#fixed-hamburger {
  position: fixed !important;
  top: 15px;
  left: 15px;
  z-index: 10001 !important; /* über Off-Canvas und Panel */
  pointer-events: auto;
}

/* Button selbst fixieren (zusätzliche Absicherung) */
#fixed-hamburger .hamburger {
  position: fixed !important;
  top: 15px;
  left: 15px;
  margin: 0 !important;
  z-index: 10001 !important;
}

/* Linienfarbe (anpassbar) */
#fixed-hamburger .hamburger-inner,
#fixed-hamburger .hamburger-inner::before,
#fixed-hamburger .hamburger-inner::after {
  background-color: #ae0f0a !important;
}

 /* Panel nicht dauerhaft nach rechts schieben */
  #panel {
    margin-left: 0 !important;
  }
  
/* ===========================
   0) Admin-Edit-Link ausblenden (wie gehabt)
   =========================== */
body.fullwidth a[href^="/admin/pages"] {
  display: none !important;
}
/* Optional: auch auf pdf-full / full-width-page ausblenden
body.pdf-full a[href^="/admin/pages"],
body.full-width-page a[href^="/admin/pages"] { display:none !important; }
*/

/* ===========================
   1) Vertikales Flex-Layout (volle Höhe)
   -> gilt für pdf-full UND full-width-page
   =========================== */
body.pdf-full,
body.full-width-page {
  min-height: 100dvh; /* dynamische Viewport-Höhe (robust auf Mobile) */
  /* Falls du festen Header/Footer hast, kannst du Abstände setzen: */
  --top-gap: 0px;
  --bottom-gap: 0px;
}

body.pdf-full #panel,
body.full-width-page #panel {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;  /* Header oben, Content dehnt nach unten */
}

body.pdf-full #panel .content,
body.full-width-page #panel .content {
  flex: 1 1 auto;          /* füllt die Resthöhe */
  display: flex;
  flex-direction: column;
  min-height: 0;           /* wichtig für korrektes Overflow-Verhalten */
}

/* Utility: Inhalte wirklich auf die Resthöhe strecken
   -> benutze <div class="fullwidth-viewport"> ... </div> um einen Bereich
      (z.B. iFrame/PDF.js) auf volle Höhe zu bringen */
.fullwidth-viewport {
  flex: 1 1 auto;
  min-height: calc(100dvh - var(--top-gap) - var(--bottom-gap));
  width: 100%;
  min-width: 0;    /* Overflow in Flexbox vermeiden */
  overflow: hidden;/* oder 'auto' falls du Scrollbars im Block willst */
}
.fullwidth-viewport > iframe,
.fullwidth-viewport > embed,
.fullwidth-viewport > object,
.fullwidth-viewport > canvas {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===========================
   2) MOBILE (unter Desktop-Breite)
   -> Slideout/Layer intakt lassen; nur Z-Reihenfolgen sichern
   =========================== */
@media (max-width: 1199.98px) {
  /* Falls dein PDF- oder iFrame-Block den Hamburger überdeckt:
     Inhalt unter Menü/Overlay legen */
  body.pdf-full #panel .content > div,
  body.pdf-full #panel iframe,
  body.pdf-full #panel canvas,
  body.full-width-page #panel .content > div,
  body.full-width-page #panel iframe,
  body.full-width-page #panel canvas {
    position: relative;
    z-index: 1;
  }
}

/* ===========================
   3) DESKTOP (ab Desktop-Breite)
   -> Slideout-Verschiebung neutralisieren + echte Vollbreite
   =========================== */
@media (min-width: 1200px) {
  /* Panel auf echte Vollbreite */
  body.pdf-full #panel,
  body.full-width-page #panel {
    transform: none !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Theme-/Bootstrap-"Tunnel" (container/row/cols) aufbiegen */
  body.pdf-full #panel .content,
  body.pdf-full #panel .content-wrapper,
  body.pdf-full #panel .container,
  body.pdf-full #panel .row,
  body.pdf-full #panel [class*="col-"],
  body.full-width-page #panel .content,
  body.full-width-page #panel .content-wrapper,
  body.full-width-page #panel .container,
  body.full-width-page #panel .row,
  body.full-width-page #panel [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Rand-zu-Rand-Optik für den Haupt-Content (optional):
     Wenn du das NUR für einzelne Blöcke willst, nimm stattdessen
     die .fullwidth-viewport-Regel unten und lass diese hier weg. */
  body.pdf-full #panel .content,
  body.full-width-page #panel .content {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  /* pdf-full: PDF.js-Viewport wirklich vollflächig */
  .pdfjs-viewport {
    position: relative;
    width: 100vw;
    height: 100vh;    /* oder z.B. 80vh, wenn du Platz darunter brauchst */
    overflow: hidden;
  }
  .pdfjs-viewport iframe,
  .pdfjs-viewport embed,
  .pdfjs-viewport object {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

  /* PDF.js inline (Canvas) skaliert auf Containerbreite */
  .pdfjs-inline canvas {
    width: 100% !important;
    height: auto !important;
  }

  /* Alternative: statt den gesamten .content randlos zu ziehen,
     kannst du gezielt NUR bestimmte Sektionen randlos machen:
     .fullwidth-viewport { width: 100vw; margin-left: calc(50% - 50vw); }
  */
}