.ct-section {
width:100%;
background-size:cover;
background-repeat:repeat;
}
.ct-section>.ct-section-inner-wrap {
display:flex;
flex-direction:column;
align-items:flex-start;
}
.ct-div-block {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.ct-new-columns {
display:flex;
width:100%;
flex-direction:row;
align-items:stretch;
justify-content:center;
flex-wrap:wrap;
}
.ct-link-text {
display:inline-block;
}
.ct-link {
display:flex;
flex-wrap:wrap;
text-align:center;
text-decoration:none;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-link-button {
display:inline-block;
text-align:center;
text-decoration:none;
}
.ct-link-button {
background-color: #1e73be;
border: 1px solid #1e73be;
color: #ffffff;
padding: 10px 16px;
}
.ct-image {
max-width:100%;
}
.ct-fancy-icon>svg {
width:55px;height:55px;}
.ct-inner-content {
width:100%;
}
.ct-slide {
display:flex;
flex-wrap:wrap;
text-align:center;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-nestable-shortcode {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-comments {
width:100%;
text-align:left;
}
.oxy-comment-form {
width:100%;
}
.oxy-login-form {
width:100%;
}
.oxy-search-form {
width:100%;
}
.oxy-tabs-contents {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab-content {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-testimonial {
width:100%;
}
.oxy-icon-box {
width:100%;
}
.oxy-pricing-box {
width:100%;
}
.oxy-posts-grid {
width:100%;
}
.oxy-gallery {
width:100%;
}
.ct-slider {
width:100%;
}
.oxy-tabs {
display:flex;
flex-wrap:nowrap;
flex-direction:row;
align-items:stretch;
}
.ct-modal {
flex-direction:column;
align-items:flex-start;
}
.ct-span {
display:inline-block;
text-decoration:inherit;
}
.ct-widget {
width:100%;
}
.oxy-dynamic-list {
width:100%;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
			.ct-div-block,
			.oxy-post-content,
			.ct-text-block,
			.ct-headline,
			.oxy-rich-text,
			.ct-link-text { max-width: 100%; }
			img { flex-shrink: 0; }
			body * { min-height: 1px; }
		}            .oxy-testimonial {
                flex-direction: row;
                align-items: center;
            }
                        .oxy-testimonial .oxy-testimonial-photo-wrap {
                order: 1;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo {
                width: 125px;                height: 125px;                margin-right: 20px;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo-wrap, 
            .oxy-testimonial .oxy-testimonial-author-wrap, 
            .oxy-testimonial .oxy-testimonial-content-wrap {
                align-items: flex-start;                text-align: left;            }
            
                                                            .oxy-testimonial .oxy-testimonial-text {
                margin-bottom:8px;font-size: 21px;
line-height: 1.4;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
                                    .oxy-testimonial .oxy-testimonial-author {
                font-size: 18px;
-webkit-font-smoothing: subpixel-antialiased;
            }
                            

                                                .oxy-testimonial .oxy-testimonial-author-info {
                font-size: 12px;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
             
            
                        .oxy-icon-box {
                text-align: left;                flex-direction: column;            }
            
                        .oxy-icon-box .oxy-icon-box-icon {
                margin-bottom: 12px;
                align-self: flex-start;            }
            
                                                                        .oxy-icon-box .oxy-icon-box-heading {
                font-size: 21px;
margin-bottom: 12px;            }
            
                                                                                    .oxy-icon-box .oxy-icon-box-text {
                font-size: 16px;
margin-bottom: 12px;align-self: flex-start;            }
            
                        .oxy-icon-box .oxy-icon-box-link {
                margin-top: 20px;                            }
            
            
            /* GLOBALS */

                                                            .oxy-pricing-box .oxy-pricing-box-section {
                padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
text-align: center;            }
                        
                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                justify-content: center;            }
            
            /* IMAGE */
                                                                                    .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-graphic {
                justify-content: center;            }
            
            /* TITLE */
                                                            
                                    .oxy-pricing-box .oxy-pricing-box-title-title {
                font-size: 48px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-title-subtitle {
                font-size: 24px;
            }
            

            /* PRICE */
                                                .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                                                flex-direction: row;                                            }
            
                                    .oxy-pricing-box .oxy-pricing-box-currency {
                font-size: 28px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-main {
                font-size: 80px;
line-height: 0.7;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-decimal {
                font-size: 13px;
            }
                        
                                    .oxy-pricing-box .oxy-pricing-box-term {
                font-size: 16px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-sale-price {
                font-size: 12px;
color: rgba(0,0,0,0.5);
                margin-bottom: 20px;            }
            
            /* CONTENT */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-content {
                font-size: 16px;
color: rgba(0,0,0,0.5);
            }
            
            /* CTA */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-cta {
                justify-content: center;            }
            
        
                                .oxy-progress-bar .oxy-progress-bar-background {
            background-color: #000000;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);            animation: none 0s paused;        }
                
                .oxy-progress-bar .oxy-progress-bar-progress-wrap {
            width: 85%;        }
        
                                                        .oxy-progress-bar .oxy-progress-bar-progress {
            background-color: #66aaff;padding: 40px;animation: none 0s paused, none 0s paused;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);        
        }
                
                        .oxy-progress-bar .oxy-progress-bar-overlay-text {
            font-size: 30px;
font-weight: 900;
-webkit-font-smoothing: subpixel-antialiased;
        }
        
                        .oxy-progress-bar .oxy-progress-bar-overlay-percent {
            font-size: 12px;
        }
        
        .ct-slider .unslider-nav ol li {border-color: #ffffff; }.ct-slider .unslider-nav ol li.unslider-active {background-color: #ffffff; }.ct-slider .ct-slide {
				padding: 0px;			}
		
                        .oxy-superbox .oxy-superbox-secondary, 
            .oxy-superbox .oxy-superbox-primary {
                transition-duration: 0.5s;            }
            
            
            
            
            
        
        
        
        
            .oxy-shape-divider {
                width: 0px;
                height: 0px;
                
            }
            
            .oxy_shape_divider svg {
                width: 100%;
            }
            .oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .sub-menu{
box-shadow:px px px px ;}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a div{
margin-left:0px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
width:30px;
height:30px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon{
padding-top:15px;
padding-right:15px;
padding-bottom:15px;
padding-left:15px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon, .oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon{
top:20px;
left:20px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
width:24px;
height:24px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon, .oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container{
background-color:#ffffff;
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-open-container{
background-image:url();
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item-has-children > a svg, .oxy-pro-menu .oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item-has-children > a svg{
font-size:24px;
}

.oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-open-container .menu-item-has-children ul, .oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-off-canvas-container .menu-item-has-children ul{
background-color:rgba(0,0,0,0.2);
border-top-style:solid;
}

.oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .oxy-pro-menu-list{
                    flex-direction: row;
               }
.oxy-pro-menu .oxy-pro-menu-container .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .menu-item, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .menu-item{
                    align-items: flex-start;
                }

            .oxy-pro-menu .oxy-pro-menu-off-canvas-container{
                    top: 0;
                    bottom: 0;
                    right: auto;
                    left: 0;
               }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item a, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }

            .oxy-site-navigation {
--oxynav-brand-color:#4831B0;
--oxynav-neutral-color:#FFFFFF;
--oxynav-activehover-color:#EFEDF4;
--oxynav-background-color:#4831B0;
--oxynav-border-radius:0px;
--oxynav-other-spacing:8px;
--oxynav-transition-duration:0.3s;
--oxynav-transition-timing-function:cubic-bezier(.84,.05,.31,.93);
}

.oxy-site-navigation .oxy-site-navigation__mobile-close-wrapper{
text-align:left;
}

.oxy-site-navigation > ul{ left: 0; }
.oxy-site-navigation {
                        --oxynav-animation-name: none; 
                    }

                .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1){ 
                    background-color: var(--oxynav-brand-color);
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                    border: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2){ 
                    background: transparent;
                    border: 1px solid currentColor;
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2):not(:hover) > img{
                    filter: invert(0) !important;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover{
                    background-color: var(--oxynav-activehover-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a{
                    color: var(--oxynav-neutral-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a::after{
                    color: var(--oxynav-neutral-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > button, .oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }

                .ct-section-inner-wrap, .oxy-header-container{
  max-width: 1120px;
}
body {font-family: 'Inter';}body {line-height: 1.65;font-size: 18px;font-weight: 400;color: #2b2622;}.oxy-nav-menu-hamburger-line {background-color: #2b2622;}h1, h2, h3, h4, h5, h6 {font-family: 'Fraunces';font-size: 64px;font-weight: 700;line-height: 1.08;color: #2c4a3e;}h2, h3, h4, h5, h6{font-size: 48px;font-weight: 700;line-height: 1.15;color: #2c4a3e;}h3, h4, h5, h6{font-size: 36px;font-weight: 600;line-height: 1.2;color: #2c4a3e;}h4, h5, h6{font-size: 28px;font-weight: 600;line-height: 1.25;color: #2c4a3e;}h5, h6{font-size: 22px;font-weight: 600;line-height: 1.30;color: #2c4a3e;}h6{font-size: 18px;font-weight: 600;line-height: 1.35;color: #2c4a3e;}a {color: #3d6355;font-weight: 600;text-decoration: underline;}a:hover {color: #a85536;text-decoration: underline;}.ct-link-text {text-decoration: ;}.ct-link {color: #2b2622;text-decoration: none;}.ct-link:hover {color: #2b2622;text-decoration: none;}.ct-link-button {font-weight: 600;border-radius: 8px;}.ct-section-inner-wrap {
padding-top: 75px;
padding-right: 20px;
padding-bottom: 75px;
padding-left: 20px;
}.ct-new-columns > .ct-div-block {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}.oxy-header-container {
padding-right: 20px;
padding-left: 20px;
}@media (max-width: 992px) {
				.ct-columns-inner-wrap {
					display: block !important;
				}
				.ct-columns-inner-wrap:after {
					display: table;
					clear: both;
					content: "";
				}
				.ct-column {
					width: 100% !important;
					margin: 0 !important;
				}
				.ct-columns-inner-wrap {
					margin: 0 !important;
				}
			}
.skip-link {
}
.dhs-grid--3 {
}
.dhs-footer {
}
.dhs-section--compact {
}
.dhs-btn {
}
.dhs-btn--accent {
}
.dhs-footer__bottom {
}
.dhs-header__brand {
}
.dhs-header {
}
.dhs-header__menu {
}
.dhs-header__mobile-row {
}
.dhs-header__mobile-cta {
}
.dhs-header__desktop-cta {
}
.dhs-section {
}
.dhs-section--hero {
}
.dhs-grid--2 {
}
.dhs-hero__grid {
}
.dhs-hero__content {
 width:52%;
 max-width:600px;
 margin-top:0px;
 margin-right:0px;
 margin-bottom:0px;
 margin-left:0px;
 padding-top:0px;
 padding-right:0px;
 padding-bottom:0px;
 padding-left:0px;
 position:relative;
 z-index:4;
}
.dhs-hero__content:not(.ct-section):not(.oxy-easy-posts),
.dhs-hero__content.oxy-easy-posts .oxy-posts,
.dhs-hero__content.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
}
.dhs-hero__media {
 width:50%;
 max-width:650px;
 overflow:hidden;
 position:relative;
 border-radius:20px;
 height:410px;
 border-top-width:0px;
 border-right-width:0px;
 border-bottom-width:0px;
 border-left-width:0px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-color:#d7e0dc;
 border-right-color:#d7e0dc;
 border-bottom-color:#d7e0dc;
 border-left-color:#d7e0dc;
 padding-top:0px;
 padding-right:0px;
 padding-bottom:0px;
 padding-left:0px;
 margin-top:0px;
 margin-left:0px;
 margin-right:0px;
 margin-bottom:0px;
 gap:56px;
 box-shadow:0px 18px 40px 0px rgba(44,74,62,0.1);
}
.dhs-hero__media:not(.ct-section):not(.oxy-easy-posts),
.dhs-hero__media.oxy-easy-posts .oxy-posts,
.dhs-hero__media.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:space-between;
gap:56px;
}
.dhs-hero__eyebrow {
 font-family:Inter;
 font-size:14px;
 font-weight:700;
 line-height:1.3;
 letter-spacing:0.08em;
 text-transform:uppercase;
 text-align:center;
 color:#a4ad55;
 margin-top:0px;
 margin-left:0px;
 margin-right:0px;
 margin-bottom:18px;
 padding-top:0px;
 padding-right:0px;
 padding-left:0px;
 padding-bottom:0px;
}
.dhs-hero__title {
 font-family:Fraunces;
 font-size:68px;
 font-weight:500;
 line-height:1;
 letter-spacing:-1.5px;
 text-align:left;
 color:#fdfbf8;
 width:100%;
 max-width:590px;
 margin-top:0px;
 margin-right:0px;
 margin-bottom:0px;
 margin-left:0px;
 padding-top:0px;
 padding-right:0px;
 padding-bottom:0px;
 padding-left:0px;
}
.dhs-lead {
}
.dhs-hero__lead {
}
.dhs-btn-group {
}
.dhs-hero__actions {
 gap:16px;
 margin-top:32px;
 padding-top:0px;
 padding-left:0px;
 padding-right:0px;
 padding-bottom:0px;
 margin-left:0px;
 margin-right:0px;
 margin-bottom:0px;
 width:auto;
}
.dhs-hero__actions:not(.ct-section):not(.oxy-easy-posts),
.dhs-hero__actions.oxy-easy-posts .oxy-posts,
.dhs-hero__actions.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-items:center;
justify-content:flex-start;
gap:16px;
}
.dhs-btn--large:hover{
transform:translateY(-2px); background-color:#a85536;
}
.dhs-btn--large {
 font-family:Inter;
 font-size:16px;
 font-weight:700;
 line-height:1.2;
 text-align:center;
 color:#ffffff;
 background-color:#c96f4a;
 padding-top:16px;
 padding-right:24px;
 padding-bottom:16px;
 padding-left:24px;
 margin-top:0px;
 margin-left:0px;
 margin-right:0px;
 margin-bottom:0px;
 border-top-width:0px;
 border-right-width:0px;
 border-bottom-width:0px;
 border-left-width:0px;
 border-radius:8px;
 width:auto;
}
.dhs-btn--large:not(.ct-section):not(.oxy-easy-posts),
.dhs-btn--large.oxy-easy-posts .oxy-posts,
.dhs-btn--large.ct-section .ct-section-inner-wrap{
display:inline-flex;
align-items:center;
justify-content:center;
}
.dhs-btn--secondary {
}
.dhs-hero__image {
 border-radius:16px;
}
.dhs-home-understand {
}
.dhs-prose--wide {
}
.dhs-section-intro {
}
.dhs-section-eyebrow {
}
.dhs-section-title {
}
.dhs-section-lead {
}
.dhs-understand-grid {
}
.dhs-card {
}
.dhs-understand-card {
}
.dhs-understand-card__media {
}
.dhs-understand-card__eyebrow {
}
.dhs-understand-card__title {
}
.dhs-understand-card__text {
}
.dhs-understand-card__link {
}
.dhs-home-process {
}
.dhs-process-grid {
}
.dhs-process-card {
}
.dhs-process-card__number {
}
.dhs-process-card__title {
}
.dhs-process-card__text {
}
.dhs-process-action {
}
.dhs-process-action__text {
}
.dhs-home-services {
}
.dhs-services-grid {
}
.dhs-service-card {
}
.dhs-service-card__eyebrow {
}
.dhs-service-card__title {
}
.dhs-service-card__text {
}
.dhs-service-card__link {
}
.dhs-services-action {
}
.dhs-btn--primary {
}
.dhs-home-credentials {
}
.dhs-credentials-grid {
}
.dhs-credentials-content {
}
.dhs-credentials-list {
}
.dhs-credential-card {
}
.dhs-credential-card__media {
}
.dhs-credential-card__eyebrow {
}
.dhs-credential-card__title {
}
.dhs-credential-card__text {
}
.dhs-credential-card__link {
}
.dhs-home-holiday {
}
.dhs-holiday-grid {
}
.dhs-holiday-content {
}
.dhs-holiday-media {
}
.dhs-holiday-benefit__text {
}
.dhs-holiday-actions {
}
.dhs-holiday-media__badge {
}
.dhs-holiday-media__eyebrow {
}
.dhs-holiday-media__title {
}
.dhs-holiday-benefit {
}
.dhs-home-loyalty {
}
.dhs-loyalty-content {
}
.dhs-loyalty-grid {
}
.dhs-loyalty-note {
}
.dhs-loyalty-visual {
}
.dhs-loyalty-card {
}
.dhs-loyalty-card__eyebrow {
}
.dhs-loyalty-card__title {
}
.dhs-loyalty-stamps {
}
.dhs-loyalty-stamp {
}
.dhs-loyalty-stamp__number {
}
.dhs-loyalty-stamp--reward {
}
.dhs-loyalty-reward {
}
.dhs-loyalty-reward__eyebrow {
}
.dhs-loyalty-reward__title {
}
.dhs-loyalty-reward__text {
}
.dhs-home-reviews {
}
.dhs-google-reviews {
}
.dhs-home-final-cta {
}
.dhs-final-cta {
}
.dhs-final-cta__eyebrow {
}
.dhs-final-cta__title {
}
.dhs-final-cta__text {
}
.dhs-final-cta__actions {
}
.dhs-final-cta__note {
}
.dhs-home-hero {
background-image:linear-gradient(rgba(27,42,35,0.45), rgba(27,42,35,0.45)), url(https://neu.diehunde.schule/wp-content/uploads/2026/07/diehunde-schule-hero-familie-australian-shepherd.png);background-size:auto,  cover; width:100%;
 min-width:760px;
 position:relative;
 overflow:hidden;
 background-repeat:no-repeat;
 background-attachment:scroll;
 background-position:50% 45%;
}
.dhs-home-hero .ct-section-inner-wrap {
padding-top: 150px;
padding-right: 0;
padding-bottom: 150px;
padding-left: 0;
}
.dhs-home-hero:not(.ct-section):not(.oxy-easy-posts),
.dhs-home-hero.oxy-easy-posts .oxy-posts,
.dhs-home-hero.ct-section .ct-section-inner-wrap{
display:none;
align-items:center;
justify-content:flex-start;
}
.dhs-container {
}
.dhs-hero__inner {
 width:100%;
 min-width:1280px;
 padding-left:32px;
 padding-right:32px;
 padding-top:0px;
 padding-bottom:0px;
 position:relative;
 z-index:3;
 margin-left:auto;
 margin-right:auto;
}
.dhs-hero__inner:not(.ct-section):not(.oxy-easy-posts),
.dhs-hero__inner.oxy-easy-posts .oxy-posts,
.dhs-hero__inner.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:flex-start;
}
.dhs-hero__title-accent {
 font-family:Fraunces;
 font-size:68px;
 text-align:left;
 font-weight:500;
 line-height:1;
 letter-spacing:-1.5px;
 color:#a4ad55;
 padding-top:0px;
 padding-left:0px;
 padding-right:0px;
 padding-bottom:0px;
 margin-top:0px;
 margin-left:0px;
 margin-right:0px;
 margin-bottom:0px;
 width:100%;
 max-width:590px;
}
.dhs-hero__text {
 font-family:Inter;
 font-size:18px;
 font-weight:400;
 text-align:left;
 line-height:1.65;
 color:rgba(253,251,248,0.9);
 width:100%;
 max-width:520px;
 margin-top:24px;
 margin-left:0px;
 margin-right:0px;
 margin-bottom:0px;
 padding-top:0px;
 padding-right:0px;
 padding-bottom:0px;
 padding-left:0px;
}
.dhs-understand-card__image {
}
.dhs-holiday-media__image {
}
/* =========================================================
   dieHunde.schule – Basis & Barrierefreiheit
   ========================================================= */


/* ---------------------------------------------------------
   1. Responsive Überschriften
   Desktopwerte entsprechen den globalen Oxygen-Einstellungen.
   Auf kleineren Bildschirmen verkleinern sie sich fließend.
   --------------------------------------------------------- */

h1 {
  font-size: clamp(2.5rem, 1.75rem + 3vw, 4rem);
}

h2 {
  font-size: clamp(2.125rem, 1.75rem + 1.5vw, 3rem);
}

h3 {
  font-size: clamp(1.75rem, 1.55rem + 0.8vw, 2.25rem);
}

h4 {
  font-size: clamp(1.5rem, 1.4rem + 0.4vw, 1.75rem);
}

h5 {
  font-size: clamp(1.25rem, 1.2rem + 0.2vw, 1.375rem);
}

h6 {
  font-size: 1.125rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}


/* ---------------------------------------------------------
   2. Sichtbarer Tastaturfokus
   --------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid #c96f4a;
  outline-offset: 3px;
}


/* ---------------------------------------------------------
   3. Hilfsklasse für nur vorgelesene Inhalte
   --------------------------------------------------------- */

.sr-only:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}


/* ---------------------------------------------------------
   4. Sprunglink zum Hauptinhalt
   Das eigentliche Element bauen wir später im Header ein.
   --------------------------------------------------------- */

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 999999;
  padding: 12px 18px;
  color: #ffffff;
  background-color: #2c4a3e;
  border-radius: 8px;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}


/* ---------------------------------------------------------
   5. Reduzierte Bewegung
   Berücksichtigt die Systemeinstellung des Besuchers.
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}/* =========================================================
   dieHunde.schule – Layout und responsive Hilfsklassen
   ========================================================= */


/* ---------------------------------------------------------
   1. Flexible Abschnittsabstände

   Diese Klassen werden später auf Oxygen-Sections angewendet.
   --------------------------------------------------------- */

.dhs-section > .ct-section-inner-wrap {
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.dhs-section--compact > .ct-section-inner-wrap {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.dhs-section--hero > .ct-section-inner-wrap {
  padding-top: clamp(4.5rem, 9vw, 8rem);
  padding-bottom: clamp(4.5rem, 9vw, 8rem);
}


/* ---------------------------------------------------------
   2. Lesefreundliche Inhaltsbreiten
   --------------------------------------------------------- */

.dhs-prose,
.dhs-prose--narrow,
.dhs-prose--wide {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.dhs-prose {
  max-width: 760px;
}

.dhs-prose--narrow {
  max-width: 680px;
}

.dhs-prose--wide {
  max-width: 900px;
}

.dhs-align-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


/* ---------------------------------------------------------
   3. Responsive Raster
   --------------------------------------------------------- */

.dhs-grid--2,
.dhs-grid--3 {
  display: grid;
  width: 100%;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.dhs-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dhs-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* ---------------------------------------------------------
   4. Flexible Bilder und Medien
   --------------------------------------------------------- */

img,
video {
  max-width: 100%;
  height: auto;
}

.dhs-media {
  display: block;
  width: 100%;
  height: auto;
}

.dhs-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.dhs-video iframe,
.dhs-video video {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}


/* ---------------------------------------------------------
   5. Tablet
   --------------------------------------------------------- */

@media (max-width: 991px) {
  .dhs-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ---------------------------------------------------------
   6. Smartphone und kleine Tablets
   --------------------------------------------------------- */

@media (max-width: 767px) {
  .dhs-grid--2,
  .dhs-grid--3 {
    grid-template-columns: 1fr;
  }

  .dhs-align-center {
    text-align: left;
  }
}


/* ---------------------------------------------------------
   7. Sehr schmale Smartphones
   --------------------------------------------------------- */

@media (max-width: 479px) {
  .dhs-section > .ct-section-inner-wrap,
  .dhs-section--compact > .ct-section-inner-wrap,
  .dhs-section--hero > .ct-section-inner-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
}/* =========================================================
   dieHunde.schule – Buttons und Interaktionen
   ========================================================= */


/* ---------------------------------------------------------
   1. Gemeinsame Button-Grundklasse
   --------------------------------------------------------- */

.dhs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  min-width: 44px;
  min-height: 48px;
  padding: 0.85rem 1.35rem;

  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;

  border: 2px solid transparent;
  border-radius: 8px;

  cursor: pointer;
  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}


/* ---------------------------------------------------------
   2. Primärer Button
   --------------------------------------------------------- */

.dhs-btn--primary {
  color: #ffffff;
  background-color: #2c4a3e;
  border-color: #2c4a3e;
}

.dhs-btn--primary:hover {
  color: #ffffff;
  background-color: #3d6355;
  border-color: #3d6355;
  text-decoration: none;
}


/* ---------------------------------------------------------
   3. Sekundärer Button
   --------------------------------------------------------- */

.dhs-btn--secondary {
  color: #2c4a3e;
  background-color: transparent;
  border-color: #2c4a3e;
}

.dhs-btn--secondary:hover {
  color: #ffffff;
  background-color: #2c4a3e;
  border-color: #2c4a3e;
  text-decoration: none;
}


/* ---------------------------------------------------------
   4. Kampagnen- und Aktionsbutton
   --------------------------------------------------------- */

.dhs-btn--accent {
  color: #ffffff;
  background-color: #a85536;
  border-color: #a85536;
}

.dhs-btn--accent:hover {
  color: #ffffff;
  background-color: #2c4a3e;
  border-color: #2c4a3e;
  text-decoration: none;
}


/* ---------------------------------------------------------
   5. Zusätzliche Varianten
   --------------------------------------------------------- */

.dhs-btn--full {
  width: 100%;
}

.dhs-btn--large {
  min-height: 54px;
  padding: 1rem 1.6rem;
  font-size: 1.0625rem;
}


/* ---------------------------------------------------------
   6. Deaktivierte Buttons
   --------------------------------------------------------- */

.dhs-btn[disabled],
.dhs-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}


/* ---------------------------------------------------------
   7. Button-Gruppen
   --------------------------------------------------------- */

.dhs-btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}


/* ---------------------------------------------------------
   8. Smartphone
   --------------------------------------------------------- */

@media (max-width: 479px) {
  .dhs-btn-group {
    align-items: stretch;
    flex-direction: column;
  }

  .dhs-btn-group .dhs-btn {
    width: 100%;
  }
}/* =========================================================
   dieHunde.schule – Karten und Inhaltsflächen
   ========================================================= */


/* ---------------------------------------------------------
   1. Allgemeine Kartenbasis
   --------------------------------------------------------- */

.dhs-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: clamp(1.4rem, 2.5vw, 2rem);

  color: #2b2622;
  background-color: #ffffff;

  border: 1px solid #d8ddd9;
  border-radius: 14px;

  box-shadow: 0 8px 28px rgba(44, 74, 62, 0.08);

  overflow: hidden;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}


/* ---------------------------------------------------------
   2. Interaktive, verlinkte Karte
   Nur zusätzlich verwenden, wenn die gesamte Karte anklickbar ist.
   --------------------------------------------------------- */

.dhs-card--interactive {
  cursor: pointer;
}

.dhs-card--interactive:hover,
.dhs-card--interactive:focus-within {
  transform: translateY(-4px);
  border-color: #3d6355;
  box-shadow: 0 14px 34px rgba(44, 74, 62, 0.14);
}


/* ---------------------------------------------------------
   3. Farbvarianten
   --------------------------------------------------------- */

.dhs-card--soft {
  background-color: #eaf0ed;
  border-color: transparent;
  box-shadow: none;
}

.dhs-card--warm {
  background-color: #f4e4d7;
  border-color: transparent;
  box-shadow: none;
}

.dhs-card--dark {
  color: #ffffff;
  background-color: #2c4a3e;
  border-color: #2c4a3e;
}

.dhs-card--dark h2,
.dhs-card--dark h3,
.dhs-card--dark h4,
.dhs-card--dark h5,
.dhs-card--dark h6 {
  color: #ffffff;
}


/* ---------------------------------------------------------
   4. Kartenbild
   --------------------------------------------------------- */

.dhs-card__media {
  width: calc(100% + clamp(2.8rem, 5vw, 4rem));
  max-width: none;
  margin:
    calc(clamp(1.4rem, 2.5vw, 2rem) * -1)
    calc(clamp(1.4rem, 2.5vw, 2rem) * -1)
    1.5rem;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}


/* ---------------------------------------------------------
   5. Karteninhalt
   --------------------------------------------------------- */

.dhs-card__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
}

.dhs-card__content > :first-child {
  margin-top: 0;
}

.dhs-card__content > :last-child {
  margin-bottom: 0;
}

.dhs-card__footer {
  margin-top: auto;
  padding-top: 1.5rem;
}


/* ---------------------------------------------------------
   6. Kleine Kennzeichnung
   --------------------------------------------------------- */

.dhs-label {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;

  min-height: 32px;
  padding: 0.35rem 0.7rem;

  color: #2c4a3e;
  background-color: #eaf0ed;

  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;

  border-radius: 999px;
}


/* ---------------------------------------------------------
   7. Einfache Inhaltsfläche ohne Kartenwirkung
   --------------------------------------------------------- */

.dhs-panel {
  width: 100%;
  padding: clamp(1.5rem, 3vw, 2.5rem);

  background-color: #eaf0ed;
  border-radius: 14px;
}


/* ---------------------------------------------------------
   8. Smartphone
   --------------------------------------------------------- */

@media (max-width: 479px) {
  .dhs-card {
    border-radius: 12px;
  }

  .dhs-card__media {
    aspect-ratio: 4 / 3;
  }
}/* =========================================================
   dieHunde.schule – Formulare
   Für Fluent Forms innerhalb eines Elements mit dhs-form
   ========================================================= */


/* ---------------------------------------------------------
   1. Formularbasis
   --------------------------------------------------------- */

.dhs-form {
  width: 100%;
  max-width: 760px;
}

.dhs-form .ff-el-group {
  margin-bottom: 1.35rem;
}


/* ---------------------------------------------------------
   2. Beschriftungen
   Labels bleiben immer sichtbar.
   --------------------------------------------------------- */

.dhs-form .ff-el-input--label label {
  display: inline-block;
  margin-bottom: 0.45rem;

  color: #2b2622;

  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}


/* ---------------------------------------------------------
   3. Eingabefelder
   --------------------------------------------------------- */

.dhs-form .ff-el-form-control {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.9rem;

  color: #2b2622;
  background-color: #ffffff;

  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;

  border: 2px solid #767676;
  border-radius: 8px;

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.dhs-form textarea.ff-el-form-control {
  min-height: 160px;
  resize: vertical;
}

.dhs-form .ff-el-form-control::placeholder {
  color: #6a645e;
  opacity: 1;
}


/* ---------------------------------------------------------
   4. Fokuszustand
   --------------------------------------------------------- */

.dhs-form .ff-el-form-control:focus,
.dhs-form .ff-el-form-control:focus-visible {
  border-color: #2c4a3e;
  outline: 3px solid #c96f4a;
  outline-offset: 2px;
  box-shadow: none;
}


/* ---------------------------------------------------------
   5. Checkboxen und Auswahlfelder
   --------------------------------------------------------- */

.dhs-form input[type="checkbox"],
.dhs-form input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;

  accent-color: #2c4a3e;
  cursor: pointer;
}

.dhs-form input[type="checkbox"] + label,
.dhs-form input[type="radio"] + label {
  color: #2b2622;
  line-height: 1.5;
  cursor: pointer;
}


/* ---------------------------------------------------------
   6. Hilfs- und Beschreibungstexte
   --------------------------------------------------------- */

.dhs-form .ff-el-help-message,
.dhs-form .ff-el-input--content small {
  display: block;
  margin-top: 0.4rem;

  color: #5d5751;

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


/* ---------------------------------------------------------
   7. Fehlermeldungen
   Fehler werden nicht nur durch Farbe gekennzeichnet.
   --------------------------------------------------------- */

.dhs-form .ff-el-is-error .ff-el-form-control {
  background-color: #fff7f7;
  border-color: #9d2525;
  border-width: 3px;
}

.dhs-form .error,
.dhs-form .text-danger,
.dhs-form .ff-el-is-error .text-danger {
  display: block;
  margin-top: 0.45rem;

  color: #8f1f1f;

  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
}


/* ---------------------------------------------------------
   8. Absenden-, Weiter- und Zurück-Buttons
   --------------------------------------------------------- */

.dhs-form .ff-btn-submit,
.dhs-form .step-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 44px;
  min-height: 48px;
  padding: 0.85rem 1.35rem;

  color: #ffffff;
  background-color: #2c4a3e;

  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;

  border: 2px solid #2c4a3e;
  border-radius: 8px;

  cursor: pointer;

  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.dhs-form .ff-btn-submit:hover,
.dhs-form .step-nav button:hover {
  color: #ffffff;
  background-color: #3d6355;
  border-color: #3d6355;
}

.dhs-form .ff-btn-submit:focus-visible,
.dhs-form .step-nav button:focus-visible {
  outline: 3px solid #c96f4a;
  outline-offset: 3px;
}


/* ---------------------------------------------------------
   9. Deaktivierte Zustände
   --------------------------------------------------------- */

.dhs-form .ff-btn-submit:disabled,
.dhs-form .step-nav button:disabled,
.dhs-form .ff-el-form-control:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* ---------------------------------------------------------
   10. Smartphone
   --------------------------------------------------------- */

@media (max-width: 479px) {
  .dhs-form .ff-btn-submit,
  .dhs-form .step-nav button {
    width: 100%;
  }
}/* =========================================================
   dieHunde.schule – Inhalte und Typografie
   ========================================================= */


/* ---------------------------------------------------------
   1. Lesetext
   Klasse dhs-prose wird auf den umschließenden Div gesetzt.
   --------------------------------------------------------- */

.dhs-prose {
  color: #2b2622;
}

.dhs-prose > :first-child {
  margin-top: 0;
}

.dhs-prose > :last-child {
  margin-bottom: 0;
}

.dhs-prose p,
.dhs-prose ul,
.dhs-prose ol,
.dhs-prose blockquote,
.dhs-prose figure,
.dhs-prose .dhs-table-wrap {
  margin-top: 0;
  margin-bottom: 1.4rem;
}


/* ---------------------------------------------------------
   2. Einleitungstext
   --------------------------------------------------------- */

.dhs-lead {
  max-width: 760px;

  color: #3f3934;

  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem);
  font-weight: 400;
  line-height: 1.65;
}


/* ---------------------------------------------------------
   3. Listen
   --------------------------------------------------------- */

.dhs-prose ul,
.dhs-prose ol {
  padding-left: 1.5rem;
}

.dhs-prose li {
  padding-left: 0.25rem;
}

.dhs-prose li + li {
  margin-top: 0.55rem;
}

.dhs-prose li::marker {
  color: #3d6355;
  font-weight: 700;
}


/* ---------------------------------------------------------
   4. Hervorhebungen
   --------------------------------------------------------- */

.dhs-prose strong {
  color: inherit;
  font-weight: 700;
}

.dhs-prose mark {
  color: #2b2622;
  background-color: #f4e4d7;
  padding: 0.08em 0.22em;
}


/* ---------------------------------------------------------
   5. Zitate
   --------------------------------------------------------- */

.dhs-quote,
.dhs-prose blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: clamp(1.25rem, 3vw, 2rem);

  color: #2b2622;
  background-color: #f4e4d7;

  border-left: 5px solid #a85536;
  border-radius: 0 12px 12px 0;
}

.dhs-quote p:last-child,
.dhs-prose blockquote p:last-child {
  margin-bottom: 0;
}

.dhs-quote cite,
.dhs-prose blockquote cite {
  display: block;
  margin-top: 1rem;

  color: #5d5751;

  font-size: 0.95rem;
  font-style: normal;
  font-weight: 600;
}


/* ---------------------------------------------------------
   6. Bilder und Bildunterschriften
   --------------------------------------------------------- */

.dhs-prose figure {
  width: 100%;
}

.dhs-prose figure img {
  display: block;
  width: 100%;
  height: auto;

  border-radius: 12px;
}

.dhs-prose figcaption {
  margin-top: 0.6rem;

  color: #5d5751;

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


/* ---------------------------------------------------------
   7. Tabellen
   Tabellen bei Bedarf in einen Div mit dhs-table-wrap setzen.
   --------------------------------------------------------- */

.dhs-table-wrap {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.dhs-table-wrap table {
  width: 100%;
  min-width: 640px;

  border-collapse: collapse;
  border-spacing: 0;
}

.dhs-table-wrap caption {
  margin-bottom: 0.75rem;

  color: #2b2622;

  font-weight: 700;
  text-align: left;
}

.dhs-table-wrap th,
.dhs-table-wrap td {
  padding: 0.85rem 1rem;

  color: #2b2622;

  line-height: 1.5;
  text-align: left;
  vertical-align: top;

  border: 1px solid #d8ddd9;
}

.dhs-table-wrap th {
  background-color: #eaf0ed;
  font-weight: 700;
}


/* ---------------------------------------------------------
   8. Zielpositionen für Sprunglinks
   --------------------------------------------------------- */

.dhs-anchor-target {
  scroll-margin-top: 8rem;
}


/* ---------------------------------------------------------
   9. Smartphone
   --------------------------------------------------------- */

@media (max-width: 479px) {
  .dhs-quote,
  .dhs-prose blockquote {
    border-left-width: 4px;
    border-radius: 0 10px 10px 0;
  }
}/* =========================================================
   dieHunde.schule – Footer
   ========================================================= */

/* Äußere Footer-Fläche */
.dhs-footer {
  color: #ffffff;
  background-color: #2c4a3e;
}

.dhs-footer > .ct-section-inner-wrap {
  width: 100%;
}

/* Dreispaltiger Hauptbereich */
.dhs-footer .dhs-grid--3 {
  grid-template-columns: 1.3fr 0.8fr 1fr;
  align-items: start;
}

/* Überschriften */
.dhs-footer h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: #ffffff;
  font-size: 1.25rem;
  line-height: 1.3;
}

/* Fließtexte */
.dhs-footer p {
  margin-top: 0;
  margin-bottom: 1rem;
  color: #eaf0ed;
}

/* Normale Links im Footer */
.dhs-footer a:not(.dhs-btn) {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.dhs-footer a:not(.dhs-btn):hover {
  color: #f4e4d7;
}

/* Footer-Navigation untereinander */
.dhs-footer .oxy-nav-menu-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

.dhs-footer .oxy-nav-menu-list > li {
  margin: 0;
}

/* CTA-Button */
.dhs-footer .dhs-btn {
  margin-top: 0.25rem;
}

/* Korrigierter Hover:
   heller Hintergrund statt Grün auf Grün */
.dhs-footer .dhs-btn--accent:hover {
  color: #2c4a3e;
  background-color: #f4e4d7;
  border-color: #f4e4d7;
  text-decoration: none;
}

/* Untere Abschlusszeile */
.dhs-footer__bottom {
  width: 100%;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.dhs-footer__bottom p {
  margin: 0;
  color: #eaf0ed;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Tablet */
@media (max-width: 991px) {
  .dhs-footer .dhs-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Smartphone und kleinere Geräte */
@media (max-width: 767px) {
  .dhs-footer .dhs-grid--3 {
    grid-template-columns: 1fr;
  }
}/* =========================================================
   dieHunde.schule – Header
   ========================================================= */


/* =========================================================
   1. Grundaufbau
   ========================================================= */

.dhs-header {
  position: relative;
  z-index: 1000;

  width: 100%;

  background-color: #ffffff;
  border-bottom: 1px solid #d8ddd9;
  box-shadow: 0 4px 18px rgba(44, 74, 62, 0.07);

  overflow: visible;
}

.dhs-header .oxy-header-row {
  background-color: #ffffff;
  overflow: visible;
}

.dhs-header .oxy-header-container {
  width: 100%;
  max-width: 1120px;
  min-height: 88px;

  margin-right: auto;
  margin-left: auto;

  padding-right: 20px;
  padding-left: 20px;

  gap: 1rem;
  overflow: visible;
}


/* =========================================================
   2. Obere CTA-Zeile
   Standardmäßig auf großen Bildschirmen ausgeblendet
   ========================================================= */

.dhs-header__mobile-row {
  display: none !important;

  width: 100%;

  background-color: #f4e4d7 !important;
  border-bottom: 1px solid #e2cbbb;
}


/* Container der oberen CTA-Zeile */

.dhs-header .dhs-header__mobile-row .oxy-header-container {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 1120px;
  min-height: 0 !important;

  margin-right: auto;
  margin-left: auto;

  padding-top: 7px;
  padding-right: 20px;
  padding-bottom: 7px;
  padding-left: 20px;

  gap: 0;
}


/* Leere Außenbereiche der CTA-Zeile */

.dhs-header__mobile-row .oxy-header-left,
.dhs-header__mobile-row .oxy-header-right {
  flex: 0 0 0;
  width: 0;
  min-width: 0;

  overflow: hidden;
}


/* Mittlerer Bereich der CTA-Zeile */

.dhs-header__mobile-row .oxy-header-center {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;

  width: 100%;
}


/* Oberer CTA */

.dhs-header__mobile-cta {
  width: auto;
  min-width: 240px;
  min-height: 46px;

  padding: 0.75rem 1.25rem;

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


/* =========================================================
   3. Marke
   ========================================================= */

.dhs-header__brand {
  display: inline-flex;
  align-items: center;

  color: #2c4a3e;

  font-family: "Fraunces", serif;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;

  white-space: nowrap;
  text-decoration: none !important;
}

.dhs-header__brand:hover,
.dhs-header__brand:focus-visible {
  color: #a85536;
  text-decoration: none !important;
}


/* =========================================================
   4. Desktop-Navigation
   ========================================================= */

@media (min-width: 993px) {

  .dhs-header__menu .oxy-nav-menu-list {
    display: flex;
    align-items: center;
    gap: 0.1rem;
  }

  .dhs-header__menu .oxy-nav-menu-list > li {
    margin: 0;
  }

  .dhs-header__menu .oxy-nav-menu-list > li > a {
    padding: 0.75rem 0.42rem;

    color: #2b2622;

    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;

    white-space: nowrap;
    text-decoration: none;

    border-radius: 6px;
  }

  .dhs-header__menu .oxy-nav-menu-list > li > a:hover,
  .dhs-header__menu .oxy-nav-menu-list > li > a:focus-visible {
    color: #2c4a3e;
    background-color: #eaf0ed;
    text-decoration: none;
  }

  .dhs-header__menu .current-menu-item > a,
  .dhs-header__menu .current-menu-ancestor > a {
    color: #2c4a3e;
    background-color: #eaf0ed;
  }


  /* Desktop-Untermenüs */

  .dhs-header__menu .sub-menu {
    min-width: 230px;
    padding: 0.55rem;

    background-color: #ffffff;
    border: 1px solid #d8ddd9;
    border-radius: 10px;

    box-shadow: 0 12px 30px rgba(44, 74, 62, 0.14);
  }

  .dhs-header__menu .sub-menu li {
    margin: 0;
  }

  .dhs-header__menu .sub-menu a {
    display: block;

    padding: 0.7rem 0.8rem;

    color: #2b2622;

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

    text-decoration: none;
    border-radius: 6px;
  }

  .dhs-header__menu .sub-menu a:hover,
  .dhs-header__menu .sub-menu a:focus-visible {
    color: #2c4a3e;
    background-color: #eaf0ed;
    text-decoration: none;
  }
}


/* =========================================================
   5. Früher CTA-Wechsel bis 1420 Pixel
   Das Desktop-Menü bleibt zunächst erhalten.
   ========================================================= */

@media (max-width: 1420px) {

  /*
   Die obere CTA-Zeile wird bereits eingeblendet,
   bevor der Button rechts aus dem Header gedrängt wird.
  */

  .dhs-header__mobile-row {
    display: block !important;
  }


  /*
   Der rechte CTA wird gleichzeitig ausgeblendet.
   Es gibt dadurch niemals zwei sichtbare CTA-Buttons.
  */

  .dhs-header__desktop-cta {
    display: none !important;
  }
}


/* =========================================================
   6. Kompakter Desktop zwischen 993 und 1100 Pixel
   ========================================================= */

@media (min-width: 993px) and (max-width: 1100px) {

  .dhs-header .oxy-header-container {
    gap: 0.65rem;
  }

  .dhs-header__brand {
    font-size: 1.25rem;
  }

  .dhs-header__menu .oxy-nav-menu-list > li > a {
    padding-right: 0.3rem;
    padding-left: 0.3rem;

    font-size: 0.86rem;
  }
}


/* =========================================================
   7. Tablet und Smartphone bis 992 Pixel
   ========================================================= */

@media (max-width: 992px) {

  /*
   Die obere CTA-Zeile bleibt sichtbar.
  */

  .dhs-header__mobile-row {
    display: block !important;
  }


  /*
   Auf Tablet darf der obere CTA etwas breiter sein.
  */

  .dhs-header__mobile-cta {
    width: 100%;
    max-width: 420px;
  }


  /*
   Normale Hauptzeile mit Marke und Hamburger.
  */

  .dhs-header > .oxy-header-row:not(.dhs-header__mobile-row)
  .oxy-header-container {
    min-height: 76px;
  }

  .dhs-header__brand {
    font-size: 1.3rem;
  }

  .dhs-header,
  .dhs-header .oxy-header-row,
  .dhs-header .oxy-header-container {
    overflow: visible;
  }


  /* ---------------------------------------------------------
     Geöffnetes mobiles Menü
     --------------------------------------------------------- */

  body .dhs-header .dhs-header__menu.oxy-nav-menu-open {
    position: absolute !important;

    top: calc(100% + 8px) !important;
    right: 20px !important;
    bottom: auto !important;
    left: auto !important;

    display: block !important;

    width: min(420px, calc(100vw - 40px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 100px) !important;

    margin: 0 !important;
    padding: 0.75rem !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    background-color: #ffffff !important;

    border: 1px solid #d8ddd9 !important;
    border-radius: 12px !important;

    box-shadow: 0 16px 38px rgba(44, 74, 62, 0.2) !important;

    box-sizing: border-box !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }


  /* Mobile Linkliste */

  body .dhs-header .dhs-header__menu.oxy-nav-menu-open
  > .oxy-nav-menu-list {
    position: static !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background-color: transparent !important;

    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }


  /* Mobile Menüpunkte */

  body .dhs-header .dhs-header__menu.oxy-nav-menu-open
  .menu-item {
    width: 100% !important;
    margin: 0 !important;
  }

  body .dhs-header .dhs-header__menu.oxy-nav-menu-open
  .menu-item > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;

    padding: 0.85rem 1rem !important;

    color: #2b2622 !important;
    background-color: transparent !important;

    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;

    text-align: left !important;
    text-decoration: none !important;

    border-radius: 8px !important;
    box-sizing: border-box !important;
  }


  /* Hover und Tastaturfokus */

  body .dhs-header .dhs-header__menu.oxy-nav-menu-open
  .menu-item > a:hover,

  body .dhs-header .dhs-header__menu.oxy-nav-menu-open
  .menu-item > a:focus-visible {
    color: #2c4a3e !important;
    background-color: #eaf0ed !important;
    text-decoration: none !important;
  }


  /* Aktuelle Seite */

  body .dhs-header .dhs-header__menu.oxy-nav-menu-open
  .current-menu-item > a,

  body .dhs-header .dhs-header__menu.oxy-nav-menu-open
  .current-menu-ancestor > a {
    color: #2c4a3e !important;
    background-color: #eaf0ed !important;
  }


  /* Mobile Untermenüs */

  body .dhs-header .dhs-header__menu.oxy-nav-menu-open
  .sub-menu {
    position: static !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 0 0 1rem !important;

    background-color: transparent !important;

    border: 0 !important;
    box-shadow: none !important;

    transform: none !important;
  }

  body .dhs-header .dhs-header__menu.oxy-nav-menu-open
  .sub-menu li {
    width: 100% !important;
  }

  body .dhs-header .dhs-header__menu.oxy-nav-menu-open
  .sub-menu a {
    padding: 0.65rem 0.9rem !important;

    font-size: 0.95rem !important;
  }
}


/* =========================================================
   8. Smartphone unter 768 Pixel
   ========================================================= */

@media (max-width: 767px) {

  .dhs-header > .oxy-header-row:not(.dhs-header__mobile-row)
  .oxy-header-container {
    min-height: 72px;
  }

  .dhs-header .dhs-header__mobile-row .oxy-header-container {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}


/* =========================================================
   9. Sehr kleine Smartphones
   ========================================================= */

@media (max-width: 479px) {

  body .dhs-header .dhs-header__menu.oxy-nav-menu-open {
    top: calc(100% + 6px) !important;
    right: 12px !important;
    left: auto !important;

    width: calc(100vw - 24px) !important;
    max-width: none !important;
  }

  .dhs-header__brand {
    font-size: 1.2rem;
  }

  .dhs-header .dhs-header__mobile-row .oxy-header-container {
    padding-right: 12px;
    padding-left: 12px;
  }

  .dhs-header__mobile-cta {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
}/* =========================================================
   dieHunde.schule – Startseite
   ========================================================= */


/* =========================================================
   1. Hero-Bereich
   ========================================================= */

.dhs-section--hero {
  position: relative;
  overflow: hidden;
  background-color: #fdfbf8;
}

.dhs-section--hero > .ct-section-inner-wrap {
  padding-top: clamp(4rem, 6vw, 5.5rem);
  padding-bottom: clamp(4rem, 6vw, 5.5rem);
}

.dhs-hero__grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(480px, 1fr);

  align-items: stretch;
  gap: clamp(3rem, 5vw, 5rem);
}


/* =========================================================
   2. Hero-Text
   ========================================================= */

.dhs-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  width: 100%;
  max-width: 680px;
}

.dhs-hero__eyebrow {
  display: inline-flex;
  align-items: center;

  margin: 0 0 1.25rem;
  padding: 0.55rem 0.85rem;

  color: #a85536;
  background-color: #f4e4d7;

  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.035em;

  border-radius: 999px;
}

.dhs-hero__title {
  max-width: 680px;

  margin-top: 0;
  margin-bottom: 1.5rem;

  color: #2c4a3e;

  font-size: clamp(3rem, 4vw, 3.75rem);
  font-weight: 700;
  line-height: 1.07;
}

.dhs-hero__lead {
  max-width: 620px;

  margin-top: 0;
  margin-bottom: 0;

  color: #5c564f;
}


/* =========================================================
   3. Hero-Buttons
   ========================================================= */

.dhs-hero__actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;

  width: 100%;
  margin-top: 2rem;

  gap: 0.75rem;
}

.dhs-hero__actions .dhs-btn {
  flex: 0 0 auto;
}


/* =========================================================
   4. Hero-Bildfläche
   ========================================================= */

.dhs-hero__media {
  position: relative;
  isolation: isolate;

  display: block;
  align-self: stretch;

  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;

  overflow: hidden;

  background-color: #eaf0ed;

  border: 1px solid rgba(44, 74, 62, 0.14);
  border-radius: 24px;

  box-shadow:
    0 28px 70px rgba(44, 74, 62, 0.22),
    0 8px 22px rgba(44, 74, 62, 0.10);
}

.dhs-hero__media::after {
  content: "";

  position: absolute;
  inset: 14px;
  z-index: -1;

  pointer-events: none;

  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 16px;
}

.dhs-hero__image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: 58% center;

  border-radius: inherit;
}


/* =========================================================
   5. Allgemeine Bereichskennzeichnung
   ========================================================= */

.dhs-section-eyebrow {
  display: inline-flex;
  align-items: center;

  margin: 0 0 1rem;
  padding: 0.5rem 0.8rem;

  color: #a85536;
  background-color: #f4e4d7;

  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.035em;

  border-radius: 999px;
}


/* =========================================================
   6. Bereich „Hundisch verstehen“
   ========================================================= */

.dhs-home-understand {
  position: relative;
  overflow: hidden;

  background-color: #f0ebe3;
}

.dhs-home-understand > .ct-section-inner-wrap {
  padding-top: clamp(4.5rem, 7vw, 6.5rem);
  padding-bottom: clamp(4.5rem, 7vw, 6.5rem);
}

.dhs-home-understand .dhs-section-intro {
  max-width: 820px;

  margin-right: auto;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  margin-left: 0;
}

.dhs-home-understand .dhs-section-title {
  max-width: 760px;

  margin-top: 0;
  margin-bottom: 1.25rem;

  color: #2c4a3e;

  font-size: clamp(2.65rem, 4.5vw, 3.6rem);
  line-height: 1.08;
}

.dhs-home-understand .dhs-section-lead {
  max-width: 780px;

  margin-top: 0;
  margin-bottom: 0;

  color: #5c564f;
}


/* =========================================================
   7. Szenenkarten
   ========================================================= */

.dhs-understand-grid {
  align-items: stretch;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.dhs-understand-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;

  min-width: 0;
  height: 100%;

  padding: 0;

  overflow: hidden;

  background-color: #ffffff;

  border: 1px solid rgba(44, 74, 62, 0.16);
  border-radius: 16px;

  box-shadow: 0 16px 36px rgba(44, 74, 62, 0.09);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.dhs-understand-card:hover {
  transform: translateY(-4px);

  border-color: rgba(44, 74, 62, 0.28);
  box-shadow: 0 22px 46px rgba(44, 74, 62, 0.14);
}


/* =========================================================
   8. Bildflächen der Szenenkarten
   ========================================================= */

.dhs-understand-card__media {
  position: relative;

  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 210px;

  overflow: hidden;

  border-bottom: 1px solid rgba(44, 74, 62, 0.12);
}

.dhs-understand-card:nth-child(1) .dhs-understand-card__media {
  background:
    radial-gradient(
      circle at 72% 28%,
      rgba(201, 111, 74, 0.25),
      transparent 32%
    ),
    linear-gradient(145deg, #eaf0ed, #dbe7e1);
}

.dhs-understand-card:nth-child(2) .dhs-understand-card__media {
  background:
    radial-gradient(
      circle at 30% 70%,
      rgba(61, 99, 85, 0.24),
      transparent 34%
    ),
    linear-gradient(145deg, #f4e4d7, #efe9e1);
}

.dhs-understand-card:nth-child(3) .dhs-understand-card__media {
  background:
    radial-gradient(
      circle at 72% 26%,
      rgba(168, 85, 54, 0.19),
      transparent 32%
    ),
    linear-gradient(145deg, #e8eeeb, #f1e5dc);
}

.dhs-understand-card__media::after {
  content: "";

  position: absolute;
  inset: 12px;

  pointer-events: none;

  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 10px;
}


/* =========================================================
   9. Inhalte der Szenenkarten
   ========================================================= */

.dhs-understand-card__eyebrow,
.dhs-understand-card__title,
.dhs-understand-card__text,
.dhs-understand-card__link,
.dhs-understand-card > a {
  margin-right: 1.5rem;
  margin-left: 1.5rem;
}

.dhs-understand-card__eyebrow {
  margin-top: 1.5rem;
  margin-bottom: 0.6rem;

  color: #a85536;

  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.dhs-understand-card__title {
  margin-top: 0;
  margin-bottom: 0.85rem;

  color: #2c4a3e;

  font-size: clamp(1.55rem, 2vw, 1.9rem);
  line-height: 1.18;
}

.dhs-understand-card__text {
  margin-top: 0;
  margin-bottom: 1.25rem;

  color: #5c564f;

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

.dhs-understand-card__link,
.dhs-understand-card > a {
  display: inline-flex;
  align-items: center;

  align-self: flex-start;
  width: auto;

  margin-top: auto;
  margin-bottom: 1.5rem;
  padding-bottom: 0.15rem;

  color: #2c4a3e;

  font-weight: 700;
  line-height: 1.35;

  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.dhs-understand-card__link::after,
.dhs-understand-card > a::after {
  content: "→";

  display: inline-block;
  margin-left: 0.45rem;

  text-decoration: none;
}

.dhs-understand-card__link:hover,
.dhs-understand-card__link:focus-visible,
.dhs-understand-card > a:hover,
.dhs-understand-card > a:focus-visible {
  color: #a85536;
}


/* =========================================================
   10. Bereich „Ablauf“
   ========================================================= */

.dhs-home-process {
  position: relative;
  overflow: hidden;

  background-color: #fdfbf8;
}

.dhs-home-process > .ct-section-inner-wrap {
  padding-top: clamp(4.5rem, 7vw, 6.5rem);
  padding-bottom: clamp(4.5rem, 7vw, 6.5rem);
}

.dhs-home-process .dhs-section-intro {
  max-width: 820px;

  margin-right: auto;
  margin-bottom: clamp(2.75rem, 5vw, 4rem);
  margin-left: 0;
}

.dhs-home-process .dhs-section-title {
  max-width: 780px;

  margin-top: 0;
  margin-bottom: 1.25rem;

  color: #2c4a3e;

  font-size: clamp(2.65rem, 4.5vw, 3.6rem);
  line-height: 1.08;
}

.dhs-home-process .dhs-section-lead {
  max-width: 790px;

  margin-top: 0;
  margin-bottom: 0;

  color: #5c564f;
}


/* =========================================================
   11. Ablaufkarten
   ========================================================= */

.dhs-process-grid {
  position: relative;

  align-items: stretch;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.dhs-process-card {
  position: relative;

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

  min-width: 0;
  height: 100%;

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

  overflow: hidden;

  background-color: #ffffff;

  border: 1px solid rgba(44, 74, 62, 0.15);
  border-radius: 16px;

  box-shadow: 0 14px 34px rgba(44, 74, 62, 0.08);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.dhs-process-card::before {
  content: "";

  position: absolute;
  top: 0;
  right: 0;
  left: 0;

  height: 5px;

  background-color: #3d6355;
}

.dhs-process-card:nth-child(2)::before {
  background-color: #c96f4a;
}

.dhs-process-card:nth-child(3)::before {
  background-color: #2c4a3e;
}

.dhs-process-card:hover {
  transform: translateY(-4px);

  border-color: rgba(44, 74, 62, 0.28);
  box-shadow: 0 20px 44px rgba(44, 74, 62, 0.13);
}

.dhs-process-card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 3.25rem;
  height: 3.25rem;

  margin: 0 0 1.5rem;

  color: #ffffff;
  background-color: #2c4a3e;

  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;

  border-radius: 999px;

  box-shadow: 0 8px 20px rgba(44, 74, 62, 0.2);
}

.dhs-process-card:nth-child(2) .dhs-process-card__number {
  color: #2b2622;
  background-color: #f4e4d7;

  box-shadow: 0 8px 20px rgba(168, 85, 54, 0.12);
}

.dhs-process-card:nth-child(3) .dhs-process-card__number {
  background-color: #3d6355;
}

.dhs-process-card__title {
  margin-top: 0;
  margin-bottom: 0.85rem;

  color: #2c4a3e;

  font-size: clamp(1.5rem, 2vw, 1.85rem);
  line-height: 1.18;
}

.dhs-process-card__text {
  margin-top: 0;
  margin-bottom: 0;

  color: #5c564f;

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


/* =========================================================
   12. Aktionsbereich unter den Ablaufkarten
   ========================================================= */

.dhs-process-action {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;

  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);

  gap: 1.5rem;

  background:
    radial-gradient(
      circle at 90% 20%,
      rgba(201, 111, 74, 0.14),
      transparent 28%
    ),
    #eaf0ed;

  border: 1px solid rgba(44, 74, 62, 0.14);
  border-radius: 16px;
}

.dhs-process-action__text {
  max-width: 620px;

  margin: 0;

  color: #2c4a3e;

  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 700;
  line-height: 1.45;
}

.dhs-process-action .dhs-btn {
  flex: 0 0 auto;
}


/* =========================================================
   13. Bereich „Leistungen“
   ========================================================= */

.dhs-home-services {
  position: relative;
  overflow: hidden;

  background-color: #eaf0ed;
}

.dhs-home-services > .ct-section-inner-wrap {
  padding-top: clamp(4.5rem, 7vw, 6.5rem);
  padding-bottom: clamp(4.5rem, 7vw, 6.5rem);
}

.dhs-home-services .dhs-section-intro {
  max-width: 840px;

  margin-right: auto;
  margin-bottom: clamp(2.75rem, 5vw, 4rem);
  margin-left: 0;
}

.dhs-home-services .dhs-section-title {
  max-width: 800px;

  margin-top: 0;
  margin-bottom: 1.25rem;

  color: #2c4a3e;

  font-size: clamp(2.65rem, 4.5vw, 3.6rem);
  line-height: 1.08;
}

.dhs-home-services .dhs-section-lead {
  max-width: 800px;

  margin-top: 0;
  margin-bottom: 0;

  color: #5c564f;
}


/* =========================================================
   14. Leistungskarten
   ========================================================= */

.dhs-services-grid {
  align-items: stretch;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.dhs-service-card {
  position: relative;
  isolation: isolate;

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

  min-width: 0;
  height: 100%;

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

  overflow: hidden;

  background-color: #ffffff;

  border: 1px solid rgba(44, 74, 62, 0.15);
  border-radius: 16px;

  box-shadow: 0 14px 34px rgba(44, 74, 62, 0.08);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.dhs-service-card::before {
  content: "";

  position: absolute;
  top: -48px;
  right: -48px;
  z-index: -1;

  width: 130px;
  height: 130px;

  background-color: rgba(61, 99, 85, 0.08);

  border-radius: 999px;
}

.dhs-service-card:nth-child(2n)::before {
  background-color: rgba(201, 111, 74, 0.1);
}

.dhs-service-card:nth-child(3n)::before {
  background-color: rgba(44, 74, 62, 0.1);
}

.dhs-service-card:hover {
  transform: translateY(-4px);

  border-color: rgba(44, 74, 62, 0.28);
  box-shadow: 0 20px 44px rgba(44, 74, 62, 0.13);
}

.dhs-service-card__eyebrow {
  margin-top: 0;
  margin-bottom: 0.75rem;

  color: #a85536;

  font-size: 0.8rem;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.dhs-service-card__title {
  margin-top: 0;
  margin-bottom: 0.85rem;

  color: #2c4a3e;

  font-size: clamp(1.5rem, 2vw, 1.85rem);
  line-height: 1.18;
}

.dhs-service-card__text {
  margin-top: 0;
  margin-bottom: 1.35rem;

  color: #5c564f;

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

.dhs-service-card__link {
  display: inline-flex;
  align-items: center;

  align-self: flex-start;
  width: auto;

  margin-top: auto;
  padding-bottom: 0.15rem;

  color: #2c4a3e;

  font-weight: 700;
  line-height: 1.35;

  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.dhs-service-card__link::after {
  content: "→";

  display: inline-block;
  margin-left: 0.45rem;

  text-decoration: none;
}

.dhs-service-card__link:hover,
.dhs-service-card__link:focus-visible {
  color: #a85536;
}


/* =========================================================
   15. Aktionsbereich unter den Leistungskarten
   ========================================================= */

.dhs-services-action {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;

  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);

  gap: 1.5rem;

  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(201, 111, 74, 0.18),
      transparent 30%
    ),
    #ffffff;

  border: 1px solid rgba(44, 74, 62, 0.15);
  border-radius: 16px;

  box-shadow: 0 12px 28px rgba(44, 74, 62, 0.07);
}

.dhs-services-action__text {
  max-width: 670px;

  margin: 0;

  color: #2c4a3e;

  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 700;
  line-height: 1.5;
}

.dhs-services-action .dhs-btn {
  flex: 0 0 auto;
}


/* =========================================================
   16. Bereich „Qualifikationen“
   ========================================================= */

.dhs-home-credentials {
  position: relative;
  overflow: hidden;

  background-color: #fdfbf8;
}

.dhs-home-credentials > .ct-section-inner-wrap {
  padding-top: clamp(4.5rem, 7vw, 6.5rem);
  padding-bottom: clamp(4.5rem, 7vw, 6.5rem);
}

.dhs-credentials-grid {
  grid-template-columns:
    minmax(0, 1.02fr)
    minmax(0, 0.98fr);

  align-items: start;

  gap: clamp(2.5rem, 5vw, 4.5rem);
}

.dhs-credentials-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: start;

  width: 100%;
  max-width: 600px;
}

.dhs-home-credentials .dhs-section-title {
  max-width: 600px;

  margin-top: 0;
  margin-bottom: 1.25rem;

  color: #2c4a3e;

  font-size: clamp(2.65rem, 4.5vw, 3.6rem);
  line-height: 1.08;

  -webkit-hyphens: none;
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}

.dhs-home-credentials .dhs-section-lead {
  max-width: 600px;

  margin-top: 0;
  margin-bottom: 0;

  color: #5c564f;
}


/* =========================================================
   17. Nachweisliste und Qualifikationskarten
   ========================================================= */

.dhs-credentials-list {
  display: grid;
  grid-template-columns: 1fr;

  align-self: start;

  width: 100%;

  gap: 1.25rem;
}

.dhs-credential-card {
  display: grid;

  grid-template-columns:
    150px
    minmax(0, 1fr);

  grid-template-areas:
    "media eyebrow"
    "media title"
    "media text"
    "media link";

  align-items: start;

  min-width: 0;
  width: 100%;

  padding: 1.5rem;

  column-gap: 1.5rem;
  row-gap: 0;

  overflow: hidden;

  background-color: #ffffff;

  border: 1px solid rgba(44, 74, 62, 0.16);
  border-radius: 16px;

  box-shadow: 0 14px 34px rgba(44, 74, 62, 0.08);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.dhs-credential-card:hover {
  transform: translateY(-3px);

  border-color: rgba(44, 74, 62, 0.28);
  box-shadow: 0 20px 44px rgba(44, 74, 62, 0.13);
}

.dhs-credential-card__media {
  position: relative;
  grid-area: media;

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

  width: 150px;
  max-width: 100%;
  aspect-ratio: 1 / 1;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 72% 25%,
      rgba(201, 111, 74, 0.22),
      transparent 32%
    ),
    #eaf0ed;

  border: 1px solid rgba(44, 74, 62, 0.12);
  border-radius: 14px;
}

.dhs-credential-card:nth-child(2) .dhs-credential-card__media {
  background:
    radial-gradient(
      circle at 28% 76%,
      rgba(61, 99, 85, 0.22),
      transparent 34%
    ),
    #f4e4d7;
}

.dhs-credential-card__media::after {
  content: "";

  position: absolute;
  inset: 9px;

  pointer-events: none;

  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 9px;
}

.dhs-credential-card__image {
  position: relative;
  z-index: 1;

  display: block;

  width: 100%;
  height: 100%;

  padding: 0.75rem;

  object-fit: contain;
  object-position: center;
}

.dhs-credential-card__eyebrow {
  grid-area: eyebrow;

  margin-top: 0;
  margin-bottom: 0.55rem;

  color: #a85536;

  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.dhs-credential-card__title {
  grid-area: title;

  margin-top: 0;
  margin-bottom: 0.7rem;

  color: #2c4a3e;

  font-size: clamp(1.45rem, 2vw, 1.8rem);
  line-height: 1.18;

  -webkit-hyphens: none;
  hyphens: none;
  word-break: normal;
  overflow-wrap: break-word;
}

.dhs-credential-card__text {
  grid-area: text;

  margin-top: 0;
  margin-bottom: 1rem;

  color: #5c564f;

  font-size: 0.96rem;
  line-height: 1.58;
}

.dhs-credential-card__link {
  grid-area: link;

  display: inline-flex;
  align-items: center;

  justify-self: start;
  align-self: end;

  width: auto;

  margin-top: auto;
  padding-bottom: 0.15rem;

  color: #2c4a3e;

  font-weight: 700;
  line-height: 1.35;

  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.dhs-credential-card__link::after {
  content: "→";

  display: inline-block;
  margin-left: 0.45rem;

  text-decoration: none;
}

.dhs-credential-card__link:hover,
.dhs-credential-card__link:focus-visible {
  color: #a85536;
}


/* =========================================================
   18. Bereich „Urlaubshundetraining“
   ========================================================= */

.dhs-home-holiday {
  position: relative;
  isolation: isolate;

  overflow: hidden;

  color: #ffffff;
  background-color: #2c4a3e;
}

.dhs-home-holiday::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: -2;

  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(201, 111, 74, 0.22),
      transparent 30%
    ),
    radial-gradient(
      circle at 92% 82%,
      rgba(255, 255, 255, 0.1),
      transparent 34%
    );
}

.dhs-home-holiday::after {
  content: "";

  position: absolute;
  top: -180px;
  right: -160px;
  z-index: -1;

  width: 460px;
  height: 460px;

  pointer-events: none;

  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
}

.dhs-home-holiday > .ct-section-inner-wrap {
  position: relative;
  z-index: 1;

  padding-top: clamp(4.5rem, 7vw, 6.5rem);
  padding-bottom: clamp(4.5rem, 7vw, 6.5rem);
}

.dhs-holiday-grid {
  grid-template-columns:
    minmax(0, 1.04fr)
    minmax(360px, 0.96fr);

  align-items: start;

  gap: clamp(3rem, 6vw, 5.5rem);
}


/* =========================================================
   19. Textbereich Urlaubshundetraining
   ========================================================= */

.dhs-holiday-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  width: 100%;
  max-width: 620px;
}

.dhs-home-holiday .dhs-section-eyebrow {
  color: #f4e4d7;
  background-color: rgba(244, 228, 215, 0.11);

  border: 1px solid rgba(244, 228, 215, 0.22);
}

.dhs-home-holiday .dhs-section-title {
  max-width: 620px;

  margin-top: 0;
  margin-bottom: 1.25rem;

  color: #ffffff;

  font-size: clamp(2.65rem, 4.5vw, 3.6rem);
  line-height: 1.08;

  -webkit-hyphens: none;
  hyphens: none;
  word-break: normal;
}

.dhs-home-holiday .dhs-section-lead {
  max-width: 610px;

  margin-top: 0;
  margin-bottom: 0;

  color: rgba(255, 255, 255, 0.82);
}


/* =========================================================
   20. Vorteile Urlaubshundetraining
   ========================================================= */

.dhs-holiday-benefits {
  display: grid;
  grid-template-columns: 1fr;

  width: 100%;

  margin-top: 1.75rem;

  gap: 0.75rem;
}

.dhs-holiday-benefit {
  position: relative;

  display: flex;
  align-items: center;

  width: 100%;
  min-height: 3.75rem;

  padding: 0.9rem 1rem 0.9rem 3.3rem;

  background-color: rgba(255, 255, 255, 0.075);

  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
}

.dhs-holiday-benefit::before {
  content: "✓";

  position: absolute;
  top: 50%;
  left: 0.95rem;

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

  width: 1.65rem;
  height: 1.65rem;

  color: #ffffff;
  background-color: #c96f4a;

  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;

  border-radius: 999px;

  transform: translateY(-50%);
}

.dhs-holiday-benefit__text {
  margin: 0;

  color: #ffffff;

  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.45;
}


/* =========================================================
   21. Buttons Urlaubshundetraining
   ========================================================= */

.dhs-holiday-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;

  width: 100%;

  margin-top: 2rem;

  gap: 0.75rem;
}

.dhs-holiday-actions .dhs-btn {
  flex: 0 0 auto;
}

.dhs-home-holiday .dhs-btn--primary {
  color: #ffffff;
  background-color: #c96f4a;

  border-color: #c96f4a;
}

.dhs-home-holiday .dhs-btn--primary:hover,
.dhs-home-holiday .dhs-btn--primary:focus-visible {
  color: #ffffff;
  background-color: #a85536;

  border-color: #a85536;
}

.dhs-home-holiday .dhs-btn--secondary {
  color: #ffffff;
  background-color: transparent;

  border-color: rgba(255, 255, 255, 0.65);
}

.dhs-home-holiday .dhs-btn--secondary:hover,
.dhs-home-holiday .dhs-btn--secondary:focus-visible {
  color: #2c4a3e;
  background-color: #ffffff;

  border-color: #ffffff;
}


/* =========================================================
   22. Bildfläche Urlaubshundetraining
   ========================================================= */

.dhs-holiday-media {
  position: relative;
  isolation: isolate;

  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  align-self: start;

  width: 100%;
  min-height: clamp(500px, 47vw, 620px);

  overflow: hidden;

  background:
    radial-gradient(
      circle at 72% 20%,
      rgba(244, 228, 215, 0.72),
      transparent 26%
    ),
    radial-gradient(
      circle at 25% 78%,
      rgba(44, 74, 62, 0.42),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      #a9c6be 0%,
      #dce8e2 38%,
      #bdcfbd 63%,
      #789889 100%
    );

  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;

  box-shadow: 0 28px 65px rgba(13, 30, 24, 0.28);
}

.dhs-holiday-media::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      to top,
      rgba(23, 42, 35, 0.58),
      transparent 48%
    );
}

.dhs-holiday-media::after {
  content: "";

  position: absolute;
  inset: 14px;
  z-index: 1;

  pointer-events: none;

  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 16px;
}

.dhs-holiday-media__image {
  position: absolute;
  inset: 0;
  z-index: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}


/* =========================================================
   23. Hinweisbox auf der Bildfläche
   ========================================================= */

.dhs-holiday-media__badge {
  position: relative;
  z-index: 2;

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

  width: calc(100% - 3rem);
  max-width: 360px;

  margin: 1.5rem;
  padding: 1.25rem 1.35rem;

  background-color: rgba(253, 251, 248, 0.94);

  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 14px;

  box-shadow: 0 16px 38px rgba(13, 30, 24, 0.2);

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.dhs-holiday-media__eyebrow {
  margin-top: 0;
  margin-bottom: 0.4rem;

  color: #a85536;

  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.dhs-holiday-media__title {
  margin-top: 0;
  margin-bottom: 0;

  color: #2c4a3e;

  font-size: clamp(1.45rem, 2vw, 1.8rem);
  line-height: 1.18;

  -webkit-hyphens: none;
  hyphens: none;
}


/* =========================================================
   24. Bereich „Stempelkarte“
   ========================================================= */

.dhs-home-loyalty {
  position: relative;
  isolation: isolate;

  overflow: hidden;

  background-color: #f0ebe3;
}

.dhs-home-loyalty::before {
  content: "";

  position: absolute;
  top: -170px;
  left: -170px;
  z-index: -1;

  width: 430px;
  height: 430px;

  pointer-events: none;

  background-color: rgba(201, 111, 74, 0.08);

  border-radius: 999px;
}

.dhs-home-loyalty::after {
  content: "";

  position: absolute;
  right: -210px;
  bottom: -220px;
  z-index: -1;

  width: 520px;
  height: 520px;

  pointer-events: none;

  border: 1px solid rgba(44, 74, 62, 0.09);
  border-radius: 999px;
}

.dhs-home-loyalty > .ct-section-inner-wrap {
  position: relative;
  z-index: 1;

  padding-top: clamp(4.5rem, 7vw, 6.5rem);
  padding-bottom: clamp(4.5rem, 7vw, 6.5rem);
}

.dhs-loyalty-grid {
  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(420px, 1.05fr);

  align-items: start;

  gap: clamp(3rem, 6vw, 5.5rem);
}


/* =========================================================
   25. Textbereich Stempelkarte
   ========================================================= */

.dhs-loyalty-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: start;

  width: 100%;
  max-width: 590px;
}

.dhs-home-loyalty .dhs-section-title {
  max-width: 590px;

  margin-top: 0;
  margin-bottom: 1.25rem;

  color: #2c4a3e;

  font-size: clamp(2.65rem, 4.5vw, 3.6rem);
  line-height: 1.08;

  -webkit-hyphens: none;
  hyphens: none;
  word-break: normal;
}

.dhs-home-loyalty .dhs-section-lead {
  max-width: 580px;

  margin-top: 0;
  margin-bottom: 0;

  color: #5c564f;
}

.dhs-loyalty-note {
  position: relative;

  max-width: 560px;

  margin-top: 1.75rem;
  margin-bottom: 0;
  padding: 1.1rem 1.2rem 1.1rem 1.5rem;

  color: #2c4a3e;
  background-color: rgba(255, 255, 255, 0.68);

  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.55;

  border: 1px solid rgba(44, 74, 62, 0.12);
  border-left: 5px solid #c96f4a;
  border-radius: 0 12px 12px 0;
}


/* =========================================================
   26. Vorschau und Kartenrahmen
   ========================================================= */

.dhs-loyalty-visual {
  position: relative;
  isolation: isolate;

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

  width: 100%;
  padding: clamp(1rem, 2.5vw, 1.75rem);
}

.dhs-loyalty-visual::before {
  content: "";

  position: absolute;
  top: 2.75rem;
  right: 0.2rem;
  bottom: 0.2rem;
  left: 2.75rem;
  z-index: -1;

  background-color: rgba(61, 99, 85, 0.13);

  border: 1px solid rgba(44, 74, 62, 0.11);
  border-radius: 24px;

  transform: rotate(3deg);
}

.dhs-loyalty-card {
  position: relative;
  isolation: isolate;

  display: flex;
  flex-direction: column;
  align-items: stretch;

  width: 100%;
  max-width: 620px;

  padding: clamp(1.5rem, 3vw, 2.25rem);

  overflow: hidden;

  background:
    radial-gradient(
      circle at 92% 12%,
      rgba(201, 111, 74, 0.15),
      transparent 28%
    ),
    #ffffff;

  border: 1px solid rgba(44, 74, 62, 0.16);
  border-radius: 22px;

  box-shadow: 0 26px 60px rgba(44, 74, 62, 0.18);

  transform: rotate(-1deg);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.dhs-loyalty-card::before {
  content: "";

  position: absolute;
  inset: 12px;
  z-index: -1;

  pointer-events: none;

  border: 1px dashed rgba(44, 74, 62, 0.16);
  border-radius: 14px;
}

.dhs-loyalty-card:hover {
  transform: rotate(0deg) translateY(-3px);
  box-shadow: 0 32px 70px rgba(44, 74, 62, 0.22);
}


/* =========================================================
   27. Überschriften der Trainingskarte
   ========================================================= */

.dhs-loyalty-card__eyebrow {
  margin-top: 0;
  margin-bottom: 0.55rem;

  color: #a85536;

  font-size: 0.8rem;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.dhs-loyalty-card__title {
  max-width: 500px;

  margin-top: 0;
  margin-bottom: 1.75rem;

  color: #2c4a3e;

  font-size: clamp(1.8rem, 3vw, 2.45rem);
  line-height: 1.12;

  -webkit-hyphens: none;
  hyphens: none;
  word-break: normal;
}


/* =========================================================
   28. Stempelfeld
   ========================================================= */

.dhs-loyalty-stamps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));

  width: 100%;

  margin-bottom: 1.75rem;

  gap: clamp(0.65rem, 1.5vw, 1rem);
}

.dhs-loyalty-stamp {
  position: relative;

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

  min-width: 0;
  aspect-ratio: 1 / 1;

  color: #2c4a3e;
  background-color: #fdfbf8;

  border: 2px dashed rgba(61, 99, 85, 0.45);
  border-radius: 999px;

  transition:
    transform 160ms ease,
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease;
}

.dhs-loyalty-stamp::before {
  content: "";

  position: absolute;
  inset: 6px;

  pointer-events: none;

  border: 1px solid rgba(44, 74, 62, 0.09);
  border-radius: inherit;
}

.dhs-loyalty-stamp:hover {
  transform: translateY(-2px) rotate(-3deg);

  color: #ffffff;
  background-color: #3d6355;

  border-color: #3d6355;
}

.dhs-loyalty-stamp__number {
  position: relative;
  z-index: 1;

  margin: 0;

  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  font-weight: 800;
  line-height: 1;
}

.dhs-loyalty-stamp--reward {
  color: #ffffff;
  background-color: #c96f4a;

  border-color: #c96f4a;
  border-style: solid;

  box-shadow: 0 8px 20px rgba(168, 85, 54, 0.24);
}

.dhs-loyalty-stamp--reward::after {
  content: "★";

  position: absolute;
  top: 0.35rem;
  right: 0.45rem;

  color: rgba(255, 255, 255, 0.78);

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

.dhs-loyalty-stamp--reward:hover {
  color: #ffffff;
  background-color: #a85536;

  border-color: #a85536;
}


/* =========================================================
   29. Belohnungsbereich
   ========================================================= */

.dhs-loyalty-reward {
  position: relative;

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

  width: 100%;

  padding: 1.25rem 1.35rem;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 92% 16%,
      rgba(201, 111, 74, 0.18),
      transparent 32%
    ),
    #eaf0ed;

  border: 1px solid rgba(44, 74, 62, 0.13);
  border-radius: 14px;
}

.dhs-loyalty-reward::after {
  content: "10";

  position: absolute;
  right: 1rem;
  bottom: -0.75rem;

  color: rgba(44, 74, 62, 0.07);

  font-family: Fraunces, Georgia, serif;
  font-size: 6.5rem;
  font-weight: 700;
  line-height: 1;

  pointer-events: none;
}

.dhs-loyalty-reward__eyebrow {
  position: relative;
  z-index: 1;

  margin-top: 0;
  margin-bottom: 0.35rem;

  color: #a85536;

  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.dhs-loyalty-reward__title {
  position: relative;
  z-index: 1;

  max-width: 430px;

  margin-top: 0;
  margin-bottom: 0.45rem;

  color: #2c4a3e;

  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  line-height: 1.18;
}

.dhs-loyalty-reward__text {
  position: relative;
  z-index: 1;

  max-width: 430px;

  margin-top: 0;
  margin-bottom: 0;

  color: #5c564f;

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


/* =========================================================
   30. Tablet
   ========================================================= */

@media (max-width: 991px) {

  .dhs-hero__grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(360px, 1fr);

    gap: 2.5rem;
  }

  .dhs-hero__title {
    font-size: clamp(2.75rem, 5vw, 3.35rem);
  }

  .dhs-hero__media {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }

  .dhs-hero__eyebrow {
    font-size: 0.82rem;
  }

  .dhs-understand-grid,
  .dhs-process-grid,
  .dhs-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dhs-understand-card:nth-child(3),
  .dhs-process-card:nth-child(3) {
    grid-column: 1 / -1;
  }

  .dhs-understand-card:nth-child(3) .dhs-understand-card__media {
    aspect-ratio: auto;

    height: clamp(260px, 34vw, 320px);
    min-height: 0;
  }

  .dhs-credentials-grid,
  .dhs-holiday-grid,
  .dhs-loyalty-grid {
    grid-template-columns: 1fr;
    align-items: start;

    gap: 2.75rem;
  }

  .dhs-credentials-content,
  .dhs-holiday-content,
  .dhs-loyalty-content {
    max-width: 780px;
  }

  .dhs-home-credentials .dhs-section-title,
  .dhs-home-credentials .dhs-section-lead,
  .dhs-home-holiday .dhs-section-title,
  .dhs-home-holiday .dhs-section-lead,
  .dhs-home-loyalty .dhs-section-title,
  .dhs-home-loyalty .dhs-section-lead {
    max-width: 780px;
  }

  .dhs-holiday-media {
    min-height: 520px;
  }

  .dhs-loyalty-visual {
    justify-content: flex-start;

    max-width: 680px;
    padding-right: 2rem;
  }
}


/* =========================================================
   31. Smartphone
   ========================================================= */

@media (max-width: 767px) {

  .dhs-section--hero > .ct-section-inner-wrap {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .dhs-hero__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .dhs-hero__content {
    max-width: none;
  }

  .dhs-hero__title {
    max-width: none;

    margin-bottom: 1.25rem;

    font-size: clamp(2.5rem, 10vw, 3.2rem);
  }

  .dhs-hero__actions {
    width: 100%;
    margin-top: 1.75rem;
  }

  .dhs-hero__media {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 11;
    border-radius: 18px;
  }

  .dhs-home-understand .dhs-section-intro,
  .dhs-home-process .dhs-section-intro,
  .dhs-home-services .dhs-section-intro {
    margin-bottom: 2.5rem;
  }

  .dhs-home-understand .dhs-section-title,
  .dhs-home-process .dhs-section-title,
  .dhs-home-services .dhs-section-title,
  .dhs-home-credentials .dhs-section-title,
  .dhs-home-holiday .dhs-section-title,
  .dhs-home-loyalty .dhs-section-title {
    font-size: clamp(2.4rem, 9vw, 3rem);
  }

  .dhs-understand-grid,
  .dhs-process-grid,
  .dhs-services-grid {
    grid-template-columns: 1fr;
  }

  .dhs-understand-card:nth-child(3),
  .dhs-process-card:nth-child(3) {
    grid-column: auto;
  }

  .dhs-understand-card:nth-child(3) .dhs-understand-card__media {
    aspect-ratio: 16 / 10;

    height: auto;
    min-height: 220px;
  }

  .dhs-understand-card__media {
    min-height: 220px;
  }

  .dhs-process-action,
  .dhs-services-action {
    flex-direction: column;
    align-items: flex-start;
  }

  .dhs-process-action .dhs-btn,
  .dhs-services-action .dhs-btn {
    width: 100%;
  }

  .dhs-credential-card {
    grid-template-columns:
      125px
      minmax(0, 1fr);

    column-gap: 1.25rem;
  }

  .dhs-credential-card__media {
    width: 125px;
  }

  .dhs-holiday-media {
    min-height: 440px;

    border-radius: 18px;
  }

  .dhs-holiday-media__badge {
    width: calc(100% - 2.5rem);

    margin: 1.25rem;
  }

  .dhs-loyalty-visual {
    padding: 0.75rem 1.25rem 1.5rem 0.25rem;
  }

  .dhs-loyalty-visual::before {
    top: 2rem;
    left: 1.75rem;
  }

  .dhs-loyalty-card {
    padding: 1.5rem;

    border-radius: 18px;
  }

  .dhs-loyalty-stamps {
    gap: 0.65rem;
  }
}


/* =========================================================
   32. Sehr kleine Smartphones
   ========================================================= */

@media (max-width: 479px) {

  .dhs-hero__eyebrow {
    padding: 0.5rem 0.7rem;

    font-size: 0.78rem;
  }

  .dhs-hero__actions,
  .dhs-holiday-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .dhs-hero__actions .dhs-btn,
  .dhs-holiday-actions .dhs-btn {
    width: 100%;
  }

  .dhs-hero__media {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }

  .dhs-section-eyebrow {
    font-size: 0.8rem;
  }

  .dhs-understand-card__eyebrow,
  .dhs-understand-card__title,
  .dhs-understand-card__text,
  .dhs-understand-card__link,
  .dhs-understand-card > a {
    margin-right: 1.25rem;
    margin-left: 1.25rem;
  }

  .dhs-understand-card__media {
    min-height: 190px;
  }

  .dhs-understand-card:nth-child(3) .dhs-understand-card__media {
    min-height: 190px;
  }

  .dhs-process-card,
  .dhs-service-card {
    padding: 1.35rem;
  }

  .dhs-process-card__number {
    width: 3rem;
    height: 3rem;

    margin-bottom: 1.25rem;
  }

  .dhs-process-action,
  .dhs-services-action {
    padding: 1.25rem;
  }

  .dhs-credential-card {
    grid-template-columns: 1fr;

    grid-template-areas:
      "media"
      "eyebrow"
      "title"
      "text"
      "link";

    padding: 1.25rem;

    row-gap: 0;
  }

  .dhs-credential-card__media {
    width: 100%;
    aspect-ratio: 16 / 10;

    margin-bottom: 1.25rem;
  }

  .dhs-holiday-benefit {
    padding-right: 0.85rem;
    padding-left: 3.1rem;
  }

  .dhs-holiday-media {
    min-height: 380px;
  }

  .dhs-holiday-media__badge {
    width: calc(100% - 2rem);

    margin: 1rem;
    padding: 1rem;
  }

  .dhs-holiday-media__title {
    font-size: 1.4rem;
  }

  .dhs-loyalty-note {
    padding: 1rem 1rem 1rem 1.25rem;
  }

  .dhs-loyalty-visual {
    padding: 0;
  }

  .dhs-loyalty-visual::before {
    display: none;
  }

  .dhs-loyalty-card {
    padding: 1.25rem;

    transform: none;
  }

  .dhs-loyalty-card:hover {
    transform: none;
  }

  .dhs-loyalty-stamps {
    gap: 0.5rem;
  }

  .dhs-loyalty-stamp::before {
    inset: 4px;
  }

  .dhs-loyalty-stamp--reward::after {
    top: 0.2rem;
    right: 0.3rem;

    font-size: 0.6rem;
  }

  .dhs-loyalty-reward {
    padding: 1.1rem;
  }
}


/* =========================================================
   33. Reduzierte Bewegung
   ========================================================= */

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

  .dhs-understand-card,
  .dhs-process-card,
  .dhs-service-card,
  .dhs-credential-card,
  .dhs-loyalty-card,
  .dhs-loyalty-stamp {
    transition: none;
  }

  .dhs-understand-card:hover,
  .dhs-process-card:hover,
  .dhs-service-card:hover,
  .dhs-credential-card:hover,
  .dhs-loyalty-card:hover,
  .dhs-loyalty-stamp:hover {
    transform: none;
  }
}
/* =========================================================
   dieHunde.schule – Startseite Google Rezensionen
   ========================================================= */


/* =========================================================
   1. Gesamter Bereich
   ========================================================= */

.dhs-home-reviews {
  position: relative;
  isolation: isolate;

  overflow: hidden;

  background-color: #eaf0ed;
}

.dhs-home-reviews::before {
  content: "";

  position: absolute;
  top: -190px;
  right: -170px;
  z-index: -1;

  width: 450px;
  height: 450px;

  pointer-events: none;

  background-color: rgba(201, 111, 74, 0.08);

  border-radius: 999px;
}

.dhs-home-reviews::after {
  content: "";

  position: absolute;
  bottom: -240px;
  left: -220px;
  z-index: -1;

  width: 520px;
  height: 520px;

  pointer-events: none;

  border: 1px solid rgba(44, 74, 62, 0.09);
  border-radius: 999px;
}

.dhs-home-reviews > .ct-section-inner-wrap {
  position: relative;
  z-index: 1;

  padding-top: clamp(4.5rem, 7vw, 6.5rem);
  padding-bottom: clamp(4.5rem, 7vw, 6.5rem);
}


/* =========================================================
   2. Einleitungsbereich
   ========================================================= */

.dhs-home-reviews .dhs-section-intro {
  width: 100%;
  max-width: 860px;

  margin-right: auto;
  margin-bottom: clamp(2.75rem, 5vw, 4rem);
  margin-left: 0;
}

.dhs-home-reviews .dhs-section-title {
  max-width: 850px;

  margin-top: 0;
  margin-bottom: 1.25rem;

  color: #2c4a3e;

  font-size: clamp(2.65rem, 4.5vw, 3.6rem);
  line-height: 1.08;

  -webkit-hyphens: none;
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}

.dhs-home-reviews .dhs-section-lead {
  max-width: 790px;

  margin-top: 0;
  margin-bottom: 0;

  color: #5c564f;
}


/* =========================================================
   3. Äußerer Widgetbereich
   ========================================================= */

.dhs-google-reviews {
  position: relative;

  width: 100%;
  min-width: 0;

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

  overflow: hidden;

  background:
    radial-gradient(
      circle at 94% 10%,
      rgba(201, 111, 74, 0.1),
      transparent 25%
    ),
    #ffffff;

  border: 1px solid rgba(44, 74, 62, 0.15);
  border-radius: 22px;

  box-shadow: 0 22px 52px rgba(44, 74, 62, 0.12);
}

.dhs-google-reviews::before {
  content: "";

  position: absolute;
  top: 0;
  right: 2rem;
  left: 2rem;

  height: 4px;

  background-color: #c96f4a;

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


/* =========================================================
   4. Shortcode-Grundfläche
   ========================================================= */

.dhs-google-reviews__shortcode {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  color: #2b2622;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.dhs-google-reviews__shortcode > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.dhs-google-reviews__shortcode,
.dhs-google-reviews__shortcode * {
  box-sizing: border-box;
}


/* =========================================================
   5. Internes Plugin-Raster
   ========================================================= */

.dhs-google-reviews .grw-container {
  display: grid !important;

  grid-template-columns:
    minmax(220px, 270px)
    minmax(0, 1fr) !important;

  align-items: center !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;

  gap: clamp(1.25rem, 2.5vw, 2rem) !important;
}

.dhs-google-reviews .grw-container > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

.dhs-google-reviews .grw-badge {
  width: 100% !important;
  max-width: 270px !important;
  min-width: 0 !important;
}


/* =========================================================
   6. Rezensionen und Slider begrenzen
   ========================================================= */

.dhs-google-reviews .grw-reviews {
  position: relative !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  padding: 0 2.4rem 1rem !important;

  overflow: hidden !important;
}

.dhs-google-reviews .grw-slider,
.dhs-google-reviews .swiper,
.dhs-google-reviews .swiper-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  overflow: hidden !important;
}

.dhs-google-reviews .grw-review {
  min-width: 0 !important;
  max-width: 100% !important;
}


/* =========================================================
   7. Pfeile innerhalb des Containers halten
   ========================================================= */

.dhs-google-reviews .grw-slider-prev {
  left: 0.15rem !important;
}

.dhs-google-reviews .grw-slider-next {
  right: 0.15rem !important;
}

.dhs-google-reviews .grw-slider-prev,
.dhs-google-reviews .grw-slider-next {
  z-index: 20 !important;
}


/* =========================================================
   8. Links und Bedienelemente
   ========================================================= */

.dhs-google-reviews a {
  text-underline-offset: 0.18em;
}

.dhs-google-reviews a:focus-visible,
.dhs-google-reviews button:focus-visible {
  outline: 3px solid #c96f4a;
  outline-offset: 3px;
}


/* =========================================================
   9. Tablet
   ========================================================= */

@media (max-width: 991px) {

  .dhs-home-reviews .dhs-section-intro {
    max-width: 780px;
  }

  .dhs-home-reviews .dhs-section-title,
  .dhs-home-reviews .dhs-section-lead {
    max-width: 780px;
  }

  .dhs-google-reviews {
    padding: 1.5rem;
  }

  .dhs-google-reviews .grw-container {
    grid-template-columns: 1fr !important;
    align-items: start !important;

    gap: 2rem !important;
  }

  .dhs-google-reviews .grw-badge {
    max-width: 420px !important;
  }

  .dhs-google-reviews .grw-reviews {
    padding-right: 2.25rem !important;
    padding-left: 2.25rem !important;
  }
}


/* =========================================================
   10. Smartphone
   ========================================================= */

@media (max-width: 767px) {

  .dhs-home-reviews > .ct-section-inner-wrap {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .dhs-home-reviews .dhs-section-intro {
    margin-bottom: 2.5rem;
  }

  .dhs-home-reviews .dhs-section-title {
    font-size: clamp(2.4rem, 9vw, 3rem);
  }

  .dhs-google-reviews {
    padding: 1.25rem;

    border-radius: 18px;
  }

  .dhs-google-reviews::before {
    right: 1.25rem;
    left: 1.25rem;
  }

  .dhs-google-reviews .grw-reviews {
    padding-right: 2rem !important;
    padding-left: 2rem !important;
  }
}


/* =========================================================
   11. Sehr kleine Smartphones
   ========================================================= */

@media (max-width: 479px) {

  .dhs-home-reviews > .ct-section-inner-wrap {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .dhs-google-reviews {
    padding: 1rem;

    border-radius: 16px;
  }

  .dhs-google-reviews::before {
    right: 1rem;
    left: 1rem;
  }

  .dhs-google-reviews .grw-reviews {
    padding-right: 1.65rem !important;
    padding-left: 1.65rem !important;
  }
}/* =========================================================
   dieHunde.schule – Startseite Abschluss-CTA
   ========================================================= */


/* =========================================================
   1. Gesamter Bereich
   ========================================================= */

.dhs-home-final-cta {
  position: relative;
  isolation: isolate;

  overflow: hidden;

  background-color: #f4e4d7;
}

.dhs-home-final-cta::before {
  content: "";

  position: absolute;
  top: -180px;
  left: -160px;
  z-index: -1;

  width: 440px;
  height: 440px;

  pointer-events: none;

  background-color: rgba(201, 111, 74, 0.12);

  border-radius: 999px;
}

.dhs-home-final-cta::after {
  content: "";

  position: absolute;
  right: -210px;
  bottom: -230px;
  z-index: -1;

  width: 520px;
  height: 520px;

  pointer-events: none;

  border: 1px solid rgba(44, 74, 62, 0.12);
  border-radius: 999px;
}

.dhs-home-final-cta > .ct-section-inner-wrap {
  position: relative;
  z-index: 1;

  padding-top: clamp(4rem, 7vw, 6rem);
  padding-bottom: clamp(4rem, 7vw, 6rem);
}


/* =========================================================
   2. Dunkle CTA-Karte
   ========================================================= */

.dhs-final-cta {
  position: relative;
  isolation: isolate;

  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;

  padding:
    clamp(2.25rem, 5vw, 4.25rem)
    clamp(1.5rem, 5vw, 4.5rem);

  overflow: hidden;

  text-align: center;

  background:
    radial-gradient(
      circle at 90% 15%,
      rgba(201, 111, 74, 0.22),
      transparent 28%
    ),
    radial-gradient(
      circle at 8% 90%,
      rgba(255, 255, 255, 0.08),
      transparent 30%
    ),
    #2c4a3e;

  border: 1px solid rgba(44, 74, 62, 0.18);
  border-radius: 26px;

  box-shadow: 0 28px 70px rgba(44, 74, 62, 0.22);
}

.dhs-final-cta::before {
  content: "";

  position: absolute;
  inset: 14px;
  z-index: -1;

  pointer-events: none;

  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
}


/* =========================================================
   3. Einleitung
   ========================================================= */

.dhs-final-cta__eyebrow {
  display: inline-flex;
  align-items: center;

  margin: 0 0 1.25rem;
  padding: 0.55rem 0.9rem;

  color: #f4e4d7;
  background-color: rgba(244, 228, 215, 0.1);

  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: 0.04em;

  border: 1px solid rgba(244, 228, 215, 0.22);
  border-radius: 999px;
}


/* =========================================================
   4. Überschrift
   ========================================================= */

.dhs-final-cta__title {
  width: 100%;
  max-width: 820px;

  margin-top: 0;
  margin-bottom: 1.35rem;

  color: #ffffff;

  font-size: clamp(2.75rem, 5vw, 4rem);
  line-height: 1.06;

  -webkit-hyphens: none;
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}


/* =========================================================
   5. Beschreibung
   ========================================================= */

.dhs-final-cta__text {
  width: 100%;
  max-width: 760px;

  margin-top: 0;
  margin-bottom: 0;

  color: rgba(255, 255, 255, 0.82);

  font-size: clamp(1.05rem, 2vw, 1.22rem);
  line-height: 1.65;
}


/* =========================================================
   6. Buttons
   ========================================================= */

.dhs-final-cta__actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100%;

  margin-top: 2rem;

  gap: 0.8rem;
}

.dhs-final-cta__actions .dhs-btn {
  flex: 0 0 auto;
}

.dhs-final-cta .dhs-btn--accent {
  color: #ffffff;
  background-color: #c96f4a;

  border-color: #c96f4a;

  box-shadow: 0 10px 24px rgba(168, 85, 54, 0.26);
}

.dhs-final-cta .dhs-btn--accent:hover,
.dhs-final-cta .dhs-btn--accent:focus-visible {
  color: #ffffff;
  background-color: #a85536;

  border-color: #a85536;
}

.dhs-final-cta .dhs-btn--secondary {
  color: #ffffff;
  background-color: transparent;

  border-color: rgba(255, 255, 255, 0.65);
}

.dhs-final-cta .dhs-btn--secondary:hover,
.dhs-final-cta .dhs-btn--secondary:focus-visible {
  color: #2c4a3e;
  background-color: #ffffff;

  border-color: #ffffff;
}


/* =========================================================
   7. Vertrauenshinweis
   ========================================================= */

.dhs-final-cta__note {
  position: relative;

  width: 100%;
  max-width: 820px;

  margin-top: 2rem;
  margin-bottom: 0;
  padding-top: 1.5rem;

  color: rgba(255, 255, 255, 0.68);

  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: 0.015em;
}

.dhs-final-cta__note::before {
  content: "";

  position: absolute;
  top: 0;
  left: 50%;

  width: min(100%, 520px);
  height: 1px;

  background-color: rgba(255, 255, 255, 0.16);

  transform: translateX(-50%);
}


/* =========================================================
   8. Tablet
   ========================================================= */

@media (max-width: 991px) {

  .dhs-final-cta {
    padding:
      clamp(2.25rem, 5vw, 3.5rem)
      clamp(1.5rem, 4vw, 3rem);

    border-radius: 22px;
  }

  .dhs-final-cta__title {
    max-width: 720px;
  }

  .dhs-final-cta__text {
    max-width: 680px;
  }
}


/* =========================================================
   9. Smartphone
   ========================================================= */

@media (max-width: 767px) {

  .dhs-home-final-cta > .ct-section-inner-wrap {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .dhs-final-cta {
    padding: 2.25rem 1.4rem;

    border-radius: 18px;
  }

  .dhs-final-cta::before {
    inset: 9px;

    border-radius: 13px;
  }

  .dhs-final-cta__title {
    font-size: clamp(2.35rem, 10vw, 3rem);
  }

  .dhs-final-cta__actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .dhs-final-cta__actions .dhs-btn {
    width: 100%;
  }

  .dhs-final-cta__note {
    margin-top: 1.75rem;
  }
}


/* =========================================================
   10. Sehr kleine Smartphones
   ========================================================= */

@media (max-width: 479px) {

  .dhs-home-final-cta > .ct-section-inner-wrap {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .dhs-final-cta {
    padding: 2rem 1.15rem;
  }

  .dhs-final-cta__eyebrow {
    padding: 0.5rem 0.7rem;

    font-size: 0.78rem;
  }

  .dhs-final-cta__text {
    font-size: 1rem;
  }

  .dhs-final-cta__note {
    font-size: 0.82rem;
  }
}