/* ============================================================
   Migrations-Fix Contao 4.13 -> 5.7  (AUTO-generiert)
   Contao 5 rendert Inhaltselemente als .content-<typ> OHNE die
   automatische .block-Klasse (Float) und ohne .ce_<typ>-Klasse.
   Hier: (1) .block-Float fuer alle .content-*, (2) Breiten-Klassen,
   (3) alle .ce_-Regeln des Themes als .content--Variante gespiegelt.
   ZULETZT laden (nach grid.css/custom.css).
   ============================================================ */

/* 1) .block-Verhalten (pocketgrid) fuer alle Inhaltselemente:
      float + box-sizing fest setzen. Das Default-width:100% kommt per :where()
      mit Spezifitaet 0 -> JEDE .bNN / .bNN-NN-Breitenklasse (grid.css/custom.css,
      auch responsive in @media) gewinnt automatisch, ohne Nachdeklaration. */
[class*="content-"] { float: left; box-sizing: border-box; }
:where([class*="content-"]) { width: 100%; }

/* 3) Alle ce_-Regeln des Themes, gespiegelt auf content- */
[class*="content-"],
[class*="mod_"],
.pdf_link { padding: 0 10px 0 10px; }
[class*="content-"] [class*="content-"],
[class*="content-"] [class*="mod_"] { padding: 0; }
.event [class*="content-"],
aside .event [class*="mod_"] { padding-left:0;
	padding-right:0; }
.content-image { position: relative; }
#header .inside,	
#header .mod_article [class*="content-"],
#header .mod_article [class*="mod_"] { padding: 0; }
.content-table, .mod_calendar { overflow-x: auto; }
.content-download { margin-bottom: 2rem; }
.layout_full .content-text { padding-left:0;
	padding-right:0; }
.content-gallery { padding:0; }
.content-gallery > ul { margin:0;
	padding:0;
	overflow:hidden;
	list-style:none; }
.content-gallery > ul li { float:left; }
.content-gallery > ul li.col_first { clear:left; }
.content-gallery>ul li { margin-bottom:0;
	position:relative; }
.content-youtube { position: relative;
 padding-bottom: 56.25%;
 width: 100%;
 height: auto; }
.content-youtube iframe { position: absolute;
 top: 0; left: 0; right: 0; bottom: 0;
 width: 100% !important;
 height: 100% !important; }
.mod_newsreader .content-comments, .mod_eventreader .content-comments { padding:0; }
.no-margin [class*="content-"],
.no-margin [class*="mod_"],
.no-margin.header-image .content-text,
#main .mod_article.no-margin { padding: 0 0 0 0; }
.no-margin .content-text, .no-margin .content-form { padding: 2rem 10px; }
[class*="mod_"].radius3, [class*="content-"].radius3, .radius3 img, .box.radius3, .infobox.radius3, .radius3 [class*="mod_"], .radius3 [class*="content-"], .radius3 [class*="overlay"]:before, .radius3 input[type="email"], .radius3 input[type="number"], .radius3 input[type="search"], .radius3 input[type="text"], .radius3 input[type="tel"], .radius3 input[type="url"], .radius3 input[type="password"], .radius3 input[type="submit"], .radius3 textarea, .radius3 select, .radius3 a.cboxElement:hover:after { border-radius:3px; }
[class*="mod_"].radius5, [class*="content-"].radius5, .radius5 img, .box.radius5, .infobox.radius5, .radius5 [class*="mod_"], .radius5 [class*="content-"], .radius5 [class*="overlay"]:before, .radius5 input[type="email"], .radius5 input[type="number"], .radius5 input[type="search"], .radius5 input[type="text"], .radius5 input[type="tel"], .radius5 input[type="url"], .radius5 input[type="password"], .radius5 input[type="submit"], .radius5 textarea, .radius5 select, .radius5 a.cboxElement:hover:after { border-radius:5px; }
[class*="mod_"].radius10, [class*="content-"].radius10, .radius10 img, .box.radius10, .infobox.radius10, .radius10 [class*="mod_"], .radius10 [class*="content-"], .radius10 [class*="overlay"]:before, .radius10 input[type="email"], .radius10 input[type="number"], .radius10 input[type="search"], .radius10 input[type="text"], .radius10 input[type="tel"], .radius10 input[type="url"], .radius10 input[type="password"], .radius10 input[type="submit"], .radius10 textarea, .radius10 select, .radius10 a.cboxElement:hover:after { border-radius:10px; }
.content-text h2, .content-text h3 { margin-top:3.5rem; }
.mod_article .content-text.intro { padding-bottom:3em; }
.content-table ul, .content-list ul, .content-text ul { list-style: disc inside;
  	list-style-position: inside;
  	margin-left: 1em;
  	padding-left: 0;
  	margin-top: 0; }
.content-table ol, .content-list ol, .content-text ol { list-style: decimal inside;
  	list-style-position: inside;
  	margin-left: 1em;
  	padding-left: 0;
  	margin-top: 0; }
