@charset "utf-8";
/* CSS Document */


img{
  width: 100%;
  height: auto;
}

/*----google font Urbanist- konvertiert mit font squirrel---*/
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}



:root{
    --rot: rgb(214,48,73);
	--pink: rgb(214,76,102);
	--rosa: rgb(224,126,147);
    --hellrosa: rgba(249,229,233,1);
    --blassrosa: rgba(249,229,233,0.5);
	--beige: rgb(220,194,188);
    --hellbeige: #f8f2f3;
	--hellgrau: rgb(223,221,219);
    --blassgrau: rgb(234,230,229);
	--mittelgrau: rgb(207,196,222);
	--anthrazit: rgb(74,74,74);
     --gruen: rgb(174,198,0);

/* Bootstrap überschreiben*/
	--bs-heading-color: rgb(214,48,73) !important;
	--bs-body-font-size: 1.1rem;
	--bs-btn-bg: rgb(214,76,102); 
    --bs-btn-border-color: rgb(214,76,102);
    --bs-light-bg-subtle: #fff;
    --bs-navbar-nav-link-padding-x: 0.8rem;
    
}
	
html {
  scroll-behavior: smooth;
}



body{
	font-family:'Urbanist', Arial, sans-serif;	
	color:var(--anthrazit);
    font-weight: 400;
	height: 100vh;
    letter-spacing: 1px;
}


h1, h2, h3, 
strong {
    font-weight: 600;
}
.section-title {
    font-size: clamp(2.15rem, 2.7vw, 2.6rem);
    line-height: 1.12;
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.text-pink{
  color: var(--pink);
}
.text-beige{
  color: var(--beige);
}
.letter-spacing{
  letter-spacing: 0.04em;
}
.bg-anthrazit{
  background-color: var(--anthrazit);
  color:#fff;
  padding: 3rem 0;
}
.bg-rot{
  background-color: var(--rot);
  color:#fff;
  padding: 3rem 0;
}
.bg-rot h1, .bg-rot h2, .bg-rot h3{
  color:#fff;
}
.bg-beige{
  background-color: var(--beige);
  
  padding: 3rem 0;
}
.bg-hellbeige{
  background-color: var(--hellbeige);  
  padding: 3rem 0;
}

.bg-hellrosa{
  background-color: var(--hellrosa);
  padding: 3rem 0;
}
.bg-anthrazit h2, .bg-anthrazit h3{
  color:#fff;
}
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background-color: #fff;
}



.site-header::after {
    content: "";
    position: absolute;

    left: 0;
    top: 100%;

    width: 100%;
   height: 42px;

    background-image: url("/fileadmin/Media/grafiken/header-wave.svg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
  
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.03));
    pointer-events: none;
  z-index: 2;
}

.topbar {
    background-color: #fff;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(74, 74, 74, 0.08);
}

.topbar-inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/*-------------------------Scroll Verhalten Header-------------------------*/
.site-header .navbar-brand img {
    width: 180px;
    height: auto;
    transition: width 0.3s ease;
}

.site-header.is-scrolled .navbar-brand img {
    width: 120px;
}
.site-header .navbar {
    transition: padding 0.3s ease;
}

.site-header.is-scrolled .navbar {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/*--------------------header----------*/

.btn-contact {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--rot);
    --bs-btn-border-color: var(--rot);

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--pink);
    --bs-btn-hover-border-color: var(--pink);

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--pink);
    --bs-btn-active-border-color: var(--pink);

    font-size: 0.85rem;
    padding: 0.25rem 0.8rem;
    border-radius: 0.35rem;
}
.btn-search {
    --bs-btn-color: var(--anthrazit);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--hellgrau);

    --bs-btn-hover-color: var(--rot);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--rot);
}

.btn-primary{
	--bs-btn-color:#fff;
	--bs-btn-bg: var(--pink);
    --bs-btn-border-color: var(--rosa);
	
	--bs-btn-hover-color:#fff;
	--bs-btn-hover-bg: var(--rot);
    --bs-btn-hover-border-color: var(--rot);
	
	--bs-btn-active-color:#fff;
	--bs-btn-active-bg: var(--rot);
    --bs-btn-active-border-color: var(--rot);
	
	--bs-btn-disabled-color:#fff;
	--bs-btn-disabled-bg:var(--pink);
	--bs-btn-disabled-border-color:var(--pink);
	
}

/* ==================================================
   SECTION-WELLEN
   ================================================== */

.has-wave-top,
.has-wave-bottom {
    position: relative;
    padding: 1rem 0 5rem;
}
.typo3-intro.has-wave-bottom {
  padding: 1rem 0 0;
}

/* gemeinsame Eigenschaften */
.has-wave-top::before,
.has-wave-bottom::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 45px;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;

    pointer-events: none;
    z-index: 2;
}


/* Welle oben */
.has-wave-top::before {
    top: -44px;

    -webkit-mask-image:
        url("/fileadmin/Media/grafiken/typo3-section-welle-oben.svg");
    mask-image:
        url("/fileadmin/Media/grafiken/typo3-section-welle-oben.svg");
}


/* Welle unten */
.has-wave-bottom::after {
    bottom: -44px;

    -webkit-mask-image:
        url("/fileadmin/Media/grafiken/typo3-section-welle-unten.svg");
    mask-image:
        url("/fileadmin/Media/grafiken/typo3-section-welle-unten.svg");
}
.has-wave-top::before {
    background-color: var(--wave-top-color, #fff);
}

.has-wave-bottom::after {
    background-color: var(--wave-bottom-color, #fff);
}

.wave-top-red {
    --wave-top-color: var(--rot);
}

.wave-top-beige {
    --wave-top-color: var(--hellbeige);
}

.wave-top-white {
    --wave-top-color: #fff;
}

.wave-bottom-red {
    --wave-bottom-color: var(--rot);
}

.wave-bottom-beige {
    --wave-bottom-color: var(--hellbeige);
}

.wave-bottom-white {
    --wave-bottom-color: #fff;
}

/*---------------Ende Wellen--------------------------------*/

.navbar-nav .nav-link {
    color: var(--anthrazit);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--rot);
}

.navbar-nav .nav-link.active {
    color: var(--anthrazit);
    position: relative;
}




.navbar-nav .nav-link.active::before {
    content: "";
    position: absolute;

    left: 0.5rem;
    right: 0.75rem;
    bottom: 0;

    height: 2px;
    background-color: var(--rot);
}
.navbar-nav .nav-link.active:not(.dropdown-toggle)::before {
    left: 0.5rem;
    right: 0.5rem;
}



/*------------------Dropdwown--------------------------------*/
.navbar .dropdown-toggle::after {
    content: "";
    display: inline-block;

    width: 0.4rem;
    height: 0.4rem;
    margin-left: 0.5rem;
    vertical-align: 0.15em;

    border: solid currentColor;
    border-width: 0 1.2px 1.2px 0;

    transform: rotate(45deg);
    transition: transform 0.2s ease;
}
.navbar .dropdown.show > .dropdown-toggle::after,
.navbar .dropdown-toggle.show::after {
    transform: rotate(-135deg);
}

.dropdown-menu[data-bs-popper]{
  margin-top: -0.2rem;
}
.dropdown-item.active, .dropdown-item:active {
  color: var(--pink);
  text-decoration: none;
  background-color: #fff;
}
.dropdown-menu{
  border-radius: 0;
  border-top: 2px solid var(--rosa);
}
/*------Ende-----*/
.business-header{
  margin-top: 124px;
}
.hero-slider {
    position: relative;
}

/*.hero-slider .carousel-inner {
    overflow: hidden;*/

    /* breite, sanfte Rundung wie beim Hero */
/*   border-radius: 0 0 50% 50% / 0 0 25% 25%;
}*/

.hero-slider .carousel-inner {
    overflow: hidden;

   clip-path: polygon(
        0 0,
        100% 0,
        100% 86.5%,
        98% 86.8%,
        94% 87.4%,
        88% 88.3%,
        80% 89.2%,
        70% 90.0%,
        58% 90.7%,
        46% 91.0%,
        34% 90.7%,
        22% 89.8%,
        12% 88.6%,
        5% 87.4%,
        1.5% 86.6%,
        0 86.3%
    );
}

.hero-slider .carousel-item {
    position: relative;
    height: 720px;
}

/* Sliderbild */
.hero-slider .slider-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% center;
}

/* Webconsult Overlay */
.hero-slider .carousel-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        rgba(214, 48, 73, 0.82) 0%,
        rgba(214, 48, 73, 0.68) 28%,
        rgba(214, 76, 102, 0.52) 55%,
        rgba(224, 126, 147, 0.28) 78%,
        rgba(224, 126, 147, 0.12) 100%
    );
}
.hero-slider .caption,
.hero-slider .container,
.hero-slider .carousel-caption {
    position: relative;
    z-index: 2;
}

/* Caption über Bild und Overlay legen */
.hero-slider .caption {
    position: absolute;
    inset: 0;
    z-index: 2;

    display: flex;
    align-items: flex-start;

    padding-top: 170px;

    pointer-events: none;
}


/* Bootstrap-Container innerhalb der Caption */
.hero-slider .caption .container {
    position: relative;
    z-index: 2;
    width: 100%;
}


/* Bootstrap-Standardpositionierung der carousel-caption aufheben */
.hero-slider .carousel-caption {
    position: relative;

    top: auto;
    right: auto;
    bottom: auto;
    left: auto;

    width: 70%;

    padding: 0;
    margin: 0;

    text-align: left;
    color: #fff;

    pointer-events: auto;
}


/* Überschrift */
.hero-slider .carousel-caption .hero-title {
    margin: 0 0 1rem;

    color: #fff;

    font-size: clamp(2rem, 4vw, 4.5rem);
    font-weight: 600;
    line-height: 1.1;

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.42);
}

.hero-slider .carousel-caption p.hero-title {
    margin-top: 0;
}
/* ---------- Animation Überschrift ---------- */

.hero-title {
    overflow: hidden;
}

.hero-title .word {
    display: inline-block;

    opacity: 0;
    transform: translateY(45px);

    transition-property: opacity, transform;
    transition-duration: 0.7s;
    transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}

/* Erst mit animate-in startet die Animation */
.hero-slider .carousel-item.animate-in .hero-title .word {
    opacity: 1;
    transform: translateY(0);
}


/* ---------- Animation Unterzeile ---------- */

.hero-slider .subheading {
    opacity: 0;
    transform: translateY(20px);

    transition:
        opacity 0.7s ease 1.10s,
        transform 0.7s ease 1.10s;
}

.hero-slider .carousel-item.animate-in .subheading {
    opacity: 1;
    transform: translateY(0);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.42);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
}

