@media (max-width: 767px) {

	.mobilehead {display: block; background: #000;}
	.sticky {
		z-index: 100000;
		position: fixed;
		width: 100%;
		transform: none;
		position: sticky;
		top: 0;
	}
	.kopfbereich {display: none;}
	.menu-open .mobilehead {display: block; background: none;}
	.menu-open .mobilelogo {display: none;}
	.mobilelogo figure picture {display: inherit;}
	.mobilehead figure img {display: inherit;}
	.mobilelogo .frame {padding: 7px 0;}
	.hiddenmobile {display: none;}
	.logoicon,
	.line {display: none;}
	.mobilelogo img {max-width: 60%;}
	main h5 {font-size: 30px;}
	.line {width: 100%;}
	main .card-body p {min-height: inherit;}
	/* Overlay über Headerbild transparent statt weißes Textfeld (vorher rgba(255,255,255,0.75)) */
	.carousel-text-inner {
		background: transparent !important;
		color: #fff !important;
		padding: 3% 3%;
		display: table !important;
		margin: 0 auto;
		width: 90%;
		text-align: center;
		max-width: inherit;
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
	}

	main h1 {
		font-size: 2.4rem !important;
		font-weight: 900 !important;
		letter-spacing: 0.5px !important;
		text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2) !important;
		line-height: 1.1 !important;
		animation: h1EinfahrenUnten 0.8s ease forwards !important;
	}
	main h2 {font-size: 1.5rem;}
	main h3 {font-size: 1rem;}
	.frame-custom-15 h1 span {
		font-size: 3rem;
		line-height: 1;
	}
	.slick-slide img {height: 55vh;}

	/* Unterseiten-Header (z. B. Service, #pageid80): Desktop-Fixwert 800px führte
	   zu abgeschnittenem/verschobenem Hintergrundbild auf Mobilgeräten */
	#pageid80 .headerimage .carousel .item {min-height: 55vh !important;}

	/* Overlay-Text vertikal im Headerbild zentrieren (vorher: Textbox hing oben,
	   da .carousel-content nur seine eigene Inhaltshöhe hatte statt die volle Bildhöhe) */
	#pageid80 .headerimage .carousel .carousel-content {
		position: absolute !important;
		top: 0; left: 0; right: 0; bottom: 0;
		height: 100% !important;
	}
	#pageid80 .headerimage .carousel .carousel-content-inner {
		width: 100%;
		height: 100% !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
	}
	#pageid80 .carousel-item-type-text .carousel-text-inner {padding-top: 0 !important;}

	/* Überschrift/Unterüberschrift im Unterseiten-Header verkleinern (vorher 4rem/2rem) */
	#pageid80 .carousel-text-inner h2 {
		font-size: 1.7rem !important;
		font-weight: 800 !important;
		line-height: 1.25 !important;
	}
	#pageid80 .carousel-text-inner h3 {
		font-size: 1.05rem !important;
		line-height: 1.3 !important;
	}
	#pageid80 .carousel-item-bodytext p {
		font-size: 0.9rem !important;
	}

	/* Navigationspfeile präsenter: größer, dunkler Kreis-Hintergrund für Kontrast */
	.slick-prev, .slick-next {
		left: 10px !important;
		right: auto;
		width: 42px !important;
		height: 42px !important;
		border-radius: 50% !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
	}
	.slick-next {left: auto !important; right: 10px !important;}
	.slick-next::before,
	.slick-prev::before {
		font-size: 24px !important;
		color: rgb(240, 111, 22) !important;
		opacity: 1 !important;
		text-shadow: none;
	}

	/* Ansprechpartner Card-Group Fix (frame-custom-33) */
	.frame-custom-33 .card-group-element {
		width: 100% !important;
	}

	.frame-custom-33 .card-group-element-item {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		margin-bottom: 20px !important;
	}

	/* Telefon/E-Mail im Card-Body auf Smartphones verkleinern */
	.frame-custom-33 .card-body > p:first-of-type {
		font-size: 12px !important;
		line-height: 1.3 !important;
	}
  .frame-custom-15 h1 span {
    font-size: 2rem;
    line-height: 1.1;
    word-break: break-word;
    overflow-wrap: break-word;
}

    /* Landingpage mobil */

  #pageid1 .hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: top;
    margin-top: 2.5rem;
    align-items: flex-start;
    padding: 0 6%;
    z-index: 50;
    pointer-events: none;
}

#pageid1 .hero-overlay .hero-title {
    display: block !important;
    position: static !important;
    color: #fff !important;
    font-size: clamp(2.5rem, 6vw, 4.8rem) !important;
    font-weight: 900 !important;
    letter-spacing: normal !important;
    line-height: 1.15 !important;
    margin-bottom: 3rem !important;
    padding-bottom: 0 !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5) !important;
    max-width: 22ch;
    animation: none !important;
}

#pageid1 .hero-overlay .hero-title::before {
    display: none !important;
}

#pageid1 .hero-overlay .hero-title-accent {
    color: #f06f16 !important;
}

