:where(table:not(.no-default-table-style)) th {
color-scheme: dark only;
}


/*Fix gegen verzerrte Logos auf kleinen Bildschirmen*/
@media (max-width: 1200px) {
  .c-page-header-main__signet--desktop {
    block-size: auto;
  }
}

.color-white {
  color: var(--color-white-base);
}

.ce-gallery figure {
  /*in2code hat zwar imgs in galleries auf 100% Breite gesetzt, jedoch nicht die figure die das img umgibt, was bei Bildern caption zu Problemen führt*/
  inline-size: 100%;
}


.uzk-next-level-menu {
  border-top: 1px solid var(--color-border-light);
}


p.uzk15__code,
p.code {
  padding-left: 30px;
  border      : 1px dotted #DBDBDB;
  font-family : Courier, "Courier New", "FreeMono", monospace;
  display     : block;
  padding     : 4px;
  min-width   : 320px;
  text-align  : left;
  line-height : 1.2em;
}

p.uzk15__code em,
p.code em {
  font-family: Courier, "Courier New", "FreeMono", monospace;
  font-style : italic;
}

span.uzk15__code,
span.code {
  font-family: Courier, "Courier New", "FreeMono", monospace;
}

p.uzk_multiteaserbody {
  margin   : 0;
  font-size: 0.9em;
}

.c-card__year {
  /*Hinzugefügt weil bei den event lists die Jahreszahlen sehr unterschiedlich breit sein können, was komisch aussieht.... mal sehen ob sich wer beschwert*/
  font-variant-numeric: tabular-nums;
  /* Achtung benötigt Albert-Sans in einer Version von 01.03.2024 oder neuer*/
}


hr {
  /* auf Wunsch von D8 wurden die HRs dezenter gestaltet und folgen damit dem 2015er Stil*/
  border    : none;
  border-top: 1px solid #DBDBDB;
  margin    : 1em 0;
}



h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  /*D8 bemängelte das Fehlen von Abständen zwischen den Überschriften und dem folgenden Elementen, daher testweise hier zugefügt*/
  margin-block-end  : .5em;
  margin-block-start: .5em;
}

.c-patch__content h2 {
  /*Fix zum Fix: Die geänderten Abstände machen die Bouble von studifinder kaputt, daher müssen sie sort rückgängig gemacht werden*/
  margin-block-end  : 0;
  margin-block-start: 0;
}


.c-card__title {
  /* Die Obigen Veränderungen der Abstände bei den Überschriften führen bei Cards zu ungewollten Abständen die zurückgesetzt werden müssen*/
  margin-block-end  : 0;
  margin-block-start: 0;

}

.c-card--link .c-card__header {
  /*in2code hatte keine Bilder in den Link Cards vorgesehen, wir nutzen sie aber trotzdem und brauchen zusätzliche Abstände für den header in dem sich die bilder befinden */
  max-width  : 5rem;
  margin-left: 1rem;
  min-width  : 5rem;
}

@media (min-width: 576px) and (max-width: 719px) {

  /* die Zwischengröße zwischen Mobil und Kleinen Desktops hat zu wenig Platz um elemente nebeneinander darzustellen, daher schalten wir für diesen Fall die Flex-Anzeige ab. Relevant ist das eigentlich nur für die Kombination von Bildern mt Text. Das Icon rutztscht ggf. auch nach unten, aber das ist auf einem zu schmalen Display auch eher gut so.*/
  article.c-card--link {
    display: block;
  }
}


/*in2code hat zwar für P-Tags die Farbe gesetzt, jedoch offenbar nicht für beliebige texte wie auch Aufzählungen*/
.o-section--primary {
  color: var(--color-text-regular);
}

figure.table {
  display  : block;
  max-width: 100%;
}

figure.table table {
  max-width: 100%;
}

.o-container::after {
  content: "";
  display: block;
  clear  : both;
  padding: 0;
  margin : 0;
}


/* Suchergebnisse der Google-Suche-----------------------------------------------------------------------------------*/
.gsc-control-cse,
.gsc-results .gsc-cursor-box .gsc-cursor-page {
  background-color: transparent !important;
  border          : 0 !important;
  font-family     : initial !important;
  font            : var(--font-p-regular) !important;
}