/* Button */
.hero-slider .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgba(255,255,255,0.14);
    --bs-btn-border-color: rgba(255,255,255,0.35);

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(255,255,255,0.22);
    --bs-btn-hover-border-color: rgba(255,255,255,0.5);

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(255,255,255,0.28);
    --bs-btn-active-border-color: rgba(255,255,255,0.55);

    backdrop-filter: blur(3px);
    border-radius: 0.7rem;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
}

/*-------------------------------------Header der Unterseiten-------------------------------------*/
/*------------------------------------------------------------------------------------------------*/
.page-hero {
    position: relative;
    height: 520px;

    margin-top: 124px;

    overflow: hidden;

    clip-path: polygon(
        0 0,
        100% 0,
        100% 86.5%,
        98% 86.8%,
        94% 87.4%,
        88% 88.3%,
        80% 89.2%,
        70% 90.0%,
        58% 90.7%,
        46% 91.0%,
        34% 90.7%,
        22% 89.8%,
        12% 88.6%,
        5% 87.4%,
        1.5% 86.6%,
        0 86.3%
    );
}
/*--------------------Unterseiten Bild......................*/
.page-hero-image {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 60% center;
}
/*--------------------Unterseiten Overlay.....................*/

.page-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background: linear-gradient(
        90deg,
        rgba(214, 48, 73, 0.82) 0%,
        rgba(214, 48, 73, 0.68) 28%,
        rgba(214, 76, 102, 0.52) 55%,
        rgba(224, 126, 147, 0.28) 78%,
        rgba(224, 126, 147, 0.12) 100%
    );
}

/*--------------------Unterseiten Text auf Header.....................*/
.page-hero-caption {
    position: absolute;
    inset: 0;

    z-index: 2;

    display: flex;
    align-items: flex-start;

    padding-top: 140px;
}

.page-hero-caption .container {
    width: 100%;
}

.page-hero-text {
    width: 82%;

    color: #fff;
}
.page-hero .hero-title {
    margin: 0 0 1rem;

    color: #fff;

    font-size: clamp(2rem, 4vw, 4.5rem);
    font-weight: 600;
    line-height: 1.3;

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.42);
}

.page-hero .subheading {
    margin: 0;

    color: #fff;

    font-size: clamp(1.4rem, 2.5vw, 2.2rem);
    line-height: 1.35;

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.42);
}
/* ---------- Animation Überschrift Seitenheader ---------- */

.page-hero .hero-title .word {
    display: inline-block;

    opacity: 0;
    transform: translateY(45px);

    transition-property: opacity, transform;
    transition-duration: 0.7s;
    transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}

.page-hero.animate-in .hero-title .word {
    opacity: 1;
    transform: translateY(0);
}


/* ---------- Animation Unterzeile Seitenheader ---------- */

.page-hero .subheading {
    opacity: 0;
    transform: translateY(20px);

    transition:
        opacity 0.7s ease 1.10s,
        transform 0.7s ease 1.10s;
}

.page-hero.animate-in .subheading {
    opacity: 1;
    transform: translateY(0);
}
/* --------------------------------------------------
   MEGAMENÜ LEISTUNGEN
-------------------------------------------------- */

.mega-dropdown-menu {
    border: 0;
    border-radius: 0;
    margin-top: 0;
    padding: 0;
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

/* Container des Untermenüs */
.mega-dropdown-menu .nav-list {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Einzelne Kachel */
.mega-dropdown-menu .list-inline-item {
    display: flex;
    justify-content: center;
    margin: 0;
    border-right: 1px solid #eeeeee;
}

/* optional auch linke Begrenzung */
.mega-dropdown-menu .list-inline-item:first-child {
    border-left: 1px solid #eeeeee;
}


/* Link / Kachel */
.mega-dropdown-menu .dropdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 150px;
    padding: 1.4rem 1.1rem;

    text-align: center;
    white-space: normal;

    color: #555;
    background: transparent;
  /*----------kleine Animation----*/ 
    transition:
        transform 0.22s ease,
        color 0.22s ease;
}


.mega-dropdown-menu .dropdown-item:hover,
.mega-dropdown-menu .dropdown-item:focus {
    transform: translateY(-4px);
    color: var(--rot);
   /*----------kleine Animation----*/
  transform: translateY(-4px);
}
.mega-dropdown-menu .dropdown-item:hover img,
.mega-dropdown-menu .dropdown-item:focus img {
    transform: scale(1.04);
}


/* Bilder */
.mega-dropdown-menu .dropdown-item img {
    display: block;

    width: auto;
    max-width: 90px;
    height: 70px;

    object-fit: contain;

    margin: 0 auto 0.8rem;
  opacity: 0.5;
  /*-----Kleine Animation---*/
  transition: transform 0.22s ease;
}
.mega-dropdown-menu .dropdown-item:hover img,
.mega-dropdown-menu .dropdown-item:focus img {
    transform: scale(1.04);
}

/* Navigationstext */
.mega-dropdown-menu .dropdown-item span {
    display: block;
    margin-top: 0 !important;
    letter-spacing: 0;
    font-size: 0.95rem;
    line-height: 1.25;
    text-align: center;
}


/* Hover */
.dropdown-menu.mega-dropdown-menu .dropdown-item:hover,
.dropdown-menu.mega-dropdown-menu .dropdown-item:focus {
    color: var(--rot);
    background-color: #fafafa;
}


/* Aktiver Menüpunkt */
.dropdown-menu.mega-dropdown-menu li.active{
  background-color: #fafafa;
}

.dropdown-menu.mega-dropdown-menu .dropdown-item.active,
.dropdown-menu.mega-dropdown-menu .dropdown-item:active {
    color: var(--rot);
    background-color: transparent;
}


/* aktives Bild nicht beeinflussen */
.dropdown-menu.mega-dropdown-menu .dropdown-item.active img {
    opacity: 1;
}


.site-footer {
    position: relative;
    background: var(--anthrazit);
    margin-top: 0;
  color: #fff;
}

.site-footer::before {
    content: "";
    position: absolute;

    left: 0;
    bottom: 100%;

    width: 100%;
    height: 60px;

    background-image: url("/fileadmin/Media/grafiken/footer-wave.svg");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% 100%;
}
footer a{
  color: #fff;
}
footer .logo img{
  max-width: 250px;
}
.footer-wave {
    display: block;
    width: 100%;
    height: clamp(32px, 4vw, 60px);
    margin: 0;
}

.footer-wave path {
    fill: var(--anthrazit); /* dein Anthrazit */
}
footer h3{
 border-bottom: 2px solid var(--rosa);
  display: inline;
  color:#fff;
}
footer p, footer ul{
  margin-top: 1rem;
}
footer ul{
  padding-left: 1rem;
}
.site-footer ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.site-footer li {
    position: relative;
    padding-left: 1.2rem;
  line-height: 180%;
}

.site-footer li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.9em;

    width: 0.55rem;
    height: 2px;

    background: var(--rosa);
}
.site-footer li a{
  text-decoration: none;
}
footer .bi::before{
  padding-right: 0.3rem;
}

/*--------------------------STARTSEITE--------------------------------*/
/* Überzeile */
.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;

    margin: 0;

    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;    
}

.section-kicker::after {
  
  content: "";
  display: block;
  width: 1.8rem;
  height: 1px;
  background-color: var(--rot);
  border-radius: 999px;

}
.bg-rot .section-kicker::after {
   background-color: #fff;
}

.home-intro {
    position: relative;
    z-index: 3;
    margin-top: -2.5rem;
}

.home-intro-inner {
    background: #fff;
    padding: clamp(2rem, 4vw, 3.5rem);
    border-radius: 2rem 2rem 0 0;

    display: grid;
    grid-template-columns: 1.4fr .8fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.home-intro h1 {
    margin: 0;
    color: var(--rot);
    font-size: clamp(2.3rem, 3.5vw, 4rem);
    line-height: 1.08;
}

.home-intro p {
    margin: 0;
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.6;
}

@media (max-width: 991px) {
    .home-intro-inner {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
  
}


/* Leistungswegweiser */

.section-wegweiser {
    position: relative;
    z-index: 2;
    padding-bottom: 0;
    margin-bottom: 6rem;
    padding-top: 5rem;
}
.section-wegweiser .container {
    position: relative;
    z-index: 2;
}
.section-wegweiser .row > [class*="col-"] {
    display: flex;
}
.wegweiser-row {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}
.wegweiser-card {
    display: flex;
    align-items: flex-start;
    gap: 1.3rem;
    height: 100%;
    padding: 1.3rem 1.5rem;
    background: #fff;
    border: 1px solid #eee5e7;
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 5px 25px rgba(0, 0, 0, .025);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
   width: 100%;
    height: 100%;
    min-height: 150px;
}

.wegweiser-card:hover {
    transform: translateY(-5px);
    border-color: rgba(214, 48, 73, .35);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .07);
}

.wegweiser-card:focus-visible {
    outline: 3px solid #d63049;
    outline-offset: 4px;
}

/* Icon */

.wegweiser-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: #fcecef;
    color: #d63049;
    font-size: 1.5rem;
    transition: background .25s ease;
}

.wegweiser-card:hover .wegweiser-icon {
    background: #f9dce2;
}

/* Inhalte */

.wegweiser-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .45rem;
    min-width: 0;
    height: 100%;
}

.wegweiser-title {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    color: #333;
}

.wegweiser-text {
    display: block;
    font-size: .95rem;
    line-height: 1.6;
    color: #666;
}

.wegweiser-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: auto;
    padding-top: .6rem;
    font-size: .95rem;
    font-weight: 600;
    color: #d63049;
}

.wegweiser-link i {
    transition: transform .25s ease;
}

.wegweiser-card:hover .wegweiser-link i {
    transform: translate(3px, -3px);
}

/* Responsive */

