/* ==========================================================================
   Unternehmenszweig: /unternehmen/, /ueber-uns/, /marken/
   Angelegt am 29.08.2026. Alle drei Seiten teilen diese Datei, weil sie
   dieselben Bauformen tragen - wie pages/karriere.css die drei Karriereseiten.

   KEINE NEUE FORMENSPRACHE:
     .unkopf    von .hekopf   (/herstellung/)
     .unzahlen  von .hezahlen (/herstellung/)
     .unsaeulen von .hesicher (/herstellung/) bzw. .kabereich (/karriere/)
     .unmarken  von .heweg    (die abwechselnde Kette)
     .unwege    von .hewege
   Das blaue Band kommt aus components/bildband.css.
   ========================================================================== */

/* --- Kopf ---------------------------------------------------------------- */
/* Bauform in components/bogenhero.css. Hier nur die Werte dieser Seiten. */
.unkopf {
  --hero-hoehe: 34rem;
  --schwung-grund: var(--bg-soft);
}

.unkopf--auf-weiss { --schwung-grund: var(--surface); }
/* Auf /ueber-uns/ folgt das BLAUE Band. Der Bogen traegt dessen Farbe - so
   laeuft die helle Kopfflaeche in einer Kurve ins Blau, statt eine graue
   Stufe dazwischenzusetzen. */
.unkopf--auf-blau { --schwung-grund: var(--toem-blau); }

/* --- Zahlen -------------------------------------------------------------- */
.unzahlen { background: var(--bg-soft); padding-block: var(--sp-sektion); }
.unzahlen__reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--sp-6) var(--sp-7);
  align-content: start;
}
.unzahlen__zahl { display: grid; gap: var(--sp-1); margin: 0; align-content: start; }
.unzahlen__zahl b {
  font-size: var(--fs-600);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--toem-blau);
}
.unzahlen__zahl span { font-size: var(--fs-200); color: var(--text-muted); }

/* Bildmittelpunkt des Bandes auf dieser Seite. Als Klasse und nicht inline:
   ein Prozentzeichen im Vorlagenblock des Generators bricht dessen
   Prozent-Formatierung. */
.bildband--kern { --band-fokus: 55% 45%; }

/* --- Vier Saeulen -------------------------------------------------------- */
/* ABWECHSELND BILD UND TEXT, Bauform von .heweg auf /herstellung/ - auf
   Kundenwunsch vom 30.08.2026. Vorher vier schmale Karten mit kleinem
   Zeichen; auf der Identitaetsseite des Unternehmens war das zu wenig.

   OHNE ZIFFERNKREIS. /herstellung/ nummeriert seine Schritte, weil sie
   aufeinander folgen. Die vier Saeulen tun das nicht - sie stehen
   nebeneinander, deshalb <ul> statt <ol> und keine Zaehlung.

   ACHTUNG, DRITTE KOPIE: dieselbe Wechselzeile steht als .heweg__schritt in
   pages/herstellung.css und als .unmarke weiter unten in dieser Datei. Bei
   der vierten gehoert sie in ein Bauteil, so wie knopf, stellenliste, faq,
   bildband und wegekarte. Gemeldet, nicht ungefragt umgebaut. */
.unsaeulen { background: var(--surface); padding-block: var(--sp-sektion); }
.unsaeulen__ueber { margin-bottom: var(--sp-8); }

@media (max-width: 56rem) {  }

/* --- Die Marken ---------------------------------------------------------- */
/* Abwechselnd Logo und Text, Bauform von .heweg auf /herstellung/. Keine
   eigene Sektionsueberschrift - der Hero sagt es bereits. Deshalb fehlt hier
   auch .unmarken__ueber und der Eintrag in den vier Titel-Selektorlisten. */
.unmarken { background: var(--surface); padding-block: var(--sp-sektion); }
/* GEMESSEN: ueber die volle Containerbreite von 1208 px belegen Logoplatte
   und Textspalte zusammen nur 880 px - der Rest bleibt leer. Die Liste steht
   deshalb enger und mittig; mit einem Bild statt eines Logos war die Zeile
   noch gefuellt, mit einem Markenzeichen ist sie es nicht. */
.unmarken__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 56rem;
  margin-inline: auto;
  display: grid;
  gap: clamp(var(--sp-8), 7vw, var(--sp-9));
}
/* Die Logospalte ist schmaler als die Textspalte: ein Markenzeichen braucht
   keine halbe Seite, ein Absatz Text schon. Bei jeder zweiten Marke tauschen
   die Spaltenbreiten mit, sonst steht das schmale Logo in der breiten Spalte. */
