*, :after, :before {
        box-sizing:border-box
}

blockquote, body, dd, dl, figure, h1, h2, h3, h4, p {
        margin:0
}

ol[role=list], ul[role=list] {
        list-style:none
}

html {
        text-size-adjust: none;
        -webkit-text-size-adjust:none;
}

html:focus-within {
        scroll-behavior:smooth
}

body {
        line-height: 1.5;
        min-height:100vh
}

a:not([class]) {
        text-decoration-skip-ink:auto
}
a { text-decoration: none;}
img, picture {
        display: block;
        max-width:100%
}

button, input, select, textarea {
        font:inherit
}

:root {
        --color-dark: #404040;
        --color-light: #fff;
        --color-light-glare: #fff;
        --color-primary: #0B5C9E;
        --color-primary-glare: #fff;
        --color-secondary: #C32B2C;
        --color-secondary-glare: #ffe3e5;
        --space-xs: clamp(0.75rem, 0.69rem + 0.29vw, 0.9375rem);
        --space-s: clamp(1rem, 0.92rem + 0.39vw, 1.25rem);
        --space-m: clamp(1.5rem, 1.38rem + 0.58vw, 1.875rem);
        --space-l: clamp(2rem, 1.84rem + 0.78vw, 2.5rem);
        --space-xl: clamp(3rem, 2.77rem + 1.17vw, 3.75rem);
        --space-2xl: clamp(4rem, 3.69rem + 1.55vw, 5rem);
        --space-3xl: clamp(6rem, 5.53rem + 2.33vw, 7.5rem);
        --space-xs-s: clamp(0.75rem, 0.59rem + 0.78vw, 1.25rem);
        --space-s-m: clamp(1rem, 0.73rem + 1.36vw, 1.875rem);
        --space-m-l: clamp(1.5rem, 1.19rem + 1.55vw, 2.5rem);
        --space-l-xl: clamp(2rem, 1.46rem + 2.72vw, 3.75rem);
        --space-l-2xl: clamp(2rem, 1.07rem + 4.66vw, 5rem);
        --space-xl-2xl: clamp(3rem, 2.38rem + 3.11vw, 5rem);
        --space-2xl-3xl: clamp(4rem, 2.91rem + 5.44vw, 7.5rem);
        --size-step-0: clamp(1rem, 0.92rem + 0.39vw, 1.25rem);
        --size-step-1: clamp(1.1875rem, 1.01rem + 0.87vw, 1.75rem);
        --size-step-2: clamp(1.4375rem, 1.11rem + 1.65vw, 2.5rem);
        --size-step-3: clamp(1.75rem, 1.19rem + 2.82vw, 3.5625rem);
        --size-step-4: clamp(2.0625rem, 1.15rem + 4.56vw, 5rem);
        --size-step-5: clamp(2.5rem, 1.08rem + 7.09vw, 7.0625rem);
        --size-step-6: clamp(3rem, 0.84rem + 10.78vw, 9.9375rem);
        --font-base: Inter, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
        --font-serif: Georgia, sans-serif;
        --gutter: var(--space-s-m);
        --border-radius: var(--size-step-1);
        --transition-base: 250ms ease;
        --transition-movement: 200ms linear;
        --transition-fade: 200ms ease;
        --transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
        --tracking: -0.05ch;
        --tracking-s:-0.075ch
}

body {
        background: var(--color-light);
        color: var(--color-dark);
        font-family: var(--font-base);
        font-size: var(--size-step-1);
        letter-spacing: var(--tracking);
        line-height:1.4;
}
.errorDesktop { display: none; }
.error {
        margin-left: 1rem;
}

h1, h2, h3 {
        letter-spacing: var(--tracking-s);
        line-height:1
}

h1 {
        font-size:var(--size-step-5)
}

h2 {
        font-size:var(--size-step-4)
}

h3 {
        font-size:var(--size-step-3)
}

blockquote:not([class]), li, p {
        max-width:50ch
}

h1, h2, h3 {
        max-width:20ch;
}

blockquote:not([class]) {
        font-family: var(--font-serif);
        font-size:var(--size-step-2)
}

blockquote:not([class]) p:last-of-type {
        font-family: var(--font-base);
        font-size: var(--size-step-1);
        font-weight:400
}

.subtle {
        color: #fff;
        font-weight: 300;
        font-size: 1rem;
}
svg {
        flex: none;
        height: 2ex;
        width:auto
}

[role=list] {
        padding:0
}

a {
        color:currentcolor
}

a:hover {
        text-decoration:none
}

:focus {
        outline: 2px solid;
        outline-offset:.3ch
}

:target {
        scroll-margin-top:2ex
}

main:focus {
        outline:none
}

::selection {
        background: var(--color-dark);
        color:var(--color-light)
}

.card {
        background: var(--color-dark);
        border-radius: var(--border-radius);
        color: var(--color-light);
        max-width: unset;
        padding:var(--space-m-l)
}

.card ::selection {
        background: var(--color-secondary);
        color:var(--color-dark)
}

