/* cataloop.de · Startseite, Draft vom 22.09.2026, zweite Fassung
   Werte aus cataloop-tokens und cataloop-digital-brand. Kein Schwarz, keine Schatten,
   2px Radius, Schriften lokal. Eigenbauten sind als solche markiert.
   Zwei Mittel tragen die Abwechslung ab dem Abschnitt Werkzeuge: der gezeichnete Strich
   (Vorbild: die Quadrate der alten Seite) und die von Hand geschnittene Farbfläche. */

/* ---------- Schriften, lokal ---------- */
@font-face { font-family: 'Poppins'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/Poppins-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/Poppins-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/Poppins-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/Poppins-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-weight: 300 400; font-style: normal; font-display: swap; src: url('../fonts/NunitoSans-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-weight: 600 700; font-style: normal; font-display: swap; src: url('../fonts/NunitoSans-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-weight: 300 400; font-style: italic; font-display: swap; src: url('../fonts/NunitoSans-Italic.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  --berry: #891F5E; --berry-light: #A83377; --berry-dark: #6B1849;
  --rust: #DD6541; --rust-light: #E8845F;
  --lime: #B4D915; --lime-dark: #9BBD0F;
  --olive: #90862D; --olive-light: #A89D44; --olive-deep: #6B6421;
  --paper: #EDEBE8; --paper-warm: #F5F3F0;
  --ink: #4E4E4E; --ink-light: #6B6B6B; --ink-lighter: #999999;
  --white: #FFFFFF;
  --h-font: 'Poppins', system-ui, -apple-system, sans-serif;
  --b-font: 'Nunito Sans', system-ui, -apple-system, sans-serif;
  --h1: clamp(36px, 6vw, 60px); --h1-hero: clamp(40px, 6.5vw, 68px); --h2: clamp(30px, 5vw, 48px); --h3: clamp(20px, 3vw, 24px);
  --body: clamp(16px, 2.2vw, 19px); --small: clamp(14px, 1.8vw, 16px);
  --radius: 2px; --radius-sm: 2px;
  --line: #D9D6D2;
  --transition: all .3s cubic-bezier(.4,0,.2,1);

  /* Gezeichnete Striche als Bild. Waagerecht im Feld 100 x 10, senkrecht im Feld 10 x 100,
     beide werden auf die Länge des Bauteils gestreckt und behalten ihre Strichstärke.
     Je Richtung zwei Fassungen (a, b), damit Nachbarn nicht gleich wackeln. */
  --strich-h-rust: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M0.5,5.8 C12,4.2 25,6.9 39,5.2 S66,3.9 80,5.7 S94,6.1 99.5,4.6' fill='none' stroke='%23DD6541' stroke-width='3.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
  --strich-h-rust-stark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'><path d='M0.6,7 C12,5 25,8.2 39,6.2 S66,4.6 80,6.8 S94,7.3 99.4,5.4' fill='none' stroke='%23DD6541' stroke-width='5.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
  --strich-h-weiss-stark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'><path d='M0.6,5.4 C15,7.6 30,4.6 46,6.7 S72,7.9 86,5.6 S96,5 99.4,6.8' fill='none' stroke='%23FFFFFF' stroke-width='5' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
  --strich-h-berry-a: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M0.5,5.8 C12,4.2 25,6.9 39,5.2 S66,3.9 80,5.7 S94,6.1 99.5,4.6' fill='none' stroke='%23891F5E' stroke-width='3.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
  --strich-h-berry-b: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M0.5,4.4 C15,6.3 30,3.8 46,5.6 S72,6.6 86,4.7 S96,4.2 99.5,5.6' fill='none' stroke='%23891F5E' stroke-width='3.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
  --strich-h-olive-a: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M0.5,5.8 C12,4.2 25,6.9 39,5.2 S66,3.9 80,5.7 S94,6.1 99.5,4.6' fill='none' stroke='%2390862D' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
  --strich-h-olive-b: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M0.5,4.4 C15,6.3 30,3.8 46,5.6 S72,6.6 86,4.7 S96,4.2 99.5,5.6' fill='none' stroke='%2390862D' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
  --strich-v-berry-a: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 100' preserveAspectRatio='none'><path d='M5.6,0.5 C4.1,14 6.7,28 5.1,42 S3.9,68 5.6,82 S6,95 4.5,99.5' fill='none' stroke='%23891F5E' stroke-width='3.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
  --strich-v-berry-b: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 100' preserveAspectRatio='none'><path d='M4.4,0.5 C6.2,16 3.9,31 5.5,47 S6.5,73 4.7,87 S4.3,96 5.5,99.5' fill='none' stroke='%23891F5E' stroke-width='3.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
  --strich-v-olive-a: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 100' preserveAspectRatio='none'><path d='M5.6,0.5 C4.1,14 6.7,28 5.1,42 S3.9,68 5.6,82 S6,95 4.5,99.5' fill='none' stroke='%2390862D' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
  --strich-v-olive-b: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 100' preserveAspectRatio='none'><path d='M4.4,0.5 C6.2,16 3.9,31 5.5,47 S6.5,73 4.7,87 S4.3,96 5.5,99.5' fill='none' stroke='%2390862D' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
:where(h1, h2, h3, h4) { margin-bottom: .6em; }
:where(p, ul, ol, dl, figure, blockquote) { margin-bottom: 1.1em; }
:where(div, section, article, aside, li, td, th, main, header, footer) > :last-child { margin-bottom: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 112px; }
body {
  font-family: var(--b-font); font-size: var(--body);
  color: var(--ink); background: var(--white);
  line-height: 1.65; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--berry); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--rust); }
/* hyphens: auto greift nur, wenn ein Wort nicht in die Zeile passt. Gemessen am 22.09.2026 bei
   320 Pixel Breite: „Organisationen." in der Hauptaussage ragte 11 Pixel über den Rand. */
h1, h2, h3, h4 { font-family: var(--h-font); line-height: 1.2; color: var(--berry); hyphens: auto; -webkit-hyphens: auto; }
h1 { font-size: var(--h1); font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: var(--h2); font-weight: 600; letter-spacing: -.01em; }
/* Der Rust-Balken markiert den Registerwechsel und steht nicht über jeder Überschrift
   (cataloop-digital-brand, Die Handschrift). Er hängt deshalb an einer Klasse. */
h2.balken::before { content: ''; display: block; width: 48px; height: 3px; background: var(--rust); margin-bottom: 18px; }
h3 { font-size: var(--h3); font-weight: 600; }
ul, ol { list-style: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 600px) { .container { padding: 0 24px; } }
section { padding: clamp(48px, 8vw, 96px) 0; }
:focus-visible { outline: 2px solid var(--berry); outline-offset: 2px; }
.lead { max-width: 66ch; }
.klein { font-size: var(--small); }

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.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;
}
.skip-link {
  position: absolute; top: -100%; left: 16px;
  background: var(--berry); color: var(--white);
  padding: 12px 24px; border-radius: var(--radius-sm);
  font-family: var(--h-font); font-size: 14px; font-weight: 600;
  z-index: 500; transition: top .2s;
}
.skip-link:focus { top: 16px; color: var(--white); }

