/* ============================================================ Coachyourlife · components.css Styles aller Komponenten. Eine Quelle, überall geladen. Nutzt ausschließlich Tokens aus tokens.css. ============================================================ */ /* ---------- Icons (Einlinien, 1.5px) ---------- */ .cc-ic{ width:1.5em;height:1.5em; fill:none;stroke:currentColor;stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round; flex:none; display:block; } /* Icon-Wrapper: zentriert das Icon sauber auf Schrifthöhe */ cc-icon{display:inline-flex;align-items:center;flex:none;} /* ---------- Header ---------- */ .cc-header{ position:sticky;top:0;z-index:50; background:color-mix(in srgb, var(--leinen) 92%, transparent); backdrop-filter:blur(8px); border-bottom:var(--stroke) solid var(--line); } .cc-header__bar{ display:flex;align-items:center;justify-content:space-between; gap:var(--sp-5); padding-block:var(--sp-3); } .cc-header__brand{ display:flex;align-items:center;gap:var(--sp-3); text-decoration:none;color:var(--ink); } .cc-header__brand img{height:2.6rem;width:auto;} /* Markentext im Kopf: Name in Versalien, Claim darunter, beide zueinander zentriert. Wunsch von Sabine vom 27.08.2026, entspricht ihrem bisherigen Logo. Kein text-transform, die Versalien stehen im Markup, sonst macht der Browser aus dem ß ein SS. */ .cc-header__brandtext{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.2;} .cc-header__name{font-weight:600;font-size:1rem;letter-spacing:.06em;color:var(--ink);} .cc-header__claim{font-size:.7rem;letter-spacing:.16em;color:var(--text-soft);margin-top:.15em;} .cc-nav{display:none;} .cc-nav.is-open{ display:block; position:absolute;left:0;right:0;top:100%; background:var(--paper); border-bottom:var(--stroke) solid var(--line); padding:var(--sp-5) var(--gutter) var(--sp-6); } .cc-nav ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--sp-4);} .cc-nav a{ display:inline-flex;align-items:center;gap:var(--sp-3); text-decoration:none;color:var(--text); font-size:1.05rem;font-weight:400; padding-block:var(--sp-1); } /* Gleiches Prinzip wie beim Ghost Knopf: Der Strich waechst beim Hover nicht über width, sondern über transform. Vorher wuchs er von 1.1rem auf 1.9rem, also um 12,8 Pixel echte Breite. Im waagerechten Menü hat das alle Punkte rechts daneben verschoben. Jetzt sind dauerhaft 1.9rem Platz reserviert und der Strich ist im Ruhezustand per scaleX zusammengezogen. scaleX(.579) entspricht 1.1 geteilt durch 1.9, die Optik bleibt gleich. */ .cc-nav a::before{ content:"";width:1.9rem;height:var(--stroke); background:var(--line); transform:scaleX(.579);transform-origin:left center; transition:transform var(--dur-2) var(--ease),background var(--dur-1) var(--ease); } .cc-nav a:hover::before,.cc-nav a[aria-current="page"]::before{transform:scaleX(1);background:var(--acc);} .cc-nav a[aria-current="page"]{color:var(--acc-deep);font-weight:500;} .cc-burger{ display:inline-flex;align-items:center;gap:var(--sp-2); background:none;border:var(--stroke) solid var(--line);border-radius:var(--radius); font-family:var(--font);font-size:var(--fs-small);color:var(--text); padding:var(--sp-2) var(--sp-4); min-height:44px;min-width:44px; cursor:pointer; transition:border-color var(--dur-1) var(--ease); } .cc-burger:hover{border-color:var(--acc);} @media (min-width:48rem){ .cc-burger{display:none;} .cc-nav{display:block;position:static;background:none;border:0;padding:0;} .cc-nav ul{flex-direction:row;gap:var(--sp-6);} .cc-nav a{font-size:.98rem;} } /* ---------- Footer ---------- */ .cc-footer{ background:var(--blau-deep); color:rgba(255,255,255,.82); margin-top:var(--sp-9); } .cc-footer a{color:rgba(255,255,255,.85);} .cc-footer a:hover{color:#fff;} .cc-footer__inner{padding-block:var(--sp-8) var(--sp-6);} .cc-footer__grid{display:grid;gap:var(--sp-6);} @media (min-width:48rem){ .cc-footer__grid{grid-template-columns:1.4fr 1fr 1fr;} } /* Markenblock im Footer: Zeichen und Schriftzug nebeneinander, wie im Header, nur in Weiss. Das Zeichen ist kleiner als frueher, weil jetzt der Namenszug daneben steht und beides zusammen sonst zu breit wird. */ .cc-footer__mark{display:flex;align-items:center;gap:var(--sp-3);} .cc-footer__brand img{height:3.4rem;width:auto;filter:brightness(0) invert(1);} .cc-footer__brandtext{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.2;} .cc-footer__name{color:#fff;font-weight:600;font-size:1.05rem;letter-spacing:.06em;} .cc-footer__claim{font-size:.72rem;letter-spacing:.16em;color:rgba(255,255,255,.78);margin-top:.15em;} /* Haelt PLZ und Ort zusammen, sonst reisst der Umbruch sie in der schmalen Footerspalte auseinander. */ .cc-nowrap{white-space:nowrap;} .cc-footer h3{ color:#fff;font-size:var(--fs-small);font-weight:500; letter-spacing:.14em;text-transform:uppercase; margin-bottom:var(--sp-4); } .cc-footer ul{list-style:none;padding:0;} .cc-footer li{margin-block:var(--sp-2);} .cc-footer__entity{font-size:var(--fs-small);color:rgba(255,255,255,.78);max-width:38ch;margin-top:var(--sp-4);line-height:1.6;} .cc-footer__base{ margin-top:var(--sp-7); padding-top:var(--sp-5); border-top:var(--stroke) solid rgba(255,255,255,.18); display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-6); justify-content:space-between; font-size:var(--fs-small);color:rgba(255,255,255,.78); } .cc-footer__base a{color:rgba(255,255,255,.85);} /* ---------- Buttons ---------- */ .cc-btn{ display:inline-flex;align-items:center;gap:var(--sp-3); font-family:var(--font);font-size:1rem;font-weight:500;letter-spacing:.02em; border-radius:var(--radius); padding:.8rem 1.5rem; min-height:44px; text-decoration:none;cursor:pointer; border:var(--stroke) solid transparent; transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease); } .cc-btn .cc-arw{width:1.7em;height:.55em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-2) var(--ease);} .cc-btn:hover .cc-arw{transform:translateX(4px);} .cc-btn--primary{background:var(--acc-deep);color:#fff;} .cc-btn--primary:hover{background:var(--acc);color:#fff;} .cc-btn--secondary{background:transparent;color:var(--acc-deep);border-color:var(--acc-deep);} .cc-btn--secondary:hover{background:var(--acc-soft);color:var(--acc-deep);} .cc-btn--ondark{background:var(--leinen);color:var(--ink);} .cc-btn--ondark:hover{background:#fff;color:var(--ink);} /* Ghost: Textlink mit Wegpunkt und Linie */ .cc-btn--ghost{ background:none;border:0;padding:.4rem 0;border-radius:0; color:var(--acc-deep);font-weight:500;gap:var(--sp-4); } .cc-btn--ghost .cc-wp{ width:.65rem;height:.65rem;border-radius:50%; border:var(--stroke) solid var(--acc);position:relative;flex:none; transition:transform var(--dur-2) var(--ease); } .cc-btn--ghost .cc-wp::after{ content:"";position:absolute;inset:2.5px;border-radius:50%;background:var(--acc); } /* Die Linie verkürzt sich beim Hover über transform, nicht über width. Vorher war es width von 2.2rem auf 1.35rem. Das sind 13,6 Pixel echte Layoutbreite. In einem Container mit flex-wrap kann das die Zeile umbrechen lassen: Der Knopf rutscht unter der Maus weg, der Hover endet, die Zeile springt zurück, der Knopf liegt wieder unter der Maus. Diese Schleife flackert endlos. transform verändert nur die Darstellung und fasst das Layout nicht an. scaleX(.614) entspricht 1.35 geteilt durch 2.2, die Optik bleibt gleich. transform-origin rechts, damit die Linie zum Wegpunkt hin einzieht. */ .cc-btn--ghost .cc-ln{ width:2.2rem;height:var(--stroke);background:var(--acc);flex:none; transform-origin:right center; transition:transform var(--dur-2) var(--ease); } .cc-btn--ghost:hover{color:var(--acc-deep);} .cc-btn--ghost:hover .cc-ln{transform:scaleX(.614);} .cc-btn--ghost:hover .cc-wp{transform:translateX(-4px);} .cc-btn:disabled,.cc-btn[aria-disabled="true"]{opacity:.45;pointer-events:none;} /* ---------- Wegelinie (Pathline) ---------- Hintergrund kann an die angrenzende Sektion angepasst werden, damit kein fremder Farbstreifen entsteht. */ .cc-pathline{display:block;width:100%;overflow:visible;} .cc-pathline--bg-paper{background:var(--paper);} .cc-pathline--bg-sand{background:var(--sand);} .cc-pathline--bg-leinen{background:var(--leinen);} .cc-pathline svg{width:100%;height:3.6rem;display:block;} .cc-pathline path{ fill:none;stroke:var(--line);stroke-width:1.5;stroke-linecap:round; } .cc-pathline circle{fill:var(--leinen);stroke:var(--greige);stroke-width:1.5;} .cc-pathline circle.core{fill:var(--acc);stroke:none;} .cc-pathline--ondark path{stroke:rgba(255,255,255,.35);} .cc-pathline--ondark circle{fill:var(--ink);stroke:rgba(255,255,255,.5);} .cc-pathline--ondark circle.core{fill:var(--acc-soft);} /* Zeichnet sich einmal, wenn sichtbar */ .cc-pathline.draw path{stroke-dasharray:1600;stroke-dashoffset:1600;} .cc-pathline.draw.is-in path{animation:cc-draw 1.6s var(--ease) forwards;} @keyframes cc-draw{to{stroke-dashoffset:0;}} @media (prefers-reduced-motion: reduce){ .cc-pathline.draw path{stroke-dasharray:none;stroke-dashoffset:0;animation:none;} } .no-js .cc-pathline.draw path{stroke-dasharray:none;stroke-dashoffset:0;} /* ---------- Hero ---------- */ .cc-hero{padding-block:var(--sp-9) var(--sp-8);position:relative;} .cc-hero__grid{display:grid;gap:var(--sp-7);align-items:center;} @media (min-width:64rem){ .cc-hero__grid{grid-template-columns:1.25fr 1fr;} } .cc-hero .kicker{margin-bottom:var(--sp-5);} .cc-hero h2{ font-size:var(--fs-h3);font-weight:400;color:var(--text-soft); margin-top:var(--sp-4);letter-spacing:0; } .cc-hero .lead{margin-top:var(--sp-5);} .cc-hero__cta{display:flex;flex-wrap:wrap;gap:var(--sp-5);align-items:center;margin-top:var(--sp-6);} .cc-hero__media{position:relative;} .cc-hero__media img{ border-radius:var(--radius-lg); aspect-ratio:4/5;object-fit:cover;width:100%; } .cc-hero__media::after{ content:"";position:absolute;inset:auto -10px -10px auto; width:46%;height:46%; border-right:var(--stroke) solid var(--greige); border-bottom:var(--stroke) solid var(--greige); border-radius:0 0 var(--radius-lg) 0; pointer-events:none; } /* Claim: genau EIN 99 Paar, immer oben rechts am Textfeld. Der Textblock (inline-block) schmiegt sich an die längste Zeile, das Paar sitzt an dessen oberer rechter Ecke. */ .cc-claim h1, .cc-cta.cc-claim h2{ position:relative;z-index:1; display:inline-block; } .cc-claim h1::before, .cc-cta.cc-claim h2::before{ content:""; position:absolute;z-index:-1; width:6.4rem;height:4.19rem; background:var(--qmark) center/contain no-repeat; top:-.2rem;right:1.6rem; pointer-events:none; } /* Desktop: großer Gänsefuß hinter dem Claim, gleiche Proportion */ @media (min-width:64rem){ .cc-claim h1::before, .cc-cta.cc-claim h2::before{ width:14.6rem;height:9.56rem; top:-1.5rem;right:-.55rem; } } /* ---------- Zitat ---------- */ .cc-quote{ position:relative; padding:var(--sp-7) var(--sp-6); border-radius:var(--radius-lg); } .cc-quote--panel{background:var(--blau-soft);} .cc-quote--line{ background:none;border-left:var(--stroke) solid var(--acc); border-radius:0; padding:var(--sp-4) 3.6rem var(--sp-4) var(--sp-6); width:fit-content;max-width:100%; } /* Linienzitat: genau EIN 99 Paar, oben rechts, nah am Text. */ .cc-quote--line::before{ content:""; position:absolute;z-index:0; width:3rem;height:1.8rem; background:var(--qmark) center/contain no-repeat; pointer-events:none; top:.3rem;right:.4rem; } .cc-quote blockquote{position:relative;z-index:1;border:0;padding:0;margin:0;} /* Rahmen-Zitatdesign für die farbigen Kästen (nach Vorlage): feiner Linienrahmen innerhalb der Fläche, gefülltes 66 Paar oben links und 99 Paar unten rechts sitzen auf dem Rahmen und unterbrechen ihn. Alles bleibt innerhalb des Farbfelds. */ .cc-quote--panel{ padding:clamp(3.5rem,7vw,6rem) var(--sp-7); } .cc-quote--panel::before{ content:""; position:absolute;inset:.9rem; border:var(--stroke) solid var(--ink); border-radius:var(--radius); pointer-events:none; } .cc-quote--panel .cc-qm{ position:absolute;z-index:2; width:2.9rem;height:1.74rem; background-color:var(--blau-soft); background-image:var(--qmark-ink); background-repeat:no-repeat; background-position:center; background-size:calc(100% - .9rem) auto; pointer-events:none; } .cc-quote--panel .cc-qm--open{ /* 66 oben links, auf der Rahmenlinie */ top:.03rem;left:1.7rem; transform:rotate(180deg); } .cc-quote--panel .cc-qm--close{ /* 99 unten rechts, auf der Rahmenlinie */ bottom:.03rem;right:1.7rem; } .cc-quote blockquote p{ font-size:var(--fs-lead);font-weight:300;line-height:1.5; color:var(--ink);max-width:34ch; } .cc-quote figcaption{ position:relative;z-index:1; margin-top:var(--sp-4); font-size:var(--fs-small);color:var(--text-mute); display:flex;align-items:center;gap:var(--sp-3); } .cc-quote figcaption::before{ content:"";width:1.6rem;height:var(--stroke);background:var(--acc);flex:none; } /* ---------- Bilder mit Designlinie (Ecke) ---------- Jedes eingebettete Bild bekommt die feine Ecklinie aus dem Linien-System, wie im Hero der Startseite. */ .cc-media{position:relative;} .cc-media img{ border-radius:var(--radius-lg); width:100%;object-fit:cover;display:block; } .cc-media::after{ content:"";position:absolute;inset:auto -10px -10px auto; width:46%;height:46%; border-right:var(--stroke) solid var(--greige); border-bottom:var(--stroke) solid var(--greige); border-radius:0 0 var(--radius-lg) 0; pointer-events:none; } /* ---------- Bildplatzhalter (cc-imgslot) ---------- Feld, in dem später ein echtes Foto platziert wird. Beschreibt sichtbar, welches Bild dort hingehört. */ .cc-imgslot{ position:relative; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:var(--sp-3); text-align:center; width:100%; background:var(--paper); border:var(--stroke) dashed var(--greige); border-radius:var(--radius-lg); padding:var(--sp-5); } /* Designlinie (Ecke) auch an Platzhaltern */ .cc-imgslot::after{ content:"";position:absolute;inset:auto -10px -10px auto; width:46%;height:46%; border-right:var(--stroke) solid var(--greige); border-bottom:var(--stroke) solid var(--greige); border-radius:0 0 var(--radius-lg) 0; pointer-events:none; } .cc-imgslot .cc-ic{width:2.1em;height:2.1em;color:var(--greige);} .cc-imgslot__tag{ font-size:.72rem;font-weight:500; letter-spacing:.16em;text-transform:uppercase; color:var(--acc-deep); display:inline-flex;align-items:center;gap:var(--sp-2); } .cc-imgslot__tag::before,.cc-imgslot__tag::after{ content:"";width:1.4rem;height:var(--stroke);background:var(--line); } .cc-imgslot p{ font-size:var(--fs-small);color:var(--text-mute); max-width:34ch;line-height:1.55;margin:0; } .cc-imgslot--small{padding:var(--sp-4);} .cc-imgslot--small .cc-ic{width:1.6em;height:1.6em;} /* ---------- Cards ---------- */ .cc-card{ background:var(--paper); border:var(--stroke) solid var(--line); border-radius:var(--radius-lg); padding:var(--sp-6); display:flex;flex-direction:column;gap:var(--sp-3); transition:border-color var(--dur-1) var(--ease),transform var(--dur-2) var(--ease); } .cc-card:hover{border-color:var(--greige);} /* Akzentkarte: keine obere Farblinie mehr, ruhiger Rahmen. */ .cc-card--accent{border-color:var(--line);} /* Text-Karten mit Icon: Icon als Badge auf der oberen Rahmenlinie (wie bei den Zitaten), dann Headline, dann Text. */ .cc-card--accent:not(:has(.cc-media)):has(cc-icon){position:relative;overflow:visible;padding-top:calc(var(--sp-6) + 1.5rem);} .cc-card--accent:not(:has(.cc-media)):has(cc-icon) h3{flex-direction:column;align-items:flex-start;gap:var(--sp-3);} .cc-card--accent:not(:has(.cc-media)):has(cc-icon) h3 cc-icon{ position:absolute;top:0;left:var(--sp-6);transform:translateY(-50%); width:2.9rem;height:2.9rem;background:var(--paper); border:var(--stroke) solid var(--line);border-radius:50%; display:inline-flex;align-items:center;justify-content:center; } .cc-card--accent:not(:has(.cc-media)):has(cc-icon) h3 cc-icon .cc-ic{width:1.4em;height:1.4em;color:var(--acc-deep);} /* Bildkarten (Format): mehr Luft zwischen Bild und Headline, Link unten bündig. */ .cc-card--accent:has(.cc-media) .cc-media{margin-bottom:var(--sp-5);} .cc-card--accent:has(.cc-media) > div:last-child{margin-top:auto;padding-top:var(--sp-4);} .cc-card--filled{background:var(--sand);border-color:transparent;} .cc-card--quiet{background:none;border-color:var(--line);} .cc-card h3{display:flex;align-items:center;gap:var(--sp-3);} .cc-card .cc-ic{color:var(--acc-deep);} .cc-card p:not(.cc-price):not(.cc-price__tax):not(.cc-price__note){color:var(--text-soft);font-size:var(--fs-body);} /* ---------- Badge / Wegpunkt-Marker ---------- */ .cc-badge{ display:inline-flex;align-items:center;gap:var(--sp-2); font-size:var(--fs-small);font-weight:500;letter-spacing:.04em; color:var(--acc-deep); border:var(--stroke) solid var(--line); border-radius:var(--radius); padding:.3rem .7rem; background:var(--paper); } .cc-badge .cc-wp{ width:.6rem;height:.6rem;border-radius:50%; border:var(--stroke) solid var(--acc);position:relative;flex:none; } .cc-badge .cc-wp::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--acc);} /* ---------- Prozess als Weg (Stationen an der Linie) ---------- */ .cc-path-steps{list-style:none;padding:0;max-width:none;position:relative;} .cc-path-steps>li{ position:relative; padding-left:var(--sp-7); padding-bottom:var(--sp-6); margin:0;max-width:var(--measure); } .cc-path-steps>li::before{ /* die Linie */ content:"";position:absolute;left:.55rem;top:.35rem;bottom:0; width:var(--stroke);background:var(--line); } .cc-path-steps>li:last-child::before{bottom:auto;height:1.2rem;} .cc-path-steps>li::after{ /* der Wegpunkt */ content:"";position:absolute;left:0;top:.35rem; width:1.1rem;height:1.1rem;border-radius:50%; background:var(--leinen); border:var(--stroke) solid var(--acc); box-shadow:inset 0 0 0 2.5px var(--leinen), inset 0 0 0 6px var(--acc); } .cc-path-steps h3{ margin-bottom:var(--sp-2); display:flex;align-items:center;gap:var(--sp-3); } .cc-path-steps h3 .cc-ic{color:var(--acc-deep);} .cc-path-steps p{color:var(--text-soft);} /* ---------- Impulse als Zeitstrahl ---------- Baut auf .cc-path-steps auf, gleiche Linie, gleicher Wegpunkt. Nur der Inhalt je Station ist ein anderer: Datum, dann Sabines Vers. Zwei Dinge sind hier wichtig und duerfen nicht wegoptimiert werden: 1. Die Lesebreite ist bewusst schmal (34ch mobil, 46ch ab Tablet). Sabines laengste Zeile hat 55 Zeichen. Waere die Spalte breiter, wuerden kurze Zeilen nebeneinander wirken; waere sie schmaler, brechen ihre Zeilen von selbst um und der Vers ist kaputt. Die Umbrueche im Markup sind Teil des Textes, nicht Layout. 2. Der Abstand zwischen zwei Impulsen ist groesser als bei den normalen Wegpunkten. Ein Vers braucht Luft, sonst lesen sich vier Impulse wie ein einziger langer Text. */ .cc-impulse{position:relative;} .cc-impulse>li{padding-bottom:var(--sp-8);} .cc-impulse>li:last-child{padding-bottom:0;} /* --- Der wachsende Strahl --- Die graue Grundlinie kommt weiter aus .cc-path-steps. Darüber liegt diese zweite Linie in Aubergine, deren Höhe motion.js beim Scrollen setzt. Kein transition, die Höhe wird bei jedem Scrollereignis neu gesetzt, genau wie beim Baum. Eine Übergangszeit würde hier nur nachlaufen und träge wirken. */ .cc-impulse::after{ content:"";position:absolute;left:.55rem;top:.35rem; width:var(--stroke);background:var(--acc); height:calc(100% - .35rem); pointer-events:none; } /* Erst wenn motion.js läuft, wird die Linie überhaupt kurz gehalten. Grundzustand ist bewusst die volle Linie: ohne JavaScript, bei einem Skriptfehler oder in der kurzen Spanne vor der ersten Berechnung sieht die Seite dann fertig aus statt leer. Der Rückfallwert 0 gilt nur, solange motion.js noch nichts gesetzt hat. */ .js-motion .cc-impulse::after{ height:calc(var(--fortschritt, 0) * (100% - .35rem)); } /* --- Die Wegpunkte --- Ruhezustand ist ein leerer Ring. Sobald die Linie den Punkt erreicht, bekommt er seinen Kern und wächst minimal. Animiert werden nur transform, box-shadow und Farben, nichts, was das Layout verschiebt. */ .cc-impulse>li::after{ background:var(--paper); transition:border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .js-motion .cc-impulse>li::after{ border-color:var(--line); box-shadow:none; transform:scale(.82); } .js-motion .cc-impulse>li.is-hit::after{ border-color:var(--acc); box-shadow:inset 0 0 0 2.5px var(--paper), inset 0 0 0 6px var(--acc); transform:scale(1); } /* --- Die Station blendet gestaffelt ein --- Erst der Wegpunkt, dann das Datum, dann der Text. Drei kleine Schritte im Abstand von 60 Millisekunden, das reicht, damit es wie eine Bewegung wirkt und nicht wie ein Schalter. Wichtig: Datum und Wegpunkt haengen an .is-hit und gehen beim Zurueckscrollen wieder aus. Der Text haengt an .is-gelesen, die einmal gesetzt und nie zurueckgenommen wird. Wer hochscrollt, um noch einmal zu lesen, soll den Vers vorfinden und nicht eine leere Flaeche. */ .js-motion .cc-impulse>li .cc-impuls__datum{ opacity:.35; transition:opacity var(--dur-2) var(--ease) 60ms; } .js-motion .cc-impulse>li.is-hit .cc-impuls__datum{opacity:1;} .js-motion .cc-impulse>li>*:not(.cc-impuls__datum){ opacity:0;transform:translateY(10px); transition:opacity var(--dur-2) var(--ease) 120ms, transform var(--dur-2) var(--ease) 120ms; } .js-motion .cc-impulse>li.is-gelesen>*:not(.cc-impuls__datum){ opacity:1;transform:none; } /* Tastaturbedienung: wenn ein Link in einem Eintrag den Fokus bekommt, muss der Eintrag sichtbar sein, auch wenn der Scrollstand etwas anderes sagt. Betrifft die laengeren Beitraege der Sorte B. */ .js-motion .cc-impulse>li:focus-within>*{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){ .js-motion .cc-impulse::after{height:calc(100% - .35rem);} .cc-impulse>li::after{transform:none;} .cc-impulse>li .cc-impuls__datum{opacity:1;} .js-motion .cc-impulse>li>*{opacity:1;transform:none;} } .cc-impuls__datum{ font-size:var(--fs-small);letter-spacing:.14em;text-transform:uppercase; color:var(--acc);margin:0 0 var(--sp-4); } .cc-impuls__vers{ margin:0;padding:0;border:0;background:none; } /* Die Breitenbegrenzung sitzt bewusst am Absatz, nicht am blockquote. Grund: die Einheit ch misst die Breite der Null in der Schriftgroesse des Elements. Am blockquote gilt die Grundschrift, im Absatz die groessere Versschrift. Am blockquote gesetzt ergaben 46ch nur 38ch fuer den Text, und Sabines laengste Zeile brauchte 41. Gemessen am 27.08.2026 im Browser: laengste Zeile 528 Pixel bei 13 Pixel je ch, also 40,6ch. 44ch geben Luft fuer andere Schriften und fuer Zeilen, die spaeter dazukommen. */ .cc-impuls__vers p{ font-size:var(--fs-lead);font-weight:300;line-height:1.65; color:var(--ink);margin:0; max-width:34ch; text-wrap:pretty; /* Am Handy zaehlt jeder Pixel. Eine Spur kleiner als der normale Vorspann, dafuer passen mehr ihrer Zeilen in eine Zeile. Gemessen am 27.08.2026 auf einem 390 Pixel Geraet: 48 Pixel Einzug und 1,15rem -> 10 von 28 Zeilen brechen um 32 Pixel Einzug und 1,05rem -> 4 von 28 Zeilen brechen um Ihre laengste Zeile hat 59 Zeichen, die passt auf keinem Handy in eine Zeile. Deshalb der haengende Einzug oben. */ font-size:1.05rem; } /* Der Zeitstrahl rueckt am Handy weniger ein, siehe Rechnung oben. Der Wegpunkt ist 1,1rem breit, bei 2rem Einzug bleiben rund 14 Pixel Luft zwischen Punkt und Text. */ .cc-impulse>li{padding-left:var(--sp-6);} @media (min-width:48rem){ .cc-impulse>li{padding-left:var(--sp-7);} .cc-impuls__vers p{font-size:var(--fs-lead);max-width:44ch;} } /* Haengender Einzug, aber je Zeile, nicht je Absatz. Jede Verszeile steht in einem eigenen span mit display block. Nur so trifft der Einzug wirklich nur eine erzwungene Fortsetzung. Setzt man ihn stattdessen auf den Absatz, ruecken alle Zeilen ab der zweiten ein, weil text-indent nur die erste Zeile eines Absatzes kennt. Gebraucht wird das nur am Handy: dort brechen bei 390 Pixeln vier der 28 Zeilen um, ihre laengste hat 59 Zeichen. Am Rechner bricht keine. */ .cc-impuls__vers p > span{ display:block; padding-left:1.4em; text-indent:-1.4em; } .cc-impuls__vers p + p{margin-top:var(--sp-5);} /* Die Schlusszeile mancher Impulse ist eine Kadenz, kein weiterer Vers. Sie steht deshalb etwas abgesetzt und in der Akzentfarbe. */ .cc-impuls__schluss{color:var(--acc-deep) !important;font-weight:400;} /* Laengerer Gedanke, Sorte B. Bekommt eine Ueberschrift und einen Anriss, sieht damit bewusst anders aus als ein kurzer Impuls. */ .cc-impuls--lang h2{font-size:var(--fs-h3);margin:0 0 var(--sp-3);max-width:var(--measure);} .cc-impuls--lang h2 a{color:var(--ink);text-decoration:none;} .cc-impuls--lang h2 a:hover{color:var(--acc-deep);text-decoration:underline;} .cc-impuls--lang>p{max-width:var(--measure);} /* ---------- Akkordeon (FAQ) ---------- */ .cc-accordion{border-top:var(--stroke) solid var(--line);max-width:var(--measure);} .cc-accordion details{border-bottom:var(--stroke) solid var(--line);} .cc-accordion summary{ list-style:none;cursor:pointer; display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4); padding-block:var(--sp-5); font-size:var(--fs-h3);font-weight:500;color:var(--ink); min-height:44px; } .cc-accordion summary::-webkit-details-marker{display:none;} .cc-accordion summary h3{font-size:inherit;font-weight:inherit;color:inherit;margin:0;flex:1;} .cc-accordion summary:hover{color:var(--acc-deep);} .cc-accordion .cc-acc-ic{ flex:none;width:1.05rem;height:1.05rem;position:relative; } .cc-accordion .cc-acc-ic::before,.cc-accordion .cc-acc-ic::after{ content:"";position:absolute;background:var(--acc-deep); transition:transform var(--dur-2) var(--ease); } .cc-accordion .cc-acc-ic::before{left:0;right:0;top:50%;height:var(--stroke);margin-top:-0.75px;} .cc-accordion .cc-acc-ic::after{top:0;bottom:0;left:50%;width:var(--stroke);margin-left:-0.75px;} .cc-accordion details[open] .cc-acc-ic::after{transform:scaleY(0);} .cc-accordion .cc-acc-body{padding:0 0 var(--sp-5);color:var(--text-soft);} /* ---------- Formularfelder ---------- */ .cc-field{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-5);} .cc-field label{font-weight:500;color:var(--ink);font-size:var(--fs-body);} .cc-field .opt{font-weight:300;color:var(--text-mute);font-size:var(--fs-small);} .cc-field input,.cc-field select,.cc-field textarea{ font-family:var(--font);font-size:1rem;color:var(--text); background:var(--paper); border:var(--stroke) solid var(--line); border-radius:var(--radius); padding:.75rem .9rem; min-height:44px; width:100%; transition:border-color var(--dur-1) var(--ease); } .cc-field textarea{min-height:8.5rem;resize:vertical;} /* Auswahlfelder: eigener Pfeil, sitzt einen Tick weiter links im Feld */ .cc-field select{ appearance:none;-webkit-appearance:none;-moz-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23573E48' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1.35rem center; background-size:.85rem auto; padding-right:3rem; } .cc-field input:hover,.cc-field select:hover,.cc-field textarea:hover{border-color:var(--greige);} .cc-field input:focus,.cc-field select:focus,.cc-field textarea:focus{border-color:var(--acc-deep);outline:none;} .cc-field input[aria-invalid="true"],.cc-field textarea[aria-invalid="true"],.cc-field select[aria-invalid="true"]{border-color:var(--danger);} .cc-field .cc-error{ display:none;align-items:center;gap:var(--sp-2); color:var(--danger);font-size:var(--fs-small); } .cc-field.has-error .cc-error{display:inline-flex;} .cc-field--check{flex-direction:row;align-items:flex-start;gap:var(--sp-3);flex-wrap:wrap;} .cc-field--check .cc-error{width:100%;} .cc-field--check input{width:1.15rem;height:1.15rem;min-height:0;margin-top:.3rem;accent-color:var(--acc-deep);flex:none;} .cc-field--check label{font-weight:400;color:var(--text-soft);font-size:var(--fs-body);} .cc-form-status{ display:none;align-items:flex-start;gap:var(--sp-3); border-radius:var(--radius-lg); padding:var(--sp-5); margin-top:var(--sp-4); font-size:var(--fs-body); } .cc-form-status.is-visible{display:flex;} /* Textfarben in den Statusboxen dunkler als der Rahmen, sonst reicht der Kontrast auf dem hellen Boxhintergrund nicht fuer AA. 6,18 und 6,35. */ .cc-form-status--success{background:#eef0e4;color:#525C39;border:var(--stroke) solid #6E7A4F;} .cc-form-status--error{background:#f6e9e2;color:#7E4530;border:var(--stroke) solid #8E5039;} /* .cc-field ... :focus{outline:none} weiter oben ist spezifischer als das globale :focus-visible in base.css und wuerde den Fokusrahmen auf allen Formularfeldern abschalten. Hier wird er gezielt zurueckgeholt. */ .cc-field input:focus-visible, .cc-field select:focus-visible, .cc-field textarea:focus-visible{ outline:var(--stroke) solid var(--acc-deep); outline-offset:3px; } /* ---------- Sektionsvarianten ---------- */ .section--sand{background:var(--sand);} .section--paper{background:var(--paper);} .section--dark{background:var(--acc-deep);color:rgba(255,255,255,.85);} .section--dark h2,.section--dark h3{color:#fff;} .section--dark p{color:rgba(255,255,255,.75);} .section--dark .kicker{color:var(--acc-soft);} .section--dark .kicker::before{background:var(--acc-soft);} /* Invertiert: Aubergine als Hintergrund, heller Text */ .section--accent{background:var(--acc);color:rgba(255,255,255,.85);} .section--accent h2,.section--accent h3{color:#fff;} .section--accent p{color:rgba(255,255,255,.85);} /* Eigener, hellerer Ton nur fuer den Kicker auf Aubergine. --acc-soft ergibt auf --acc nur 4,36 zu 1 und reisst damit die 4,5 aus dem Entwicklungsguide. Dieser Wert liegt bei 4,92 zu 1. Die dekorative Linie darunter darf weiter --acc-soft nutzen, fuer nicht textliche Elemente gilt 3 zu 1. */ .section--accent .kicker{color:#EFE7EA;} .section--accent .kicker::before{background:var(--acc-soft);} .section--accent a{color:#fff;} .section--accent .cc-quote--line{border-left-color:var(--acc-soft);} .section--accent .cc-quote--line blockquote, .section--accent .cc-quote--line blockquote p{color:#fff;} .section--accent .cc-quote--line::before{filter:brightness(0) invert(1);opacity:.55;} /* ---------- Scroll-Wegelinie (cc-scrollpath) ---------- Die Wegelinie liegt über der ganzen Dokumenthöhe, läuft exakt durch die Mitte der Wegpunkte und zeichnet sich beim Scrollen. Ein Wegpunkt füllt sich genau dann, wenn man auf der Mitte des zugehörigen Abschnitts steht. Das Ziel liegt über dem Footer, die Linie läuft danach bis exakt an das Seitenende weiter. Aufbau und Geometrie kommen aus motion.js. */ .cc-scrollpath{ display:none; position:absolute;top:0;left:6px;width:44px; z-index:5;pointer-events:none; } @media (min-width:64rem){ .cc-scrollpath{display:block;} } .cc-scrollpath svg{display:block;overflow:visible;} .cc-scrollpath .sp-path{ fill:none;stroke:var(--greige);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round; } .cc-scrollpath .wp-dot{fill:var(--leinen);stroke:var(--greige);stroke-width:1.5;transition:stroke .4s var(--ease);} .cc-scrollpath .wp-core{fill:transparent;transition:fill .4s var(--ease);} .cc-scrollpath .wp-flag{fill:none;stroke:var(--greige);stroke-width:1.5;stroke-linejoin:round;transition:stroke .4s var(--ease);} .cc-scrollpath .wp.is-hit .wp-dot{stroke:var(--acc);} .cc-scrollpath .wp.is-hit .wp-core{fill:var(--acc);} .cc-scrollpath .wp.is-hit .wp-flag{stroke:var(--acc);} /* Variante Fortschritt (mode="progress"): alle Wegpunkte und das Ziel stehen fest im Sichtfeld, nur die Seite bewegt sich. Der Weg selbst entsteht beim Scrollen und zieht sich, dem Scrollfortschritt entsprechend, durch die Punkte. */ .cc-scrollpath--progress{ position:fixed;top:0;left:6px;width:44px;height:100vh; } .cc-scrollpath--progress .sp-progress{ fill:none;stroke:var(--greige);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round; } /* Variante "mitwandernd": Linie über die ganze Dokumenthöhe */ .cc-scrollpath[mode="dokument"]{ position:absolute;top:0;left:6px;width:44px;height:auto; } .cc-scrollpath .sp-doc{ fill:none;stroke:var(--greige);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round; } /* Variante "serpentine": der Weg schlängelt sich hinter den Inhalten durch die ganze Seite. Er liegt hinter dem Inhalt (z-index 1, der Inhalt in .wrap liegt mit z-index 2 darüber) und über den Sektionshintergründen. Über dunklen Sektionen wird die Linie hell. */ .cc-scrollpath--serpentine{ position:absolute;top:0;left:0;width:100%;height:auto; z-index:1;pointer-events:none; } .cc-scrollpath--serpentine .serp-base{ fill:none;stroke:var(--line);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round; opacity:.28; /* dezente Grundspur, wird erst beim Scrollen präsent */ } .cc-scrollpath--serpentine .serp-fill{ fill:none;stroke:var(--acc);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round; } .cc-scrollpath--serpentine .serp-base--lite{stroke:rgba(255,255,255,.3);} .cc-scrollpath--serpentine .serp-fill--lite{stroke:#fff;} /* Wegpunkte bleiben zurückhaltend, bis der Weg sie erreicht */ .cc-scrollpath--serpentine .wp{opacity:.4;transition:opacity var(--dur-2) var(--ease);} .cc-scrollpath--serpentine .wp.is-hit{opacity:1;} .cc-scrollpath--serpentine .serp-branch{ fill:none;stroke:var(--acc);stroke-width:1.5;stroke-linecap:round; stroke-dasharray:2 5;opacity:.45; } /* ---------- CTA Block ---------- */ .cc-cta{ text-align:left; max-width:52rem; } .cc-cta h2{font-size:var(--fs-h2);} .cc-cta p{margin-top:var(--sp-4);color:var(--text-soft);} .cc-cta .cc-hero__cta{margin-top:var(--sp-6);} /* ---------- Coachingpfade (Preis-Karten) ---------- */ .cc-pathnum{ font-size:var(--fs-small);font-weight:500; letter-spacing:.14em;text-transform:uppercase; color:var(--acc);margin:0; } .cc-card .cc-pathsub{ margin-top:calc(-1 * var(--sp-2)); color:var(--text-mute);font-size:var(--fs-body); } .cc-price{ margin-top:auto;padding-top:var(--sp-3); font-size:clamp(2.9rem,1.9rem + 3.4vw,4.2rem);font-weight:700;color:var(--ink); line-height:1;letter-spacing:-.015em;white-space:nowrap; } .cc-price__note{font-size:var(--fs-body);font-weight:400;color:var(--text-mute);letter-spacing:0;white-space:normal;} /* Kleiner Steuerhinweis unter jedem Preis (§ 19 UStG), bewusst sehr dezent */ .cc-price__tax{font-size:.75rem;color:var(--text-mute);margin-top:var(--sp-2);max-width:38ch;line-height:1.4;font-weight:400;letter-spacing:0;} /* Feature-Pfad (die dreimonatige Begleitung) etwas hervorgehoben, in Staubblau statt Rosa (Farbwunsch Sabine) */ .cc-card--feature{background:var(--blau-soft);border-color:transparent;border-top:3px solid var(--blau-deep);} .cc-card--feature .cc-price{color:var(--acc-deep);} /* Bild in einer Formatkarte: gleiche Ecklinie, etwas Abstand zum Text */ .cc-card .cc-media{margin-bottom:var(--sp-2);} .cc-card .cc-media img{aspect-ratio:3/2;} /* ---------- Scroll-Wegelinie · Variante "baum" (mode="baum") ---------- Durchgehender Bodenbalken am unteren Rand. Links wächst beim Scrollen aus dem Samen ein Baum, der am Seitenende fest verwurzelt dasteht. Der Balken ist undurchsichtig und liegt VOR dem Inhalt (z-index 40, unter Header/Consent): Texte und Bilder verschwinden beim Scrollen sauber dahinter und tauchen wieder auf. Ab 64rem sichtbar, auf schmalen Screens ruhig ausgeblendet. Beim Footer sanft aus. */ .cc-scrollpath--baum{ position:fixed;left:0;right:0;bottom:0;top:auto; width:100%;height:auto;z-index:40;pointer-events:none; transition:opacity var(--dur-2) var(--ease); } /* Barrierefreiheit: sobald ein bedienbares Element in einem Abschnitt den Fokus hat (Tastatur oder Maus), hebt sich dieser Abschnitt über das Bodenband, damit der Fokusrahmen nie hinter dem Band verschwindet. */ main > section:focus-within > .wrap{z-index:45;} /* Der Griff oben greift nur fuer diese eine Selektorkette. Sobald irgendwo auf der Seite ein Element den Tastaturfokus hat, wird das Band deshalb generell ausgeblendet. Sicherer als jede Ausnahmeregel. */ body:has(:focus-visible) .cc-scrollpath--baum{opacity:0;} .cc-scrollpath--baum svg{width:100%;height:auto;display:block;} .cc-scrollpath--baum .baum-bar{fill:var(--sand);opacity:1;} .cc-scrollpath--baum .baum-barline{stroke:var(--line);stroke-width:1.5;} .cc-scrollpath--baum .baum-mound{fill:var(--greige);opacity:.5;} .cc-scrollpath--baum .baum-seed{fill:var(--acc-deep);} .cc-scrollpath--baum .baum-branch{fill:none;stroke:var(--acc-deep);stroke-linecap:round;stroke-linejoin:round;} .cc-scrollpath--baum .baum-leaf{fill:var(--acc);} /* ---------- Kennenlernen-Fenster · rechts, auf der Baumlinie ---------- Fährt beim Scrollen von unten ein und sitzt rechts, vertikal mittig auf der Bodenlinie des Baums (bottom passend zur Balkenhöhe). Bewusst klein. Blendet aus, sobald der Footer ins Bild kommt, damit dort nichts verdeckt wird. */ .cc-floatcta{ /* bottom haengt an BAR_H in motion.js: die Pille sitzt mittig auf der Oberkante des Bodenbalkens. BAR_H 56 minus halbe Pillenhoehe rund 24. */ position:fixed;right:26px;bottom:32px;z-index:55; display:inline-flex;align-items:center;gap:.55rem; background:var(--acc-deep);color:#fff; font-family:var(--font);font-size:1rem;font-weight:600;letter-spacing:.005em; padding:.68rem 1.4rem;border-radius:999px; text-decoration:none;white-space:nowrap; box-shadow:0 10px 30px rgba(124,90,103,.45); transform:translateY(26px);opacity:0;pointer-events:none; transition:transform var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease),background var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease); } /* Kein Dauerpuls. Eine endlos blinkende Fläche ist grenzwertig zu WCAG 2.2.2 und widerspricht der eigenen Regel "ruhig, dezent". Das Einfahren allein reicht als Signal. */ .cc-floatcta.is-in{transform:translateY(0);opacity:1;pointer-events:auto;} .cc-floatcta:hover{background:var(--acc);color:#fff;box-shadow:0 18px 46px rgba(124,90,103,.55);} .cc-floatcta .cc-arw{width:1.5em;height:.5em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-2) var(--ease);} .cc-floatcta:hover .cc-arw{transform:translateX(3px);} @media (max-width:64rem){ .cc-floatcta{display:none;} } @media (prefers-reduced-motion:reduce){ .cc-floatcta{transition:opacity var(--dur-1) var(--ease);} } /* ---------- Klickbare Angebots-Kachel (ganze Kachel = Link) ---------- Barrierefrei über das Stretched-Link-Muster: genau ein Link je Kachel (der vorhandene Ghost-Button) legt sich unsichtbar über die ganze Kachel. Die Kachel bekommt einen Hover- und Fokuszustand. Der sichtbare Button bleibt erhalten und funktioniert. */ .cc-card--link{position:relative;cursor:pointer; transition:border-color var(--dur-1) var(--ease),transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);} .cc-card--link .cc-btn::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--radius-lg);} .cc-card--link:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(29,29,27,.12);} .cc-card--link:not(.cc-card--feature):hover{border-color:var(--acc);} .cc-card--link:focus-within{outline:2px solid var(--acc-deep);outline-offset:2px;} /* Ghost-Link in der Kachel reagiert mit, wenn die ganze Kachel gehovert wird */ .cc-card--link:hover .cc-btn--ghost{color:var(--acc);} .cc-card--link:hover .cc-btn--ghost .cc-ln{transform:scaleX(.614);} .cc-card--link:hover .cc-btn--ghost .cc-wp{transform:translateX(-4px);} @media (prefers-reduced-motion:reduce){ .cc-card--link{transition:none;} .cc-card--link:hover{transform:none;} } /* ---------- Angebotsboxen (horizontal, gestapelt) ---------- EINHEITLICHER Look auf Start-, Begleitungs- und Landing-Seiten: kompakt, länglich, Blau-Spektrum, dezenter Rahmen. Der Preis ist so dimensioniert, dass er in jeder Box und bei jeder Breite bleibt, nichts ragt heraus (weder "Euro" noch sonst etwas). */ .cc-offers{display:flex;flex-direction:column;gap:var(--sp-6);max-width:66rem;} .cc-offer{ position:relative;cursor:pointer; display:grid;grid-template-columns:1fr;gap:var(--sp-5); background:var(--paper);border:var(--stroke) solid var(--line);border-radius:var(--radius-lg); padding:clamp(1.4rem,2.4vw,2rem); max-width:66rem; transition:border-color var(--dur-1) var(--ease),transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease); } @media (min-width:52rem){ /* 1.5fr statt 1.7fr: die rechte Spalte braucht Platz fuer Preis, Steuer hinweis und einen einzeiligen Knopf wie "Kostenfreies Kennenlernen". */ .cc-offer{grid-template-columns:1.5fr 1fr;align-items:center;gap:var(--sp-6);} .cc-offer__aside{border-left:var(--stroke) solid rgba(64,85,95,.22);padding-left:var(--sp-6);} /* Ab hier ist der Platz rechnerisch da. Der Umbruch wird trotzdem hart abgeschaltet, damit der Pfeil nicht doch in die zweite Zeile rutscht, wenn die Schrift minimal breiter rendert. Unter 52rem steht die Box einspaltig, dort darf der Text normal umbrechen. */ .cc-offer__aside .cc-btn{white-space:nowrap;} } .cc-offer__body{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;} .cc-offer__body>*{max-width:48ch;margin:0;} .cc-offer .cc-pathnum{margin:0;} .cc-offer h3{font-size:var(--fs-h3);margin:var(--sp-1) 0 0;line-height:1.15;} .cc-offer .cc-pathsub{color:var(--text-mute);margin:0 0 var(--sp-2) 0;} .cc-offer p{color:var(--text-soft);} .cc-offer__aside{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);min-width:0;} .cc-offer__aside .cc-price{margin:0;padding:0;white-space:nowrap;color:var(--ink);font-weight:700;font-size:clamp(1.9rem,1.4rem + 1.4vw,2.6rem);max-width:100%;} .cc-offer__aside .cc-btn{margin-top:var(--sp-3);} .cc-offer .cc-btn::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--radius-lg);} .cc-offer:hover{border-color:var(--blau);transform:translateY(-3px);box-shadow:0 14px 34px rgba(64,85,95,.16);} .cc-offer:focus-within{outline:2px solid var(--blau-deep);outline-offset:2px;} @media (prefers-reduced-motion:reduce){ .cc-offer{transition:none;} .cc-offer:hover{transform:none;} } /* ---------- Blautöne für die Angebotsboxen (Start + Begleitung) ---------- Drei abgestufte Blau-Hintergründe, dunkler Text bleibt gut lesbar. Dezenter Rahmen im Blau-Grau. Buttons je Box in einem kräftigeren Blauton. */ .cc-box--blau1{background:#EAF0F3;border-color:rgba(64,85,95,.20);} .cc-box--blau2{background:#D8E4EA;border-color:rgba(64,85,95,.22);} .cc-box--blau3{background:#C4D5DE;border-color:rgba(64,85,95,.26);} /* Auf #C4D5DE lagen Fliesstext (3,73), Kicker (3,96), Unterzeile und Steuerhinweis (je 4,19) unter AA. Statt den Blauton aufzuhellen wird der Text angehoben, damit die dreistufige Abstufung der Preisboxen erhalten bleibt. Neu: Kicker 6,36, alle uebrigen Texte 9,52. */ .cc-box--blau3 p{color:var(--text);} .cc-box--blau3 .cc-pathnum{color:var(--acc-deep);} .cc-box--blau3 .cc-pathsub, .cc-box--blau3 .cc-price__tax{color:var(--text);} .cc-box--blau1 .cc-offer__aside, .cc-box--blau2 .cc-offer__aside, .cc-box--blau3 .cc-offer__aside{border-left-color:rgba(64,85,95,.28);} .cc-box--blau1 .cc-btn--primary{background:#5F7A88;} .cc-box--blau1 .cc-btn--primary:hover{background:#516a76;} .cc-box--blau2 .cc-btn--primary{background:#4E6B76;} .cc-box--blau2 .cc-btn--primary:hover{background:#405965;} .cc-box--blau3 .cc-btn--primary{background:#40555F;} .cc-box--blau3 .cc-btn--primary:hover{background:#33454e;} /* Hervorgehobene Box auf den Landing Pages (Auf einen Blick) im Blauton */ .cc-offer--feature{background:#D8E4EA;border-color:rgba(64,85,95,.22);} .cc-offer--feature .cc-offer__aside{border-left-color:rgba(64,85,95,.28);} .cc-offer--feature .cc-btn--primary{background:#4E6B76;} .cc-offer--feature .cc-btn--primary:hover{background:#405965;} /* (Der frühere Sonderstil für die Startseite ist jetzt der Standard oben, alle Angebotsboxen sehen dadurch überall gleich aus.) */ /* ---------- Kontaktformular als Wizard ---------- */ .k-formwrap{max-width:62rem;margin-inline:auto;} .cc-wizard__steps{list-style:none;display:flex;gap:var(--sp-6);padding:0;margin:0 0 var(--sp-7);flex-wrap:wrap;} .cc-wizard__steps li{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-small);color:var(--text-mute);letter-spacing:.02em;} .cc-wizard__steps li span{ width:1.9rem;height:1.9rem;border-radius:50%;border:var(--stroke) solid var(--line); display:inline-flex;align-items:center;justify-content:center;font-weight:600;flex:none; transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease); } .cc-wizard__steps li.is-active{color:var(--acc-deep);} .cc-wizard__steps li.is-active span{background:var(--acc-deep);border-color:var(--acc-deep);color:#fff;} .cc-wizard__steps li.is-done span{background:var(--acc);border-color:var(--acc);color:#fff;} .cc-wizard__panel{border:0;padding:0;margin:0;min-inline-size:0;display:none;} .cc-wizard__panel.is-active{display:block;} .cc-fieldgrid{display:grid;grid-template-columns:1fr;column-gap:var(--sp-6);} @media (min-width:40rem){ .cc-fieldgrid{grid-template-columns:1fr 1fr;} .cc-field--full{grid-column:1 / -1;} } .cc-wizard__nav{display:flex;gap:var(--sp-5);align-items:center;flex-wrap:wrap;margin-top:var(--sp-3);} @media (min-width:40rem){ .cc-wizard__nav{justify-content:flex-end;} .cc-wizard__nav .cc-btn--ghost{margin-right:auto;} } /* ---------- Ohne JavaScript (Progressive Enhancement) ---------- Header und Footer sind Web Components und ohne JS leer; die