.curve {
        fill: var(--spot-color, var(--color-light));
        display: block;
        height: 3.5em;
        width:100%
}

.features {
        --grid-placement: auto-fit;
        --grid-min-item-size: clamp(16rem, 33%, 20rem);
        --gutter: var(--space-l-xl);
        --flow-space: var(--space-s);
        text-align:center
}
.center { text-align: center; }
.features svg {
        display: block;
        height: 4em;
        margin-inline:auto
}

.features a {
        text-decoration:none
}

.features a:hover {
        text-decoration: underline;
        text-decoration-thickness: .08ex;
        text-underline-offset:.2ex
}

.prose {
        --flow-space: var(--space-l-xl);
        --wrapper-max-width:55rem
}

.prose :is(h2, h3, h4) + * {
        --flow-space:var(--space-s-m)
}

.prose blockquote {
        border-inline-start: 10px solid var(--color-secondary);
        font-family: var(--font-serif);
        font-size: var(--size-step-2);
        font-style: italic;
        padding:var(--space-m-l)
}

.prose blockquote > * + * {
        margin-top:var(--space-m-l)
}

.prose blockquote :last-child {
        font-family: var(--font-base);
        font-size: var(--size-step-1);
        font-style:normal
}

.section > .curve {
        transform:translateY(-1px)
}

.section > .curve:first-child {
        transform:rotate(180deg) translateY(-1px)
}

.section__inner {
        background: var(--spot-color, var(--color-dark));
        color:var(--color-light)
}

.section blockquote {
        font-size: var(--size-step-4);
        font-weight: 700;
        letter-spacing: var(--tracking-s);
        line-height:1
}

.section :is(h1, h2, h3, blockquote) {
        opacity:95%
}

.signoff h2 {
        font-size: var(--size-step-1);
        font-weight: 400;
        letter-spacing: var(--tracking);
        max-width:30ch
}

.signoff p {
        color: var(--color-primary);
        font-size: var(--size-step-6);
        font-weight: 700;
        letter-spacing: var(--tracking-s);
        line-height:1
}

.site-foot {
        background: var(--color-dark);
        color: var(--color-light);
        font-size: var(--size-step-0);
        padding:var(--space-s-m)
}

.site-foot__inner {
        align-items: center;
        display: flex;
        gap:var(--space-s-m)
}

.site-foot svg {
        height: 3em;
        width:3em
}

.grid {
        display: grid;
        gap: var(--gutter, var(--space-s-l));
        grid-template-columns:repeat(var(--grid-placement, auto-fill), minmax(var(--grid-min-item-size, 16rem), 1fr))
}

.grid[data-rows=masonry] {
        align-items: start;
        grid-template-rows: masonry
}

.grid[data-layout="50-50"] {
        --grid-placement: auto-fit;
        --grid-min-item-size:clamp(16rem, 50vw, 26rem)
}

.repel {
        align-items: var(--repel-vertical-alignment, center);
        display: flex;
        flex-wrap: wrap;
        gap: var(--gutter, var(--space-s-m));
        justify-content:space-between
}

.repel[data-nowrap] {
        flex-wrap:nowrap
}

.flow > * + * {
        margin-top:var(--flow-space, 1em)
}

.region {
        padding-bottom: var(--region-space, var(--space-l-2xl));
        padding-top:var(--region-space, var(--space-l-2xl))
}

.wrapper {
        margin-left: auto;
        margin-right: auto;
        max-width: var(--wrapper-max-width, 85rem);
        padding-left: var(--gutter);
        padding-right: var(--gutter);
        position:relative
}

.mt-l-xl {
        margin-top:clamp(2rem, 1.46rem + 2.72vw, 3.75rem)
}

.block {
        display:block
}

.inline {
        display:inline
}

.grid {
        display:grid
}