/* ---------- Flächen nach Bedeutung ---------- */
.section--paper { background: var(--paper); }
.section--white { background: var(--white); }
.section--berry { background: var(--berry); color: var(--white); position: relative; isolation: isolate; }
.section--berry > .container { position: relative; z-index: 1; }
.section--hairline { border-top: 1px solid var(--olive); }

/* ---------- Gezeichneter Strich unter einem Wort (Eigenbau) ---------- */
.strich {
  background: var(--strich-h-rust-stark) no-repeat 0 100% / 100% 12px;
  padding-bottom: .1em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.strich--weiss { background-image: var(--strich-h-weiss-stark); }
/* Der Strich zieht sich beim Laden einmal. Der Endzustand ist der Normalzustand,
   damit er auch dort steht, wo keine Animation läuft. */
.strich--auftritt { animation: strich-ziehen .8s .5s cubic-bezier(.4,0,.2,1) both; }
@keyframes strich-ziehen { from { background-size: 0 12px; } }

/* ---------- Navigation. Mechanik aus design-tokens. Aussehen: Weiß mit Olive-Haarlinie,
   vier Links mit gezeichnetem Rust-Strich, Kontakt als Lime-Kachel in voller Höhe, bündig
   über der rechten Spalte des Mosaiks. Abweichung 1 in CLAUDE.md. ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--olive);
  transition: var(--transition);
}
.nav-inner { display: flex; align-items: stretch; max-width: 1200px; margin: 0 auto; min-height: 96px; }
.nav-logo { display: flex; align-items: center; padding: 12px 0 12px 16px; margin-right: auto; }
@media (min-width: 600px) { .nav-logo { padding: 14px 0 14px 24px; } }
.nav-logo img { height: 72px; width: auto; }
.nav-links {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--white); padding: 16px; flex-direction: column;
  border-bottom: 1px solid var(--line); gap: 4px;
}
.nav-links.open { display: flex; }
.nav-links a {
  font-family: var(--h-font); font-size: 16px; font-weight: 500;
  color: var(--ink); padding: 12px 16px; min-height: 48px;
  display: flex; align-items: center;
  background: var(--strich-h-rust) no-repeat 16px calc(50% + 15px) / 0 10px;
  transition: color .3s cubic-bezier(.4,0,.2,1), background-size .35s cubic-bezier(.4,0,.2,1);
}
@media (hover: hover) {
  .nav-links a:hover { color: var(--berry); background-size: 72px 10px; }
}
.nav-links a.active { color: var(--berry); font-weight: 600; background-size: 72px 10px; }
/* Unterseiten markieren ihren Punkt über aria-current, das Scroll-Skript kennt nur Abschnitte der Startseite */
.nav-links a[aria-current="page"] { color: var(--berry); font-weight: 600; background-size: 72px 10px; }
.nav-toggle {
  display: flex; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 12px; min-width: 48px; min-height: 48px; margin: 0 6px;
  align-self: center; align-items: center; justify-content: center;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); transition: var(--transition); }
.nav-kachel {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--lime); color: var(--berry-dark);
  font-family: var(--h-font); font-size: 16px; font-weight: 600;
  padding: 0 22px; min-width: 124px;
  transition: background-color .3s cubic-bezier(.4,0,.2,1);
}
.nav-kachel svg { width: 22px; height: 22px; flex: none; }
.nav-kachel:hover { color: var(--berry-dark); }
@media (hover: hover) { .nav-kachel:hover { background: var(--lime-dark); } }
.nav-kachel:focus-visible { outline-color: var(--berry-dark); outline-offset: -6px; }
@media (min-width: 900px) {
  /* Dritte Spalte 16 Prozent: so breit wie die rechte Spalte des Mosaiks (4 von 10 Teilen aus 40 Prozent). */
  .nav-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) 16%; min-height: 100px; }
  .nav-links {
    display: flex; position: static; background: none;
    padding: 0; border-bottom: none; flex-direction: row;
    gap: 0; justify-self: end; align-items: stretch; margin-right: 14px;
  }
  .nav-links a { padding: 0 18px; min-height: auto; background-position: 50% calc(50% + 17px); }
  .nav-links a.active { background-size: calc(100% - 30px) 10px; }
  .nav-links a[aria-current="page"] { background-size: calc(100% - 30px) 10px; }
  .nav-toggle { display: none; }
}
@media (min-width: 900px) and (hover: hover) {
  .nav-links a:hover { background-size: calc(100% - 30px) 10px; }
}