.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
  background-color: light-dark(var(--color-primary-800), var(--color-primary-200)) !important;
  color           : light-dark(white, black) !important;
}


.gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet,
.gs-fileFormatType {
  color: light-dark(black, white) !important;
}

.gs-webResult.gs-result a.gs-title:link,
.gs-imageResult a.gs-title:link {
  font-size: 1.7em !important;
}

.gs-webResult.gs-result a.gs-title:link b,
.gs-imageResult a.gs-title:link b {
  font-size: 1em !important;
}

.gs-webResult.gs-result a.gs-title:link,
.gs-webResult.gs-result a.gs-title:link b,
.gs-imageResult a.gs-title:link,
.gs-imageResult a.gs-title:link b {
  color: light-dark(var(--color-primary-800), var(--color-primary-200)) !important;


}


.gsc-webResult.gsc-result,
.gsc-tabHeader.gsc-tabhActive,
.gsc-tabHeader.gsc-tabhInactive,
.gsc-refinementHeader.gsc-refinementhInactive {

  background-color: transparent !important;
  border-top      : 0 !important;
  border-bottom   : 1px solid light-dark(#DBDBDB, #444) !important;
  border-left     : 0 !important;
  border-right    : 0 !important;

}

/* Der Audio-Player sollte so breit wie möglich sein*/
.uzk-audio {
  margin-block-start: 1em;
  margin-block-end  : 1em;
  width             : 100%;
}

/*Bilder in News müssen in voller Breite dargestellt werden*/
.news-img-wrap .mediaelement img {
  width             : 100%;
  margin-block-end  : 1em;
  margin-block-start: 1em;
}

/* Formate für IFrames und videos -----------------------------------------------------------------------------------*/
.format_16zu9 {
  aspect-ratio: 16 / 9;
  width       : 100%;
  max-width   : calc(100vh / 9 * 16);
  max-height  : 100vh;
}

.format_2zu3 {
  aspect-ratio: 2 / 3;
  width       : 100%;
  max-width   : calc(100vh / 3 * 2);
  max-height  : 100vh;
}

.format_3zu2 {
  aspect-ratio: 3 / 2;
  width       : 100%;
  max-width   : calc(100vh / 2 * 3);
  max-height  : 100vh;
}

.format_1zu3 {
  aspect-ratio: 1 / 3;
  width       : 100%;
  max-width   : calc(100vh / 3);
  max-height  : 100vh;
}

.format_4zu5 {
  aspect-ratio: 4 / 5;
  max-width   : calc(100vh / 5 * 4);
  max-height  : 100vh;
}

.format_5zu4 {
  aspect-ratio: 5 / 4;
  max-width   : calc(100vh / 4 * 5);
  max-height  : 100vh;
}

.format_2zu1 {
  aspect-ratio: 2 / 1;
  max-width   : calc(100vh * 2);
  max-height  : 100vh;
}

.format_1zu2 {
  aspect-ratio: 1 / 2;
  max-width   : calc(100vh / 2);
  max-height  : 100vh;
}

.format_square {
  aspect-ratio: 1 / 1;
  max-width   : 100vh;
  max-height  : 100vh;
}

.format_9zu16 {
  aspect-ratio: 9 / 16;
  max-width   : calc(100vh / 16 * 9);
  max-height  : 100vh;
}

.format_3zu4 {
  aspect-ratio: 3 / 4;
  max-width   : 100%;
  max-height  : 100vh;
}

.format_4zu3 {
  aspect-ratio: 4 / 3;
  max-width   : calc(100vh / 3 * 4);
  max-height  : 100vh;
}

.format_3zu1 {
  aspect-ratio: 3 / 1;
  max-width   : calc(100vh * 3);
  max-height  : 100vh;
}

.flex-parent {
  display        : flex;
  gap            : 2em;
  flex-wrap      : wrap;
  align-items    : flex-start;
  justify-content: space-between;
}

.flex-child {
  flex     : 1 1 300px;
  /*mindestens 300px breit, aber flexibel*/
  min-width: 300px;
}



/* Featured Content auf der Startseite -----------------------------------------------------------------------------------*/
.featured-content .o-container {
  width: 100%;
}

/*Im Firefox ist das i2c-Click-Enlarge Icon kaputt, weil das SVG auf 45% herunterskaliert wird, was dazu führt, dass 2 von den 4 weißen Linien des Icons 
  "weniger als 1px" breit sind... 
  Chrome scheint es auf 1px aufzurunden, während Firefox es auf "ich zeichne die linie, mache sie aber so transparent, dass man sie praktisch nicht sieht" 
  abrundet
  Wir vergrößern die Skalierung des Icons daher auf 50%, was in beiden Browsern gut aussieht
  */
.c-lightbox:not(.c-slide-default):after {
  transform: scale(.5);
}


/* Fix, weil Powermail-Buttons in Safari auf iPhone weiß auf weiß dargestellt werden, 
einerseits verwendet in2code im CSS btn--primary, Powermail generiert aber die Klasse btn-primary (nur ein Bindestrich) 
zum anderen werden in Powermail <input>-Tags statt <button>-Tags genutzt, so dass ein Extra Selector 
für das Design von Input-Tags greift, der bei den Buttons fehler erzeugt.
Diese Extra-Definitionen stammen aus _elements-forms.scss wo zwar die typen 'checkbox' und 'radio' ausgenommen werden,
nicht aber 'submit' und 'reset'. Dieses CSS für die Inputs erfordert bei flgendem Fix die verwendung von !important
Der Fix wird nur nötig, weil derzeit die unangepasten Powermail-Templates ohne uzk2025-Anpassung verwendet werden, was verständlich aber schade ist.
#TODO: Issue #166
*/

.btn-primary {
  color           : light-dark(var(--color-white-base), var(--color-text-highlight));
  background-color: var(--color-bg-highlight) !important;
  inline-size     : auto !important;
}

.btn-primary:is(:hover,
  :focus-visible):not([disabled],
  [readonly],
  :active) {
  background-color: var(--color-bg-body) !important;
  color           : var(--color-text-highlight)
}



/* CKeditor 5 verwendet text-center für zentriert, aber es kann noch die alte uzk15__center verwendet ung gespeichert sein.*/
.text-center,
.uzk15__centered {
  text-align: center;
}

/* Fix für das Deko-Punkte-Muster im hintergrund, welches sich unterschiedlich verhält je nach dem ob der dark-mode automatisch via system oder manuell via umschalter aktiviert hat. diese Änderung gehört eigetlich in _trumps-utilities.scss*/
.color-scheme-dark .u-opacity-15\@darkmode {
  opacity: .15;
}

/*#TODO: Ins Repo übernehmen und hier wieder löschen. c-note hat display:inline-block und braucht daher ein umgebenes DIV, das steht uns im Wege, daher nehmen wir es hier an dieser Stelle raus*/
p.c-note {
  display: block;
}




/*Fix gegen kleinskalierte Simple-Header*/

/*Option 1: Header-Bild wird auf 1920px fixiert, beim rauszoomen schrumpft es*/
/*
.c-page-header-simple__image{
    inline-size: 1920px;
    margin: 0 auto 0 auto;
}
*/

/*Option 2: (aber doof) Ab 1920px keine feste Höhe mehr */
/*
@media (min-width: 1920px) {
  .c-page-header-simple:has(.c-page-header-simple__image) {
    --image-height: auto;
  }
}
*/


/*Diese klasse wird meist für SVGs verwendet, die bereits "inline" 
sind aber um hin und wiedermal ein IMG einstreuen zu können, 
setzen wir hier inline für die ganze klasse fest*/
.c-text-icon__icon {
  display: inline;
}


/*Die breite der Downloads würde sich am Dateinamen messen, 
was bei gesetztem Beschreibungstext bescheuert aussieht, daher
setzen wir hier die Breite auf 100%, um die Text-Zeilen zu verlängern.*/
.file-download {
  width: 100%
}