/* =========================================================================
   === INNOTRANS TEMPLATE — CSS ===
   Aus mitsubishi-electric-theme/style.css extrahiert: nur die Regeln, die das
   page-innotrans.php-Markup tatsächlich nutzt (Hero + Content-Layout).
   BEWUSST NICHT enthalten: Header/Nav/Footer/Breadcrumb/Sitemap/Article/Event/
   Social-CSS — das liefert das mitnewsletter-Theme über get_header()/get_footer().

   Die ursprünglich an Page-ID 2261 gebundenen Regeln sind auf den
   Custom-Template-Body-Class  body.page-template-page-innotrans  umgehängt.

   Icon-Pfade relativ zu diesem CSS (assets/css/) -> ../img/icons/...
   Konditional via functions.php nur auf dem InnoTrans-Template geladen.
   ========================================================================= */

/* --- Buttons / Links --- */
a.read-more {
	padding: 0.8rem 1.6rem 0.8rem 1.6rem;
	background-color:#fff;
	text-decoration:none;
	font-size:2rem;
	color:#000;
	display:inline-block;
	line-height:normal;
	border:2px solid #000;
	font-weight:700;
	transition:0.3s;
	}

a.read-more:hover, button[type=submit]:hover {
	border:2px solid #f00;
	color:#f00;
	}

button[type=submit] {
	padding: 0.8rem 1.6rem 0.8rem 1.6rem;
	background-color:#fff;
	text-decoration:none;
	font-size:2rem;
	color:#000;
	display:inline-block;
	line-height:normal;
	border:2px solid #000;
	font-weight:700;
	transition:0.3s;
	padding-right:60px !important;
	background:url(../img/icons/ArrowNext.svg);
	background-position:right 15px center;
	background-repeat:no-repeat;
	}

button[type=submit]:hover {
	border:2px solid #f00;
	color:#f00;
	background:url(../img/icons/ArrowNext-R.svg);
	background-position:right 7px center;
	background-repeat:no-repeat;
	}

a.arrow-link {
	padding-right:60px !important;
	background:url(../img/icons/ArrowNext.svg);
	background-position:right 15px center;
	background-repeat:no-repeat;
	transition:0.3s;
	}

a.arrow-link:hover {
	background:url(../img/icons/ArrowNext-R.svg);
	background-position:right 7px center;
	background-repeat:no-repeat;
	}

strong { font-weight:700; }

p {
	line-height:2.4rem;
	margin-bottom:3.2rem;
	}

section.contents p a {
	text-decoration:underline;
	color:#000;
	font-weight:700;
	transition:0.2s;
}

section.contents p a:hover { color:#f00; }

/* --- Spalten-Breiten --- */
.fifty { width:49%; height:auto; }
.sixtysix { width:66%; height:auto; }
.thirtythree { width:32%; height:auto; }

.download-info h3 {
	font-weight:700;
	font-size:2.4rem;
	margin-bottom:1.6rem;
	}

/* --- Video --- */
.introvid { min-width: 100%; }

/* --- Hero / Big Image Section --- */
section.bg-img {
	position:relative;
	max-width:100%;
	z-index:-1;
	height:100vh;
	overflow:hidden;
	top:0px;
	display:block;
	z-index:1;
	width:100%;
	}

section.bg-img img {
	object-fit:cover;
	object-position:50% 50%;
	z-index:-9999;
	height:100vh;
	width:100%;
	}

.frontcaption {
	top:30%;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0%);
	width:70%;
	z-index:9999;
	text-align:center;
	}

section.bg-img h1 {
	color:#fff;
	font-size:7.2rem;
	font-weight:700;
	text-align:center;
	margin:auto;
	line-height:8.8rem;
	}