/* ---------- Buttons ---------- */
.cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--h-font); font-size: var(--small); font-weight: 600;
  padding: 14px 32px; border-radius: var(--radius);
  border: 2px solid transparent; cursor: pointer; transition: var(--transition);
  min-height: 48px; text-decoration: none;
}
.cta-btn.lime { background: var(--lime); color: var(--berry-dark); }
@media (hover: hover) { .cta-btn.lime:hover { background: var(--lime-dark); transform: translateY(-1px); color: var(--berry-dark); } }
/* Outline auf Paper, nach cataloop-digital-brand: nur Rand, Fläche und Lage ändern sich beim Hover */
.cta-btn.outline { background: transparent; color: var(--berry); border-color: var(--berry); }
@media (hover: hover) { .cta-btn.outline:hover { border-color: var(--berry-dark); background: rgba(137,31,94,.06); transform: translateY(-1px); } }

/* ---------- Link zur Übersicht am Kopf eines Abschnitts der Startseite (CAT-34). Kein Knopf,
   damit der Abschnitt nicht unterbrochen wird: Poppins in Berry, Pfeil, darunter der gezeichnete
   Rust-Strich wie beim aktiven Menüpunkt (Abweichung 5 in gestaltung.md). ---------- */
.weiter-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--h-font); font-weight: 600; font-size: clamp(17px, 1.8vw, 19px); line-height: 1.3;
  color: var(--berry); padding-bottom: 12px;
  background: var(--strich-h-rust) no-repeat 0 100% / 100% 10px;
}
.weiter-link svg { width: 22px; height: 22px; flex: none; transition: transform .3s cubic-bezier(.4,0,.2,1); }
/* Beim Überfahren bleibt die Farbe, Rust hielte als Text nur 3,49:1; der Pfeil rückt vor. */
.weiter-link:hover { color: var(--berry); }
@media (hover: hover) { .weiter-link:hover svg { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .weiter-link svg { transition: none; } }
.treppe-kopf .weiter-link { margin-top: 0; }
/* Überschrift links, Link rechts auf ihrer Grundlinie; wird es zu eng, rutscht der Link darunter */
.abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; }
.abschnitt-kopf h2 { margin-bottom: 0; }

/* ---------- Labels, Marker ---------- */
.section-label {
  font-family: var(--h-font); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--olive-deep); margin-bottom: 12px;
}
.tag {
  display: inline-block; font-family: var(--h-font); font-size: 14px; font-weight: 600;
  padding: 4px 12px; border-radius: var(--radius); text-transform: uppercase; letter-spacing: .05em;
  border: 1px solid transparent;
}
.tag--offen { background: var(--paper-warm); color: var(--berry-dark); border-color: var(--rust); }

/* ---------- Bühne mit Mosaik (Eigenbau, Abweichung 2 in CLAUDE.md) ---------- */
.hero { background: var(--white); padding: 0; }
.hero-grid { display: grid; grid-template-columns: 1fr; max-width: 1200px; margin: 0 auto; }
.hero-text { padding: clamp(40px, 8vw, 72px) 16px clamp(36px, 6vw, 56px); display: flex; flex-direction: column; }
@media (min-width: 600px) { .hero-text { padding-left: 24px; padding-right: 24px; } }
.hero-text .section-label { margin-bottom: clamp(28px, 6vw, 56px); }
.hero h1 { font-size: clamp(36px, 4.7vw, 58px); max-width: 800px; margin-bottom: 24px; margin-top: auto; }
.hero h1 > span { display: block; }
.hero h1::before { content: ''; display: block; width: 56px; height: 4px; background: var(--rust); margin-bottom: 28px; }
.hero .subtitle { font-size: var(--body); color: var(--ink); max-width: 56ch; line-height: 1.7; }

.mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.m-tile {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(20px, 3vw, 32px); min-height: 170px; color: inherit;
}
.m-tile > * { position: relative; z-index: 1; }
.m-label {
  font-family: var(--h-font); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
}
.m-big { font-family: var(--h-font); font-weight: 700; line-height: 1.12; font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -.01em; }
.m-mid { font-family: var(--h-font); font-weight: 600; line-height: 1.3; font-size: clamp(19px, 1.9vw, 22px); }
.m-mid span { display: block; }
.m-text { font-size: var(--small); line-height: 1.55; max-width: 34ch; }
.m-arrow { width: 28px; height: 28px; margin-top: 12px; }

.m-lime  { grid-column: 1 / -1; background: var(--lime); color: var(--berry-dark); min-height: 220px; }
.m-berry { background: var(--berry); color: var(--white); }
.m-rust  { background: var(--rust); color: var(--white); }
.m-dark  { grid-column: 1 / -1; background: var(--berry-dark); color: var(--white); }
a.m-tile { transition: var(--transition); }
a.m-tile:hover { color: var(--white); }
@media (hover: hover) {
  a.m-berry:hover { background: var(--berry-light); }
  a.m-rust:hover  { background: var(--rust-light); }
  a.m-dark:hover  { background: var(--berry); }
}
a.m-tile:focus-visible { outline-color: var(--ink); outline-offset: -6px; }

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); min-height: 640px; }
  .hero-text { padding-top: 44px; padding-bottom: 56px; padding-right: 48px; }
  .mosaic { grid-template-columns: repeat(10, 1fr); grid-template-rows: 1fr 1fr auto; }
  .m-lime  { grid-column: 1 / 7; grid-row: 1 / 3; }
  .m-berry { grid-column: 7 / 11; grid-row: 1; padding: 24px 20px; }
  .m-rust  { grid-column: 7 / 11; grid-row: 2; padding: 24px 20px; }
  .m-mid { font-size: 18px; }
  .m-dark  { grid-column: 1 / 6; grid-row: 3; min-height: 200px; }
}

/* ---------- Angebote: Formatraster (Eigenbau, abgeleitet von .card). Jede helle Kachel trägt
   einen gezeichneten Rahmen, den site.js einsetzt; entschieden von Luca am 22.09.2026. ---------- */
