/* Ribbon Beginn */ 


.card {
  position: relative;
  max-heigth: 350px;
  width: 100%;
  border: none;
}
.card:first-of-type {
  margin-right: 2em;
}


/* card with triangle */
.triangle-wrapper {
  position: absolute;
  top: 0;
  right: 0;
}   
.triangle {
  float: right;
  position: relative;
  border-style: solid;
  border-width: 0 105px 105px 0;
  border-color: transparent #ffdf1b transparent transparent;
  text-align: center;
  z-index: 999;
  font-size: 0.8em;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 1.1em;
  color: #000;
}    
.triangle-text {
  display: block;
  position: absolute;
  top: 22px;
  right: -115px;
  text-transform: uppercase;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

/* card with ribbon */
.ribbon {
  position: absolute;
  right: 0; top: 0px;
  z-index: 1;
  overflow: hidden;
  width: 100px; 
  height: 100px;
  text-align: right;
}

/* card with ribbon */
.ribbon span {
  text-transform: uppercase;
  text-align: center;
  line-height: 25px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 115px;
  display: block;
  background: #ffdf1b;
  box-shadow: 0 0 10px 3px #666;
  position: absolute;
  top: 20px; right: -25px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}

 @media screen and (max-width: 600px) {
   main {
     flex-direction: column;
     align-items: center;
   }
   .card:first-of-type {
     margin-right: 0;
  }
}

/* Ribbon Ende */ 


.casting-liste-container h2{
    font-size:1.1em;
    padding-top:5px;
}

.casting-img {
    float: left;
    width: 140px;
    height: 140px;
    margin: 0px 10px 10px 10px;
    
}

.casting-img-round{display: flex !important;
    justify-content: center; 
  }

.casting-liste-container{
	margin-bottom: 25px;
	padding:10px 0px;
}


.icon-calendar-empty{
  color:#000;
}

.casting-content p{
    margin-bottom: 0.1em !important;
}

.drehort{
  text-transform:uppercase;
  padding-bottom: 0px;
  padding-top: 10px;
}


.img-fluid{
    box-shadow: 0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19) !important;
    margin-bottom: 10px;
}


.desaturate-img:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(100%);
}

.important-casting{
  border:2px solid #ffdf1b;
  background: linear-gradient(180deg, rgba(255,223,27,1) 0%, rgba(251,249,235,1) 70%, rgba(251,249,235,1) 100%); 
  border-radius:5px;
  padding:10px;
}


/* =========================================================
   Tagesaktuelle Casting-Aufrufe
   ========================================================= */
.tc-box{
  background: linear-gradient(180deg, #fff6c2 0%, #fbf9eb 120px, #fbf9eb 100%);
  border: 2px solid #ffdf1b;
  border-radius: 5px;
  padding: 24px;
}

.tc-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.tc-head-title{ display: flex; align-items: center; gap: 14px; }
.tc-head-icon{
  flex: 0 0 56px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #ffdf1b;
  color: #000;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  transform: rotate(-12deg);
}
.tc-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: #000;
}
.tc-eyebrow-text{ display: inline-flex; flex-wrap: wrap; gap: 0 .5em; }
.tc-stand{ white-space: nowrap; } /* "Stand" und Datum bleiben zusammen */
/* Handy: zweizeilig "TAGESAKTUELL" / "STAND 06.10.2026", ohne Mittelpunkt */
@media (max-width: 575.98px){
  .tc-eyebrow{ align-items: flex-start; }
  .tc-eyebrow-text{ flex-direction: column; line-height: 1.4; }
  .tc-sep{ display: none; }
  .tc-live-dot{ margin-top: .3em; flex: 0 0 auto; }
}
.tc-live-dot{
  width: 9px; height: 9px; border-radius: 50%;
  background: #7ed857;
  box-shadow: 0 0 0 0 rgba(126,216,87,.6);
  animation: tc-pulse 1.8s infinite;
}
@keyframes tc-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(126,216,87,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(126,216,87,0); }
  100% { box-shadow: 0 0 0 0 rgba(126,216,87,0); }
}
.tc-title{
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.1;
  margin: 2px 0 0;
  color: #000;
  text-transform: none;
}