@media (max-width: 767.98px) {
    .section-wegweiser {
        padding-bottom: 3rem;
    }
  .wegweiser-row {
        max-width: 100%;
    }

    .wegweiser-card {
        padding: 1.3rem;
        gap: 1rem;
      min-height:0;
    }

    .wegweiser-icon {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
        font-size: 1.4rem;
    }

    .wegweiser-title {
        font-size: 1.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wegweiser-card,
    .wegweiser-icon,
    .wegweiser-link i {
        transition: none;
    }
}


.webdesign-intro, .section-barrierefreiheit {
    padding-top: clamp(2rem, 7vw, 4rem);
    padding-bottom: 0;
}
.section-barrierefreiheit{
  position: relative;
}

.webdesign-intro .row, .section-barrierefreiheit .row {
    align-items: center;
}

.webdesign-intro-text, .section-barrierefreiheit-text {
    padding-right:0;
}

.webdesign-intro h2, .section-barrierefreiheit-text h2, .section-content h2, .accessibility-intro h2 {
    max-width: 780px;
    font-size: clamp(2.4rem, 3.5vw, 3.2rem);
    line-height: 1.12;
    margin-bottom: 1.5rem;
}

.webdesign-intro p, .section-barrierefreiheit-text p {
    max-width: 780px;
    font-size: 1.1rem;
    line-height: 1.7;
}

.intro-cta {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-top: 1.5rem;
    color: var(--rot);
    font-weight: 600;
    text-decoration: none;
    transition: gap .2s ease;
    position: relative;
    font-size: 1.2rem;
}
.intro-cta span {
    flex-shrink: 0;
    transition: transform .25s ease;
}

.intro-cta:hover {
    gap: .8rem;
}
.intro-cta::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -.25rem;
    width: 0;
    height: 1px;
    background: var(--rot);
    transition: width .25s ease;
}

.intro-cta:hover::after {
    width: calc(100% - 1.5rem);
}

.typo3-section{
  background: var(--hellbeige);
  position: relative;
  padding-block: clamp(5rem, 8vw, 7rem);
  margin-block: 42px;
  margin-bottom:0;
}
/*---------Welle voher und nachher-------*/
.typo3-section::before,
.typo3-section::after, .section-barrierefreiheit::after, .hosting-section::after,  .barrierefrei-praxis::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 42px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    pointer-events: none;
}

.typo3-section::before, .barrierefrei-praxis::before {
    top: -41px;
    background-image:
        url('/fileadmin/Media/grafiken/typo3-section-welle-oben.svg');
}

.typo3-section::after {
    bottom: -41px;
    background-image:
    url('/fileadmin/Media/grafiken/typo3-section-welle-unten.svg');
}
.section-barrierefreiheit::after, .hosting-section::after{
    bottom: -41px;
    background-image:
    url('/fileadmin/Media/grafiken/header-wave.svg');
}


.typo3-content {
    max-width: 680px;
}
.typo3-content h2 {
    color: var(--rot);
    font-size: clamp(2.4rem, 3.5vw, 3.2rem);
    line-height: 1.12;
    margin-bottom: 1.5rem;
}

.typo3-content p {
    font-size: 1.1rem;
    line-height: 1.7;
}
/* ==================================================
   BILDER MIT VERSETZTER HINTERGRUNDFLÄCHE
   .bild-rechts = Fläche rechts/unten
   .bild-links  = Fläche links/unten
================================================== */

.bild-rechts,
.bild-links {
    position: relative;
    margin-block: 2rem;
}


/* ---------- Bildmaske ---------- */

.bild-rechts figure.image,
.bild-links figure.image {
    position: relative;
    z-index: 1;

    margin: 0;
    overflow: hidden;
}


/* unterschiedliche Rundungen */

.bild-rechts figure.image {
    border-radius: 2rem 1rem 6rem 2rem;
}

.bild-links figure.image {
    border-radius: 1rem 2rem 2rem 6rem;
}


/* Bild selbst */

.bild-rechts figure.image img,
.bild-links figure.image img {
    display: block;
    width: 100%;
    height: auto;

    transition:
        transform .6s cubic-bezier(.16, 1, .3, 1);
}


/* ==================================================
   HINTERGRUNDFLÄCHEN
================================================== */

.bild-rechts::before,
.bild-links::before {
    content: "";
    position: absolute;
    z-index: 0;

    top: 2rem;
}


/* Fläche rechts – Webdesign */

.bild-rechts {
    margin-right: 1.5rem;
}

.bild-rechts::before {
    left: 2rem;
    right: -1.5rem;
    bottom: -1.5rem;

    background:
        color-mix(in srgb, var(--rot) 12%, transparent);

    border-radius: 3rem 1rem 6rem 2rem;

    transition:
        right .7s cubic-bezier(.16, 1, .3, 1),
        bottom .7s cubic-bezier(.16, 1, .3, 1);
}
.support .bild-rechts{
  left:1.5rem;
  background: color-mix(in srgb, var(--rot) 10%, transparent);
  border-radius: 1rem 3rem 6rem 2rem;
}
.support .info-badge{
  top: -4.5rem;
}

/* Fläche links – TYPO3 */

.bild-links {
    margin-left: 1.5rem;
}

.bild-links::before {
    left: -1.5rem;
    right: 2rem;
    bottom: -1.5rem;

    background: var(--beige);

    border-radius: 1rem 2rem 3rem 6rem;

    transition:
        left .7s cubic-bezier(.16, 1, .3, 1),
        bottom .7s cubic-bezier(.16, 1, .3, 1);
}

.typo3-section .bild-links::before {
      background: var(--hellgrau);
}


/*+++++++++++++++++++++++++++Barrierefreiheit Infobox+++++++++++++++++++++++++++*/

/* Kleine überlagerte Karte */
.section-barrierefreiheit .accessibility-card {
    position: absolute;
    right: -3.25rem;
    bottom: 1.0rem;
    z-index: 3;

    background: #fff;
    padding: 1rem 1.2rem;
    border-radius: 1rem;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.10);
    max-width: 240px;
}

.section-barrierefreiheit .accessibility-card-title {
    margin: 0 0 0.65rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--rot);
}

.section-barrierefreiheit .accessibility-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.section-barrierefreiheit .accessibility-card-list li {
    position: relative;
    margin-bottom: 0.45rem;
    padding-left: 1.1rem;
    font-size: 0.92rem;
    line-height: 1.45;
    color: #4b4b4b;
}

.section-barrierefreiheit .accessibility-card-list li:last-child {
    margin-bottom: 0;
}

.section-barrierefreiheit .accessibility-card-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--rot);
    font-weight: 700;
}


/* ==================================================
   HOVER – NUR AUF GERÄTEN MIT ECHTER MAUS
================================================== */

@media (min-width: 992px) {

    .bild-rechts:hover figure.image img,
    .bild-links:hover figure.image img {
        transform: scale(1.035);
    }

    .bild-rechts:hover::before {
        right: -1.5rem;
        bottom: .25rem;
    }

    .bild-links:hover::before {
        left: -1.5rem;
        bottom: .25rem;
    }
  .webdesign-intro-text {
        padding-right: clamp(2rem, 5vw, 6rem);
    }

    .typo3-content {
        padding-left: 2rem;
    }
}


/* ==================================================
   TABLET / SMARTPHONE
================================================== */
@media (min-width: 768px) and (max-width: 991.98px) {

    .bild-rechts,
    .bild-links {
        width: 100%;
        max-width: 620px;
        margin: 2rem auto 3rem;
    }

}
@media (max-width: 991.98px) {

    .bild-rechts,
    .bild-links {
        margin: 2rem 0 3rem;
    }


    /* ----- Bild rechts ----- */

    .bild-rechts figure.image {
        width: calc(100% - .75rem);
        margin-right: .75rem;

        /* Radius ausdrücklich erhalten */
        border-radius: 2rem 1rem 4rem 2rem;
    }

    .bild-rechts::before {
        left: .75rem;
        right: 0;
        top: 1rem;
        bottom: -.75rem;

        border-radius: 2rem 1rem 4rem 2rem;
    }


    /* ----- Bild links ----- */

    .bild-links figure.image {
        width: calc(100% - .75rem);
        margin-left: .75rem;

        /* Radius ausdrücklich erhalten */
        border-radius: 1rem 2rem 2rem 4rem;
    }

    .bild-links::before {
        left: 0;
        right: .75rem;
        top: 1rem;
        bottom: -.75rem;

        border-radius: 1rem 2rem 2rem 4rem;
    }
}
@media (max-width: 767.98px) {
        .intro-cta {
        display: inline;
        position: relative;
        max-width: 100%;
        padding-right: 0;
        line-height: 1.5;
    }

    .intro-cta span {
        position: static;
        display: inline-block;
        margin-left: .35rem;
        transform: none;
        transition: transform .25s ease;
    }

    .intro-cta:hover span {
        transform: translateX(.3rem);
    }

    .intro-cta::after {
        display: none;
    }

    .bild-rechts,
    .bild-links {
        width: calc(100% - 1rem);
        margin-top: 2rem;
        margin-bottom: 3rem;
    }

    /* Bild rechts → Platz rechts für Rosa */
    .bild-rechts {
        margin-right: 1rem;
        margin-left: 0;
    }

    .bild-rechts::before {
        
        top: .75rem;
       
    }
  .section-barrierefreiheit .accessibility-card {
        right: .75rem;
        top: 1rem;
        max-width: min(240px, calc(100% - 1.5rem));
    }


    /* Bild links → Platz links für Beige */
    .bild-links {
        margin-left: 1rem;
        margin-right: 0;
    }

    .bild-links::before {
        
        top: 1rem;
       
    }

    .bild-rechts figure.image {
        border-radius: 2rem 1rem 4rem 2rem;
    }

    .bild-links figure.image {
        border-radius: 1rem 2rem 2rem 4rem;
    }
}

/* ==================================================
   REDUZIERTE BEWEGUNG
================================================== */

@media (prefers-reduced-motion: reduce) {

    .bild-rechts figure.image img,
    .bild-links figure.image img,
    .bild-rechts::before,
    .bild-links::before {
        transition: none;
    }
}
/*=========================Parallax=============================*/
.parallax1{
  background-image: url("/fileadmin/Media/Parallax_Bilder/webdesign_overlay2.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 600px;
  margin: 0 0 5rem 0;
  display: flex;
  align-items: center;
  /*filter: blur(6px);*/
}

.parallax h2{
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.42);
  font-size: 3rem;
}
.hosting-section {
    padding: clamp(4rem, 7vw, 1rem) 0;
  position: relative;
  margin-top: 0;
}
.hosting-section::before {
    content: "";
    position: absolute;

    left: 0;
    top: -125px;

    width: 100%;
    height: 60px;

    background-image: url("/fileadmin/Media/grafiken/header-wave.svg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
    transform: rotate(180deg);
    pointer-events: none;
}
.section-hosting {
    max-width: 36rem;
}

/* Hauptüberschrift */
.section-hosting h2 {
    margin-bottom: 1.4rem;

    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 600;
    line-height: 1.08;
}

.section-hosting h2 span {
    color: var(--rot);
}


/* Text */
.section-hosting p:not(.section-kicker) {
    line-height: 1.65;
}


/* Bild */

.support-image {
    position: relative;
}

.support-image-inner {
    overflow: hidden;
    border-radius: 1.8rem;
}

.support-image-inner img {
    display: block;
    width: 100%;

    transition:
        transform 0.5s ease,
        filter 0.5s ease;
}

.support-image:hover .support-image-inner img {
    transform: scale(1.04);
}

/* Infobox oben links */
.support .info-badge {
    position: absolute;

    left: -2rem;
    top: -4.5rem;
    right: auto;
    bottom: auto;

    z-index: 3;

    width: max-content;
    max-width: 240px;

    padding: 1.1rem 1.35rem;

    background: #fff;
    border-radius: 1rem;

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.10);
   transform: rotate(-2deg) translateY(4px);
    transform-origin: center;
   transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}
.support:hover .info-badge {
    transform: rotate(-2deg) translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.info-badge-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.info-badge-list li {
    position: relative;
    margin-bottom: 0.45rem;
    padding-left: 1.2rem;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #4b5563;
}

.info-badge-list li:last-child {
    margin-bottom: 0;
}

.info-badge-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--rot);
    font-weight: 700;
}
.info-badge-title{
  color: var(--rot);
}

/*-----------Section cta auf rot----------*/
.contact-cta {
    background: var(--rot);
    color: #fff;
    padding: clamp(3rem, 6vw, 7rem) 0;
}

.contact-cta-small {
    display: block;
    margin-bottom: .75rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .8;
}

.contact-cta h2 {
    color: #fff;
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 650;
    margin-bottom: .7rem;
}

.contact-cta p {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    margin: 0;
    opacity: .9;
}

a.contact-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 1rem;

    background: #fff;
    color: var(--rot);

    padding: 1rem 1.6rem;
    border-radius: 50rem;
    border: 2px solid #fff;
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;

    transition:
        transform .25s ease,
        background-color .25s ease,
        color .25s ease;
}

a.contact-cta-button span {
    font-size: 1.4rem;
    line-height: 1;
     transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

a.contact-cta-button:hover,
a.contact-cta-button:focus-visible {
    background: transparent;
    color: #fff;
    transform: translateY(-2px);
}

a.contact-cta-button:hover span {
    transform: translateX(.6rem) scale(1.12);;
}

/*--------------------------------Seite Barrierefreiheit------------------------------------------*/
.row.barrierfreiheit-intro{
  --bs-gutter-x: 7rem;
}

.accessibility-intro {
    max-width: 720px;
    padding-right: clamp(1rem, 3vw, 3rem);
}
 .statement {
    position: relative;

    margin-top: 1.8rem;
    padding-left: 1.5rem;

    font-size: 1.15rem;
}

.statement::before {
    content: "";
    position: absolute;

    left: 0;
    top: .15rem;
    bottom: .15rem;

    width: 3px;

    background: var(--rosa);
    border-radius: 10px;
}


/* ==================================================
   BARRIEREFREIHEIT – KLEINE HÜRDEN
================================================== */

.barrier-card {
    position: absolute;
    max-width: 520px;
    margin: 2rem auto;
    z-index: 10;
}

/* versetzte rote Fläche dahinter */
.barrier-card-bg {
    position: absolute;
    z-index: 0;

    top: 1.5rem;
    left: -1.25rem;
    right: 1.25rem;
    bottom: -1.25rem;

    background: color-mix(
        in srgb,
        var(--rot) 75%,
        var(--rosa)
    );

    border-radius: 2rem 1.5rem 3rem 1.5rem;

    transform: rotate(-2deg);
    transition:
        transform .6s cubic-bezier(.16, 1, .3, 1);
}


/* eigentliche Karte */
.barrier-card-inner {
    position: relative;
    z-index: 1;

    padding: clamp(2rem, 4vw, 3rem);

    background: var(--hellrosa);

    border-radius: 1.5rem 2.5rem 2rem 1.5rem;

    box-shadow:
        0 18px 45px rgba(74, 74, 74, 0.10);

    transform: rotate(.6deg);
    transition:
        transform .5s cubic-bezier(.16, 1, .3, 1),
        box-shadow .5s ease;
}


/* Inhalt wieder gerade */
.barrier-card-inner > * {
    transform: rotate(-.6deg);
}


/* Überschrift */
.barrier-card-header {
    margin-bottom: 1rem;
}

.barrier-card-line {
    display: block;

    width: 3rem;
    height: 3px;

    margin-bottom: 1rem;

    background: var(--rot);
    border-radius: 50rem;
}

.barrier-card h3 {
    margin: 0;

    color: var(--anthrazit);

    font-size: clamp(1.4rem, 2.4vw, 1.7rem);
    line-height: 1.1;

    text-transform: uppercase;
    letter-spacing: .02em;
}


/* Einleitung */
.barrier-card-intro {
    margin: 0 0 1.8rem;

    font-size: 1rem;
    line-height: 1.55;
}


/* Liste */
.barrier-list {
    list-style: none;

    padding: 0;
    margin: 0;

    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}


/* einzelne Zeile */
.barrier-list li {
    display: grid;
    grid-template-columns: 3.3rem 1fr;
    gap: 1rem;
    align-items: center;
}


/* Icon-Kreis */
.barrier-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 3.3rem;
    height: 3.3rem;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        color-mix(in srgb, var(--rot) 10%, #fff);

    color: var(--rot);

    font-size: 1.45rem;
    transition:
        transform .3s cubic-bezier(.16, 1, .3, 1),
        background-color .3s ease;
}


/* Aa etwas anders */
.barrier-icon-text {
    font-size: 1.25rem;
    font-weight: 600;
}


/* Titel der einzelnen Hürde */
.barrier-list strong {
    display: block;

    margin-bottom: .1rem;

    color: var(--anthrazit);

    font-size: 1.05rem;
    line-height: 1.25;
}


/* Erklärung */
.barrier-list li div > span {
    display: block;

    color: var(--anthrazit);

    font-size: .92rem;
    line-height: 1.35;

    opacity: .85;
}

@media (hover: hover) and (pointer: fine) {

    .barrier-card:hover .barrier-card-inner {
        transform:
            rotate(.6deg)
            translateY(-8px);

        box-shadow:
            0 25px 55px rgba(74, 74, 74, 0.16);
    }

    .barrier-card:hover .barrier-card-bg {
        transform:
            rotate(-3.5deg)
            translate(-5px, 6px);
    }
   .barrier-card:hover .barrier-icon {
        transform: scale(1.08);

        background:
            color-mix(in srgb, var(--rot) 16%, #fff);
    }
}

/*---------------------2. Absatz Accessibility Hürden------------------------------*/
/* ==================================================
   Wen betrifft Barrierefreiheit?
   ================================================== */

.section-wen-betrifft {
    position: relative;
    z-index: 1;

    margin-top: 2rem;
    padding-top: clamp(4rem, 6vw, 5.5rem);
    padding-bottom: clamp(5rem, 7vw, 6.5rem);
  
    background: var(--hellbeige);
}


/* Welle oben */

.section-wen-betrifft::before {
    content: "";
    position: absolute;
    z-index: -1;

    top: -3rem;
    left: 0;

    width: 100%;
    height: 3.1rem;

    background: var(--hellbeige);

    clip-path: polygon(
        0 55%,
        8% 48%,
        18% 38%,
        30% 32%,
        42% 35%,
        55% 45%,
        68% 52%,
        80% 48%,
        90% 37%,
        100% 28%,
        100% 100%,
        0 100%
    );
}


/* Welle unten */

.section-wen-betrifft::after {
    content: "";
    position: absolute;
    z-index: -1;

    bottom: -3rem;
    left: 0;

    width: 100%;
    height: 3.1rem;

    background: var(--hellbeige);

    clip-path: polygon(
        0 0,
        100% 0,
        100% 38%,
        90% 45%,
        78% 58%,
        65% 64%,
        52% 60%,
        40% 50%,
        28% 43%,
        15% 46%,
        0 58%
    );
}

.section-wen-betrifft .accessibility-groups {
    margin-top: 2rem;
}

.accessibility-group > .frame {
    position: relative;
    height: 100%;
    padding-bottom: 1.5rem;
}


/* Icon-Grundgestaltung */

.accessibility-group > .frame::before {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 4rem;
    height: 4rem;
    margin-bottom: 1.2rem;

    border-radius: 50%;

    background: color-mix(in srgb, var(--rot) 9%, #fff);
    color: var(--rot);

    font-family: "bootstrap-icons";
    font-size: 1.65rem;
    font-weight: normal;
    line-height: 1;

    transition:
        transform .35s cubic-bezier(.16, 1, .3, 1),
        background-color .35s ease;
}


/* Icons */

.frame-accessibility-icon-eye::before {
    content: "\f341";
}
.frame-accessibility-icon-ear::before {
   content: "\F689";
}

.frame-accessibility-icon-motor::before {
    content: "\F8FB";
}
.frame-accessibility-icon-understand::before {
    content: "\F46B";
}
.frame-accessibility-icon-age::before {
    content: "\F4E1";
}
.frame-accessibility-icon-situation::before {
    content: "\F292";
}



/* Überschrift */

.accessibility-group h3 {
    margin: 0 0 .65rem;

    color: var(--rot);
    font-size: clamp(1.45rem, 2vw, 1.8rem);
    font-weight: 600;
}


/* Text */

.accessibility-group p {
    max-width: 20rem;
    margin: 0;

    line-height: 1.55;
}


/* kleine Linie unten */

.accessibility-group > .frame::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: 0;

    width: 2rem;
    height: 2px;

    background: var(--rosa);
    border-radius: 50rem;

    transition: width .35s cubic-bezier(.16, 1, .3, 1);
}


/* Hover */

@media (hover: hover) and (pointer: fine) {

    .accessibility-group:hover > .frame::before {
        transform: translateY(-5px) scale(1.06);

        background:
            color-mix(in srgb, var(--rot) 15%, #fff);
    }

    .accessibility-group:hover > .frame::after {
        width: 5rem;
    }
}


/* Reduced Motion */

@media (prefers-reduced-motion: reduce) {

    .accessibility-group > .frame::before,
    .accessibility-group > .frame::after {
        transition: none;
    }

    .accessibility-group:hover > .frame::before {
        transform: none;
    }
}

/* ==================================================
   Vorteile Barrierefreiheit
   ================================================== */

.benefits-grid {
    counter-reset: benefit;
}

.benefit-item {
    counter-increment: benefit;
}

.benefit-item > .frame {
    position: relative;

    height: 100%;
    min-height: 230px;

    padding:
        clamp(2.5rem, 4vw, 3.5rem)
        clamp(1rem, 3vw, 2.5rem)
        clamp(2rem, 3vw, 2.5rem)
        0;

    overflow: hidden;
}


/* große Nummer im Hintergrund */

.benefit-item > .frame::before {
    content: counter(benefit);

    position: absolute;
    z-index: 0;

    top: -.3rem;
    right: 1rem;

    color: color-mix(in srgb, var(--rot) 9%, transparent);

    font-size: clamp(5rem, 9vw, 8rem);
    font-weight: 700;
    line-height: 1;

    pointer-events: none;

    transition:
        color .35s ease,
        transform .4s cubic-bezier(.16, 1, .3, 1);
}


/* Inhalte über die Nummer legen */

.benefit-item > .frame > * {
    position: relative;
    z-index: 1;
}


/* Überschrift */

.benefit-item h3 {
    margin: 0 0 1rem;

    color: var(--rot);

    font-size: clamp(1.5rem, 2vw, 1.9rem);
    font-weight: 600;
    line-height: 1.2;
}


/* Text */

.benefit-item p {
    max-width: 31rem;
    margin: 0;

    font-size: 1.05rem;
    line-height: 1.65;
}


/* feine Trennlinie */

.benefit-item > .frame::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 20%;
    height: 1px;

    background:
        color-mix(in srgb, var(--anthrazit) 16%, transparent);
}


/* Hover nur auf Geräten mit echter Maus */

@media (hover: hover) and (pointer: fine) {

    .benefit-item:hover > .frame::before {
        color: color-mix(in srgb, var(--rot) 14%, transparent);
        transform: translateY(-5px);
    }
}

/*-----------------------------Accessibility principles----------------*/
.frame-accessibility-checklist {
    margin-top: 1.75rem;
}

.frame-accessibility-checklist h3 {
    position: relative;

    margin: 1.25rem 0 .2rem;
    padding-left: 2rem;

    color: var(--anthrazit);

    font-size: 1.25rem;
    font-weight: 650;
    line-height: 1.3;
}


/* kleines Webconsult-Häkchen */

.frame-accessibility-checklist h3::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: -.05rem;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 1.5rem;
    height: 1.5rem;

    border-radius: 50%;

    background: var(--hellrosa);
    color: var(--rot);

    font-size: .95rem;
    font-weight: 700;
}


.frame-accessibility-checklist h3:first-child {
    margin-top: 0;
}


.frame-accessibility-checklist h3 + p {
    margin: 0;
    padding-left: 2rem;

    color: var(--anthrazit);

    
    line-height: 1.5;
}


/* sehr dezente Trennung */

.frame-accessibility-checklist h3 + p:not(:last-child) {
    padding-bottom: 0;

   /* border-bottom: 1px solid
        color-mix(in srgb, var(--anthrazit) 10%, transparent);*/
}
/* =========================================================
   Barrierefreiheit in der Praxis
   ========================================================= */

.accessibility-practice-image-wrap {
    position: relative;
   
}


/* rosa Fläche */

.accessibility-practice-image-wrap::before {
    content: "";
    position: absolute;

     top: 3.5rem;
    left: 2.5rem;
    right: 0.5rem;
    bottom: -0.75rem;

    background: var(--hellrosa);

    border-radius: 2rem 1.5rem 4rem 1.5rem;

    transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}


/* Das ist unsere "Maske" */

.accessibility-practice-image {
    position: relative;
    z-index: 1;

    overflow: hidden;

    border-radius: 2rem 1.5rem 4rem 1.5rem;
}


/* figure darf sich innerhalb der Maske bewegen */

.accessibility-practice-image figure {
    margin: 0;

    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}


/* Bild braucht jetzt KEINE eigene Rundung mehr */

.accessibility-practice-image img {
    display: block;
    width: 100%;
    height: auto;

    border-radius: 0;
}
/* dezenter Hover */

@media (hover: hover) and (pointer: fine) {

    .accessibility-practice-image-wrap:hover figure {
        transform: scale(1.025);
    }

    .accessibility-practice-image-wrap:hover::before {
        transform: translate(5px, 5px);
    }
}
/*--------------------Kleine Box unter dem Bild----------------*/
.accessibility-practice-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: .9rem;
    margin-top: 1.8rem;

    color: var(--rot);

    font-size: .78rem;
    font-weight: 650;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.accessibility-practice-visual span {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.accessibility-practice-visual span:not(:last-child)::after {
    content: "";
    width: 1.5rem;
    height: 1px;
    background: var(--rosa);
}


/* =========================================================
   Seite TYPO3
   ========================================================= */
.typo3 .bild-rechts{
    padding-top: 0;
    padding-bottom: 0;
    margin-top:0;
    margin-right:0;
}
.bild-rechts figure {
    max-width: 540px;
    margin-left: auto;
    margin-right: 1.5rem;
}

.bild-rechts .image-wrap {
    position: relative;
    display: inline-block;
}

.bild-rechts .image-wrap::before {
    content: "";
    position: absolute;
    right: -2rem;
    top: 2rem;
    width: 88%;
  height: 85%;
  background: var(--hellbeige);
  border-radius: 1.5rem 3rem 5rem 1rem;
    z-index: 0;
}

.bild-rechts .image-wrap img,
.bild-rechts .image-wrap .illustration {
    position: relative;
    z-index: 1;
}
.typo3 .text-content {
    /*max-width: 620px;*/
}

.typo3 .bild-rechts::before{
  background:transparent;
}
.typo3 .bild-rechts figure {
    max-width: 500px;
    margin-left: auto;
}
.typo3 .bild-rechts img {
    max-width: 400px;
    width: 100%;  
    height:auto;
}

.typo3-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.55rem;
    margin-top: 2.25rem;
}

.typo3-fact {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.typo3-fact i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    background: rgba(214, 48, 73, .08);
    color: var(--rot);
    font-size: 1.25rem;
}

.typo3-fact strong,
.typo3-fact span {
    display: block;
}

.typo3-fact strong {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
}

.typo3-fact span {
    margin-top: .15rem;
    font-size: .9rem;
    opacity: .7;
}
/*--------------------------------flip-cards-----------------------------*/
/*---Für den Container drum herum------------------------*/
.typo3-flipcards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3.5rem;
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
/*------------------die einzelnen Cards--------------*/
.flip-card {
    min-height: 230px;
    perspective: 1200px;
    border-radius: 1.25rem;
}

.flip-card__inner {
    position: relative;
    width: 100%;
    min-height: 230px;

    transform-style: preserve-3d;

    transition:
        transform .65s cubic-bezier(.4, 0, .2, 1);
}


/* Desktop Hover + Tastatur */

.flip-card:hover .flip-card__inner,
.flip-card:focus .flip-card__inner {
    transform: rotateY(180deg);
}


/*
 * Vorder- und Rückseite
 */

.flip-card__front,
.flip-card__back {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 2rem 1.5rem;

    border-radius: 1.25rem;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, .07);
}