.formate { padding: 0; background: var(--white); }
.f-grid { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 1200px; margin: 0 auto; padding: 20px 0 12px; }
.f-cell {
  position: relative; isolation: isolate;
  background: var(--white); padding: 36px 34px 34px;
  display: flex; flex-direction: column;
}
@media (min-width: 600px) { .f-cell { min-height: 200px; } }
.f-cell > * { position: relative; z-index: 1; }
.f-cell--lime { background: var(--lime); color: var(--berry-dark); padding: clamp(22px, 3vw, 32px); }
.f-nr { font-family: var(--h-font); font-size: 14px; font-weight: 700; letter-spacing: .16em; color: var(--olive-deep); margin-bottom: 0; padding-bottom: 12px; }
@media (min-width: 600px) { .f-nr { margin-bottom: auto; padding-bottom: 28px; } }
.f-cell--lime .f-nr { color: var(--berry-dark); }
.f-cell h3 { font-size: clamp(19px, 2vw, 22px); color: var(--ink); margin-bottom: 6px; letter-spacing: -.01em; }
.f-cell--lime h3 { color: var(--berry-dark); }
.f-cell p { font-size: var(--small); line-height: 1.5; }
.f-cell--intro h2 { font-size: clamp(24px, 2.6vw, 30px); margin-top: auto; }
.f-cell--intro .section-label { margin-bottom: 28px; }
.f-cell .tag { align-self: flex-start; margin-bottom: 10px; font-size: 12px; padding: 2px 8px; }
@media (min-width: 600px) { .f-grid { grid-template-columns: repeat(2, 1fr); } .f-cell--lime { grid-column: 1 / -1; } }
@media (min-width: 600px) and (max-width: 899px) { .f-cell--last { grid-column: 1 / -1; } }
@media (min-width: 900px) {
  .f-grid { grid-template-columns: repeat(20, 1fr); }
  .f-cell--lime { padding: 28px 24px; }
  .f-grid > .f-cell { grid-column: span 5; }
  .f-grid > .f-cell--lime { grid-column: span 8; }
  .f-grid > .f-cell--narrow { grid-column: span 4; }
}

/* ---------- Zwei Spalten: Text links, Bauteil rechts ---------- */
.split { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- Werkzeuge: die Treppe (Eigenbau). Eine Stufenfolge, in der jede Stufe höher
   steht als die davor. Tritt und Steigung sind einzelne gezeichnete Striche, die an den
   Ecken überstehen. Unter 900px stehen die Stufen untereinander, jede auf ihrem Strich. ---------- */
.treppe { margin: 28px 0 0; display: grid; grid-template-columns: 1fr; }
.stufe { position: relative; padding: 22px 0 26px; }
.stufe::before {
  content: ''; position: absolute; left: -4px; right: -4px; bottom: -5px; height: 10px;
  background: var(--strich-h-berry-a) no-repeat 0 0 / 100% 100%; pointer-events: none;
}
.stufe:nth-child(even)::before { background-image: var(--strich-h-berry-b); }
.stufe-nr {
  font-family: var(--h-font); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--olive-deep); margin-bottom: 6px;
}
.stufe-titel { font-size: clamp(21px, 2.2vw, 25px); margin-bottom: 6px; }
.stufe-text { font-size: var(--small); line-height: 1.55; max-width: 40ch; }
@media (min-width: 900px) {
  .treppe-layout { --stufe-h: 66px; }
  .treppe { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; margin-top: 12px; }
  .stufe { margin-bottom: calc(var(--i) * var(--stufe-h)); padding: 0 30px 22px 6px; }
  .stufe::before { left: -9px; right: -3px; }
  .stufe::after {
    content: ''; position: absolute; right: -5px; bottom: -6px; width: 10px; height: calc(var(--stufe-h) + 13px);
    background: var(--strich-v-berry-a) no-repeat 0 0 / 100% 100%; pointer-events: none;
  }
  .stufe:nth-child(even)::after { background-image: var(--strich-v-berry-b); }
  .stufe:last-child::after { content: none; }
  /* Mit Subgrid teilen sich Überschrift und Treppe ein Raster: Die Überschrift steht oben links,
     die dritte und vierte Stufe steigen rechts daneben in ihre Höhe. Ohne Subgrid steht die
     Treppe unter der Überschrift. */
  @supports (grid-template-rows: subgrid) {
    .treppe-layout { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; }
    .treppe-kopf { grid-column: 1 / span 2; grid-row: 1; padding: 0 56px 44px 0; }
    .treppe {
      grid-column: 1 / -1; grid-row: 1 / span 2; margin-top: 0;
      grid-template-columns: subgrid; grid-template-rows: subgrid; pointer-events: none;
    }
    .stufe { grid-row: 2; pointer-events: auto; }
    .stufe:nth-child(n+3) { grid-row: 1 / span 2; }
  }
}

/* ---------- Fälle: drei Spalten an gezeichneten Trennstrichen (Eigenbau). Gleichrangige
   Sammlung, deshalb keine Reihenfolge und keine Kästen. ---------- */
.fallspalten { display: grid; grid-template-columns: 1fr; margin-top: 28px; }
.fall { position: relative; padding: 28px 0; }
.fall:first-child { padding-top: 8px; }
.fall + .fall::before {
  content: ''; position: absolute; left: -4px; right: -4px; top: -5px; height: 10px;
  background: var(--strich-h-olive-a) no-repeat 0 0 / 100% 100%; pointer-events: none;
}
.fall + .fall + .fall::before { background-image: var(--strich-h-olive-b); }
.fall h3 { color: var(--ink); margin-bottom: 4px; }
.fall-meta { font-family: var(--h-font); font-size: 14px; color: var(--olive-deep); margin-bottom: 14px; }
.fall p:not(.fall-meta) { font-size: var(--small); line-height: 1.6; max-width: 44ch; }
@media (min-width: 900px) {
  .fallspalten { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; }
  .fall, .fall:first-child { padding: 6px 40px 10px; }
  .fall:first-child { padding-left: 0; }
  .fall:last-child { padding-right: 0; }
  .fall + .fall::before {
    left: -5px; right: auto; top: -8px; bottom: -12px; width: 10px; height: auto;
    background-image: var(--strich-v-olive-a);
  }
  .fall + .fall + .fall::before { background-image: var(--strich-v-olive-b); }
}

