:root {
     --bg: #ffffff;
     --text: #0e1726;
     --muted: #5b6577;
     --brand: #7c3aed;
     /* pflaume */
     --accent: #eab308;
     /* sonne */
     --panel: #f8f7ff;
     /* zarter flieder */
     --border: #e7e5f4;
     --radius: 16px;
     --shadow: 0 10px 30px rgba(0, 0, 0, .08);
     --max: 1200px;
     --header-h: 72px;
 }

 * {
     box-sizing: border-box
 }

 html,
 body {
     margin: 0;
     padding: 0
 }

 body {
     background: var(--bg);
     color: var(--text);
     font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif
 }

 a {
     color: #0ea5e9;
     text-decoration: none
 }

 a:hover {
     text-decoration: underline
 }

 img {
     max-width: 100%;
     height: auto;
     display: block
 }

 .container {
     max-width: var(--max);
     margin-inline: auto;
     padding: 0 20px
 }

 /* Header */
 header {
     background: #fff;
     border-bottom: 1px solid var(--border);
     position: sticky;
     top: 0;
     z-index: 10
 }

 header .inner {
     display: grid;
     grid-template-columns: auto 1fr auto;
     align-items: center;
     gap: 14px;
     min-height: 72px
 }

 .brand {
     display: flex;
     align-items: center;
     gap: 10px;
     color: var(--text);
     text-decoration: none;
     font-weight: 800
 }

 .brand img {
     width: 64px
 }

 nav {
     display: flex;
     flex-wrap: wrap;
     gap: 14px;
     justify-self: center
 }

 nav a {
     color: var(--text);
     padding: 8px 10px;
     border-radius: 10px
 }

 nav a:hover {
     background: var(--panel);
     text-decoration: none
 }

 .cta-btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 12px 16px;
     border-radius: 12px;
     font-weight: 700;
     background: var(--brand);
     color: #fff;
     box-shadow: var(--shadow)
 }

 .cta-btn:hover {
     filter: brightness(1.05);
     text-decoration: none
 }

 .cta-ghost {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 12px 16px;
     border-radius: 12px;
     font-weight: 700;
     background: #fff;
     border: 1px solid var(--border);
     color: var(--text)
 }

 .cta-ghost:hover {
     background: #f3f1fd;
     text-decoration: none
 }

 /* Icons */
 .i {
     width: 18px;
     height: 18px;
     display: inline-block;
     vertical-align: -3px
 }

 .i path {
     fill: currentColor
 }


 /* Hero — full height + larger media */
 .hero {
     background: linear-gradient(180deg, #ffffff 0%, #f7f6ff 100%);
     padding-block: clamp(16px, 3vw, 36px);
     min-height: calc(100svh - var(--header-h));
     min-height: calc(100vh - var(--header-h));
     display: flex;
     align-items: center;
 }

 .hero .container {
     width: 100%;
 }

 .hero-inner {
     display: grid;
     grid-template-columns: 1.05fr .95fr;
     gap: clamp(18px, 3vw, 32px);
     align-items: center;
 }

 @media (max-width: 980px) {
     .hero-inner {
         grid-template-columns: 1fr;
     }
 }

 .eyebrow {
     color: var(--brand);
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: .03em;
     font-size: 12px;
 }

 h1 {
     font-size: clamp(30px, 4.2vw, 54px);
     line-height: 1.12;
     margin: 10px 0
 }

 .lead {
     color: var(--muted);
     font-size: clamp(16px, 1.8vw, 20px);
     margin: 10px 0 24px
 }

 .hero-cta {
     display: flex;
     gap: 10px;
     flex-wrap: wrap
 }

 .hero-media {
     border-radius: var(--radius);
     overflow: hidden;
     box-shadow: var(--shadow);
     background: #efeafd;


     aspect-ratio: 1 / 1;
     max-height: min(70vh, 720px);
 }

 @media (max-width: 980px) {
     .hero-media {
         aspect-ratio: 1 / 1;
         max-height: 50vh;

     }
 }

 .hero-media img,
 .hero-media picture {
     width: 100%;
     height: 100%;
     display: block;
 }

 .hero-media img {
     object-fit: cover;
 }


 /* Sections */
 .section {
     padding: clamp(28px, 5vw, 68px) 0
 }

 .section-alt {
     background: var(--panel)
 }

 h2 {
     font-size: clamp(22px, 2.4vw, 32px);
     margin: 0 0 16px
 }

 h3 {
     font-size: clamp(18px, 2vw, 22px);
     margin: 6px 0 10px
 }

 /* Feature cards */
 .feature-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 18px
 }

 @media (max-width:900px) {
     .feature-grid {
         grid-template-columns: 1fr
     }
 }

 .feature {
     background: #fff;
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 16px
 }

 .feature .title {
     display: flex;
     align-items: center;
     gap: 10px
 }

 .feature .title .i {
     color: var(--brand)
 }

 .story {
     display: grid;
     grid-template-columns: 1.1fr .9fr;
     gap: 22px;
     align-items: center
 }

 @media (max-width:900px) {
     .story {
         grid-template-columns: 1fr
     }
 }

 .story-media {
     border-radius: var(--radius);
     overflow: hidden;
     box-shadow: var(--shadow);
     aspect-ratio: 1/1;
     background: #fff7e6
 }

 /* Split card for map */
 .card-split {
     display: grid;
     grid-template-columns: 1fr 1fr;
     border: 1px solid var(--border);
     border-radius: var(--radius);
     overflow: hidden;
     background: #fff;
     box-shadow: var(--shadow)
 }

 @media (max-width:900px) {
     .card-split {
         grid-template-columns: 1fr
     }
 }

 .map-embed {
     position: relative;
     background: #efeafd;
     min-height: 320px
 }

 .map-embed iframe {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     border: 0
 }

 @media (min-width:901px) {
     .map-embed {
         aspect-ratio: 16/11;
         min-height: auto
     }
 }

 .card-split__body {
     padding: clamp(18px, 3vw, 28px);
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 14px
 }

 .meta {
     color: var(--muted);
     font-size: 14px
 }

 /* Footer */
 footer {
     background: linear-gradient(180deg, #ffffff 0%, #f7f6ff 100%);
     border-top: 1px solid var(--border)
 }

 .footer-wrap {
     padding: 28px 0
 }

 .footer-grid {
     display: grid;
     grid-template-columns: 1.1fr 1fr 1fr;
     gap: 22px
 }

 @media (max-width:960px) {
     .footer-grid {
         grid-template-columns: 1fr 1fr
     }
 }

 @media (max-width:680px) {
     .footer-grid {
         grid-template-columns: 1fr
     }
 }

 .f-block h4 {
     margin: 0 0 10px;
     font-size: 16px
 }

 .f-links {
     display: grid;
     gap: 8px
 }

 .f-contact {
     display: grid;
     gap: 8px
 }

 .f-row {
     display: flex;
     align-items: center;
     gap: 8px
 }

 .f-bottom {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     justify-content: space-between;
     color: var(--muted);
     font-size: 14px;
     margin-top: 16px
 }

 .cookie-banner {
     position: fixed;
     inset-inline: 12px;
     bottom: 12px;
     z-index: 1000;

     display: grid;
     grid-template-columns: 1fr auto;
     gap: 12px;
     align-items: center;

     background: #fff;
     border: 1px solid var(--border);
     border-radius: 16px;
     box-shadow: var(--shadow);
     padding: 12px 14px;

     transform: translateY(12px);
     opacity: 0;
     transition: transform .25s ease, opacity .25s ease;
 }

 @media (max-width: 700px) {
     .cookie-banner {
         grid-template-columns: 1fr
     }
 }

 .cookie-banner.hidden {
     display: none !important;
 }

 .cookie-text {
     position: relative;
     padding-left: 30px;
     color: var(--muted);
 }

 .cookie-text a {
     color: var(--brand);
 }

 .cookie-text::before {
     content: "";
     position: absolute;
     left: 0;
     top: 2px;
     width: 20px;
     height: 20px;
     background: currentColor;
     color: var(--brand);
     -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 109.3 6.4 3.5 3.5 0 01-4-4A10 10 0 0012 2zm-1 6h2v5h-2V8zm1 9.5a1.5 1.5 0 110-3 1.5 1.5 0 010 3z'/%3E%3C/svg%3E") center/contain no-repeat;
     mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 109.3 6.4 3.5 3.5 0 01-4-4A10 10 0 0012 2zm-1 6h2v5h-2V8zm1 9.5a1.5 1.5 0 110-3 1.5 1.5 0 010 3z'/%3E%3C/svg%3E") center/contain no-repeat;
 }

 .cookie-btn-group {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     justify-content: flex-end;
 }

 .cookie-btn-group .accept,
 .cookie-btn-group .reject,
 .cookie-btn-group .settings,
 .modal-actions .save,
 .modal-actions .cancel {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 10px 14px;
     border-radius: 12px;
     font-weight: 700;
     cursor: pointer;
     border: 1px solid var(--border);
     background: #fff;
     color: var(--text);
 }

 .cookie-btn-group .accept {
     background: var(--brand);
     border-color: var(--brand);
     color: #fff;
 }

 .cookie-btn-group .reject {
     background: #fff;
     border-color: var(--border);
     color: var(--text);
 }

 .cookie-btn-group .settings {
     background: #fff;
     border-color: var(--border);
     color: var(--accent);
 }

 .cookie-btn-group button:hover {
     filter: brightness(1.03);
 }

 .cookie-banner:not(.hidden) {
     transform: translateY(0);
     opacity: 1;
 }

 /* Modal overlay */
 .cookie-modal-overlay {
     position: fixed;
     inset: 0;
     z-index: 1001;
     display: none;
     place-items: center;
     background: rgba(0, 0, 0, .35);
     backdrop-filter: blur(2px);
 }

 .cookie-modal-overlay.active {
     display: grid;
 }

 /* Modal dialog */
 .cookie-modal {
     width: min(720px, 92vw);
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 16px;
     box-shadow: var(--shadow);
     padding: 16px;
     outline: none;

     transform: translateY(10px);
     opacity: 0;
     transition: transform .22s ease, opacity .22s ease;
 }

 .cookie-modal-overlay.active .cookie-modal {
     transform: translateY(0);
     opacity: 1;
 }

 .cookie-modal h2 {
     margin: 0 40px 12px 0;
     font-size: 20px;
     color: var(--text);
 }

 .modal-close {
     appearance: none;
     border: 0;
     background: transparent;
     cursor: pointer;
     width: 36px;
     height: 36px;
     border-radius: 10px;
     float: right;
 }

 .modal-close::before {
     content: "";
     display: block;
     width: 20px;
     height: 20px;
     margin: 8px;
     background: currentColor;
     color: var(--muted);
     -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z'/%3E%3C/svg%3E") center/contain no-repeat;
     mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z'/%3E%3C/svg%3E") center/contain no-repeat;
 }

 .modal-close:hover {
     background: var(--panel);
 }

 /* Categories */
 .cookie-category {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     padding: 12px;
     border: 1px solid var(--border);
     border-radius: 12px;
     background: #fff;
 }

 .cookie-category+.cookie-category {
     margin-top: 10px;
 }

 .cookie-category .readonly {
     opacity: .75;
 }

 .cookie-category label {
     display: flex;
     align-items: center;
     gap: 10px;
     cursor: pointer;
 }

 .cookie-category input[type="checkbox"] {
     width: 18px;
     height: 18px
 }

 /* Toggle switch */
 .toggle-switch {
     position: relative;
     width: 46px;
     height: 26px;
     flex: 0 0 46px;
 }

 .toggle-switch input {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     cursor: pointer;
     margin: 0;
 }

 .toggle-switch .slider {
     position: absolute;
     inset: 0;
     background: #e9e7f7;
     border: 1px solid var(--border);
     border-radius: 999px;
     transition: background .2s ease, border-color .2s ease;
 }

 .toggle-switch .slider::after {
     content: "";
     position: absolute;
     top: 50%;
     left: 4px;
     width: 18px;
     height: 18px;
     transform: translateY(-50%);
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 50%;
     box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
     transition: left .2s ease, border-color .2s ease;
 }

 .toggle-switch input:checked+.slider {
     background: var(--brand);
     border-color: var(--brand);
 }

 .toggle-switch input:checked+.slider::after {
     left: 24px;
     border-color: var(--brand);
 }

 .toggle-switch input:focus+.slider {
     box-shadow: 0 0 0 3px rgba(124, 58, 237, .2);
     /* pflaume focus */
 }

 /* Modal actions */
 .modal-actions {
     display: flex;
     gap: 10px;
     justify-content: flex-end;
     flex-wrap: wrap;
     margin-top: 14px;
 }

 .modal-actions .save {
     background: var(--brand);
     border: 1px solid var(--brand);
     color: #fff;
 }

 .modal-actions .cancel {
     background: #fff;
     border: 1px solid var(--border);
     color: var(--text);
 }

 .modal-actions .save:hover {
     filter: brightness(1.05);
 }

 .modal-actions .cancel:hover {
     background: #f3f1fd;
 }


 .cookie-banner:focus,
 .cookie-modal:focus,
 .cookie-btn-group button:focus,
 .modal-actions button:focus,
 .modal-close:focus {
     outline: 2px solid var(--accent);
     outline-offset: 2px;
 }


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

     .cookie-banner,
     .cookie-modal {
         transition: none !important;
     }
 }

 @media (max-width: 1200px) {
     .container {
         padding-inline: 16px;
     }

     .brand img {
         width: 64px;
     }

     nav {
         gap: 10px;
     }
 }

 @media (max-width: 980px) {
     header .inner {
         grid-template-columns: 1fr auto;
         grid-template-areas:
             "brand cta"
             "nav   nav";
         row-gap: 8px;
         min-height: 68px;
     }

     .brand {
         grid-area: brand;
     }

     header .inner .cta-btn {
         grid-area: cta;
         justify-self: end;
         padding: 10px 14px;
         border-radius: 10px;
     }

     header .inner nav {
         grid-area: nav;
         justify-self: stretch;
     }

     nav {
         overflow-x: auto;
         white-space: nowrap;
         -webkit-overflow-scrolling: touch;
         scroll-snap-type: x proximity;
         padding-bottom: 2px;
         gap: 6px;
     }

     nav a {
         display: inline-block;
         scroll-snap-align: start;
         padding: 8px 10px;
         margin-right: 2px;
     }
 }

 @media (max-width: 640px) {
     .brand img {
         width: 112px;
     }

     header .inner .cta-btn {
         padding: 9px 12px;
         font-weight: 700;
     }

     nav a {
         padding: 8px 10px;
         font-size: 14px;
         border-radius: 8px;
     }
 }

 @media (max-width: 980px) {
     nav::-webkit-scrollbar {
         height: 6px;
     }

     nav::-webkit-scrollbar-thumb {
         background: transparent;
     }

     nav:hover::-webkit-scrollbar-thumb {
         background: #ddd;
         border-radius: 3px;
     }
 }

 @media (max-width: 980px) {
     .hero {
         padding-block: 20px;
     }

     .hero-cta {
         gap: 8px;
     }

     .hero-media {
         max-height: 56vh;
     }
 }

 @media (max-width: 960px) {
     .footer-grid {
         grid-template-columns: 1fr 1fr;
         gap: 18px;
     }

     .f-links,
     .f-contact {
         gap: 10px;
     }

     .f-links a {
         padding-block: 6px;
         display: inline-block;
     }
 }

 @media (max-width: 680px) {
     .footer-grid {
         grid-template-columns: 1fr;
         gap: 14px;
     }

     .footer-wrap {
         padding: 22px 0;
     }

     .f-block h4 {
         font-size: 15px;
         margin-bottom: 8px;
     }

     .f-row {
         gap: 10px;
         flex-wrap: wrap;
     }

     .f-links a {
         padding-block: 6px;
         font-size: 15px;
     }

     .f-bottom {
         flex-direction: column;
         align-items: flex-start;
         gap: 8px;
         font-size: 13.5px;
     }
 }

 @media (max-width: 420px) {
     .f-links a {
         padding-block: 8px;
     }

     .f-row {
         line-height: 1.5;
     }
 }

 @media (hover:none) {
     nav a {
         padding: 10px 12px;
     }

     .cta-btn,
     .cta-ghost {
         padding: 12px 14px;
     }
 }