/*
  CSS Selector Reference:
  https://www.w3schools.com/cssref/css_selectors.asp
*/

:root {
  /* e88d14 ist das UP-Orange, in RGB: rgba(232, 141, 20)
  	 Links sollen im Normalfall orange sein, und hover schwarz*/
  --cassiopeia-color-primary: #e88d14;
  --cassiopeia-color-link: #e88d14;
  --cassiopeia-color-hover: #000000;
  --background-hellgrau: rgba(0,0,0,.03);
  --background-mittelgrau: rgba(0,0,0,.4);
  --logo-height: 240px;
}

.container-header {
  /* der Container Header soll nur oranger Hintergrund sein, keine Farbverlauf */
  background-image: none;
}

/* 
  Hauptmenü 
*/
.container-header .metismenu-item, .container-header .mod-menu__heading {
  /* Menüeinträge im horiontalen Kopfmenü sollen fett sein */
  font-weight: bold;
}
.container-header .metismenu.mod-menu .metismenu-item > a:hover {
  text-decoration: none;
}

/* 
  Menüs rechts 
*/
.mod-list li.active > a , .mod-list li a:hover {
  /* explizit setzen, weil sonst aus dem Default Template text-decoration: underline durchschlägt */
  text-decoration: none;    
}
.mod-list li a , span.mod-menu__separator.separator {
  /* Schrift fett im Menü; Menüeinträge und Separator "Kurzfilme" */
  /* font-weight: bold;  nicht fett vielleicht doch besser? */
}
.mod-list li {
  /* Menüs und Listen rechts enger beieinander */
  padding: 0; /* Default: 0.25em 0 */
}
.sidebar-right .mod-list li.active > a[aria-current="page"] {
  /* das hier ist für Menüs (die Pflichteintrage Impressum etc) ... 
  	 */
  color: #000000;
  background-color: var(--cassiopeia-color-primary);
  /*text-decoration: none;  */
}
.sidebar-right .mod-articles-category-title , .mod-list li > a {
  /* inaktive Links in den Menüs rechts orasch */
  color: var(--cassiopeia-color-primary);
}
.sidebar-right .mod-articles-category-title.active {
  /* ... und das hier für Module mit Kategorienlisten (die Filmmenüs) */
  color: #000000;
  background-color: var(--cassiopeia-color-primary);  
}
.mod-list li a:hover {
  color: #ffffff;
  background-color: var(--cassiopeia-color-primary);
  /*text-decoration: none;  */
}


/* 
  Farben
*/
hr {
  color: var(--background-mittelgrau);
}


/* 
  Kästchen rechts
*/

/* grundsätzlich randlos */
.sidebar-right {
  border: none;
}
/* damit Filmliste und unmittelbar darunter angeordnete Kurzfilmliste näher beieinander sind, soll
	- margin-bottom in der <ul> innerhalb der Filmlisten-Card entfallen
	- margin-top in der Kurzfilmlisten-Card entfallen 
   WICHTIG: in der Konfiguration der Module muss im eiter "Advanced" als Module Class " filmliste" bzw. " kurzfilmliste"
	eingetragen werden; beachte auch das führende Leerzeichen! */
.sidebar-right.card.filmliste ul {
  margin-bottom: 0em;
}
.sidebar-right.card.kurzfilmliste {
  margin-top: 0em;
}
/* Solange das Notwendiges-Menü an oberter Stelle kommt, soll es etwas höher sitzen, 
  also das 1rem padding-top verringern, aber nicht ganz wegnehmen, sieht sonst komisch aus */
.sidebar-right.card.notwendiges .card-body {
  padding-top: 0.3rem;
}


/* 
  Trennlinien in Artikeln fetter (Default=1px)
*/
.blog-featured hr {
  height: 2px;
}


/* 
  Spielzeitentabellen
*/

/*  erste Zeile soll weiß auf schwarz sein in Intro- und ganzen Artikeln */
.item-content tr:first-child , .com-content-article__body tr:first-child {
  color: #ffffff;
  background-color: #000000;
  /* und Word-Spacing so groß, dass die Kopfzeile Wochentag/Datum immer umbricht, 
	d.h. dass der Wochentag über dem Datum steht
	Obacht: jedes überflüssige Leerzeichen weitet die Tabellenzelle über Gebühr aus,
			das muss beim Editieren beachtet werden */
  word-spacing: 10vw;
}
/* Zelleninhalte horizaontal zentriert */
.item-content td, .com-content-article__body td {
  text-align: center;
}
@media only screen and (max-width: 600px) {
  /* Uhrzeiten schmaler auf kleinen Screens ... */
  .item-content tr ~ tr > td , .com-content-article__body tr ~ tr > td {
    font-stretch: ultra-condensed;
  }
}
@media only screen and (min-width: 1200px) {
  /* ... und weiter auf größeren Screens */
  .item-content tr ~ tr > td , .com-content-article__body tr ~ tr > td {
    font-stretch: ultra-expanded;
  }
}