.content-table ul ul, .content-list ul ul, .content-text ul ul,
.content-table ul ol, .content-list ul ol, .content-text ul ol,
.content-table ol ol, .content-list ol ol, .content-text ol ol,
.content-table ol ul, .content-list ol ul, .content-text ol ul { margin: 1.5rem 0 1.5rem 3rem; }
.content-table li, .content-list li, .content-text li { margin-bottom: 1rem; }
[class*="content-"] table, .mod_calendar table { width:100%; }
[class*="content-"] th, .mod_calendar th,
[class*="content-"] td, .mod_calendar td { padding: 12px 15px;
  	text-align: left;
  	border-bottom: 1px solid #E1E1E1; }
[class*="content-"] th:first-child, .mod_calendar th:first-child,
[class*="content-"] td:first-child, .mod_calendar td:first-child { padding-left: 0; }
[class*="content-"] th:last-child, .mod_calendar th:last-child,
[class*="content-"] td:last-child, .mod_calendar td_last-child { padding-right: 0; }
.content-comments input[type="email"],
.content-comments input[type="number"],
.content-comments input[type="search"], 
.content-comments input[type="text"],
.content-comments input[type="tel"],
.content-comments input[type="url"],
.content-comments input[type="password"],
.content-comments textarea,
.content-comments select { width:auto; }
.content-comments label { display: inline; }
[class*="content-"].box,
[class*="mod_"].box { padding: 1em 1em 0 1em;
	margin-bottom: .5em;
	border: 1px solid #dedede; }
.content-text a, .more a, .content-hyperlink a { position: relative;
	text-decoration: none; }
.more a:after, p a:after, .content-hyperlink a:after { content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	bottom: -2px;
	left: 0;
	background-color: #000;
	visibility: hidden;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s; }
.more a:hover:after, p a:hover:after, .content-hyperlink a:hover:after { visibility: visible;
	-webkit-transform: scaleX(1);
	transform: scaleX(1); }
.btn:after, .more a.arrow:after, .content-hyperlink.btn a:after, .content-hyperlink.btn-small a:after, .content-hyperlink.btn-large a:after { height:0; }
.mod_article .content-text.intro { font:1.8rem "Homemade Apple", cursive;
    font-weight:normal; }

/* ============================================================
   4) Bild-im-Text: Contao 5 rendert ein nacktes <figure>/<figcaption>
      und nutzt .media/.media--left/.media--right (Flexbox) statt der
      4.13-Klassen .image_container/.float_left/.caption. Hier gespiegelt.
   ============================================================ */

/* Bilder nie breiter als ihr Container -> behebt den horizontalen Scroll */
[class*="content-"] img,
[class*="content-"] figure,
.mod_article img,
.rte img,
.rte table { max-width: 100%; }
[class*="content-"] img, .rte img { height: auto; }

/* <figure> wie frueher .image_container */
[class*="content-"] figure { position: relative; margin: 0 0 1rem 0; }

/* .media--left/right floaten das Bild (wie frueher .float_left/.float_right) */
.media--left figure  { float: left;  margin: 0 3em 1rem 0; }
.media--right figure { float: right; margin: 0 0 1rem 3em; }

/* Bildunterschrift wieder lesbar (frueher .caption; figure hat sonst keine) */
[class*="content-"] figcaption,
.rte figcaption {
    line-height: 1.4;
    font-size: 1.3rem;
    padding-top: .4rem;
    font-style: italic;
}

/* Inhaltselement raeumt sein gefloatetes Bild ein (Clearfix) */
[class*="content-"]::after { content: ""; display: table; clear: both; }

/* Der Contao-5 Rich-Text-Wrapper soll keinen eigenen Float/Breite erben */
.rte { float: none; width: auto; }

/* ============================================================
   5) ALLGEMEINER UEBERLAUF-SCHUTZ  (gilt fuer JEDE Seite/Element)
      Kein Medien-/Embed-Element wird breiter als sein Container ->
      verhindert horizontalen Scroll durch Videos, iframes, Bilder,
      Audio, Objekte, Tabellen — egal welcher Element-Typ.
   ============================================================ */
#wrapper img,
#wrapper video,
#wrapper iframe,
#wrapper embed,
#wrapper object,
#wrapper audio,
#wrapper table { max-width: 100%; }

#wrapper img,
#wrapper video { height: auto; }

/* Video-/Audio-Player (Contao 5: .content-player u. a.) responsiv halten */
[class*="content-"] video,
[class*="content-"] audio,
.rte video, .rte audio { max-width: 100%; height: auto; }

/* Lange Woerter/URLs umbrechen statt ueberlaufen */
[class*="content-"], .rte { overflow-wrap: break-word; word-wrap: break-word; }

/* Letzte Sicherung gegen horizontalen Scroll. Auf #wrapper (nicht body),
   damit der position:fixed Header davon unberuehrt bleibt. */
#wrapper { overflow-x: hidden; }

/* ============================================================
   6) FORMULARFELDER: neue HTML5-Eingabetypen mitstyle(n)
      Contao 5 rendert Datums-/Zeit-Felder als natives
      <input type="date|time|...">. Das Original-Theme stylt aber
      nur text/email/tel/url/search/number/password (rosa Feld,
      Basic_settings.css + typo.css). Die neuen Typen blieben sonst
      weiss/ungestylt UND ihre native Mindestbreite sprengt die Spalte
      (-> grüner Body-Rand rechts / horizontaler Scroll).
      Hier: gleiche Optik wie die übrigen Felder + min-width:0, damit
      sie in jeder Spalte/Grid-Zelle schrumpfen koennen. GENERELL fuer
      ALLE Formulare der Seite.
   ============================================================ */
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="color"] {
    height: 38px;
    width: 100%;
    min-width: 0;            /* native date/time-Inputs haben eine intrinsische Mindestbreite -> sonst Spalten-Overflow */
    max-width: 100%;
    padding: 6px 10px;
    background-color: rgba(255, 68, 136, 0.1);  /* gleiche rosa Tönung wie text/email/… */
    border: 1px solid transparent;
    border-bottom: 1px solid #252427;
    box-shadow: none;
    box-sizing: border-box;
    color: #252427;
    font: inherit;           /* Theme-Schrift statt System-Font (TT.MM.JJJJ) */
    border-radius: 0;
}

input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="color"]:focus {
    background-color: rgba(255, 255, 255, 0);
    outline: 0;
}

/* Kalender-Icon dezent an die Textfarbe angleichen (WebKit/Blink) */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }