.katalog-section { padding: 64px 20px 88px; background: linear-gradient(180deg, var(--cream-deep) 0%, var(--cream) 55%); }
.katalog-inner { max-width: 1180px; margin: 0 auto; }
.katalog-kopf { text-align: center; margin-bottom: 34px; }
.katalog-kopf .section-eyebrow { display: block; margin-bottom: 10px; }
.katalog-hinweis { color: var(--ink-mute); font-size: 14px; margin-top: 10px; }
.mappe-buehne { perspective: 2600px; display: flex; justify-content: center; }
/* Der Untergrund ist der Buchblock: eine Spur dunkler als das Papier, damit die
   Seiten sich abheben und die leere Haelfte beim geschlossenen Buch als
   Innendeckel lesbar ist statt als Loch. */
.mappe { position: relative; width: 100%; max-width: 1040px; aspect-ratio: 104 / 66; background: var(--cream-deep); box-shadow: 0 18px 50px rgba(34,28,22,.18); border: 1px solid var(--line-soft); }
/* Bundsteg: die Mitte des aufgeschlagenen Buches. */
.mappe::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 22px; transform: translateX(-50%); background: linear-gradient(90deg, rgba(34,28,22,0) 0%, rgba(34,28,22,.10) 45%, rgba(34,28,22,.16) 50%, rgba(34,28,22,.10) 55%, rgba(34,28,22,0) 100%); pointer-events: none; z-index: 60; }
.blatt { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-style: preserve-3d; transform-origin: left center; transition: transform .85s cubic-bezier(.35,.06,.22,1); }
.blatt.um { transform: rotateY(-180deg); }
.blatt-seite { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: var(--cream-light); display: flex; flex-direction: column; }
.blatt-seite.rueck { transform: rotateY(180deg); }
.blatt-seite.vorn { border-left: 1px solid var(--line-soft); }
.blatt-seite.rueck { border-right: 1px solid var(--line-soft); }
/* Der Inhalt fuellt die Seite. Ohne das haengen kat-bild und kat-text in einem
   hoehenlosen Kasten, und die prozentuale Bildhoehe faellt auf den Inhalt
   zurueck – dann ist jede Seite unterschiedlich hoch bebildert. */
