…
Bausteine: krt-hero · krt-benefits · krt-split · krt-steps · krt-trio
krt-options · krt-video · krt-box · krt-faq · krt-cta
-------------------------------------------------------------------------- */
body:has(.krt-story-wrap) { overflow-x: clip; }
.krt-story-wrap {
margin-top: var(--krt-space);
/* volle Bildschirmbreite, auch wenn NOVA einen Container drumherum legt */
width: 100vw;
position: relative;
left: 50%;
margin-left: -50vw;
}
.krt-story {
font-family: var(--krt-font);
color: var(--krt-black);
font-size: 17px;
line-height: 1.6;
}
.krt-story * { box-sizing: border-box; }
.krt-story img { display: block; max-width: 100%; height: auto; }
.krt-story p { margin: 0 0 1em; }
.krt-story p:last-child { margin-bottom: 0; }
.krt-story a { color: inherit; }
.krt-section { padding: var(--krt-space) var(--krt-gutter); background: var(--krt-white); }
.krt-inner { max-width: var(--krt-max); margin: 0 auto; }
.krt-center { text-align: center; }
.krt-center .krt-lead { margin-left: auto; margin-right: auto; }
.krt-story .krt-paper { background: var(--krt-paper); }
.krt-story .krt-dark { background: var(--krt-black); color: var(--krt-white); }
.krt-story .krt-dark-2 { background: var(--krt-black-2); color: var(--krt-white); }
/* Typografie */
.krt-eyebrow {
display: block;
margin: 0 0 16px;
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--krt-muted);
}
.krt-dark .krt-eyebrow, .krt-dark-2 .krt-eyebrow { color: var(--krt-accent); }
.krt-story h2 {
margin: 0 0 20px;
font-family: var(--krt-font-display);
font-weight: 700;
font-size: clamp(36px, 4.4vw, 60px);
line-height: 1;
text-transform: uppercase;
color: inherit;
}
.krt-story h3 {
margin: 0 0 6px;
font-family: var(--krt-font-display);
font-weight: 700;
font-size: 22px;
line-height: 1.1;
letter-spacing: 1px;
text-transform: uppercase;
color: inherit;
}
.krt-lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--krt-text); max-width: 620px; }
.krt-story .krt-dark p, .krt-story .krt-dark-2 p { color: var(--krt-on-dark); }
.krt-dark .krt-lead, .krt-dark-2 .krt-lead { font-size: 18px; }
/* Buttons */
.krt-btn {
display: inline-flex;
align-items: center;
min-height: 52px;
padding: 14px 28px;
background: var(--krt-black);
color: var(--krt-white) !important;
font-size: 15px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none !important;
}
.krt-btn:hover { background: #333333; }
.krt-btn--accent { background: var(--krt-accent); color: var(--krt-black) !important; }
.krt-btn--accent:hover { background: #f0b456; }
.krt-link { font-weight: 600; font-size: 15px; padding: 14px 4px; display: inline-flex; align-items: center; min-height: 52px; }
/* Hero: Text links, Bild rechts */
.krt-hero .krt-inner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
gap: 40px;
align-items: center;
}
.krt-story .krt-hero h2 { font-size: clamp(44px, 6vw, 84px); line-height: 0.95; }
.krt-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.krt-hero img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
/* Benefits: Icon + Text, als Leiste mit Linien */
.krt-story .krt-benefits-bar {
padding-top: 28px;
padding-bottom: 28px;
border-top: 1px solid var(--krt-line);
border-bottom: 1px solid var(--krt-line);
}
.krt-benefits {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 24px;
}
.krt-benefit { display: flex; gap: 14px; align-items: flex-start; }
.krt-benefit strong { display: block; font-size: 16px; line-height: 1.35; }
.krt-benefit span:not(.krt-icon) { display: block; font-size: 14px; line-height: 1.45; color: var(--krt-muted); }
/* Icons (als CSS-Maske, damit die Wawi kein SVG im Text braucht) */
.krt-icon {
flex: 0 0 28px;
width: 28px;
height: 28px;
background: currentColor;
-webkit-mask: var(--krt-i) center / contain no-repeat;
mask: var(--krt-i) center / contain no-repeat;
}
.krt-icon--plug { --krt-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2v6M15 2v6M6 8h12v4a6 6 0 0 1-12 0z'/%3E%3Cpath d='M12 18v4'/%3E%3C/svg%3E"); }
.krt-icon--check { --krt-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E"); }
.krt-icon--doc { --krt-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E"); }
.krt-icon--tool { --krt-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l6-6M14 4l6 6-8 8-6-6z'/%3E%3C/svg%3E"); }
.krt-icon--target{ --krt-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4M17 12h4M12 3v4M12 17v4'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E"); }
.krt-icon--bike { --krt-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='16' r='3.5'/%3E%3Ccircle cx='18.5' cy='16' r='3.5'/%3E%3Cpath d='M5.5 16l4-7h6l3 7M9.5 9L8 6H6M15.5 9l1.5-3h2'/%3E%3C/svg%3E"); }
/* Split: Bild + Text */
.krt-split .krt-inner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
gap: 56px;
align-items: center;
}
.krt-split img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.krt-split img.krt-contain { object-fit: contain; background: var(--krt-white); }
/* Werkstatt-Schritte */
.krt-steps-head { max-width: 760px; margin-bottom: 48px; }
.krt-steps-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: 16px;
}
.krt-step img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; margin-bottom: 12px; }
.krt-step p { font-size: 15px; }
/* Drei Bilder / Bild-Text-Bild */
.krt-trio .krt-inner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: 16px;
}
.krt-trio img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.krt-trio-text { display: flex; flex-direction: column; justify-content: center; padding: 8px; }
.krt-story .krt-trio h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.02; }
/* Vergleich: zwei freigestellte Teile nebeneinander */
.krt-compare-head { max-width: 760px; margin-bottom: 40px; }
.krt-compare-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
gap: 32px;
}
.krt-compare-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--krt-white); margin-bottom: 16px; }
.krt-compare-item p { font-size: 15px; color: var(--krt-text); }
/* Bildkarussell (js/krt-carousel.js ergänzt Pfeile und Autoplay) */
.krt-story .krt-gallery { padding-left: 0; padding-right: 0; }
.krt-gallery > .krt-inner { padding: 0 var(--krt-gutter); }
.krt-carousel { margin-top: 40px; }
.krt-carousel-track {
--krt-pad: max(var(--krt-gutter), calc((100vw - var(--krt-max)) / 2));
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: 0 var(--krt-pad);
padding: 0 var(--krt-pad);
scrollbar-width: none;
}
.krt-carousel-track::-webkit-scrollbar { display: none; }
.krt-carousel-track::after { content: ""; flex: 0 0 1px; }
.krt-slide { flex: 0 0 auto; scroll-snap-align: start; }
.krt-story .krt-slide img { height: clamp(280px, 46vw, 560px); width: auto; max-width: 86vw; object-fit: cover; }
.krt-slide-cap { display: block; margin-top: 12px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--krt-on-dark); }
.krt-carousel-nav { display: flex; gap: 8px; justify-content: flex-end; max-width: var(--krt-max); margin: 24px auto 0; padding: 0 var(--krt-gutter); box-sizing: content-box; }
.krt-carousel-btn {
width: 52px;
height: 52px;
border: 1px solid rgba(255, 255, 255, 0.3);
background: transparent;
color: var(--krt-white);
font-size: 28px;
line-height: 1;
cursor: pointer;
}
.krt-carousel-btn:hover { background: var(--krt-accent); border-color: var(--krt-accent); color: var(--krt-black); }
/* Ausführungen */
.krt-options-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: 20px;
margin-top: 40px;
}
.krt-option { background: var(--krt-white); display: flex; flex-direction: column; }
.krt-option img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--krt-white); }
.krt-option-swatch { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: #e9e9e6; }
.krt-option-body { padding: 18px 20px; }
.krt-option-body p { font-size: 15px; color: var(--krt-muted); }
.krt-swatch { display: block; width: 72px; height: 72px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.08); }
.krt-swatch--primer { background: #a7a7a2; }
.krt-swatch--black { background: #1b1b1b; }
.krt-swatch--monolith { background: linear-gradient(135deg, #6b6e70, #44474a); }
.krt-swatch--carbon { background: repeating-linear-gradient(45deg, #2a2a2a 0 4px, #111111 4px 8px); }
/* Video (nutzt den Consent von NOVA: iframe.needs-consent.youtube + a.give-consent) */
.krt-video .krt-inner { max-width: 1080px; }
.krt-video-frame {
position: relative;
aspect-ratio: 16 / 9;
margin: 32px 0;
background: #000000;
overflow: hidden;
}
.krt-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.krt-video-frame .give-consent {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
padding: 24px;
color: #e0e0e0 !important;
font-size: 14px;
text-align: center;
text-decoration: none !important;
background: #000000;
}
.krt-video-frame .give-consent.d-none { display: none; }
.krt-video-frame .give-consent img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.35;
}
.krt-video-frame .give-consent span { position: relative; max-width: 520px; }
.krt-video-frame .give-consent .krt-play {
width: 76px;
height: 76px;
border-radius: 50%;
background: var(--krt-accent);
display: flex;
align-items: center;
justify-content: center;
}
.krt-video-frame .give-consent .krt-play::after {
content: "";
margin-left: 5px;
border-style: solid;
border-width: 13px 0 13px 21px;
border-color: transparent transparent transparent var(--krt-black);
}
/* Lieferumfang */
.krt-box-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--krt-line); }
.krt-box-list li {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid var(--krt-line);
}
.krt-box-list li span:last-child:not(:first-child) { color: var(--krt-muted); font-size: 15px; text-align: right; }
/* FAQ */
.krt-faq .krt-inner { max-width: 880px; }
.krt-faq-list { border-top: 1px solid var(--krt-line-strong); margin-top: 8px; }
.krt-faq-list details { border-bottom: 1px solid var(--krt-line-strong); }
.krt-faq-list summary {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 20px 0;
font-weight: 600;
font-size: 18px;
cursor: pointer;
list-style: none;
}
.krt-faq-list summary::-webkit-details-marker { display: none; }
.krt-faq-list summary::after {
content: "+";
display: inline-block;
font-size: 26px;
line-height: 1;
transition: transform 0.2s ease;
}
.krt-faq-list details[open] summary::after { transform: rotate(45deg); }
.krt-faq-list details p { margin: 0 0 20px; color: var(--krt-text); }
/* Abschluss-Leiste */
.krt-cta .krt-inner {
display: flex;
flex-wrap: wrap;
gap: 32px;
align-items: center;
justify-content: space-between;
}
.krt-story .krt-cta { padding-top: 72px; padding-bottom: 72px; }
.krt-story .krt-cta h2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.05; margin-bottom: 10px; }
.krt-cta-text { max-width: 680px; }
/* 6. Startseite (page/krt_home.tpl) ---------------------------------------- */
.krt-story-wrap.krt-home { margin-top: 0; }
.krt-story .krt-home-hero {
position: relative;
min-height: min(88vh, 820px);
display: flex;
align-items: flex-end;
padding-top: 160px;
background: var(--krt-black);
color: var(--krt-white);
overflow: hidden;
}
.krt-story .krt-home-hero .krt-home-hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 60%;
}
.krt-home-hero::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(18, 18, 18, 0.65) 0%, rgba(18, 18, 18, 0) 65%),
linear-gradient(180deg, rgba(18, 18, 18, 0.2) 0%, rgba(18, 18, 18, 0.5) 45%, rgba(18, 18, 18, 0.95) 100%);
}
.krt-home-hero .krt-inner { position: relative; z-index: 1; width: 100%; }
.krt-home-hero .krt-eyebrow { color: var(--krt-accent); }
.krt-story .krt-home-hero h1 {
margin: 0 0 20px;
max-width: 900px;
font-family: var(--krt-font-display);
font-weight: 700;
font-size: clamp(48px, 7.5vw, 104px);
line-height: 0.92;
text-transform: uppercase;
color: var(--krt-white);
}
.krt-story .krt-home-hero .krt-lead { color: #e6e6e6; max-width: 640px; }
.krt-story .krt-link--light { color: var(--krt-white); }
/* Kategorien */
.krt-cats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: 16px;
margin-top: 40px;
}
.krt-story .krt-cat {
position: relative;
display: flex;
align-items: flex-end;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--krt-black);
color: var(--krt-white);
text-decoration: none;
}
.krt-cat img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.krt-cat:hover img { transform: scale(1.04); }
.krt-cat::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.8) 100%);
}
.krt-cat--plain::after { display: none; }
.krt-cat-label { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; padding: 24px; }
.krt-cat-name {
font-family: var(--krt-font-display);
font-weight: 700;
font-size: 30px;
line-height: 1;
text-transform: uppercase;
}
.krt-cat-more { font-size: 14px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--krt-accent); }
/* Aktuelles Projekt (R12) */
.krt-project-head {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
gap: 56px;
align-items: center;
margin-bottom: 48px;
}
.krt-project-head img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.krt-story .krt-project h2 { font-size: clamp(44px, 6vw, 84px); line-height: 0.95; }
.krt-project .krt-step h3 { margin-top: 2px; }
/* 7. Kontaktseite (contact/index.tpl) -------------------------------------- */
.krt-icon--phone { --krt-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h4l2 5-2.5 1.5a11 11 0 0 0 6 6L16 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.krt-icon--mail { --krt-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.krt-icon--pin { --krt-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-12a7 7 0 0 1 14 0c0 5.8-7 12-7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E"); }
.krt-icon--play { --krt-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='3'/%3E%3Cpath d='M10 9l5 3-5 3z'/%3E%3C/svg%3E"); }
.krt-icon--box { --krt-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l9-4 9 4v10l-9 4-9-4z'/%3E%3Cpath d='M3 7l9 4 9-4M12 11v10'/%3E%3C/svg%3E"); }
.krt-story .krt-contact-hero { min-height: min(70vh, 640px); }
.krt-story a.krt-benefit { color: inherit; text-decoration: none; }
.krt-story a.krt-benefit:hover strong { color: var(--krt-accent); }
/* Themen-Kacheln */
.krt-topics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: 16px;
margin-top: 40px;
}
.krt-story .krt-topic {
display: flex;
flex-direction: column;
gap: 10px;
padding: 28px 24px;
background: var(--krt-white);
border: 1px solid transparent;
text-decoration: none;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.krt-story .krt-topic:hover { border-color: var(--krt-black); transform: translateY(-2px); }
.krt-topic .krt-icon { margin-bottom: 8px; }
.krt-topic p { font-size: 15px; color: var(--krt-text); flex: 1; }
.krt-topic-more { font-size: 14px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.krt-topic:hover .krt-topic-more { color: var(--krt-accent); }
/* Formular */
.krt-contact-grid {
max-width: 860px;
margin: var(--krt-space) auto;
font-family: var(--krt-font);
}
#krt-form { scroll-margin-top: 140px; }
.krt-form-head { margin-bottom: 32px; }
.krt-form-head h2 { font-size: clamp(36px, 4.4vw, 60px); margin: 0 0 12px; }
.krt-form-head p { font-size: 17px; color: var(--krt-text); margin: 0; }
.krt-contact-main .contact-form > hr:first-of-type,
.krt-contact-main .contact-form-hr { border-color: var(--krt-line); }
.krt-contact-main .contact-form fieldset > [class*="col-lg-"] { flex: 0 0 100%; max-width: 100%; margin-left: 0; }
.krt-contact-main .contact-form .offset-lg-4 { margin-left: 0; }
.krt-contact-main .contact-form .h3 { font-size: 22px; letter-spacing: 1px; margin-bottom: 16px; }
.krt-contact-main .form-control,
.krt-contact-main .custom-select { border-radius: 0; min-height: 52px; }
.krt-contact-main textarea.form-control { min-height: 200px; }
.krt-contact-main .form-control:focus,
.krt-contact-main .custom-select:focus { border-color: var(--krt-black); box-shadow: 0 0 0 2px var(--krt-accent); }
.krt-contact-main .btn-primary { min-height: 52px; background: var(--krt-accent); border-color: var(--krt-accent); color: var(--krt-black); }
.krt-contact-main .btn-primary:hover { background: #f0b456; border-color: #f0b456; color: var(--krt-black); }
/* 8. Kategorie BMW R12 (productlist/krt_r12.tpl) --------------------------- */
/* nicht randlos, damit es auch mit Seitenleiste sauber in der Spalte sitzt */
.krt-story-wrap.krt-r12 { width: auto; left: auto; margin: 0 0 40px; }
.krt-r12 .krt-section { padding: clamp(32px, 5vw, 64px); }
.krt-story .krt-project h1 {
margin: 0 0 20px;
font-family: var(--krt-font-display);
font-weight: 700;
font-size: clamp(40px, 5vw, 72px);
line-height: 0.95;
text-transform: uppercase;
color: var(--krt-white);
}
.krt-r12 .krt-project-head { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 40px; }
.krt-r12 .krt-steps-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }