/* =======================================================================
   HeiselConnect – Unterseite "Marketing & Design"
   Nur die seiteneigenen Grafiken. Die Huelle steht in page.css, die
   VOR dieser Datei eingebunden wird.

     0. Hero
     1. Leistungen: Kachelblock in ungleichen Formaten
     2. Vorgehen: vier Stufen als Spur
     3. Vorher/Nachher: einzeln gewachsen gegen System
     4. Breakpoints
   ======================================================================= */

/* Die Überschrift ist kurz genug fuer die 20ch aus page.css und bricht
   dort von selbst in zwei Zeilen. Kein eigener Wert noetig. */

/* ------------------------------------------------- 1. Leistungen
   Vier Kacheln in ungleichen Formaten, die sich zu einem Block fuegen:
   links eine hohe, rechts oben zwei kleine, darunter eine breite. Der
   Abschnitt sieht damit selbst aus wie das Designsystem, von dem er
   spricht.

   In jeder Kachel steckt eine kleine Probe ihres Mediums. Sie ist als
   SVG gezeichnet, damit sie auf jedem Bildschirm scharf bleibt; die
   Farben stehen an den Gruppen, weil fill und stroke in SVG vererbt
   werden. */
.bento{ display: grid; gap: clamp(0.9rem, 0.5rem + 1.2vw, 1.4rem); }

.bento-cell{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.3rem, 1rem + 1.2vw, 1.9rem);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 22px;
  overflow: hidden;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
@media (hover: hover){
  .bento-cell:hover{ border-color: var(--hc-green-ring); transform: translateY(-3px); }
}

.bento-art{ display: block; margin-bottom: 1.3rem; }
.bento-art svg{ width: 100%; height: auto; display: block; }

/* schiebt den Text an den Fuss der Kachel – in einer Reihe stehen die
   Titel damit auf einer Linie, egal wie hoch die Kachel ist */
.bento-body{ margin-top: auto; }

