@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

 :root {
   /* Blautöne */
   --col1: #160f29;
   --col2: #1a2b3e;
   --col3: #1d4653;
   --col4: #206268;
   --col5: #237d7d;
   /* Rest */
   --creme: #a2785b;
   --linen: #ece7e2;
   --inkwell: #2c3639;
   --lunar: #3f4e4f;
   --lait: #dcd7c9;
   --header-color: var(--lait);
   --main-color: var(--inkwell);
   --floating-color: var(--col5);
   --primary-color: var(--inkwell);
   --secondary-color: var(--lunar);
   --accent-color: var(--col5);
   --text-color-dark: var(--col5);
   --text-color-light: var(--lait);
   --muted-color: #888;
 }

 * {
   box-sizing: border-box;
   font-family: 'Outfit';
 }

 html,
 body {
   margin: 0;
   padding: 0;
   background-color: var(--primary-color);
   color: var(--text-color-light);
   scroll-behavior: smooth;
   overflow-x: hidden;
 }

 header {
   transition: background-image 0.5s ease, background-color 0.5s ease;
   background-color: transparent;
   background-size: cover;
   background-position: center;
   color: var(--text-color-light);
   padding: 2.17vh;
   /* 20px auf 920px Höhe */
   position: fixed;
   width: 100vw;
   top: 0;
   z-index: 1000;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 header.scrolled {
   background-image: url('/assets/banner_back.png');
 }

 header h1 {
   margin: 0;
   opacity: 0;
   font-size: 1.5rem;
   visibility: hidden;
   transition: opacity 0.3s ease, visibility 0.3s ease;
 }

 .nav-title {
   display: block;
   position: relative;
   width: 7.81vw;
   /* 150px auf 1920px Breite */
   height: 4.35vh;
   /* 40px auf 920px Höhe */
   flex-shrink: 0;
 }

 /* Gemeinsame Regeln */
 .logo {
   position: absolute;
   top: 0;
   left: 0;
   width: 5.5vw;
   height: auto;
   display: block;
   transform-origin: top left;
   transition: opacity 0.6s ease, transform 0.6s ease;
 }

 /* Startzustand */
 .logo-top {
   opacity: 0;
   transform: scale(0.5);
   z-index: 2;
 }

 .logo-scroll {
   opacity: 0;
   transform: scale(1.5);
   /* z. B. etwas größer anfangs */
   z-index: 1;
 }

 /* Beim Scrollen */
 .nav-title.visible .logo-top {
   opacity: 0;
   transform: scale(0.8);
 }

 .nav-title.visible .logo-scroll {
   opacity: 1;
   transform: scale(2);
 }

 nav a {
   position: relative;
   margin-left: 1.04vw;
   /* 20px */
   color: var(--text-color-light);
   text-decoration: none;
   padding: 0.54vh 0;
   /* 5px */
   font-size: 1.3rem;
   /* optional in vh umrechenbar, aber rem bleibt i.d.R. sinnvoll */
 }

 nav a::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 0%;
   height: 0.22vh;
   /* 2px */
   background-color: var(--text-color-light);
   transition: width 0.3s ease-in-out;
   transform-origin: left;
 }

 nav a:hover::after,
 nav a:focus::after {
   width: 100%;
 }

 nav a.active::after {
   width: 100%;
 }

 .hero-section {
   display: flex;
   flex-direction: column;
   height: 100vh;
   /* gesamte Sektion = 100% der Bildschirmhöhe */
   overflow: hidden;
 }

 /* Banner = oberes Drittel */
 .hero-image-wrapper {
   flex: 0 0 33.33%;
   /* genau 1/3 der Höhe */
   width: 100%;
   overflow: hidden;
 }

 .hero-image {
   width: 100%;
   height: 100%;
   /* object-fit:cover; */
   /* object-position: center 70%; */
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
 }

 /* .hero-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: -80% 60%;
   transform: scale(var(--hero-zoom, 1.));
 } */

 .intro-box {
   position: absolute;
   top: 43.48vh;
   /* 40vh auf 920px → angepasst auf sichtbare Fläche */
   left: 50%;
   transform: translateX(-50%);
   background: linear-gradient(180deg, transparent 1%, var(--secondary-color));
   backdrop-filter: blur(10px);
   padding: 2.17vh;
   border-radius: 0.625vw;
   /* 12px auf 1920px */
   width: 60vw;
   text-align: center;
   box-shadow: 0 0 1.56vh rgba(0, 0, 0, 0.4);
   /* 30px */
   z-index: 10;
 }

 .intro-box h1 {
   font-size: 2.8rem;
   /* 2.5rem ≈ 40px → 3.26vh */
   margin: 0;
 }

 .intro-box p {
   margin-top: 1.09vh;
   /* 10px */
   font-size: 1.3rem;
   /* 1.1rem ≈ 17.6px → 1.2vh */
   color: var(--text-color);
 }

 /* Unterer Bereich = Info-Text + Hero-Points = 2/3 */
 .intro-text {
   flex: 0 0 auto;
   /* bleibt in natürlicher Höhe */
   text-align: center;
   color: var(--text-color-light);
   font-size: 2.3rem;
   line-height: 1.5;
   padding: 2vh 8vw 1vh;
   z-index: 5;
 }

 .soft-break {
   display: block;
   /* sorgt für Umbruch */
   margin-top: 0;
   /* kein zusätzlicher Abstand */
   line-height: 1.4;
   /* exakt wie normaler Text */
 }

 .hero-points {
   flex: 1 1 auto;
   /* nimmt den Rest der 2/3 ein */
   display: flex;
   justify-content: center;
   align-items: flex-start;
   flex-wrap: wrap;
   gap: 1vw;
   padding: 3vh 1vw 5vh;
   background-color: var(--primary-color);
 }

 .hero-point {
   flex: 1 1 11.46vw;
   background-color: var(--secondary-color);
   padding: 2vh;
   border-radius: 0.625vw;
   text-align: center;
   max-width: 17.63vw;
   min-height: 32vh;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   box-shadow: 0 0 1.5vh rgba(0, 0, 0, 0.4);
   font-size: 1.3rem;
 }

 .hero-point img {
   border-radius: 50%;
   width: 5.5vw;
   height: 5.5vw;
   object-fit: cover;
   margin-bottom: 1.5vh;
   background-color: #555;
   align-self: center;
 }

 section {
   min-height: 100vh;
   padding: 10.87vh 1.04vw;
   /* 100px 20px */
   max-width: 62.5vw;
   /* 1200px */
   margin: auto;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

 /* ===================== ABOUT ===================== */
 #about {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: var(--bg-color);
   padding: 20vh 5vw;
 }

 .about-box {
   display: flex;
   align-items: center;
   gap: 4vw;
   background-color: var(--secondary-color);
   border-radius: 2vw;
   box-shadow: 0 0.87vh 2.61vh rgba(0, 0, 0, 0.1);
   padding: 5vh 4vw;
   width: 80vw;
   /* Breite auf 80% der Viewport-Breite gesetzt */
   max-width: 90vw;
   flex-wrap: wrap;
 }

 .about-img {
   flex: 0 0 25vw;
   height: 25vw;
   min-width: 200px;
   min-height: 200px;
   max-width: 300px;
   max-height: 300px;
   border-radius: 50%;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .about-img img {
   width: 90%;
   border-radius: 50%;
 }

 .circle-spin {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(0);
   width: 100%;
   height: 100%;
   border-radius: 50%;
   border: 0.4vh solid transparent;
   border-top-color: var(--text-color-dark);
   border-bottom-color: var(--text-color-dark);
   border-left-color: transparent;
   border-right-color: transparent;
   animation: aboutSpinner 8s linear infinite;
 }

 @keyframes aboutSpinner {
   100% {
     transform: translate(-50%, -50%) rotate(360deg);
   }
 }

 .about-text {
   flex: 1;
   min-width: 280px;
 }

 .heading {
   font-size: 2.5rem;
   margin-bottom: 2vh;
 }

 .heading .word {
   color: var(--text-color-dark);
 }

 /*.heading .notfat {
	font-weight: 300;
}
*/
 .about-text h3 {
   font-size: 1.8rem;
   margin-bottom: 2vh;
 }

 .about-text p {
   font-size: 1.4rem;
   margin-bottom: 3vh;
   line-height: 1.6;
 }

 .about-text h4 {
   font-size: 1.4rem;
   margin-bottom: 1vh;
 }

 .about-text ul {
   list-style: disc;
   padding-left: 1.5em;
   text-align: left;
   font-size: 1.2rem;
   line-height: 1.5;
 }

 /* ===================== TESTIMONIALS ===================== */
 #testimonials {
   width: 100%;
   max-width: 100vw;
   padding: 8vh 4vw;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
 }

 #testimonials h2 {
   text-align: center;
   width: 100%;
   margin-bottom: 6vh;
 }

 .testimonial-wrapper {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 4vw;
   padding: 0 4vw;
   box-sizing: border-box;
 }

 /* === LEFT: Reasons === */
 .testimonial-reasons {
   flex: 1;
   background-color: var(--secondary-color);
   padding: 3vh 2vw;
   border-radius: 1vw;
   color: var(--text-color-light);
   box-shadow: 0 0 1.56vh rgba(0, 0, 0, 0.3);
 }

 .testimonial-reasons ul {
   padding-left: 1.2em;
   font-size: 1.1rem;
   line-height: 1.6;
   margin-bottom: 2vh;
 }

 .testimonial-reasons li {
   margin-bottom: 1.5vh;
 }

 .testimonial-reasons strong {
   color: var(--text-color-light);
 }

 .testimonial-reasons .closing {
   font-weight: bold;
   font-size: 1.2rem;
   text-align: center;
   margin-top: 2vh;
   color: var(--text-color-light);
 }

 .testimonial-reasons strong {
   color: var(--accent-color);
   font-weight: 600;
   letter-spacing: 0.3px;
 }

 /* === RIGHT: Vertical Testimonial Slider === */
 .testimonial-slider {
   flex: 1;
   position: relative;
   height: 400px;
   max-width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .testimonial-slider input[type="radio"] {
   display: none;
 }

 .cards {
   position: relative;
   height: 100%;
   width: 100%;
   perspective: 1000px;
   transform-style: preserve-3d;
 }

 .cards label {
   position: absolute;
   width: 100%;
   cursor: pointer;
   transition: transform 0.55s ease, filter 0.4s ease;
 }

 .card {
   height: 100%;
   background-color: var(--secondary-color);
   border-radius: 1vw;
   padding: 2vh 2vw;
   box-shadow: 0 0 1.56vh rgba(0, 0, 0, 0.3);
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .card-content {
   display: flex;
   align-items: center;
   gap: 2vw;
 }

 .image img {
   border-radius: 10px;
   width: 100px;
   height: 100px;
   object-fit: cover;
   box-shadow: 0 0.87vh 2.61vh rgba(0, 0, 0, 0.4);
   background-color: #555;
   transition: transform 0.3s ease;
 }

 .image img:hover {
   transform: scale(1.05);
 }

 .infos {
   text-align: left;
   flex: 1;
 }

 .quote {
   font-size: 1rem;
   font-style: italic;
   color: var(--text-color-light);
   margin-bottom: 1vh;
   line-height: 1.6;
 }

 .name {
   font-size: 1.2rem;
   color: var(--accent-color);
   margin: 0 0 0.5vh;
 }

 .role {
   font-size: 0.95rem;
   color: var(--muted-color);
 }

 /* === SLIDER-POSITIONEN === */
 .testimonial-heading {
   font-size: 1.6rem;
   color: var(--accent-color);
   text-align: center;
   margin-bottom: 2vh;
   font-weight: bold;
 }

 #s1:checked~.cards #slide1,
 #s2:checked~.cards #slide2,
 #s3:checked~.cards #slide3,
 #s4:checked~.cards #slide4 {
   transform: translate3d(0, 0, 0);
   filter: none;
   z-index: 3;
 }

 #s1:checked~.cards #slide2,
 #s2:checked~.cards #slide3,
 #s3:checked~.cards #slide4,
 #s4:checked~.cards #slide1 {
   transform: translate3d(0, 35%, -120px);
   filter: blur(3px);
   z-index: 2;
 }

 #s1:checked~.cards #slide3,
 #s2:checked~.cards #slide4,
 #s3:checked~.cards #slide1,
 #s4:checked~.cards #slide2 {
   transform: translate3d(0, 70%, -220px);
   filter: blur(3px);
   z-index: 1;
 }

 #s1:checked~.cards #slide4,
 #s2:checked~.cards #slide1,
 #s3:checked~.cards #slide2,
 #s4:checked~.cards #slide3 {
   transform: translate3d(0, -70%, -220px);
   filter: blur(3px);
   z-index: 1;
 }

 /* ========================= CONTACT SECTION ========================= */
 /* Sektion nimmt volle Bildschirmbreite und -höhe ein mit Hintergrundbild */
 #contact::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   /* background-image: url('/assets/contact.png'); */
   background-size: contain;
   background-position: 0vw 5vw;
   background-repeat: no-repeat;
   transform: scale(1);
   transform-origin: center;
   z-index: 0;
   pointer-events: none;
 }

 #contact {
   width: 100vw;
   max-width: none !important;
   height: 100vh;
   padding: 0 !important;
   margin: 0 !important;
   display: block !important;
   position: relative;
   overflow: hidden;
 }

 .form-step.hidden {
   display: none;
 }

 .form-step.visible {
   display: block;
 }

 .form-overlay {
   position: absolute;
   top: 18.1vh;
   left: 4vw;
   width: 30vw;
   padding: 2.72vh;
   border-radius: 0.78vw;
   z-index: 1;
   max-height: 37.5vh;
 }

 .contact-left {
   display: flex;
   flex-direction: column;
   align-items: start;
   gap: 0.87vh;
   /* 8px */
 }

 .contact-left-title h2 {
   font-weight: 600;
   font-size: 1.5rem;
   margin-bottom: 0.54vh;
   /* 5px */
 }

 .contact-left-title hr {
   border: none;
   width: 6.25vw;
   /* 120px */
   height: 0.43vh;
   /* 4px */
   background-color: var(--lait);
   border-radius: 0.52vw;
   margin-bottom: 2.17vh;
 }

 /* Eingabefelder */
 .contact-inputs {
   width: 100%;
   height: 2.5rem;
   border: none;
   outline: none;
   padding-left: 1.04vw;
   font-weight: 500;
   color: var(--lunar);
   border-radius: 2.6vw;
   background-color: var(--lait);
   font-size: 0.94rem;
 }

 .contact-left textarea {
   height: 16.87vh;
   /* 100px */
   padding: 1.63vh 1.04vw;
   border-radius: 1.04vw;
   font-size: 0.94rem;
   border: none;
   resize: none;
   font-family: 'Outfit';
   margin-bottom: 4vh;
 }

 /* Fokus- und Platzhalterstil */
 .contact-inputs:focus {
   border: solid var(--col5);
 }

 .contact-inputs::placeholder,
 .contact-left textarea::placeholder {
   color: var(--lunarlight);
 }

 /* Senden-Button */
 .contact-left button {
   width: 100%;
   /* display: flex; */
   /* align-items: center; */
   padding: 1.3vh 1.3vw;
   /* 12px 25px */
   font-size: 1rem;
   color: var(--lait);
   gap: 0.52vw;
   border: none;
   border-radius: 2.6vw;
   background-color: var(--accent-color);
   cursor: pointer;
   transition: background-color 0.3s ease;
   text-align: center;
 }

 .contact-explainer {
   position: absolute;
   top: 22.1vh;
   left: 38vw;
   width: 30vw;
   font-size: 1.5rem;
   color: var(--text-color-light);
   z-index: 1;
   line-height: 1.4;
   text-align: left;
   padding: 1.09vh 0.78vw;
   border-radius: 0.52vw;
 }

 .envelope-wrapper-left {
   position: absolute;
   left: 7.5vw;
   /* statt 25vw → reduziert horizontalen Versatz */
   top: 15vh;
   /* statt 80vh → nach oben gezogen */
   z-index: 2;
   width: 15.63vw;
   /* 300px */
   height: auto;
   transform: scale(1.0);
 }

 #envelope-left,
 #envelope-right {
   position: relative;
   width: 14.58vw;
   /* 280px */
   height: 9.38vh;
   /* 180px */
   border-bottom-left-radius: 0.31vw;
   border-bottom-right-radius: 0.31vw;
   margin-left: auto;
   margin-right: auto;
   background-color: #00334c;
   box-shadow: 0 0.43vh 2.17vh rgba(0, 0, 0, 0.2);
 }

 /* === RECHTS: geschlossenes Kuvert === */
 .envelope-wrapper-right {
   position: absolute;
   top: 42vh;
   /* 29% von 920px */
   right: 8.5vw;
   width: 14.58vw;
   height: 41.3vh;
   /* 380px */
   z-index: 1;
   display: block;
   pointer-events: none;
   transform: scale(0.8);
 }

 /*#envelope-right {
	position: relative;
	width: 280px;
	height: 180px;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	margin-left: auto;
	margin-right: auto;
	top: 150px;
	background-color: #00334c;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
*/
 /* === Gemeinsame Umschlagteile === */
 .front {
   position: absolute;
   width: 0;
   height: 0;
   z-index: 3;
 }

 .flap {
   border-left: 7.29vw solid transparent;
   border-right: 7.29vw solid transparent;
   border-bottom: 8.91vh solid transparent;
   border-top: 10.65vh solid var(--col3);
   transform-origin: top;
 }

 .pocket {
   border-left: 7.29vw solid var(--col4);
   border-right: 7.29vw solid var(--col4);
   border-bottom: 9.78vh solid var(--col5);
   border-top: 9.78vh solid transparent;
   border-bottom-left-radius: 0.31vw;
   border-bottom-right-radius: 0.31vw;
 }

 .letter {
   position: relative;
   background-color: var(--lait);
   width: 90%;
   margin: auto;
   height: 90%;
   top: 5%;
   border-radius: 0.31vw;
   box-shadow: 0 0.22vh 2.83vh rgba(0, 0, 0, .12);
   /* 2px 26px */
   z-index: 0;
 }

 .letter:after {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 25%, rgba(215, 227, 239, 0.70) 55%, rgba(215, 227, 239, 1.00) 100%);
 }

 .words {
   position: absolute;
   left: 10%;
   width: 80%;
   height: 14%;
   background-color: var(--col5);
 }

 .words.line1 {
   top: 15%;
   width: 20%;
   height: 7%;
 }

 .words.line2 {
   top: 30%;
 }

 .words.line3 {
   top: 50%;
 }

 .words.line4 {
   top: 70%;
 }

 /* === Animationen für Umschlag === */
 .open .flap {
   transform: rotateX(180deg);
   transition: transform 0.4s ease, z-index 0.6s;
   z-index: 1;
 }

 .close .flap {
   transform: rotateX(0deg);
   transition: transform 0.4s 0.6s ease, z-index 1s;
   z-index: 5;
 }

 .close .letter {
   transform: translateY(0px);
   transition: transform 0.4s ease, z-index 1s;
   z-index: 1;
 }

 .open .letter {
   transform: translateY(-60px);
   transition: transform 0.4s 0.6s ease, z-index 0.6s;
   z-index: 2;
 }

 @keyframes slideUp {
   0% {
     top: 0;
   }

   100% {
     top: -600px;
   }
 }

 @keyframes sideSway {
   0% {
     margin-left: 0px;
   }

   100% {
     margin-left: 50px;
   }
 }

 .envelope-wrapper {
   height: 380px;
 }

 .reset {
   text-align: center;
 }

 /* Schrumpfeffekt für Formularausblenden */
 .shrink {
   animation: shrinkOut 0.8s ease forwards;
 }

 @keyframes shrinkOut {
   0% {
     transform: scale(1);
     opacity: 1;
   }

   100% {
     transform: scale(0.5);
     opacity: 0;
   }
 }

 /* Rechtes Kuvert mit Fade */
 .envelope-wrapper-right {
   transition: opacity 0.5s ease;
   opacity: 0;
 }

 .message {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   max-width: 90vw;
   padding: 4.35vh 1.04vw;
   line-height: 1.5;
 }

 .message img {
   max-width: 7.81vw;
   /* 150px */
   height: auto;
   margin-bottom: 2.17vh;
   /* 20px */
 }

 .message h3 {
   font-size: 1.5rem;
   margin: 0 0 1.09vh;
 }

 .message p {
   font-size: 1rem;
   margin: 0;
 }

 .message i {
   font-size: 5rem;
 }

 .floating-contact {
   position: fixed;
   bottom: 2.17vh;
   right: 1.04vw;
   background-color: var(--accent-color);
   color: white;
   border: none;
   border-radius: 50%;
   width: 3.5vw;
   height: 3.5vw;
   font-size: 1.5rem;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 999;
   text-decoration: none;
 }

 .floating-contact i {
   font-size: 2.5rem;
 }

 /* ==================================================📐 Media Queries – Desktop-first, klar gegliedert================================================== */
 /* ========================================= */
 /* 🔍 Ultra High-Resolution / Retina 4K */
 /* z. B. iMac 5K, 4K-Displays mit Skalierung */
 /* ========================================= */
 @media (min-width: 2500px),
 (min-resolution: 2dppx) and (min-width: 1900px) {
   html {
     font-size: 1.25rem;
   }

   .intro-box h1 {
     font-size: 3rem;
   }

   .intro-box p {
     font-size: 1.4rem;
   }

   nav a {
     font-size: 1.6rem;
   }

   .service-box h3 {
     font-size: 2rem;
   }

   .about-content h3 {
     font-size: 3rem;
   }

   .about-content p {
     font-size: 2rem;
   }

   .testimonial {
     padding: 3vh;
   }

   .testimonial img {
     width: 3.5vw;
     height: 3.5vw;
   }

   .contact-left-title h2 {
     font-size: 2rem;
   }

   .contact-inputs,
   .contact-left textarea {
     font-size: 1.2rem;
   }

   .contact-left button {
     font-size: 1.2rem;
   }

   .contact-left button i {
     font-size: 1.6rem;
   }

   .contact-explainer {
     font-size: 2rem;
     width: 32vw;
   }

   .message h3 {
     font-size: 2rem;
   }

   .message p {
     font-size: 1.2rem;
   }

   .floating-contact {
     width: 4vw;
     height: 4vw;
     font-size: 2rem;
   }

   footer {
     font-size: 1.2rem;
   }

   .envelope-wrapper-right {
     transform: scale(0.8) translateY(-2vh) !important;
   }

   .envelope-wrapper-left {
     transform: scale(1) translateY(-3vh) !important;
   }

   .form-overlay {
     transform: translateY(-1vh);
   }
 }

 /* ================================ */
 /* 🖥 Native 4K / Ultrawide Screens */
 /* ================================ */
 @media (min-width: 3000px) {
   .envelope-wrapper-right {
     transform: scale(0.8) translateY(-5vh) !important;
   }
 }

 /* ========================================= */
 /* 💻 Standard-Desktop bis 1850px */
 /* ========================================= */
 @media (max-width: 1850px) {
   html {
     font-size: 1.1rem;
   }

   .intro-box h1 {
     font-size: 2.5rem;
   }

   .intro-box p {
     font-size: 1.2rem;
   }

   nav a {
     font-size: 1.3rem;
   }

   .service-box h3 {
     font-size: 1.6rem;
   }

   .about-content h3 {
     font-size: 2.2rem;
   }

   .about-content p {
     font-size: 1.5rem;
   }

   .testimonial {
     padding: 2.5vh;
   }

   .testimonial img {
     width: 3vw;
     height: 3vw;
   }

   .contact-left-title h2 {
     font-size: 1.6rem;
   }

   .contact-inputs,
   .contact-left textarea {
     font-size: 1rem;
   }

   .contact-left button {
     font-size: 1rem;
   }

   .contact-left button i {
     font-size: 1.3rem;
   }

   .contact-explainer {
     font-size: 1.4rem;
     width: 32vw;
   }

   .message h3 {
     font-size: 1.6rem;
   }

   .message p {
     font-size: 1rem;
   }

   .floating-contact {
     width: 4vw;
     height: 4vw;
     font-size: 2rem;
   }

   footer {
     font-size: 1rem;
   }

   .envelope-wrapper-right {
     transform: scale(0.85) translateY(0vh);
   }

   .envelope-wrapper-left {
     transform: scale(0.85) translateY(0vh);
   }

   .form-overlay {
     transform: translateY(-2vh) scale(0.9);
   }

   .logo.logo-scroll {
     top: -1vh;
   }
 }

 /* ============================================================ */
 /* 🖥 Standard-Desktop < 1850px + Hohes Seitenverhältnis (1000+) */
 /* ============================================================ */
 @media (max-width: 1850px) and (min-height: 1000px) {
   #contact::before {
     top: 5vh;
   }

   .form-overlay {
     top: 23vh;
     transform: translateY(-5.5vh) scale(0.85);
   }

   .contact-explainer {
     top: 26vh;
     font-size: 1.4rem;
     width: 32vw;
   }

   .envelope-wrapper-left {
     top: 17vh;
     transform: scale(0.85) translateY(0vh);
   }

   .envelope-wrapper-right {
     top: 47vh;
     transform: scale(0.7) translateY(-13vh);
   }

   .logo.logo-scroll {
     top: -1vh;
   }
 }

 /* =============================== */
 /* 📱 Tablet Portrait & Querformat */
 /* =============================== */
 @media (max-width: 1024px) {
   html {
     font-size: 1rem;
   }

   .intro-box {
     width: 90vw;
     top: 35vh;
     padding: 4vh 5vw;
   }

   .intro-box h1 {
     font-size: 2rem;
   }

   .intro-box p {
     font-size: 1.2rem;
   }

   nav a {
     font-size: 1.2rem;
   }

   .hero-points {
     flex-direction: column;
     align-items: center;
     gap: 2vh;
   }

   .hero-point {
     max-width: 90vw;
   }

   .services {
     flex-direction: column;
     align-items: center;
     gap: 2vh;
   }

   .service-box {
     max-width: 90vw;
   }

   .testimonial-container {
     height: auto;
   }

   .testimonial {
     flex-direction: column;
     text-align: center;
     gap: 1vh;
   }

   .envelope-wrapper-left,
   .envelope-wrapper-right {
     display: none;
   }

   footer {
     font-size: 1rem;
     padding: 2vh 4vw;
   }
 }

 /* =================== */
 /* 📱 Smartphones hochkant */
 /* =================== */
 @media (max-width: 768px) {
   html {
     font-size: 0.9rem;
   }

   nav a {
     margin-left: 2vw;
     font-size: 1.1rem;
   }

   .hero-image-wrapper {
     height: 40vh;
   }

   .intro-box {
     padding: 4vh 5vw;
     top: 30vh;
   }

   .intro-box h1 {
     font-size: 1.6rem;
   }

   .intro-box p {
     font-size: 1rem;
   }

   .hero-point img {
     width: 20vw;
     height: 20vw;
   }

   .contact-left {
     align-items: stretch;
   }

   .form-overlay,
   .contact-explainer {
     position: static;
     width: 90vw;
     padding: 2vh 4vw;
   }

   .form-overlay {
     max-height: none;
     top: auto;
     left: auto;
     transform: none;
   }

   .message img {
     max-width: 40vw;
   }

   .floating-contact {
     width: 5vw;
     height: 5vw;
     font-size: 2rem;
     bottom: 4vh;
     right: 3vw;
   }

   footer {
     font-size: 0.9rem;
     padding: 3vh 4vw;
   }
 }

 /* ================ */
 /* 📱 iPhone SE / Mini */
 /* ================ */
 @media (max-width: 480px) {
   html {
     font-size: 0.8rem;
   }

   nav a {
     font-size: 1rem;
   }

   .intro-box h1 {
     font-size: 1.8rem;
   }

   .intro-box p {
     font-size: 1rem;
   }

   .service-box h3 {
     font-size: 1.2rem;
   }

   .about-content h3 {
     font-size: 1.8rem;
   }

   .about-content p {
     font-size: 1.2rem;
   }

   .testimonial img {
     width: 15vw;
     height: 15vw;
   }

   .contact-explainer {
     font-size: 1.2rem;
   }

   .floating-contact {
     font-size: 1rem;
     width: 6vw;
     height: 6vw;
   }
 }

 /* Sektion in voller Breite + vertikale Liste mit Stufen-Effekt */
 #services {
   width: 100vw;
   max-width: none;
   padding: 10vh 4vw;
   margin: 0 auto;
   box-sizing: border-box;
   padding-top: 10vh;
 }

 #services .list {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 3vh;
 }

 #services h2 {
   text-align: center;
   width: 100%;
   margin-bottom: 3vh;
 }

 /* === CTA Buttons & Bänder === */
 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.8rem;
   padding: 1.6vh 2.4vw;
   border-radius: 2.4vh;
   font-size: 1rem;
   line-height: 1;
   text-decoration: none;
   cursor: pointer
 }

 .btn--primary {
   background: var(--accent-color);
   color: var(--text-color-light)
 }

 .btn--ghost {
   background: transparent;
   color: var(--text-color-light);
   outline: 0.3vh solid var(--text-color-light)
 }

 .btn:focus {
   outline: 0;
   box-shadow: 0 0 0 0.6vh rgba(0, 0, 0, .2)
 }

 .microcopy {
   opacity: .85;
   margin-top: 1.2vh;
   font-size: 0.95rem
 }

 .cta-band {
   margin: 6vh auto 0;
   display: flex;
   gap: 1.2vw;
   align-items: center;
   justify-content: center;
   padding: 2.6vh 2vw;
   background: var(--secondary-color);
   border-radius: 1vw;
   max-width: 62.5vw
 }

 .cta-band span {
   font-size: 1.1rem;
   margin-right: 0.5vw;
   opacity: .95
 }

 .form-note {
   font-size: 0.9rem;
   margin-top: 1.2vh;
   opacity: .8
 }

 .form-alt {
   font-size: 0.95rem;
   margin-top: 0.6vh
 }

 .text-cta {
   border-bottom: 0.3vh solid currentColor;
   padding-bottom: 0.1vh
 }

 .text-cta:hover {
   filter: brightness(.9)
 }

 /* CTA-Band in #testimonials höher setzen */
 #testimonials .cta-band {
   margin-top: 2vh !important;
   /* vorher 6vh */
 }

 /* auf großen Screens noch etwas dichter */
 @media (min-width: 1920px) {
   #testimonials .cta-band {
     margin-top: 2vh !important;
   }
 }

 /* mobil kompakt, ohne zu kleben */
 @media (max-width: 900px) {
   #testimonials .cta-band {
     margin-top: 2vh !important;
   }
 }

 /* Kontakt-Erklärung: Direktkanäle betonen */
 .contact-explainer .contact-channels {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 0.8vw 1.2vw;
   margin-top: 1.2vh;
   line-height: 1.3;
 }

 .contact-explainer .sep {
   opacity: .6
 }

 .contact-explainer .contact-link {
   font-size: 1.25em;
   /* etwas größer als Fließtext */
   font-weight: 600;
   color: var(--accent-color);
   /* Akzentfarbe */
   text-decoration: none;
   border-bottom: 0.3vh solid transparent;
 }

 .contact-explainer .contact-link:hover {
   border-bottom-color: currentColor;
 }

 /* Mobil kompakter – deine MQ setzt .contact-explainer ohnehin auf static & 90vw */
 @media (max-width: 768px) {
   .contact-explainer .contact-link {
     font-size: 1.15em;
   }
 }

 /* Überschrift + Direktkanäle in der mittigen Kontakt-Erklärung */
 .contact-explainer {
   text-align: center;
 }

 .contact-explainer .contact-title {
   font-size: 1.35rem;
   /* kurz & präsent */
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1.2vh;
 }

 .contact-explainer .contact-channels {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   justify-content: center;
   gap: 0.8vw 1.2vw;
   margin-top: 1.2vh;
   line-height: 1.3;
 }

 .contact-explainer .direct-intro {
   font-weight: 600;
   opacity: .85;
   margin-right: .6vw;
 }

 .contact-explainer .sep {
   opacity: .6;
 }

 .contact-explainer .contact-link {
   font-size: 1.25em;
   /* größer als Body-Text */
   font-weight: 600;
   color: var(--accent-color);
   /* Akzentfarbe */
   text-decoration: none;
   border-bottom: 0.3vh solid transparent;
 }

 .contact-explainer .contact-link:hover {
   border-bottom-color: currentColor;
 }

 /* mobil etwas kompakter */
 @media (max-width: 768px) {
   .contact-explainer .contact-link {
     font-size: 1.15em;
   }

   .contact-explainer .direct-intro {
     flex-basis: 100%;
     margin: 0 0 0.6vh 0;
   }

   .contact-explainer .sep {
     display: none;
   }

   /* verhindert Zeilenumbruch mit alleinstehendem Bullet */
 }

 /* Contact Explainer – höher & zentriert */
 #contact .contact-explainer {
   top: 10vh !important;
   /* weiter nach oben */
   text-align: center;
   /* statt left */
 }

 /* Headline wie Services, aber mit etwas weniger Abstand */
 #contact .contact-explainer .heading {
   margin-bottom: 1.2vh;
 }

 /* Zeilenführung & Spacing der Kanäle bleiben kompakt */
 #contact .contact-explainer .contact-channels {
   justify-content: center;
 }

 /* Tuning für hohe Screens (vorher hattest du teils 26vh in MQs) */
 @media (max-width: 1850px) and (min-height: 1000px) {
   #contact .contact-explainer {
     top: 20vh !important;
   }
 }

 /* 4K/Retina */
 @media (min-width: 2500px) {
   #contact .contact-explainer {
     top: 17vh !important;
   }
 }

 /* === SEO-Ergänzungen: index.html === */
 /* 1) Längeres H1 in der Intro-Box besser umbrechen */
 .intro-box h1 {
   line-height: 1.2;
   word-break: normal;
   hyphens: auto;
 }

 /* 2) Allgemeine Textlinks in Content-Bereichen (About, Testimonials, Services) */
 #about a,
 #testimonials a,
 #services a {
   color: var(--accent-color);
   text-decoration: none;
   border-bottom: 0.3vh solid transparent;
   transition: border-color .2s ease, filter .2s ease;
 }

 #about a:hover,
 #testimonials a:hover,
 #services a:hover {
   border-bottom-color: currentColor;
   filter: brightness(.95);
 }

 /* 3) Fokus-styles für Tastaturbedienung (A11y) */
 a:focus-visible,
 button:focus-visible,
 [role="button"]:focus-visible {
   outline: 0.4vh solid var(--accent-color);
   outline-offset: 0.3vh;
   border-radius: 0.4vh;
 }

 /* 4) Verlinkter „Leistungen entdecken“-Hinweis im Testimonials-Block */
 .testimonial-reasons .closing a {
   color: var(--accent-color);
   font-weight: 600;
 }

 /* 5) Hero-Icons: leicht konsistenter Hover-Effekt */
 .hero-point img {
   transition: transform .2s ease;
 }

 .hero-point img:hover {
   transform: scale(1.03);
 }

 /* 6) Service-CTA-Karten (deine <service-card>-Komponente) – Fokus & Hover */
 service-card:focus-within,
 service-card:focus-visible {
   outline: 0.35vh solid var(--accent-color);
   outline-offset: 0.3vh;
   border-radius: 1vh;
 }

 service-card:hover {
   filter: brightness(.98);
 }

 /* 7) Kleinere Typo-Tunings für sehr schmale Screens */
 @media (max-width: 480px) {
   .intro-box h1 {
     font-size: 1.5rem;
   }

   .intro-box p {
     font-size: 0.95rem;
   }
 }

 /* === Kombinierte Version: Ursprüngliches CTA-Band + SEO-sicher === */
 .cta-band {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 1rem;
   padding: 2vh 2vw;
   background-color: var(--accent-color);
   color: var(--lait);
   text-align: center;
   box-shadow: 0 0.5vh 1vh rgba(0, 0, 0, 0.15);
 }

 .cta-band span {
   font-size: 1.1rem;
   font-weight: 600;
 }

 .cta-band a {
   background-color: var(--lait);
   color: var(--accent-color);
   padding: 0.6em 1.2em;
   border-radius: 0.5em;
   font-weight: 600;
   text-decoration: none;
   /* Entfernt Unterstreichung */
   border-bottom: none !important;
   /* Verhindert globale Link-Linie */
   transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
 }

 .cta-band a:hover {
   background-color: var(--primary-color);
   /* color: var(--text-color-dark);
	*/
   transform: translateY(-0.1em);
 }

 /* Mobile Anpassung */
 @media (max-width: 768px) {
   .cta-band {
     flex-direction: column;
     gap: 1.5rem;
     padding: 3vh 5vw;
   }

   .cta-band span {
     font-size: 1rem;
   }

   .cta-band a {
     width: 100%;
     text-align: center;
   }
 }

 /* Mehr Abstand zwischen Überschrift und Testimonial-Slider */
 #testimonials .testimonial-slider {
   margin-top: 9vh;
   /* Abstand nach Bedarf anpassen */
 }

 /* Box-Design für "Leistungen entdecken" im Testimonials-Absatz */
 .testimonial-reasons .closing a {
   display: inline-block;
   margin-top: 1.2rem;
   padding: 0.5em 1.2em;
   background-color: var(--accent-color);
   color: var(--lait) !important;
   border-radius: 0.5em;
   font-weight: 600;
   text-decoration: none;
   border-bottom: none !important;
   transition: background-color 0.25s ease, transform 0.2s ease;
 }

 .testimonial-reasons .closing a:hover {
   background-color: var(--accent-color-dark, #333);
   transform: translateY(-0.1em);
 }

 /* === About-Box höher setzen === */
 #about {
   margin-top: -6vh;
   /* nach Bedarf anpassen */
 }

 /* === Buttons für Leistungen in About-Sektion === */
 .about-services-buttons {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   margin-top: 2rem;
 }

 .about-services-buttons a {
   display: inline-block;
   padding: 0.6em 1.2em;
   background-color: var(--accent-color);
   color: var(--lait) !important;
   border-radius: 0.5em;
   font-weight: 600;
   text-decoration: none;
   transition: background-color 0.25s ease, transform 0.2s ease;
 }

 .about-services-buttons a:hover {
   background-color: var(--accent-color-dark, #333);
   transform: translateY(-0.1em);
 }

 /* Mobile: Buttons untereinander */
 @media (max-width: 768px) {
   .about-services-buttons {
     flex-direction: column;
     gap: 0.8rem;
   }

   .about-services-buttons a {
     text-align: center;
     width: 100%;
   }
 }

 /* --- FIX: Intro-Box wieder absolut + höher positionieren --- */
 .intro-box {
   position: absolute !important;
   top: 36vh;
   /* vorher 43.48vh → Intro-Box höher */
   left: 50%;
   transform: translateX(-50%);
   margin-top: 0 !important;
   /* überschreibt evtl. gesetztes -margin */
   z-index: 10;
   /* bleibt über dem Banner */
 }

 /* Responsive Feintuning – nur die Position, Rest unverändert lassen */
 @media (max-width: 1024px) {
   .intro-box {
     top: 30vh !important;
   }

   /* vorher 35vh */
 }

 @media (max-width: 768px) {
   .intro-box {
     top: 26vh !important;
   }

   /* vorher 30vh */
 }

 /* === HERO CARDS – kompakter, moderner, näher zusammen (Overrides) === */
 #home .hero-points {
   display: grid !important;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
   max-width: clamp(760px, 92vw, 1040px) !important;
   /* enger Gesamtbereich */
   margin: 0 auto !important;
   padding: 2.2vh 0 4.4vh !important;
   gap: clamp(8px, .9vw, 14px) !important;
   /* dichteres Grid */
 }

 #home .hero-point {
   position: relative;
   background:
     radial-gradient(120% 100% at 110% -10%, rgba(255, 255, 255, .08), transparent 60%),
     linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)) !important;
   border: 1px solid rgba(255, 255, 255, .14) !important;
   border-radius: 16px !important;
   padding: clamp(14px, 1.2vw, 20px) !important;
   min-height: clamp(200px, 28vh, 300px) !important;
   box-shadow: 0 10px 28px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .03) !important;
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important;
   justify-content: flex-start !important;
   text-align: center !important;
   transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
   isolation: isolate;
 }

 /* subtile Lichtkante */
 #home .hero-point::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 16px;
   pointer-events: none;
   background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 40%);
   mix-blend-mode: screen;
 }

 /* runder Icon-Badge mit zartem Rahmen/Glow */
 #home .hero-point img {
   width: clamp(60px, 5vw, 90px) !important;
   height: clamp(60px, 5vw, 90px) !important;
   border-radius: 50% !important;
   object-fit: cover;
   background: #555;
   margin: 2px 0 clamp(8px, 1.1vw, 14px) !important;
   border: 2px solid rgba(255, 255, 255, .28);
   box-shadow: 0 8px 22px rgba(0, 0, 0, .35), 0 0 0 6px rgba(255, 255, 255, .06) inset;
   transform: translateZ(0);
   transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
 }

 /* Text lesbarer, etwas größer */
 #home .hero-point p {
   font-size: clamp(1rem, 1.15rem, 1.2rem) !important;
   line-height: 1.55 !important;
   opacity: .95;
   margin: 0 !important;
 }

 /* Hover/Fokus: Lift + stärkerer Schein */
 #home .hero-point:hover,
 #home .hero-point:focus-within {
   transform: translateY(-4px);
   border-color: rgba(255, 255, 255, .22);
   box-shadow: 0 16px 40px rgba(0, 0, 0, .32), inset 0 0 0 1px rgba(255, 255, 255, .04);
 }

 #home .hero-point:hover img,
 #home .hero-point:focus-within img {
   transform: scale(1.04);
   box-shadow: 0 12px 28px rgba(0, 0, 0, .4), 0 0 0 8px rgba(255, 255, 255, .08) inset;
   filter: saturate(1.05);
 }

 /* sehr kleine Screens: kompakter */
 @media (max-width: 768px) {
   #home .hero-point {
     min-height: 220px !important;
   }
 }

 /* === HERO CARDS: gleiche Höhe erzwingen === */
 #home .hero-points {
   align-items: stretch !important;
   /* alle gleich hoch */
 }

 #home .hero-point {
   display: flex !important;
   flex-direction: column !important;
   justify-content: space-between !important;
   /* Inhalt gleichmäßig verteilt */
   height: 100% !important;
   /* nimmt volle Grid-Höhe ein */
 }

 /* sicherstellen, dass Text nicht zusammenschrumpft */
 #home .hero-point p {
   flex-grow: 1 !important;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 /* === HERO-CARDS: etwas breiter & luftiger === */
 #home .hero-points {
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
   /* vorher ~220px */
   max-width: clamp(880px, 96vw, 1200px) !important;
   /* Gesamtbereich größer */
   gap: clamp(10px, 1.2vw, 20px) !important;
   /* leicht mehr Abstand für Balance */
 }

 #home .hero-point {
   min-width: 280px !important;
   /* sichert Mindestbreite */
 }

 /* === ABOUT: etwas breiter & zentriert === */
 #about .about-box {
   max-width: clamp(880px, 86vw, 1140px);
   /* etwas breiter als zuvor */
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
   /* Bild & Text gleichmäßig */
   gap: clamp(20px, 2.4vw, 32px);
   align-items: center;
 }

 @media (max-width: 900px) {
   #about .about-box {
     grid-template-columns: 1fr;
     /* untereinander auf kleinen Screens */
     max-width: 94vw;
   }
 }

 /* === ABOUT: Mobile-Stack erzwingen === */
 @media (max-width: 900px) {
   #about .about-box {
     display: grid !important;
     grid-template-columns: 1fr !important;
     /* eine Spalte */
     row-gap: clamp(16px, 4vw, 28px) !important;
     max-width: 94vw !important;
   }

   #about .about-img,
   #about .about-text {
     grid-column: 1 / -1 !important;
     /* volle Breite je Element */
     justify-self: center;
     /* zentrieren */
   }

   #about .about-img img {
     width: 100%;
     height: auto;
   }
 }

 /* === ABOUT: Mobile-Stack + kleineres Bild + Spinner sauber ums Bild === */
 @media (max-width: 900px) {
   #about .about-box {
     display: grid !important;
     grid-template-columns: 1fr !important;
     row-gap: clamp(16px, 4vw, 28px) !important;
     max-width: 94vw !important;
     margin: 0 auto !important;
   }

   /* Bild-Container mittig + Bezugsrahmen für Spinner */
   #about .about-img {
     position: relative !important;
     display: grid !important;
     place-items: center !important;
     width: min(380px, 88vw) !important;
     /* Gesamtbox */
     margin: 0 auto !important;
   }

   /* Bild etwas kleiner auf Mobile */
   #about .about-img img {
     width: clamp(220px, 74vw, 320px) !important;
     height: auto !important;
     display: block !important;
   }

   /* Spinner ringförmig um das Bild – etwas größer als das Bild */
   #about .circle-spin {
     position: absolute !important;
     /* Ring-Größe: ein wenig größer als das Bild */
     width: calc(100% - 6vw) !important;
     height: calc(100% - 6vw) !important;
     max-width: 340px !important;
     /* passt sich an obige Bildgrenzen an */
     max-height: 340px !important;
     border: .35rem solid transparent !important;
     border-top-color: var(--text-color-dark) !important;
     border-bottom-color: var(--text-color-dark) !important;
     border-radius: 50% !important;
     pointer-events: none !important;
     /* zentriert über dem Bild */
     top: 50% !important;
     left: 50% !important;
     transform: translate(-50%, -50%) rotate(0deg) !important;
     animation: aboutSpinner 8s linear infinite;
   }
 }

 /* Fallback/Definition der Animation, falls nicht vorhanden */
 @keyframes aboutSpinner {
   to {
     transform: translate(-50%, -50%) rotate(360deg);
   }
 }

 /* === ABOUT (Mobile/iOS Fix): kleineres Bild + Spinner rotiert zuverlässig === */
 @media (max-width: 900px) {
   #about .about-img {
     position: relative !important;
     display: inline-grid !important;
     place-items: center !important;
     margin: 0 auto !important;
   }

   /* Bild auf Mobile deutlich kleiner */
   #about .about-img img {
     width: min(320px, 72vw) !important;
     /* <= iPhone 13 Pro Max ~ 308px */
     height: auto !important;
     display: block !important;
   }

   /* Spinner exakt über dem Bild, leicht größer via scale() */
   #about .circle-spin {
     position: absolute !important;
     top: 50% !important;
     left: 50% !important;
     width: 100% !important;
     height: 100% !important;
     border: .35rem solid transparent !important;
     border-top-color: var(--text-color-dark) !important;
     border-bottom-color: var(--text-color-dark) !important;
     border-radius: 50% !important;
     pointer-events: none !important;
     z-index: 1 !important;

     /* translate + scale + rotate (rotate wird animiert) */
     transform: translate(-50%, -50%) scale(1.08) rotate(0deg) !important;
     -webkit-transform: translate(-50%, -50%) scale(1.08) rotate(0deg) !important;

     animation: aboutSpin 8s linear infinite;
     -webkit-animation: aboutSpin 8s linear infinite;
     will-change: transform;
   }
 }

 /* Keyframes mit WebKit-Fallback – wichtig für iOS Safari */
 @keyframes aboutSpin {
   to {
     transform: translate(-50%, -50%) scale(1.08) rotate(360deg);
   }
 }

 @-webkit-keyframes aboutSpin {
   to {
     -webkit-transform: translate(-50%, -50%) scale(1.08) rotate(360deg);
   }
 }


 /* === Mobile Hero-Cards: 2×2 Grid + Fix fürs Abschneiden === */
 @media (max-width: 768px) {

   /* Sektion darf wachsen – nichts mehr abschneiden */
   .hero-section {
     height: auto !important;
     overflow: visible !important;
   }

   /* 2×2 Grid erzwingen (überstimmt das 1-Spalten-Layout) */
   .hero-points {
     display: grid !important;
     grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
     gap: 14px 14px !important;
     padding: 16px 16px 24px !important;
     /* etwas kompakter */
   }

   /* Karten kompakter machen */
   .hero-point {
     min-height: auto !important;
     max-width: none !important;
     padding: 14px !important;
     font-size: 1rem !important;
     border-radius: 12px !important;
     box-shadow: 0 10px 20px rgba(0, 0, 0, .25) !important;
   }

   /* Rundes Bild kleiner */
   .hero-point img {
     width: 72px !important;
     height: 72px !important;
     margin-bottom: 8px !important;
   }

   /* Einleitung etwas kleiner, damit alles über der Falz Platz hat */
   .intro-text {
     font-size: 1.1rem !important;
     padding: 16px 16px 8px !important;
   }

   /* Hero-Bildhöhe moderat, damit darunter Platz für 2×2 bleibt */
   .hero-image-wrapper {
     height: 36vh !important;
     /* statt 40vh */
   }
 }

 /* sehr kleine Geräte (SE/mini): noch enger */
 @media (max-width: 420px) {
   .hero-point img {
     width: 64px !important;
     height: 64px !important;
   }

   .hero-point {
     padding: 12px !important;
   }

   .hero-points {
     gap: 12px 12px !important;
   }
 }

 /* === Mobile Hero: 2×2-Grid, nichts schneidet ab, Navbar/Banner bleiben frei === */
 @media (max-width: 768px) {

   /* Die Hero-Sektion darf wachsen und kollidiert nicht mit der fixen Navbar */
   .hero-section {
     height: auto !important;
     min-height: unset !important;
     overflow: visible !important;
     /* Platz für fixe Nav: nutzt deinen --nav-offset (Fallback 96px) */
     padding-top: calc(var(--nav-offset, 96px) + 12px) !important;
   }

   /* Banner etwas kompakter, damit darunter Platz bleibt */
   .hero-image-wrapper {
     height: 32vh !important;
   }

   /* Einleitung schlanker */
   .intro-text {
     font-size: 1rem !important;
     line-height: 1.45 !important;
     padding: 12px 16px 8px !important;
   }

   /* → 2×2 Grid, nicht mehr abgeschnitten, mit sauberen Abständen */
   .hero-points {
     display: grid !important;
     grid-template-columns: 1fr 1fr !important;
     gap: 12px !important;
     padding: 12px 16px 24px !important;
     margin-top: 8px !important;
     align-content: start !important;
     justify-items: stretch !important;
   }

   /* Karten kompakt, keine übertriebenen Höhen/Zwangsbreiten */
   .hero-point {
     max-width: none !important;
     min-height: 0 !important;
     padding: 12px !important;
     border-radius: 12px !important;
     box-shadow: 0 8px 18px rgba(0, 0, 0, .22) !important;
   }

   /* Rundes Bild kleiner */
   .hero-point img {
     width: 64px !important;
     height: 64px !important;
     margin: 0 auto 8px !important;
     object-fit: cover !important;
   }
 }

 /* sehr kleine Geräte (SE/mini): noch ein Tick dichter */
 @media (max-width: 420px) {
   .hero-point {
     padding: 10px !important;
   }

   .hero-points {
     gap: 10px !important;
   }
 }

 
