/*
 * TYPO3-only layout bridge.
 *
 * The frozen prototype renders these ranges as one visual section. TYPO3
 * deliberately keeps them as separate, human-editable content elements. This
 * last-loaded override preserves the approved geometry without changing the
 * prototype master or coupling the generator to TGK26-specific selectors.
 */

.contact-collection-head {
  padding-bottom: 0;
}

.contact-group[data-ce-source^="records.contacts."] {
  position: relative;
  isolation: isolate;
  width: calc(100% - (var(--gutter) * 2));
  max-width: calc(var(--max-w) - (var(--gutter) * 2));
  margin-inline: auto;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

/* A positioned background layer keeps the section full-bleed without clipping
 * the editable contact element. The previous 100vmax shadow plus clip-path
 * could cut off the lower part of cards in captured and transformed views. */
.contact-group[data-ce-source^="records.contacts."]::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--paper-soft);
  pointer-events: none;
}

/* MinEasy keeps a zero-height language container between editable TYPO3
 * records. Therefore the prototype's direct-sibling spacing cannot be relied
 * on for the later groups. */
.contact-group[data-ce-source^="records.contacts."]:not([data-ce-source="records.contacts.leadership"]) {
  margin-top: var(--gap-8);
}

.contact-group[data-ce-source^="records.contacts."] .contact-grid {
  grid-auto-rows: 1fr;
  align-items: stretch;
}

.contact-group[data-ce-source^="records.contacts."] .contact-card:not(.contact-card--hut) {
  grid-template-rows: auto 1fr;
  align-self: stretch;
}

.contact-group[data-ce-source^="records.contacts."] .contact-card--compact {
  display: flex;
  flex-direction: column;
}

.contact-group[data-ce-source^="records.contacts."] .contact-card--compact .contact-card__body {
  flex: 1 1 auto;
}

.contact-group[data-ce-source^="records.contacts."] .contact-card__body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.contact-group[data-ce-source^="records.contacts."] .contact-card__role {
  min-block-size: 2.7em;
  line-height: 1.35;
}

.contact-group[data-ce-source^="records.contacts."] .contact-card__body h3 {
  min-block-size: 2.28em;
  padding-block: .06em;
  line-height: 1.08;
}

.contact-group[data-ce-source^="records.contacts."] .contact-card__links {
  margin-top: auto;
  padding-top: var(--gap-3);
}

.contact-group[data-ce-source="records.contacts.hut-host"] {
  margin-bottom: var(--gap-9);
}

/*
 * The frozen prototype may retain its compact negative navigation inset. The
 * TYPO3 runtime must not: an active item needs a stable visible left edge in
 * every desktop navigation state, including the pinned header.
 */
.nav .nav-item.is-active > .nav-item__topline .nav-item__link,
.nav.is-pinned .nav-item.is-active > .nav-item__topline .nav-item__link {
  margin-inline-start: 0;
  padding-inline-start: 16px;
}

/* Einfache Sprache bleibt im jeweiligen tt_content-Element. Der Hero behält
 * Medium, Titel, Höhe und Position; nur sein redaktioneller Textblock wechselt. */
.hero__language {
  display: grid;
  gap: var(--gap-3);
  justify-items: start;
}

.hero__simple {
  width: min(100%, 48rem);
  padding: clamp(14px, 2vw, 24px);
  border-radius: var(--r-md);
  background: var(--image-text-bg);
  color: var(--on-media);
  font-size: calc(clamp(17px, 1.8vw, 23px) * var(--font-scale, 1));
  line-height: 1.55;
  text-shadow: none;
}

.hero__simple :is(p, ul, ol) {
  margin: 0;
}

.hero__simple :is(p, ul, ol) + :is(p, ul, ol) {
  margin-top: .7em;
}

/* VoiceReader inherits the switcher's selected light/dark/high-contrast
 * palette instead of following only the operating-system color preference. */