/* SCHMALERE ERSTE SPALTE als die Grundform: dort steht ein Logo, kein Foto.
   Ein Markenzeichen braucht keine halbe Seite, ein Absatz Text schon. */
.unmarke { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }
.unmarke:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); }
.unmarke:nth-child(even) .unmarke__logo { order: 2; }
/* Kasten mit fester HOEHE, nicht mit aspect-ratio. GEMESSEN: mit
   aspect-ratio blieb die Hoehe unbestimmt, max-height: 100% am Bild loeste
   sich dann zu auto auf, und das SVG sprengte den Kasten auf 707x571 statt
   707x471. Eine definite Hoehe macht die Prozentangabe am Bild wirksam.
   Die beiden Zeichen haben sehr verschiedene Formate - 511x523 gegen
   736x372 - und wuerden bei fester Logohoehe unterschiedlich gross wirken.
   Der Kasten gleicht das aus und gilt fuer jedes weitere Logo aus dem CMS. */
/* Das Logo als Link auf die Website der Marke (inc/seiten-ergaenzungen.php,
   05.10.2026): ohne eigenen Kasten, damit der Logokasten bleibt, wie er ist. */
.unmarke__logolink { display: contents; }
.unmarke__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 13rem;
  padding: clamp(var(--sp-5), 3vw, var(--sp-6));
  border-radius: var(--r-card);
  background: var(--bg-soft);
}
/* GEMESSEN: im Raster loesen sich WEDER max-height: 100% NOCH height: 100%
   am Bild auf - die Rasterzeile ist inhaltsbestimmt, der Bezug ist zirkulaer,
   und das hohe SVG lief mit 278 px aus einem 144 px hohen Kasten heraus.
   Deshalb ist der Kasten ein Flexcontainer: dort ist seine feste Hoehe ein
   definiter Bezug, das Bild fuellt ihn, und object-fit: contain setzt das
   Zeichen proportional hinein. */
.unmarke__zeichen {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Die Vertriebszeile traegt die Sortenfarbe der Marke nicht - es sind zwei
   fremde Marken, keine Sorten des Hauses. Gold als neutrale Auszeichnung. */
.unmarke__wo {
  margin: 0;
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--toem-gold);
}
/* Pfeillink nach .rzoel__mehr, aber NICHT in Versalien: hier steht ein
   Markenname im Linktext, und "DIE KLEINE MUEHLE" waere ein anderer Name. */
.unmarke__web {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  justify-self: start;
  font-size: var(--fs-300);
  font-weight: 600;
  text-decoration: none;
  color: var(--toem-blau);
  transition: color var(--dur) var(--ease);
}
.unmarke__web:hover,
.unmarke__web:focus-visible { color: var(--toem-gold); }
.unmarke__web svg {
  width: var(--zeichen-inline);
  height: var(--zeichen-inline);
  flex: none;
  transition: transform var(--dur) var(--ease);
}
.unmarke__web:hover svg,
.unmarke__web:focus-visible svg { transform: translateX(3px); }

@media (max-width: 56rem) {
  .unmarke,
  .unmarke:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  /* Logo immer oben, egal ob gerade oder ungerade - sonst rutscht es bei
     jeder zweiten Marke unter den Text. */
  .unmarke:nth-child(even) .unmarke__logo { order: 0; }
  /* Einspaltig laeuft die Platte nicht ueber die volle Breite - eine 700 px
     breite graue Flaeche mit einem kleinen Zeichen darin waere mehr Flaeche
     als Aussage. Gleiche Groesse wie zweispaltig, damit die Zeichen ueberall
     gleich gross stehen. */
  .unmarke__logo { max-width: 17rem; }
}

/* AM TELEFON DOCH UEBER DIE VOLLE BAHN, Zuruf vom 22.09.2026. Die Deckelung
   oben zielt auf breite Schirme: dort waere die Platte 700 px breit und
   traege ein kleines Zeichen in viel Grau. Bei 390 px ist die Bahn aber nur
   350 px breit - gemessen standen 272 px Platte neben 78 px Rest, und das
   sieht nach Versehen aus statt nach Absicht. Die Hoehe bleibt, damit die
   Zeichen ueberall gleich gross stehen. */
@media (max-width: 34rem) {
  .unmarke__logo { max-width: none; }
}

/* --- Wege ---------------------------------------------------------------- */
.unwege { background: var(--bg-soft); padding-block: var(--sp-sektion); }
.unwege__ueber { margin-bottom: var(--sp-8); }
.unwege__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: clamp(var(--sp-5), 3vw, var(--sp-6));
  align-content: start;
}