/* 
  Article-Intros: 
  auf hinreichend großen Displays Intro-Bild links neben dem Intro-Text anzeigen
  (Cassiopeia Default: flex-direction: column; das müssen wir überschreiben mit flex-direction: row;)
*/
@media only screen and (min-width: 900px) {
  .blog-items .blog-item {
    /* erstmal alle blog-item-Elemnte auf row setzen,
       das sorgt für die Anordnung der Intro-Images links vom Intro-Text ... */
    flex-direction: row;
    /* und etwas Luft nach unten */
    padding-bottom: 2em;
  }
  .item-content {
    /* ...dann dem enthaltenen Content (also dem Intro-Text) etwas Luft nach links verschaffen ... */
    margin-left: 1em;
    /* rechts auch, dann wirkt die Zeitentabelle etwas weniger klotzig ... */
    margin-right: 3em;
    /* ...und dafür sorgen, dass die Textinhalte neben dem Intro-Image alle die gleiche Breite haben
          (im Normalfall orientiert sich diese an der Breite des Titels oder weiterer Testteile, was bei kurzen
           Titeln zu unschönem Zusammenschnurren der Zeitentabelle führt)... */
    width: 70%;
  }
  .blog-items.items-leading ~ .blog-items .blog-item:first-child {
    /* ... dann aber dem ersten blog-item, das in dem auf den allerersten blog-items-container mit
       class items-leading folgenden blog-items-Container liegt, wieder column-Direction geben, weil:
       das ist das blog-item mit dem "Aktuelle Filme"-Trenner, und dessen <hr>-Trennlinien gehen nur dann
       horizontal ganz durch, wenn flex-direction=column ist; sinst sin die Linien nur grad so breit wie der Text
       D.h. das hier steht und fällt damit, dass es oberhalb dieses Trenner-Artikels nur genau einen Artikel gibt*/
    flex-direction: column;
    /* diesem die Luft nach unten wieder abrehen */
    padding-bottom: 0em;
  }
  .blog-items.items-leading .blog-item{
    /* auch dem allerersten Blog-Item die Luft nach unten wieder abdrehen */
    padding-bottom: 0em;
  }
}


/* 
  Image-Dinge
*/

/* Intro-Images sollen immer 280px width haben (die height ist generell auto, passt sich also an) */
.blog-item figure.left.item-image img {
  width: 280px;
}
/* alle Images, auch das Logo, sollen einen Schatten haben 
	funktioniert aber ur richtig beim Logo, alles andere ist Mist */
img {
  /* box-shadow: 2px 2px 3px 1px gray; */
  /* box-decoration-break: clone;	soll das Verhalten im FF verbessern, tut aber nicht */
}


/*
  Aufzählungszeichen von Fields (-> Credits) verschwinden lassen
*/
li.field-entry.credits::marker {
  content: "";
}
ul.fields-container {
  padding-left: 0.3rem;
}


/* 
  Login Form
*/
ul.mod-login__options.list-unstyled {
  /* Passwort-Vergessen-Links ausblenden */
  display: none;
}


/* 
  Größe der Kurfilmtitel
  (auf der Hauptfilmseite wirkt dieser zu groß, wenn er so groß ist wie der Hauptfilmtitel)
*/
.com-content-article__body .com-content-article.item-page .page-header h1{
  /* wir nutzen aus, dass ein per Articles Anywhere eingebetteter Artikel (der Kurzfilmartikel) innerhalb
     einer Class .com-content-article__body erscheint, der Hauptfilmtitel aber außerhalb 
     die Größe des Kurzfilmtitels im eigenen Artikel ist davon unberührt; 
     auf großen Screens ist der h1 per Default 2.5rem, demgegenüber ist 1.8rem kleiner aber noch nicht zu klein;
     auf kleinen Screens skalieren alle Titel anders, aber 1.8rem ist hier auch ok
  */
  /*font-size: 1.8rem;*/
}