/*
 * Vorderseite
 */

.flip-card__front {
    flex-direction: column;

    background: #fff;

    text-align: center;
}

.flip-card__front h3 {
    margin: 1.5rem 0 .75rem;

    font-size: 1.25rem;
    font-weight: 600;

    color: var(--bs-heading-color);
}


/*
 * Icon
 */

.flip-card__icon {
    width: 68px;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(0,0,0, .6);

    color: #fff;

    font-size: 1.8rem;

    transition:
        transform .3s ease,
        background-color .3s ease;
}

.flip-card:hover .flip-card__icon {
    transform: scale(1.08);
}


/*
 * kleiner Hinweis
 */

.flip-card__hint {
    margin-top: .55rem;

    font-size: .85rem;
    color: var(--rot);

    opacity: .75;
}


/*
 * Rückseite
 */

.flip-card__back {
    transform: rotateY(180deg);

    background: var(--rot);
    color: #fff;

    text-align: center;
}

.flip-card__back-inner {
    max-width: 280px;
}

.flip-card__back h3 {
    margin: 0 0 .75rem;

    font-size: 1.15rem;
    font-weight: 600;

    color: #fff;
}

.flip-card__text {
    font-size: 1rem;
    line-height: 1.55;
}


/*
 * Fokus sichtbar machen
 */

.flip-card:focus-visible {
    outline: 2px solid var(--rot);
    outline-offset: 5px;
}

@media (hover: none) {

    .flip-card {
        min-height: auto;
        perspective: none;
    }

    .flip-card__inner {
        min-height: auto;
        transform: none !important;
    }

    .flip-card__front,
    .flip-card__back {
        position: relative;
        inset: auto;

        transform: none;

        backface-visibility: visible;
        -webkit-backface-visibility: visible;
    }

    .flip-card__front {
        border-radius: 1.25rem 1.25rem 0 0;

        padding-bottom: 1.25rem;
    }

    .flip-card__back {
        border-radius: 0 0 1.25rem 1.25rem;

        padding-top: 1.5rem;
    }

    .flip-card__hint {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {

    .flip-card__inner,
    .flip-card__icon {
        transition: none;
    }
}
/*-----------------Section TYPO3 Leistungen--------------------------------*/

.section-typo3-leistungen {
    position: relative;
    background: #fff;
}
.section-typo3-leistungen .col-lg-5 {
    padding-right: 2.5rem;
}

.section-typo3-leistungen .col-lg-7 {
    padding-left: 2.5rem;
}

.typo3-services-card {
    position: relative;
    z-index: 1;

    background: var(--rot);
    border-radius: 2rem;

    padding: 3rem 3.25rem;

    box-shadow: 0 18px 45px rgba(0, 0, 0, .08);
}


/* rote versetzte Fläche dahinter */
.typo3-services-card::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: 1.4rem;
    left: -1.3rem;
    right: 1.2rem;
    bottom: -1.3rem;

    background: var(--blassgrau);

    border-radius: 2rem;

    transform: rotate(-1.5deg);
}


.typo3-services-kicker {
    position: relative;

    margin: 0 0 2rem;

    font-size: 1.05rem;
    font-weight: 600;

    letter-spacing: .08em;

    color: var(--bs-heading-color);
}


.typo3-services-kicker::before {
    content: "";

    display: block;

    width: 46px;
    height: 3px;

    margin-bottom: 1rem;

    background: var(--rot);
}


.typo3-services-list {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
}


.typo3-service {
    display: flex;
    align-items: flex-start;

    gap: 1.15rem;
   transition: transform .25s ease;
}


.typo3-service-icon {
    flex: 0 0 52px;

    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, .55);

    color: var(--rot);

    font-size: 1.3rem;
   transition:
        transform .25s ease,
        background-color .25s ease;
}


.typo3-service-content h3 {
    margin: 0 0 .15rem;

    font-size: 1.05rem;
    font-weight: 600;
   transition: font-weight .25s ease;
}
/*-------------------Hover Effekt------*/
.typo3-service:hover {
    transform: translateX(.4rem);
}

