/* =============================================================================
   Tables
   ========================================================================== */

/* Zellen kontrastieren mit dem Container-Hintergrund (wie Live base.css):
   Standard = ungerader Container (hellblau) → weiße Zellen, hellblaue Rahmen. */
table.ce-table td {
  border: 2px solid rgb(var(--c-primary-lighter));
  background: rgb(var(--c-neutral-lightest));
  padding: 0.3rem 0.7rem;
}

/* Gerader Container (weiß) → invertiert: hellblaue Zellen, weiße Rahmen
   (Live: `.contentarea > div:nth-child(2n) table.ce-table td`). */
.content > .frame:nth-child(even) table.ce-table td {
  border: 2px solid rgb(var(--c-neutral-lightest));
  background: rgb(var(--c-primary-lighter));
}

/* Graue Box: weiße Zellen mit grauem Rahmen. */
.content .frame-bg-grey table.ce-table td {
  border: 2px solid rgb(var(--c-neutral-lighter));
  background: rgb(var(--c-neutral-lightest));
}

/* Kopf teal/weiß, Roboto Condensed Bold Italic uppercase (Live table.ce-table th).
   caption = zentrierte Voll-Breite-Überschrift (Live .th-caption), th = linksbündig. */
table.ce-table th,
table.ce-table caption {
  color: rgb(var(--c-neutral-lightest));
  background: rgb(var(--c-primary));
  border: 2px solid rgb(var(--c-primary-lighter));
  padding: 0.3rem 0.7rem;
  font-family: var(--f-family-2);
  font-weight: var(--f-weight-b);
  font-style: italic;
  font-size: 125%;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: left;
  vertical-align: top;
}

table.ce-table caption {
  text-align: center;
}

/* Kopf-Rahmen je Container/Box angleichen (weiß bzw. grau). */
.content > .frame:nth-child(even) table.ce-table th,
.content > .frame:nth-child(even) table.ce-table caption,
.content .frame-bg-grey table.ce-table th,
.content .frame-bg-grey table.ce-table caption {
  border: 2px solid rgb(var(--c-neutral-lightest));
}
.content .frame-bg-grey table.ce-table th,
.content .frame-bg-grey table.ce-table caption {
  border-color: rgb(var(--c-neutral-lighter));
}

.ios-scrollbar {
  padding-bottom: 20px;
  position: relative;
}

.ios-scrollbar::after {
  content: '\f178';
  font-family: 'FaLight', sans-serif;
  font-size: 15px;
  line-height: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
}


/* =============================================================================
   Standard contentelements
   ========================================================================== */

/* Uploads */
.uploads__item {
  background-color: rgb(var(--c-neutral-lighter));
}

.content .frame-bg-grey .uploads__item {
  background-color: rgb(var(--c-neutral-lightest));
}

.uploads__link {
  color: rgb(var(--c-neutral-dark));
}

.uploads__title {
  color: rgb(var(--c-primary));
  font-size: var(--f-size-l-1);
}

.uploads__arrowpath {
  stroke: rgb(var(--c-primary));
}

@media (hover: hover) {
  .content .frame-bg-grey .uploads__item:hover,
  .uploads__item:hover {
    background-color: rgb(var(--c-primary));
  }

  .uploads__item:hover,
  .uploads__item:hover .uploads__description,
  .uploads__item:hover .uploads__title {
    color: rgb(var(--c-neutral-lightest));
  }

  .uploads__item:hover .uploads__arrowpath {
    stroke: rgb(var(--c-neutral-lightest));
  }
}

/* Menus */
.frame-type-menu_pages li a,
.frame-type-menu_sitemap li a {
  color: rgb(var(--c-neutral-dark));
}

/* Paginator */
ul.f3-widget-paginator {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

ul.f3-widget-paginator li {
  list-style-type: none;
  width: 40px;
  height: 40px;
  margin: 0 5px 5px 0;
  background: rgb(var(--c-neutral-lighter));
  display: flex;
  justify-content: center;
  align-items: center;
}

ul.f3-widget-paginator a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

ul.f3-widget-paginator li.current {
  background: rgb(var(--c-primary));
  color: rgb(var(--c-neutral-lightest));
}

ul.f3-widget-paginator li.current a {
  color: rgb(var(--c-neutral-lightest));
}

@media (hover: hover) {
  ul.f3-widget-paginator li:hover {
    background: rgb(var(--c-primary));
    color: rgb(var(--c-neutral-lightest));
  }

  ul.f3-widget-paginator li:hover a {
    color: rgb(var(--c-neutral-lightest));
  }
}

ul.f3-widget-paginator li.previous a::after {
  content: '\f053';
  font-family: 'FaLight', sans-serif;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  height: auto;
  line-height: normal;
  vertical-align: baseline;
  font-size: var(--f-size);
}

ul.f3-widget-paginator li.next a::after {
  content: '\f054';
  font-family: 'FaLight', sans-serif;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  height: auto;
  line-height: normal;
  vertical-align: baseline;
  font-size: var(--f-size);
}

/* =============================================================================
   Menus
   ========================================================================== */

/* Metanav — wie Live: IDENTICA-Logo links, Links rechts (grau, uppercase).
   ABWEICHUNG von Live (bewusst): Datenschutz/Impressum sind rechtlich Pflicht → mobil NIE
   ausblenden (Live macht `#metanav display:none`). Stattdessen mobil umbrechen (s. u.). */
.metanav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
}

.metanav__logo {
  flex: none;
  width: 110px;
  height: auto;
  display: block;
}

.metanav__nav {
  text-align: right;
}

.metanav__link {
  color: rgb(var(--c-neutral-dark));
  text-transform: uppercase;
}

@media (hover: hover) {
  .metanav__link:hover {
    color: rgb(var(--c-primary));
  }
}

@media (max-width: 640px) {
  /* Datenschutz/Impressum sichtbar lassen: Logo + Links mittig, Links brechen darunter um. */
  .metanav__bar {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
  .metanav__nav {
    width: 100%;
    text-align: center;
  }
}

/* =============================================================================
   Forms
   ========================================================================== */

input,
select,
textarea {
  border: 1px solid rgb(var(--c-neutral-light));
  padding: calc(0.6rem - 1px) 0.6rem;
  margin: 0 0 0.5rem 0;
  line-height: 1.4;
}

/* =============================================================================
   Footer (colPos 3) — teal wie Live (.footerarea: background #006682, Text weiß)
   ========================================================================== */

/* Below-fold: überschreibt die weiße .footer-Grundregel aus firstload.css.
   Der Footer-Inhalt ist ein col2-3070-Container (links Kontakt -w30, rechts
   Formular -w70) — die Spalten macht der Container selbst, hier nur teal + weiß.
   Formular-Feinschliff (weiße Felder, Ghost-Button „ABSENDEN") gehört zum
   Form-Framework-CSS. */
.footer {
  background: rgb(var(--c-primary));
  color: rgb(var(--c-neutral-lightest));
}

.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer a {
  color: rgb(var(--c-neutral-lightest));
}

/* Footer-Links fett wie Live (.footerarea a { font-family:'Roboto Bold' }) */
.footer a {
  font-weight: var(--f-weight-b);
}

/* Alt-Vorlage-Icon-Klasse `.iconfont` (in RTE-Content, z. B. Footer
   „Route planen \f105"): auf die in v12 geladene FontAwesome-Schrift mappen,
   sonst rendert das PUA-Zeichen als Ersatzkästchen. */
.iconfont {
  font-family: 'FaRegular', sans-serif;
  font-style: normal;
  font-weight: normal;
}

/* =============================================================================
   Media Queries
   ========================================================================== */