.tgk-style-switcher .voicereader-pro {
  --voicereader-primary: var(--red);
  --voicereader-primary-hover: color-mix(in srgb, var(--red) 82%, var(--ink));
  --voicereader-bg: var(--paper-soft);
  --voicereader-text: var(--ink);
  --voicereader-border: var(--line);
  --voicereader-progress-bg: color-mix(in srgb, var(--ink) 16%, transparent);
  --voicereader-focus: var(--red);
  padding: 12px;
  font-family: inherit;
}

.tgk-style-switcher .voicereader-progress {
  flex-basis: 100%;
  min-width: 100%;
  height: auto;
  min-height: 28px;
  margin-bottom: 6px;
  overflow: visible;
  background: linear-gradient(var(--voicereader-progress-bg), var(--voicereader-progress-bg)) top / 100% 8px no-repeat;
}

.tgk-style-switcher .voicereader-progress__bar {
  height: 8px;
  border-radius: 4px;
}

.tgk-style-switcher .voicereader-progress__time {
  justify-content: flex-end;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: calc(10px * var(--font-scale, 1));
}

.tgk-style-switcher .voicereader-controls {
  align-items: flex-start;
}

.tgk-style-switcher .voicereader-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.tgk-style-switcher .voicereader-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  font-size: calc(12px * var(--font-scale, 1));
  font-weight: 750;
}

.tgk-style-switcher .voicereader-field select,
.tgk-style-switcher .voicereader-field input[type="range"] {
  width: 100%;
  min-width: 0;
}

.tgk-style-switcher .voicereader-field select {
  min-height: 40px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 650;
}

.tgk-style-switcher .voicereader-field select:focus-visible,
.tgk-style-switcher .voicereader-field input[type="range"]:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

.tgk-style-switcher .voicereader-field option:disabled {
  color: var(--muted);
}

.tgk-style-switcher [data-speed-output] {
  color: var(--red);
  font-family: var(--font-mono);
}

.tgk-style-switcher .voicereader-provider {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: calc(10px * var(--font-scale, 1));
  color: var(--muted);
}

.tgk-style-switcher .voicereader-hint {
  margin: 5px 0 0;
  font-size: calc(11px * var(--font-scale, 1));
  line-height: 1.45;
  color: var(--muted);
}

@media (max-width: 420px) {
  .tgk-style-switcher .voicereader-settings {
    grid-template-columns: 1fr;
  }
}

/*
 * Accessibility tools: still-praezise.
 * The closed control is one quiet gear on the left. The reading controls are
 * the visual centre of the compact flyout; the unrelated scroll-to-top action
 * remains a separate control on the right.
 */
body:has(.tgk-style-switcher) .tgk-footer {
  padding-bottom: 88px;
}

.tgk-style-switcher {
  position: fixed;
  z-index: 120;
  right: auto;
  bottom: 20px;
  left: 20px;
  width: 52px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: calc(14px * var(--font-scale, 1));
}

.tgk-style-switcher__trigger,
.scroll-top {
  display: inline-grid;
  width: 52px;
  height: 52px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .18);
}

