/* * Kaffeecenter-Akademie, Seite /akademie. Gestaltungssprache der Startseite und von /vermietung/: * Wechsel Weiss und Kaffeefarbe #f2f0ea, zentrierte Köpfe (Merriweather kursiv über Oswald, Goldlinie), * eckige Formen, dünne Linien, keine Schatten, Fotos eckig im Bildformat, Knöpfe eckig mit gesperrter Schrift, * grosse kursive Goldnummern. Alles unter #kca; Ausnahme die obere Leiste des Themes (body.edgtf-dark-header * .edgtf-top-bar, Abschnitt «Kopf des Themes»). * !important nur gegen die !important-Regeln des Themes und des Zusatz-CSS (Überschriften, strong, Formular). */ .kca { --kca-gold: #c7a17a; --kca-gold-d: #8f6437; --kca-braun: #30271c; --kca-abend: #402e22; /* Terminkarte am Abend: warmes Espressobraun */ --kca-kaffee: #5a4637; --kca-kaffee-hell: #efe6da; --kca-text: #444; --kca-grau: #666; --kca-creme: #f2f0ea; --kca-linie: #e2e2e2; --kca-linie-creme: #dcd6ca; --kca-feldrand: #9a8672; --kca-gruen: #3d7a37; --kca-orange: #a35a0b; --kca-fehler: #b3261e; --kca-kurve: cubic-bezier(.2, .8, .2, 1); --kca-dauer: .35s; } /* ------------------------------------------------------------------ */ /* Grundlagen */ /* ------------------------------------------------------------------ */ #kca { color: var(--kca-text); background: #fff; font: 16px/1.65 "Open Sans", sans-serif; overflow-wrap: break-word; } #kca *, #kca *::before, #kca *::after { box-sizing: border-box; } #kca [hidden] { display: none !important; } #kca p { margin: 0 0 1em; } #kca ul, #kca ol, #kca dl, #kca dd, #kca figure { margin: 0; padding: 0; list-style: none; } #kca dt { margin: 0; font-size: inherit; } #kca strong, #kca b { color: inherit !important; font-weight: 700; } #kca a { color: var(--kca-gold-d); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; } #kca a:hover { color: var(--kca-braun); } #kca :focus-visible { outline: 3px solid var(--kca-gold-d); outline-offset: 3px; } #kca [tabindex="-1"]:focus:not(:focus-visible) { outline: none; } #kca img { max-width: 100%; } #kca svg { flex: none; } #kca address { font-style: normal; } #kca table { border-collapse: collapse; } #kca .kca-nowrap { white-space: nowrap; } #kca .kca-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } #kca iframe[id^="gform_ajax_frame_"] { display: none !important; } /* Das WebP-Plugin von kaffeecenter.ch packt Bilder in und gibt ihm die Klasse des Bildes. Die Masse und object-fit gelten für ; das innere füllt es und erbt Zuschnitt und Lage. */ #kca picture[class] { display: block; } #kca picture[class] > img { display: block; width: 100%; height: 100%; max-width: none; object-fit: inherit; object-position: inherit; border-radius: inherit; } #kca .kca-innen { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } #kca .kca-abschnitt { padding: 40px 0; } #kca .kca-abschnitt--creme { background: var(--kca-creme); } #kca [id^="kca-"] { scroll-margin-top: 12px; } /* bis 1349 px hält der feste mobile Kopf über scroll-padding-top der Website Abstand */ /* Titel wie im Theme: Oswald, Grossbuchstaben, Braun #30271c (Theme und Zusatz-CSS setzen Grössen mit !important) */ #kca h1, #kca h2, #kca h3 { margin: 0; color: var(--kca-braun); font-family: "Oswald", sans-serif; font-weight: 700 !important; text-transform: uppercase; } #kca .kca-h1 { margin: 0 0 14px; color: #fff; font-size: 38px !important; line-height: 1.1 !important; letter-spacing: .5px !important; text-wrap: balance; } #kca .kca-h2 { margin: 0 0 22px; font-size: 28px !important; line-height: 1.15 !important; letter-spacing: 1px; text-wrap: balance; } #kca h3 { font-size: 20px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: .5px; } #kca .kca-kicker { margin: 0 0 6px; color: var(--kca-grau); font: italic 16px/1.5 "Merriweather", serif; } #kca .kca-einleitung { max-width: 44em; margin: 0; color: var(--kca-text); font-size: 16px; } /* Kopf eines Abschnitts: zentriert, Kicker, Titel, kurze Goldlinie (wie «Unsere neusten Produkte» auf der Startseite) */ #kca .kca-kopf { margin: 0 auto 28px; max-width: 760px; text-align: center; } #kca .kca-kopf .kca-h2 { margin-bottom: 0; } #kca .kca-kopf .kca-h2::after { content: ""; display: block; width: 60px; height: 2px; margin: 16px auto 0; background: var(--kca-gold); } #kca .kca-kopf .kca-einleitung { margin: 16px auto 0; } /* ------------------------------------------------------------------ */ /* Knöpfe wie im Theme: eckig, Open Sans 13 px, gesperrt */ /* ------------------------------------------------------------------ */ #kca .kca-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 14px 32px; border: 2px solid var(--kca-braun); border-radius: 0; background: var(--kca-braun); color: #fff; font: 600 13px/1.2 "Open Sans", sans-serif; letter-spacing: 2.5px; text-align: center; text-decoration: none; text-transform: uppercase; cursor: pointer; transition: background-color .25s, border-color .25s, color .25s; } #kca .kca-btn:hover { border-color: var(--kca-gold); background: var(--kca-gold); color: var(--kca-braun); } #kca .kca-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--kca-dauer) var(--kca-kurve); } #kca .kca-btn:hover svg { transform: translateX(4px); } #kca .kca-btn--hell { border-color: #fff; background: transparent; color: #fff; } #kca .kca-btn--hell:hover { border-color: #fff; background: #fff; color: var(--kca-braun); } #kca .kca-btn--rahmen { background: transparent; color: var(--kca-braun); } #kca .kca-btn--rahmen:hover { border-color: var(--kca-braun); background: var(--kca-braun); color: #fff; } #kca .kca-btn--gold { border-color: var(--kca-gold); background: var(--kca-gold); color: var(--kca-braun); } #kca .kca-btn--gold:hover { border-color: var(--kca-braun); background: var(--kca-braun); color: #fff; } #kca .kca-btn--aus, #kca .kca-btn--aus:hover { border-color: currentColor; background: transparent; color: inherit; opacity: .6; cursor: not-allowed; } #kca .kca-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; background: var(--kca-gold); color: var(--kca-braun); font: 700 11px/1.2 "Open Sans", sans-serif; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; } #kca .kca-pfeil, #kca .kca-auswahl__aendern { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--kca-gold-d); font: 600 12px/1.3 "Open Sans", sans-serif; letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none; } #kca .kca-pfeil::after { content: "→"; font-size: 15px; letter-spacing: 0; transition: transform var(--kca-dauer) var(--kca-kurve); } #kca .kca-pfeil:hover::after { transform: translateX(3px); } /* ------------------------------------------------------------------ */ /* 1 Hero: geteilt. Links warmes, sehr dunkles Espressobraun mit leichtem Verlauf und feiner Körnung (Muster der */ /* Bühne, korn.png hell gewendet, ein Drittel so stark und halb so gross), darauf der Text; rechts das Foto aus */ /* dem Laden randlos über die volle Höhe mit weichem Übergang. Mobil Foto randlos oben, Text darunter. */ /* ------------------------------------------------------------------ */ #kca .kca-hero { --kca-korn: url(../img/korn-fein.png); position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; background: var(--kca-korn) 0 0 / 80px 80px repeat, radial-gradient(ellipse 70% 90% at 22% 28%, rgba(199, 161, 122, .09), rgba(199, 161, 122, 0) 70%), linear-gradient(118deg, #35251a 0%, #2a1c14 46%, #20150e 100%); color: #eadfd2; } @media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) { #kca .kca-hero { --kca-korn: url(../img/korn-fein-2x.png); } /* Retina: jedes Korn ein Bildpunkt, darum schwächer */ } #kca .kca-hero__text { position: relative; z-index: 2; padding-top: 28px; padding-bottom: 36px; } #kca .kca-hero__foto { position: relative; order: -1; margin: 0; } /* mobil oben, randlos */ #kca .kca-hero__bild { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 55%; } #kca .kca-hero .kca-kicker { color: var(--kca-gold); font-size: 16px; } #kca .kca-hero .kca-h1 { width: min-content; max-width: 100%; margin-bottom: 8px; font-size: clamp(30px, 9.4vw, 38px) !important; } /* zweizeilig: Umbruch nach dem Bindestrich */ #kca .kca-hero__zusatz { margin: 0 0 16px; color: var(--kca-gold); font: 500 19px/1.3 "Oswald", sans-serif; letter-spacing: 1px; text-transform: uppercase; text-wrap: balance; } #kca .kca-hero__unter { max-width: 30em; margin: 0 0 18px; color: #f1e8dc; font-size: 16.5px; line-height: 1.55; } #kca .kca-fakten { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-bottom: 22px; color: #f1e8dc; font: 600 12px/1.3 "Open Sans", sans-serif; letter-spacing: 2px; text-transform: uppercase; } #kca .kca-fakt--gratis { padding: 5px 10px; background: var(--kca-gold); color: var(--kca-braun); } #kca .kca-hero__aktion { margin: 0; } /* Kopf des Themes (Auftrag Max 02.10.2026 spät): weisser Kopf mit farbigem Logo und dunklem Menü (Seiteneinstellung dark-header), die obere Leiste aber weiss auf Beige wie auf den übrigen Seiten. Das Theme färbt sie bei dark-header schwarz; hier die Regeln von light-header gespiegelt (akademie.css lädt nur auf /akademie). */ body.edgtf-dark-header .edgtf-top-bar, body.edgtf-dark-header .edgtf-top-bar .widget, body.edgtf-dark-header .edgtf-top-bar .widget .widgettitle, body.edgtf-dark-header .edgtf-top-bar .widget a, body.edgtf-dark-header .edgtf-top-bar .widget i, body.edgtf-dark-header .edgtf-top-bar .widget p, body.edgtf-dark-header .edgtf-top-bar .widget span { color: #fff !important; } body.edgtf-dark-header .edgtf-top-bar .widget p { font-weight: bold !important; font-size: 15px !important; } body.edgtf-dark-header .edgtf-top-bar .widget p a:hover { text-decoration: underline !important; } /* Auftakt: gestaffelt einblenden. Start bei 0.02, damit das Element sofort gemalt ist (LCP). */ #kca .kca-auftakt { animation: kca-auftakt .9s var(--kca-kurve) both; } #kca .kca-auftakt:nth-child(2) { animation-delay: 80ms; } #kca .kca-auftakt:nth-child(3) { animation-delay: 160ms; } #kca .kca-auftakt:nth-child(4) { animation-delay: 240ms; } #kca .kca-auftakt:nth-child(5) { animation-delay: 320ms; } #kca .kca-auftakt:nth-child(6) { animation-delay: 400ms; } @keyframes kca-auftakt { from { opacity: .02; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* ------------------------------------------------------------------ */ /* 2 Termine: pro Kurstag eine Karte. Oben der Tisch in Draufsicht (Papierschnitt), dann die Frage */ /* «Wann passt es Ihnen?» mit den Durchführungen als Radiogruppe, Plätze als Satz und Tassen, Knopf mit Wahl */ /* ------------------------------------------------------------------ */ #kca .kca-termine { padding: 38px 0 30px; } #kca .kca-termine__rahmen { max-width: 920px; margin: 0 auto; } #kca .kca-termine__kopf { margin-bottom: 24px; } #kca .kca-moment { margin: -10px auto 16px; padding: 8px 14px; max-width: max-content; background: var(--kca-braun); color: #fff; font-size: 14px; animation: kca-auftakt .5s var(--kca-kurve) both; } #kca .kca-termine .kca-einleitung { display: none; } #kca .kca-tage { display: grid; gap: 20px; } /* Karte: Vormittag crème, Abend warmes Espressobraun. Jeder Wechsel bleibt unter 600 ms. --kca-tinte = Schrift der Stimmung. */ #kca .kca-tag { --kca-karte: var(--kca-creme); --kca-tinte: var(--kca-braun); position: relative; overflow: hidden; padding-bottom: 18px; border: 1px solid var(--kca-linie-creme); background: var(--kca-karte); color: var(--kca-text); transition: background-color .5s var(--kca-kurve), color .5s var(--kca-kurve), border-color .5s var(--kca-kurve); } #kca .kca-tag[data-stimmung="abend"] { --kca-karte: var(--kca-abend); --kca-tinte: #f3ece3; border-color: var(--kca-abend); color: #e9dfd3; } #kca .kca-tag > *:not(.kca-tisch) { position: relative; margin-left: 16px; margin-right: 16px; } /* Tisch in Draufsicht (Tisch::karte()). Retro-Cartoon: Linien in Espresso (kca-l, dünn kca-l2, immer gleich dick), Flächen Creme und Weiss, Dampf in Gold, Kraftpapier mit feiner Körnung als Hintergrund, flacher Schatten. Vormittag: Fensterlicht von links, Schatten nach rechts. Abend: Lampe darüber, Schatten kurz, Tisch dunkler. */ #kca .kca-tisch { display: block; width: 100%; height: 150px; background: #e8d9bf url(../img/korn.png) repeat; background-size: 160px 160px; } #kca .kca-l, #kca .kca-l2 { stroke: #2b1b12; stroke-width: 2.4px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } #kca .kca-l2 { stroke-width: 1.6px; } #kca .kca-tisch__schatten, #kca .kca-tisch__ding-schatten { fill: #2b1b12; opacity: .18; } #kca .kca-tisch__schatten { transform: translate(7px, 3px); transition: transform .55s var(--kca-kurve), opacity .55s var(--kca-kurve); } #kca .kca-tisch__ding-schatten { transform: translate(8px, 4px); } #kca .kca-tisch__brettkante { fill: #c49f6c; } #kca .kca-tisch__brettflaeche { fill: #e2c89e; } #kca .kca-tisch__maserung path { fill: none; stroke: #2b1b12; stroke-width: 1.1px; opacity: .28; vector-effect: non-scaling-stroke; } #kca .kca-tisch__schalerand { fill: #c79558; } #kca .kca-tisch__schaleinnen { fill: #9d6b3b; } #kca .kca-tisch__bohnenkoerper { fill: #6a3d21; } #kca .kca-tisch__kerbe { fill: none; stroke: #2b1b12; stroke-width: 1.3px; stroke-linecap: round; vector-effect: non-scaling-stroke; } #kca .kca-tisch__bohnenschatten { fill: #2b1b12; opacity: .18; } #kca .kca-tisch__bohne--rollt { transform-box: fill-box; transform-origin: center; transition: transform .6s var(--kca-kurve); } #kca .kca-tisch__fenster { fill: #fff8ea; opacity: .55; transition: opacity .5s var(--kca-kurve), transform .55s var(--kca-kurve); } #kca .kca-tisch__teller { fill: #fffdf8; } #kca .kca-tisch__tellermulde { fill: #f6efe3; } #kca .kca-tisch__henkel, #kca .kca-tisch__tasse { fill: #fffdf8; } #kca .kca-tisch__henkelloch { fill: #f3ebde; } #kca .kca-tisch__tasseninnen { fill: #f1e8da; } #kca .kca-tisch__schaumrand { fill: none; stroke: #f6ecdc; stroke-width: 2.4; } #kca .kca-tisch__herz { fill: #fbf4e8; } #kca .kca-tisch__herzlinie { fill: none; } #kca .kca-tisch__glanz { fill: none; stroke: #fff; stroke-width: 2.6px; stroke-linecap: round; vector-effect: non-scaling-stroke; } #kca .kca-tisch__dampf path { fill: none; stroke: #c7a17a; stroke-width: 2.6px; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: kca-dampf 5.4s ease-in-out infinite; } #kca .kca-tisch__kondens { fill: none; stroke: #8f6a44; stroke-width: 6; opacity: .3; } #kca .kca-tisch__tropfen { fill: #fffdf8; stroke: #2b1b12; stroke-width: 1px; vector-effect: non-scaling-stroke; } #kca .kca-tisch__glas { fill: #fffdf8; fill-opacity: .55; } #kca .kca-tisch__schliff path { fill: none; stroke: #2b1b12; stroke-width: 1.1px; opacity: .45; vector-effect: non-scaling-stroke; } #kca .kca-tisch__glaswand { fill: #fffdf8; fill-opacity: .35; } #kca .kca-tisch__eis, #kca .kca-tisch__eiswiege, #kca .kca-tisch__ring { transform-box: fill-box; transform-origin: center; } #kca .kca-buehne .kca-tisch__eiswiege { animation: kca-schaukeln 4.6s ease-in-out infinite alternate; } /* Bühne: Eis schaukelt */ #kca .kca-buehne .kca-tisch__eis--2 .kca-tisch__eiswiege { animation-duration: 5.3s; animation-delay: -1.8s; } #kca .kca-buehne .kca-tisch__eis--3 .kca-tisch__eiswiege { animation-duration: 4.1s; animation-delay: -3s; } #kca .kca-tisch__eiswuerfel { fill: #fdf8ef; fill-opacity: .72; } #kca .kca-tisch__eiskante { fill: none; stroke: #fff; stroke-width: 2px; stroke-linecap: round; vector-effect: non-scaling-stroke; } #kca .kca-tisch__ring { fill: none; stroke: #fff1dc; stroke-width: 1.4px; opacity: 0; vector-effect: non-scaling-stroke; } #kca .kca-tisch__halm { fill: none; stroke: #2b1b12; stroke-width: 7.5; stroke-linecap: round; } #kca .kca-tisch__halmlicht { fill: none; stroke: #6e625c; stroke-width: 1.4px; stroke-linecap: round; vector-effect: non-scaling-stroke; } #kca .kca-tisch__halmschatten { fill: none; stroke: #2b1b12; stroke-width: 8; stroke-linecap: round; } #kca .kca-tisch__abend .kca-tisch__ding-schatten { opacity: .3; transform: translate(3px, 5px); } /* Stimmungen: Licht wandert vom Fenster zur Lampe, Tasse wird Glas, zwei Bohnen rollen ein Stück. */ #kca .kca-tisch__morgen { transition: opacity .35s var(--kca-kurve); } #kca .kca-tisch__abend, #kca .kca-tisch__lampe { opacity: 0; transition: opacity .5s var(--kca-kurve); } #kca .kca-tag[data-stimmung="abend"] .kca-tisch__morgen { opacity: 0; } #kca .kca-tag[data-stimmung="abend"] .kca-tisch__abend { opacity: 1; transition-delay: .08s; } #kca .kca-tag[data-stimmung="abend"] .kca-tisch__lampe { opacity: 1; } #kca .kca-tag[data-stimmung="abend"] .kca-tisch__fenster { opacity: 0; transform: translate(90px, 18px); } #kca .kca-tag[data-stimmung="abend"] .kca-tisch__schatten { opacity: .3; transform: translate(2px, 5px); } #kca .kca-tag[data-stimmung="abend"] .kca-tisch__bohne--rollt { transform: translate(9px, 3px) rotate(80deg); } /* Eis fällt beim Wechsel zum Abend mit kleinen Ringen ins Glas (kca-tag--zum-abend, eine Sekunde). */ #kca .kca-tag--zum-abend .kca-tisch__eis { animation: kca-eis-fall .36s cubic-bezier(.5, 0, .75, 0) both; } #kca .kca-tag--zum-abend .kca-tisch__eis--2 { animation-delay: .09s; } #kca .kca-tag--zum-abend .kca-tisch__eis--3 { animation-delay: .17s; } #kca .kca-tag--zum-abend .kca-tisch__ring { animation: kca-ring .5s .3s ease-out both; } #kca .kca-tag--zum-abend .kca-tisch__ring--2 { animation-delay: .39s; } #kca .kca-tag--zum-abend .kca-tisch__ring--3 { animation-delay: .47s; } /* Eis der Terminkarte (Auftrag Max 02.10.2026 spät): dreht sich einige Sekunden wie nach dem Umrühren um die Glasmitte, jeder Würfel ein wenig um sich selbst, läuft sanft aus und bleibt stehen. Start, wenn die Abend-Karte zur Hälfte im Bild ist oder auf «Abend» umgeschaltet wird (akademie-ui.js: kca-tisch--eis-wartet, dann kca-tisch--ruehren). */ #kca .kca-tisch__eisrunde { transform-origin: 0 0; } #kca .kca-tisch--eis-wartet .kca-tisch__eisrunde { transform: rotate(-72deg); } #kca .kca-tisch--eis-wartet .kca-tisch__eiswiege { transform: rotate(-26deg); } #kca .kca-tisch--ruehren .kca-tisch__eisrunde { animation: kca-ruehren 4.6s cubic-bezier(.12, .58, .26, 1) both; } #kca .kca-tisch--ruehren .kca-tisch__eiswiege { animation: kca-eis-drehen 4s cubic-bezier(.15, .6, .3, 1) both; } #kca .kca-tisch--ruehren .kca-tisch__eis--2 .kca-tisch__eiswiege { animation-duration: 4.6s; } #kca .kca-tisch--ruehren .kca-tisch__eis--3 .kca-tisch__eiswiege { animation-duration: 3.5s; } @keyframes kca-ruehren { from { transform: rotate(-72deg); } to { transform: none; } } @keyframes kca-eis-drehen { from { transform: rotate(-26deg); } to { transform: none; } } /* Latte Art entsteht (Auftrag Max 03.10.2026): Milch trifft in der Mitte auf (weicher Fleck, Ring auf der Crema), breitet sich innerhalb der Herzform aus (Maske, Fleck wächst vom Eingiesspunkt), zuletzt setzt sich die Kontur; gut 2.5 s, dann steht das Herz. Start, wenn die Vormittags-Karte zur Hälfte im Bild ist oder auf «Vormittag» umgeschaltet wird (akademie-ui.js: kca-tisch--latte-wartet, dann kca-tisch--giessen). Nur transform, opacity und die Maske. */ #kca .kca-tisch__milchfleck { transform-box: fill-box; transform-origin: 50% 47%; } #kca .kca-tisch__guss, #kca .kca-tisch__milchring { opacity: 0; transform-box: fill-box; transform-origin: center; } #kca .kca-tisch__milchring { fill: none; stroke: #f0d3a8; stroke-width: 1.4; } #kca .kca-tisch--latte-wartet .kca-tisch__milchfleck { transform: scale(.04); } #kca .kca-tisch--latte-wartet .kca-tisch__herzlinie { opacity: 0; } #kca .kca-tisch--giessen .kca-tisch__milchfleck { animation: kca-milch 2.1s .15s cubic-bezier(.22, .61, .36, 1) both; } #kca .kca-tisch--giessen .kca-tisch__guss { animation: kca-guss 1.35s ease-out both; } #kca .kca-tisch--giessen .kca-tisch__milchring { animation: kca-milchring 1.4s .2s ease-out both; } #kca .kca-tisch--giessen .kca-tisch__herzlinie { animation: kca-herzlinie .8s 1.75s ease-out both; } @keyframes kca-milch { 0% { transform: scale(.04); } 55% { transform: scale(.7, .64); } 100% { transform: scale(1); } } @keyframes kca-guss { 0% { opacity: 0; transform: scale(.4); } 22% { opacity: .9; } 100% { opacity: 0; transform: scale(1.7); } } @keyframes kca-milchring { 0% { opacity: .65; transform: scale(.5); } 100% { opacity: 0; transform: scale(2.4); } } @keyframes kca-herzlinie { from { opacity: 0; } to { opacity: 1; } } /* Ausserhalb des Bildes ruht alles (Akku, ältere iPhones). */ #kca .kca-tisch--ruht * { animation-play-state: paused; } @keyframes kca-zug { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes kca-dampf { 0% { opacity: 0; transform: translate(0, 4px) scale(.7) rotate(0deg); } 30% { opacity: .62; } 100% { opacity: 0; transform: translate(-7px, -16px) scale(1.25) rotate(-10deg); } } @keyframes kca-schaukeln { from { transform: rotate(-3deg) translate(-.6px, .3px); } to { transform: rotate(3deg) translate(.6px, -.3px); } } @keyframes kca-eis-fall { from { opacity: 0; transform: translateY(-7px) scale(1.4); } 60% { opacity: 1; } to { opacity: 1; transform: none; } } @keyframes kca-ring { from { opacity: .75; transform: scale(.6); } to { opacity: 0; transform: scale(3.4); } } /* Kachel und Zeile der gewählten Durchführung */ #kca .kca-tag__kopf { display: flex; align-items: flex-end; gap: 14px; margin-top: -34px; margin-bottom: 12px; } #kca .kca-kalender { display: flex; flex: none; flex-direction: column; align-items: center; width: 54px; border: 1px solid var(--kca-linie-creme); background: #fff; } #kca .kca-kalender__wt { align-self: stretch; padding: 4px 0 3px; background: var(--kca-braun); color: #fff; font: 700 10px/1.2 "Open Sans", sans-serif; letter-spacing: 1.5px; text-align: center; text-transform: uppercase; } #kca .kca-kalender__tag { padding-top: 4px; color: var(--kca-braun); font: 700 22px/1 "Oswald", sans-serif; } #kca .kca-kalender__monat { padding: 3px 0 6px; color: var(--kca-braun); font: 700 10px/1.2 "Open Sans", sans-serif; letter-spacing: 1.5px; text-transform: uppercase; } #kca .kca-tag__fuer { margin: 0 0 3px !important; color: var(--kca-tinte); font: italic 15.5px/1.4 "Merriweather", serif; text-wrap: balance; transition: color .5s var(--kca-kurve); } /* Frage und Felder: echte Radiogruppe. Gewählt = Goldrahmen 2 px und Häkchen, voll = nicht wählbar. */ #kca .kca-zeitwahl { min-width: 0; margin-top: 0; margin-bottom: 14px; padding: 0; border: 0; } #kca .kca-zeitwahl__frage { float: left; width: 100%; margin: 0 0 8px; padding: 0; color: var(--kca-tinte); font: italic 17px/1.35 "Merriweather", serif; transition: color .5s var(--kca-kurve); } #kca .kca-zeitwahl__frage + .kca-slots { clear: both; } #kca .kca-slots { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 !important; } /* mobil untereinander, ab 600 px nebeneinander */ #kca .kca-slot { min-width: 0; } #kca .kca-option { position: relative; display: flex; flex-direction: column; gap: 2px; height: 100%; margin: 0; padding: 11px 10px 12px 13px; border: 1px solid var(--kca-linie-creme); background: #fff; color: var(--kca-text); font-weight: 400; cursor: pointer; transition: border-color .25s, box-shadow .25s, background-color .5s var(--kca-kurve); } #kca .kca-zeitwahl--einer .kca-option { cursor: default; } #kca .kca-option__radio { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; } #kca .kca-option:has(.kca-option__radio:focus-visible) { outline: 3px solid var(--kca-gold-d); outline-offset: 2px; } #kca .kca-option:has(.kca-option__radio:checked) { border-color: var(--kca-gold); box-shadow: inset 0 0 0 1px var(--kca-gold); } #kca .kca-option:has(.kca-option__radio:checked)::after { content: ""; position: absolute; top: 15px; right: 13px; width: 11px; height: 6px; border-bottom: 2px solid var(--kca-gold-d); border-left: 2px solid var(--kca-gold-d); transform: rotate(-45deg); } #kca .kca-option:has(.kca-option__radio:disabled) { cursor: not-allowed; } #kca .kca-option:has(.kca-option__radio:disabled) > :not(.kca-slot__plaetze) { opacity: .55; } #kca .kca-option__name { padding-right: 18px; color: var(--kca-gold-d); font: 600 16px/1.2 "Oswald", sans-serif; letter-spacing: 1px; text-transform: uppercase; } #kca .kca-option__zeit { color: var(--kca-braun); font: 500 14px/1.3 "Oswald", sans-serif; letter-spacing: .2px; font-variant-numeric: tabular-nums; text-wrap: balance; } #kca .kca-option__kurs { font-size: 13.5px; font-weight: 600; } #kca .kca-slot__plaetze { margin-top: 5px; color: var(--kca-braun); font: 700 14.5px/1.3 "Open Sans", sans-serif; font-variant-numeric: tabular-nums; } #kca .kca-slot[data-zustand="wenig"] .kca-slot__plaetze { color: var(--kca-orange); } #kca .kca-slot[data-zustand="voll"] .kca-slot__plaetze { color: var(--kca-grau); } #kca .kca-slot--gebucht .kca-slot__plaetze { animation: kca-auftakt .6s var(--kca-kurve) both; } /* Eine Tasse pro Platz, von der Seite mit Henkel und Untertasse (SVG): frei grün mit hellgrüner Füllung, belegt graubraun gefüllt; darunter die Legende mit denselben Tassen (Aufträge Max 02.10.2026 abends). */ #kca .kca-tassen { display: grid; grid-template-columns: repeat(8, max-content); gap: 4px 6px; margin-top: 6px; } #kca .kca-tasse { display: block; width: 22px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 18'%3E%3Cg fill='none' stroke='%233d7a37' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h11v4.5c0 2.6-2.1 4.5-4.6 4.5H8.6C6.1 13 4 11.1 4 8.5z' fill='%23e2eedd' fill-opacity='1'/%3E%3Cpath d='M15 5.6h1.6a2.4 2.4 0 0 1 0 4.8h-1.8'/%3E%3Cpath d='M2.2 15.6h15.6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; } #kca .kca-tasse--belegt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 18'%3E%3Cg fill='none' stroke='%236e6052' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h11v4.5c0 2.6-2.1 4.5-4.6 4.5H8.6C6.1 13 4 11.1 4 8.5z' fill='%238c7b6b' fill-opacity='1'/%3E%3Cpath d='M15 5.6h1.6a2.4 2.4 0 0 1 0 4.8h-1.8'/%3E%3Cpath d='M2.2 15.6h15.6'/%3E%3C/g%3E%3C/svg%3E"); } #kca .kca-tasse--neu { animation: kca-tasse-neu 1.1s var(--kca-kurve) both; } @keyframes kca-tasse-neu { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } #kca .kca-legende { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 0 0 !important; color: var(--kca-tinte); font: 12.5px/1.4 "Open Sans", sans-serif; opacity: .85; } #kca .kca-legende__eintrag { display: inline-flex; align-items: center; gap: 6px; } /* Abend: Felder auf warmem Espressobraun */ #kca .kca-tag[data-stimmung="abend"] .kca-kalender { border-color: transparent; } #kca .kca-tag[data-stimmung="abend"] .kca-option { border-color: rgba(243, 236, 227, .22); background: rgba(255, 255, 255, .05); color: #e9dfd3; } #kca .kca-tag[data-stimmung="abend"] .kca-option:has(.kca-option__radio:checked) { border-color: var(--kca-gold); box-shadow: inset 0 0 0 1px var(--kca-gold); } #kca .kca-tag[data-stimmung="abend"] .kca-option:has(.kca-option__radio:checked)::after { border-color: var(--kca-gold); } #kca .kca-tag[data-stimmung="abend"] .kca-option:has(.kca-option__radio:disabled) > :not(.kca-slot__plaetze) { opacity: .7; } /* gesperrt: Tassen-Kontur bleibt über 3:1 */ #kca .kca-tag[data-stimmung="abend"] .kca-option__name { color: var(--kca-gold); } #kca .kca-tag[data-stimmung="abend"] .kca-option__zeit, #kca .kca-tag[data-stimmung="abend"] .kca-slot__plaetze { color: #f3ece3; } #kca .kca-tag[data-stimmung="abend"] .kca-slot[data-zustand="wenig"] .kca-slot__plaetze { color: #f2b36d; } #kca .kca-tag[data-stimmung="abend"] .kca-slot[data-zustand="voll"] .kca-slot__plaetze { color: #b9ab9b; } #kca .kca-tag[data-stimmung="abend"] .kca-tasse { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 18'%3E%3Cg fill='none' stroke='%238fc488' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h11v4.5c0 2.6-2.1 4.5-4.6 4.5H8.6C6.1 13 4 11.1 4 8.5z' fill='%238fc488' fill-opacity='.2'/%3E%3Cpath d='M15 5.6h1.6a2.4 2.4 0 0 1 0 4.8h-1.8'/%3E%3Cpath d='M2.2 15.6h15.6'/%3E%3C/g%3E%3C/svg%3E"); } #kca .kca-tag[data-stimmung="abend"] .kca-tasse--belegt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 18'%3E%3Cg fill='none' stroke='%23c2b2a2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h11v4.5c0 2.6-2.1 4.5-4.6 4.5H8.6C6.1 13 4 11.1 4 8.5z' fill='%23a39282' fill-opacity='1'/%3E%3Cpath d='M15 5.6h1.6a2.4 2.4 0 0 1 0 4.8h-1.8'/%3E%3Cpath d='M2.2 15.6h15.6'/%3E%3C/g%3E%3C/svg%3E"); } /* auf dem Abendbraun heller, damit sichtbar */ /* Knopf mit Wahl, «Ausgebucht» und Hinweis. Mit Skript nur die gewählte Durchführung (kca-aktion--an). */ #kca .kca-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } #kca .kca-aktion + .kca-aktion { margin-top: 16px; } #kca .kca-tag--js .kca-aktion:not(.kca-aktion--an) { display: none; } #kca .kca-tag--js .kca-aktion + .kca-aktion { margin-top: 0; } #kca .kca-aktion .kca-slot__knopf, #kca .kca-aktion .kca-btn--aus { flex: 1 1 100%; } #kca .kca-aktion p { margin: 0; } #kca .kca-slot__voll { flex: 1 1 100%; font-size: 14.5px; } #kca .kca-slot__knopf { border-color: var(--kca-gold); background: var(--kca-gold); color: var(--kca-braun); } #kca .kca-slot__knopf:hover { border-color: var(--kca-braun); background: var(--kca-braun); color: #fff; } #kca .kca-tag[data-stimmung="abend"] .kca-slot__knopf:hover { border-color: #f3ece3; background: #f3ece3; color: var(--kca-braun); } #kca .kca-tag[data-stimmung="abend"] a:not(.kca-btn) { color: var(--kca-gold); } #kca .kca-leer, #kca .kca-hinweis { max-width: 40em; margin: 0 auto; padding: 16px 18px; border-left: 3px solid var(--kca-gold); background: var(--kca-creme); } /* ------------------------------------------------------------------ */ /* 3 So läuft der Workshop: Foto und Zeitlinie */ /* ------------------------------------------------------------------ */ #kca .kca-kurs { display: grid; gap: 28px; } #kca .kca-kurs + .kca-kurs { margin-top: 48px; } #kca .kca-kurs__bildrahmen { margin: 0 -20px; } #kca .kca-kurs__bild { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 40%; } #kca .kca-kurs__bildrahmen--team { display: none; } /* zweites Foto und Bildunterschrift nur ab 1025 px */ /* Bildunterschrift unter dem Foto (Rückmeldung Shane 03.10.2026: nicht im Bild, ohne Strich, «überrasche mich»): Merriweather kursiv, davor eine Marke im Stil der Terminkarte (Gold mit dunkler Kontur): am Ladenfoto eine Ortsnadel, die sich setzt und zweimal einen Ring auf den Boden schickt, am Teamfoto das Herz aus der Tasse, das einmal schlägt. Einmal, sobald die Unterschrift im Bild ist (akademie-ui.js: kca-bildtext--wartet, dann kca-bildtext--los); nur transform und opacity; ohne Skript und bei reduzierter Bewegung steht die Marke. --kca-rand = Abstand zur Textkante (Foto bis 1024 px randlos). */ #kca .kca-kurs__legende { --kca-rand: 20px; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: start; margin: 0; padding: 14px var(--kca-rand) 0; color: #6b5847; font: italic 14px/1.65 "Merriweather", serif; } #kca .kca-bildtext__marke { width: 24px; height: 24px; margin-top: -1px; overflow: visible; } #kca .kca-bildtext__nadel path { fill: var(--kca-gold); stroke: #2b1d14; stroke-width: 1.5; stroke-linejoin: round; } #kca .kca-bildtext__nadel circle { fill: #fbf4e8; stroke: #2b1d14; stroke-width: 1.2; } #kca .kca-bildtext__schatten { fill: #2b1d14; opacity: .18; } #kca .kca-bildtext__ping { fill: none; stroke: var(--kca-gold-d); stroke-width: 1.2; opacity: 0; } #kca .kca-bildtext__herz { fill: var(--kca-gold); stroke: #2b1d14; stroke-width: 3.6; stroke-linejoin: round; } #kca .kca-bildtext__nadel, #kca .kca-bildtext__schatten, #kca .kca-bildtext__ping, #kca .kca-bildtext__herz { transform-box: fill-box; } #kca .kca-bildtext__nadel { transform-origin: 50% 100%; } #kca .kca-bildtext__schatten, #kca .kca-bildtext__ping, #kca .kca-bildtext__herz { transform-origin: center; } #kca .kca-bildtext--wartet .kca-bildtext__nadel, #kca .kca-bildtext--wartet .kca-bildtext__schatten, #kca .kca-bildtext--wartet .kca-bildtext__herz { opacity: 0; } #kca .kca-bildtext--los .kca-bildtext__nadel { animation: kca-nadel .9s cubic-bezier(.3, .7, .4, 1) both; } #kca .kca-bildtext--los .kca-bildtext__schatten { animation: kca-nadel-schatten .9s ease-out both; } #kca .kca-bildtext--los .kca-bildtext__ping { animation: kca-nadel-ping 1.1s .55s ease-out 2 forwards; } /* forwards: vor dem Aufsetzen unsichtbar */ #kca .kca-bildtext--los .kca-bildtext__herz { animation: kca-herzschlag 1.3s ease-out both; } @keyframes kca-nadel { 0% { opacity: 0; transform: translateY(-14px) scale(.9); } 45% { opacity: 1; } 62% { transform: translateY(1.5px) scale(1.04, .94); } 80% { transform: translateY(-1.5px); } 100% { opacity: 1; transform: none; } } @keyframes kca-nadel-schatten { 0% { opacity: 0; transform: scale(.3); } 62% { opacity: .2; transform: scale(1.1); } 100% { opacity: .18; transform: none; } } @keyframes kca-nadel-ping { 0% { opacity: .9; transform: none; } 100% { opacity: 0; transform: scale(2.8); } } @keyframes kca-herzschlag { 0% { opacity: 0; transform: scale(.4); } 28% { opacity: 1; transform: scale(1.18); } 42% { transform: scale(.94); } 58% { transform: scale(1.12); } 74% { transform: scale(.98); } 100% { opacity: 1; transform: none; } } #kca .kca-kurs__titel { margin-bottom: 10px; } #kca .kca-kurs__inhalt .kca-h2::after { content: ""; display: block; width: 60px; height: 2px; margin-top: 16px; background: var(--kca-gold); } #kca .kca-text { max-width: 38em; font-size: 16px; } #kca .kca-text > :last-child { margin-bottom: 0; } /* Zeitlinie (Muster Marxer): Linie links, Marke je Station, Füllung in Gold folgt dem Scrollen */ #kca .kca-zeitlinie { position: relative; margin-top: 26px !important; counter-reset: kca-punkt; } #kca .kca-zeitlinie::before, #kca .kca-zeitlinie::after { content: ""; position: absolute; top: 10px; bottom: 10px; left: 6px; width: 2px; background: var(--kca-linie-creme); } #kca .kca-zeitlinie::after { background: var(--kca-gold); transform-origin: top center; } #kca .kca-zeitlinie--js::after { transform: scaleY(var(--kca-tl, 0)); } #kca .kca-punkt { position: relative; padding: 0 0 20px 38px; counter-increment: kca-punkt; } #kca .kca-punkt:last-child { padding-bottom: 0; } #kca .kca-punkt::after { content: ""; position: absolute; z-index: 1; top: 7px; left: 1px; width: 12px; height: 12px; border: 2px solid var(--kca-gold); background: var(--kca-creme); transition: background-color .3s, transform .3s var(--kca-kurve); } #kca .kca-zeitlinie--js .kca-punkt.ist-aktiv::after { background: var(--kca-gold); transform: rotate(45deg); } #kca .kca-punkt::before { content: counter(kca-punkt, decimal-leading-zero); content: counter(kca-punkt, decimal-leading-zero) / ""; margin-right: 10px; color: var(--kca-gold); font: italic 26px/1 "Merriweather", serif; } #kca .kca-punkt__titel { color: var(--kca-braun) !important; font: 700 18px/1.3 "Oswald", sans-serif; letter-spacing: .5px; text-transform: uppercase; } #kca .kca-punkt__text { display: block; margin-top: 4px; font-size: 15px; line-height: 1.55; } /* ------------------------------------------------------------------ */ /* 4 Genusswelten-Bühne: Wahl, Getränke von oben, Maschinen vorne/hinten, Tabelle eingeklappt */ /* ------------------------------------------------------------------ */ /* Ton der Bühne je Welt: Espresso, Karamell, Creme, dezent kühl (die einzige kühle Farbe der Seite). */ /* Töne der Welten in der Retro-Linie: Kraftpapier, von geröstet (heiss) bis kühl (kalt). */ #kca .kca-buehne { --kca-buehne-ton: #dcbf96; --kca-stufe: 0; position: relative; } #kca .kca-buehne[data-welt="light"] { --kca-buehne-ton: #e6cfa9; } #kca .kca-buehne[data-welt="sweet"] { --kca-buehne-ton: #efe3cc; } #kca .kca-buehne[data-welt="cold"] { --kca-buehne-ton: #dfe2d9; } /* Wahl oben: echte Radiogruppe, Goldrahmen wie bei der Terminkarte */ #kca .kca-buehne__wahl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; min-width: 0; margin: 0 0 14px; padding: 0; border: 0; } /* Abstand zur Bühne wie Bühne bis Satz */ #kca .kca-buehne__welt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; margin: 0; padding: 6px 4px; border: 1px solid var(--kca-linie-creme); background: #fff; color: var(--kca-braun); font-weight: 400; text-align: center; cursor: pointer; transition: border-color .25s, box-shadow .25s; } #kca .kca-buehne__radio { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; } #kca .kca-buehne__welt:has(.kca-buehne__radio:focus-visible) { outline: 3px solid var(--kca-gold-d); outline-offset: 2px; } #kca .kca-buehne__welt:has(.kca-buehne__radio:checked) { border-color: var(--kca-gold); box-shadow: inset 0 0 0 1px var(--kca-gold); } #kca .kca-buehne__titel { font: 600 13.5px/1.2 "Oswald", sans-serif; letter-spacing: 1px; text-transform: uppercase; } #kca .kca-buehne__welt:has(.kca-buehne__radio:checked) .kca-buehne__titel { color: var(--kca-gold-d); } #kca .kca-buehne__jura { color: var(--kca-grau); font: italic 11px/1.3 "Merriweather", serif; } /* Bühne: Kraftpapier im Ton der Welt. Mobil eine Reihe zum Wischen (gewähltes Getränk gross in der Mitte). */ #kca .kca-buehne__szene { position: relative; height: clamp(190px, 50vw, 50vh); overflow: hidden; background: var(--kca-buehne-ton) url(../img/korn.png) repeat; background-size: 160px 160px; transition: background-color .6s var(--kca-kurve); touch-action: pan-y; } #kca .kca-buehne__bild { display: block; width: 100%; height: 100%; } #kca .kca-buehne__reihe { transform-box: view-box; transform-origin: 400px 138px; transform: translateX(calc((240 - var(--kca-stufe) * 160) * 1.9px)) scale(1.9); transition: transform .55s var(--kca-kurve); } #kca .kca-buehne__getraenk { transition: opacity .5s var(--kca-kurve); opacity: .55; } #kca .kca-buehne__spot { opacity: 0; transition: opacity .5s var(--kca-kurve); } #kca .kca-buehne[data-welt="hot"] .kca-buehne__getraenk[data-welt="hot"], #kca .kca-buehne[data-welt="light"] .kca-buehne__getraenk[data-welt="light"], #kca .kca-buehne[data-welt="sweet"] .kca-buehne__getraenk[data-welt="sweet"], #kca .kca-buehne[data-welt="cold"] .kca-buehne__getraenk[data-welt="cold"] { opacity: 1; } #kca .kca-buehne[data-welt="hot"] [data-welt="hot"] .kca-buehne__spot, #kca .kca-buehne[data-welt="light"] [data-welt="light"] .kca-buehne__spot, #kca .kca-buehne[data-welt="sweet"] [data-welt="sweet"] .kca-buehne__spot, #kca .kca-buehne[data-welt="cold"] [data-welt="cold"] .kca-buehne__spot { opacity: 1; } /* Getränke: Espresso (Crema dreht sich), Kaffee (feiner Dampf), Sweet Foam (Schaum steigt, Sirup zieht), Cold Brew (Eis) */ /* Flache Flächen in der Retro-Linie: Espresso, Kaffee, Crema des Cappuccino, Cold Brew. */ #kca .kca-tisch__espresso { fill: #b07338; } #kca .kca-tisch__kaffee { fill: #93603a; } #kca .kca-tisch__crema { fill: #b98a5a; } #kca .kca-tisch__coldbrew { fill: #3b2414; } #kca .kca-tisch__tigerung { fill: none; stroke: #6e3d1b; stroke-width: 2.4; stroke-linecap: round; opacity: .55; } #kca .kca-tisch__cremarand { fill: none; stroke: #e8c08a; stroke-width: 1.6; opacity: .7; } #kca .kca-tisch__glanzkaffee { fill: none; stroke: #e2b886; stroke-width: 2.2px; stroke-linecap: round; opacity: .55; vector-effect: non-scaling-stroke; } #kca .kca-tisch__schaum { fill: #fffaf1; } #kca .kca-tisch__blasen circle { fill: none; stroke: #e2d4bd; stroke-width: 1.2; } #kca .kca-buehne__crema, #kca .kca-buehne__schaum { transform-box: fill-box; transform-origin: center; } #kca .kca-buehne__sirup { fill: none; stroke: #b8742c; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; } #kca .kca-buehne__getraenk .kca-tisch__dampf { display: none; } #kca .kca-buehne[data-welt="hot"] [data-welt="hot"] .kca-tisch__dampf, #kca .kca-buehne[data-welt="light"] [data-welt="light"] .kca-tisch__dampf { display: inline; } #kca .kca-buehne .kca-tisch__dampf path:nth-child(1) { animation-delay: .1s; } #kca .kca-buehne .kca-tisch__dampf path:nth-child(2) { animation-delay: 1.2s; } #kca .kca-buehne .kca-tisch__dampf path:nth-child(3) { animation-delay: 2.3s; } #kca .kca-buehne .kca-tisch__dampf path:nth-child(4) { animation-delay: .7s; } #kca .kca-buehne .kca-tisch__dampf path:nth-child(5) { animation-delay: 1.8s; } #kca .kca-buehne .kca-tisch__dampf--1 path { stroke-width: 1.8px; } #kca .kca-buehne .kca-tisch__dampf--2 path { stroke: #a9824f; stroke-width: 3px; } #kca .kca-buehne[data-welt="hot"] [data-welt="hot"] .kca-buehne__crema { animation: kca-crema 18s linear infinite; } #kca .kca-buehne--neu[data-welt="sweet"] [data-welt="sweet"] .kca-buehne__schaum { animation: kca-schaum 1.3s var(--kca-kurve) both; } #kca .kca-buehne--neu[data-welt="sweet"] [data-welt="sweet"] .kca-buehne__sirup { animation: kca-zug 1.6s .45s ease-in-out both; } #kca .kca-buehne--neu[data-welt="cold"] [data-welt="cold"] .kca-tisch__eis { animation: kca-eis-fall .36s cubic-bezier(.5, 0, .75, 0) both; } #kca .kca-buehne--neu[data-welt="cold"] [data-welt="cold"] .kca-tisch__eis--2 { animation-delay: .09s; } #kca .kca-buehne--neu[data-welt="cold"] [data-welt="cold"] .kca-tisch__eis--3 { animation-delay: .17s; } #kca .kca-buehne--neu[data-welt="cold"] [data-welt="cold"] .kca-tisch__ring { animation: kca-ring .5s .3s ease-out both; } #kca .kca-buehne--neu[data-welt="cold"] [data-welt="cold"] .kca-tisch__ring--2 { animation-delay: .39s; } #kca .kca-buehne--neu[data-welt="cold"] [data-welt="cold"] .kca-tisch__ring--3 { animation-delay: .47s; } #kca .kca-buehne:not([data-welt="cold"]) .kca-tisch__eiswiege, #kca .kca-buehne--ruht * { animation-play-state: paused; } @keyframes kca-crema { to { transform: rotate(360deg); } } @keyframes kca-schaum { from { transform: scale(.8); } 60% { transform: scale(1.06); } to { transform: scale(1); } } /* Satz der Welt und wer sie kann */ #kca .kca-buehne__text { min-height: 72px; margin: 14px 0 0; text-align: center; } #kca .kca-buehne__info { animation: kca-auftakt .45s var(--kca-kurve) both; } #kca .kca-buehne__satz { margin: 0 0 4px !important; color: var(--kca-text); font-size: 15px; line-height: 1.5; } #kca .kca-buehne__koennen { margin: 0 !important; color: var(--kca-braun); font-size: 14px; font-weight: 700; } /* Maschinen: wer die Welt kann, steht vorne; die anderen treten zurück (Bild blass, Schrift bleibt lesbar). */ #kca .kca-buehne__maschinen { display: grid; gap: 8px; margin: 26px 0 0 !important; } /* Luft unter «Diese Maschinen können das» */ #kca .kca-maschine { display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto; column-gap: 12px; align-items: start; min-width: 0; padding: 10px 12px 2px 8px; border: 1px solid var(--kca-linie-creme); background: #fff; text-align: left; transition: transform .45s var(--kca-kurve), border-color .45s; } #kca .kca-maschine > :not(.kca-maschine__bild) { grid-column: 2; } #kca .kca-maschine__bild { display: block; grid-column: 1; grid-row: 1 / span 5; width: 84px; height: 96px; margin: 0; transition: opacity .45s var(--kca-kurve), filter .45s, transform .45s var(--kca-kurve); } #kca .kca-maschine__foto, #kca .kca-maschine__bild picture[class] > img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; } #kca .kca-maschine__name { display: block; margin-bottom: 3px; color: var(--kca-braun); font: 700 15.5px/1.2 "Oswald", sans-serif; letter-spacing: .5px; text-transform: uppercase; transition: color .45s; } #kca .kca-maschine__neu { color: var(--kca-gold-d); font: italic 12px/1 "Merriweather", serif; letter-spacing: 0; text-transform: none; } #kca .kca-maschine__text { display: block; margin-bottom: 3px; color: var(--kca-grau); font-size: 12.5px; line-height: 1.45; -webkit-hyphens: manual; hyphens: manual; } #kca .kca-maschine__mehr { justify-content: flex-start; max-width: 100%; min-height: 40px; white-space: normal; } #kca .kca-maschine--vorne { border-color: var(--kca-gold); } #kca .kca-maschine--vorne .kca-maschine__bild { transform: translateY(-2px); } #kca .kca-maschine--hinten { transform: scale(.97); } #kca .kca-maschine--hinten .kca-maschine__bild { opacity: .35; filter: grayscale(1); } #kca .kca-maschine--hinten .kca-maschine__name { color: #6f6a64; } /* ------------------------------------------------------------------ */ /* 5 Anmeldung und Formular (Gravity Forms, Theme gravity-theme) */ /* ------------------------------------------------------------------ */ #kca .kca-anmeldung__kopf { margin-bottom: 18px; } #kca .kca-anmeldung__kopf .kca-h2 { margin-bottom: 14px; } #kca .kca-anmeldung__kopf .kca-h2::after { content: ""; display: block; width: 60px; height: 2px; margin-top: 16px; background: var(--kca-gold); } #kca .kca-anmeldung__intro { margin-bottom: 0; } #kca .kca-auswahl { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "sym label aendern" "text text text"; align-items: center; gap: 2px 10px; margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--kca-linie-creme); border-left: 3px solid var(--kca-gold); background: #fff; animation: kca-auftakt .5s var(--kca-kurve) both; } #kca .kca-auswahl:has(.kca-auswahl__stimmung:not([hidden])) { grid-template-areas: "sym label aendern" "stimmung stimmung stimmung" "text text text"; } #kca .kca-auswahl__symbol { grid-area: sym; width: 22px; height: 22px; fill: none; stroke: var(--kca-gold-d); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } #kca .kca-auswahl__label { grid-area: label; color: var(--kca-grau); font-size: 14px; } #kca .kca-auswahl__stimmung { grid-area: stimmung; color: var(--kca-gold-d); font: 700 14px/1.3 "Oswald", sans-serif; letter-spacing: 1px; text-transform: uppercase; } #kca .kca-auswahl__text { grid-area: text; color: var(--kca-braun) !important; font-size: 15px; } #kca .kca-auswahl__aendern { grid-area: aendern; margin: -4px 0; } #kca .kca-formular { padding: 20px 16px; border: 1px solid var(--kca-linie-creme); background: #fff; } #kca .gform_wrapper.gravity-theme { margin: 0; } #kca .gform_wrapper.gravity-theme .gform_required_legend { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #kca .gform_wrapper.gravity-theme .gform_fields { grid-row-gap: 16px; grid-column-gap: 14px; } #kca .gform_wrapper.gravity-theme .gfield_label { margin-bottom: 6px; color: var(--kca-braun) !important; font: 700 14px/1.3 "Oswald", sans-serif; letter-spacing: 1px; text-transform: uppercase; } #kca .gform_wrapper.gravity-theme .gfield_required { margin-left: 3px; color: var(--kca-gold-d); font-size: 14px; } #kca .gform_wrapper.gravity-theme .ginput_complex label { padding-top: 0; color: var(--kca-grau) !important; font-size: 13px; } /* Freiwillige Felder: Hinweis klein neben dem Feldnamen statt eigener Zeile; Zeichenzähler weg */ #kca .gform_wrapper.gravity-theme .kca-feld-maschine, #kca .gform_wrapper.gravity-theme .kca-feld-bemerkung { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; } #kca .gform_wrapper.gravity-theme .kca-feld-maschine > .gfield_label, #kca .gform_wrapper.gravity-theme .kca-feld-bemerkung > .gfield_label { order: 1; } #kca .gform_wrapper.gravity-theme .kca-feld-maschine > .gfield_description, #kca .gform_wrapper.gravity-theme .kca-feld-bemerkung > .gfield_description { order: 2; margin: 0 0 6px; padding: 0; color: var(--kca-grau); font: italic 13px/1.4 "Merriweather", serif; } #kca .gform_wrapper.gravity-theme .kca-feld-maschine > .ginput_container, #kca .gform_wrapper.gravity-theme .kca-feld-bemerkung > .ginput_container { order: 3; flex: 1 1 100%; } #kca .gform_wrapper.gravity-theme .ginput_counter { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #kca .gform_wrapper.gravity-theme .gfield_description { padding-top: 4px; color: var(--kca-grau); font-size: 13px; line-height: 1.45; } #kca .gform_wrapper.gravity-theme input[type="text"], #kca .gform_wrapper.gravity-theme input[type="email"], #kca .gform_wrapper.gravity-theme input[type="tel"], #kca .gform_wrapper.gravity-theme select, #kca .gform_wrapper.gravity-theme textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--kca-feldrand); border-radius: 0; background-color: #fff; color: var(--kca-braun); font: 16px/1.4 "Open Sans", sans-serif; transition: border-color .2s, box-shadow .2s; } #kca .gform_wrapper.gravity-theme ::placeholder { color: #777; opacity: 1; } #kca .gform_wrapper.gravity-theme select { padding-right: 44px; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%2330271c' stroke-width='2'/%3E%3C/svg%3E"); background-position: right 14px center; background-repeat: no-repeat; background-size: 16px; } #kca .gform_wrapper.gravity-theme textarea { min-height: 48px; height: 88px; resize: vertical; } #kca .gform_wrapper.gravity-theme input:hover, #kca .gform_wrapper.gravity-theme select:hover, #kca .gform_wrapper.gravity-theme textarea:hover { border-color: var(--kca-braun); } #kca .gform_wrapper.gravity-theme input:focus, #kca .gform_wrapper.gravity-theme select:focus, #kca .gform_wrapper.gravity-theme textarea:focus { border-color: var(--kca-braun); outline: none; box-shadow: inset 0 0 0 1px var(--kca-braun), 0 0 0 3px rgba(199, 161, 122, .45); } #kca .gform_wrapper.gravity-theme .kca-feld-name .ginput_complex { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } #kca .gform_wrapper.gravity-theme .kca-feld-name .ginput_complex > span { width: auto; max-width: none; margin: 0; padding: 0; } #kca .gform_wrapper.gravity-theme .gfield_error input, #kca .gform_wrapper.gravity-theme .gfield_error select, #kca .gform_wrapper.gravity-theme .gfield_error textarea { border-color: var(--kca-fehler); } #kca .gform_wrapper.gravity-theme .gfield_validation_message { margin-top: 6px; padding: 8px 12px; border: 0; border-left: 3px solid var(--kca-fehler); background: #fbece9; color: var(--kca-fehler); font-size: 14px; font-weight: 600; } #kca .gform_wrapper.gravity-theme .gform_validation_errors { margin: 0 0 18px; padding: 14px 18px 14px 48px !important; border: 0; border-left: 4px solid var(--kca-fehler); border-radius: 0; background: #fbece9; box-shadow: none; } #kca .gform_wrapper.gravity-theme .gform_validation_errors > h2 { margin: 0 0 6px; color: var(--kca-fehler); font: 700 15px/1.5 "Open Sans", sans-serif !important; letter-spacing: 0; text-transform: none; } #kca .gform_wrapper.gravity-theme .gform_validation_errors > h2::after { display: none; } #kca .gform_wrapper.gravity-theme .gform_validation_errors > ol li, #kca .gform_wrapper.gravity-theme .gform_validation_errors > ol a { color: var(--kca-fehler); font-size: 14px; } #kca .gform_wrapper.gravity-theme .gform_validation_errors > ol { padding-left: 20px; list-style: disc; } /* Personen: zwei eckige Segmente */ #kca .gform_wrapper.gravity-theme .gfield_radio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; } #kca .gform_wrapper.gravity-theme .gfield_radio .gchoice { position: relative; display: flex; margin: 0; } #kca .gform_wrapper.gravity-theme .gfield_radio .gchoice + .gchoice { margin-left: -1px; } #kca .gform_wrapper.gravity-theme .gfield_radio .gfield-choice-input { position: absolute; top: 50%; left: 16px; width: 18px; height: 18px; margin: -9px 0 0; opacity: 0; } #kca .gform_wrapper.gravity-theme .gfield_radio label { position: relative; display: flex; flex: 1; align-items: center; max-width: none; min-height: 48px; margin: 0; padding: 10px 12px 10px 42px; border: 1px solid var(--kca-feldrand); background: #fff; color: var(--kca-braun); font-size: 15.5px; font-weight: 600; line-height: 1.3; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; } #kca .gform_wrapper.gravity-theme .gfield_radio label::before { content: ""; position: absolute; top: 50%; left: 14px; width: 16px; height: 16px; margin-top: -8px; border: 2px solid var(--kca-feldrand); border-radius: 50%; background: #fff; } #kca .gform_wrapper.gravity-theme .gfield_radio .gfield-choice-input:checked + label { z-index: 1; border-color: var(--kca-braun); background: var(--kca-braun); color: #fff; } #kca .gform_wrapper.gravity-theme .gfield_radio .gfield-choice-input:checked + label::before { border-color: var(--kca-gold); background: var(--kca-gold); box-shadow: inset 0 0 0 3px var(--kca-braun); } #kca .gform_wrapper.gravity-theme .gfield_radio .gfield-choice-input:focus-visible + label { outline: 3px solid var(--kca-gold-d); outline-offset: 2px; } #kca .gform_wrapper.gravity-theme .gfield_radio .gfield-choice-input:disabled + label { border-style: dashed; background: transparent; color: #777; text-decoration: line-through; cursor: not-allowed; } #kca .gform_wrapper.gravity-theme .kca-datenschutz { margin: 0; color: var(--kca-grau); font-size: 13px; line-height: 1.5; } #kca .gform_wrapper.gravity-theme .gform_footer { flex-direction: column; align-items: stretch; gap: 12px; margin: 6px 0 0; padding: 0; } #kca .gform_wrapper.gravity-theme .gform_footer .gform_button { align-self: stretch; min-height: 52px; margin: 0; padding: 14px 32px; border: 2px solid var(--kca-braun); border-radius: 0; background: var(--kca-braun); color: #fff; font: 600 13px/1.2 "Open Sans", sans-serif; letter-spacing: 2.5px; text-transform: uppercase; cursor: pointer; transition: background-color .25s, border-color .25s, color .25s; } #kca .gform_wrapper.gravity-theme .gform_footer .gform_button:hover { border-color: var(--kca-gold); background: var(--kca-gold); color: var(--kca-braun); } #kca .kca-sprachhinweis { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--kca-braun); font-size: 14px; font-weight: 600; line-height: 1.4; } #kca .kca-sprachhinweis svg { flex: none; width: 20px; height: 20px; color: var(--kca-gold-d); } html:not([lang|="de"]) #kca .kca-sprachhinweis { padding: 10px 14px; border-left: 3px solid var(--kca-gold); background: #fbf3e6; font-weight: 700; } /* Bestätigung (steht in der Formularfläche) */ #kca .kca-ok { padding: 4px 0 0; } #kca .kca-ok__kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } #kca .kca-ok__symbol { display: flex; flex: none; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: var(--kca-gold); color: var(--kca-braun); animation: kca-ok-pop .6s var(--kca-kurve) both; } #kca .kca-ok__symbol svg { fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: kca-haken .5s .25s var(--kca-kurve) forwards; } @keyframes kca-ok-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes kca-haken { to { stroke-dashoffset: 0; } } #kca .kca-ok__titel { font-size: 24px !important; } #kca .kca-ok__liste { margin: 16px 0 18px; border-top: 1px solid var(--kca-linie); } #kca .kca-ok__zeile { display: grid; grid-template-columns: minmax(0, 6.6em) minmax(0, 1fr); gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid var(--kca-linie); font-size: 14.5px; } #kca .kca-ok__zeile dt { color: var(--kca-braun); font-weight: 700; } #kca .kca-ok .kca-btn { width: 100%; } #kca .kca-ok__hinweis, #kca .kca-ok__abmelden { font-size: 15px; } #kca .kca-ok__weiter { margin: 0; } /* ------------------------------------------------------------------ */ /* 6 Praktisches: Fragen und Antworten */ /* ------------------------------------------------------------------ */ #kca .kca-fragen__raster { display: grid; gap: 34px; } #kca .kca-faq { border-top: 1px solid var(--kca-linie); } #kca .kca-frage { border-bottom: 1px solid var(--kca-linie); } #kca .kca-frage summary { display: flex; align-items: baseline; min-height: 56px; padding: 16px 40px 16px 0; position: relative; color: var(--kca-braun); list-style: none; cursor: pointer; } #kca .kca-frage summary::-webkit-details-marker { display: none; } #kca .kca-frage__text { font: 700 17px/1.3 "Oswald", sans-serif; letter-spacing: .5px; text-transform: uppercase; transition: color .2s; } #kca .kca-frage summary::before, #kca .kca-frage summary::after { content: ""; position: absolute; top: 50%; right: 6px; width: 14px; height: 2px; margin-top: -1px; background: var(--kca-gold-d); transition: transform var(--kca-dauer) var(--kca-kurve); } #kca .kca-frage summary::after { transform: rotate(90deg); } #kca .kca-frage[open] summary::after { transform: rotate(0deg); } #kca .kca-frage summary:hover .kca-frage__text { color: var(--kca-gold-d); } #kca .kca-frage__antwort { padding: 0 40px 18px 0; font-size: 15.5px; line-height: 1.6; } #kca .kca-frage__antwort > :last-child { margin-bottom: 0; } #kca .kca-frage__antwort strong, #kca .kca-frage__antwort b { font-weight: inherit; } /* alle Antworten in normaler Schrift */ #kca .kca-frage[open] .kca-frage__antwort { animation: kca-auftakt .45s var(--kca-kurve) both; } #kca .kca-frage__liste { margin: 10px 0 0 !important; } #kca .kca-frage__liste li { position: relative; padding: 4px 0 4px 20px; } #kca .kca-frage__liste li::before { content: ""; position: absolute; top: 13px; left: 2px; width: 8px; height: 2px; background: var(--kca-gold); } #kca .kca-frage__antwort .kca-pfeil { margin-top: 2px; } #kca .kca-kontakt { display: none; padding: 24px 22px; background: var(--kca-creme); } #kca .kca-kontakt__titel { margin-bottom: 4px; font-size: 18px !important; letter-spacing: 1px; } #kca .kca-kontakt__satz { margin: 0 0 8px; font: italic 15px/1.5 "Merriweather", serif; } #kca .kca-kontakt__tel { display: inline-block; color: var(--kca-braun) !important; font: 700 34px/1.15 "Oswald", sans-serif; letter-spacing: .5px; text-decoration: none; white-space: nowrap; transition: color .2s; } #kca .kca-kontakt__tel:hover { color: var(--kca-gold-d) !important; } #kca .kca-kontakt__mail { display: block; width: max-content; max-width: 100%; margin: 2px 0 10px; font-size: 16px; font-weight: 600; } #kca .kca-kontakt__adresse { margin-bottom: 2px; color: var(--kca-grau); font-size: 14px; } #kca .kca-kontakt__aktion { margin: 0; } /* ------------------------------------------------------------------ */ /* Reiter mobil «Ablauf | Maschinen» (akademie-ui.js): Unterstrich wie Theme-Reiter */ /* ------------------------------------------------------------------ */ #kca .kca-reiter-leiste { padding: 40px 0 0; background: var(--kca-creme); text-align: center; } #kca .kca-reiter-titel { margin-bottom: 18px; } #kca .kca-reiter { position: relative; display: grid; grid-template-columns: repeat(var(--kca-reiter-n, 2), minmax(0, 1fr)); border-bottom: 1px solid var(--kca-linie-creme); } #kca .kca-reiter::before { content: ""; position: absolute; bottom: -1px; left: 0; width: calc(100% / var(--kca-reiter-n, 2)); height: 3px; background: var(--kca-gold); transform: translateX(calc(var(--kca-reiter-i, 0) * 100%)); transition: transform .45s var(--kca-kurve); } #kca .kca-reiter__knopf { min-height: 48px; margin: 0; padding: 8px; border: 0; background: transparent; color: var(--kca-grau); font: 700 15px/1.2 "Oswald", sans-serif; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: color .3s; overflow-wrap: anywhere; } #kca .kca-reiter__knopf[aria-selected="true"] { color: var(--kca-braun); } #kca .kca-reiter__knopf:focus-visible { outline: 3px solid var(--kca-gold-d); outline-offset: -3px; } #kca .kca-reiterbox--an > .kca-abschnitt { padding: 24px 0 40px; background: var(--kca-creme); } #kca .kca-reiterbox--an > .kca-abschnitt:not([hidden]) { animation: kca-auftakt .45s var(--kca-kurve) both; } #kca .kca-reiterbox--an > [role="tabpanel"]:focus-visible { outline-offset: -3px; } #kca .kca-reiterbox--an .kca-kopf, #kca .kca-reiterbox--an .kca-kurs__inhalt > .kca-kicker { display: none; } #kca .kca-reiterbox--an .kca-kurs__inhalt > .kca-h2 { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #kca .kca-reiterbox--an .kca-zeitlinie .kca-punkt::after { background: var(--kca-creme); } /* ------------------------------------------------------------------ */ /* Bewegung beim Scrollen (Skript setzt .kca-reveal--wartet) */ /* ------------------------------------------------------------------ */ #kca .kca-reveal { transition: opacity .7s var(--kca-kurve), transform .7s var(--kca-kurve); } #kca .kca-reveal:nth-child(2) { transition-delay: .06s; } #kca .kca-reveal:nth-child(3) { transition-delay: .12s; } #kca .kca-reveal:nth-child(4) { transition-delay: .18s; } #kca .kca-reveal:nth-child(5) { transition-delay: .24s; } #kca .kca-reveal:nth-child(6) { transition-delay: .3s; } #kca .kca-reveal--wartet { opacity: 0; transform: translateY(16px); } /* Theme-Rahmen .edgtf-wrapper-inner (overflow:hidden) und body (overflow:hidden auto) verhindern position:sticky. Während des Scroll-Durchlaufs der Bühne «clip» statt «hidden»: schneidet gleich ab, ist aber kein Scrollbehälter. Die Klasse kca-durchlauf setzt nur akademie-ui.js auf /akademie und nur, wenn der Browser overflow:clip kennt; ältere Safari (ohne clip) behalten hidden und bekommen die Bühne ohne Durchlauf (Wahl und Wischen). */ @supports (overflow: clip) { body.kca-durchlauf { overflow-x: clip !important; overflow-y: visible !important; } body.kca-durchlauf .edgtf-wrapper-inner { overflow: clip !important; } } /* ------------------------------------------------------------------ */ /* Breiten */ /* ------------------------------------------------------------------ */ @media (max-width: 359px) { #kca .kca-h1 { font-size: 32px !important; } #kca .kca-option { padding-left: 12px; padding-right: 10px; } #kca .kca-option__name { font-size: 15px; } #kca .kca-kontakt__tel { font-size: 28px; } } @media (min-width: 600px) { #kca .kca-innen { padding: 0 32px; } #kca .kca-hero__text { padding-top: 34px; padding-bottom: 40px; } /* .kca-innen setzt oben und unten 0 */ #kca .kca-hero__bild { aspect-ratio: 16 / 9; } #kca .kca-kurs__bildrahmen { margin: 0 -32px; } #kca .kca-kurs__legende { --kca-rand: 32px; } #kca .kca-ok .kca-btn { width: auto; } #kca .kca-ok__zeile { grid-template-columns: minmax(0, 10em) minmax(0, 1fr); } #kca .kca-aktion .kca-slot__knopf, #kca .kca-aktion .kca-btn--aus { flex: 0 1 auto; } #kca .kca-tisch { height: 196px; } #kca .kca-slots { grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); } #kca .kca-buehne__maschinen { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } /* auto-fit: leere Spuren fallen weg, die Karten füllen die Reihe */ #kca .kca-maschine { display: flex; flex-direction: column; align-items: center; padding: 12px 8px 4px; text-align: center; } #kca .kca-maschine__bild { width: 100%; height: 100px; margin-bottom: 8px; } #kca .kca-maschine__mehr { justify-content: center; margin-top: auto; text-align: center; } #kca .kca-maschine--hinten { transform: scale(.94); } #kca .kca-maschine--vorne .kca-maschine__bild { transform: translateY(-4px); } } /* Vier Maschinen (Nachtrag 05.10.2026, C9 entfällt): unter 700 px passen keine vier Karten à 150 px nebeneinander, darum 2 x 2 statt 3 + 1. Gilt nur bei genau vier Karten. */ @media (min-width: 600px) and (max-width: 699px) { #kca .kca-buehne__maschinen:has(> .kca-maschine:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) { #kca .kca-h1 { font-size: 52px !important; } #kca .kca-hero .kca-h1 { font-size: 52px !important; } #kca .kca-hero__zusatz { font-size: 22px; } #kca .kca-h2 { font-size: 32px !important; } #kca .kca-tag { padding-bottom: 26px; } #kca .kca-tag > *:not(.kca-tisch) { margin-left: 26px; margin-right: 26px; } } @media (min-width: 1025px) { #kca { font-size: 18px; } #kca .kca-innen { padding: 0 40px; } #kca .kca-abschnitt { padding: 110px 0; } #kca .kca-h1 { margin-bottom: 20px; font-size: 64px !important; } #kca .kca-h2 { font-size: 35px !important; } #kca .kca-kicker { font-size: 18px; } #kca .kca-kopf { margin-bottom: 44px; } #kca .kca-einleitung { font-size: 18px; } #kca .kca-hero { display: block; } /* Höhe aus dem Inhalt, keine Mindesthöhe */ #kca .kca-hero__text { display: flex; flex-direction: column; padding-top: 72px; padding-bottom: 76px; } #kca .kca-hero__foto { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; } #kca .kca-hero__bild { height: 100%; aspect-ratio: auto; object-position: 50% 50%; } /* Weicher Übergang: derselbe Grund (Verlauf und Körnung) liegt als Ebene über dem Foto und blendet nach rechts aus */ #kca .kca-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: inherit; -webkit-mask-image: linear-gradient(90deg, #000 50%, rgba(0, 0, 0, .82) 54%, rgba(0, 0, 0, .45) 61%, rgba(0, 0, 0, .14) 68%, transparent 73%); mask-image: linear-gradient(90deg, #000 50%, rgba(0, 0, 0, .82) 54%, rgba(0, 0, 0, .45) 61%, rgba(0, 0, 0, .14) 68%, transparent 73%); pointer-events: none; } #kca .kca-hero__text > * { max-width: min(512px, calc(50vw - 88px)); } #kca .kca-hero .kca-h1 { margin-bottom: 10px; font-size: 64px !important; } #kca .kca-hero__zusatz { margin-bottom: 22px; font-size: 26px; } #kca .kca-hero__unter { margin-bottom: 26px; font-size: 20px; } #kca .kca-fakten { margin-bottom: 34px; font-size: 13px; } #kca .kca-hero__aktion { align-self: flex-start; } #kca .kca-termine { padding: 90px 0 100px; } #kca .kca-buehne__wahl { gap: 10px; } #kca .kca-buehne__welt { min-height: 60px; } #kca .kca-buehne__titel { font-size: 16px; } #kca .kca-buehne__jura { font-size: 12.5px; } #kca .kca-buehne__szene { height: clamp(200px, 30vh, 290px); } #kca .kca-buehne__reihe { transform: none; } #kca .kca-buehne__getraenk { opacity: .7; } #kca .kca-buehne__wahl { margin-bottom: 12px; } #kca .kca-buehne__text { min-height: 64px; margin-top: 12px; } #kca .kca-buehne__satz { font-size: 17px; } #kca .kca-buehne__maschinen { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; margin-top: 34px !important; } /* so viele gleich breite Spalten wie Maschinen (seit 05.10.2026 vier) */ #kca .kca-maschine__bild { height: 104px; } /* Scroll-Durchlauf (akademie-ui.js setzt kca-buehne--lauf, wenn die Bühne ganz ins Fenster passt) */ #kca .kca-buehne--lauf .kca-buehne__lauf { height: calc(var(--kca-kleber, 100vh) + 210vh); } #kca .kca-buehne--lauf .kca-buehne__kleber { position: sticky; top: 76px; padding: 12px 0 16px; background: #fff; } #kca .kca-tag { padding-bottom: 28px; } #kca .kca-tag > .kca-tisch { height: 250px; } #kca .kca-tag__kopf { margin-top: -46px; margin-bottom: 18px; } /* eine linke Kante mit Frage, Feldern und Knopf */ #kca .kca-kalender { width: 66px; } #kca .kca-kalender__tag { font-size: 28px; } #kca .kca-kalender__monat { padding-top: 4px; } #kca .kca-tag__fuer { margin-bottom: 4px !important; font-size: 17px; } #kca .kca-zeitwahl { margin-bottom: 20px; } #kca .kca-zeitwahl__frage { margin-bottom: 12px; font-size: 19px; } #kca .kca-slots { gap: 14px; } #kca .kca-option { padding: 16px 18px 17px 20px; } #kca .kca-option:has(.kca-option__radio:checked)::after { top: 20px; right: 18px; } #kca .kca-option__name { font-size: 18px; } #kca .kca-option__zeit { font-size: 17px; } #kca .kca-slot__plaetze { margin-top: 8px; font-size: 15px; } #kca .kca-tasse { width: 24px; height: 20px; } #kca .kca-tassen { gap: 4px 8px; } #kca .kca-aktion .kca-slot__knopf, #kca .kca-aktion .kca-btn--aus { flex: none; min-width: 240px; } #kca .kca-kurs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; } #kca .kca-kurs--bild .kca-kurs__bilder { display: flex; flex-direction: column; gap: 30px; } #kca .kca-kurs--bild .kca-kurs__bildrahmen { margin: 0; } /* gleich breit, übereinander ohne Versatz */ #kca .kca-kurs--bild .kca-kurs__legende { --kca-rand: 0px; font-size: 15px; } #kca .kca-kurs__bildrahmen--team { display: block; } #kca .kca-kurs__bildrahmen--team .kca-kurs__bild { aspect-ratio: auto; } /* Originalformat, nicht zugeschnitten */ #kca .kca-text { font-size: 18px; } #kca .kca-punkt { padding-left: 44px; padding-bottom: 24px; } #kca .kca-punkt::before { font-size: 30px; } #kca .kca-punkt__titel { font-size: 22px; } #kca .kca-punkt__text { font-size: 17px; } #kca .kca-anmeldung__raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 70px; align-items: start; } #kca .kca-anmeldung__kopf { position: sticky; top: 120px; margin: 0; } #kca .kca-anmeldung__raster.kca-fertig { grid-template-columns: minmax(0, 1fr); gap: 0; } #kca .kca-anmeldung__raster.kca-fertig .kca-anmeldung__kopf { position: static; } /* sonst überdeckt der klebende Kopf die Bestätigung */ #kca .kca-formular { padding: 38px 42px 36px; } #kca .gform_wrapper.gravity-theme .gform_fields { grid-row-gap: 20px; grid-column-gap: 18px; } /* Kaffeemaschine und Bemerkung nebeneinander */ #kca .gform_wrapper.gravity-theme .gform_fields > .kca-feld-maschine, #kca .gform_wrapper.gravity-theme .gform_fields > .kca-feld-bemerkung { grid-column: span 6; } #kca .gform_wrapper.gravity-theme .kca-feld-bemerkung textarea { height: 48px; min-height: 48px; } #kca .gform_wrapper.gravity-theme .gform_footer { flex-direction: row-reverse; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px 22px; } #kca .gform_wrapper.gravity-theme .gform_footer .gform_button { align-self: auto; } #kca .kca-fragen__raster { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 70px; align-items: start; } #kca .kca-frage__text { font-size: 19px; } #kca .kca-kontakt { position: sticky; top: 120px; display: block; padding: 34px 32px; } #kca .kca-kontakt__tel { font-size: 44px; } } /* Kontrastmodus: Auswahl nicht nur über Hintergrund */ @media (forced-colors: active) { #kca .kca-reiter__knopf[aria-selected="true"], #kca .kca-option:has(.kca-option__radio:checked) { outline: 2px solid Highlight; outline-offset: -4px; text-decoration: underline; } #kca .gform_wrapper.gravity-theme .gfield_radio label::before { forced-color-adjust: none; border-color: CanvasText; background: Canvas; } #kca .gform_wrapper.gravity-theme .gfield_radio .gfield-choice-input:checked + label::before { background: Highlight; box-shadow: inset 0 0 0 3px Canvas; } } @media (prefers-reduced-motion: reduce) { #kca *, #kca *::before, #kca *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } #kca .kca-reveal--wartet { opacity: 1; transform: none; } #kca .kca-tisch__dampf path { opacity: .4; } } /* Desktop-Kopf des Themes (ab 1350 px, erscheint beim Hochscrollen): Sprünge landen darunter. */ @media (min-width: 1350px) { #kca [id^="kca-"] { scroll-margin-top: 86px; } }