/* ---------- Zitat (aus design-tokens) ---------- */
.zitat { margin-left: clamp(20px, 5vw, 56px); max-width: 66ch; }
.zitat p {
  font-family: var(--b-font); font-size: clamp(19px, 2.6vw, 24px);
  font-style: italic; font-weight: 400; line-height: 1.55; color: var(--berry);
}
.zitat cite, .stimme figcaption {
  display: block; font-family: var(--h-font); font-size: 14px; font-style: normal;
  font-weight: 400; color: var(--olive-deep); margin-top: 10px;
}
.zitat--bund { margin-left: 0; }
.stimmen { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: clamp(48px, 7vw, 80px); align-items: center; }
.stimmen .zitat { margin-left: 0; }
.stimme figcaption { margin-top: 14px; padding-left: 6px; }
@media (min-width: 900px) { .stimmen { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; } }

/* ---------- Geschnittene Farbfläche (Eigenbau, Abweichung 6 in CLAUDE.md). Flach, mit
   Kanten wie von Hand geschnitten: gerade Schnitte, leicht aus dem Winkel. ---------- */
.schnitt { position: relative; isolation: isolate; padding: clamp(30px, 4.4vw, 52px) clamp(26px, 4vw, 48px); }
.schnitt > * { position: relative; z-index: 1; }
.schnitt--rust {
  background: var(--rust); color: var(--white);
  clip-path: polygon(0.8% 4%, 37% 0, 99.2% 2.6%, 100% 57%, 98.4% 96.5%, 54% 100%, 1.8% 97.5%, 0 41%);
}
/* Weiß auf Rust hält 3,49 und damit nur Großtext: ab 24px. Die Quelle steht darunter auf Weiß. */
.schnitt--rust p { font-family: var(--b-font); font-style: italic; font-weight: 400; font-size: clamp(24px, 2.7vw, 31px); line-height: 1.35; color: var(--white); }
.schnitt--dunkel {
  background: var(--berry-dark); color: var(--white);
  clip-path: polygon(0 2.6%, 46% 0, 100% 3.6%, 99.3% 52%, 100% 97%, 61% 100%, 0.5% 96.4%, 0.9% 45%);
}
.schnitt--dunkel h2, .schnitt--dunkel .section-label { color: var(--white); }
.schnitt--dunkel :focus-visible { outline-color: var(--white); }

/* ---------- Haltung: Berry als geschnittenes Band ---------- */
.section--berry h2 { color: var(--white); max-width: 24ch; font-size: clamp(28px, 4.2vw, 44px); line-height: 1.3; }
.section--berry .section-label { color: var(--white); }
/* Das Band greift 18px in die Nachbarn hinein, damit die geschnittene Kante oben und unten
   auf deren Fläche liegt. Die Nachbarn bekommen die 18px als Innenabstand zurück:
   der davor über .vor-band, der danach über den Geschwisterselektor. */