.filter {
        filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.flow-space-s-m {
        --flow-space:clamp(1rem, 0.73rem + 1.36vw, 1.875rem)
}

.flow-space-2xl-3xl {
        --flow-space:clamp(4rem, 2.91rem + 5.44vw, 7.5rem)
}

.spot-color-primary {
        --spot-color:#0B5C9E;
}

.spot-color-secondary {
        --spot-color: #C32B2C;
}

/* Styles for the SVG elements */
.st0 { fill: #95BF47; }
.st1 { fill: #5E8E3E; }
.st2 { fill: #FFFFFF; }


nav {
        grid-area: nav;
        display: grid;
        grid-template-areas: "logo links";
        grid-gap: 0.5rem;
        grid-template-columns: 80px max-content;
        justify-content: space-between;
        position: fixed;
        height: 80px;
        color: #ffffff;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
}

#logo {
        grid-area: logo;
        background-color: #ffffff;
}

.nav-logo {
        display: inline-block;
        height: 60px;
        width: 60px;
        margin-top: 0.52rem;
        margin-left: 1rem;
        border: 1px solid #333;
        padding-top: 5px;
        background-color: #ffffff;
        border-radius: 50%;
        padding: 5px;
}

.nav-links {
        display: inline-block;
        margin-top: 2px;
        margin-right: 2rem;
        max-height: 40px;
        color: #ffffff;
}

.nav-item {
        display: inline;
        /* text-decoration: none; */
}

.nav-link {
        /* text-decoration: none; */
        padding: 0 5px;
        color: #0A5490;
}

footer {
        display: grid;
        grid-template-columns: 1fr;
        background-color: #26292E;
        color: #fff;
        align-items: center;
        justify-items: center;
        text-align: center;
        padding-bottom: 1rem;
}

footer > *:first-child {
        order: 2;
}
.foot-link {
        display: inline-block;
        border-bottom: 2px solid #808080;
        padding-bottom: 3px;
        color: #fff;
}

.foot-link:hover {
        color: #ff0000;
}

.foot-link.current {
        color: #fff;
}

footer p {
        text-align: center;
        color: #fff;
}

#copyright {
        padding-right: 0.5rem;
}


#hallidude, #hallilogo {
        width: 17rem;
        height: auto;
        display: block;
        margin: auto;
}

#impressum {
        text-align: center;
        min-height: calc(100vh - 50px);
}
#datenschutz {
        text-align: left;
        margin-left: 2rem;
}
#datenschutz h2 {
        text-align: center;
}

#anrufen svg {
        height: 8rem;
        border-radius: 50%;
        border: 10px solid  #C32B2C;
        padding: 1rem;
}
#redframe {
        border: 4px solid #ff0000;
        margin: 0 auto;
        padding: 1rem;
        text-align: center;
        display: inline-block;
}
#anrufen {
        text-align: center;
}
.lightlink {
        color: #add8e6;
}
.linkimage {
        max-width: 100%;
        border-radius: 2rem;
        /*shadow*/
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        margin: 0 auto;
        height: auto;
}
.blaumann {
        color: #0B5C9E;
}
.dark {
        color: #333;
}
.lighter {
        color: #add8e6;
}
a.lighter {
        color: #fff;
}
a.classic {
        text-decoration: anchor;
}

#phoneSlide {
        display: grid;
        grid-template-areas: "slides";
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        place-items: center;
        width: 80%;
        margin-inline: auto;
        aspect-ratio: 1 / 1;
}

#slide1 { grid-area: slides; }
#slide2 { grid-area: slides; }
#slide3 { grid-area: slides; }
#slide4 { grid-area: slides; }
#slide5 { grid-area: slides; }
#slide6 { grid-area: slides; }
#slide7 { grid-area: slides; }

#phoneSlide .slide {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4rem;
        opacity: 0;
        animation-name: fadeSlide;
        animation-duration: 21s;              /* 7 slides × 3s each */
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-fill-mode: both;
        backface-visibility: hidden;
}

/* Staggered start times: 0,3,6,...,18 seconds */
#slide1 { animation-delay: 0s; }
#slide2 { animation-delay: 3s; }
#slide3 { animation-delay: 6s; }
#slide4 { animation-delay: 9s; }
#slide5 { animation-delay: 12s; }
#slide6 { animation-delay: 15s; }
#slide7 { animation-delay: 18s; }

/* Crossfade within each 3s slot */
@keyframes fadeSlide {
        0%   { opacity: 0; }
        5%   { opacity: 1; }
        20%  { opacity: 1; }
        25%  { opacity: 0; }
        100% { opacity: 0; }
}
#Layer_1 {
        min-height: calc(14vh - 50px);
}


.curve { width: 100%; }
.smaller {
        font-size: clamp(1.7rem, 1.16rem + 2.80vw, 3.4rem);
}
#facebookicon, #instagramicon, #emailicon {
        height: 100px;
        padding: 10px;
}


@media (max-width: 321px) {
        body, h1, article {
                font-size: 0.8rem;
        }
        h1 {
                font-size: 1.5rem;
        }
        h2 {
                font-size: 1.2rem;
        }
}
@media (min-width: 936px) {
        footer > *:first-child {
                order: initial;     }

        footer { grid-template-columns: repeat(3, 1fr); }

        footer > *:not(:last-child) {
                border-bottom: none;
                padding-bottom: 0;
                margin-bottom: 0;     }

        footer {
                grid-template-columns: repeat(3, 1fr);
        }
        footer > *:not(:last-child) {
                border-bottom: none;
                padding-bottom: 0;
                margin-bottom: 0;
        }
        footer a {
                font-size: 0.9rem;
        }
        .errorDesktop {
                display: block;
        }
        .errorMobile {
                display: none;
        }

}
.boxlink {
        border: 3px solid #0B5C9E;/* 50% border */
        transition: border 0.2s ease-in-out; /* Smooth transition */
        color: #0B5C9E;
}

.boxlink:hover {
        border: 3px solid #C32B2C; /* 2-pixel border on hover */
        color: #C32B2C;
}
h1 {
        width: 16ch;
        word-wrap: break-word;
}