.typo3-service:hover .typo3-service-icon {
    transform: scale(1.08);
    background: #fff;
}

.typo3-service:hover .typo3-service-content h3 {
     font-weight: 600;
}


.typo3-service-content p {
    margin: 0;

    font-size: .95rem;
    line-height: 1.45;

    color: rgba(33, 37, 41, .65);
}

@media (prefers-reduced-motion: reduce) {
    .typo3-service,
    .typo3-service-icon {
        transition: none;
    }

    .typo3-service:hover {
        transform: none;
    }
}

/*------Section CMS-Vergliech        */
.section-cms-vergleich {
    position: relative;
    background: #fff;
}

.cms-intro {
    max-width: 760px;
}
.col-lg-4.cms {
  position: relative;
}
.cms-vergleich-content{
  position: absolute;
    width: 342px;   
    z-index: 30;
    top: -157px;
    left: -21px;
}

/* Cards */

.cms-card {
    position: relative;

    padding: 2.5rem 2.75rem;

    background: #fff;

    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 1.5rem;

    box-shadow: 0 14px 35px rgba(0, 0, 0, .06);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.cms-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 2.75rem;
    right: 2.75rem;

    height: 4px;

    border-radius: 0 0 4px 4px;
}


/* TYPO3 etwas markanter */
.cms-card-typo3::before {
    background: var(--rot);
}


/* WordPress neutraler */
.cms-card-wordpress::before {
    background: #4b5563;
}


.cms-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .09);
}


/* Kopf */

.cms-card-head {
    margin-bottom: 1.75rem;
}

.cms-label {
    display: inline-block;

    margin-bottom: .75rem;

    font-size: .85rem;
    font-weight: 700;

    letter-spacing: .08em;

    color: var(--rot);
}

.cms-card-wordpress .cms-label {
    color: #4b5563;
}

.cms-card h3 {
    margin: 0;

    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;

    color: var(--bs-heading-color);
}


/* Liste */

.cms-list {
    list-style: none;

    margin: 0;
    padding: 0;
}

.cms-list li {
    position: relative;

    padding-left: 2rem;
    margin-bottom: 1rem;

    line-height: 1.45;
}

.cms-list li:last-child {
    margin-bottom: 0;
}

.cms-list li::before {
    content: "\F26E";

    position: absolute;
    left: 0;
    top: .05rem;

    font-family: "bootstrap-icons";

    color: var(--rot);

    font-size: 1rem;
}

.cms-card-wordpress .cms-list li::before {
    color: #4b5563;
}


/* Sicherheitsblock */

.cms-security {
    display: flex;

    gap: 1.5rem;

    padding: 2rem 2.25rem;

    background: #faf1f3;

    border-radius: 1.25rem;
}

.cms-security-icon {
    flex: 0 0 56px;

    width: 56px;
    height: 56px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #fff;

    color: var(--rot);

    font-size: 1.4rem;
}

.cms-security h3 {
    margin: 0 0 .75rem;

    font-size: 1.2rem;
    font-weight: 600;
}

.cms-security p {
    margin-bottom: .8rem;
}

.cms-security p:last-child {
    margin-bottom: 0;
}


/* Abschluss */

.cms-bottom-note {
    display: flex;
    align-items: center;
    gap: 1rem;

    padding: 1.25rem 1.5rem;

    border-left: 4px solid var(--rot);

    background: rgba(214, 48, 73, .04);

    border-radius: 0 .75rem .75rem 0;
}

.cms-bottom-note strong {
    white-space: nowrap;

    color: var(--rot);
}

.cms-bottom-note span {
    color: rgba(33, 37, 41, .75);
}


/* Responsive */

@media (max-width: 767.98px) {

    .cms-card {
        padding: 2rem 1.5rem;
    }

    .cms-security {
        flex-direction: column;
    }

    .cms-bottom-note {
        flex-direction: column;
        align-items: flex-start;

        gap: .35rem;
    }

    .cms-bottom-note strong {
        white-space: normal;
    }

}
/*++++++++++++++++++++++++++++++++++SEite WEbdesign++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.intro-webdesign {
    position: relative;
}

.intro-webdesign h2 {
    color: var(--rot);
    margin-bottom: 1.5rem;
    max-width: 12ch;
}
.intro-webdesign .bild-rechts {
    margin-right: 0;
    position: relative;
    z-index: 1;
}
.intro-webdesign .bild-rechts figure.image img{
  width: 85%;
}
.intro-webdesign .bild-rechts::before {
    top: 22%;
    left: 14%;
    right: 13%;
    bottom: 8%;

    background: color-mix(
        in srgb,
        var(--rot) 9%,
        transparent
    );

    border-radius: 45% 55% 48% 52% / 40% 45% 55% 60%;
}

.intro-webdesign .bild-rechts::after {
    content: "";
    position: absolute;
    z-index: 0;

    width: 95px;
    aspect-ratio: 1;
    right: 10%;
    top: 9%;

    background: 
color-mix(in srgb, var(--gruen) 14%, transparent);
    border-radius: 50%;
}

.intro-webdesign ul, .section-inhalt-pflege ul{
  list-style: none;
  padding-left:0;
}
.intro-webdesign ul li, .section-inhalt-pflege ul li {
  padding-left: 1rem;
  position: relative;
}
.intro-webdesign ul li::before, .section-inhalt-pflege ul li::before{
   content: "";
    position: absolute;
    left: 0;
    top: .72em;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--gruen);
    transform: translateY(-50%);
}

/* ==================================================
   WEBDESIGN – WAS GUTES WEBDESIGN AUSMACHT
================================================== */

.section-webdesign-faktoren {   
    position: relative;
}

.section-webdesign-faktoren h2 {
    color: var(--rot);
    margin-bottom: 1.25rem;
}

.section-webdesign-faktoren .section-intro {
    max-width: 780px;
    margin: 0 auto;
}


/* Karten */