.schnitt-band {
  position: relative; z-index: 1; isolation: isolate;
  padding-top: calc(clamp(48px, 8vw, 96px) + 16px); padding-bottom: calc(clamp(48px, 8vw, 96px) + 16px);
  margin-top: -18px; margin-bottom: -18px;
  clip-path: polygon(0 14px, 11% 5px, 25% 15px, 42% 3px, 58% 12px, 77% 0, 100% 10px,
    100% calc(100% - 5px), 88% calc(100% - 16px), 70% calc(100% - 4px), 49% calc(100% - 17px), 30% calc(100% - 7px), 12% calc(100% - 15px), 0 calc(100% - 2px));
}
.schnitt-band--b {
  clip-path: polygon(0 4px, 14% 15px, 33% 2px, 52% 13px, 70% 6px, 86% 16px, 100% 3px,
    100% calc(100% - 15px), 84% calc(100% - 3px), 63% calc(100% - 14px), 45% calc(100% - 6px), 24% calc(100% - 17px), 9% calc(100% - 5px), 0 calc(100% - 12px));
}
.schnitt-band.section--white { background: var(--white); }
.vor-band { padding-bottom: calc(clamp(48px, 8vw, 96px) + 18px); }
.schnitt-band + section { padding-top: calc(clamp(48px, 8vw, 96px) + 18px); }
.grundsaetze { border-top: 1px solid var(--olive); }
.grundsatz { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.grundsatz:last-child { border-bottom: none; }
.grundsatz dt { font-family: var(--h-font); font-weight: 600; font-size: var(--h3); color: var(--berry); line-height: 1.25; }
.grundsatz dd { max-width: 66ch; }
@media (min-width: 900px) { .grundsatz { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 48px; } }

/* ---------- Organisationsentwicklung ---------- */
.lagen li { font-family: var(--h-font); font-weight: 500; font-size: clamp(18px, 2.2vw, 22px); color: var(--ink); line-height: 1.35; padding: 14px 0; border-bottom: 1px solid var(--line); }
.lagen li:first-child { border-top: 1px solid var(--line); }
.lagen + .klein { margin-top: 20px; }
.fall-titel { font-family: var(--h-font); font-weight: 600; font-size: 18px; color: var(--ink); margin-bottom: 2px; }

/* Verlauf als wachsende Quadrate (Eigenbau). Die Fläche folgt der Zahl im Text: 1, 3, 10.
   Das vierte Glied trägt keine Zahl und bleibt deshalb ein offener Rahmen. */
.verlauf { margin-top: clamp(44px, 7vw, 80px); }
.wachstum { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 22px 0 0; position: relative; }
.wachstum li { display: grid; grid-template-columns: 114px minmax(0, 1fr); gap: 20px; align-items: center; }
.q {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: var(--q); height: var(--q);
  font-family: var(--h-font); font-weight: 700; line-height: 1; color: var(--berry);
}
.q > span, .q > .q-pfeil { position: relative; z-index: 1; }
.q--1 { --q: 36px; font-size: 16px; }
.q--3 { --q: 62px; font-size: 25px; }
.q--10, .q--offen { --q: 114px; font-size: 42px; }
.q-pfeil { width: 34px; height: 34px; }
.q-text { font-family: var(--h-font); font-weight: 600; font-size: clamp(16px, 1.7vw, 18px); line-height: 1.35; color: var(--ink); }
.verlauf .zitat { margin-top: clamp(36px, 5vw, 56px); }
@media (min-width: 900px) {
  .wachstum { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 36px; }
  .wachstum li { grid-template-columns: 1fr; grid-template-rows: 114px auto; gap: 26px; align-items: end; }
  .wachstum li .q-text { align-self: start; max-width: 24ch; }
  .wachstum::before {
    content: ''; position: absolute; left: -10px; right: -10px; top: 118px; height: 10px;
    background: var(--strich-h-olive-a) no-repeat 0 0 / 100% 100%; pointer-events: none;
  }
}

/* ---------- Gezeichnete Rahmen. site.js setzt sie als SVG ein: an den sieben Angeboten
   (Abweichung 4), an den Porträts und den Quadraten im Verlauf (Abweichung 6). ---------- */
.rahmen { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); z-index: 0; pointer-events: none; overflow: visible; }
.rahmen path { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rahmen--voll { inset: 0; width: 100%; height: 100%; }
.rahmen--weiss path { fill: var(--white); }

/* ---------- Wer kommt: Porträt im gezeichneten Rahmen, weiß gefüllt wie die Quadrate der
   alten Seite, Text daneben. Die Porträts sind 500 x 500 Pixel von der alten Seite. ---------- */
.personen { display: grid; grid-template-columns: 1fr; gap: 44px; margin-top: 40px; }
@media (min-width: 900px) { .personen { grid-template-columns: 1fr 1fr; gap: 56px; } }
.person { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
@media (min-width: 600px) { .person { grid-template-columns: 200px minmax(0, 1fr); gap: 28px; } }
.person-foto { position: relative; isolation: isolate; width: 200px; aspect-ratio: 1; padding: 13px; margin: 0; }
.person-foto img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
/* Fehlt die Datei, bleibt der leere Rahmen stehen; site.js setzt die Klasse. */
.person-foto.fehlt img { visibility: hidden; }
.person h3 { font-size: clamp(24px, 3vw, 30px); margin-bottom: 2px; }
.person .rolle { font-family: var(--h-font); font-size: 14px; color: var(--olive-deep); margin-bottom: 14px; }
.person .tag { margin-bottom: 12px; }
.person p { max-width: 58ch; }

/* ---------- Kontakt: geschnittenes Blatt in Berry Dark, darauf der Lime-Knopf ---------- */
.kontakt-blatt { display: grid; grid-template-columns: 1fr; gap: 20px; padding: clamp(40px, 6vw, 76px) clamp(26px, 5vw, 72px); }
.kontakt-blatt h2 { font-size: clamp(40px, 6vw, 68px); letter-spacing: -.02em; }
.kontakt-blatt .lead { margin-bottom: 28px; }
.kontakt-zeile { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
@media (min-width: 900px) { .kontakt-blatt { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 56px; align-items: end; } }

/* ---------- Back-to-Top (aus design-tokens) ---------- */
.btt {
  position: fixed; bottom: 32px; right: 32px;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--lime); color: var(--berry-dark);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); transition: var(--transition);
  opacity: 0; transform: translateY(20px); pointer-events: none;
  z-index: 400;
}
.btt.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (hover: hover) { .btt:hover { background: var(--lime-dark); transform: translateY(-2px); } }

/* ---------- Footer (aus design-tokens, dazu Impressum und Datenschutz) ---------- */
.footer {
  background: var(--paper); color: var(--ink); padding: 48px 0 40px;
  border-top: 1px solid var(--olive);
}
.footer-inner { display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; }
@media (min-width: 600px) { .footer-inner { flex-direction: row; justify-content: space-between; text-align: left; } }
.footer-logo img { height: 48px; width: auto; }
.footer p { font-size: var(--small); margin-bottom: 4px; }
.footer a { color: var(--berry); display: inline-block; padding: 12px 0; }
.footer-logo { padding: 0; }

/* ---------- Unterseiten Impressum und Datenschutz: Familie Lesestrecke. Artikelkopf aus
   design-tokens (FIXED STRUCTURE), darunter eine Lesespalte von 66ch auf Paper, Überschriften
   ohne Balken, weil das Register nicht wechselt. ---------- */
.article-head { background: var(--paper); padding: clamp(56px, 9vw, 104px) 0 clamp(28px, 4vw, 48px); }
.article-head h1 { max-width: 800px; margin-bottom: 20px; }
.article-head h1::before { content: ''; display: block; width: 48px; height: 3px; background: var(--rust); margin-bottom: 24px; }
.article-head .teaser { font-size: var(--body); color: var(--ink); max-width: 66ch; line-height: 1.7; margin-bottom: 24px; }
.article-head .meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; font-size: var(--small); color: var(--ink); }
.article-head .meta .sep { color: var(--olive-deep); }
.lese { padding-top: clamp(24px, 4vw, 40px); }
.lese .container > * { max-width: 66ch; }
.lese h2 { font-size: clamp(22px, 2.6vw, 28px); margin-top: 2em; }
.lese h2:first-child { margin-top: 0; }
.lese address { font-style: normal; margin-bottom: 1.1em; }
.lese ul { list-style: disc; padding-left: 1.2em; }
.lese li { margin-bottom: .4em; }
.lese .tag { margin-bottom: 8px; }
.lese .offen { padding: 14px 18px; background: var(--paper-warm); border-left: 3px solid var(--rust); font-size: var(--small); }
.lese .offen .tag { margin: 0 0 6px; }
/* Links im Fließtext nicht nur an der Farbe erkennbar (WCAG 1.4.1, Lighthouse link-in-text-block).
   Entschieden von Luca am 29.09.2026 (#11). */
.lese p a, .lese li a { text-decoration: underline; text-underline-offset: .15em; }

/* ---------- Print ---------- */
@media print {
  .nav, .btt, .nav-toggle, .skip-link { display: none !important; }
  body { font-size: 12pt; background: white; color: #4E4E4E; }
  .fall, .person, .stufe { break-inside: avoid; }
}

/* ---------- Kopf der Unterseiten (Use Cases und Übersichten, CAT-28): H1 wie in der Bühne der
   Startseite, ein gezeichneter Strich unter einem Wort, die Unterzeile groß über die volle Breite. ---------- */
.unterseite-kopf { background: var(--white); padding: clamp(40px, 7vw, 72px) 0 0; }
.unterseite-kopf h1 { font-size: clamp(36px, 4.7vw, 58px); max-width: 800px; margin-bottom: 20px; }
.unterseite-kopf h1::before { content: ''; display: block; width: 56px; height: 4px; background: var(--rust); margin-bottom: 28px; }
.unterzeile-gross { font-family: var(--h-font); font-weight: 500; font-size: clamp(21px, 2.7vw, 32px); line-height: 1.35; color: var(--ink); letter-spacing: -.005em; }
.unterzeile-gross strong { font-weight: 700; }

/* ---------- Template Use Case (use-cases/, CAT-28). Gebaut aus den Mitteln der Startseite:
   Mosaik (Abweichung 2), gezeichnete Rahmen und Striche (3, 5), geschnittene Flächen (6).
   Neue Abweichungen vom Designsystem kommen nicht dazu. ---------- */

/* Mosaik als Sprungmarken: dieselben Kacheln wie in der Bühne der Startseite, in einer Reihe */
.uc-mosaik { display: grid; grid-template-columns: 1fr; margin-top: clamp(32px, 5vw, 56px); }
.uc-mosaik .m-tile { grid-column: auto; grid-row: auto; min-height: 0; gap: 14px; padding: 20px; }
.uc-mosaik .m-mid { font-size: clamp(22px, 2.2vw, 26px); }
.uc-mosaik .m-big { font-size: clamp(28px, 3vw, 38px); }
.uc-kachel-zusatz { font-family: var(--h-font); font-size: 20px; font-weight: 700; line-height: 1.3; }
@media (min-width: 600px) { .uc-mosaik { grid-template-columns: 1fr 1fr; } .uc-mosaik .m-tile { min-height: 190px; } }
@media (min-width: 900px) { .uc-mosaik { grid-template-columns: 3fr 4fr 3fr 2fr; } .uc-mosaik .m-tile { min-height: 230px; padding: 24px 22px; } }

/* Text und gezeichneter Rahmen nebeneinander, im Wechsel wie in der Quelle */
.uc-zweier { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) {
  .uc-zweier { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .uc-zweier--bild-links .uc-rahmenliste { order: -1; }
}
.uc-zweier-text { max-width: 60ch; }
.uc-zweier-text h2, .uc-h2 { font-size: clamp(28px, 3.4vw, 40px); }
.uc-rahmenliste { position: relative; isolation: isolate; margin: 0; padding: clamp(30px, 4vw, 48px) clamp(26px, 3.6vw, 44px); width: 100%; max-width: 500px; justify-self: center; }
.uc-rahmenliste-titel, .uc-rahmenliste ul { position: relative; z-index: 1; }
.uc-rahmenliste-titel { font-family: var(--h-font); font-weight: 700; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; color: var(--berry); margin-bottom: 18px; }
/* Rust als Text nur als Großtext: 26px fett, 3,49:1 auf Weiß */
.uc-rahmenliste--berry .uc-rahmenliste-titel { color: var(--rust); }
.uc-rahmenliste li { display: flex; gap: 14px; align-items: flex-start; padding: 9px 0; font-size: clamp(16px, 1.7vw, 18px); line-height: 1.45; color: var(--ink); }
.uc-icon { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--rust); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; margin-top: .05em; }
.uc-rahmenliste--berry .uc-icon { stroke: var(--berry); }

/* Die Bausteine des KI Core als Mosaik, wie die Kreise der Quelle: vier benannte in den Ecken,
   der Kern in der Mitte, dazwischen freie Felder mit offenem Rahmen für das, was dazukommt */
.uc-kern { margin: 0; width: 100%; max-width: 480px; justify-self: center; }
.uc-kern-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.uc-baustein {
  position: relative; isolation: isolate; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 10px; font-family: var(--h-font); font-weight: 600; line-height: 1.2;
  font-size: clamp(14px, 1.7vw, 18px); overflow-wrap: anywhere;
}
.uc-baustein > span { position: relative; z-index: 1; }
.uc-baustein--lime { background: var(--lime); color: var(--berry-dark); }
.uc-baustein--berry { background: var(--berry); color: var(--white); }
.uc-baustein--dunkel { background: var(--berry-dark); color: var(--white); }
/* Weiß auf Rust nur als Großtext: ab 18,66px fett */
.uc-baustein--kern { background: var(--rust); color: var(--white); font-weight: 700; font-size: clamp(20px, 2.6vw, 30px); }
.uc-baustein--rahmen { color: var(--berry); }
/* Freie Felder stehen eingerückt, damit ihr offener Rahmen die Nachbarn nicht berührt */
.uc-baustein--frei { margin: 14px; }
.uc-kern-legende { display: flex; gap: 12px; align-items: center; margin-top: 18px; font-size: var(--small); color: var(--ink); }
.uc-legende-frei { position: relative; flex: none; width: 26px; height: 26px; }

/* Praxisbeispiel: Kennzahlen in gezeichneten Quadraten auf einem Strich, das Ergebnis als Kachel */
.uc-rechnung { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 12px; }
.uc-fakten { display: grid; grid-template-columns: 1fr; gap: 16px; position: relative; }
.uc-fakten li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: center; }
.uc-q { --q: 96px; font-size: clamp(26px, 2.6vw, 32px); letter-spacing: -.02em; }
.uc-ergebnis { grid-column: auto; grid-row: auto; min-height: 200px; }
.uc-ergebnis-zahl { font-family: var(--h-font); font-weight: 700; line-height: 1; font-size: clamp(48px, 7vw, 84px); letter-spacing: -.03em; }
@media (min-width: 900px) {
  .uc-rechnung { grid-template-columns: minmax(0, 3fr) minmax(0, 1.3fr); gap: 40px; align-items: center; }
  .uc-fakten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
  .uc-fakten li { grid-template-columns: 1fr; grid-template-rows: 96px auto; gap: 22px; align-items: end; }
  .uc-fakten li .q-text { align-self: start; max-width: 22ch; }
  .uc-fakten::before {
    content: ''; position: absolute; left: -10px; right: -40px; top: 100px; height: 10px;
    background: var(--strich-h-olive-a) no-repeat 0 0 / 100% 100%; pointer-events: none;
  }
  .uc-ergebnis { min-height: 220px; }
}
.uc-satz { font-family: var(--h-font); font-weight: 600; font-size: var(--h3); line-height: 1.3; color: var(--berry); margin-top: clamp(32px, 5vw, 48px); }
.uc-schlusssatz { font-size: clamp(18px, 1.9vw, 21px); line-height: 1.6; max-width: 62ch; }

