/* =====================================================================
   DM Trucks – Responsive Anpassungen
   Wird NACH style.css / responsive.css geladen und überschreibt nur,
   was für Smartphone, Tablet, Laptop und PC nötig ist.
   ===================================================================== */

html{ -webkit-text-size-adjust:100%; }
img{ max-width:100%; height:auto; }

/* ---------- Header ---------- */
.main-header .header-top .top-left .text .sep{ margin:0 8px 0 14px; color:#8c8c8c; }
.main-header .header-top .top-left .text .mail{ color:#fff; }
.main-header .header-top .top-left .text .mail:hover{ color:#228dcb; }

.main-header .header-upper .logo-outer .logo img{ max-height:70px; width:auto; }
.fixed-header .header-upper .logo-outer .logo img{ max-height:55px; }

/* Mobiles Menü: Kontakt-Links + Logo */
.mobile-menu .nav-logo img{ max-height:70px; width:auto; }
.mobile-menu .mobile-contact{ padding:25px; }
.mobile-menu .mobile-contact a{
	display:block; color:#fff; font-size:15px; line-height:24px; padding:8px 0;
}
.mobile-menu .mobile-contact a .icon{ margin-right:8px; color:#228dcb; }

/* ---------- Slider ---------- */
.main-slider .content h2{ font-size:clamp(26px, 4vw, 44px); line-height:1.25; }
/* Text ca. 4 cm (152px) höher – Bildhöhe bleibt gleich (Template: 300px / 210px) */
.main-slider .slide{ padding-top:148px; padding-bottom:362px; }

/* ---------- Willkommen ---------- */
.welcome-section .title-box h2{ font-size:clamp(22px, 3vw, 30px); }
.welcome-section .content-column .text p{ margin-bottom:15px; }
.welcome-section .video-column .video-box img{ width:100%; display:block; }
.welcome-section .usp-row{ margin-top:30px; }

/* ---------- Geschäftsabwicklung: Bilder statt Icons ---------- */
.feature-block .inner-box .icon-outer .icon-box{
	width:auto; height:auto; line-height:normal; background:none; border-radius:0;
}
.feature-block .inner-box .icon-outer .icon-box img{ width:180px; max-width:100%; }

/* ---------- Fahrzeugtypen: Karten mit Bild oben ---------- */
.service-block-two .inner-box{ height:calc(100% - 30px); }
.service-block-two .inner-box .content{ padding-left:0; text-align:center; }
.service-block-two .inner-box .content .icon-box{
	position:relative; left:auto; top:auto; margin-bottom:15px;
}
.service-block-two .inner-box .content .icon-box img{
	width:100%; max-width:260px; height:180px; object-fit:contain;
}
.service-block-two .inner-box .content .read-more{ margin-top:18px; }

/* ---------- Call to Action ---------- */
.call-to-action-section .cta-btn-col{ text-align:right; }

/* ---------- Footer ---------- */
.main-footer .logo-widget .logo img{ max-width:260px; }
.main-footer .contact-widget li a{ word-break:break-word; }
.main-footer .contact-widget li .icon{ margin-right:10px; }

/* =====================================================================
   Laptop / kleiner PC (bis 1199px)
   ===================================================================== */
@media only screen and (max-width:1199px){
	.main-menu .navigation > li{ margin-right:20px; }
}

/* =====================================================================
   Tablet (bis 1023px)
   ===================================================================== */
@media only screen and (max-width:1023px){
	/* iOS/Android können "fixed" Hintergründe nicht korrekt darstellen */
	.call-to-action-section,
	.featured-section{ background-attachment:scroll; }

	.welcome-section .video-column{ margin-top:30px; }

	/* Slider-Text so hoch wie möglich, mit etwas Luft zur Kopfzeile (Template: 120px / 140px) */
	.main-slider .slide{ padding-top:20px; padding-bottom:240px; }

	/* Template blendet die Telefonleiste hier aus – auf Handy/Tablet ist sie am wichtigsten */
	.main-header .header-top .top-left{ display:block; float:none; width:100%; text-align:center; }
	.main-header .header-top .top-left .text{ padding:10px 0; }
}

/* =====================================================================
   Smartphone (bis 767px)
   ===================================================================== */
@media only screen and (max-width:767px){
	/* Kopfzeile: Telefon & Mail untereinander, gut antippbar */
	.main-header .header-top .top-left{ float:none; width:100%; text-align:center; }
	.main-header .header-top .top-left .text{ font-size:14px; line-height:22px; padding:8px 0; }
	.main-header .header-top .top-left .text .number,
	.main-header .header-top .top-left .text .mail{ display:inline-block; padding:4px 0; }
	.main-header .header-top .top-left .text .sep{ display:none; }
	.main-header .header-top .top-left .text .mail{ display:block; }

	.main-header .header-upper .logo-outer .logo img{ max-height:55px; }
	.main-header .nav-outer .mobile-nav-toggler{ padding:10px; margin:-10px; }

	.main-slider .content h2 br{ display:inline; } /* Adresse bleibt 3-zeilig */
	/* Slider-Text höher, aber mit etwas Luft zur Kopfzeile (Template: 80px / 130px) */
	.main-slider .slide{ padding-top:20px; padding-bottom:190px; }
	.main-slider .content .text{ font-size:16px; margin:20px 0 25px; }

	.welcome-section{ padding:60px 0 40px; }
	.welcome-section .title-box{ margin-bottom:35px; }
	.welcome-section .content-column .inner-column h2{ font-size:24px; line-height:1.3; }

	.sec-title h2,
	.sec-title-two h2{ font-size:24px; line-height:1.35; }

	.feature-block .inner-box .icon-outer .icon-box img{ width:150px; }

	.testimonial-block .inner-box{ padding:25px 20px 30px; }
	.testimonial-block .inner-box .content{ padding-left:0; }
	.testimonial-block .inner-box .content .image-outer{ position:relative; margin-bottom:30px; }

	.call-to-action-section{ text-align:center; }
	.call-to-action-section h2{ font-size:24px; margin-bottom:20px; }
	.call-to-action-section .cta-btn-col{ text-align:center; }

	.main-footer .footer-column{ text-align:left; }
	.main-footer .logo-widget .logo img{ max-width:200px; }
}

/* =====================================================================
   Kleine Smartphones (bis 399px)
   ===================================================================== */
@media only screen and (max-width:399px){
	.main-slider .content h2{ font-size:24px; }
	.welcome-section .title-box h2{ font-size:20px; }
}

/* =====================================================================
   Kontaktseite
   ===================================================================== */
.contact-form-section .contact-info-list li a{ word-break:break-word; }
.contact-form-section .contact-image img{ width:100%; display:block; }
.contact-map{ position:relative; width:100%; height:350px; }
.contact-map iframe{ display:block; width:100%; height:100%; border:0; }

@media only screen and (max-width:767px){
	.page-title h2{ font-size:28px; }
	.contact-form-section .form-column{ margin-top:30px; }
	.contact-map{ height:280px; }
	.main-footer .footer-bottom .pull-left,
	.main-footer .footer-bottom .pull-right{ float:none; text-align:center; }
}