/* ============================================================= components.css — wiederverwendbare Bausteine ============================================================= */ /* ------------------------------------------------------------- Einblend-Animationen (JS: assets/js/modules/reveal.js) ------------------------------------------------------------- */ /* Nur ausblenden, wenn JavaScript läuft — sonst bliebe der Inhalt für immer unsichtbar. Die Klasse „js" setzt ein Einzeiler im . */ .js [data-reveal] { opacity: 0; transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); will-change: opacity, transform; } .js [data-reveal="up"] { transform: translateY(40px); } .js [data-reveal="left"] { transform: translateX(-40px); } .js [data-reveal="right"] { transform: translateX(40px); } .js [data-reveal].is-revealed { opacity: 1; transform: none; } /* ------------------------------------------------------------- Überschriften-Bausteine ------------------------------------------------------------- */ /* Kleine, gesperrte Kleinüberschrift über einer Headline */ .eyebrow { margin: 0; color: var(--c-accent); font-family: var(--f-heading); font-size: var(--fs-eyebrow); font-weight: 600; line-height: 1; letter-spacing: var(--ls-wider); text-transform: capitalize; } .eyebrow--display { font-family: var(--f-display); font-weight: 700; text-align: center; } /* Große Abschnittsüberschrift in der Display-Schrift */ .section-title { font-family: var(--f-display); font-size: var(--fs-h2); font-weight: 600; line-height: 1; text-transform: none; } .section-title--center { text-align: center; } /* Waagerechte Trennlinie in Akzentfarbe */ .rule { height: 0; margin: 15px 0; border: 0; border-top: 5px solid var(--c-accent); } /* ------------------------------------------------------------- Schaltflächen ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 18px 22px; border-radius: 0; background-image: linear-gradient(160deg, var(--c-accent-orange) 25%, var(--c-accent-warm) 100%); color: var(--c-text-strong); font-family: var(--f-body); font-size: var(--fs-body); font-weight: 400; text-align: center; transition: background-image var(--dur) var(--ease), color var(--dur) var(--ease); } .btn:hover, .btn:focus { background-image: linear-gradient(160deg, var(--c-accent-sand) 0%, #F8C530 100%); color: var(--c-text-strong); } .btn--accent { padding: 10px 20px; border-radius: var(--radius-sm); background-image: none; background-color: var(--c-accent); box-shadow: var(--shadow-btn); font-family: var(--f-display); font-weight: 700; text-transform: uppercase; } .btn--accent:hover, .btn--accent:focus { background-color: var(--c-gold); color: var(--c-bg); } /* ------------------------------------------------------------- Info-Karte (Startseite: Artists / Brands / Netzwerk) ------------------------------------------------------------- */ .card { height: 100%; padding: var(--space-md); background: var(--c-surface); } .card__icon { width: 25%; margin: 0 0 var(--space-sm) -7px; } .card__title { margin-bottom: var(--space-sm); font-family: var(--f-display); font-size: var(--fs-h4); font-weight: 600; text-transform: none; } /* Die erste Karte weicht im Original ab (weiße Schrift, Assistant). Bewusst 1:1 übernommen – bei Bedarf einfach entfernen. */ .card--emphasis .card__text { color: var(--c-text-strong); font-family: var(--f-heading); } @media (max-width: 1024px) { .card { padding: 30px; } } @media (max-width: 767px) { .card { text-align: center; } .card__icon { margin-inline: auto; } } /* ------------------------------------------------------------- Kennzahlen (5M+ Follower …) ------------------------------------------------------------- */ .stats { display: flex; flex-wrap: wrap; justify-content: space-around; } .stat { text-align: center; } .stat__value { margin: 0; color: var(--c-accent); font-family: var(--f-heading); font-size: var(--fs-display); font-weight: 600; line-height: 1; } /* Die Einheit hinter der Zahl wird immer groß geschrieben. */ .stat__suffix { text-transform: uppercase; } .stat__label { margin: 0; color: var(--c-text); font-size: 1.1875rem; /* 19px */ line-height: 2.5; } @media (max-width: 767px) { .stats { flex-direction: column; align-items: center; gap: var(--space-sm); } } /* ------------------------------------------------------------- Zeitstrahl (Gestartet → Strategie → Heute) ------------------------------------------------------------- */ .timeline { position: relative; } .timeline__item { position: relative; display: flex; gap: 30px; padding-block: 25px; } .timeline__item:first-child { padding-top: 0; } .timeline__item:last-child { padding-bottom: 0; } /* Verbindungslinie zwischen den Punkten */ .timeline__item::before { content: ""; position: absolute; top: 25px; left: 23.5px; width: 0; height: 100%; border-left: 3px solid var(--c-accent-soft); } .timeline__item:first-child::before { top: 0; } .timeline__item:last-child::before { display: none; } .timeline__icon { position: relative; z-index: 1; display: inline-flex; flex: 0 0 50px; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: var(--c-accent-orange); } .timeline__icon img { width: 20px; height: 20px; } .timeline__title { margin: -2px 0 15px; font-size: var(--fs-h4); font-weight: 600; } .timeline__text { margin: 0; font-size: .875rem; /* 14px */ line-height: 1.5; } @media (max-width: 1024px) { .timeline__item { gap: var(--space-sm); } } /* ------------------------------------------------------------- Stimmen unserer Creator ------------------------------------------------------------- */ .testimonial { position: relative; padding: 30px; text-align: center; } .testimonial__mark { position: absolute; top: 30px; right: 30px; color: var(--c-accent); font-family: var(--f-heading); font-size: 30px; line-height: 1; } .testimonial__name { display: block; color: var(--c-accent); font-family: var(--f-display); font-size: 1.125rem; /* 18px */ font-weight: 700; line-height: 1.5; } .testimonial__role { color: var(--c-gold-dark); font-family: var(--f-heading); font-size: var(--fs-body); font-weight: 700; } .testimonial__quote { margin: 15px 0 0; color: var(--c-text-strong); font-family: var(--f-heading); font-size: var(--fs-body); font-weight: 700; line-height: 1.5; } /* ------------------------------------------------------------- Slider (scroll-snap; JS steuert nur den Autoplay) ------------------------------------------------------------- */ .carousel { --slides-per-view: 3; --slide-gap: 15px; overflow: hidden; } .carousel__track { display: flex; gap: var(--slide-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .carousel__track::-webkit-scrollbar { display: none; } .carousel__slide { flex: 0 0 calc((100% - (var(--slides-per-view) - 1) * var(--slide-gap)) / var(--slides-per-view)); scroll-snap-align: start; } @media (max-width: 1024px) { .carousel { --slides-per-view: 2; --slide-gap: 10px; } } @media (max-width: 767px) { .carousel { --slides-per-view: 1; --slide-gap: 10px; } } /* ------------------------------------------------------------- Fließtext-Blöcke (Impressum, Datenschutz, Management …) ------------------------------------------------------------- */ .prose { max-width: 70ch; } .prose h2 { margin: var(--space-md) 0 var(--space-sm); } .prose h3 { margin: var(--space-md) 0 var(--space-xs); } .prose p { margin: 0 0 1rem; line-height: 1.6; } .prose ul { margin: 0 0 1rem 1.25rem; list-style: disc; } .prose li { margin-bottom: .35rem; } .prose a { color: var(--c-accent); text-decoration: underline; } /* ------------------------------------------------------------- Bilder ------------------------------------------------------------- */ .media { width: 100%; } .media--framed { border: 3px solid var(--c-text); } /* ------------------------------------------------------------- Seitentitel (große Überschrift am Seitenanfang) ------------------------------------------------------------- */ .page-title { font-family: var(--f-display); font-size: var(--fs-h1); font-weight: 600; line-height: 1; text-align: center; text-transform: none; } .page-lead { margin: 0; color: var(--c-accent); font-family: var(--f-display); font-size: 1.0625rem; /* 17px */ font-weight: 700; text-align: center; } /* ------------------------------------------------------------- Breite Schaltfläche im Goldverlauf ------------------------------------------------------------- */ .btn--bar { width: 100%; padding: 18px 22px; border: 3px groove var(--c-bg); border-radius: 0; background-image: linear-gradient(240deg, var(--c-accent) 25%, var(--c-gold-dark) 100%); box-shadow: var(--shadow-btn); color: var(--c-bg); font-family: var(--f-display); font-size: 1.25rem; font-weight: 700; line-height: 1; text-transform: uppercase; } .btn--bar:hover, .btn--bar:focus { background-image: linear-gradient(240deg, var(--c-gold-dark) 0%, var(--c-accent) 75%); color: var(--c-bg); } /* ------------------------------------------------------------- Referenz-Zitat mit Firmenangabe ------------------------------------------------------------- */ .quote { display: flex; flex-direction: column; gap: var(--space-sm); text-align: center; } .quote__text { margin: 0; color: var(--c-text-strong); font-family: var(--f-heading); font-size: 1.3rem; font-weight: 700; line-height: 1.5; } .quote__name { display: block; color: var(--c-accent); font-family: var(--f-display); font-size: var(--fs-body); font-weight: 700; line-height: 1.5; } .quote__company { display: block; color: var(--c-gold-dark); font-family: var(--f-heading); font-size: .85rem; font-weight: 700; } @media (max-width: 1024px) { .quote__text { font-size: .875rem; } .quote__name { font-size: var(--fs-body); } .quote__company { font-size: .765rem; } } /* ------------------------------------------------------------- Zweispaltiger Block: Text und Medium nebeneinander ------------------------------------------------------------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); align-items: start; } @media (max-width: 767px) { .split { grid-template-columns: 1fr; } }