*, :after, :before {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:;
    --tw-pan-y:;
    --tw-pinch-zoom:;
    --tw-scroll-snap-strictness: proximity;
    --tw-ordinal:;
    --tw-slashed-zero:;
    --tw-numeric-figure:;
    --tw-numeric-spacing:;
    --tw-numeric-fraction:;
    --tw-ring-inset:;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(147, 197, 253, .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:;
    --tw-brightness:;
    --tw-contrast:;
    --tw-grayscale:;
    --tw-hue-rotate:;
    --tw-invert:;
    --tw-saturate:;
    --tw-sepia:;
    --tw-drop-shadow:;
    --tw-backdrop-blur:;
    --tw-backdrop-brightness:;
    --tw-backdrop-contrast:;
    --tw-backdrop-grayscale:;
    --tw-backdrop-hue-rotate:;
    --tw-backdrop-invert:;
    --tw-backdrop-opacity:;
    --tw-backdrop-saturate:;
    --tw-backdrop-sepia:;
    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 {
    text-rendering: optimizeSpeed;
    line-height: 1.5;
    min-height:100vh
}

a:not([class]) {
    text-decoration-skip-ink:auto
}

img, picture {
    display: block;
    max-width:100%;
    margin-top: 0.5rem;
}

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

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    src: url(/assets/fonts/inter-v8-latin-regular.woff2) format("woff2");
    font-display: swap;
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 500;
    src: url(/assets/fonts/inter-v8-latin-500.woff2) format("woff2");
    font-display: swap;
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 700;
    src: url(/assets/fonts/inter-v8-latin-700.woff2) format("woff2");
    font-display: swap;
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 900;
    src: url(/assets/fonts/inter-v8-latin-900.woff2) format("woff2");
    font-display: swap;
}

:root {
    --color-dark: #404040;
    --color-light: #fff;
    --color-light-glare: #fff;
    --color-primary: #2388A8;
    --color-primary-glare: #d8e2f4;
    --color-secondary: grey;
    --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
}

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
}

svg {
    flex: none;
    height: 2ex;
    width:auto
}

[role=list] {
    padding:0
}

a {
    color:currentcolor;
    margin-top: 0.5rem;
}

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
}

.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)
}

.proseb blockquote {
    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:100%
}

.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
}

.sidebar {
    display: flex;
    flex-wrap: wrap;
    gap:var(--gutter, var(--space-s-l))
}

.sidebar > :first-child {
    flex-basis: var(--sidebar-target-width, 20rem);
    flex-grow:1
}

.sidebar > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-width:var(--sidebar-content-min-width, 50%)
}

.sidebar[data-direction=rtl] {
    flex-direction:row-reverse
}

.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: #007f9d;
}

.spot-color-secondary {
    --spot-color: #99cc66;
}

p span {
    color: #444;
}

#logo {
    grid-area: logo;
}
#space {
    grid-area: space;
}
#links {
    grid-area: links;
    justify-content: center;
    align-items: center;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

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;
}

#links {
    grid-area: links;
    justify-content: center;
    align-items: center;
}

.nav-logo {
    display: inline-block;
    height: 60px;
    width: 60px;
    /* margin-top: -0.52rem; */
    margin-left: 1rem;
    /* opacity: 0.7; */
    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;
}

.current {
    opacity: 0.5;
}

footer span {
    color: #fff;
}

footer span {
    color: #fff;
}
footer {
    grid-area: footer;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;

    background-color:  #000;
}

#copyright {
    padding-right: 0.5rem;
}
footer a {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 0.625rem;
    font-size: 1rem;
}

footer span {
    margin-top: 2px;
}

a {
    /* text-decoration:  none; */
    color: #0A5490;
}

img {
    max-width: 100%;
}

.socIcon {
    width: 32px;
}

#copyright {
    width: 40px;
    opacity: 0.7;
}
footer {
    grid-area: footer;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;

    background-color:  #000;
}
.subtle {
    color: #F9FCFD;
    font-size: 1.3rem;
}
#hallidude {
    width: 18rem;
    height: auto;
    display: block;
    /* margin: auto; */
    margin-top: 4rem;
}
#hallidudegroot {
    width: 6rem;
    height: auto;
    display: inline-block;
    margin-left: 1rem;
}
#hallilogo {
    padding-top: 1rem;
    padding-bottom: 1rem;
    width: 50vw;
    height: auto;
    display: block;
    margin: 0 auto;
}
.paleRider {
    color: #808080;
    display: inline-block;
}
#impressum {
    text-align: center;
    min-height: calc(100vh - 50px);
}
#gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    min-height: calc(100vh - 50px);
}
#anrufen svg {
    height: 8rem;
    border-radius: 50%;
    border: 10px solid  #add8e6;
    padding: 1rem;

}

#anrufen {
    text-align: center;
}
.lightlink {
    color: #add8e6;
}
.linkimage {
    border-radius: 2rem;
    /*shadow*/
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    margin: 1.5rem;
    height: auto;
}

.prose blockquote a.blockanchor {
    font-family: var(--font-serif);
    font-size: var(--size-step-2);
    font-style: italic;
    padding: var(--space-m-l);
    color: #555;
}

.blaumann {
    color: #0A5490;
}
.dark {
    color: #333;
}
.lighter {
    color: #add8e6;
}
a.lighter {
    color: #add8e6;
}
a.classic {
    text-decoration: anchor;
}
.classic {
    text-decoration: underline;
}
/* #poolslide { */
/*     position: relative; */
/*     width: 100%; */
/*     padding-top: 97.8%; /\* Aspect ratio of the images *\/ */
/*     overflow: hidden; */
/*     border-radius: 5rem; */
/* } */

/* #poolslide .slide { */
/*     position: absolute; */
/*     top: 0; */
/*     left: 0; */
/*     width: 100%; */
/*     max-width: 100%; */
/*     height: auto; */
/*     opacity: 0; */
/*     transition: opacity 1s ease-in-out; */
/* } */

/* #poolslide .slide:first-child { */
/*     opacity: 1; */
/* } */

a.lighter {
    color: #fff;
}

svg a:hover {
    text-decoration: underline;
}
.wallimage {
    height: auto;
}
.angled {
    position: relative;
    display: inline-block;
}

.angled::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 110%;
    height: 5px;
    background: red;
    transform: rotate(-25deg); /* Adjust angle as needed */
}

.uppity {
    vertical-align: super;
    font-size: smaller;
}
#poolslide {
  display: grid;
  position: relative;
}

.slide {
  grid-area: 1 / 1;
  opacity: 0;
  animation: fadeSlide 15s infinite ease-in-out;
  width: 100%;
  height: auto;
  border-radius: 5rem;
}

@keyframes fadeSlide {
  0% { opacity: 0; }
  11.11% { opacity: 1; }
  33.33% { opacity: 1; }
  44.44% { opacity: 0; }
  100% { opacity: 0; }
}

.slide:first-child {
    animation: none;
    opacity: 1;
}

.slide:nth-child(1) {
  animation-delay: 0s;
}

.slide:nth-child(2) {
  animation-delay: 5s;
}

.slide:nth-child(3) {
  animation-delay: 10s;
}