.tgk-style-switcher__trigger:hover,
.tgk-style-switcher__trigger:focus-visible,
.tgk-style-switcher__trigger[aria-expanded="true"],
.scroll-top:hover,
.scroll-top:focus-visible {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.tgk-style-switcher__trigger:focus-visible,
.tgk-style-switcher__close:focus-visible,
.scroll-top:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.tgk-style-switcher__trigger svg,
.tgk-style-switcher__close svg,
.scroll-top svg,
.ss-tool-heading > svg,
.ss-radios--navigation svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tgk-style-switcher__panel {
  position: absolute;
  bottom: 64px;
  left: 0;
  width: min(350px, calc(100vw - 24px));
  max-height: min(78vh, 690px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 22px 64px rgba(0, 0, 0, .24);
}

.tgk-style-switcher__panel[hidden] {
  display: none;
}

.tgk-style-switcher__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px 10px 14px;
  border-bottom: 1px solid var(--line);
}

.tgk-style-switcher__head > span,
.tgk-style-switcher__head strong,
.tgk-style-switcher__head small {
  display: block;
}

.tgk-style-switcher__head small,
.ss-tool-heading small {
  margin-bottom: 2px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: calc(9px * var(--font-scale, 1));
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.tgk-style-switcher__head strong {
  font-size: calc(15px * var(--font-scale, 1));
  line-height: 1.15;
}

.tgk-style-switcher__close {
  display: inline-grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper-soft);
  color: var(--ink);
}

.tgk-style-switcher__close:hover {
  border-color: var(--red);
  color: var(--red);
}

.tgk-style-switcher__close svg {
  width: 19px;
  height: 19px;
}

.tgk-style-switcher__body {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  grid-template-areas:
    "view view"
    "voice voice"
    "reading navigation";
  gap: 8px;
  max-height: min(68vh, 620px);
  padding: 9px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.ss-tool-group--view {
  grid-area: view;
}

.ss-tool-group--voice {
  grid-area: voice;
}

.ss-tool-group--reading {
  grid-area: reading;
}

.ss-tool-group--navigation {
  grid-area: navigation;
}

.ss-tool-group {
  display: grid;
  min-width: 0;
  gap: 6px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 11px;
  background: var(--paper-soft);
}

.ss-tool-group > h2,
.ss-tool-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: calc(11px * var(--font-scale, 1));
  line-height: 1.2;
}

.ss-tool-group > h2 {
  font-family: var(--font-mono);
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ss-control-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.ss-control-row > span {
  color: var(--muted);
  font-size: calc(11px * var(--font-scale, 1));
  font-weight: 700;
  line-height: 1.15;
}

.tgk-style-switcher .ss-radios {
  gap: 5px;
}

.tgk-style-switcher .ss-radios button {
  min-height: 34px;
  padding: 5px 6px;
  border-radius: 7px;
  background: var(--paper);
  font-size: calc(11px * var(--font-scale, 1));
  font-weight: 750;
}

.ss-tool-group--voice {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 9px;
  border-color: color-mix(in srgb, var(--red) 48%, var(--line));
  border-left: 4px solid var(--red);
  background: color-mix(in srgb, var(--paper) 92%, var(--red));
}

.ss-tool-heading {
  display: flex;
  align-items: center;
  gap: 9px;
}

.ss-tool-heading > svg {
  flex: 0 0 24px;
  color: var(--red);
}

.ss-tool-heading h2 {
  font-size: calc(17px * var(--font-scale, 1));
}

.tgk-style-switcher .voicereader-pro {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

.tgk-style-switcher .voicereader-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 44px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-items: start;
  gap: 6px;
}

.tgk-style-switcher .voicereader-btn {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 6px 9px;
  font-size: calc(14px * var(--font-scale, 1));
}

.tgk-style-switcher .voicereader-btn--stop,
.tgk-style-switcher .voicereader-btn--download {
  width: 44px;
  padding-inline: 6px;
}

.tgk-style-switcher .voicereader-progress {
  grid-column: 1 / -1;
  min-width: 100%;
  min-height: 22px;
  margin: 0;
  background-size: 100% 6px;
}

.tgk-style-switcher .voicereader-progress__bar {
  height: 6px;
}

.tgk-style-switcher .voicereader-settings {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: 6px;
  margin-top: 7px;
}

.tgk-style-switcher .voicereader-field {
  gap: 3px;
  font-size: calc(10px * var(--font-scale, 1));
}

.tgk-style-switcher .voicereader-field select {
  box-sizing: border-box;
  min-height: 34px;
  padding: 5px 7px;
  border-radius: 7px;
  font-size: calc(10px * var(--font-scale, 1));
}

.tgk-style-switcher .voicereader-field input[type="range"] {
  box-sizing: border-box;
  margin-inline: 0;
}

.tgk-style-switcher .voicereader-provider {
  margin-top: 6px;
  overflow: hidden;
  font-size: calc(9px * var(--font-scale, 1));
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tgk-style-switcher .voicereader-hint {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tgk-style-switcher .voicereader-loading,
.tgk-style-switcher .voicereader-error {
  margin-top: 5px;
  padding: 5px;
  font-size: calc(11px * var(--font-scale, 1));
}

.tgk-style-switcher .ss-radios--navigation {
  grid-template-columns: 1fr;
}

.tgk-style-switcher .ss-radios--navigation button,
.tgk-style-switcher .ss-radios--navigation button:last-child {
  display: grid;
  grid-column: auto;
  grid-template-columns: 22px auto;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 42px;
}

.ss-tool-group--reading .ss-control-row {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 5px;
}

.ss-radios--navigation svg {
  width: 20px;
  height: 20px;
}

.scroll-top {
  right: 20px;
  bottom: 20px;
  width: 52px;
  height: 52px;
  border-width: 1px;
  font-weight: inherit;
}

.scroll-top svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 760px) {
  body:has(.tgk-style-switcher) .tgk-footer {
    padding-bottom: 84px;
  }

  .tgk-style-switcher {
    right: auto;
    bottom: 12px;
    left: 12px;
  }

  .tgk-style-switcher.is-collapsed {
    width: 52px;
  }

  .tgk-style-switcher__panel {
    bottom: 62px;
  }

  .tgk-style-switcher__body {
    max-height: min(70vh, 620px);
  }

  .scroll-top {
    right: 12px;
    bottom: 12px;
  }
}

@media (max-width: 420px) {
  .tgk-style-switcher .voicereader-settings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tgk-style-switcher .ss-radios--navigation button {
    grid-template-columns: 20px auto;
    gap: 4px;
  }
}

main[data-legal-page="true"] [data-ce-source="legal.imprint.content"] {
  padding-bottom: var(--gap-5);
}

[data-ce-source="legal.imprint.credits"] {
  padding-block-end: var(--gap-8);
}

[data-ce-source="legal.imprint.credits"] > .mincore-columns {
  max-width: var(--max-w);
  padding-inline: var(--gutter);
}

[data-ce-source="legal.imprint.credits"] .mincore-columns__row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-5);
}

[data-ce-source="legal.imprint.credits"] .mincore-columns__col {
  display: flex;
}

[data-ce-source="legal.imprint.credits"] .info-card {
  width: 100%;
  height: 100%;
}

[data-ce-source="legal.imprint.credits"] .info-card > .min-header {
  margin-block-end: var(--gap-2);
}

[data-ce-source="legal.imprint.credits"] .info-card .ce-bodytext p {
  line-height: 1.55;
  margin-block: 0;
}

[data-ce-source="legal.imprint.credits"] .info-card .ce-bodytext p + p {
  margin-block-start: var(--gap-3);
}

@media (max-width: 1100px) {
  [data-ce-source="legal.imprint.credits"] .mincore-columns__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  [data-ce-source="legal.imprint.credits"] .mincore-columns__row {
    grid-template-columns: 1fr;
  }
}

/*
 * TYPO3 stores the calendar as one flat, human-editable IRRE collection.
 * Month headings span the grid; event records retain the same compact visual
 * grouping as the nested PHP prototype without hiding records from editors.
 */
.event-calendar--flat {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--gap-4);
  row-gap: 0;
}

.event-calendar--flat > .event-calendar__month-title {
  grid-column: 1 / -1;
  margin-top: var(--gap-7);
}

.event-calendar--flat > .event-calendar__month-title:first-child {
  margin-top: 0;
}

.event-calendar--flat > .event-calendar__day {
  margin-bottom: 0;
}

.termine-intro-section,
[data-ce-source="page.termine.intro"] {
  padding-bottom: var(--gap-7);
}

[data-ce-source="records.news"] {
  padding-top: var(--gap-7);
}

@media (max-width: 1020px) {
  .event-calendar--flat {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .event-calendar--flat {
    grid-template-columns: 1fr;
  }
}