/* =============================================================
   sunny.cy - gemeinsames Stylesheet fuer alle Seiten
   Reihenfolge: Tokens, Basis, Bausteine, Startseite,
   Unterseite Solutions, Motion, Responsive
   ============================================================= */
/* ============================================================
   SUNNY.CY — Design Tokens
   ============================================================ */
:root{
  /* Markenfarben direkt aus assets/logo.svg uebernommen */
  --navy:        #061E36;   /* Flaechen; deckt sich mit dem Navy der Vorlage */
  --navy-panel:  #0C2A46;
  --orange:      #FF9900;   /* Logo '.cy' und Sonnenkern */
  --orange-hi:   #FFC247;   /* heller Verlaufsstopp der Sonne */
  --orange-dp:   #E08600;
  --ink:         #061B3A;   /* Wortmarke */
  --body:        #5C6B7A;
  --body-soft:   #8494A3;
  --bg:          #F5F5F2;
  --card:        #FFFFFF;
  --cream:       #FDF7EC;
  --line:        #E8E8E3;
  --line-soft:   #F0F0EB;

  --shell:  2560px;  /* volle Breite bis 2560px; auf 'none' setzen fuer unbegrenzt */
  --gut:    4rem;   /* Aussenabstand Header / Hero / Textbloecke */
  --cgut:   1.75rem;   /* Aussenabstand der grossen Karten */
  --r-lg:   2rem;
  --r-md:   1.125rem;
  --r-sm:   0.625rem;

  --shadow-card: 0 1.5rem 3.75rem -1.75rem rgba(6,30,54,.26), 0 2px 0.5rem rgba(6,30,54,.04);
  --shadow-btn:  0 0.625rem 1.5rem -0.625rem rgba(255,153,0,.6);
}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
/* Proportionale Skalierung: bis 1440px unveraendert (16px Basis), darueber
   waechst die komplette Seite mit der Viewport-Breite bis Faktor 1,35.
   Weil saemtliche Masse in rem stehen, skalieren Typo, Abstaende, Radien und
   die Ueberlappungen der Karten im selben Verhaeltnis mit. */