section.bg-img h1.shadow { text-shadow: 1px 1px 10px #777; }

section.bg-img a {
	padding: 1.12rem 60px 1.12rem 1.6rem;
	background-color:#fff;
	text-decoration:none;
	font-size:2.4rem;
	color:#000;
	display:inline-block;
	margin:auto;
	margin-top:3.2rem;
	line-height:normal;
	font-weight:700;
	}

section.bg-img a:hover {
	color:#f00;
	background-color:#fff;
	}

h3 {
	font-size:2.4rem !important;
	margin-bottom:1.6rem;
	font-weight:700;
	}

/* --- Scroll-Icon --- */
.icon-scroll,
.icon-scroll:before {
	position: absolute;
	left: 50%;
	}

.icon-scroll {
	width: 40px;
	height: 70px;
	margin-left: -20px;
	top: 85%;
	margin-top: -35px;
	box-shadow: inset 0 0 0 3px #fff;
	border-radius: 25px;
	}

.icon-scroll:before {
	content: '';
	width: 8px;
	height: 8px;
	background: #fff;
	margin-left: -4px;
	top: 8px;
	border-radius: 4px;
	animation-duration: 2.5s;
	animation-iteration-count: infinite;
	animation-name: scroll;
	}

@keyframes scroll {
	0%   { opacity: 1; }
	100% { opacity: 0; transform: translateY(46px); }
	}

/* --- Content-Wrapper --- */
div.content-wrapper {
	max-width:1380px;
	margin:auto;
	padding:3.2rem;
	}

div.content-wrapper h2 {
	font-size:3.2rem;
	font-weight:700;
	margin-bottom:3.2rem;
	padding-bottom:2.4rem;
	}

div.content-wrapper h2 span.small { font-size:1.6rem; }

section.contents {
	width:100%;
	height:auto;
	background:#fff;
	margin-bottom:9.6rem;
	}

section.contents .thirtythree img { max-width:100%; }

/* --- Spalten-Layouts (flex) --- */
ul.three-cols, .two-cols, .four-cols {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-around;
	}

.download-list {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	}

.one-col {
	width:100%;
	margin-bottom:-6.4rem;
	}

.two-cols { margin-bottom:3.2rem; }

/* --- Three-Cols / Tiles --- */
ul.three-cols li {
	width:32%;
	overflow:hidden;
	margin-bottom:3.2rem;
	position:relative;
	}

ul.three-cols li img {
	transition: transform .8s;
	width:100%;
	height:100%;
	}

ul.three-cols li:hover > img { transform: scale(1.2); }

ul.three-cols div.tilecaption {
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	text-align:center;
	font-weight:700;
	width:90%;
	}

ul.three-cols li h3 {
	color:#fff;
	font-size:3.2rem;
	text-align:center;
	text-shadow: 0 0 5px #111111;
	}

ul.three-cols li a {
	padding: 0.8rem 60px 0.8rem 1.6rem;
	background-color:#fff;
	text-decoration:none;
	font-size:2rem;
	color:#000;
	display:inline-block;
	margin-top:3.2rem;
	line-height:normal;
	transition:0.3s;
	}

ul.three-cols li a:hover {
	background-color:#fff;
	color:#f00;
	}

ul.three-cols li p {
	color:#ccc;
	margin-top:0.8rem;
	font-size:2.4rem;
	}

/* --- Download-List --- */
.download-list li {
	width:32%;
	overflow:hidden;
	margin-bottom:3.2rem;
	position:relative;
	}

.download-list li h3 a {
	text-decoration:none;
	color:#000;
	transition:0.3s;
	}

.download-list li h3 a:hover { color:#f00; }

/* --- Four-Cols --- */
.four-cols { margin-bottom:3.2rem; }

.four-cols li {
	width:24%;
	background:#1d1d1d;
	text-align:center;
	padding-bottom: 3.2rem;
	}

.four-cols li h3 {
	color:#fff;
	font-weight:700;
	margin-top:3.2rem;
	font-size:3.2rem;
	margin-bottom:3.2rem;
	margin-left:1.6rem;
	margin-right:1.6rem;
	padding-bottom:2.4rem;
	border-bottom:1px solid #f00;
	}

.four-cols li p {
	margin-left:1.6rem;
	margin-right:1.6rem;
	color:#fff;
	line-height:2.4rem;
	font-weight:400;
	margin-bottom:3.2rem;
	}

.four-cols li a {
	padding: 0.8rem 1.6rem 0.8rem 1.6rem;
	background:#fff;
	text-decoration:none;
	font-size:2rem;
	color:#000;
	display:inline-block;
	margin-bottom:3.2rem;
	line-height:normal;
	font-weight:700;
	transition:0.3s;
	}

.four-cols li a:hover { color:#f00; }

/* --- Standort --- */
.standort img { max-width:100%; }

/* --- Features-Accordion (dt/dd) --- */
dt {
	padding:20px;
	background-color:#1d1d1d;
	width:auto;
	display:block;
	cursor:pointer;
	margin-bottom:1.6rem;
	color:#fff;
	padding-left:60px;
	position:relative;
	transition:0.3s;
	}

dt p { margin:none; display: inline; }

dt:hover {
	background-color:#000;
	color:#fff;
	padding-left:70px;
	}

.rotateimg {
	position:absolute;
	display:inline-block;
	margin-right:1.6rem;
	left:1.6rem;
	top:1.6rem;
	}

.rotateimg img { transition:0.3s; }

dt:hover img { transform:translateX(10px) rotate(90deg); }

dd {
	display:none;
	background:#f6f6f6;
	padding:3.2rem;
	margin-top:-1.6rem;
	margin-bottom:1.6rem;
	}

/* --- Feature-List (Figures & Facts) --- */
.feature-list { padding-top:12px; }

.feature-list li {
	padding-left:60px;
	margin-bottom:3.2rem;
	background-image:url(../img/icons/Info.svg);
	background-position:0% 50% !important;
	background-repeat:no-repeat;
	height:35px;
	display:flex;
	align-items:center;
	}

/* --- Content-Image-Block --- */
.content-image-block {
	display:flex;
	flex-direction:row;
	align-items:flex-start;
	gap:4.8rem;
	margin-bottom:1.6rem;
	}

/* war: .page-id-2261 .content-image-block  (zentrierte Variante der InnoTrans-Seite) */
body.page-template-page-innotrans .content-image-block {
	display:inherit;
	margin-bottom:1.6rem;
	text-align: center;
	}

.content-image-block--first { padding-top:8rem; }

.content-image-block__text { flex:1; min-width:0; }

.content-image-block__text h2 { margin-top:0; }

.content-image-block__body ul {
	list-style:none;
	padding:0;
	margin:0;
	}

.content-image-block__body ul li {
	position:relative;
	padding-left:2.4rem;
	margin-bottom:1.2rem;
	line-height:1.6;
	}

.content-image-block__body ul li::before {
	content:"\2022";
	color:#e60012;
	font-weight:700;
	position:absolute;
	left:0;
	}

.content-image-block__image { flex:0 0 40%; max-width:40%; }

.content-image-block__image img {
	width:100%;
	height:auto;
	display:block;
	}

/* --- Anchor-Scroll-Offset (#content-start unter fixiertem Header) --- */
a { scroll-margin-top: 80px; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media only screen and (max-width: 980px) {
	ul.three-cols li { width:48%; }
	ul.three-cols.features li { width:30%; }
	.two-cols { display:block; }
	.sixtysix, .thirtythree { width:100%; }
	.sixtysix { margin-bottom:9.6rem; }
	.content-image-block { flex-direction:column; }
	.content-image-block.image-left { flex-direction:column; }
	.content-image-block__image { flex:none; max-width:100%; }
	.four-cols li { width:48%; margin-bottom:3.2rem; }
	.frontcaption { top: 20%; width: 90%; }
}

@media only screen and (max-width: 768px) {
	.frontcaption { top: 20%; }
	section.bg-img { height: 80vh; }
	section.bg-img h1 { font-size:4.8rem; line-height:normal; }
	ul.three-cols li { width:100%; }
	ul.three-cols.features li { width:100%; height:150px; }
	ul.three-cols li p { margin-bottom:0; }
	.four-cols li { width:100%; }
	.icon-scroll { top: 91%; }
}

@media only screen and (max-width: 768px) and (orientation: landscape) {
	.frontcaption { top: 30%; }
	.icon-scroll { display:none; }
}

/* =========================================================================
   InnoTrans-Hero: Headline + Button links-unten (Drittel-Regel)
   war: body.page-id-2261 ...  -> umgehängt auf das Custom-Template.
   Nur Desktop/Tablet (>= 769px). Unter 768px greift das Standard-Layout (zentriert).
   ========================================================================= */
@media only screen and (min-width: 769px) {

	body.page-template-page-innotrans .frontcaption {
		top: auto;
		bottom: 22%;
		left: 8%;
		transform: none;
		width: auto;
		max-width: 60%;
		text-align: left;
	}

	body.page-template-page-innotrans section.bg-img h1 {
		text-align: left;
		margin: 0;
		font-size: 8.8rem;
		line-height: 9.6rem;
	}

	body.page-template-page-innotrans section.bg-img a {
		margin-left: 0;
		margin-right: 0;
	}

}

/* =========================================================================
   Basis-Schriftgröße Fließtext (Quell-Theme: body 18px). Ziel-Theme hat
   html=62.5% (1rem=10px) und body OHNE font-size -> Content würde 10px erben.
   Daher Content-Basis explizit auf 1.8rem (=18px). Gescoped auf .content-wrapper,
   damit Header/Footer des Ziel-Themes unberührt bleiben.
   ========================================================================= */
body.page-template-page-innotrans .content-wrapper {
	font-size: 1.8rem;
}

/* =========================================================================
   WPForms — Kontaktformular (z.B. [wpforms id="8652"])
   Portiert aus mitsubishi-electric-theme/style.css, Abschnitt "Forms".
   Dort sind es genau sechs Regeln; hier 1:1 übernommen mit rem ×1.6
   (Quelle: 1rem=16px — Ziel: html=62.5%, also 1rem=10px).

   Zusätzlich nötig, weil das Ziel-Theme Foundation mitbringt (app.css:3427 ff.):
   dort haben Inputs height:3.9rem + inset-box-shadow. Ohne height:auto würde
   der Text bei padding:15px im Feld abgeschnitten.

   Der Präfix .page-template-page-innotrans hebt zugleich die Spezifität über
   die WPForms-eigenen Regeln (.wpforms-container .wpforms-form …).
   ========================================================================= */

.page-template-page-innotrans .wpforms-field-sublabel {
	display:none !important;
	}

.page-template-page-innotrans .wpforms-field-container input[type=text],
.page-template-page-innotrans .wpforms-field-container input[type=email],
.page-template-page-innotrans .wpforms-field-container input[type=tel],
.page-template-page-innotrans .wpforms-field-container textarea {
	width:90%;
	max-width:100%;
	padding:15px;
	margin-bottom:1.6rem;
	background:#f9f9f9;
	border:2px solid #CCC;
	outline:none;

	/* Foundation-Reset */
	height:auto;
	border-radius:0;
	box-shadow:none;
	}

.page-template-page-innotrans .wpforms-field-container input[type=text]:focus,
.page-template-page-innotrans .wpforms-field-container input[type=email]:focus,
.page-template-page-innotrans .wpforms-field-container input[type=tel]:focus,
.page-template-page-innotrans .wpforms-field-container textarea:focus {
	background:#f9f9f9;
	border:2px solid #000;
	outline:none;
	box-shadow:none;
	}

.page-template-page-innotrans .wpforms-field-container textarea {
	min-height:16rem;
	}

.page-template-page-innotrans .wpforms-field-label {
	display:block;
	margin-top:1.6rem;
	margin-bottom:1.6rem;
	}

.page-template-page-innotrans .wpforms-field-hp {
	display:none;
	}

.page-template-page-innotrans .wpforms-field-gdpr-checkbox {
	margin-bottom:3.2rem;
	}

.page-template-page-innotrans .wpforms-field-label-inline {
	margin-left:1.6rem;
	max-width:95%;
	display:inline-block;
	vertical-align:text-top;
	}

/* Pflichtfeld-Sternchen rot wie im Quell-Theme (dort im Fließtext-Hinweis). */
.page-template-page-innotrans .wpforms-required-label {
	color:#f00;
	border:none;
	}

/* Submit-Button.
   Die Regel button[type=submit] weiter oben in dieser Datei hat Spezifität
   (0,0,1,1) und wird von WPForms' eigener
   .wpforms-container .wpforms-form button[type=submit] (0,0,2,2) geschlagen.
   Deshalb hier dieselbe Optik erneut, mit höherer Spezifität. */
.page-template-page-innotrans .wpforms-container .wpforms-form button[type=submit] {
	padding: 0.8rem 1.6rem 0.8rem 1.6rem;
	padding-right:60px !important;
	background-color:#fff;
	background-image:url(../img/icons/ArrowNext.svg);
	background-position:right 15px center;
	background-repeat:no-repeat;
	border:2px solid #000;
	border-radius:0;
	box-shadow:none;
	color:#000;
	font-size:2rem;
	font-weight:700;
	line-height:normal;
	text-decoration:none;
	text-transform:none;
	display:inline-block;
	transition:0.3s;
	}

.page-template-page-innotrans .wpforms-container .wpforms-form button[type=submit]:hover,
.page-template-page-innotrans .wpforms-container .wpforms-form button[type=submit]:focus {
	background-color:#fff;
	background-image:url(../img/icons/ArrowNext-R.svg);
	background-position:right 7px center;
	border:2px solid #f00;
	color:#f00;
	}

/* Fehlermeldungen / Bestätigung */
.page-template-page-innotrans .wpforms-container label.wpforms-error,
.page-template-page-innotrans .wpforms-container em.wpforms-error {
	display:block;
	margin:-0.8rem 0 1.6rem;
	color:#f00;
	font-style:normal;
	}

.page-template-page-innotrans .wpforms-field-container input.wpforms-error,
.page-template-page-innotrans .wpforms-field-container textarea.wpforms-error {
	border-color:#f00;
	}

.page-template-page-innotrans div.wpforms-confirmation-container-full {
	margin:0 0 3.2rem;
	padding:2.4rem;
	background:#f6f6f6;
	border:2px solid #000;
	border-radius:0;
	}

/* -------------------------------------------------------------------------
   Submit-Button: zwei Kollisionen mit dem Ziel-Theme bzw. WPForms.

   1) app.css:1124 setzt  button:before { content:"\E901" }  — einen roten
      Icon-Font-Pfeil auf JEDEN <button>, absolut positioniert (app.css:6338).
      Zusammen mit dem ArrowNext.svg-Hintergrund oben ergibt das zwei Pfeile.
      -> :before hier abschalten, der SVG-Hintergrund bleibt.

   2) WPForms bringt eigene Button-Styles mit (blauer Grund, weiße Schrift).
      Je nach WPForms-Einstellung "Include Form Styling" laufen die mit
      !important. Deshalb die Farbwerte hier ebenfalls mit !important.
      Sauberer wäre: WPForms → Einstellungen → Allgemein →
      "Include Form Styling" auf "Base styling only" stellen; dann kann der
      !important-Block unten wieder raus.
   ------------------------------------------------------------------------- */

.page-template-page-innotrans .wpforms-container .wpforms-form button[type=submit]:before {
	content:none;
	display:none;
	}

.page-template-page-innotrans .wpforms-container .wpforms-form button[type=submit] {
	background-color:#fff !important;
	color:#000 !important;
	border:2px solid #000 !important;
	border-radius:0 !important;
	box-shadow:none !important;
	text-transform:none !important;
	}

.page-template-page-innotrans .wpforms-container .wpforms-form button[type=submit]:hover,
.page-template-page-innotrans .wpforms-container .wpforms-form button[type=submit]:focus {
	background-color:#fff !important;
	color:#f00 !important;
	border:2px solid #f00 !important;
	}

/* -------------------------------------------------------------------------
   Fließtext-Größe und Absatzabstände.

   app.css:6307   p { font-size:1.6rem }      überschreibt die von
     .content-wrapper geerbten 1.8rem. Das Quell-Theme rendert Absätze mit
     18px (body-Größe), hier landen sie bei 16px.

   app.css:6311   p + p { margin-top:-30px }  frisst das margin-bottom:3.2rem
     (=32px) aus dieser Datei fast vollständig auf — es bleiben 2px. Deshalb
     kleben im Kontaktblock rechts alle Absätze aneinander.

   Beides nur auf dem InnoTrans-Template zurückgesetzt, damit der Rest des
   mitnewsletter-Themes unberührt bleibt.
   ------------------------------------------------------------------------- */

body.page-template-page-innotrans .content-wrapper p {
	font-size:1.8rem;
	}

body.page-template-page-innotrans .content-wrapper p + p {
	margin-top:0;
	}

/* -------------------------------------------------------------------------
   WPForms-Schriftgrößen.
   WPForms' eigenes CSS bemisst Labels und Felder teilweise in rem und landet
   unter html{font-size:62.5%} bei 10px-Basis deutlich zu klein. Deshalb hier
   explizit auf die Content-Größe (1.8rem = 18px) gesetzt.
   ------------------------------------------------------------------------- */

.page-template-page-innotrans .wpforms-container .wpforms-form .wpforms-field-label,
.page-template-page-innotrans .wpforms-container .wpforms-form .wpforms-field-label-inline,
.page-template-page-innotrans .wpforms-container .wpforms-form .wpforms-field-description,
.page-template-page-innotrans .wpforms-container .wpforms-form li {
	font-size:1.8rem;
	line-height:1.5;
	}

.page-template-page-innotrans .wpforms-field-container input[type=text],
.page-template-page-innotrans .wpforms-field-container input[type=email],
.page-template-page-innotrans .wpforms-field-container input[type=tel],
.page-template-page-innotrans .wpforms-field-container textarea {
	font-size:1.8rem;
	line-height:1.5;
	}

/* -------------------------------------------------------------------------
   Feldabstände — ein einziger Rhythmus, statt sich aus vier Quellen zu addieren.

   Vorher summierten sich: WPForms-Padding auf .wpforms-field + margin-bottom
   des Inputs (1.6rem) + margin-top des nächsten Labels (1.6rem) + der
   .wpforms-field-Abstand von hier. Ergab ~5rem zwischen zwei Feldern.

   Jetzt nur noch zwei Stellschrauben:
     LABEL-ABSTAND  = margin-bottom am Label      (Label -> eigenes Feld)
     FELD-ABSTAND   = margin-bottom am Input      (Feld  -> nächstes Label)
   Zum Nachjustieren nur diese beiden Werte ändern.
   ------------------------------------------------------------------------- */

/* WPForms-eigene Feld-Abstände neutralisieren */
.page-template-page-innotrans .wpforms-container .wpforms-form .wpforms-field {
	padding:0;
	margin:0;
	}

/* Label -> eigenes Feld */
.page-template-page-innotrans .wpforms-container .wpforms-form .wpforms-field-label {
	margin-top:0;
	margin-bottom:0.8rem;
	}

/* Feld -> nächstes Label */
.page-template-page-innotrans .wpforms-field-container input[type=text],
.page-template-page-innotrans .wpforms-field-container input[type=email],
.page-template-page-innotrans .wpforms-field-container input[type=tel],
.page-template-page-innotrans .wpforms-field-container textarea {
	margin-bottom:2.4rem;
	}

/* Radio-/Checkbox-Listen: gleicher Rhythmus wie Textfelder */
.page-template-page-innotrans .wpforms-container .wpforms-form .wpforms-field-radio ul,
.page-template-page-innotrans .wpforms-container .wpforms-form .wpforms-field-checkbox ul {
	margin-bottom:2.4rem;
	}

.page-template-page-innotrans .wpforms-container .wpforms-form .wpforms-field-radio li,
.page-template-page-innotrans .wpforms-container .wpforms-form .wpforms-field-checkbox li {
	margin-bottom:0.4rem;
	}

/* =========================================================================
   ACF-Element "Spacer" — vertikaler Abstand, Höhe kommt in px als
   Inline-Style aus dem ACF-Feld (element-spacer.php).
   ========================================================================= */
.element-spacer {
	display:block;
	width:100%;
	font-size:0;
	line-height:0;
	}