@media (max-width: 768px){
  .hero-image-wrapper{ height: 36vh !important; } /* vorher 40vh */
}


/* === Mobile: Banner bis ganz oben (unter fixed Header), nichts verdeckt === */
@media (max-width: 768px) {
  /* evtl. frühere Paddings/Margins neutralisieren */
  .hero-section {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Sicherheit: Bild füllt den Wrapper wirklich aus */
  .hero-image-wrapper picture,
  .hero-image-wrapper img.hero-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}
@media (max-width: 768px) {
  /* Hero-Wrapper füllt exakt die Viewport-Breite */
  .hero-image-wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important; /* verhindert Überstand */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Picture-Container & Bild füllen den Wrapper vollständig */
  .hero-image-wrapper picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .hero-image-wrapper img.hero-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Hero-Sektion selbst darf nicht größer als Viewport werden */
  .hero-section {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}


@media (max-width: 768px){
  /* Breite sauber kappen */
  .hero-section{
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    margin-top: 0 !important;   /* JS setzt gleich die exakte negative Margin */
    padding-top: 0 !important;  /* keine künstliche Luft oben */
  }
  .hero-image-wrapper{
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    /* Höhe setzt gleich JS exakt (36vh + Headerhöhe) */
  }
  .hero-image-wrapper picture,
  .hero-image-wrapper img.hero-image{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
  }
}

/* === Letzter Feinschliff: Banner exakt Viewport-breit, kein horizontaler Scroll === */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
  }

  .hero-section,
  .hero-image-wrapper {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100vw !important;       /* exakte Viewport-Breite */
    max-width: 100vw !important;
    overflow: hidden !important;   /* nichts darf überstehen */
  }

  .hero-image-wrapper picture,
  .hero-image-wrapper img.hero-image {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

@media (max-width: 768px){
  /* Container darf die Breite nicht sprengen */
  .hero-section{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
  }

  /* Banner-Wrapper: keine feste Höhe -> Bild bestimmt die Höhe */
  .hero-image-wrapper{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;      /* <- wichtig */
    overflow: visible !important;
  }

  /* Bild skaliert nur in der Breite, behält Seitenverhältnis */
  .hero-image-wrapper picture{
    display:block !important;
    width:100% !important;
  }
  .hero-image-wrapper img.hero-image{
    display:block !important;
    width:100% !important;        /* <- füllt genau die Bildschirmbreite */
    height:auto !important;       /* <- verhindert Breiten-Überstand */
    object-fit: contain !important;
    object-position: center !important;
  }
}

/* === Mobile: Hero-Cards als 2×2-Grid, sauber unter dem Banner === */
@media (max-width: 768px) {
  /* Sektion darf wachsen, nichts wird abgeschnitten */
  .hero-section{
    height: auto !important;
    min-height: unset !important;
    overflow: visible !important;
  }

  /* kompakter Text unter dem Banner */
  .intro-text{
    font-size: 1rem !important;
    line-height: 1.45 !important;
    padding: 12px 16px 4px !important;
    margin: 0 !important;
  }

  /* 2×2 Grid statt Einspalte */
  .hero-points{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 12px 16px 20px !important;
    align-content: start !important;
    justify-items: stretch !important;
  }

  /* Karten kompakt & gleichmäßig */
  .hero-point{
    max-width: none !important;
    min-height: 0 !important;
    padding: 12px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.22) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  /* Rundes Bild kleiner zentriert */
  .hero-point img{
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 8px !important;
    object-fit: cover !important;
  }
}

/* sehr kleine Geräte (SE/mini): noch dichter */
@media (max-width: 420px){
  .hero-points{ gap: 10px !important; padding: 10px 12px 16px !important; }
  .hero-point{ padding: 10px !important; }
  .hero-point img{ width: 58px !important; height: 58px !important; }
}

/* === Mobile Hero-Cards: echtes 2×2-Grid + fluides Scaling === */
@media (max-width: 768px) {
  /* Sektion darf wachsen; nichts klemmt oder schneidet ab */
  .hero-section{
    height: auto !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 2×2 Grid erzwingen, inkl. sicherer Innenabstände */
  .hero-points{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(10px, 3.2vw, 16px) !important;
    padding: clamp(10px, 3.6vw, 18px) clamp(12px, 4vw, 20px) clamp(16px, 4.8vw, 24px) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* HARTE Desktop-Vorgaben neutralisieren (flex-basis/max-width/min-height etc.) */
  .hero-point{
    flex: 0 0 auto !important;        /* überschreibt flex: 1 1 11.46vw */
    width: 100% !important;
    max-width: 100% !important;        /* überschreibt max-width in vw */
    min-width: 0 !important;
    min-height: 0 !important;          /* überschreibt min-height: 32vh */
    padding: clamp(10px, 3.2vw, 16px) !important;
    border-radius: clamp(10px, 3vw, 16px) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.22) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }

  /* Fluides Typo-Scaling in den Karten */
  .hero-point,
  .hero-point p,
  .hero-point li{
    font-size: clamp(.9rem, 2.6vw, 1.05rem) !important;
    line-height: 1.45 !important;
  }

  /* Rundes Bild skaliert mit – weder zu groß noch zu klein */
  .hero-point img{
    width: clamp(54px, 18vw, 84px) !important;
    height: clamp(54px, 18vw, 84px) !important;
    margin: 0 auto clamp(6px, 1.6vw, 10px) !important;
    object-fit: cover !important;
    border-radius: 50% !important;
  }

  /* Einleitung kompakter, damit das Grid sichtbar bleibt */
  .intro-text{
    font-size: clamp(.95rem, 2.6vw, 1.05rem) !important;
    padding: clamp(8px, 2.8vw, 12px) clamp(12px, 4vw, 20px) clamp(6px, 2.4vw, 10px) !important;
    margin: 0 !important;
  }
}

/* SE/kleine Phones noch etwas dichter */
@media (max-width: 420px){
  .hero-points{ gap: 10px !important; }
  .hero-point{ padding: 10px !important; }
  .hero-point img{ width: 56px !important; height: 56px !important; }
}


/* === FORCE 2×2 HERO-GRID ON MOBILE (overrides #home rules) === */
@media (max-width: 900px){
  #home .hero-points{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    max-width: 100% !important;   /* verhindert zusätzliche Breitenlimits */
  }
  #home .hero-point{
    min-width: 0 !important;      /* neutralisiert die 280px-Mindestbreite */
    max-width: none !important;
    min-height: 0 !important;
  }
}

/* === Mobile: kleineres rundes About-Bild === */
@media (max-width: 900px){
  .about-image img,
  .about-img-wrapper img{
    width: clamp(100px, 30vw, 160px) !important;
    height: clamp(100px, 30vw, 160px) !important;
    object-fit: cover !important;
  }
}

/* === Mobile: Spinner vollständig ausblenden === */
@media (max-width: 900px){
  #loading-screen,
  .spinner-wrapper,
  .spinner{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

/* === ABOUT (Mobile): Bild kleiner + Spinner aus === */
@media (max-width: 900px){
  /* Box kompakter, volle Breite nutzbar */
  #about {
    padding: 10vh 5vw !important;
  }
  #about .about-box{
    gap: 20px !important;
    padding: 24px !important;
    width: 92vw !important;
    max-width: 96vw !important;
  }

  /* Bild-Wrapper zentriert, ohne starre Mindestmaße */
  #about .about-img{
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;      /* überschreibt min-width:200px */
    min-height: 0 !important;     /* überschreibt min-height:200px */
    max-width: none !important;
    max-height: none !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 auto !important;    /* mittig */
  }

  /* Rundes Bild tatsächlich kleiner, skaliert mit */
  #about .about-img img{
    width: clamp(120px, 34vw, 180px) !important;
    height: clamp(120px, 34vw, 180px) !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Spinner-Ring mobil komplett ausblenden */
  #about .circle-spin{
    display: none !important;
    animation: none !important;
  }

  /* Text untereinander, zentriert */
  #about .about-text{
    grid-column: 1 / -1 !important;
    text-align: center !important;
  }

  /* Überschriften etwas kompakter, damit das Bild gut "zwischen" die Zeilen passt */
  .heading{ font-size: clamp(1.6rem, 5vw, 2.2rem) !important; }
  #about .about-text h3{ font-size: clamp(1.2rem, 4.6vw, 1.6rem) !important; }
  #about .about-text p{ font-size: clamp(1rem, 4vw, 1.15rem) !important; }
}

/* === Mobile: anderes Scroll-Logo === */
@media (max-width: 900px){
  header .logo.scroll img,
  img#logo-scroll,
  .logo.scroll img {
    content: url("/assets/logo_mobile.png"); /* <- Platzhaltername */
    width: auto !important;
    height: 40px !important; /* oder anpassen */
    object-fit: contain !important;
  }
}