.webdesign-faktor {
    position: relative;
    height: 100%;
    padding: 2rem 1.75rem;
    background: rgba(255, 255, 255, .72);
    border-radius: 1.5rem;
  min-height: 280px;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.webdesign-faktor:hover {
    transform: translateY(-6px);
    background: #fff;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .06);
}


/* Icon */

.webdesign-faktor-icon {
    width: 3.25rem;
    height: 3.25rem;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 1.25rem;

    border-radius: 50%;

    background:
        color-mix(in srgb, var(--rot) 10%, transparent);

    color: var(--rot);

    font-size: 1.45rem;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.webdesign-faktor:hover .webdesign-faktor-icon {
    background:
        color-mix(in srgb, #aec600 18%, transparent);

    color: #879900;

    transform: scale(1.06);
}


/* Texte */

.webdesign-faktor h3 {
    font-size: 1.25rem;
    margin-bottom: .65rem;
    color: var(--dunkelgrau);
}

.webdesign-faktor p {
    margin-bottom: 0;
    line-height: 1.65;
}


/* Kleine grüne Akzentlinie */

.webdesign-faktor::after {
    content: "";
    position: absolute;

    left: 1.75rem;
    bottom: 1.25rem;

    width: 0;
    height: 2px;

    background: #aec600;

    transition: width .35s ease;
}

.webdesign-faktor:hover::after {
    width: 3rem;
}

/* ==================================================
   RESPONSIVE DESIGN
================================================== */

.section-responsive {
    position: relative;
    background: #fff;
}

.section-responsive h2 {
    color: var(--rot);
    margin-bottom: 1.5rem;
}

.section-responsive > .container {
    position: relative;
}


/* ==================================================
   BILD LINKS – RESPONSIVE VARIANTE
================================================== */

.section-responsive .bild-links {
    margin-left:0;
}
.section-responsive .bild-links figure.image img{
  max-width: 82%;
}

.section-responsive .bild-links::before {
    left: -1.5rem;
    right: 14%;
    top: 18%;
    bottom: 8%;

    background:
        color-mix(in srgb, var(--rot) 8%, transparent);

    border-radius:
        46% 54% 42% 58%
        / 44% 40% 60% 56%;
}


/* Kleiner grüner Akzent */

.section-responsive .bild-links::after {
    content: "";
    position: absolute;
    z-index: 0;

    width: 95px;
    aspect-ratio: 1;

    left: -3%;
    bottom: 8%;

    background:
        color-mix(in srgb, #aec600 14%, transparent);

    border-radius: 50%;
}


.section-responsive .bild-links figure {
    position: relative;
    z-index: 1;
}


/* ==================================================
   RESPONSIVE PUNKTE
================================================== */

.responsive-points {
    margin-top: 2rem;
    display: grid;
    gap: 1.4rem;
}

.responsive-point {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.responsive-point-icon {
    flex: 0 0 2.5rem;

    width: 2.5rem;
    height: 2.5rem;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        color-mix(in srgb, var(--rot) 10%, transparent);

    color: var(--rot);

    font-size: 1.05rem;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.responsive-point:hover .responsive-point-icon {
    background:
        color-mix(in srgb, #aec600 18%, transparent);

    color: #879900;

    transform: translateY(-2px);
}

.responsive-point h3 {
    margin: 0 0 .25rem;
    font-size: 1.15rem;
}

.responsive-point p {
    margin: 0;
    line-height: 1.55;
}


/* ==================================================
   INDIVIDUELL STATT AUSTAUSCHBAR
================================================== */

.section-individuell {
   
    position: relative;
}
.section-individuell .col-lg-5 {
    display: flex;
    align-items: center;
}


.section-individuell h2 {
    color: var(--rot);
    margin-bottom: 1.5rem;
    max-width: 30ch;
}

.section-individuell p {
    max-width: 720px;
}


/* ==================================================
   STATEMENTS
================================================== */

.individuell-statements {
   border-left: 1px solid
        color-mix(in srgb, var(--rot) 20%, transparent);

    padding-left: 1.3rem;
}

.individuell-statement {
    display: flex;
    align-items: center;
    gap: .8rem;

    font-size: 1.2rem;
    font-weight: 500;
    line-height: 2.0;
}


/* Kleiner Akzent */

.individuell-marker {
    flex: 0 0 .55rem;
    width: .55rem;
    height: .55rem;

    border-radius: 50%;
    background: var(--gruen);
}


/* etwas Bewegung beim Hover */

.individuell-statement {
    transition: transform .3s ease;
}

.individuell-statement:hover {
    transform: translateX(.35rem);
}


/* ==================================================
   DESIGN UND TECHNIK
================================================== */

.section-design-technik {
    position: relative;
    background: #fff;
}

.section-design-technik h2 {
    color: var(--rot);
    margin-bottom: 1.5rem;
    max-width: 16ch;
}


/* ==================================================
   GRID RECHTS
================================================== */

.technik-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 2.5rem;
}


/* ==================================================
   EINZELNE PUNKTE
================================================== */

.technik-item {
    position: relative;
    padding-top: 1.15rem;

    border-top: 1px solid
        color-mix(in srgb, var(--rot) 18%, transparent);
}

.technik-icon {
    width: 2.75rem;
    height: 2.75rem;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 1rem;

    border-radius: 50%;

    background:
        color-mix(in srgb, var(--rot) 10%, transparent);

    color: var(--rot);

    font-size: 1.2rem;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.technik-item h3 {
    margin-bottom: .5rem;
    font-size: 1.15rem;
}

.technik-item p {
    margin: 0;
    line-height: 1.55;
}
.technik-item h3 a {
    color: var(--rot);
    text-decoration: none;
    position: relative;
}

.technik-item h3 a::after {
    content: "→";
    display: inline-block;
    margin-left: .35rem;
    font-size: .9em;
    transition: transform .2s ease;
}

/* ==================================================
   HOVER
================================================== */

.technik-item:hover .technik-icon {
    background:
        color-mix(in srgb, var(--gruen) 18%, transparent);

    color: var(--gruen);

    transform: translateY(-2px);
}

.technik-item::after {
    content: "";
    position: absolute;

    top: -1px;
    left: 0;

    width: 0;
    height: 2px;

    background: var(--gruen);

    transition: width .35s ease;
}

.technik-item:hover::after {
    width: 3rem;
}

.technik-item h3 a:hover::after {
    transform: translateX(.2rem);
}

/* ==================================================
   PROZESS
================================================== */

.section-prozess {
    position: relative;
    
}

.section-prozess h2 {
    color: var(--rot);
    margin-bottom: 1.25rem;
}

.section-prozess .section-intro {
    max-width: 760px;
    margin: 0 auto;
}


/* ==================================================
   PROZESS WRAPPER
================================================== */

.webdesign-prozess {
    position: relative;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4rem;

    padding-top: 2rem;
}


/* ==================================================
   Geschwungene Verbindung
================================================== */

.prozess-kurve {
    position: absolute;
    z-index: 0;

    left: 4%;
    top: 1.9rem;

    width: 92%;
    height: 150px;

    color: color-mix(in srgb, var(--gruen) 70%, transparent);

    pointer-events: none;
}



/* ==================================================
   EINZELNE SCHRITTE
================================================== */

.prozess-step {
    position: relative;
    z-index: 1;
}

.prozess-box {
    position: relative;
    height: 100%;

    padding: 2rem 1.5rem 1.75rem;

    background: rgba(255, 255, 255, .9);

    border-radius: 1.5rem;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.prozess-box:hover {
    transform: translateY(-6px);
    background: #fff;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, .06);
}


/* ==================================================
   NUMMER
================================================== */

.prozess-number {
    position: absolute;

    top: 1.1rem;
    right: 1.2rem;

    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .08em;

    color:
        color-mix(in srgb, var(--rot) 55%, transparent);
}


/* ==================================================
   ICON
================================================== */

.prozess-icon {
    width: 3.25rem;
    height: 3.25rem;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 1.25rem;

    border-radius: 50%;

    background:
        color-mix(in srgb, var(--rot) 10%, transparent);

    color: var(--rot);

    font-size: 1.35rem;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.prozess-box:hover .prozess-icon {
    background:
        color-mix(in srgb, var(--gruen) 18%, transparent);

    color: var(--gruen);

    transform: scale(1.05);
}


/* ==================================================
   TEXTE
================================================== */

.prozess-box h3 {
    margin-bottom: .7rem;

    font-size: 1.2rem;
    color: var(--dunkelgrau);
}

.prozess-box p {
    margin: 0;
    line-height: 1.55;
}

/* ===========================================================================================
                   SEITE WEBPFLEGE
============================================================================================0= */


.section-webpflege-intro {
    background: #fff;
}

.section-webpflege-intro h1 {
    color: var(--rot);
    max-width: 1050px;
    margin-bottom: 1.25rem;
}

.section-webpflege-intro p {
    max-width: 900px;
}

.section-webpflege-intro strong {
    color: var(--rot);
    font-weight: 500;
}


/* ==================================================
   PFLEGE-BEREICHE
================================================== */

.section-pflege {
    position: relative;
}

.section-pflege-content {
   
}

.section-pflege-technik {
    background: #fff;
}

.section-pflege h2 {
    color: var(--rot);
    margin-bottom: 1.4rem;
}

.section-pflege p {
    line-height: 1.65;
}


/* ==================================================
   BILD / VISUAL
================================================== */

.pflege-visual {
    position: relative;
}

.pflege-visual figure {
    position: relative;
    z-index: 1;
    margin: 0;
}

.pflege-visual figure img {
    display: block;
    max-width: 100%;
}


/* vorhandenes bild-rechts / bild-links Snippet weiterverwenden */

.section-pflege-content .bild-rechts::before {
    top: 18%;
    left: 18%;
    right: 4%;
    bottom: 8%;

    background:
        color-mix(in srgb, var(--rot) 9%, transparent);

    border-radius:
        46% 54% 48% 52%
        / 42% 46% 54% 58%;
}

.section-pflege-technik .bild-links::before {
    top: 16%;
    left: 4%;
    right: 18%;
    bottom: 8%;

    background:
        color-mix(in srgb, var(--gruen) 10%, transparent);

    border-radius:
        54% 46% 52% 48%
        / 46% 42% 58% 54%;
}


/* ==================================================
   KLEINE LEISTUNGSBOXEN
================================================== */

.pflege-features {
    position: relative;
    z-index: 2;

    display: grid;
    gap: .9rem;

    max-width: 420px;
    margin-top: 1.25rem;
}

.section-pflege-content .pflege-features {
    margin-left: auto;
}

.section-pflege-technik .pflege-features {
    margin-right: auto;
}


/* Einzelne Box */

.pflege-feature {
    display: flex;
    align-items: flex-start;
    gap: .9rem;

    padding: .9rem 1rem;

    background: rgba(255, 255, 255, .92);

    border-radius: 1rem;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, .04);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.pflege-feature:hover {
    transform: translateY(-3px);

    box-shadow:
        0 14px 32px rgba(0, 0, 0, .06);
}


/* Icon */

.pflege-feature-icon {
    flex: 0 0 2.35rem;

    width: 2.35rem;
    height: 2.35rem;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        color-mix(in srgb, var(--gruen) 14%, transparent);

    color: var(--gruen);

    font-size: 1rem;
}


/* Texte */

.pflege-feature h3 {
    margin: 0 0 .15rem;

    font-size: 1rem;
    color: var(--rot);
}

.pflege-feature p {
    margin: 0;

    font-size: .95rem;
    line-height: 1.4;
}


/* ==================================================
   HOSTING
================================================== */

.section-pflege-hosting {
    position: relative;

    background:
        color-mix(in srgb, var(--gruen) 8%, white);
}

.section-pflege-hosting h2 {
    color: var(--rot);
    margin-bottom: .75rem;
}

.section-pflege-hosting p {
    margin-bottom: 0;
    max-width: 760px;
}

.hosting-kicker {
    margin-bottom: .8rem;
}

/* ==================================================
                  SEITE SEO
================================================== */
.intro-seo.has-wave-bottom{
  padding-bottom: 3rem;
}
.intro-seo .bild-rechts{
  margin-top:0;
}
.intro-seo .bild-rechts::before {
  left: 4rem;
  right: -0.5rem;
  bottom: 0.5rem;
  top: 4rem;
}


/* ====================================
   SEO – Technische Optimierung
==================================== */

.section-seo-technik {
    
}

/* Karten */
.seo-card {
    height: 100%;
    background: #fff;
    border: 1px solid rgba(214, 48, 73, 0.12);
    border-radius: 20px;
    padding: 2.25rem;
    position: relative;
    overflow: hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

/* Dezente rote Linie */
.seo-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 2.25rem;
    width: 48px;
    height: 3px;
    background: var(--rot, #d63049);
    border-radius: 0 0 3px 3px;

    transition: width .3s ease;
}

/* Icon */
.seo-card-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;

    background: #fce9ed;
    color: var(--rot, #d63049);
    border-radius: 16px;

    font-size: 1.7rem;
    margin-bottom: 1.5rem;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

/* Überschrift */
.seo-card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1rem;
    color: #29262b;
}

/* Fließtext */
.seo-card p {
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 0;
    color: #555;
}

/* Hover */
@media (hover: hover) {
    .seo-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 15px 35px rgba(50, 30, 40, 0.09);
        border-color: rgba(214, 48, 73, 0.3);
    }

    .seo-card:hover::before {
        width: 95px;
    }

    .seo-card:hover .seo-card-icon {
        background: var(--rot, #d63049);
        color: #fff;
        transform: scale(1.06);
    }
}

/* Mobil */
@media (max-width: 767.98px) {
    .seo-card {
        padding: 1.75rem;
        border-radius: 16px;
    }

    .seo-card h3 {
        font-size: 1.25rem;
    }

    .seo-card-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 1.25rem;
    }
}

/* Animationen bei reduzierter Bewegung */
@media (prefers-reduced-motion: reduce) {
    .seo-card,
    .seo-card::before,
    .seo-card-icon {
        transition: none;
    }
}

/* ====================================
   SEITE HOSTING
==================================== */

.intro-hosting .bild-rechts::before {
  left: 6rem;
  right: -0.5rem;
  bottom: 3.5rem;
  top: 8rem;
}



/*--------------Scroll to top - ohne jquery--------------------------------------------*/
.scroll-to-top {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 9999;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--rot);
    color: #fff;

    text-decoration: none;
    font-size: 24px;

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0.3s ease;
}

.scroll-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    background: var(--pink);
    color: #fff;
}
/*------------------------------CSS fuer my-Extension Bild mit Hover Effekt--------------------*/
/*----Bilder mit Hover-Effekt------------------------------*/
/*----------------------TEAM-------------------------------*/
.team-style2 {
  margin-bottom: 10px;
}
.team-style2 .ce-gallery figure.image{
  box-shadow: none;
  width: 100%;
}
.team-style2 .team-member-img img {
  transition: all 0.3s ease 0s; }
.team-style2 .team-member-img:hover img {
  }
.team-style2 .team-description {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: transparent;
  opacity: 0;
  transition: all 200ms ease-in-out;
  padding: 15px 5px;
  z-index: 9;
  
}
.team-style2 .ce-image .ce-gallery{
  box-shadow:5px 5px 5px #ccc;
}
.team-style2 .ce-gallery figure{
  position: relative;
}

.team-style2 .social-links .info:before, .info:before{
  display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
   font-family: "Font Awesome 5 Free"; 
   font-weight: 900; 
    font-size: 1.2rem;
}

.team-style2 .social-links .info:before, .info:before{
  content: "\f0c1";
}

.team-style2 .social-links a, .social-links a{
  color: #333;
}

.team-style2 .social-links,  .social-links {
  transform: translateY(15px);
  transition: transform 300ms ease-in-out, opacity 150ms ease-in;
  opacity: 0;
  color: var(--textfarbe);
  -webkit-font-smoothing: antialiased; }
  .team-style2 .social-links a:hover {
    opacity: 0.65; }
.team-style2 .team-description-wrapper {
  position: relative;
  display: table;
  width: 100%;
  height: 100%; }
.team-style2 .team-description-content {
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}
.team-style2 .team-member-img {
  position: relative;
  display: block;
  overflow: hidden;   
  margin: 0 auto; 
}
.team-style2 .bg-cover {
  background-color: rgba(255,255,255,0.7);
  opacity: 1;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  transform: scale(2);
  transition: all 200ms ease-in-out;
  display: none;
  z-index: 1;
  border: 7px solid rgba(0,0,0,0.1);
  font-size: 19px;
  border-radius: 3px;
}
.team-style2 .team-member-img > img {
  transition: all 0.2s ease 0s; }
.team-style2:hover .bg-cover {
  background-color: rgba(255,255,255,0.7);
  display: block; }
.team-style2:hover .social-links {
  transition-delay: 100ms, 100ms;
  opacity: 1;
  transform: translateY(0); }
.team-style2:hover .team-member-img > img {
  filter: blur(4px) grayscale(4%); }
.team-style2:hover .team-description {
  opacity: 1; }

.team-style2 .mt-3.text-center{
    padding-bottom:31px;
}
.team-style2 .text-left{
  text-align: center !important;
  max-width: 300px;
  margin: 0 auto 50px;
}
.team-style2 figcaption.image-caption{
  margin-top: 15px;
  text-align: center;
}

.team-style2 .name p{
  margin-bottom:0;
}



@media (max-width: 1199.98px) {

    .webdesign-prozess {
        grid-template-columns: repeat(2, 1fr);
    }

    .prozess-kurve {
        display: none;
    }

}


@media (max-width: 991.98px) {
    .hero-slider .carousel-inner, .page-hero {
        clip-path: polygon(
            0 0,
            100% 0,
            100% 86%,
            92% 87%,
            80% 88%,
            66% 89%,
            50% 90%,
            34% 90%,
            20% 89%,
            8% 87%,
            0 86%
        );
    }

 .page-hero {
        height: 440px;
    }

    .page-hero-caption {
        padding-top: 110px;
    }

    .page-hero-text {
        width: 85%;
    }
 
    
   .support-image .info-badge {
        position: absolute;

        top: 1.25rem;
        left: 1rem;
        right: auto;
        bottom: auto;

        width: auto;
        max-width: calc(100% - 2rem);

        padding: .85rem 1rem;

        transform: rotate(-1.5deg);

        border-radius: .85rem;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
    }

    .info-badge-title {
        font-size: 1rem;
        margin-bottom: .5rem;
    }

    .info-badge-list li {
        font-size: .95rem;
        margin-bottom: .3rem;
    }

.barrier-card {
    position: relative;
}
   .typo3-flipcards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
   .webdesign-faktor {
        min-height: 280px;
    }
  .section-responsive .bild-links {
        margin-left: 0;
    }
.individuell-statements {
        padding-left: 0;
        margin-top: .5rem;
    }
.pflege-features {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .section-pflege-content .pflege-features,
    .section-pflege-technik .pflege-features {
        margin-left: 0;
        margin-right: 0;
    }

    .section-pflege-hosting .text-lg-end {
        text-align: left !important;
    }
.cms-vergleich-content {
    position: relative;
    width: 342px;
    z-index: 30;
    top: auto;
    left: auto;
    margin: 0 auto;
}
  
}
@media (max-width: 767.98px) {

    .page-hero {
        height: 360px;
    }

    .page-hero-caption {
        padding-top: 65px;
    }

    .page-hero-text {
        width: 100%;
    }

    .page-hero .hero-title {
        margin-bottom: .8rem;

        font-size: clamp(1.8rem, 7vw, 2.25rem);
        line-height: 1.1;
    }

    .page-hero .subheading {
        max-width: 20rem;

        font-size: clamp(1.15rem, 5vw, 1.4rem);
        line-height: 1.35;
    }
   .typo3-flipcards {
        grid-template-columns: 1fr;
    }
  .webdesign-faktor {
        min-height: auto;
        padding: 1.6rem 1.4rem;
    }
  .webdesign-faktor {
        padding: 1.6rem 1.4rem;
    }

    .webdesign-faktor:hover {
        transform: none;
    }


      .section-responsive .bild-links::after {
        width: 70px;
    }

    .responsive-point {
        gap: .85rem;
    }
   .individuell-statement {
        font-size: 1.15rem;
    }
   .technik-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
   .webdesign-prozess {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .prozess-box {
        padding: 1.6rem 1.4rem;
    }
   .section-pflege-content .bild-rechts::before,
    .section-pflege-technik .bild-links::before {
        left: 8%;
        right: 8%;
        top: 15%;
        bottom: 8%;
    }

    .pflege-feature {
        padding: .8rem .9rem;
    }
}

@media (max-width: 575.98px) {
    .hero-slider .carousel-inner, .page-hero  {
        clip-path: polygon(
            0 0,
            100% 0,

            100% 90%,
            92% 90.5%,
            82% 91.2%,
            70% 91.8%,
            58% 92.2%,
            46% 92.4%,
            34% 92.2%,
            22% 91.8%,
            12% 91.2%,
            5% 90.5%,
            0 90%
        );
    }
    .page-hero {
        height: 270px;
    }
  .hero-slider .carousel-item{
    height: 320px;
  }
  .hero-slider .caption {
    padding-top: 100px;
  }
   .page-hero-caption {
        padding-top: 70px;
    }
  .page-hero .hero-title {
    margin-bottom: 1.15rem;
    font-size: 1.8rem;
    line-height: 1.15;
  }
   .page-hero .subheading {
    max-width: 16rem;
    font-size: 1.15rem;
    line-height: 1.4;
  }
   
  .page-hero-image {
    object-position: 100% center;
  }


   .section-kicker {
        position: relative;
        display: block;
        width: auto;

        padding-top: .8rem;
        margin-bottom: 1rem;
    }

    .section-kicker::after {
        position: absolute;
        top: 0;
        left: 0;

        width: 2rem;
        height: 2px;
        margin: 0;

        background: var(--rot);
    }
  .section-wen-betrifft::after {
        height: 2.5rem;
        bottom: -2.4rem;

        clip-path: polygon(
            0 0,
            100% 0,

            100% 38%,
            96% 40%,
            92% 43%,
            88% 47%,
            84% 51%,
            80% 55%,
            76% 58%,
            72% 61%,
            68% 63%,
            64% 64%,
            60% 64%,
            56% 63%,
            52% 61%,
            48% 58%,
            44% 55%,
            40% 52%,
            36% 49%,
            32% 47%,
            28% 46%,
            24% 46%,
            20% 47%,
            16% 49%,
            12% 52%,
            8% 55%,
            4% 58%,
            0 60%
        );
    }
   .section-wen-betrifft > .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
  .barrier-card {
        width: auto;
        max-width: 100%;
        margin: 2rem .75rem;
    }

    .barrier-card-inner {
        padding: 1.7rem 1.4rem;
        transform: none;
    }

    .barrier-card-inner > * {
        transform: none;
    }

    .barrier-card-bg {
        top: .65rem;
        left: .35rem;
        right: .35rem;
        bottom: -.65rem;

        transform: rotate(-1deg);
    }
  .intro {
    overflow-x: clip;
     padding-top: 2rem;
}
   .section-wen-betrifft .accessibility-group {
        margin-bottom: .75rem;
    }

     /*
     * Einzelnes Accessibility-Element
     *
     * Spalte 1 = Icon
     * Spalte 2 = Überschrift + Text
     */
    .accessibility-group > .frame {
        display: grid;
        grid-template-columns: 3.5rem minmax(0, 1fr);
        column-gap: 1.15rem;
        row-gap: .25rem;

        align-items: start;

        padding-bottom: 1.5rem;
    }

    .accessibility-group-icon,
    .accessibility-group > .frame::before {
        width: 3.5rem;
        height: 3.5rem;
        margin-bottom: 1rem;
    }
  /*
     * Icon
     */
    .accessibility-group > .frame::before {
        grid-column: 1;
        grid-row: 1 / span 2;

        width: 3.5rem;
        height: 3.5rem;
        margin: 0;

        font-size: 1.4rem;
    }
  .accessibility-group > .frame::after {
        left: 4.65rem;
        bottom: 0;

        width: 2rem;
        height: 2px;
    }

    .accessibility-group h3 {
         grid-column: 2;
        grid-row: 1;

        margin: .1rem 0 .3rem;

        font-size: 1.4rem;
        line-height: 1.2;
    }

    .accessibility-group p {
        grid-column: 2;
        grid-row: 2;

        max-width: none;
        margin: 0;

        font-size: 1rem;
        line-height: 1.5;
    }

    .benefits-grid {
        --bs-gutter-y: 1.5rem;
    }

    .benefit-item > .frame {
        min-height: 0;
        padding: 2rem 0 1.75rem;
    }

    .benefit-item > .frame::before {
        top: .5rem;
        right: 0;

        font-size: 4.5rem;
    }

    .benefit-item h3 {
        padding-right: 4rem;
        font-size: 1.5rem;
    }

    .benefit-item p {
        font-size: 1rem;
        line-height: 1.55;
    }
  .typo3-flipcards {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

  @media (min-width: 768px) and (max-width: 991.98px) {
    .accessibility-practice-image-wrap {
        max-width: 600px;
        margin-inline: auto;
        margin-bottom: 3rem;
    }
}
  @media (min-width: 576px) and (max-width: 991.98px) {

    .benefit-item > .frame {
        min-height: 0;
        padding: 2rem 7rem 2rem 0;
    }

    .benefit-item > .frame::before {
        top: 1.25rem;
        right: 1rem;

        font-size: 5rem;
    }

    .benefit-item h3 {
        max-width: none;
    }

    .benefit-item p {
        max-width: 38rem;
    }
}


@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.8rem;
    padding-left: 0.8rem;
  }
}