@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Syne:wght@400..800&display=swap');
:root {
    --color-bg-light: #f4f5f6;
    --color-nintendo: #e60012;
}
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/Inter-Variable.woff2) format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/SpaceMono-Regular.woff2) format('woff2'); }
/* ========================================= */
/* 1. BASE, RESET & FONTS */
/* ========================================= */
*, :after, :before { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-position: 50%; background-repeat: no-repeat; border: 0; box-sizing: border-box; font: inherit; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; position: relative; scroll-behavior: smooth; text-decoration: none; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; vertical-align: baseline }
html { font-size: 100%; scrollbar-gutter: stable; overflow-x: hidden !important; max-width: 100vw !important; position: relative !important; }
.speakbutton { display: block; width: auto; border: 1.9px solid #ef6c26; margin: 20px 48px 0 0; padding: 10px 20px 10px 20px; text-align: right; color: #ef6c26; font-weight: 200; }
.speakbutton:hover { background: #0d0d0d; border: 1.9px solid #0d0d0d; color: #fff; }
@font-face { font-family: VistaSans; font-style: normal; font-weight: 200; src: url(fonts/VistaSans200.woff2) format("woff2"), url(fonts/VistaSans200.woff) format("woff") }
@font-face { font-family: VistaSans; font-style: italic; font-weight: 200; src: url(fonts/VistaSans200i.woff2) format("woff2"), url(fonts/VistaSans200i.woff) format("woff") }
@font-face { font-family: VistaSans; font-style: normal; font-weight: 400; src: url(fonts/VistaSans400.woff2) format("woff2"), url(fonts/VistaSans400.woff) format("woff") }
@font-face { font-family: VistaSans; font-style: normal; font-weight: 700; src: url(fonts/VistaSans700.woff2) format("woff2"), url(fonts/VistaSans700.woff) format("woff") }
/* ========================================= */
/* 3. CORE TYPOGRAPHY & TAGS */
/* ========================================= */
body { color: #0d0d0d; font-family: 'Space Grotesk', VistaSans, sans-serif; font-size: clamp(0.875rem, 0.25vw + 0.8rem, 1rem); font-weight: 200; line-height: 1.25; overflow-x: hidden !important; max-width: 100vw !important; }
body .has-alternate-colors, body .has-mixed-colors { color: #fff }
b, strong { font-style: normal; font-weight: 400 }
em, i { font-style: italic }
.h1, h1 { font-family: VistaSans, sans-serif; color: #ef6c26; font-size: clamp(2.25rem, 5vw + 1rem, 2.59rem); font-weight: 200; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; line-height: 1.125; margin-bottom: 2rem; margin-top: 4rem; max-width: 48rem }
.h1:first-child, h1:first-child { margin-top: 0 }
.h1:last-child, h1:last-child { margin-bottom: 0 }
@media only screen and (min-width:32em) { .h1, h1 { -webkit-hyphens: none; -ms-hyphens: none; hyphens: none } }
.has-alternate-colors .h1, .has-alternate-colors h1, .has-mixed-colors .h1, .has-mixed-colors h1 { color: #fff }
.h1 b, .h1 strong, h1 b, h1 strong { font-weight: 400 }
.h2, .has-mixed-colors .h1 b, .has-mixed-colors .h1 strong, .has-mixed-colors h1 b, .has-mixed-colors h1 strong, h2 { font-family: VistaSans, sans-serif; color: #ef6c26 }
h2 { font-size: clamp(1.5rem, 3vw + 0.5rem, 2.25rem); font-weight: 200; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; line-height: 1.125; margin-bottom: 1.5rem; margin-top: 4rem; max-width: 60rem; }
.h2:first-child, h2:first-child { margin-top: 0 }
.h2:last-child, h2:last-child { margin-bottom: 0 }
@media only screen and (min-width:32em) { .h2, h2 { -webkit-hyphens: none; -ms-hyphens: none; hyphens: none } }
.has-alternate-colors .h2, .has-alternate-colors h2, .has-mixed-colors .h2, .has-mixed-colors h2 { color: #fff }
.has-huge-text .h2, .has-huge-text h2 { font-size: clamp(2rem, 4vw + 1rem, 3rem) }
.h2.is-large, h2.is-large { font-size: clamp(1.75rem, 3vw + 1rem, 2.25rem) }
.h2.is-regular, h2.is-regular { font-weight: 200 }
.h2.is-dark, h2.is-dark { color: #0d0d0d }
.h2 a, h2 a { color: #ef6c26; border-bottom: .0625rem solid #ef6c26 }
.h2 em, .h2 i, h2 em, h2 i { font-style: normal; font-weight: 200 }
h3 { font-family: VistaSans, sans-serif; color: #ef6c26; margin-top: 2rem; margin-bottom: 1rem; font-size: clamp(1.5rem, 2.5vw + 0.5rem, 1.8rem); font-weight: 500; }
h4 { color: #ef6c26; margin-top: 1.5rem; margin-bottom: 1rem; font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.4rem); font-weight: 500; }
.h5, .h6, h5, h6 { color: #ef6c26; margin-top: 1rem; margin-bottom: 1rem; font-size: clamp(1.1rem, 1vw + 0.5rem, 1.25rem); font-weight: 500; }
.h3:first-child, .h4:first-child, .h5:first-child, .h6:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top: 0 }
.h3:last-child, .h4:last-child, .h5:last-child, .h6:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child { margin-bottom: 0 }
.h3 a, .h4 a, .h5 a, .h6 a, h3 a, h4 a, h5 a, h6 a { color: #ef6c26; border-bottom: .0625rem solid #ef6c26 }
p, ul:not(.desktop-main-nav__list), ol, li:not(.desktop-main-nav__list li), table, td, th { font-size: clamp(1rem, 0.5vw + 0.875rem, 1.25rem); line-height: 1.575; margin-bottom: .5rem; margin-top: 1.4rem; max-width: 48rem; }
p:first-child, ul:first-child:not(.desktop-main-nav__list), ol:first-child { margin-top: 22px }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0 }
.main-layout__column.main-layout__column--big.has-big-content { flex: auto; }
.has-large-text p { font-size: clamp(1.125rem, 1.5vw + 0.8rem, 1.375rem); -webkit-hyphens: none; -ms-hyphens: none; hyphens: none }
.has-medium-text p { font-size: clamp(1rem, 0.5vw + 0.9rem, 1.125rem) }
.has-huge-text p { font-size: clamp(1.5rem, 5vw + 1rem, 2rem); -webkit-hyphens: none; -ms-hyphens: none; hyphens: none }
p a { color: #ef6c26; border-bottom: .0625rem solid #ef6c26 }
blockquote { color: #ef6c26; font-size: 1.125rem; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; max-width: 60rem }
@media only screen and (min-width:32em) { blockquote { font-size: 1.25rem; font-weight: 200 } }
@media only screen and (min-width:64em) { blockquote { font-size: 2rem } }
blockquote footer { margin-top: 1rem; font-size: 1.125rem; font-weight: 400 }
blockquote a { color: #ef6c26; border-bottom: .0625rem solid #ef6c26 }
img { display: block; height: auto; width: 100%; border-radius: 36px; }
.has-shadow { box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15); }
/* ========================================= */
/* 4. UI COMPONENTS (Icons, Buttons, Controls) */
/* ========================================= */
/* Base Button – Animated (WMF KI Style) – ohne Glow (global) */
.btn { font-size: 16px; padding: 14px 28px; border-radius: 999px; cursor: pointer; display: inline-block; text-decoration: none; border: 2px solid transparent; font-weight: 400; transition: transform 0.3s cubic-bezier(0.25,1,0.5,1), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; will-change: transform; position: relative; overflow: hidden; box-shadow: none; }
/* Primary (gefüllt) – nur Lift */
.btn-primary { background-color: #e86f2d; color: #ffffff; border-color: #e86f2d; box-shadow: none; }
.btn-primary:hover { background-color: #cf5f25; border-color: #cf5f25; transform: translateY(-3px); box-shadow: none; }
.btn-primary:active { transform: translateY(-1px); box-shadow: none; }
/* Outline – nur Lift */
.btn-outline { background-color: transparent; color: #e86f2d; border-color: #e86f2d; box-shadow: none; }
.btn-outline:hover { background-color: #e86f2d; color: #ffffff; transform: translateY(-3px); box-shadow: none; }
.btn-outline:active { transform: translateY(-1px); box-shadow: none; }
/* Vereinheitlicht: Alle Buttons gleich – Hover Lift ohne Glow + Entrance Bounce (ohne opacity-Leak mit data-scroll) */
.btn-container, .cta-row, .karate-buttons { display: flex; justify-content: center; align-items: center; gap: 16px; width: 100%; margin: 40px 0 0 0; flex-wrap: wrap; }
.cta-row, .karate-buttons { margin: 0; }
@keyframes btnEntrance { 0% { transform: translateY(16px) scale(0.96); } 60% { transform: translateY(-4px) scale(1.02); } 100% { transform: translateY(0) scale(1); } }
.btn, .timo-banner-btn, .spine-btn.next { animation: btnEntrance 0.6s cubic-bezier(0.34,1.56,0.64,1) both !important; }
.btn:nth-child(1), .timo-banner-btn:nth-child(1), .spine-btn.next:nth-child(1) { animation-delay: 0.05s !important; }
.btn:nth-child(2), .timo-banner-btn:nth-child(2), .spine-btn.next:nth-child(2) { animation-delay: 0.14s !important; }
.btn:nth-child(3), .timo-banner-btn:nth-child(3), .spine-btn.next:nth-child(3) { animation-delay: 0.23s !important; }
@media (prefers-reduced-motion: reduce) { .btn, .timo-banner-btn, .spine-btn.next { animation: none !important; transform: none !important; } }
.icon { color: #ef6c26; flex: 0 0 auto; height: 1.5rem; width: 1.5rem }
.has-alternate-colors .icon { color: #fff }
.icon svg { height: 100%; width: 100% }
.icon--tiny { height: 1rem; width: 1rem }
.icon--tiny svg { stroke-width: 2 }
.icon--small { height: 1.5rem; width: 1.5rem }
.icon--small svg { stroke-width: 1.5 }
.icon--large { height: 2.25rem; width: 2.25rem }
.icon--large svg { stroke-width: .75 }
.icon--huge { height: 3.5rem; width: 3.5rem }
.icon--huge svg { stroke-width: .8 }
.button { font-size: 1.125rem; background-color: #ef6c26; border: .0625rem solid #ef6c26; border-radius: .5rem 0; color: #fff; font-weight: 400; max-width: 100%; padding: .75rem 1.25rem; text-align: center; transition: box-shadow .2s ease-out, transform .2s ease-out; will-change: box-shadow, transform }
.button:hover { box-shadow: 0 .25rem .5rem rgba(13, 13, 13, .125); transform: translateY(-.125rem) }
.button.is-blue { background-color: #8c9dd0; border-color: #8c9dd0 }
.has-alternate-colors .button { background-color: #fff; border-color: #fff; color: #ef6c26 }
.button--ghost { background-color: rgba(239, 108, 38, 0); color: #ef6c26 }
.button--ghost.is-blue { background-color: rgba(239, 108, 38, 0); color: #8c9dd0 }
.has-alternate-colors .button--ghost { background-color: rgba(239, 108, 38, 0); border-color: #fff; color: #fff }
hr { border-top: .0625rem solid rgba(222, 221, 221, 0); width: 100% } hr:first-child { margin-top: 0 } hr:last-child { margin-bottom: 0 }
hr.has-line { border-color: #dedddd }
hr.has-default-offset { margin-bottom: 1rem; margin-top: 1rem }
hr.has-default-offset.has-line, hr.has-large-offset { margin-bottom: 2rem; margin-top: 2rem }
hr.has-large-offset:first-child { margin-top: 0 } hr.has-large-offset:last-child { margin-bottom: 0 }
hr.has-large-offset.has-line { margin-bottom: 4rem; margin-top: 4rem }
.page-header { padding: clamp(30px, 4vw, 50px) clamp(26px, 6vw, 80px) 0 clamp(26px, 6vw, 80px); }
.breadcrumb { display: flex; flex-flow: row wrap; margin: 35px 0px 0px 23px; width: 100%; }
.breadcrumb__item { align-items: center; display: inline-flex }
.breadcrumb__item, .breadcrumb__item__divider { margin-right: .3rem; color: #0d0d0d; }
.breadcrumb__item:first-child .breadcrumb__item__divider { display: none }
.breadcrumb__item a { color: #0d0d0d; font-weight: 300; font-size: clamp(0.775rem, 0.5vw + 0.7rem, 1.0rem); }
.breadcrumb__item a:after { background-color: #ef6c26; bottom: -.0625rem; content: ""; display: block; height: .0625rem; left: 0; position: absolute; transform: scaleX(0); transform-origin: left; transition: transform .2s ease-in-out; width: 100%; will-change: transform }
.breadcrumb__item a:hover:after { transform: scaleX(1) }
.breadcrumb__item a.is-active { color: #ef6c26; pointer-events: none; text-decoration: underline; font-weight: 500; }
.breadcrumb__item a.is-active:after { display: none; }
.has-alternate-colors .breadcrumb__item a { color: #fff }
.shortlinks { align-items: flex-end; display: flex; flex-flow: column nowrap; width: 100% }
.shortlinks__item { align-items: flex-start; border-top: .0625rem solid #dedddd; color: #0d0d0d; display: flex; justify-content: flex-end; margin-top: 1rem; padding-top: 1rem; width: 100% }
/* VetCare-Style Links: orange unterstrichen + Pfeil ↗ */
.has-medium-content a:not(.btn):not(.pizza-pill-nav__link):not(.breadcrumb__item a),
.has-big-content a:not(.btn):not(.pizza-pill-nav__link):not(.breadcrumb__item a),
.tabelle a:not(.btn) { color: #ef6c26; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: #ef6c26; font-weight: 400; transition: color 0.2s ease; }
.has-medium-content a:not(.btn):hover, .has-big-content a:not(.btn):hover, .tabelle a:not(.btn):hover { color: #cf5f25; text-decoration-color: #cf5f25; }
a[target="_blank"]:not(.btn):not(.pizza-pill-nav__link):not(.pizza-stepper__step)::after { content: " ↗"; font-weight: 400; display: inline; }
.pizza-stepper a[target="_blank"]::after { content: none !important; }
@media only screen and (min-width:32em) { .shortlinks__item { max-width: 20rem; } }
.has-alternate-colors .shortlinks__item { border-color: hsla(0, 0%, 100%, .25); color: #fff }
.shortlinks__item:first-child { border-top: 0; margin-top: 0; padding-top: 0 }
.shortlinks__item__text { margin-right: .75rem; text-align: right; width: 100% }
.shortlinks__item__icon, .shortlinks__item__text { transition: transform .2s ease-out; will-change: transform }
.shortlinks__item__icon { flex: 0 0 auto }
.shortlinks__item:hover > .shortlinks__item__icon, .shortlinks__item:hover > .shortlinks__item__text { transform: translateX(.5rem) }
.buttonset { display: flex; margin-bottom: 2rem; margin-top: 1.25rem; opacity: 0; transform: translateY(1rem); transition: opacity .2s ease-out, transform .2s ease-out .2s; width: 100% }
.buttonset:first-child { margin-top: 0 } .buttonset:last-child { margin-bottom: 0 }
.buttonset[data-scroll=in] { opacity: 1; transform: translateY(0) }
.buttonset[data-scroll=out] { opacity: 0; transform: translateY(1rem) }