/*
  vertikale Linie zwischen Main und Sidebar
*/
.sidebar-right.card {
  border-left-style: solid;
  padding-left: 1em;
  border-left-color: var(--background-hellgrau);
}

/*
  Logo
*/
 /* das hier brauchen wir nur, wenn das Logo links vom Hauptmenü in der Position "menu" geladen wird
.container-header .container-nav {
  /* per Default ist justify-content "space-between", 
     das rückt das Logo ganz nach links und die Navigation ganz nach rechts
  justify-content: flex-start;
  padding-bottom: 0.5em;
}
*/
#mod-custom124 img , #mod-custom151 img , #mod-custom166 img {
  /* das Logo ist in einem eigenen Modul, das per {loadmoduleid 124} geladen wird
     ursprünglich in ein Modul verpackt, um es in die Position "menu" (links vom Hauptmenü)
     zu laden, schaut aber scheisse aus */
  height: var(--logo-height); /* in eine Variable gepackt, 
  							auf dass wir das am Kopf dieser Datei schnell ändern können */
  float: left;
  margin-right: 1em;
  margin-bottom: 1em;
}
#mod-custom124 p , #mod-custom151 p , #mod-custom166 p {
  /* falls das Logo wieder in ein <p> gepackt wird beim Modul-bearbeiten,
     soll dieser jedenfalls kein Padding bekommen 
  	 SOLL: das <img> im Modul ist lediglich in ein <div> verpackt
  		und im <img> sind keine Angaben zu height und width */
  padding-bottom: 0;
}


/*
  Kino garantiert ohne 3D
*/
#mod-custom127 {
  /* Der Schriftzug ist ein eigenes Modul in der Position "top";
 	 Linksbündigkeit mit dem darunterliegenden horizontalen Menü machen margin und(!) max-width */
  margin: auto;
  max-width: 1320px;
  padding-left: calc(1.5em + 1px); /* .5em bis zur Menubar 
  								plus 1em von dort bis zum ersten Menüeintrag
  								plus 1px, wenn die Schrift 1px Shadow hat (s.u. p) */
  padding-top: .5em;
}
#mod-custom127 * {
  /* Der Schriftzug ist derzeit h4; wenn wir uns umentscheiden zu h5 pder p oder was auch immer,
   	 ist es recht nützlich, hier gleich den * Selector zu verwenden, dann ist das abgedeckt */
  margin-bottom: -.5em;	/*  wo der viele Abstand zum Menü herkommt, weiß ich nicht
  							wir begegnen ihm mit negativem Abstand an dieser Stelle */
  letter-spacing: .2em;
  text-shadow: 1px 1px 2px black;
}

/*
  Header Slider
  Änderungen an diese Stelle wirken nicht; wir müssen irgendwie djimageslider.css überreiten
  Hierfür haben wir das default-Theme in modules/mod_djimageslider/themes/default
  in ein neues Theme "uferpalast" kopiert, 
  UND WICHTIG:
  per sed alle Vorkommen in den css-Files von '-default' in '-uferpalast' geändert, weil
  viele Classnamen den Themenamen enthalten
  Bearbeiten leider nicht hier, sondern in der Shell per vi
  ABER
  Wir dokumentieren hier, was wir in welcher Zeile dort geändert haben
*/
/* Slider-Title-Texte rechtsbündig */
.slide-desc-text-uferpalast {	/* Zeile 74 */
  text-align: right;			/* Zeile 78; Orig: left */
}
/* Font Size Slide-Titel relativ zur Viewport-Width 
   und Text-Shadow*/
.slide-desc-text-uferpalast .slide-title {	/* Zeile 87 */
  font-size: 3vw; /* Zeile 89; Orig: 1.5em; */
  text-shadow: 2px 2px 4px black; /* Orig: nicht vorhanden */
}
/* kein grauer Backgroung unter dem Slide Title (neu mit Update auf DJImageSlider 4.4 */
.slide-desc-bg-uferpalast {
   /* background: RGBA(0,0,0,0.65); */
}

/* Font Size Slide-Titel ausblenden auf kleinen Screens? */
/* @media only screen and (max-width: 700px) {		/* Zeile 82 
  slide-desc-text.slide-desc-text-uferpalast {	/* Zeile 84
    display: none;
  }
} */

.logo-card .card-body {
  /* Logos rechts sollen vertikal näherzusammenrücken (namentlich das Insta-Logo) */
  padding: 0rem var(--card-spacer-y);
}