#pageid1 .hero-overlay .hero-subtitle {
    display: none;
}

#pageid1 .hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    pointer-events: auto;
}

#pageid1 .btn-hero-primary,
#pageid1 .btn-hero-secondary {
    display: inline-block;
    padding: 0.8rem 1.8rem;
    border-radius: 4px;
    font-weight: 750;
    font-size: 1.1rem;
    text-decoration: none !important;
    transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease;
}

#pageid1 .btn-hero-primary {
    background: #f06f16;
    color: #fff !important;
}

#pageid1 .btn-hero-primary:hover {
    background: #c9560f;
    transform: translateY(-2px);
}

#pageid1 .btn-hero-secondary {
    background: transparent;
    color: #fff !important;
    border: 2px solid #f06f16;
}

#pageid1 .btn-hero-secondary:hover {
    background: #c9560f;
    transform: translateY(-2px);
}

  #pageid1 .hero-scroll-down {
    display: none;
}


	/* ===========================
	   Mobile Card/Listen Slider
	   (Aktivierung/Pfeile per JS, siehe effekte.js -> sliderConfigs)
	   Pro Kartengruppe ein eigener Block, Klassen-Prefix = "prefix"
	   aus der jeweiligen sliderConfigs-Zeile.
	   =========================== */

	/* --- News (Vorbild) --- */
	.news .news-list-view.js-news-slider {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 10px !important;
		padding: 16px 10px 10px 10px !important;
		scrollbar-width: none;
	}
	.news .news-list-view.js-news-slider::-webkit-scrollbar {
		display: none;
	}
	.news .news-list-view.js-news-slider .article {
		flex: 0 0 85% !important;
		width: 85% !important;
		max-width: 85% !important;
		scroll-snap-align: center;
		margin-bottom: 0 !important;
	}
	.news-slider-wrap {
		position: relative;
	}
	.news-slider-arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 10;
		width: 38px;
		height: 38px;
		border-radius: 50%;
		border: none;
		background: #000;
		color: #fff;
		font-size: 1.1rem;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		padding: 0;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	}
	.news-slider-arrow.news-slider-prev {
		left: 2px;
	}
	.news-slider-arrow.news-slider-next {
		right: 2px;
	}
	.news-slider-arrow:active {
		background: #333;
	}
	.news-slider-arrow[disabled] {
		opacity: 0.3;
		pointer-events: none;
	}

	/* Teaser-Text verkleinern, damit Karten kürzer werden */
	.news-list-view .article .teaser-text p {
		font-size: 0.75rem !important;
		padding: 8px 12px !important;
		margin-top: 10px !important;
	}

	/* --- Kartengruppe frame-custom-41 (Produkte) --- */
	.frame-custom-41 .card-group-element.js-cardgroup41-slider {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 10px !important;
		padding: 16px 10px 10px 10px !important;
		scrollbar-width: none;
		width: 100% !important;
	}
	.frame-custom-41 .card-group-element.js-cardgroup41-slider::-webkit-scrollbar {
		display: none;
	}
	.frame-custom-41 .card-group-element.js-cardgroup41-slider .card-group-element-item {
		flex: 0 0 85% !important;
		width: 85% !important;
		max-width: 85% !important;
		scroll-snap-align: center;
		margin-bottom: 0 !important;
	}
	.cardgroup41-slider-wrap {
		position: relative;
	}
	.cardgroup41-slider-arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 10;
		width: 38px;
		height: 38px;
		border-radius: 50%;
		border: none;
		background: #000;
		color: #fff;
		font-size: 1.1rem;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		padding: 0;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	}
	.cardgroup41-slider-arrow.cardgroup41-slider-prev {
		left: 2px;
	}
	.cardgroup41-slider-arrow.cardgroup41-slider-next {
		right: 2px;
	}
	.cardgroup41-slider-arrow:active {
		background: #333;
	}
	.cardgroup41-slider-arrow[disabled] {
		opacity: 0.3;
		pointer-events: none;
	}

  .frame-custom-40 .card-group-element-item {
    width: 100% !important;
    flex: 0 0 100% !important;
  }

	/* Service-Icons (grauer Kasten, orangener Rand): auf Mobil verkleinern
	   und Abstand zwischen den Kästen reduzieren (vorher 55% Icon-Breite,
	   min-height 440px, margin-bottom 50px) */
	.frame-custom-12 .image {
		max-width: 32% !important;
	}
	.frame-custom-12 .textpic {
		min-height: auto !important;
		margin-bottom: 20px !important;
		padding: 16px 10px !important;
	}

  .frame-custom-41 .card-title {
    font-size: 1.4rem !important;
    }

  .frame-custom-41 .card-footer .btn {
    font-size: 0.75rem !important;
    }
  
  .frame-custom-23 .gallery-item img { width: 90%; }

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px !important;
    height: 42px !important;
    background: rgba(0, 0, 0, 0.55) !important;
    border-radius: 50%;
  }

  .carousel-control-prev-icon::before,
  .carousel-control-next-icon::before {
    font-size: 24px;
    text-shadow: none;
  }
}