.bento-cell h3{
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(1.05rem, 0.96rem + 0.4vw, 1.28rem);
  line-height: 1.2;
}
.bento-cell p{
  margin-top: 0.55rem;
  color: var(--muted);
  font-size: 0.99rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* --- Bauteile der Proben --- */
.art-frame{ fill: none; stroke: rgba(34, 34, 35, 0.20); stroke-width: 1.6; }
.art-line{ fill: none; stroke: rgba(34, 34, 35, 0.16); stroke-width: 3.4; stroke-linecap: round; }
.art-dot{ fill: rgba(34, 34, 35, 0.20); stroke: none; }
.art-fill{ fill: var(--hc-green-soft); stroke: rgba(116, 180, 118, 0.45); stroke-width: 1.4; }
.art-fill--strong{ fill: rgba(116, 180, 118, 0.42); stroke: var(--green-deep); }
.art-swatch{ stroke: none; stroke-width: 1; }
.art-tick{ fill: none; stroke: rgba(34, 34, 35, 0.20); stroke-width: 2; stroke-linecap: round; }
.art-specimen{
  font-family: var(--hc-font);
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.03em;
  fill: var(--ink);
  stroke: none;
}

/* ------------------------------------------------- 2. Vorgehen
   Vier Stufen als Spur. Ziffer und Strich darunter werden von oben nach
   unten kraeftiger und laenger: die Gestaltung wird erst am Ende laut,
   die Botschaft steht vorher. */
.track{ max-width: 48rem; margin-inline: auto; }

.track-step{
  display: grid;
  grid-template-columns: clamp(3.6rem, 8vw, 6.4rem) 1fr;
  column-gap: clamp(1.1rem, 3vw, 2.4rem);
  align-items: start;
  padding-block: clamp(1.3rem, 0.9rem + 1.4vw, 2.1rem);
  border-top: 1px solid var(--hair-dark);
}
.track-step:last-child{ border-bottom: 1px solid var(--hair-dark); }

.track-num{
  font-family: var(--hc-mono);
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.4rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.track-num::after{
  content: "";
  display: block;
  width: var(--w);
  height: 3px;
  margin-top: 0.8rem;
  border-radius: 2px;
  background: currentColor;
}

.track-step:nth-child(1){ --w: 34%; }
.track-step:nth-child(2){ --w: 56%; }
.track-step:nth-child(3){ --w: 78%; }
.track-step:nth-child(4){ --w: 100%; }

/* Die Ziffern steigern sich von blassem zu vollem Markengruen – die
   Steigerung steckt damit in der Farbe selbst. */
.track-step:nth-child(1) .track-num{ color: rgba(116, 180, 118, 0.42); }
.track-step:nth-child(2) .track-num{ color: rgba(116, 180, 118, 0.62); }
.track-step:nth-child(3) .track-num{ color: rgba(116, 180, 118, 0.82); }
.track-step:nth-child(4) .track-num{ color: var(--green); }

.track-body h3{ text-transform: uppercase; letter-spacing: 0.03em; }
.track-body p{
  margin-top: 0.5rem;
  color: var(--muted-dark);
  font-size: 1.02rem;
  line-height: 1.55;
}

/* ------------------------------------------------- 3. Vorher/Nachher
   Links dieselben Materialien, wie sie ueber Jahre einzeln entstanden
   sind: schief, in fremden Farben, in eigenen Formaten. Rechts dieselben
   Inhalte auf einem Raster, in einer Palette, mit einem Schriftbild.
   Festes Entwurfsraster 640 x 360. */
.before-after{
  width: 100%;
  border-radius: var(--radius);
  padding: clamp(0.7rem, 1.6vw, 1.3rem);
  background: #fff;
  border: 1px solid var(--hair);
  box-shadow: var(--shadow);
}
.before-after svg{ width: 100%; height: auto; display: block; }

.ba-label{
  font-family: var(--hc-mono);
  font-size: 15px;
  letter-spacing: 0.14em;
  /* 0.62 statt eines blasseren Wertes: die Beschriftung ist Text im Bild
     und erreicht so 4,5:1 auf der weissen Karte. */
  fill: rgba(34, 34, 35, 0.62);
  stroke: none;
}
/* Die rechte Seite ist der erreichte Zustand – sie traegt die Markenfarbe. */
.ba-label--sys{ fill: var(--green-deep); }

.ba-loose{ fill: #fff; stroke: rgba(34, 34, 35, 0.26); stroke-width: 1.5; }
.ba-loose path{ fill: none; stroke: rgba(34, 34, 35, 0.16); stroke-width: 3.2; stroke-linecap: round; }

/* die fremden Farben sind der eigentliche Befund: vier Marken in einer */
.ba-chip{ stroke: none; }
.ba-chip--a{ fill: #c9a227; }
.ba-chip--b{ fill: #4a6fb5; }
.ba-chip--c{ fill: #a45a9c; }
.ba-chip--d{ fill: #2f9c93; }

/* Das einzige Gruen der Seite ausserhalb der Handlungsaufrufe. Es traegt
   hier eine Aussage: links vier verschiedene Farben, rechts ueberall
   dieselbe - genau das ist das Ergebnis. */
.ba-chip--sys{ fill: var(--green-deep); }

/* Der Pfeil ist das Zeichen fuer "vorher -> nachher". */
.ba-arrow{
  fill: none;
  stroke: var(--green-deep);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ba-rail{ fill: none; stroke: rgba(116, 180, 118, 0.40); stroke-width: 1.2; stroke-dasharray: 5 5; }
.ba-tidy{ fill: #fff; stroke: rgba(34, 34, 35, 0.22); stroke-width: 1.5; }
.ba-tidy-line{ fill: none; stroke: rgba(34, 34, 35, 0.16); stroke-width: 3.2; stroke-linecap: round; }

/* ------------------------------------------------- 4. Breakpoints */
@media (min-width: 860px){
  /* Der Block: links eine hohe Kachel ueber beide Zeilen, rechts oben
     zwei schmale, darunter eine breite ueber beide Spalten. */
  .bento{ grid-template-columns: 1.15fr 1fr 1fr; }
  .bento-cell--lead{ grid-row: span 2; }

  /* Die breite Kachel stellt Probe und Text nebeneinander. Sonst wuerde
     die Probe ueber die volle Breite laufen, die Kachel doppelt so hoch
     wie noetig – und die hohe Kachel daneben bekaeme ein Loch. */
  .bento-cell--wide{
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
    gap: clamp(1.2rem, 2.5vw, 2.4rem);
  }
  .bento-cell--wide .bento-art{ flex: 0 0 44%; margin-bottom: 0; }
  .bento-cell--wide .bento-body{ margin-top: 0; }

  /* Die hohe Kachel bekommt mehr Hoehe, als ihr Inhalt braucht. Der
     zweite auto-Rand teilt den Ueberschuss auf – die Probe steht dann
     mittig statt oben angeklebt. */
  .bento-cell--lead .bento-art{ margin-top: auto; }
}