.blatt-inhalt { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Projektseite: Foto oben, Text unten. */
.kat-bild { position: relative; flex: 0 0 62%; background: var(--cream-deep); overflow: hidden; }
.kat-bild img { width: 100%; height: 100%; object-fit: cover; }
.kat-ort { position: absolute; left: 0; bottom: 0; background: rgba(34,28,22,.82); color: var(--cream); font-size: 11px; letter-spacing: .10em; text-transform: uppercase; padding: 6px 14px; }
.kat-text { padding: 20px 26px 26px; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.kat-text h3 { font-family: var(--display); font-size: clamp(15px, 1.55vw, 20px); font-weight: 600; line-height: 1.25; margin-bottom: 8px; }
/* Beschreibungen sind zwischen 80 und 235 Zeichen lang. Ohne Begrenzung
   schiebt der laengste Text die Datenzeile aus der Seite. */
.kat-text p { font-size: clamp(12px, 1.05vw, 13.5px); line-height: 1.55; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.kat-daten { list-style: none; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: clamp(11px, .95vw, 12.5px); color: var(--ink-soft); }
.kat-daten b { color: var(--ink); font-weight: 600; }
.kat-nr { position: absolute; right: 14px; bottom: 8px; font-size: 10.5px; color: var(--ink-mute); letter-spacing: .06em; }
.blatt-seite.rueck .kat-nr { right: auto; left: 14px; }
/* Umschlag vorn und hinten. */
.kat-umschlag { background: var(--ink); color: var(--cream); align-items: center; justify-content: center; text-align: center; padding: 34px 30px; gap: 14px; }
.kat-umschlag .marke { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--bronze-glow); }
.kat-umschlag h3 { font-family: var(--display); font-weight: 600; font-size: clamp(21px, 2.6vw, 34px); line-height: 1.15; color: var(--cream); }
.kat-umschlag .linie { width: 54px; height: 1px; background: var(--bronze); }
.kat-umschlag p { font-size: clamp(12px, 1.1vw, 14px); color: rgba(246,240,231,.72); max-width: 30ch; line-height: 1.6; }
.kat-umschlag .btn-primary { margin-top: 6px; }
/* Innenseite mit Kennzahlen. */
.kat-innen { padding: 34px 32px; justify-content: center; gap: 16px; }
.kat-innen h3 { font-family: var(--display); font-size: clamp(17px, 1.9vw, 24px); font-weight: 600; line-height: 1.25; }
.kat-innen p { font-size: clamp(12px, 1.05vw, 13.5px); line-height: 1.6; color: var(--ink-soft); }
/* Erklaerseite: das Informationsblatt zum Anhaengen an ein Angebot. */
.kat-info { padding: 32px 30px 30px; justify-content: flex-start; gap: 10px; overflow: hidden; }
.kat-info .kat-eyebrow { font-size: 10.5px; letter-spacing: .20em; text-transform: uppercase; color: var(--bronze-deep); font-weight: 600; }
.kat-info h3 { font-family: var(--display); font-size: clamp(17px, 1.9vw, 24px); font-weight: 600; line-height: 1.25; margin-bottom: 2px; }
.kat-info p { font-size: clamp(12px, 1.02vw, 13.5px); line-height: 1.6; color: var(--ink-soft); }
.kat-punkte { list-style: none; margin-top: 4px; display: flex; flex-direction: column; gap: 7px; font-size: clamp(11.5px, 1vw, 13px); line-height: 1.5; color: var(--ink-soft); }
.kat-punkte li { padding-left: 16px; position: relative; }
.kat-punkte li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 1px; background: var(--bronze); }
.kat-punkte b, .kat-punkte strong { color: var(--ink); font-weight: 600; }
.kat-fuss { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: clamp(10.5px, .92vw, 12px); color: var(--ink-mute); }
.kat-zahlen { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.kat-zahlen div { min-width: 74px; }
.kat-zahlen .n { display: block; font-family: var(--display); font-size: clamp(19px, 2.1vw, 27px); font-weight: 600; color: var(--bronze-deep); line-height: 1; }
.kat-zahlen .l { display: block; font-size: 11px; letter-spacing: .05em; color: var(--ink-mute); text-transform: uppercase; margin-top: 5px; }
/* Steuerleiste. */
.mappe-steuer { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.mappe-steuer button { font-family: var(--body); font-size: 13px; font-weight: 500; color: var(--ink); background: var(--white); border: 1px solid var(--line); padding: 10px 18px; cursor: pointer; transition: background .2s, border-color .2s; }
.mappe-steuer button:hover:not(:disabled) { background: var(--cream-deep); border-color: var(--bronze); }
.mappe-steuer button:disabled { opacity: .38; cursor: default; }
.mappe-stand { font-size: 13px; color: var(--ink-soft); min-width: 92px; text-align: center; letter-spacing: .03em; }
/* Weitergeben: die Adresse dieser Mappe zum Anhaengen an ein Angebot. */
.mappe-teilen { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.teilen-text { font-size: 13px; color: var(--ink-mute); }
.teilen-adresse { font-family: var(--body); font-size: 12.5px; color: var(--ink-soft); background: var(--white); border: 1px solid var(--line-soft); padding: 7px 12px; word-break: break-all; }
.teilen-knopf { font-family: var(--body); font-size: 12.5px; font-weight: 500; color: var(--ink); background: var(--white); border: 1px solid var(--line); padding: 8px 15px; cursor: pointer; transition: background .2s, border-color .2s; }
.teilen-knopf:hover { background: var(--cream-deep); border-color: var(--bronze); }
.teilen-erfolg { font-size: 12.5px; color: var(--bronze-deep); font-weight: 600; }
/* Klickflaechen auf den Buchhaelften – blaettern wie in einem echten Buch. */
.mappe-tipp { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 55; border: 0; background: transparent; cursor: pointer; padding: 0; }
.mappe-tipp.zurueck { left: 0; }
.mappe-tipp.vor { right: 0; }
.mappe-tipp:disabled { cursor: default; }
.mappe-tipp:focus-visible { outline: 2px solid var(--bronze); outline-offset: -4px; }
@media (max-width: 860px) {
  /* Auf dem Handy wird EINZELN geblaettert, nicht blattweise.
     Wuerde hier nur das Blatt schmaler gesetzt, klappte es samt Rueckseite aus
     dem Bild und man saehe ausschliesslich die ungeraden Seiten – also nur
     jedes zweite Projekt. Deshalb loest "display: contents" die Blattbox auf:
     Jede Seite wird zum direkten Kind der Buehne, liegt einzeln im Stapel und
     klappt fuer sich nach links weg. Die Reihenfolge im HTML ist bereits die
     Seitenreihenfolge (vorn, rueck, vorn, rueck …). */
  .katalog-section { padding: 44px 14px 64px; }
  .mappe { max-width: 460px; aspect-ratio: 46 / 62; perspective: 1500px; }
  .mappe::after { display: none; }
  .blatt { display: contents; }
  .blatt-seite { transform-origin: left center; transition: transform .7s cubic-bezier(.35,.06,.22,1); }
  .blatt-seite.vorn, .blatt-seite.rueck { border: 0; transform: rotateY(0deg); }
  .blatt-seite.weg { transform: rotateY(-180deg); }
  .kat-bild { flex: 0 0 52%; }
  .kat-text { padding: 16px 20px 26px; }
  .kat-text p { -webkit-line-clamp: 5; }
  .blatt-seite.rueck .kat-nr { right: 14px; left: auto; }
}
@media (prefers-reduced-motion: reduce) { .blatt { transition: none; } }