/* ==========================================================================
   Conversion Optimierung header (17.10.2026, rebuilt same day from the
   measured DOM of reevo.ai/apps/mobile, values in the session scratch
   ref-values.md). Text left, square photo right with the notification stack
   bottom left inside the photo. Reevo breakpoints: 600 / 840 / 1140 / 1380.
   Fluid sizes interpolate like Reevo's clamp() between 400 and 1380 px
   viewport, written in px because this site's rem is fluid.
   Site rules: square corners, headline in the site serif (Charter 400),
   site eyebrow and buttons. Selectors start with `body ` because pages carry
   inline <style> copies.
   ========================================================================== */

/* Fixed site header (56px) sits on top of the section, so the top padding is
   56px + Reevo's py (40 / 48 / 56). */
body .co-header { padding: calc(56px + 40px) 0 40px; background: #fff; overflow-x: clip; }

body .co-header_grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 40px;
  align-items: start;
}

/* Left column */
body .co-header_eyebrow { margin: 0 0 16px; }
body .co-header_h1 {
  margin: 0;
  font-family: var(--_typography---font-styles--heading);
  font-size: clamp(34px, calc(34px + 20 * (100vw - 400px) / 980), 54px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: #121212;
  text-wrap: balance;
}
body .co-header_accent { color: #e36fb6; }
body .co-header_lead {
  margin: 12px 0 0;
  font-size: clamp(18px, calc(18px + 2 * (100vw - 400px) / 980), 20px);
  line-height: 1.35;
  color: #121212;
}
body .co-header_lead strong { font-weight: 600; }

/* Buttons: equal widths, max 500px, stacked below 600. Flex instead of
   Reevo's grid so a German label never wraps: a button keeps at least its
   own width and the pair breaks onto two rows if the column is too narrow. */
body .co-header_buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  max-width: 500px;
  margin-top: 24px;
}
body .co-header_buttons > * { flex: 1 0 100%; min-width: max-content; white-space: nowrap; }
body .co-header_buttons .lt_btn { margin: 0; height: 46px; justify-content: space-between; }

/* Secondary button: the existing .button.is-secondary (1px dark border,
   transparent), sized like .lt_btn */
body .co-header_btn-secondary {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 20px;
  border: 1px solid #3c3c3c;
  border-radius: 0;
  background: transparent;
  color: #111;
  font-family: var(--_typography---font-styles--body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
}
body .co-header_btn-secondary:hover,
body .co-header_btn-secondary:focus-visible { background: rgba(60, 60, 60, .1); }

/* Right column: square photo, notifications inside it */
body .co-header_visual { position: relative; }
body .co-header_image { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #ececec; }
body .co-header_image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

body .co-header_cards {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  max-width: 400px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  pointer-events: none;
}
body .co-header_card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 12px;
  background: #fff;
  border-radius: 0;
  box-shadow: 11px 19px 49px rgba(0, 0, 0, .1), 44px 77px 89px rgba(0, 0, 0, .09), 99px 174px 120px rgba(0, 0, 0, .05), 176px 308px 142px rgba(0, 0, 0, .01);
}
/* Older notifications fade like Reevo's stack (.45 / .7 / 1) */
body .co-header_card.is-faded-2 { opacity: .45; }
body .co-header_card.is-faded-1 { opacity: .7; }

body .co-header_card-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}
body .co-header_card-icon svg { width: 16px; height: 16px; }
body .co-header_card-icon.is-pink  { background: #ffe2f4; color: #b64189; }
body .co-header_card-icon.is-green { background: #def5e3; color: #2f8a45; }
body .co-header_card-icon.is-blue  { background: #d8efff; color: #2b5fc8; }

body .co-header_card-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
body .co-header_card-title,
body .co-header_card-line {
  font-size: clamp(12px, calc(12px + 2 * (100vw - 400px) / 980), 14px);
  line-height: 1.15;
}
body .co-header_card-title { font-weight: 500; color: #121212; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .co-header_card-line {
  color: #3c3c3c;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

@media (min-width: 720px) {
  body .co-header_buttons > * { flex-basis: 0; }
}

/* md: 12 columns, text 5, photo 7 */
@media (min-width: 820px) {
  body .co-header { padding: calc(56px + 48px) 0 48px; }
  body .co-header_grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  body .co-header_content { grid-column: 1 / span 5; }
  body .co-header_visual { grid-column: 6 / span 7; }
  body .co-header_eyebrow { margin-bottom: 20px; }
  body .co-header_lead { margin-top: 16px; }
  body .co-header_buttons { margin-top: 32px; padding-top: 8px; }
  body .co-header_cards { left: 20px; right: 20px; bottom: 20px; }
  body .co-header_card { gap: 12px; padding: 14px; }
  body .co-header_card-icon { width: 32px; height: 32px; }
  body .co-header_card-line { display: block; margin-top: 2px; -webkit-line-clamp: unset; }
}

/* lg: 24 columns, text 9, photo 14 from column 11 */
@media (min-width: 1200px) {
  body .co-header_grid { grid-template-columns: repeat(24, minmax(0, 1fr)); }
  body .co-header_content { grid-column: 1 / span 9; }
  body .co-header_visual { grid-column: 11 / span 14; }
}

/* xl: text 8 from column 2 */
@media (min-width: 1200px) {
  body .co-header { padding: calc(56px + 56px) 0 56px; }
  body .co-header_content { grid-column: 2 / span 8; }
  body .co-header_buttons { margin-top: 40px; }
  /* above 1440 the site's container grows with its fluid rem; text follows
     so the proportions hold (Reevo instead caps its container at 1400) */
  body .co-header_h1 { font-size: max(54px, 3.375rem); }
  body .co-header_lead { font-size: max(20px, 1.25rem); }
}

/* ---- Christian, 17.10.2026: "nimm exakt meine styles für schriften", cards fully visible at the end,
   intro animation, no drop shadow on the image. Overrides the Reevo values above. ---- */
/* Headline: style-guide H2 (56 / 44 / 36 / 30), lead: body text 17/1.6 */
body .co-header_h1 { font-size: 56px; line-height: 1.08; letter-spacing: -0.02em; color: #111; }
body .co-header_lead { margin-top: 1.5rem; font-size: 17px; line-height: 1.6; color: #111; }
@media (max-width: 991px) { body .co-header_h1 { font-size: 44px; } }
@media (max-width: 719px) { body .co-header_h1 { font-size: 36px; } }
@media (max-width: 479px) { body .co-header_h1 { font-size: 30px; } }
@media (min-width: 1200px) { body .co-header_h1 { font-size: 56px; } body .co-header_lead { font-size: 17px; } }
/* Buttons: the site's own sizes, side by side at their natural width */
body .co-header_buttons { max-width: none; margin-top: 2.5rem; padding-top: 0; gap: .75rem; }
body .co-header_buttons > * { flex: 0 0 auto; min-width: 0; }
body .co-header_buttons .lt_btn { height: 45px; justify-content: flex-start; }
body .co-header_btn-secondary { height: 45px; padding: 0 20px; border-color: #111; font-size: 16px; font-weight: 500; letter-spacing: normal; }
@media (min-width: 820px) { body .co-header_buttons { margin-top: 2.5rem; padding-top: 0; } }
/* Notification cards: site small text, all fully opaque, no shadow */
body .co-header_card { box-shadow: none; opacity: 1; border: 1px solid #ececec; }
body .co-header_card.is-faded-1, body .co-header_card.is-faded-2 { opacity: 1; }
body .co-header_card-title, body .co-header_card-line { font-size: 15px; line-height: 1.4; }
body .co-header_card-title { color: #111; }
body .co-header_card-line { color: #555; }
@media (max-width: 479px) { body .co-header_card-title, body .co-header_card-line { font-size: 13px; } }
/* Intro: text rises in one block after another, the photo opens with the site's wipe, then the three
   notifications arrive one by one (motion tokens from the style guide, "Bewegung") */
@media (prefers-reduced-motion: no-preference) {
  body .co-header_content > * { animation: co-rise 1.2s var(--ease-soft, cubic-bezier(.14,.41,.257,.995)) both; }
  body .co-header_content > :nth-child(1) { animation-delay: .1s; }
  body .co-header_content > :nth-child(2) { animation-delay: .22s; }
  body .co-header_content > :nth-child(3) { animation-delay: .34s; }
  body .co-header_content > :nth-child(4) { animation-delay: .46s; }
  body .co-header_image { animation: co-wipe 1.4s var(--ease-wipe, cubic-bezier(.77,0,.175,1)) .2s both; }
  body .co-header_image img { animation: co-settle 1.4s cubic-bezier(.25,.46,.45,.94) .2s both; }
  body .co-header_card { animation: co-card .8s var(--ease-out, cubic-bezier(.165,.84,.44,1)) both; }
  body .co-header_card:nth-child(1) { animation-delay: 1.3s; }
  body .co-header_card:nth-child(2) { animation-delay: 1.9s; }
  body .co-header_card:nth-child(3) { animation-delay: 2.5s; }
  @keyframes co-rise { from { opacity: 0; transform: translateY(1.5rem); } }
  @keyframes co-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
  @keyframes co-settle { from { transform: scale(1.2); } }
  @keyframes co-card { from { opacity: 0; transform: translateY(1rem) scale(.96); } }
}

/* Christian, 17.10.2026: "links muss natürlich bündig mit container. bild nicht animieren nur die notifications drüber" */
@media (min-width: 1200px) { body .co-header_content { grid-column: 1 / span 9; } }
body .co-header_image, body .co-header_image img { animation: none; clip-path: none; transform: none; }
/* accent in the brand orange like every headline accent, not pink (18.10.2026, Christian: "nicht pink der text, ich hab doch immer orange") */
body .co-header_accent { color: #f26b1d; background-image: linear-gradient(153deg, #c9510c, #f26b1d); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* headline much smaller (19.10.2026, Christian: "bei dem layout ist headline viel zu gross") */
body .co-header_h1 { font-size: 42px; line-height: 1.1; }
@media (min-width: 1200px) { body .co-header_h1 { font-size: 42px; } }
@media (max-width: 991px) { body .co-header_h1 { font-size: 36px; } }
@media (max-width: 719px) { body .co-header_h1 { font-size: 32px; } }
@media (max-width: 479px) { body .co-header_h1 { font-size: 28px; } }
/* Paper comments 20.10.2026: 1920 "mehr spacing zwischen links und rechts" (1440 "hier ist spacing gut"); 1024 "zu wenig spacing, und headline
   zu gross. und bildbereich zu gross"; 834 "bild unter text, also umbrechen"; 744 "maxwidth auf paragraph" */
@media (min-width: 1600px) { body .co-header_content { grid-column: 1 / span 9; } body .co-header_visual { grid-column: 12 / span 13; } }
@media (min-width: 992px) and (max-width: 1199px) { body .co-header_content { grid-column: 1 / span 5; } body .co-header_visual { grid-column: 7 / span 6; } body .co-header_h1 { font-size: 34px; } }
@media (min-width: 820px) and (max-width: 991px) { body .co-header_content, body .co-header_visual { grid-column: 1 / -1; } body .co-header_visual { margin-top: 3rem; } }
@media (max-width: 991px) { body .co-header_lead { max-width: 30rem; } }
/* 21.10.2026, Christian at ~940 (Shop Texte): "hier wird headline zu klein, mach hier grösser" - one column from 991 down,
   so the headline gets the room: 56 px instead of ~35 px at 720-991 */
@media (min-width: 720px) and (max-width: 991px) { html body:not(#_):not(#__) .co-header_h1 { font-size: 56px; } }