/* Liste */
.tc-list{ list-style: none; margin: 0; padding: 0; }
.tc-item-title{ letter-spacing: 0; }
.tc-item{
  position: relative;
  display: flex;
  align-items: flex-start; /* Termin, Text und Button bleiben beim Aufklappen oben */
  gap: 20px;
  background: #fff;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 12px;
  border-left: 4px solid transparent;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tc-item:last-child{ margin-bottom: 0; }
.tc-item:hover{
  transform: translateY(-2px);
  border-left-color: #ffdf1b;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

/* Termin-Box */
.tc-date{
  flex: 0 0 132px;
  width: 132px;
  display: flex; flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  background: #f5f5f5;
  font-family: 'Montserrat', sans-serif;
  color: #000;
}
.tc-date-label{
  display: block;
  background: #000; color: #ffdf1b;
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  padding: 4px 0;
}
.tc-date-day{
  display: block;
  font-size: 1.05rem; font-weight: 600;
  padding: 8px 6px 2px;
}
.tc-date-time{
  display: block;
  font-size: 0.8rem; font-weight: 600;
  padding: 0 6px 8px;
}
.tc-date-when{ display: block; }
.tc-date-bis{
  display: block;
  font-size: 0.7rem; font-weight: 600;   /* nur das Wort "bis" ist klein */
  line-height: 1.1;
  padding: 0 6px 2px;
}
/* Enddatum: gleiche Größe und Stärke wie das Anfangsdatum */
.tc-date-bis time{
  display: block;
  font-size: 1.05rem; font-weight: 600;
  line-height: 1.5;
}
.tc-date-bis:last-child{ padding-bottom: 8px; }
.tc-date-day:last-child{ padding-bottom: 8px; }
.tc-date-time i{ color: #7ed857; margin-right: 2px; }

/* Inhalt */
.tc-body{ flex: 1 1 auto; min-width: 0; }
.tc-item-title{
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem; font-weight: 700;
  margin: 0 0 4px;
  text-transform: none;
  padding: 0;
}
.tc-item-title a{ color: #000; }
.tc-item-title a:hover{ color: #000 !important; text-decoration: none; }
.tc-text{
  font-size: 0.9rem; color: #666;
  margin: 0 0 6px;
  /* Blocksatz mit deutscher Silbentrennung (nutzt lang="de" der Seite) */
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3; /* nur Wörter ab 6 Zeichen, mind. 3 Zeichen je Teil */
  overflow-wrap: break-word;
}
/* Kürzung auf 2 Zeilen nur mit JS – ohne JS ist der ganze Text sichtbar */
.tc-js .tc-text{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tc-js .tc-text.offen{
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Mehr-Infos-Button (liegt über dem klickbaren Zeilen-Link) */
.tc-more{
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff;
  border: 2px solid #000; border-radius: .25rem; /* wie die übrigen Buttons */
  padding: 4px 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem; font-weight: 700; line-height: 1.2;
  letter-spacing: .08em; text-transform: uppercase;
  color: #000;
  cursor: pointer;
  margin: 0 0 8px; /* linksbündig unter dem Text */
  transition: background .2s ease, color .2s ease;
}
.tc-more[hidden]{ display: none; }
.tc-more:hover,
.tc-more[aria-expanded="true"]{ background: #000; color: #ffdf1b; }
.tc-more:focus-visible{ outline: 3px solid #7ed857; outline-offset: 2px; }
/* Bootstrap setzt bei angeklickten Buttons einen gepunkteten Rahmen –
   bei Maus/Finger ausblenden, bei Tastatur bleibt der grüne Rahmen */
.tc-more:focus:not(:focus-visible),
.tc-pager-btn:focus:not(:focus-visible),
.tc-pager-num:focus:not(:focus-visible){ outline: none; }
.tc-more i{ color: inherit; font-size: .85em; transition: transform .2s ease; } /* Pfeil in Schriftfarbe, nicht grün */
.tc-more[aria-expanded="true"] i{ transform: rotate(180deg); }
.tc-facts{
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: #000;
}
.tc-facts i{ color: #7ed857; margin-right: 4px; }
/* Lange Orte (z. B. "Köln, Bonn, Düsseldorf"): Passt "Mehr Infos" nicht mehr
   daneben, rutscht es rechtsbündig in die nächste Zeile. Der Ort bricht nur um,
   wenn er allein länger als die ganze Zeile ist (Icon bleibt dabei vorn). */
.tc-ort-block{ display: flex; flex-direction: column; gap: 2px; flex: 0 1 auto; min-width: 0; }
.tc-ort,
.tc-schluss,
.tc-gage{ display: flex; align-items: baseline; min-width: 0; line-height: 1.4; }
.tc-ort i,
.tc-schluss i,
.tc-gage i{ flex: 0 0 auto; width: 1.25em; margin-right: 8px; text-align: left; } /* Icons linksbündig, Text bündig dahinter */
.tc-more{ white-space: nowrap; }
.tc-more-wrap{ display: flex; } /* leer (0 px hoch), wenn der Text kurz genug ist */

/* Button */
.tc-cta{ flex: 0 0 auto; position: relative; z-index: 2; } /* liegt über dem Zeilen-Link */
.tc-btn{
  white-space: nowrap;
  background: #ffdf1b; border-color: #ffdf1b;
  color: #000 !important; /* custom_global setzt .btn-primary auf weiß */
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  font-size: 0.8rem;
  padding: 10px 18px;
}
.tc-btn i{ margin-left: 6px; transition: transform .2s ease; }
.tc-item:hover .tc-btn{ background: #000 !important; border-color: #000 !important; color: #ffdf1b !important; }
.tc-item:hover .tc-btn i{ transform: translateX(4px); }

/* Titel optisch bündig mit der Oberkante des Termin-Kastens:
   Montserrat hat über den Großbuchstaben ca. 0.36em Leerraum
   (Zeilenabstand + Schrift-Oberlänge) – den ziehen wir ab.
   Nur wenn Termin und Titel nebeneinander stehen. */
@media (min-width: 768px){
  .tc-item-title{ margin-top: -0.36em; }
}

/* Tablet / Handy */
@media (max-width: 767.98px){
  .tc-box{ padding: 16px; }
  .tc-title{ font-size: 1.6rem; }
  .tc-item{ flex-wrap: wrap; align-items: flex-start; gap: 14px; padding: 14px; }
  .tc-item-title{ font-size: 0.95rem; } /* Casting-Titel auf dem Handy kleiner (15,2 px, wie die Karten-Titel) */
  .tc-date{ flex: 0 0 100%; width: 100%; flex-direction: row; align-items: center; }
  .tc-date{ align-items: stretch; }
  .tc-date-label{ padding: 6px 10px; display: flex; align-items: center; }
  .tc-date-when{ display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; padding: 6px 10px; }
  .tc-date-day,
  .tc-date-day:last-child,
  .tc-date-bis,
  .tc-date-bis:last-child,
  .tc-date-time{ padding: 0; }
  .tc-date-day{ font-size: 0.95rem; }
  .tc-date-bis{ font-size: 0.75rem; }
  .tc-date-bis time{ display: inline; font-size: 0.95rem; margin-left: 4px; }
  .tc-body{ flex-basis: 100%; }
  .tc-cta{ flex-basis: 100%; }
  .tc-btn{ display: block; width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce){
  .tc-live-dot{ animation: none; }
  .tc-item, .tc-btn i{ transition: none; }
}

/* Seitenumschaltung */
.tc-item.tc-in{ animation: tc-fade .35s ease both; }
@keyframes tc-fade{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }

.tc-pager{
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px;
  margin-top: 20px;
  font-family: 'Montserrat', sans-serif;
}
.tc-pager[hidden]{ display: none; }
.tc-pager-pages{ display: flex; gap: 6px; }
.tc-pager-btn,
.tc-pager-num{
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid #000;
  background: #fff; color: #000;
  font-weight: 700; font-size: 0.85rem;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.tc-pager-btn:hover:not(:disabled),
.tc-pager-num:hover{ background: #ffdf1b; }
.tc-pager-num.active{ background: #000; color: #ffdf1b; }
.tc-pager-btn:disabled{ opacity: .3; cursor: default; }
.tc-pager-btn:focus-visible,
.tc-pager-num:focus-visible{ outline: 3px solid #7ed857; outline-offset: 2px; }
.tc-pager-info{
  flex-basis: 100%;
  text-align: center;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: #666;
}
@media (prefers-reduced-motion: reduce){
  .tc-item.tc-in{ animation: none; }
}

/* =========================================================
   Überschriften-Reihenfolge (SEO): ehemalige h3/h4 in casting.php
   bekommen hier exakt ihr altes Aussehen. Gilt nur für #casting.
   ========================================================= */
#casting .cs-ort{            /* vorher h3.drehort */
  font-family: "Montserrat", sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.5px;
  margin: 0 0 .5rem;
}
#casting .cs-sub{            /* vorher h4 unter dem großen Titel */
  font-family: "Montserrat", sans-serif;
  font-size: 0.95em;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.5px;
  color: #000;
  margin-top: 0;
}
#casting .cs-kartentitel{    /* vorher h4, jetzt h3 */
  font-size: 0.95em;
  line-height: 1.25;
  color: #000;
  margin-bottom: .5rem;
}

/* Untertitel unter der h1 (vorher h2.font-handwriting, jetzt <p>) –
   sieht exakt aus wie vorher. Gilt nur für #casting. */
#casting .cs-untertitel{
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1.25em;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #000;
  margin: 0 0 .5rem;
}
@media (max-width: 575.98px){
  #casting .cs-untertitel{
    font-size: 1.15em;
    line-height: 1.4em;
    margin-bottom: 15px;
  }
}

/* Drehtag ohne Datum: "nach Absprache" etwas zurückhaltender als ein echtes Datum */
.tc-date-offen{ font-weight: 500; color: #666; }

/* Drehtag als Text statt Datum (z. B. "Mitte Oktober"): etwas kleiner,
   damit auch längere Angaben im schmalen Kasten gut lesbar bleiben */
@media (min-width: 768px){
  .tc-date-text{ font-size: 0.85rem; line-height: 1.3; padding-top: 10px; hyphens: manual; }
}