html{ font-size:clamp(1rem, 1.1111vw, 1.35rem);
      -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
/* Eigene display-Regeln schlagen das display:none des Browsers fuer [hidden].
   Ohne diese Zeile bleiben ausgeblendete Bloecke sichtbar. */
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
button,input,select{ font:inherit; color:inherit; }
h1,h2,h3,h4,p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

.shell{ max-width:var(--shell); margin:0 auto; position:relative; }
.wrap{ padding-inline:var(--gut); }
.cwrap{ padding-inline:var(--cgut); }

.ico{ width:1.375rem; height:1.375rem; flex:none; stroke:currentColor; fill:none;
      stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ico--fill{ fill:currentColor; stroke:none; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; border-radius:0.375rem; }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:0.875rem;
  border:0; cursor:pointer; border-radius:62.4375rem;
  font-weight:600; letter-spacing:-.01em; white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--sun{
  background:linear-gradient(180deg,var(--orange-hi),var(--orange));
  color:#3A2200; padding:0.6875rem 0.75rem 0.6875rem 1.625rem; font-size:0.9375rem;
  box-shadow:var(--shadow-btn);
}
.btn--sun:hover{ box-shadow:0 1rem 1.875rem -0.75rem rgba(255,153,0,.7); }
.btn--sun .pip{
  width:1.75rem; height:1.75rem; border-radius:50%;
  background:rgba(255,255,255,.34);
  display:grid; place-items:center;
}
.btn--sun .pip .ico{ width:0.9375rem; height:0.9375rem; stroke-width:2.1; }

.btn--lg{ padding:0.8125rem 0.875rem 0.8125rem 1.875rem; font-size:1rem; }
.btn--lg .pip{ width:2rem; height:2rem; }

.btn--ghost{
  background:#fff; color:var(--ink);
  padding:0.8125rem 1.625rem 0.8125rem 1.875rem; font-size:1rem;
  box-shadow:0 0.75rem 1.875rem -1.125rem rgba(6,30,54,.5);
}
.btn--ghost .pip{
  width:1.875rem; height:1.875rem; border-radius:50%;
  background:rgba(255,153,0,.14); color:var(--orange);
  display:grid; place-items:center;
}
.btn--ghost .pip .ico{ width:0.75rem; height:0.75rem; }

.btn--block{ width:100%; justify-content:center; gap:0; position:relative;
  padding:1.0625rem 1.625rem; font-size:1rem; }
.btn--block .pip{ position:absolute; right:0.75rem; }

/* ============================================================
   Pill / Eyebrow
   ============================================================ */
.pill{
  display:inline-flex; align-items:center; gap:0.5625rem;
  background:#fff; border-radius:62.4375rem;
  padding:0.5625rem 1.25rem 0.5625rem 1rem;
  font-size:0.8125rem; font-weight:600; color:var(--ink);
  box-shadow:0 0.375rem 1.125rem -0.75rem rgba(6,30,54,.45);
}
.pill .ico{ width:0.9375rem; height:0.9375rem; color:var(--orange); }
.pill--caps{ font-size:0.6875rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--body); font-weight:700; padding:0.5rem 1.125rem 0.5rem 0.875rem;
  background:#fff; border:1px solid var(--line); box-shadow:none; }
.pill--caps .ico{ width:0.8125rem; height:0.8125rem; }

.eyebrow{
  font-size:0.6875rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
}
.accent{ color:var(--orange); }

/* ============================================================
   Header
   ============================================================ */
.site-head{
  position:absolute; inset:0 0 auto 0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; padding-block:1.5rem;
}
/* Proportionen aus assets/logo.svg: Sonnendurchmesser = 2x Schriftgrad der
   Wortmarke, Sonnenmittelpunkt sitzt auf dem Anfang des 's'. Der Schriftzug
   bleibt echter Text - damit greift die Seitenschrift und er skaliert, laesst
   sich markieren und wird von Screenreadern gelesen. */
.brand{ display:inline-flex; align-items:center; }
.brand__type{ position:relative; display:block; padding-left:1.6875rem; }
.brand__mark{
  position:absolute; left:0; top:0.84375rem; transform:translateY(-50%);
  width:3.375rem; height:3.375rem; flex:none; pointer-events:none;
}
.brand__word{
  display:block; position:relative;
  font-size:1.6875rem; font-weight:800; letter-spacing:-.038em;
  line-height:1; color:var(--ink); white-space:nowrap;
}
.brand__cy{ color:var(--orange); }
.brand__sub{
  display:block;
  font-size:0.4375rem; font-weight:600; letter-spacing:.44em;
  text-transform:uppercase; color:var(--body);
  margin-top:0.4375rem;
}
.brand--light .brand__word{ color:#fff; }
.brand--light .brand__sub{ color:rgba(255,255,255,.55); }

/* Der Abstand schrumpft mit: griechische und russische Menuepunkte sind
   deutlich laenger als die englischen. nowrap verhindert, dass ein Punkt
   in sich umbricht. */
.nav{ display:flex; align-items:center; gap:clamp(1.05rem, 1.9vw, 2.375rem); }
.nav a{ white-space:nowrap; }
.nav a{
  font-size:0.9375rem; font-weight:500; color:var(--ink);
  position:relative; padding-block:0.375rem; transition:color .18s ease;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--orange); border-radius:2px; transition:right .25s ease;
}
.nav a:hover{ color:var(--orange-dp); }
.nav a.is-active::after{ right:0; }
.nav a:hover::after{ right:0; }

.head-actions{ display:flex; align-items:center; gap:1.1rem; }
.head-login{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.85rem; font-weight:600; color:var(--ink); white-space:nowrap;
  transition:color .18s ease;
}
.head-login .ico{ width:1.05rem; height:1.05rem; color:var(--body); transition:color .18s ease; }
.head-login:hover, .head-login:hover .ico{ color:var(--orange-dp); }
.brand--light + .app__label ~ .head-actions .head-login{ color:#fff; }

.nav-toggle{ display:none; background:none; border:0; padding:0.5rem; cursor:pointer; color:var(--ink); }

/* ============================================================
   Hero
   ============================================================ */
.hero{ position:relative; overflow:hidden; isolation:isolate; }
.hero__media{
  position:absolute; inset:0; z-index:-2;
  background-image:var(--img-hero, url("https://cdn.sunny.cy/assets/img/hero-media.webp")),
    radial-gradient(120% 90% at 78% 12%, #BFE3F2 0%, #8FCBE6 26%, #4E9CC4 48%, #2E7BA6 62%, #1D5F87 100%);
  background-size:cover; background-position:64% 36%; background-repeat:no-repeat;
}
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(103deg,
      rgba(255,251,243,.97) 0%,
      rgba(255,247,233,.94) 26%,
      rgba(255,240,216,.72) 42%,
      rgba(255,232,196,.26) 56%,
      rgba(255,226,180,0) 68%),
    linear-gradient(180deg, rgba(255,247,235,.55) 0%, rgba(255,247,235,0) 22%);
}
.hero__inner{ padding-top:11rem; padding-bottom:3rem;
  min-height:clamp(53rem, 55vw, 62rem);
  display:flex; flex-direction:column; }
.hero__copy{ max-width:40rem; }
.hero h1{
  margin-top:1.375rem;
  font-size:clamp(2.75rem,5.1vw,4.5625rem); font-weight:800;
  line-height:1.02; letter-spacing:-.035em; color:var(--ink);
}
.hero__lede{
  margin-top:1.5rem; font-size:1.1875rem; line-height:1.5;
  color:#3F5468; max-width:26.25rem;
}
.hero__cta{ margin-top:2.125rem; display:flex; flex-wrap:wrap; gap:0.875rem; }

/* "Mehr Sonnenschein." braucht bei 73 px rund 790 px, die Textspalte hat 640.
   Deutsch bekommt deshalb etwas mehr Spaltenbreite und einen leicht kleineren
   Schriftgrad - 68 statt 73 px, das sieht niemand, weil ein Besucher immer nur
   eine Sprache vor sich hat. */
html[lang="de"] .hero h1{ font-size:clamp(1.85rem, 4.72vw, 4.25rem); }
html[lang="de"] .hero__copy{ max-width:48rem; }

.hero__usps{
  margin-top:auto; padding-top:4rem;
  display:flex; gap:3.25rem;
}
.usp{ display:flex; flex-direction:column; align-items:center; gap:0.625rem;
  width:7rem; text-align:center; }
.usp .ico{ width:1.8125rem; height:1.8125rem; color:var(--ink); stroke-width:1.35; }
.usp span{ font-size:0.8125rem; font-weight:600; line-height:1.32; color:var(--ink); }

/* ============================================================
   Trust band (navy)
   ============================================================ */
.trust{ background:var(--navy); color:#fff; position:relative; }
.trust__inner{
  display:grid; grid-template-columns:minmax(17.5rem,34%) 1fr;
  align-items:stretch; gap:0;
}
.trust__lede{ padding:4.5rem 3rem 23.4375rem 0; }
.trust__lede h2{
  margin-top:1.25rem; font-size:2.0625rem; font-weight:700;
  line-height:1.26; letter-spacing:-.028em; max-width:23.25rem;
}
.trust__grid{
  background:var(--navy-panel);
  border-top-left-radius:2.75rem;
  padding:4.25rem 0 23.4375rem 3.5rem;
  margin-right:calc(var(--gut) * -1);
  padding-right:var(--gut);
  display:grid; grid-template-columns:repeat(4,1fr); gap:2.125rem;
  position:relative;
}
.trust__grid::before{
  content:""; position:absolute; left:0; top:4.25rem; bottom:23.4375rem; width:1px;
  background:rgba(255,255,255,.14);
}
.tfeat .ico{ width:1.6875rem; height:1.6875rem; color:#fff; stroke-width:1.4; }
.tfeat h3{ margin-top:1rem; font-size:0.9375rem; font-weight:700; letter-spacing:-.01em; }
.tfeat p{ margin-top:0.4375rem; font-size:0.8125rem; line-height:1.5; color:rgba(255,255,255,.6); }

/* ============================================================
   Calculator
   ============================================================ */
/* kein eigener Hintergrund: der negative Margin der Karte darf durchschlagen */
.calc-zone{ background:transparent; }
.calc{
  background:var(--card); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  margin-top:-21.25rem; position:relative; z-index:5;
  display:grid; grid-template-columns:1.08fr 1.1fr 0.98fr;
  overflow:hidden;
}
.calc__form{ padding:3.875rem 2.5rem 4.5rem; }
.calc__form h2{ font-size:1.625rem; font-weight:700; letter-spacing:-.03em; }
.calc__form > p{ margin-top:0.4375rem; font-size:0.875rem; color:var(--body); }

.field{ margin-top:2rem; }
.field__label{ font-size:0.78125rem; font-weight:600; color:var(--body); }
.field__row{ margin-top:0.6875rem; display:flex; align-items:center; gap:1rem; }

.seg{ margin-top:0.6875rem; display:inline-flex; gap:0.5rem; }
.seg button{
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.6875rem 1.375rem; border-radius:var(--r-sm);
  background:#fff; border:1px solid var(--line);
  font-size:0.875rem; font-weight:600; color:var(--body); cursor:pointer;
  transition:all .18s ease;
}
.seg button .ico{ width:1rem; height:1rem; }
.seg button:hover{ border-color:#DCD9CF; }
.seg button[aria-pressed="true"]{
  background:#FFF8EA; border-color:var(--orange); color:var(--ink);
}
.seg button[aria-pressed="true"] .ico{ color:var(--orange); }

input[type=range]{
  -webkit-appearance:none; appearance:none;
  flex:1; height:0.375rem; border-radius:6.1875rem; background:transparent; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:0.375rem; border-radius:6.1875rem;
  background:linear-gradient(to right,var(--orange) 0 var(--pct,40%), #EDEDE7 var(--pct,40%) 100%);
}
input[type=range]::-moz-range-track{ height:0.375rem; border-radius:6.1875rem; background:#EDEDE7; }
input[type=range]::-moz-range-progress{ height:0.375rem; border-radius:6.1875rem; background:var(--orange); }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:1.0625rem; height:1.0625rem; border-radius:50%;
  background:#fff; border:0.25rem solid var(--orange); margin-top:-0.34375rem;
  box-shadow:0 2px 0.375rem rgba(6,30,54,.22); transition:transform .15s ease;
}
input[type=range]::-moz-range-thumb{
  width:1.0625rem; height:1.0625rem; border-radius:50%; border:0.25rem solid var(--orange);
  background:#fff; box-shadow:0 2px 0.375rem rgba(6,30,54,.22);
}
input[type=range]:hover::-webkit-slider-thumb{ transform:scale(1.12); }

.readout{
  min-width:5.375rem; display:inline-flex; align-items:center; justify-content:center; gap:0.3125rem;
  padding:0.5625rem 0.75rem; border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:0.875rem; font-weight:600; background:#fff;
}
.readout__unit{ font-size:0.8125rem; font-weight:600; color:var(--body); margin-left:2px; }
.unit-out{ font-size:0.875rem; font-weight:600; color:var(--ink); min-width:2.125rem; }

/* result card */
.calc__result{ padding:3.875rem 2.125rem 4.5rem 0.625rem; display:flex; }
.result{
  background:var(--cream); border-radius:1.375rem;
  padding:1.875rem 1.75rem 1.75rem; width:100%;
  display:flex; flex-direction:column;
}
.result__tag{
  display:inline-flex; align-items:center; gap:0.5rem; align-self:flex-start;
  background:#fff; border-radius:62.4375rem; padding:0.4375rem 0.875rem;
  font-size:0.625rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--body);
}
.result__tag .ico{ width:0.8125rem; height:0.8125rem; color:var(--orange); }
.result__big{
  margin-top:1.25rem; display:flex; align-items:baseline; gap:0.5625rem;
  letter-spacing:-.04em;
}
.result__cur{ font-size:1.8125rem; font-weight:600; color:var(--ink); }
.result__num{ font-size:2.8125rem; font-weight:700; line-height:1; color:var(--ink);
  font-variant-numeric:tabular-nums; }
.result__per{ font-size:1.1875rem; font-weight:500; color:var(--body); letter-spacing:-.01em; }

.result__split{
  margin-top:1.375rem; padding-top:1.25rem; border-top:1px solid rgba(6,30,54,.09);
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}
.result__split dt{ font-size:0.71875rem; color:var(--body); }
.result__split dd{ margin:0.3125rem 0 0; font-size:1.1875rem; font-weight:700; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }

.result__list{ margin-top:1.375rem; padding-top:1.25rem; border-top:1px solid rgba(6,30,54,.09);
  display:grid; gap:0.6875rem; }
.result__list li{ display:flex; align-items:center; gap:0.6875rem; font-size:0.84375rem; color:#41556A; }
.result__list .ico{ width:0.9375rem; height:0.9375rem; color:var(--orange); stroke-width:2.2; }

.result .btn{ margin-top:1.5rem; }
.result__note{ margin-top:0.875rem; font-size:0.65625rem; color:var(--body-soft); text-align:center; }

.calc__shot{
  /* PNG, unkomprimiert wie geliefert - die Spalte zeigt nur 42 % der Breite,
     das Motiv wird also stark vergroessert und reagiert empfindlich auf jeden
     Qualitaetsverlust. */
  background-image:var(--img-panels, url("https://cdn.sunny.cy/assets/img/calc-shot.webp")),
    linear-gradient(168deg,#A9DCF0 0%,#6FBBDD 30%,#2C6E93 46%,#1B3E5C 62%,#16324A 100%);
  /* Ausschnitt so gewaehlt, dass Seitenschriftzug, Hecklogo und Kennzeichen
     gemeinsam im Rahmen stehen. Unter 69 % schneidet das Kennzeichen rechts an. */
  background-size:cover; background-position:72% 50%;
}

/* ============================================================
   Stats + Quote
   ============================================================ */
.stats{
  background:var(--navy); color:#fff;
  border-radius:var(--r-lg);
  margin-top:0.875rem; padding:3.25rem 2.5rem 5rem;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
  text-align:center;
}
.stat b{ display:block; font-size:1.9375rem; font-weight:800; letter-spacing:-.03em; line-height:1; }
.stat__label{ display:block; margin-top:0.6875rem; font-size:0.8125rem; line-height:1.42;
  color:rgba(255,255,255,.62); max-width:9.375rem; margin-inline:auto; }

.quote{
  background:var(--card); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  margin-top:-2.125rem; position:relative; z-index:4; overflow:hidden;
  display:grid; grid-template-columns:0.78fr 1.22fr; gap:0;
}
.quote__intro{ padding:4.625rem 2.75rem 5.75rem; position:relative; }
.quote__intro h2{
  margin-top:1.5rem; font-size:2.75rem; font-weight:800;
  line-height:1.1; letter-spacing:-.035em; max-width:20rem;
}
.quote__intro p{ margin-top:1.25rem; font-size:0.90625rem; line-height:1.6; color:var(--body); max-width:18.125rem; }
/* Sonnengrafik: freigestelltes RGBA-Bild, Glutkern auf der Unterkante der Karte.
   Bewusst als background-image und nicht als mask-image - CSS-Masken verlangen
   eine gleichursprüngliche Quelle und brechen deshalb beim Oeffnen per file://.
   Die Markenfarbe steckt im Bild; aendert sich --orange, muss es neu erzeugt
   werden (siehe assets/README.md). */
.rays{
  position:absolute; left:1.25rem; bottom:-2.0625rem;
  width:20.625rem; height:13.75rem;
  opacity:.92; pointer-events:none;
  background-image:url("https://cdn.sunny.cy/assets/img/rays.webp");
  background-size:100% 100%; background-repeat:no-repeat;
}

.quote__form{ padding:4.625rem 2.75rem 5rem 1.25rem; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:1.625rem 1.625rem; }
.f label{ display:block; font-size:0.78125rem; font-weight:600; color:var(--body); margin-bottom:0.5625rem; }
.f input, .f select{
  width:100%; padding:0.875rem 1rem; border-radius:var(--r-sm);
  border:1px solid var(--line); background:#fff; font-size:0.90625rem;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.f input::placeholder{ color:#B5BFC9; }
.f input:focus, .f select:focus{
  outline:none; border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,153,0,.14);
}
.f--select{ position:relative; }
.f--select select{ appearance:none; -webkit-appearance:none; color:var(--body); cursor:pointer; }
.f--select .ico{ position:absolute; right:0.9375rem; bottom:0.9375rem; width:1rem; height:1rem;
  color:var(--body); pointer-events:none; }
/* Zweite, leisere Aktion neben dem Absenden. Der Hauptbutton behaelt den
   Platz, der Nebenweg steht daneben statt darunter. */
.form-actions{ margin-top:2.5rem; display:flex; align-items:stretch; gap:.85rem; }
.form-actions .btn--block{ margin-top:0; flex:1; }
.btn--outline{
  background:#fff; color:var(--ink); border:1px solid var(--line);
  padding:0 1.25rem; font-size:.88rem; font-weight:600; white-space:nowrap;
  box-shadow:0 .5rem 1.2rem -.8rem rgba(6,30,54,.35);
}
.btn--outline:hover{ border-color:var(--orange); color:var(--orange-dp); }
.btn--outline .ico{ width:1rem; height:1rem; color:var(--orange); }
.tagbeta{
  font-size:.6rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--orange); color:#3A2200; border-radius:.3rem; padding:.15rem .35rem;
}

/* Gilt fuer alle drei Angebotsformulare: der Button ist eine Handlung, kein
   weiteres Feld - der Abstand liegt deshalb ueber dem Zeilenabstand des
   Feldrasters (1.625rem), damit die Gruppierung lesbar bleibt. */
form[data-quote] .btn--block{ margin-top:2.5rem; }
.form-actions .btn--block{ margin-top:0; }
.privacy{ margin-top:1.375rem; display:flex; align-items:center; justify-content:center; gap:0.5625rem;
  font-size:0.78125rem; color:var(--body); }
.privacy .ico{ width:0.875rem; height:0.875rem; }

.form-done{
  margin-top:1.125rem; display:none; align-items:center; gap:0.625rem;
  background:#FFF8EA; border:1px solid rgba(255,153,0,.4);
  border-radius:var(--r-sm); padding:0.8125rem 1rem; font-size:0.84375rem; color:var(--ink);
}
.form-done .ico{ width:1rem; height:1rem; color:var(--orange); stroke-width:2.2; }
.form-done.is-on{ display:flex; }

/* ============================================================
   Promise cards
   ============================================================ */
.promise{
  margin-top:1.625rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
}
.pcard{
  background:var(--card); border-radius:var(--r-md);
  border:1px solid var(--line-soft);
  padding:2.875rem 1.75rem; min-height:12.25rem; display:flex; gap:1.125rem; align-items:flex-start;
  transition:transform .2s ease, box-shadow .2s ease;
}
.pcard:hover{ transform:translateY(-3px); box-shadow:0 1.125rem 2.5rem -1.625rem rgba(6,30,54,.4); }
.pcard .ico{ width:1.875rem; height:1.875rem; color:var(--ink); stroke-width:1.3; }
.pcard h3{ font-size:0.90625rem; font-weight:700; letter-spacing:-.01em; }
.pcard p{ margin-top:0.375rem; font-size:0.78125rem; line-height:1.5; color:var(--body); }

/* ============================================================
   Footer
   ============================================================ */
.site-foot{ background:var(--navy); color:#fff; margin-top:1.625rem; position:relative; overflow:hidden; }
.foot__top{
  padding-block:2.875rem 2.5rem;
  display:grid; grid-template-columns:1.25fr .8fr .8fr .8fr 1.25fr; gap:2.25rem;
}
.foot__brand .brand{ margin-left:-2px; }
.foot__tag{ margin-top:1.5rem; font-size:0.875rem; line-height:1.55; color:rgba(255,255,255,.62); }
.socials{ margin-top:1.375rem; display:flex; gap:0.6875rem; }
.socials a{
  width:2.125rem; height:2.125rem; border-radius:50%;
  border:1px solid rgba(255,255,255,.22); display:grid; place-items:center;
  color:rgba(255,255,255,.85); transition:all .18s ease;
}
.socials a .ico{ width:0.9375rem; height:0.9375rem; }
.socials a:hover{ background:var(--orange); border-color:var(--orange); color:#3A2200; }

.fcol h4{ font-size:0.90625rem; font-weight:700; letter-spacing:-.01em; }
.fcol ul{ margin-top:1.25rem; display:grid; gap:0.8125rem; }
.fcol a{ font-size:0.84375rem; color:rgba(255,255,255,.62); transition:color .18s ease; }
.fcol a:hover{ color:var(--orange); }

.foot__contact{ display:grid; gap:1rem; align-content:start; padding-left:0.5rem; }
.fline{ display:flex; align-items:center; gap:0.8125rem; font-size:0.84375rem; color:rgba(255,255,255,.78); }
.fline .ico{ width:1rem; height:1rem; color:rgba(255,255,255,.5); }
.cy-map{ position:absolute; right:var(--gut); bottom:3.5rem; width:8.25rem; color:var(--orange);
  opacity:.9; pointer-events:none; }

.foot__bar{
  border-top:1px solid rgba(255,255,255,.1);
  padding-block:1.25rem; text-align:center;
  font-size:0.78125rem; color:rgba(255,255,255,.45);
}


/* =============================================================
   Unterseite: Solutions
   ============================================================= */

/* ---- kurzer Seitenkopf mit Foto ---- */
.phero{ position:relative; overflow:hidden; isolation:isolate; }
.phero__media{
  position:absolute; inset:0; z-index:-2;
  background-image:var(--img-sol-hero, url("https://cdn.sunny.cy/assets/img/phero-media.webp")),
    linear-gradient(105deg,#FFE7BE 0%,#FFD79A 22%,#F2B978 42%,#C98E63 62%,#8E6A52 100%);
  background-size:cover; background-position:58% 62%; background-repeat:no-repeat;
}
.phero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(255,250,240,.94) 0%, rgba(255,246,231,.88) 24%,
    rgba(255,240,216,.6) 40%, rgba(255,232,196,.16) 56%,
    rgba(255,226,180,0) 68%);
}
.phero__inner{ padding-top:9.5rem; padding-bottom:2.75rem; min-height:35.25rem;
  display:flex; flex-direction:column; }
.phero h1{
  font-size:clamp(2.1rem,3.2vw,2.95rem); font-weight:800;
  line-height:1.1; letter-spacing:-.035em; color:var(--ink); max-width:38rem;
}
.phero__lede{ margin-top:1.05rem; font-size:1.0625rem; line-height:1.5;
  color:#3F5468; max-width:26rem; }
.phero__usps{ margin-top:auto; padding-top:3rem; display:flex; gap:2.4rem; }
.phero__usps .usp{ width:6.3rem; }
.phero__usps .usp .ico{ width:1.65rem; height:1.65rem; }
.phero__usps .usp span{ font-size:.72rem; }

/* ---- Sektionskopf ---- */
.sec{ padding-block:4.25rem; }
.sec--tight{ padding-block:0 4.25rem; }
.sec__head{ text-align:center; max-width:42rem; margin-inline:auto; }
.sec__head h2{ font-size:clamp(1.7rem,2.4vw,2.15rem); font-weight:700;
  letter-spacing:-.03em; color:var(--ink); }
.sec__head p{ margin-top:.7rem; font-size:1rem; color:var(--body); }

/* ---- drei Leistungskarten ---- */
.sol-grid{ margin-top:2.6rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.sol-card{
  background:var(--card); border:1px solid var(--line-soft);
  border-radius:var(--r-md); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease;
}
.sol-card:hover{ transform:translateY(-4px); box-shadow:0 1.5rem 2.75rem -1.5rem rgba(6,30,54,.34); }
.sol-card__media{
  aspect-ratio:16/10; background-size:cover; background-position:center;
  background-repeat:no-repeat;
}
.sol-card:nth-child(1) .sol-card__media{ background-image:var(--img-sol-1, url("https://cdn.sunny.cy/assets/img/sol-card-media.webp")),
  linear-gradient(155deg,#BFE4F3 0%,#79BEDF 34%,#3B87B2 58%,#255C82 100%); }
.sol-card:nth-child(2) .sol-card__media{ background-image:var(--img-sol-2, url("https://cdn.sunny.cy/assets/img/sol-card-media-2.webp")),
  linear-gradient(155deg,#F2F1ED 0%,#DAD8D2 40%,#B9B7B0 72%,#8E8C86 100%); }
.sol-card:nth-child(3) .sol-card__media{ background-image:var(--img-sol-3, url("https://cdn.sunny.cy/assets/img/sol-card-media-3.webp")),
  linear-gradient(155deg,#CFE6F2 0%,#9CC9E0 32%,#6FA07E 62%,#4E7A5C 100%); }
.sol-card__body{ padding:0 1.6rem 1.7rem; position:relative; }
.sol-card__badge{
  width:2.75rem; height:2.75rem; border-radius:50%;
  background:#fff; color:var(--orange);
  display:grid; place-items:center; margin-top:-1.375rem; position:relative;
  box-shadow:0 .5rem 1.25rem -.5rem rgba(6,30,54,.3);
}
.sol-card__badge .ico{ width:1.35rem; height:1.35rem; }
.sol-card h3{ margin-top:1.05rem; font-size:1.2rem; font-weight:700;
  letter-spacing:-.02em; color:var(--ink); }
.sol-card > .sol-card__body > p{ margin-top:.6rem; font-size:.875rem; line-height:1.55; color:var(--body); }

.ticks{ margin-top:1.3rem; display:grid; gap:.65rem; }
.ticks li{ display:flex; align-items:center; gap:.7rem; font-size:.8125rem; color:#41556A; }
.ticks .ico{ width:.95rem; height:.95rem; color:var(--orange); stroke-width:2.3; flex:none; }

/* ---- Funktionsprinzip ---- */
.flow{ display:grid; grid-template-columns:minmax(15rem,29%) 1fr; gap:2.5rem; align-items:center; }
.flow h2{ font-size:clamp(1.5rem,2.1vw,1.85rem); font-weight:700;
  letter-spacing:-.03em; color:var(--ink); }
.flow__steps{ margin-top:1.6rem; display:grid; gap:1.05rem; counter-reset:step; }
.flow__steps li{ display:flex; gap:.9rem; align-items:flex-start; }
.step-num{
  width:1.5rem; height:1.5rem; border-radius:50%; flex:none; margin-top:.05rem;
  background:linear-gradient(180deg,var(--orange-hi),var(--orange)); color:#3A2200;
  font-size:.7rem; font-weight:800; display:grid; place-items:center;
}
.flow__steps p{ font-size:.85rem; line-height:1.5; color:#41556A; }

.diagram{ position:relative; }
.diagram__img{
  aspect-ratio:2/1;                     /* Seitenverhaeltnis der Zeichnung */
  background-image:url("https://cdn.sunny.cy/assets/img/diagram-img.webp");
  background-size:contain; background-position:center bottom; background-repeat:no-repeat;
}
.callout{
  position:absolute; display:flex; align-items:center; gap:.6rem;
  background:#fff; border:1px solid var(--line-soft); border-radius:.7rem;
  padding:.5rem .8rem; box-shadow:0 .75rem 1.5rem -.9rem rgba(6,30,54,.3);
  max-width:11rem;
}
.callout .ico{ width:1.05rem; height:1.05rem; color:var(--ink); flex:none; }
.callout b{ display:block; font-size:.72rem; font-weight:700; color:var(--ink); line-height:1.3; }
.callout span{ display:block; font-size:.65rem; color:var(--body); line-height:1.35; margin-top:.1rem; }
/* Position folgt der Zeichnung: Module oben, Wohnraum links, Speicher
   rechts daneben, Netzanschluss beim Mast ganz rechts. */
.callout--panels{  left:0;    top:-2%;   }
.callout--monitor{ right:0;   top:6%;    }
.callout--home{    left:12%;  bottom:-2%; }
.callout--battery{ left:45%;  bottom:-2%; }
.callout--grid{    right:0;   bottom:-2%; }
.diagram__notes{ display:contents; }   /* Callouts liegen frei um die Grafik */

/* ---- Wartungsband ---- */
.care{
  background:#F1F1EE; border-radius:var(--r-md);
  padding:2rem 2.1rem;
  display:grid; grid-template-columns:minmax(13rem,24%) 1fr; gap:1.8rem; align-items:center;
}
.care__head h2{ font-size:1.45rem; font-weight:700; letter-spacing:-.03em; color:var(--ink); }
.care__head p{ margin-top:.55rem; font-size:.85rem; line-height:1.5; color:var(--body); }
.care__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.care__item{ display:flex; gap:.85rem; align-items:flex-start;
  padding-left:1.5rem; border-left:1px solid rgba(6,30,54,.12); }
.care__item:first-child{ padding-left:0; border-left:0; }
.care__item .ico{ width:1.6rem; height:1.6rem; color:var(--ink); stroke-width:1.35; flex:none; }
.care__item h3{ font-size:.82rem; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.care__item p{ margin-top:.35rem; font-size:.7rem; line-height:1.45; color:var(--body); }

/* ---- Abschluss mit Formular ---- */
.switch{
  border-radius:var(--r-lg); overflow:hidden;
  display:grid; grid-template-columns:minmax(17rem,34%) 1fr;
  background:var(--card); box-shadow:var(--shadow-card);
}
.switch__panel{
  position:relative; isolation:isolate; padding:2.8rem 2.2rem 2.4rem;
  display:flex; flex-direction:column;
  background-image:var(--img-sol-cta, url("https://cdn.sunny.cy/assets/img/switch-panel.webp")),
    linear-gradient(150deg,#FFDCA4 0%,#F5B06A 30%,#D98C55 55%,#7E5C46 100%);
  background-size:cover; background-position:64% 48%;   /* Schalter im Bild halten */
}
/* Warmer Schleier ueber dem Motiv: der Schalter bleibt als Form lesbar,
   der Text steht aber klar davor. Stark genug, dass Pflanze und Lichtkante
   unten rechts nicht mit der Ueberschrift konkurrieren. */
.switch__panel::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(158deg, rgba(255,252,247,.94) 0%, rgba(255,248,236,.88) 34%,
    rgba(255,243,224,.76) 60%, rgba(255,238,212,.62) 100%);
}
.switch__panel h2{ font-size:1.65rem; font-weight:800; line-height:1.16;
  letter-spacing:-.03em; color:var(--ink); max-width:15rem; }
.switch__panel > p{ margin-top:.9rem; font-size:.85rem; line-height:1.55;
  color:#3F5468; max-width:15rem; }
.switch__usps{ margin-top:auto; padding-top:2.2rem; display:flex; gap:1.6rem; }
.switch__usps .usp{ width:5.2rem; gap:.5rem; }
.switch__usps .usp .ico{ width:1.4rem; height:1.4rem; }
.switch__usps .usp span{ font-size:.65rem; }
.switch__form{ padding:2.8rem 2.4rem 2.6rem; }

/* ---- Sekundaerprodukte: bewusst leiser als die drei Hauptkarten.
   Keine Fotos, kleinere Karten, Icon statt Bild - das signalisiert die
   Nebenrolle, ohne sie zu verstecken. Steht direkt vor dem Formular,
   weil dort ohnehin gerade ein Angebot angefragt wird. ---- */
.beyond__head{ max-width:44rem; }
.beyond__head h2{ margin-top:.5rem; font-size:clamp(1.35rem,1.9vw,1.7rem);
  font-weight:700; letter-spacing:-.03em; color:var(--ink); }
.beyond__head p{ margin-top:.7rem; font-size:.9rem; line-height:1.6;
  color:var(--body); max-width:34rem; }
.beyond{ margin-top:1.7rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.beyond__card{
  background:var(--card); border:1px solid var(--line-soft);
  border-radius:var(--r-md); padding:1.5rem 1.5rem 1.7rem;
  transition:transform .22s ease, box-shadow .22s ease;
}
.beyond__card:hover{ transform:translateY(-3px); box-shadow:0 1.1rem 2.2rem -1.3rem rgba(6,30,54,.3); }
.beyond__icon{
  width:2.5rem; height:2.5rem; border-radius:.75rem;
  background:#FFF3DF; color:var(--orange-dp); display:grid; place-items:center;
}
.beyond__icon .ico{ width:1.25rem; height:1.25rem; }
.beyond__card h3{ margin-top:1rem; font-size:1.05rem; font-weight:700;
  letter-spacing:-.02em; color:var(--ink); }
.beyond__card p{ margin-top:.5rem; font-size:.82rem; line-height:1.6; color:var(--body); }



/* =============================================================
   Unterseite: Blog-Übersicht
   ============================================================= */

/* ---- Kopf mit Suche ---- */
.bhero{ position:relative; overflow:hidden; isolation:isolate; }
.bhero__media{
  position:absolute; inset:0; z-index:-2;
  background-image:url("https://cdn.sunny.cy/assets/img/bhero-media.png"),
    linear-gradient(102deg,#FFE9C6 0%,#F7CE96 26%,#D9A374 46%,#9C7B5E 68%,#5E4E42 100%);
  background-size:cover; background-position:66% 52%; background-repeat:no-repeat;
}
.bhero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(252,251,248,.96) 0%, rgba(250,247,240,.9) 26%,
    rgba(250,244,231,.62) 42%, rgba(250,240,220,.2) 58%, rgba(250,238,214,0) 70%);
}
.bhero__inner{ padding-top:8.75rem; padding-bottom:8rem; }
.bhero .kicker-plain{ font-size:.95rem; font-weight:500; color:var(--body); }
.bhero h1{
  margin-top:.7rem; font-size:clamp(2.3rem,3.7vw,3.4rem); font-weight:800;
  line-height:1.08; letter-spacing:-.035em; color:var(--ink); max-width:25rem;
}
.bhero__lede{ margin-top:1.15rem; font-size:1rem; line-height:1.65;
  color:#3F5468; max-width:21.5rem; }

.searchbar{ margin-top:1.9rem; position:relative; max-width:22.5rem; }
.searchbar input{
  width:100%; padding:1.05rem 3.4rem 1.05rem 1.5rem;
  border:1px solid var(--line); border-radius:999px; background:#fff;
  font-size:.9rem; box-shadow:0 .6rem 1.6rem -1rem rgba(6,30,54,.35);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.searchbar input::placeholder{ color:#9AA6B2; }
.searchbar input:focus{ outline:none; border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,153,0,.14); }
.searchbar .ico{ position:absolute; right:1.35rem; top:50%; transform:translateY(-50%);
  width:1.15rem; height:1.15rem; color:var(--body); pointer-events:none; }

/* ---- Themenleiste, überlappt den Kopf ---- */
.cats{
  background:var(--card); border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
  margin-top:-4.25rem; position:relative; z-index:5;
  display:grid; grid-template-columns:repeat(7,1fr);
  padding:1.5rem .5rem .35rem;
}
.cat{
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  padding-bottom:1.1rem; position:relative;
  font-size:.8rem; font-weight:500; color:var(--body);
  transition:color .18s ease;
}
.cat .ico{ width:1.55rem; height:1.55rem; stroke-width:1.4; }
.cat::after{
  content:""; position:absolute; left:50%; right:50%; bottom:0; height:2px;
  background:var(--orange); border-radius:2px; transition:left .22s ease, right .22s ease;
}
.cat:hover{ color:var(--ink); }
.cat:hover::after{ left:22%; right:22%; }
.cat.is-active{ color:var(--orange); font-weight:600; }
.cat.is-active::after{ left:18%; right:18%; }

/* ---- gemeinsame Bausteine der Artikelkarten ---- */
.kicker{ font-size:.66rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--orange-dp); }
.kicker--mute{ color:var(--body-soft); }
.more{ display:inline-flex; align-items:center; gap:.45rem;
  font-size:.8rem; font-weight:600; color:var(--orange-dp); }
.more .ico{ width:.85rem; height:.85rem; transition:transform .18s ease; }
.more:hover .ico{ transform:translateX(3px); }

.blk-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.blk-head h2{ font-size:1.35rem; font-weight:700; letter-spacing:-.025em; color:var(--ink); }

/* ---- Aufmacher + beliebte Themen ---- */
.blog-top{ margin-top:2.3rem; display:grid; grid-template-columns:1.72fr 1fr; gap:2rem; }
.blog-col{ display:flex; flex-direction:column; gap:1.15rem; }

.feature{
  background:var(--card); border-radius:var(--r-md); overflow:hidden;
  display:grid; grid-template-columns:.76fr 1fr; flex:1;
  transition:transform .22s ease, box-shadow .22s ease;
}
.feature:hover{ transform:translateY(-3px); box-shadow:0 1.4rem 2.6rem -1.5rem rgba(6,30,54,.32); }
.feature__body{ padding:1.9rem 1.7rem; display:flex; flex-direction:column; }
.feature h3{ margin-top:.8rem; font-size:1.6rem; font-weight:700;
  line-height:1.18; letter-spacing:-.03em; color:var(--ink); }
.feature p{ margin-top:.85rem; font-size:.85rem; line-height:1.65; color:var(--body); }
.feature .more{ margin-top:auto; padding-top:1.4rem; align-self:flex-start; }
.feature__media{ background-size:cover; background-position:center;
  background-image:url("https://cdn.sunny.cy/assets/img/bhero-media.png"),
    linear-gradient(150deg,#CFE3F0 0%,#9FC4DC 30%,#6E9C7E 62%,#4C7458 100%); }

.pop{
  background:var(--card); border-radius:var(--r-md); overflow:hidden;
  display:grid; grid-template-columns:1.13fr 1fr; flex:1;
  transition:transform .22s ease, box-shadow .22s ease;
}
.pop:hover{ transform:translateY(-3px); box-shadow:0 1.1rem 2.2rem -1.4rem rgba(6,30,54,.3); }
.pop__body{ padding:1.25rem 1.3rem; display:flex; flex-direction:column; }
.pop h3{ margin-top:.55rem; font-size:1.15rem; font-weight:700;
  line-height:1.22; letter-spacing:-.02em; color:var(--ink); }
.pop .more{ margin-top:auto; padding-top:.8rem; align-self:flex-start; }
.pop__media{ background-size:cover; background-position:center; }
.pop:nth-child(1) .pop__media{ background-image:url("https://cdn.sunny.cy/assets/img/bhero-media.png"),
  linear-gradient(150deg,#FFD79B 0%,#E5A24F 40%,#3B4A63 100%); }
.pop:nth-child(2) .pop__media{ background-image:url("https://cdn.sunny.cy/assets/img/bhero-media.png"),
  linear-gradient(150deg,#F1EFEA 0%,#D6D2CA 45%,#A9A49B 100%); }
.pop:nth-child(3) .pop__media{ background-image:url("https://cdn.sunny.cy/assets/img/bhero-media.png"),
  linear-gradient(150deg,#BFDCF2 0%,#7FB4DE 45%,#D96A5A 100%); }

/* ---- neueste Beiträge ---- */
.posts{ margin-top:1.9rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.7rem; }
.post{
  background:var(--card); border-radius:var(--r-md); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease;
}
.post:hover{ transform:translateY(-4px); box-shadow:0 1.4rem 2.6rem -1.5rem rgba(6,30,54,.32); }
.post__media{ aspect-ratio:16/9; background-size:cover; background-position:center; }
.post:nth-child(1) .post__media{ background-image:url("https://cdn.sunny.cy/assets/img/bhero-media.png"),
  linear-gradient(150deg,#BFE6F2 0%,#79BEDF 38%,#2E7BA6 100%); }
.post:nth-child(2) .post__media{ background-image:url("https://cdn.sunny.cy/assets/img/bhero-media.png"),
  linear-gradient(150deg,#F4F1EB 0%,#DDD6CA 45%,#B3AB9C 100%); }
.post:nth-child(3) .post__media{ background-image:url("https://cdn.sunny.cy/assets/img/bhero-media.png"),
  linear-gradient(150deg,#CDE9D3 0%,#82B98F 40%,#2F5F79 100%); }
.post__body{ padding:1.35rem 1.4rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.post h3{ margin-top:.6rem; font-size:1.2rem; font-weight:700;
  line-height:1.22; letter-spacing:-.025em; color:var(--ink); }
.post p{ margin-top:.7rem; font-size:.8rem; line-height:1.6; color:var(--body); }
.post .more{ margin-top:auto; padding-top:1.1rem; align-self:flex-start; }

/* ---- Themenwolke ---- */
.tags{ margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:.7rem; }
.tag{
  padding:.7rem 1.5rem; border-radius:999px;
  background:#EAEAE7; font-size:.82rem; font-weight:500; color:#41556A;
  transition:background .18s ease, color .18s ease;
}
.tag:hover{ background:var(--orange); color:#3A2200; }

/* ---- Abschlussband ---- */
.cta-band{
  margin-top:2.6rem;
  background:linear-gradient(100deg,#FAF1E6 0%,#F6E7D6 55%,#F2DCC6 100%);
  border-radius:var(--r-md);
  padding:1.9rem 2.1rem;
  display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap;
}
.cta-band .ico{ width:2.6rem; height:2.6rem; color:var(--orange); stroke-width:1.3; flex:none; }
.cta-band h2{ font-size:1.25rem; font-weight:700; letter-spacing:-.025em; color:var(--ink); }
.cta-band p{ margin-top:.3rem; font-size:.85rem; color:var(--body); }
.cta-band .btn{ margin-left:auto; }

.btn--ink{
  background:var(--navy); color:#fff;
  padding:.85rem .9rem .85rem 1.7rem; font-size:.9rem;
  box-shadow:0 .6rem 1.5rem -.7rem rgba(6,30,54,.6);
}
.btn--ink .pip{ width:1.75rem; height:1.75rem; border-radius:50%;
  background:var(--orange); color:#3A2200; display:grid; place-items:center; }
.btn--ink .pip .ico{ width:.85rem; height:.85rem; stroke-width:2.2; }


/* =============================================================
   Unterseite: Benefits
   ============================================================= */

/* Kopf wie auf Solutions, die vier Merkmale tragen hier je eine Zeile Erklärung */
.phero--ben .phero__media{
  background-image:url("https://cdn.sunny.cy/assets/img/phero-media-2.webp"),
    linear-gradient(104deg,#FFEBCB 0%,#F9D4A0 24%,#E0AC7B 44%,#A98466 66%,#6B5748 100%);
  /* Beschnitt: 41 % der Hoehe fallen weg. Weggenommen wird oben der leere
     Himmel, unten bleibt die bewegungsunscharfe Fahrbahn stehen - dort sitzt
     die Dynamik des Bildes. Das Fahrzeug steht damit vollstaendig im Rahmen,
     die Merkmalsreihe darunter auf der Strasse. */
  background-position:50% 84%;
}
/* Der Schleier ist bewusst schmal: Kopfzeile und Fahrzeug belegen dieselbe
   Flaeche, ein flaechiger Schleier haette den Transporter grau gewaschen.
   Volle Deckung nur links bis 20 %, ab 41 % laeuft er aus - der weisse
   Aufbau traegt die dunkle Schrift dann selbst. Das zweite Band hebt die
   Kopfnavigation ueber Horizont und Felskante, das dritte die Merkmalsreihe
   ueber der Fahrbahn. */
.phero--ben .phero__media::after{
  background:
    linear-gradient(100deg, rgba(255,251,243,.94) 0%, rgba(255,248,236,.86) 20%,
      rgba(255,244,226,.66) 31%, rgba(255,239,213,.34) 41%,
      rgba(255,234,200,.1) 50%, rgba(255,231,192,0) 58%),
    linear-gradient(180deg, rgba(255,252,246,.75) 0%, rgba(255,252,246,.3) 9%,
      rgba(255,252,246,0) 19%),
    radial-gradient(72% 50% at 4% 100%, rgba(255,251,244,.5), rgba(255,251,244,0) 70%);
}
.phero--ben .phero__usps{ gap:1.5rem; }
.phero--ben .phero__usps .usp{ width:7.6rem; }
.usp small{ display:block; margin-top:.3rem; font-size:.63rem; font-weight:400;
  line-height:1.36; color:var(--body); }

/* ---- sechs Argumente ---- */
.why-grid{ margin-top:2.4rem; display:grid; grid-template-columns:repeat(6,1fr); gap:1.05rem; }
.why-card{
  background:var(--card); border:1px solid var(--line-soft);
  border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease;
}
.why-card:hover{ transform:translateY(-4px); box-shadow:0 1.3rem 2.4rem -1.4rem rgba(6,30,54,.32); }
.why-card__media{ aspect-ratio:4/5; background-size:cover; background-position:center; }
.why-card:nth-child(1) .why-card__media{ background-image:url("https://cdn.sunny.cy/assets/img/why-card-media.webp"),
  linear-gradient(155deg,#BFE4F3 0%,#6FB4DA 38%,#2C6E93 100%); }
.why-card:nth-child(2) .why-card__media{ background-image:url("https://cdn.sunny.cy/assets/img/why-card-media-2.webp"),
  linear-gradient(155deg,#E7EFD9 0%,#A9C98A 40%,#5C7A47 100%); }
.why-card:nth-child(3) .why-card__media{ background-image:url("https://cdn.sunny.cy/assets/img/why-card-media-3.webp"),
  linear-gradient(155deg,#D7E6F0 0%,#93B4C9 42%,#3E5668 100%); }
.why-card:nth-child(4) .why-card__media{ background-image:url("https://cdn.sunny.cy/assets/img/why-card-media-4.webp"),
  linear-gradient(155deg,#F2F1ED 0%,#D2CFC8 45%,#9C9890 100%); }
.why-card:nth-child(5) .why-card__media{ background-image:url("https://cdn.sunny.cy/assets/img/why-card-media-5.webp"),
  linear-gradient(155deg,#C9E7F2 0%,#7FBFD9 40%,#2F7EA0 100%); }
.why-card:nth-child(6) .why-card__media{ background-image:url("https://cdn.sunny.cy/assets/img/bhero-media.png"),
  linear-gradient(155deg,#BFE0EE 0%,#78AEC8 40%,#2E6685 100%); }

/* Bildausschnitt je Karte: die Motive sind quer, der Rahmen ist hochkant 4:5 -
   es bleiben nur 53 % der Bildbreite stehen. Deshalb pro Motiv nachjustieren,
   sobald es geliefert ist. */
.why-card:nth-child(1) .why-card__media{ background-position:40% 58%; }
.why-card:nth-child(2) .why-card__media{ background-position:24% 50%; }
.why-card:nth-child(3) .why-card__media{ background-position:50% 50%; }   /* hochkant geliefert */
.why-card:nth-child(4) .why-card__media{ background-position:24% 50%; }
.why-card:nth-child(5) .why-card__media{ background-position:50% 50%; }   /* Hain trifft Modulfeld */
.why-card__body{ padding:0 1.05rem 1.3rem; }
.why-card__badge{
  width:2.3rem; height:2.3rem; border-radius:50%; background:#fff; color:var(--orange);
  display:grid; place-items:center; margin-top:-1.15rem; position:relative;
  box-shadow:0 .45rem 1.1rem -.45rem rgba(6,30,54,.32);
}
.why-card__badge .ico{ width:1.1rem; height:1.1rem; }
.why-card h3{ margin-top:.95rem; font-size:.95rem; font-weight:700;
  line-height:1.28; letter-spacing:-.015em; color:var(--ink); }
.why-card p{ margin-top:.55rem; font-size:.76rem; line-height:1.55; color:var(--body); }

/* ---- Langzeitnutzen mit Diagramm ---- */
.longterm{
  background:#FAFAF8; border:1px solid var(--line-soft);
  border-radius:var(--r-md); padding:2.4rem 2.2rem 2.6rem;
}
.longterm__head{ text-align:center; }
.longterm__head h2{ font-size:clamp(1.5rem,2.1vw,1.85rem); font-weight:700;
  letter-spacing:-.03em; color:var(--ink); }
.longterm__head::after{
  content:""; display:block; width:3.6rem; height:3px; margin:.85rem auto 0;
  background:var(--orange); border-radius:3px;
}
.longterm__cols{ margin-top:2.1rem; display:grid; grid-template-columns:.72fr 1fr; gap:2.2rem;
  align-items:center; }
.gains{ display:grid; gap:1.05rem; }
.gains li{ display:flex; align-items:flex-start; gap:.85rem;
  font-size:.82rem; line-height:1.5; color:#41556A; }
.gains .ico{ width:1.15rem; height:1.15rem; color:var(--orange); flex:none; margin-top:.05rem; }

.chartcard{
  background:var(--card); border:1px solid var(--line);
  border-radius:.9rem; padding:1.4rem 1.5rem 1.2rem; position:relative;
}
.chartcard h3{ font-size:.85rem; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.chart{ margin-top:.9rem; width:100%; height:auto; display:block; overflow:visible; }
.chart .grid{ stroke:#E9E9E4; stroke-width:1; }
.chart .axis{ stroke:#C9CBCB; stroke-width:1; }
.chart .line{ stroke:var(--orange); stroke-width:2.6; fill:none;
  stroke-linecap:round; stroke-linejoin:round; }
.chart .lbl{ fill:var(--body-soft); font-size:9px; font-family:inherit; }
.chart .lbl--axis{ fill:var(--body); font-size:9.5px; }
.callout-box{
  position:absolute; right:1.6rem; bottom:3.1rem;
  background:linear-gradient(180deg,var(--orange-hi),var(--orange));
  color:#3A2200; border-radius:.5rem; padding:.75rem .95rem; max-width:9.5rem;
  box-shadow:0 .7rem 1.4rem -.7rem rgba(255,153,0,.7);
}
.callout-box span{ display:block; font-size:.66rem; font-weight:600; opacity:.85; }
.callout-box b{ display:block; font-size:1.05rem; font-weight:800; letter-spacing:-.02em; }
.callout-box .sep{ display:block; height:1px; background:rgba(58,34,0,.22); margin:.5rem 0; }

/* ---- dunkles Serviceband ---- */
.more-than{
  position:relative; isolation:isolate; overflow:hidden;
  color:#fff; padding-block:3.2rem 3.4rem;
}
.more-than::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:url("https://cdn.sunny.cy/assets/img/more-than.webp"),
    linear-gradient(120deg,#0B2438 0%,#123048 45%,#22405A 100%);
  background-size:cover; background-position:50% 45%;   /* Fassade und Pool im Bild */
}
/* Der Schleier laeuft rechts nicht unter .78 aus: dort stehen zwei
   Textspalten ueber den hell erleuchteten Fensterflaechen der Villa.
   Mit dem frueheren Wert .50 waren sie kaum lesbar. */
.more-than::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(96deg, rgba(6,30,54,.95) 0%, rgba(6,30,54,.9) 34%,
    rgba(6,30,54,.83) 62%, rgba(6,30,54,.78) 100%);
}
.more-than h2{ font-size:clamp(1.45rem,2vw,1.8rem); font-weight:700; letter-spacing:-.03em; }
.more-than__sub{ margin-top:.5rem; font-size:.95rem; font-weight:600; color:rgba(255,255,255,.88); }
.steps4{ margin-top:2.2rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
.steps4 .care__item{ border-left-color:rgba(255,255,255,.16); }
.steps4 .care__item .ico{ color:#fff; }
.steps4 .care__item h3{ color:#fff; font-size:.85rem; }
.steps4 .care__item p{ color:rgba(255,255,255,.62); font-size:.72rem; }

/* ---- Abschluss mit Formular, ohne Bildpanel ---- */
.enjoy{ position:relative; overflow:hidden;
  display:grid; grid-template-columns:minmax(16rem,32%) 1fr; gap:2.4rem; align-items:start; }
.enjoy__intro h2{ font-size:1.85rem; font-weight:800; line-height:1.16;
  letter-spacing:-.035em; color:var(--ink); max-width:17.5rem; }
.enjoy__intro > p{ margin-top:1rem; font-size:.9rem; line-height:1.6;
  color:var(--body); max-width:17rem; }
.enjoy__usps{ margin-top:2.4rem; display:flex; gap:1.7rem; }
.enjoy__usps .usp{ width:5.4rem; gap:.5rem; }
.enjoy__usps .usp .ico{ width:1.5rem; height:1.5rem; }
.enjoy__usps .usp span{ font-size:.68rem; font-weight:500; }
.rays--right{ left:auto; right:-3.5rem; bottom:-4.5rem; width:17rem; height:11.4rem; opacity:.75; }

/* ============================================================
   Motion — Thema "Sonnenlicht": langsam, warm, atmend.
   Alles laeuft ueber die Klasse .motion am <html>, die nur gesetzt wird,
   wenn JS laeuft UND der Nutzer keine reduzierte Bewegung verlangt.
   Ohne JS ist die Seite vollstaendig sichtbar - nichts haengt an Animation.
   Bewegt wird 'translate' (nicht 'transform'), damit Hover-Effekte auf
   denselben Elementen unabhaengig davon weiterarbeiten.
   ============================================================ */
.reveal{ opacity:1; translate:none; }

html.motion .reveal{
  opacity:0; translate:0 1.375rem;
  transition:opacity .66s cubic-bezier(.22,.61,.36,1),
             translate .66s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0s);
}
html.motion .reveal.is-in{ opacity:1; translate:none; }

/* Die Sonne atmet - Ursprung im Glutkern, nicht in der Elementmitte */
@keyframes sun-breath{
  0%,100%{ transform:scale(1);     opacity:.86; }
  50%    { transform:scale(1.055); opacity:1;   }
}
html.motion .rays{
  transform-origin:50% 85%;
  animation:sun-breath 7.5s ease-in-out infinite;
}

/* Sonnenmarke im Logo im selben Takt, nur halb so stark */
@keyframes mark-breath{
  0%,100%{ transform:translateY(-50%) scale(1);    }
  50%    { transform:translateY(-50%) scale(1.035); }
}
html.motion .brand__mark{ animation:mark-breath 7.5s ease-in-out infinite; }

/* Hero-Foto: sehr langsame Drift, bewusst unter der Wahrnehmungsschwelle */
@keyframes hero-drift{ from{ transform:scale(1); } to{ transform:scale(1.06); } }
html.motion .hero__media{ animation:hero-drift 44s ease-in-out infinite alternate; }

/* Pfeil im Button folgt dem Anheben */
.btn .pip .ico{ transition:transform .2s ease; }
.btn:hover .pip .ico{ transform:translateX(2px); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1180px){
  :root{ --gut:2.5rem; --cgut:1.25rem; }
  .calc{ grid-template-columns:1fr 1fr; }
  .calc__shot{ grid-column:1 / -1; min-height:15rem; }
  .trust__inner{ grid-template-columns:1fr; }
  .trust__lede{ padding:3.5rem 0 0.5rem; }
  .trust__grid{ border-top-left-radius:2rem; margin-inline:calc(var(--gut) * -1);
    padding:2.75rem var(--gut) 18.75rem; grid-template-columns:repeat(2,1fr); gap:1.875rem; }
  .trust__grid::before{ display:none; }
  .calc{ margin-top:-16.25rem; }
  .sol-grid{ grid-template-columns:1fr 1fr; }
  .sol-card:last-child{ grid-column:1 / -1; }
  .flow{ grid-template-columns:1fr; }
  .care{ grid-template-columns:1fr; }
  .care__grid{ grid-template-columns:1fr 1fr; gap:1.4rem; }
  .care__item:nth-child(3){ padding-left:0; border-left:0; }
  .switch{ grid-template-columns:1fr; }
  .beyond{ grid-template-columns:1fr 1fr; }
  .beyond__card:last-child{ grid-column:1 / -1; }
  .cats{ grid-template-columns:repeat(4,1fr); row-gap:.5rem; }
  .why-grid{ grid-template-columns:repeat(3,1fr); }
  .longterm__cols{ grid-template-columns:1fr; }
  .steps4{ grid-template-columns:1fr 1fr; }
  .steps4 .care__item:nth-child(3){ padding-left:1.5rem; border-left:1px solid rgba(255,255,255,.16); }
  .enjoy{ grid-template-columns:1fr; gap:2rem; }
  .rays--right{ display:none; }
  .blog-top{ grid-template-columns:1fr; }
  .posts{ grid-template-columns:1fr 1fr; }
  .post:last-child{ grid-column:1 / -1; }
  .foot__top{ grid-template-columns:1fr 1fr 1fr; }
  .foot__brand{ grid-column:1 / -1; }
  .foot__contact{ grid-column:1 / -1; padding-left:0; }
  .cy-map{ display:none; }
}
@media (max-width:900px){
  .nav, .site-head .btn{ display:none; }
  .head-actions{ gap:.7rem; }
  /* Auf schmalen Schirmen bleibt nur das Icon - sonst schiebt die Kopfzeile
     den Menuegriff ueber den rechten Rand hinaus. */
  .head-login__t, .head-login .tagbeta{ display:none; }
  .head-login .ico{ width:1.3rem; height:1.3rem; }
  .nav-toggle{ display:block; }
  .site-head.is-open .nav{
    display:flex; flex-direction:column; gap:4px; align-items:flex-start;
    position:absolute; top:5.25rem; right:var(--gut); left:var(--gut);
    background:#fff; border-radius:var(--r-md); padding:0.875rem 1.25rem;
    box-shadow:var(--shadow-card);
  }
  .site-head.is-open .nav a{ width:100%; padding-block:0.625rem; }
  .hero__inner{ padding-top:7.875rem; min-height:0; }
  .hero__media{ background-position:70% 40%; }
  .hero__media::after{
    background:linear-gradient(180deg, rgba(255,250,241,.96) 0%, rgba(255,246,232,.9) 46%,
      rgba(255,238,212,.55) 72%, rgba(255,232,196,.2) 100%);
  }
  .hero__usps{ padding-top:3.25rem; gap:1.25rem; }
  .usp{ width:auto; flex:1; }
  .quote{ grid-template-columns:1fr; }
  .quote__intro{ padding-bottom:2.25rem; }
  .quote__form{ padding:0 2.75rem 3rem; }
  .rays{ display:none; }
  .promise{ grid-template-columns:1fr 1fr; }
  .phero__inner{ padding-top:8rem; min-height:0; }
  /* Auf schmalen Schirmen steht der Text ueber dem Motiv statt daneben -
     der Schleier muss deshalb von oben kommen, nicht von links.
     Der zweite Selektor sticht die staerkere Regel des Benefits-Kopfes. */
  .phero__media::after,
  .phero--ben .phero__media::after{
    background:linear-gradient(180deg, rgba(255,250,241,.96) 0%, rgba(255,247,235,.92) 40%,
      rgba(255,240,218,.72) 68%, rgba(255,234,202,.42) 100%);
  }
  .bhero__inner{ padding-top:7.5rem; padding-bottom:7rem; }
  .bhero h1, .bhero__lede{ max-width:none; }
  .bhero__media::after{ background:linear-gradient(180deg, rgba(252,251,248,.96) 0%,
    rgba(250,246,236,.9) 48%, rgba(250,240,222,.6) 100%); }
  .cta-band .btn{ margin-left:0; }
  .phero__usps{ padding-top:2.4rem; gap:1.2rem; }
  .phero__usps .usp{ flex:1; width:auto; }
  /* Bildunterschriften wandern unter die Grafik, sobald es eng wird */
  .callout{ position:static; max-width:none; }
  .diagram__notes{ margin-top:1.1rem; display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
  .stats{ grid-template-columns:1fr 1fr; gap:2rem 1rem; padding:2.5rem 1.75rem 4.125rem; }
}
@media (max-width:660px){
  :root{ --gut:1.375rem; --cgut:0.875rem; --r-lg:1.5rem; }
  .hero h1{ font-size:2.5rem; }
  .hero__lede{ font-size:1.0625rem; }
  .btn--lg{ padding:0.75rem 0.75rem 0.75rem 1.5rem; font-size:0.9375rem; }
  .hero__usps{ flex-wrap:wrap; gap:1.375rem 0.875rem; }
  .usp{ min-width:5.5rem; }
  .trust__lede h2{ font-size:1.6875rem; }
  .trust__grid{ grid-template-columns:1fr; }
  .calc{ grid-template-columns:1fr; margin-top:-15.625rem; }
  .calc__form{ padding:2.125rem 1.625rem 0.5rem; }
  .calc__result{ padding:1.625rem 1.625rem 2.125rem; }
  .quote__intro{ padding:2.375rem 1.625rem 1.875rem; }
  .quote__intro h2{ font-size:2.0625rem; }
  .quote__form{ padding:0 1.625rem 2.5rem; }
  .grid2{ grid-template-columns:1fr; }
  .promise{ grid-template-columns:1fr; }
  .sol-grid{ grid-template-columns:1fr; }
  .sol-card:last-child{ grid-column:auto; }
  .care__grid{ grid-template-columns:1fr; }
  .care__item{ padding-left:0; border-left:0; }
  .diagram__notes{ grid-template-columns:1fr; }
  .switch__panel, .switch__form{ padding-inline:1.6rem; }
  .form-actions{ flex-direction:column; }
  .btn--outline{ padding:.9rem 1.25rem; justify-content:center; }
  .cats{ grid-template-columns:repeat(2,1fr); }
  .why-grid{ grid-template-columns:1fr 1fr; }
  .steps4{ grid-template-columns:1fr; }
  .steps4 .care__item, .steps4 .care__item:nth-child(3){ padding-left:0; border-left:0; }
  .callout-box{ position:static; max-width:none; margin-top:1rem; }
  .beyond{ grid-template-columns:1fr; }
  .beyond__card:last-child{ grid-column:auto; }
  .feature, .pop{ grid-template-columns:1fr; }
  .feature__media, .pop__media{ aspect-ratio:16/9; order:-1; }
  .posts{ grid-template-columns:1fr; }
  .post:last-child{ grid-column:auto; }
  .foot__top{ grid-template-columns:1fr 1fr; padding-block:3rem 2.5rem; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
     transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; translate:none !important; }
}

/* =============================================================
   Customer Panel — eigene Oberflaeche, bewusst nicht die Website.
   Schmale Kopfleiste statt Marketing-Navigation, ruhiger Hintergrund,
   Arbeitsflaeche statt Bildwelt.
   ============================================================= */
.app{ min-height:100vh; background:#F3F4F2; display:flex; flex-direction:column; }

/* ---- Anmeldung ---- */
.gate{ flex:1; display:grid; place-items:center; padding:2rem 1.25rem 4rem; }
.gate__card{
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-card);
  padding:2.6rem 2.4rem 2.4rem; width:min(27rem,100%);
}
.gate__card .brand{ margin-bottom:1.8rem; }
.gate__card h1{ font-size:1.6rem; font-weight:800; letter-spacing:-.03em; color:var(--ink);
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.gate__card > p{ margin-top:.7rem; font-size:.88rem; line-height:1.6; color:var(--body); }
.gate__fields{ margin-top:1.7rem; display:grid; gap:1.1rem; }
.gate__or{ display:flex; align-items:center; gap:.8rem; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.12em; color:var(--body-soft); }
.gate__or::before, .gate__or::after{ content:""; flex:1; height:1px; background:var(--line); }
.gate__note{ margin-top:1.2rem; font-size:.72rem; line-height:1.5; color:var(--body-soft);
  display:flex; gap:.5rem; align-items:baseline; }
.gate__note > span{ flex:1; }   /* Fliesstext soll nicht in Spalten zerfallen */
.gate__note .ico{ width:.9rem; height:.9rem; flex:none; margin-top:.1rem; }
.gate .btn--block{ margin-top:1.5rem; }
.err{ margin-top:.8rem; font-size:.78rem; color:#B4301A; display:none; }
.err.is-on{ display:block; }

/* ---- Kopfleiste ---- */
.app__top{
  background:var(--navy); color:#fff;
  display:flex; align-items:center; gap:1.2rem;
  padding:.85rem clamp(1rem,3vw,2.5rem);
}
.app__top .brand__word{ color:#fff; font-size:1.25rem; }
.app__top .brand__sub{ color:rgba(255,255,255,.5); font-size:.34rem; }
.app__top .brand__type{ padding-left:1.25rem; }
.app__top .brand__mark{ width:2.5rem; height:2.5rem; top:.625rem; }
.app__label{ font-size:.78rem; font-weight:600; letter-spacing:.02em;
  color:rgba(255,255,255,.6); border-left:1px solid rgba(255,255,255,.22);
  padding-left:1.2rem; }
.app__user{ margin-left:auto; display:flex; align-items:center; gap:.7rem; font-size:.82rem; }
.app__avatar{ width:2rem; height:2rem; border-radius:50%;
  background:linear-gradient(180deg,var(--orange-hi),var(--orange)); color:#3A2200;
  display:grid; place-items:center; font-weight:800; font-size:.8rem; }
.app__out{ color:rgba(255,255,255,.6); font-size:.78rem; }
.app__out:hover{ color:var(--orange); }

/* ---- Arbeitsflaeche ---- */
.app__body{ flex:1; display:grid; grid-template-columns:15.5rem 1fr;
  gap:1.6rem; padding:1.6rem clamp(1rem,3vw,2.5rem) 3rem; align-items:start; }
.side{ background:#fff; border-radius:var(--r-md); border:1px solid var(--line-soft);
  padding:1.2rem 1.1rem 1.3rem; position:sticky; top:1.6rem; }
/* Reste der frueheren Projektliste sind entfallen. Wichtig: hier keine
   pauschale .side .btn-Regel mehr - sie hatte den Suchbutton der
   Auftragsverfolgung auf volle Breite gezogen. */

/* ---- Wizard ---- */
.wiz{ background:#fff; border-radius:var(--r-md); border:1px solid var(--line-soft);
  overflow:hidden; }
.wiz__rail{ display:grid; grid-template-columns:repeat(5,1fr);
  border-bottom:1px solid var(--line-soft); background:#FBFBF9; }
.wiz__step{ padding:.95rem .6rem; display:flex; align-items:center; gap:.55rem;
  font-size:.75rem; color:var(--body-soft); border-right:1px solid var(--line-soft); }
.wiz__step:last-child{ border-right:0; }
.wiz__num{ width:1.4rem; height:1.4rem; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:.68rem; font-weight:700;
  background:#EDEDE8; color:var(--body); }
.wiz__step.is-done .wiz__num{ background:#E4F1E6; color:#2E7D45; }
.wiz__step.is-active{ color:var(--ink); font-weight:600; background:#fff; }
.wiz__step.is-active .wiz__num{ background:linear-gradient(180deg,var(--orange-hi),var(--orange)); color:#3A2200; }
.wiz__body{ padding:2rem 2rem 2.2rem; }
.wiz__body h2{ font-size:1.3rem; font-weight:700; letter-spacing:-.03em; color:var(--ink); }
.wiz__body > p{ margin-top:.55rem; font-size:.85rem; line-height:1.6; color:var(--body); max-width:38rem; }
.wiz__pane{ display:none; }
.wiz__pane.is-on{ display:block; }
.wiz__grid{ margin-top:1.6rem; display:grid; gap:1.3rem; grid-template-columns:1fr 1fr; }
.wiz__grid--one{ grid-template-columns:1fr; max-width:26rem; }
.wiz__nav{ margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--line-soft);
  display:flex; align-items:center; gap:.8rem; }
.wiz__nav .btn--outline{ padding:.8rem 1.25rem; }
.wiz__nav .spacer{ flex:1; }

/* Auswahlkacheln */
.picks{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-top:.7rem; }
.pick{ border:1px solid var(--line); border-radius:.7rem; background:#fff;
  padding:.95rem 1rem; text-align:left; cursor:pointer; transition:all .18s ease; }
.pick b{ display:block; font-size:.9rem; font-weight:700; color:var(--ink); }
.pick span{ display:block; margin-top:.25rem; font-size:.74rem; line-height:1.45; color:var(--body); }
.pick:hover{ border-color:#DCD9CF; }
.pick[aria-pressed="true"]{ border-color:var(--orange); background:#FFF8EA; }

/* Kartenflaeche */
.map{ margin-top:.7rem; border:1px solid var(--line); border-radius:.7rem;
  overflow:hidden; background:#EDEBE4; position:relative; }
.map svg{ display:block; width:100%; height:auto; cursor:crosshair; }
.map__bar{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  padding:.7rem .9rem; border-top:1px solid var(--line); background:#FBFBF9;
  font-size:.76rem; color:var(--body); }
.map__bar b{ color:var(--ink); }
.map__bar .btn{ padding:.45rem .9rem; font-size:.75rem; }
.map__hint{ position:absolute; left:.9rem; top:.9rem; background:rgba(255,255,255,.92);
  border-radius:.45rem; padding:.4rem .7rem; font-size:.72rem; color:var(--ink);
  pointer-events:none; box-shadow:0 .4rem 1rem -.5rem rgba(6,30,54,.4); }
.map__note{ margin-top:.6rem; font-size:.7rem; line-height:1.5; color:var(--body-soft); }

/* Ergebnis */
.sizebox{ margin-top:1.5rem; background:#FFF8EA; border:1px solid rgba(255,153,0,.32);
  border-radius:.8rem; padding:1.2rem 1.3rem; display:flex; gap:1.6rem; flex-wrap:wrap; }
.sizebox div{ min-width:8rem; }
.sizebox dt{ font-size:.7rem; color:var(--body); }
.sizebox dd{ margin:.25rem 0 0; font-size:1.25rem; font-weight:800;
  letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.sizebox dd small{ font-size:.75rem; font-weight:600; color:var(--body); }

.plans{ margin-top:1.5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.plan{ border:1px solid var(--line); border-radius:.8rem; background:#fff;
  padding:1.2rem 1.2rem 1.3rem; text-align:left; cursor:pointer; transition:all .2s ease; }
.plan:hover{ border-color:#DCD9CF; transform:translateY(-2px); }
.plan[aria-pressed="true"]{ border-color:var(--orange); background:#FFFBF3;
  box-shadow:0 .8rem 1.8rem -1rem rgba(255,153,0,.55); }
.plan__tag{ font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--orange-dp); }
.plan h3{ margin-top:.5rem; font-size:1.05rem; font-weight:700; color:var(--ink); }
.plan__kw{ margin-top:.7rem; font-size:1.6rem; font-weight:800; letter-spacing:-.03em;
  color:var(--ink); font-variant-numeric:tabular-nums; }
.plan__kw small{ font-size:.8rem; font-weight:600; color:var(--body); }
.plan ul{ margin-top:.9rem; display:grid; gap:.45rem; }
.plan li{ display:flex; gap:.5rem; font-size:.75rem; color:#41556A; }
.plan li .ico{ width:.8rem; height:.8rem; color:var(--orange); flex:none; margin-top:.15rem; }
.plan__price{ margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line-soft);
  font-size:1.15rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }

.addon{ margin-top:1.6rem; border:1px solid var(--line); border-radius:.8rem; padding:1.2rem 1.3rem; }
.addon h3{ font-size:.95rem; font-weight:700; color:var(--ink); }
.addon > p{ margin-top:.4rem; font-size:.78rem; line-height:1.55; color:var(--body); }
.addon .picks{ grid-template-columns:repeat(4,1fr); }

.summary{ margin-top:1.6rem; background:var(--navy); color:#fff;
  border-radius:.8rem; padding:1.4rem 1.5rem; }
.summary h3{ font-size:.95rem; font-weight:700; }
.summary dl{ margin-top:1rem; display:grid; gap:.6rem; }
.summary .row{ display:flex; justify-content:space-between; gap:1rem;
  font-size:.82rem; color:rgba(255,255,255,.72); }
.summary .row b{ color:#fff; font-variant-numeric:tabular-nums; }
.summary .row--total{ margin-top:.4rem; padding-top:.8rem;
  border-top:1px solid rgba(255,255,255,.16); font-size:1rem; color:#fff; font-weight:700; }
.summary .row--total b{ font-size:1.35rem; font-weight:800; letter-spacing:-.02em; }
.summary .note{ margin-top:1rem; font-size:.7rem; line-height:1.5; color:rgba(255,255,255,.5); }

@media (max-width:1180px){
  .app__body{ grid-template-columns:1fr; }
  .side{ position:static; }
  .plans{ grid-template-columns:1fr; }
}
@media (max-width:660px){
  .wiz__rail{ grid-template-columns:repeat(5,1fr); }
  .wiz__step span{ display:none; }
  .wiz__step{ justify-content:center; padding:.8rem .3rem; }
  .wiz__body{ padding:1.4rem 1.2rem 1.6rem; }
  .wiz__grid{ grid-template-columns:1fr; }
  .picks, .addon .picks{ grid-template-columns:1fr 1fr; }
  .app__label{ display:none; }
}

/* ---- Seitenmenue und Auftragsverfolgung ---- */
.navs{ display:grid; gap:.2rem; }
.navs__item{
  display:flex; align-items:center; gap:.7rem; width:100%;
  padding:.65rem .7rem; border:0; border-radius:.6rem; background:none;
  font-size:.85rem; font-weight:500; color:#41556A; cursor:pointer; text-align:left;
  transition:background .16s ease, color .16s ease;
}
.navs__item .ico{ width:1.05rem; height:1.05rem; color:var(--body-soft); flex:none; }
.navs__item:hover{ background:#F6F6F2; color:var(--ink); }
.navs__item.is-active{ background:#FFF3DF; color:var(--ink); font-weight:600; }
.navs__item.is-active .ico{ color:var(--orange); }

.track{ margin-top:1.4rem; padding-top:1.3rem; border-top:1px solid var(--line-soft); }
.track h2{ font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--body-soft); }
.track__row{ margin-top:.75rem; display:flex; gap:.45rem; }
.track__row input{ flex:1; min-width:0; padding:.6rem .7rem; border:1px solid var(--line);
  border-radius:.55rem; font-size:.8rem; background:#fff; }
.track__row input:focus{ outline:none; border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,153,0,.14); }
.track__row .btn{ padding:.6rem .75rem; }
.track__row .btn .ico{ width:.95rem; height:.95rem; }
.track__out{ margin-top:.8rem; font-size:.76rem; line-height:1.5; color:var(--body); }
.track__out .st{ margin-bottom:.5rem; }
.track__out b{ color:var(--ink); }
.track__steps{ margin-top:.6rem; display:grid; gap:.35rem; }
.track__steps li{ display:flex; gap:.5rem; align-items:center; font-size:.74rem; color:var(--body-soft); }
.track__steps li.is-done{ color:#2E7D45; }
.track__steps .ico{ width:.85rem; height:.85rem; flex:none; }

/* ---- Ansichten ---- */
.app__main{ min-width:0; display:grid; }
.view{ display:none; min-width:0; }
.view.is-on{ display:block; }
.view__head{ display:flex; align-items:center; gap:.8rem; margin-bottom:1.1rem; flex-wrap:wrap; }
.view__head h1{ font-size:1.45rem; font-weight:800; letter-spacing:-.03em; color:var(--ink); }
.view__head .spacer{ flex:1; }
.view__head .btn{ padding:.65rem 1.1rem; font-size:.82rem; }
.view__head .btn--sun{ padding:.55rem .55rem .55rem 1.1rem; }
.view__head .btn--sun .pip{ width:1.6rem; height:1.6rem; }
.view__head .btn--outline .ico{ width:.9rem; height:.9rem; }

.toggle{ display:inline-flex; border:1px solid var(--line); border-radius:.55rem; overflow:hidden; background:#fff; }
.toggle button{ border:0; background:none; padding:.55rem .7rem; cursor:pointer; color:var(--body-soft); }
.toggle button .ico{ width:1rem; height:1rem; display:block; }
.toggle button[aria-pressed="true"]{ background:#FFF3DF; color:var(--orange-dp); }

/* ---- Tabelle ---- */
.tbl{ background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden; }
.tbl table{ width:100%; border-collapse:collapse; }
.tbl th{ text-align:left; font-size:.68rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--body-soft); padding:.85rem 1.1rem;
  background:#FBFBF9; border-bottom:1px solid var(--line-soft); white-space:nowrap; }
.tbl td{ padding:.9rem 1.1rem; font-size:.83rem; color:#41556A;
  border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.tbl tr:last-child td{ border-bottom:0; }
.tbl tbody tr{ cursor:pointer; transition:background .15s ease; }
.tbl tbody tr:hover{ background:#FBFAF6; }
.tbl .ref{ font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.tbl .num{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.tbl .strong{ font-weight:700; color:var(--ink); }

/* ---- Kachelansicht ---- */
.qcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.qcard{ background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-md);
  padding:1.2rem 1.25rem 1.3rem; cursor:pointer; text-align:left;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.qcard:hover{ transform:translateY(-3px); border-color:#E2DED2;
  box-shadow:0 1.1rem 2.2rem -1.3rem rgba(6,30,54,.3); }
.qcard__top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.qcard__ref{ font-size:.72rem; font-weight:600; color:var(--body-soft); font-variant-numeric:tabular-nums; }
.qcard h3{ margin-top:.7rem; font-size:1rem; font-weight:700; color:var(--ink); letter-spacing:-.02em; }
.qcard dl{ margin-top:.9rem; display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.qcard dt{ font-size:.66rem; color:var(--body-soft); }
.qcard dd{ margin:.15rem 0 0; font-size:.9rem; font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums; }
.qcard__foot{ margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; font-size:.72rem; color:var(--body-soft); }

/* ---- Statusmarken ---- */
.st{ display:inline-flex; align-items:center; gap:.4rem; border-radius:999px;
  padding:.28rem .65rem; font-size:.68rem; font-weight:700; letter-spacing:.02em; white-space:nowrap; }
.st::before{ content:""; width:.4rem; height:.4rem; border-radius:50%; background:currentColor; }
.st--requested{ background:#EDF1F6; color:#3D5A79; }
.st--quoted   { background:#FFF1DC; color:#B26A00; }
.st--ordered  { background:#E4F1E6; color:#2E7D45; }
.st--declined { background:#FBE9E5; color:#B4301A; }
.st--cancelled{ background:#F0F0EC; color:#6B7280; }

/* ---- Detailansicht ---- */
.detail{ display:grid; grid-template-columns:1fr 22rem; gap:1.3rem; align-items:start; }
.card{ background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-md);
  padding:1.5rem 1.6rem 1.7rem; }
.card h2{ font-size:1.2rem; font-weight:700; letter-spacing:-.025em; color:var(--ink); }
.card h3{ margin-top:.9rem; font-size:.95rem; font-weight:700; color:var(--ink); }
.card__lead{ margin-top:.5rem; font-size:.85rem; line-height:1.6; color:var(--body); }
.card .muted{ margin-top:.4rem; font-size:.78rem; line-height:1.55; color:var(--body); }
.card .strong{ margin-top:.7rem; font-size:.9rem; font-weight:700; color:var(--ink); }
.cards3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.saved{ margin-top:1rem; display:none; align-items:center; gap:.5rem; font-size:.8rem; color:#2E7D45; }
.saved.is-on{ display:flex; }
.saved .ico{ width:.95rem; height:.95rem; }

.spec{ margin-top:1.2rem; display:grid; gap:.05rem; }
.spec .row{ display:flex; justify-content:space-between; gap:1rem; padding:.65rem 0;
  border-bottom:1px solid var(--line-soft); font-size:.83rem; color:var(--body); }
.spec .row:last-child{ border-bottom:0; }
.spec .row b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.spec .row--total{ margin-top:.4rem; padding-top:.9rem; border-top:2px solid var(--line);
  border-bottom:0; font-size:.95rem; }
.spec .row--total b{ font-size:1.25rem; font-weight:800; letter-spacing:-.02em; }
.detail__acts{ margin-top:1.4rem; display:flex; gap:.7rem; flex-wrap:wrap; }
.btn--quiet{ background:#F3F3EF; color:var(--body); padding:.75rem 1.2rem; font-size:.82rem; }
.btn--quiet:hover{ background:#EAEAE4; color:var(--ink); }

/* ---- Nachrichten ---- */
/* Der Nachrichtenverlauf soll neben der Spezifikation stehen und mitwachsen,
   nicht bei einer festen Hoehe abschneiden. */
.thread{ background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-md);
  display:flex; flex-direction:column; position:sticky; top:1.6rem;
  max-height:calc(100vh - 8rem); min-height:24rem; }
.thread__body{ flex:1; }
.thread__head{ padding:1rem 1.2rem; border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; gap:.6rem; }
.thread__head h3{ font-size:.9rem; font-weight:700; color:var(--ink); }
.thread__head .ico{ width:1rem; height:1rem; color:var(--orange); }
.thread__body{ padding:1.1rem 1.2rem; display:grid; gap:.9rem; overflow-y:auto; }
.msg{ max-width:88%; }
.msg__who{ font-size:.66rem; font-weight:600; color:var(--body-soft); margin-bottom:.3rem; }
.msg__txt{ font-size:.8rem; line-height:1.55; padding:.7rem .85rem; border-radius:.7rem; }
.msg--them .msg__txt{ background:#F4F4F0; color:#41556A; border-top-left-radius:.2rem; }
.msg--me{ margin-left:auto; }
.msg--me .msg__who{ text-align:right; }
.msg--me .msg__txt{ background:#FFF3DF; color:var(--ink); border-top-right-radius:.2rem; }
.msg__at{ margin-top:.25rem; font-size:.62rem; color:var(--body-soft); }
.msg--me .msg__at{ text-align:right; }
.composer{ border-top:1px solid var(--line-soft); padding:.9rem 1rem; display:flex; gap:.5rem; }
.composer textarea{ flex:1; min-width:0; resize:none; height:2.6rem; padding:.65rem .8rem;
  border:1px solid var(--line); border-radius:.6rem; font-size:.8rem; font-family:inherit; }
.composer textarea:focus{ outline:none; border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,153,0,.14); }
.composer .btn{ padding:.65rem .8rem; align-self:flex-end; }
.composer .btn .ico{ width:1rem; height:1rem; }

/* ---- App-Seite ---- */
.promo{ display:grid; grid-template-columns:1fr 12rem; gap:1.8rem; align-items:center; }
.qr{ aspect-ratio:1; border-radius:var(--r-md); background:var(--navy);
  display:grid; place-items:center; }
.qr .ico{ width:3.4rem; height:3.4rem; color:var(--orange); stroke-width:1.2; }

.empty{ background:#fff; border:1px dashed var(--line); border-radius:var(--r-md);
  padding:2.6rem 1.6rem; text-align:center; }
.empty .ico{ width:1.9rem; height:1.9rem; color:var(--body-soft); }
.empty h3{ margin-top:.9rem; font-size:1rem; font-weight:700; color:var(--ink); }
.empty p{ margin-top:.45rem; font-size:.82rem; color:var(--body); }

@media (max-width:1180px){
  .detail{ grid-template-columns:1fr; }
  .qcards{ grid-template-columns:1fr 1fr; }
  .cards3{ grid-template-columns:1fr; }
  .promo{ grid-template-columns:1fr; }
  .qr{ max-width:12rem; }
}
@media (max-width:660px){
  .qcards{ grid-template-columns:1fr; }
  .tbl{ overflow-x:auto; }
  .tbl table{ min-width:34rem; }
  .view__head h1{ font-size:1.25rem; }
}

/* ---- Anmeldeseite ---- */
.tabs{ margin-top:1.6rem; display:grid; grid-template-columns:1fr 1fr; gap:.4rem;
  background:#F3F3EF; border-radius:.7rem; padding:.3rem; }
.tabs button{ display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:0; background:none; border-radius:.5rem; padding:.6rem .5rem; cursor:pointer;
  font-size:.82rem; font-weight:600; color:var(--body); transition:all .18s ease; }
.tabs button .ico{ width:.95rem; height:.95rem; }
.tabs button[aria-pressed="true"]{ background:#fff; color:var(--ink);
  box-shadow:0 .3rem .8rem -.4rem rgba(6,30,54,.28); }
.si-pane{ display:none; }
.si-pane.is-on{ display:block; }
.si-step{ display:none; }
.si-step.is-on{ display:block; }
.si-sent{ margin-top:1.6rem; font-size:.85rem; line-height:1.6; color:var(--body); }
.si-sent b{ color:var(--ink); }
.gate__alt{ margin-top:1rem; font-size:.78rem; color:var(--body); text-align:center; }
.gate__alt a{ color:var(--orange-dp); font-weight:600; }
.gate__alt a:hover{ text-decoration:underline; }
.gate__note a{ color:var(--orange-dp); font-weight:600; }

.pw{ position:relative; }
.pw input{ padding-right:2.9rem; }
.pw button{ position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  border:0; background:none; padding:.4rem; cursor:pointer; color:var(--body-soft); }
.pw button .ico{ width:1.05rem; height:1.05rem; display:block; }
.pw button:hover{ color:var(--ink); }

.code{ margin-top:1.1rem; display:grid; grid-template-columns:repeat(6,1fr); gap:.5rem; }
.code input{ width:100%; text-align:center; font-size:1.25rem; font-weight:700;
  font-variant-numeric:tabular-nums; padding:.75rem .2rem; border:1px solid var(--line);
  border-radius:.6rem; background:#fff; color:var(--ink); }
.code input:focus{ outline:none; border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,153,0,.16); }
.code input.is-set{ background:#FFF8EA; border-color:rgba(255,153,0,.5); }

/* =============================================================
   Unterseite: PV Installation
   ============================================================= */
.pvhero{ position:relative; overflow:hidden; isolation:isolate; }
.pvhero__media{
  position:absolute; inset:0; z-index:-2;
  background-image:url("https://cdn.sunny.cy/assets/img/pvhero-media.webp"),
    linear-gradient(100deg,#FFE6BE 0%,#F8CE94 22%,#CDAE86 44%,#8FA9B4 66%,#5C7F92 100%);
  /* Das Motiv ist fast quadratisch, 42 % der Hoehe fallen weg. Der Ausschnitt
     haelt den Teleskoplader mit dem Schriftzug auf Ausleger und Aufbau im
     Bild - das ist hier der Markenmoment. */
  background-size:cover; background-position:54% 72%; background-repeat:no-repeat;
}
/* Schleier bewusst schmal: das Fahrzeug steht links, also genau dort, wo Text
   liegt. Ein flaechiger Schleier haette es grau gewaschen. Der weisse Ausleger
   traegt die dunkle Schrift selbst. Zweites Band fuer die Kopfnavigation,
   drittes fuer den Fliesstext ueber der Maschine. */
.pvhero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(98deg, rgba(255,251,244,.92) 0%, rgba(255,248,236,.8) 18%,
      rgba(255,244,226,.52) 31%, rgba(255,239,213,.2) 43%, rgba(255,234,200,0) 56%),
    linear-gradient(180deg, rgba(255,252,246,.82) 0%, rgba(255,252,246,.36) 10%,
      rgba(255,252,246,0) 22%),
    radial-gradient(52% 34% at 12% 68%, rgba(255,251,244,.5), rgba(255,251,244,0) 72%);
}
/* Hoehe wie in der Vorlage (669 px bei 1440). Das Motiv ist fast quadratisch
   und wird stark beschnitten - mehr Hoehe heisst hier weniger Verlust. */
.pvhero__inner{ padding-block:7.5rem 6rem; min-height:41.8rem; display:flex;
  flex-direction:column; justify-content:center; }
.pvhero h1{
  font-size:clamp(2.1rem,3.4vw,3rem); font-weight:800;
  line-height:1.14; letter-spacing:-.035em; color:var(--ink); max-width:30.5rem;
}
.pvhero__lede{ margin-top:1.15rem; font-size:1rem; line-height:1.6;
  color:#3F5468; max-width:22rem; }
.pvhero__cta{ margin-top:1.9rem; display:flex; flex-wrap:wrap; gap:.8rem; }
.pvhero__cta .btn--ghost{ padding:.85rem 1.1rem .85rem 1.4rem; font-size:.9rem; gap:.6rem; }
.pvhero__cta .btn--ghost .pip{ width:1.5rem; height:1.5rem; }
.pvhero__cta .btn--sun{ padding:.75rem .75rem .75rem 1.5rem; font-size:.9rem; }
.pvhero__cta .btn--sun .pip{ width:1.7rem; height:1.7rem; }

/* ---- weisser Merkmalsstreifen unter dem Kopf ---- */
.stripe{ background:var(--card); }
.stripe__grid{ display:grid; grid-template-columns:repeat(4,1fr);
  padding-block:2.1rem; gap:1.6rem; }
.stripe__item{ display:flex; gap:.9rem; padding-left:1.6rem;
  border-left:1px solid var(--line-soft); }
.stripe__item:first-child{ padding-left:0; border-left:0; }
.stripe__item .ico{ width:1.6rem; height:1.6rem; color:var(--orange); stroke-width:1.4; flex:none; }
.stripe__item h3{ font-size:.85rem; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.stripe__item p{ margin-top:.35rem; font-size:.76rem; line-height:1.5; color:var(--body); }

/* ---- Text links, Bild rechts ---- */
.zone{ background:#F4F5F8; }
.split{ display:grid; grid-template-columns:1fr 1.05fr; gap:3rem; align-items:center; }
.split h2{ margin-top:.6rem; font-size:clamp(1.5rem,2.2vw,1.95rem); font-weight:700;
  line-height:1.24; letter-spacing:-.03em; color:var(--ink); max-width:27.5rem; }
.split > div > p{ margin-top:1.1rem; font-size:.9rem; line-height:1.7; color:var(--body); max-width:26rem; }
.split .ticks{ margin-top:1.5rem; gap:.8rem; }
.split .ticks li{ font-size:.85rem; }
.split .ticks .ico{ width:1.1rem; height:1.1rem; }
.split .btn{ margin-top:1.9rem; padding:.75rem .75rem .75rem 1.5rem; font-size:.88rem; }
.split .btn .pip{ width:1.7rem; height:1.7rem; }
.split__media{
  aspect-ratio:4/3; border-radius:var(--r-md); background-size:cover; background-position:center;
  background-image:url("https://cdn.sunny.cy/assets/img/split-media.webp"),
    linear-gradient(150deg,#EFE9E0 0%,#D9D0C2 40%,#B0A79A 100%);
}

/* ---- Kennzahlenkarte ---- */
.statcard{
  background:var(--card); border-radius:var(--r-md); box-shadow:var(--shadow-card);
  padding:2.1rem 2.2rem; display:grid; grid-template-columns:minmax(13rem,24%) 1fr;
  gap:2rem; align-items:center;
}
.statcard h2{ margin-top:.55rem; font-size:1.55rem; font-weight:800; line-height:1.2;
  letter-spacing:-.035em; color:var(--ink); }
.statcard__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
.statcard__item{ padding-left:1.6rem; border-left:1px solid var(--line-soft); }
.statcard__item:first-child{ padding-left:0; border-left:0; }
.statcard__item .ico{ width:1.9rem; height:1.9rem; color:var(--orange); stroke-width:1.3; }
.statcard__item b{ display:block; margin-top:.75rem; font-size:1.6rem; font-weight:800;
  letter-spacing:-.03em; color:var(--ink); }
.statcard__item span{ display:block; margin-top:.25rem; font-size:.78rem; color:var(--body); }

/* ---- Ablauf und Abschlusskarte ---- */
.pvbottom{ display:grid; grid-template-columns:1.72fr 1fr; gap:1.4rem; align-items:stretch; }
.process{ background:var(--card); border-radius:var(--r-md);
  border:1px solid var(--line-soft); padding:1.9rem 2rem 2.1rem; }
.process h2{ margin-top:.55rem; font-size:1.4rem; font-weight:700;
  letter-spacing:-.03em; color:var(--ink); }
.steps5{ margin-top:2rem; display:grid; grid-template-columns:repeat(5,1fr); gap:.6rem; }
.step5{ text-align:center; position:relative; }
.step5__n{ width:1.9rem; height:1.9rem; border-radius:50%; margin:0 auto;
  background:linear-gradient(180deg,var(--orange-hi),var(--orange)); color:#3A2200;
  display:grid; place-items:center; font-size:.8rem; font-weight:800; position:relative; z-index:1; }
.step5::after{ content:""; position:absolute; top:.95rem; left:calc(50% + 1.3rem);
  right:calc(-50% + 1.3rem); border-top:2px dotted rgba(255,153,0,.55); }
.step5:last-child::after{ display:none; }
.step5 h3{ margin-top:1.1rem; font-size:.82rem; font-weight:700; color:var(--ink); }
.step5 p{ margin-top:.45rem; font-size:.72rem; line-height:1.5; color:var(--body); }

.sun-cta{ position:relative; overflow:hidden;
  background:linear-gradient(150deg,#FEF6EC 0%,#FDEEDF 55%,#FBE6D0 100%);
  border-radius:var(--r-md); padding:2rem 2rem 2.2rem; display:flex; flex-direction:column; }
.sun-cta h2{ font-size:1.35rem; font-weight:800; line-height:1.24;
  letter-spacing:-.03em; color:var(--ink); max-width:17.5rem; position:relative; }
.sun-cta > p{ margin-top:.8rem; font-size:.85rem; line-height:1.6; color:var(--body);
  max-width:16rem; position:relative; }
.sun-cta .btn{ margin-top:1.6rem; align-self:flex-start; position:relative;
  padding:.75rem .75rem .75rem 1.5rem; font-size:.88rem; }
.sun-cta .btn .pip{ width:1.7rem; height:1.7rem; }
.sun-cta__tel{ margin-top:1.2rem; display:flex; align-items:center; gap:.6rem;
  font-size:.88rem; font-weight:700; color:var(--ink); position:relative; }
.sun-cta__tel .ico{ width:1.1rem; height:1.1rem; color:var(--orange); }
.sun-cta .rays{ left:auto; right:-4rem; bottom:-5rem; width:19rem; height:12.6rem; opacity:.5; }

@media (max-width:1180px){
  .stripe__grid{ grid-template-columns:1fr 1fr; row-gap:1.8rem; }
  .stripe__item:nth-child(3){ padding-left:0; border-left:0; }
  .split{ grid-template-columns:1fr; gap:2rem; }
  .split h2, .split > div > p{ max-width:none; }
  .statcard{ grid-template-columns:1fr; }
  .statcard__grid{ grid-template-columns:1fr 1fr; row-gap:1.8rem; }
  .statcard__item:nth-child(3){ padding-left:0; border-left:0; }
  .pvbottom{ grid-template-columns:1fr; }
  .steps5{ grid-template-columns:1fr 1fr 1fr; row-gap:1.6rem; }
  .step5::after{ display:none; }
}
@media (max-width:660px){
  .stripe__grid{ grid-template-columns:1fr; }
  .stripe__item{ padding-left:0; border-left:0; }
  .statcard__grid{ grid-template-columns:1fr; }
  .statcard__item{ padding-left:0; border-left:0; }
  .steps5{ grid-template-columns:1fr; }
  .pvhero__inner{ padding-block:6.5rem 4rem; }
  .pvhero__media::after{ background:linear-gradient(180deg, rgba(255,251,244,.96) 0%,
    rgba(255,246,232,.92) 45%, rgba(255,238,214,.66) 100%); }
}

/* ---- Sprachumschalter ----
   Steht neben der Wortmarke, durch eine Haarlinie abgesetzt. Vier Sprachen
   sind zu viele fuer nebeneinanderliegende Kuerzel - deshalb ein Aufklappmenue
   mit den Sprachnamen in der jeweiligen Sprache. */
.head-left{ display:flex; align-items:center; gap:1rem; }
.lang{ position:relative; }
.lang__btn{
  display:inline-flex; align-items:center; gap:.4rem;
  border:0; background:none; cursor:pointer;
  padding:.35rem .5rem .35rem .95rem;
  border-left:1px solid rgba(6,30,54,.16);
  font-size:.78rem; font-weight:600; letter-spacing:.02em; color:var(--body);
  transition:color .18s ease;
}
.lang__btn .ico{ width:.95rem; height:.95rem; }
.lang__chev{ width:.7rem !important; height:.7rem !important; transition:transform .2s ease; }
.lang__btn:hover{ color:var(--ink); }
.lang__btn[aria-expanded="true"]{ color:var(--ink); }
.lang__btn[aria-expanded="true"] .lang__chev{ transform:rotate(180deg); }
.lang__cur{ min-width:1.5rem; text-align:left; }

.lang__menu{
  position:absolute; left:.45rem; top:calc(100% + .6rem); z-index:60;
  min-width:13rem; padding:.4rem;
  background:#fff; border:1px solid var(--line-soft); border-radius:.7rem;
  box-shadow:0 1.2rem 2.4rem -1rem rgba(6,30,54,.32);
  animation:lang-in .16s ease;
}
@keyframes lang-in{ from{ opacity:0; transform:translateY(-.35rem); } }
.lang__menu button{
  display:flex; align-items:baseline; gap:.65rem; width:100%;
  border:0; background:none; cursor:pointer; text-align:left;
  padding:.5rem .65rem; border-radius:.45rem;
  transition:background .15s ease;
}
.lang__menu button b{ font-size:.72rem; font-weight:700; color:var(--body-soft);
  min-width:1.6rem; letter-spacing:.04em; }
.lang__menu button span{ font-size:.85rem; font-weight:500; color:#41556A; }
.lang__menu button:hover{ background:#F6F6F2; }
.lang__menu button[aria-current="true"]{ background:#FFF3DF; }
.lang__menu button[aria-current="true"] b,
.lang__menu button[aria-current="true"] span{ color:var(--ink); font-weight:700; }
.lang__note{ margin:.4rem .65rem .25rem; padding-top:.45rem;
  border-top:1px solid var(--line-soft);
  font-size:.65rem; line-height:1.4; color:var(--body-soft); }

@media (max-width:900px){
  .site-head{ gap:.9rem; }
  .head-left{ gap:.7rem; }
  .lang__btn{ padding-left:.7rem; }
}
@media (max-width:660px){
  .lang__btn > .ico:first-child{ display:none; }
  .lang__menu{ left:auto; right:-2rem; }
}