/* Schluss: ein Satz auf dem geschnittenen Berry-Band, darunter der Knopf. Das Band greift
   wie auf der Startseite 18px in den Fuß, der die 18px als Innenabstand zurückbekommt. */
.uc-schluss h2 { max-width: 26ch; margin-bottom: 32px; hyphens: manual; -webkit-hyphens: manual; }
.kein-umbruch { white-space: nowrap; }
.uc-schluss-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.uc-schluss-link { font-family: var(--h-font); font-weight: 600; color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.uc-schluss-link:hover { color: var(--white); text-decoration-thickness: 2px; }
.uc-schluss :focus-visible { outline-color: var(--white); }
.footer--nach-band { padding-top: 66px; }

/* ---------- Übersichten (use-cases/, CAT-28; Prototyp für Werkzeuge und Angebote). Dieselben
   Mittel wie die Startseite: Kacheln, gezeichnete Striche, Spalten wie bei „Aus unserer Arbeit“
   und geschnittene Flächen wie beim Zitat und beim Kontaktblatt. ---------- */
.ue-karten { padding: clamp(32px, 5vw, 56px) 0 clamp(56px, 8vw, 96px); }
.ue-h2 { font-size: clamp(28px, 3.4vw, 40px); }
/* Je Eintrag ein geschnittenes Blatt, die Kennzahl auf einem zweiten Schnitt darüber */
.ue-karte { position: relative; display: grid; grid-template-columns: 1fr; }
.ue-karte + .ue-karte { margin-top: clamp(40px, 6vw, 72px); }
.ue-karte-blatt { padding: clamp(36px, 6vw, 72px) clamp(26px, 5vw, 64px) clamp(44px, 6vw, 80px); }
/* Der Titel-Link deckt das ganze Blatt ab, damit das Blatt als Ganzes klickbar ist */
.ue-karte-titel { position: static; font-size: clamp(40px, 6vw, 68px); letter-spacing: -.02em; margin-bottom: 16px; }
.ue-karte-titel a { color: inherit; }
.ue-karte-titel a::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.ue-karte-text { font-size: clamp(18px, 2vw, 21px); line-height: 1.55; max-width: 48ch; margin-bottom: 28px; }
.ue-karte-blatt { transition: var(--transition); }
@media (hover: hover) {
  .ue-karte:hover .ue-karte-blatt { background: var(--berry); }
  .ue-karte:hover .ue-karte-knopf { background: var(--lime-dark); }
}
.ue-karte-titel a:focus-visible { outline: none; }
.ue-karte:has(a:focus-visible) { outline: 2px solid var(--berry); outline-offset: 6px; }
/* Weiß auf Rust nur als Großtext: Zahl groß, Einheit 20px fett */
.ue-karte-zahl { justify-self: end; width: min(100%, 320px); margin-top: -28px; z-index: 3; padding: clamp(26px, 3.4vw, 40px) clamp(24px, 3vw, 36px); }
.ue-karte-zahl .ue-zahl { font-style: normal; font-family: var(--h-font); font-weight: 700; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -.03em; color: var(--white); margin-bottom: 8px; }
.ue-karte-zahl .ue-zahl-text { font-style: normal; font-family: var(--h-font); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--white); }
@media (min-width: 900px) {
  .ue-karte { grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); align-items: start; }
  .ue-karte-zahl { justify-self: stretch; width: auto; margin: 72px 0 0 -56px; }
}

/* Kacheln zum Weitergehen, wie das Mosaik der Startseite */
.ue-weiter-abschnitt { padding: clamp(48px, 7vw, 80px) 0; }
.ue-weiter { display: grid; grid-template-columns: 1fr; }
.ue-weiter .m-tile { grid-column: auto; grid-row: auto; min-height: 0; gap: 14px; padding: 20px; }
.ue-weiter .m-big, .ue-weiter .m-mid { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; line-height: 1.15; }
@media (min-width: 600px) { .ue-weiter { grid-template-columns: repeat(3, 1fr); } .ue-weiter .m-tile { min-height: 200px; padding: 24px 22px; } }


/* Teile eines Werkzeugs unter seinem Blatt (werkzeuge/, CAT-30): gleichrangige Kacheln in
   gezeichneten Rahmen, ohne Reihenfolge und ohne Pfeile, weil die Wege nicht linear sind. */
.ue-wege { grid-column: 1 / -1; margin-top: clamp(28px, 4vw, 44px); }
.ue-wege-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ue-weg { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 96px; padding: 18px 14px; font-family: var(--h-font); font-weight: 600; font-size: clamp(16px, 1.6vw, 18px); line-height: 1.25; color: var(--berry); }
.ue-weg > span { position: relative; z-index: 1; }
@media (min-width: 600px) { .ue-wege-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ue-wege-liste { grid-template-columns: repeat(6, minmax(0, 1fr)); } }