/* ============================================================
   Mr. Petz AI · Referenzseiten (Arbeitsproben)
   Gemeinsame Bausteine für die Übersicht und alle Teilprojekte.
   Ergänzt css/style-ds.css, ersetzt es nicht.
   ============================================================ */

:root{
  --navy:#082B46; --navy-deep:#061F33; --cyan:#18b7c9; --gold:#B9975A;
  --heading:'Manrope',Arial,sans-serif;
}

/* ------------------------------------------------------------
   1. Sprungziele
   Das gemeinsame Stylesheet rechnet mit --nav (152px). Auf den
   Bewerberseiten ist die Leiste aber niedriger, und scroll-padding
   und scroll-margin addieren sich. Der Wert wird per Skript aus
   der tatsächlichen Leistenhöhe gesetzt.
   ------------------------------------------------------------ */
html{scroll-padding-top:var(--sprungabstand, 133px);scroll-behavior:smooth}
[id]{scroll-margin-top:0}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ------------------------------------------------------------
   2. Hero
   ------------------------------------------------------------ */
.rhero{
  background:radial-gradient(900px 520px at 78% 8%,rgba(24,183,201,.14),transparent 62%),
             linear-gradient(180deg,var(--navy-deep) 0%,var(--navy) 100%);
  color:#fff;padding:calc(var(--nav) + 103px) 0 54px;
}
.rhero-grid{display:grid;grid-template-columns:1.04fr .96fr;column-gap:52px;align-items:center}
.rhero-copy{min-width:0}
.rhero-eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.rhero h1{color:#fff;font-family:var(--heading);font-size:clamp(32px,3.7vw,52px);font-weight:800;
  line-height:1.08;letter-spacing:-.02em;margin:0;text-wrap:balance}
.rhero-sub{font-family:var(--heading);font-size:clamp(17px,1.55vw,19px);font-weight:600;
  color:rgba(255,255,255,.92);margin:22px 0 16px;line-height:1.5}
.rhero-lead{font-size:16.5px;line-height:1.75;color:rgba(255,255,255,.82);margin:0 0 30px}
.rhero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:0}

.rhero-stats{grid-column:1 / -1;display:flex;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.14);margin-top:44px}
.rstat{flex:1 1 175px;min-width:0;padding:20px 18px 4px 0;margin-right:18px;
  border-right:1px solid rgba(255,255,255,.14)}
.rstat:last-child{border-right:none;margin-right:0;padding-right:0}
.rstat b{display:block;font-family:var(--heading);font-size:26px;font-weight:800;
  color:var(--cyan);line-height:1.1}
.rstat span{font-size:13.5px;color:rgba(255,255,255,.75);line-height:1.45;display:block;margin-top:6px}
@media(max-width:640px){
  .rhero-stats{flex-direction:column}
  .rstat{border-right:none;border-bottom:1px solid rgba(255,255,255,.14);margin-right:0;padding:18px 0}
  .rstat:last-child{border-bottom:none}
}

/* Einzelbild rechts im Hero */
.rhero-visual{min-width:0;position:relative}
.rhero-shot-wrap{position:relative;max-width:560px;margin-left:auto}
.rhero-shot-wrap::after{content:"";position:absolute;top:-22px;left:-22px;right:22px;bottom:22px;
  border:1px solid rgba(24,183,201,.45);border-radius:20px;pointer-events:none}
.rhero-shot{width:100%;height:auto;display:block;border-radius:14px;position:relative;z-index:1;
  box-shadow:0 30px 70px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.14)}
.rhero-badge{position:absolute;left:-34px;bottom:-26px;z-index:2;background:rgba(6,31,51,.94);
  backdrop-filter:blur(6px);border:1px solid rgba(24,183,201,.35);border-radius:12px;padding:13px 18px;
  box-shadow:0 16px 40px rgba(0,0,0,.45)}
.rhero-badge b{display:block;font-family:var(--heading);font-size:14.5px;color:#fff}
.rhero-badge span{font-size:12.5px;color:var(--cyan);font-weight:600}

/* Bildstapel rechts im Hero (Übersichtsseite) */
.stapel{position:relative;min-width:0;height:400px}
.stapel img{position:absolute;border-radius:11px;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 26px 60px rgba(0,0,0,.55);display:block;width:78%;height:auto}
.stapel img:nth-child(1){top:0;right:0;z-index:1;opacity:.9}
.stapel img:nth-child(2){top:76px;right:11%;z-index:2}
.stapel img:nth-child(3){top:152px;right:22%;z-index:3}
.stapel-marke{position:absolute;left:0;bottom:6px;z-index:4;background:rgba(6,31,51,.94);
  backdrop-filter:blur(6px);border:1px solid rgba(24,183,201,.35);border-radius:12px;padding:12px 17px;
  box-shadow:0 16px 40px rgba(0,0,0,.45)}
.stapel-marke b{display:block;font-family:var(--heading);font-size:14px;color:#fff}
.stapel-marke span{font-size:12.5px;color:var(--cyan);font-weight:600}

@media(max-width:1024px){
  .rhero-grid{grid-template-columns:1fr;row-gap:36px}
  .rhero-visual{order:2}.rhero-copy{order:1}.rhero-stats{order:3;margin-top:8px}
  .rhero-shot-wrap{max-width:600px;margin:0 auto}
  .rhero-shot-wrap::after{left:-14px;top:-14px;right:14px;bottom:14px}
  .rhero-badge{left:auto;right:-10px;bottom:-14px}
  .stapel{height:330px;max-width:560px;margin:0 auto;width:100%}
  .stapel img{width:74%}
  .stapel img:nth-child(2){top:62px}
  .stapel img:nth-child(3){top:124px}
}
@media(max-width:560px){
  .rhero-shot-wrap::after{display:none}
  .rhero-badge{position:static;display:inline-block;margin-top:14px}
  .stapel{height:auto;display:grid;gap:14px}
  .stapel img{position:static;width:100%}
  .stapel img:nth-child(1){opacity:1}
  .stapel-marke{position:static;display:inline-block}
}

/* ------------------------------------------------------------
   3. Ergebnis in Zahlen – steht auf jeder Referenzseite ganz oben

   Farblogik, bewusst nur zwei Signale:
   Rot  = was das Unternehmen sonst zahlt oder wartet.
   Cyan = was dadurch entfällt oder schneller geht.
   Alles andere bleibt Navy. Mehr Farben würden die Aussage verwässern.
   ------------------------------------------------------------ */
.eyebrow--ergebnis{color:#C0392B !important}
.eyebrow--ergebnis::before{background:#C0392B !important}

/* Der Navigationspunkt trägt dieselbe Farblogik – auf dunklem Grund braucht
   Rot aber mehr Helligkeit, sonst ist es nicht lesbar. */
.nav-list > li > a.nav-ergebnis{color:#FF7B6E}
.nav-list > li > a.nav-ergebnis:hover,
.nav-list > li > a.nav-ergebnis:focus-visible{color:#fff;background:rgba(217,45,32,.28)}
.mobile-nav a.nav-ergebnis{color:#FF7B6E}

/* Hinweisbalken für Bereiche, die vorbereitet, aber nicht freigeschaltet sind.
   Steht bewusst über dem Ergebnisblock – wer die Zahlen liest, soll vorher
   wissen, dass sie eine Planung beschreiben und keinen Betrieb. */
.hinweis-plan{display:flex;gap:.85rem;align-items:flex-start;max-width:960px;
  margin:0 auto;padding:1.05rem 1.3rem;border-radius:10px;
  background:#FFF8E8;border:1px solid var(--mp-gold-border);border-left:4px solid #B9975A}
.hinweis-plan svg{flex:0 0 auto;margin-top:2px;color:#8A6E24}
.hinweis-plan p{margin:0;font-size:.92rem;line-height:1.6;color:#4a3d1c}
.hinweis-plan strong{color:#3d3216}

/* Im Untermenü sichtbar machen, auf welcher Seite man gerade steht */
.mega a.ist-hier{background:#e9f6f8;color:var(--tl);font-weight:800}
.mega a.ist-hier::after{content:" ·";opacity:.6}

/* Die Werkzeugleiste mit dem PDF-Knopf steht jetzt zentral in
   css/style-ds.css und wird von js/site.js erzeugt – auf jeder Seite
   der Website, nicht nur hier. Deshalb hier keine eigenen Regeln mehr.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   3b. Fachbegriffe mit Erklärung
   Dünne gestrichelte Linie unter dem Wort. Beim Überfahren oder bei
   Tastaturfokus öffnet sich ein kleines Fenster, beim Weitergehen
   verschwindet es wieder. Auf Touch reicht ein Tippen.
   ------------------------------------------------------------ */
.fach{position:relative;border-bottom:1px dashed rgba(8,125,143,.72);
  cursor:help;color:inherit;text-decoration:none}
.fach:hover,.fach.offen{border-bottom-color:var(--tl);color:var(--tl)}
.fach:focus-visible{outline:2px solid var(--mp-gold-border);outline-offset:2px;border-radius:2px}

/* Sichtbar wird das Fenster ausschliesslich ueber die Klasse "offen".
   Sie wird per Skript gesetzt – zusammen mit der Position. Das ist
   verlaesslicher, als vier CSS-Regelgruppen gegeneinander abzuwaegen. */
.fach-fenster{position:absolute;z-index:70;
  width:max-content;max-width:min(310px,80vw);padding:.75rem .9rem;border-radius:9px;
  background:var(--dk);color:rgba(255,255,255,.92);
  font-size:.83rem;font-weight:400;line-height:1.55;text-align:left;letter-spacing:0;
  text-transform:none;font-style:normal;
  box-shadow:0 16px 38px rgba(8,43,70,.3);
  opacity:0;visibility:hidden;pointer-events:none;
  /* Zusammengeschrumpft belegt die Blase im Ruhezustand keine Flaeche.
     Mit blossem visibility:hidden wuerde sie den Seitenrand ueberragen
     und die Seite waagerecht scrollbar machen. */
  left:0;transform:scale(0);transform-origin:top left;
  transition:opacity .15s ease,visibility .15s ease}
.fach.offen > .fach-fenster{opacity:1;visibility:visible;transform:none}
.fach-fenster b{display:block;color:var(--tl2);font-size:.8rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:.3rem}

/* Das Zipfelchen zeigt zum Wort. Seine Seite setzt ebenfalls das Skript. */
.fach-zipfel{position:absolute;width:0;height:0;border:6px solid transparent}

.kosten{background:#fff;border:1px solid var(--bd);border-left:4px solid #C0392B;
  border-radius:12px;overflow:hidden;box-shadow:0 8px 26px rgba(8,43,70,.07)}
.kosten-kopf{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--bd)}
.kosten-zelle{background:#fff;padding:1.7rem 1.5rem}
.kosten-zelle b{display:block;font-family:var(--heading);font-size:clamp(25px,2.4vw,32px);
  font-weight:800;color:var(--dk);line-height:1.05}
.kosten-zelle.hebel b{color:#0E7C8C}
.kosten-zelle.aufwand b{color:#C0392B}
.kosten-zelle span{display:block;margin-top:.5rem;color:var(--muted);font-size:.88rem;line-height:1.5}

/* Legende unter den Kacheln – erklärt die zwei Farben in einer Zeile */
.kosten-legende{display:flex;flex-wrap:wrap;gap:1.1rem;padding:.85rem 1.5rem;
  border-top:1px solid var(--bd);background:#FAFBFC;font-size:.82rem;color:var(--muted)}
.kosten-legende span{display:inline-flex;align-items:center;gap:.45rem}
.kosten-legende i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.kosten-legende .i-rot{background:#C0392B}
.kosten-legende .i-cyan{background:#0E7C8C}
.kosten details{border-top:1px solid var(--bd)}
.kosten summary{list-style:none;cursor:pointer;padding:1.05rem 1.5rem;font-weight:750;color:var(--dk);
  font-size:.95rem;display:flex;align-items:center;gap:.6rem;transition:background .16s ease}
.kosten summary::-webkit-details-marker{display:none}
.kosten summary::before{content:"+";display:inline-grid;place-items:center;width:22px;height:22px;
  border-radius:6px;background:#e8f6f8;color:#0E7C8C;font-weight:800;font-size:15px;line-height:1;flex:0 0 auto}
.kosten details[open] summary::before{content:"–"}
.kosten summary:hover{background:rgba(185,151,90,.1)}
.kosten summary:focus-visible{outline:2px solid var(--mp-gold-border);outline-offset:-3px}
.kosten-inhalt{padding:0 1.5rem 1.6rem}
.kosten-tab{width:100%;border-collapse:collapse;font-size:.92rem;margin-top:.4rem}
.kosten-tab th{text-align:left;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:800;padding:.6rem .7rem;border-bottom:1px solid var(--bd)}
.kosten-tab td{padding:.66rem .7rem;border-bottom:1px solid #eef2f6;color:#3b4954}
.kosten-tab td:first-child{color:var(--dk);font-weight:650}
.kosten-tab .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.kosten-tab tfoot td{border-bottom:0;border-top:2px solid var(--bd);font-weight:800;
  color:var(--dk);padding-top:.8rem}
.kosten-fuss{font-size:.86rem;color:var(--muted);line-height:1.65;margin:1rem 0 0}

/* ------------------------------------------------------------
   4. Projektkarten (Übersicht)
   ------------------------------------------------------------ */
.proj-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));margin-top:2rem}
.proj{display:flex;flex-direction:column;background:#fff;border:1px solid var(--bd);border-radius:12px;
  overflow:hidden;box-shadow:0 8px 26px rgba(8,43,70,.06);transition:.2s ease}
a.proj:hover{transform:translateY(-3px);border-color:rgba(8,125,143,.45);box-shadow:var(--shadow)}
.proj-bild{aspect-ratio:16/9;background:var(--cr);overflow:hidden;border-bottom:1px solid var(--bd)}
.proj-bild img{width:100%;height:100%;object-fit:cover;object-position:left top}
.proj-platzhalter{display:grid;place-items:center;aspect-ratio:16/9;
  background:linear-gradient(135deg,#0b2a3f,#0e4a5c);color:rgba(255,255,255,.5);
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.proj-body{padding:1.4rem;display:flex;flex-direction:column;flex:1}
.proj-kopf{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem}
.proj-body h3{font-size:1.15rem;margin:0}
.proj-body p{font-size:.94rem;margin:0 0 1rem}
.proj-zahl{margin-top:auto;padding-top:.9rem;border-top:1px solid #eef2f6;
  display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.proj-zahl b{font-family:var(--heading);font-size:1.15rem;font-weight:800;color:#0E7C8C}
.proj-zahl span{font-size:.82rem;color:var(--muted)}
.proj-mehr{display:inline-flex;margin-top:.9rem;color:var(--tl);font-size:.8rem;
  font-weight:800;text-transform:uppercase}
.proj[aria-disabled="true"]{opacity:.9}
.proj[aria-disabled="true"] .proj-mehr{color:var(--muted)}

.marke{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:.24rem .55rem;border-radius:999px;white-space:nowrap}
.marke--live{background:#e8f6f8;color:#0A5E6B}
.marke--intern{background:#eef2f6;color:#4E5D6C}
.marke--plan{background:rgba(185,151,90,.16);color:#8A6E24}

/* ------------------------------------------------------------
   5. Ausbaustufen
   ------------------------------------------------------------ */
.stufen{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin:0 0 8px}
.stufe{border:1px solid var(--bd);border-radius:12px;padding:22px 22px 20px;background:#fff;position:relative}
.stufe--fertig{border-color:#B9DFE6;background:#F4FBFC}
.stufe--geplant{border-color:rgba(185,151,90,.5);background:#FDFAF3}
.stufe-nr{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:8px;font-family:var(--heading);font-weight:800;font-size:15px;
  background:#082B46;color:#fff;margin-bottom:12px}
.stufe--fertig .stufe-nr{background:#0E7C8C}
.stufe--geplant .stufe-nr{background:#B9975A}
.stufe h3{margin:0 0 6px;font-size:18px}
.stufe-status{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:10px}
.stufe--fertig .stufe-status{color:#0A5E6B}
.stufe--geplant .stufe-status{color:#8A6E24}
.stufe p{margin:0 0 10px;font-size:15px;line-height:1.65}
.stufe ul{margin:0;padding-left:1.1rem;font-size:14.5px;line-height:1.7;color:#4E5D6C}
.stufe li{margin-bottom:5px}

/* ------------------------------------------------------------
   6. Bildschirmfotos
   ------------------------------------------------------------ */
.shot{margin:0 0 34px}
.shot img{width:100%;height:auto;display:block;border:1px solid #d9d4cc;border-radius:12px;
  box-shadow:0 18px 46px rgba(8,43,70,.16)}
/* Bildunterschrift: klarer Abstand zum Bild, als Block erkennbar und
   auf breiten Bildschirmen zweispaltig. Vorher klebte sie am Bild und
   brach mitten in der Flaeche um, waehrend rechts daneben nichts stand. */
.shot figcaption{font-size:14.5px;line-height:1.65;color:#4E5D6C;margin-top:22px;
  padding-left:16px;border-left:3px solid rgba(24,183,201,.55);max-width:92ch}
@media (max-width:640px){.shot figcaption{margin-top:16px;padding-left:12px}}
.shot figcaption b{color:#082B46}
.shot-paar{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));margin:0 0 34px}
.shot-paar .shot{margin:0}
.beispielhinweis{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#8A6E24;background:rgba(185,151,90,.14);
  border:1px solid rgba(185,151,90,.4);border-radius:999px;padding:.25rem .6rem;margin-left:.4rem}

/* ------------------------------------------------------------
   7. Systemkette
   ------------------------------------------------------------ */
.kette{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-top:1.6rem}
.kette-glied{background:#fff;border:1px solid var(--bd);border-left:3px solid #0E7C8C;
  border-radius:8px;padding:1.1rem 1.2rem}
.kette-glied b{display:block;color:var(--dk);font-size:.98rem;margin-bottom:.3rem}
.kette-glied span{font-size:.87rem;color:var(--muted);line-height:1.6}

/* ------------------------------------------------------------
   8. Untermenü: Seiten, die noch folgen
   ------------------------------------------------------------ */
.mega a.folgt{color:#8A99A7}
.mega a.folgt::after{content:" · folgt";font-size:.78em;color:#B9975A;font-weight:700}
.mega a.folgt:hover{background:#f4f6f8;color:#4E5D6C}

/* ------------------------------------------------------------
   9. Weitergeben: Knopf für Druck und PDF
   ------------------------------------------------------------ */
.pdf-band{background:var(--cr);border-block:1px solid var(--bd);padding:2.4rem 0}
.pdf-inner{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap}
.pdf-text{flex:1 1 380px;min-width:0}
.pdf-text h2{font-size:1.5rem;margin:0 0 .5rem}
.pdf-text p{margin:0;font-size:.95rem;max-width:62ch}
.btn-pdf{display:inline-flex;align-items:center;gap:.55rem;min-height:48px;padding:.85rem 1.35rem;
  border-radius:6px;border:1.5px solid var(--tl);background:var(--tl);color:#fff;
  font-size:.92rem;font-weight:760;cursor:pointer;font-family:inherit;line-height:1.1;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease}
.btn-pdf:hover{background:#0A6A79;border-color:var(--mp-gold-border);box-shadow:0 6px 18px var(--mp-gold-shadow)}
.btn-pdf:focus-visible{outline:2px solid var(--mp-gold-border);outline-offset:3px}
.btn-pdf svg{flex:0 0 auto}
.nav-list .btn-pdf{min-height:44px;padding:.55rem .85rem;font-size:.82rem;font-weight:650;
  background:transparent;border-color:rgba(255,255,255,.42);color:rgba(255,255,255,.86)}
.nav-list .btn-pdf:hover{background:rgba(255,255,255,.1);border-color:var(--mp-gold-border);color:#fff;box-shadow:none}

/* Nur für den Ausdruck: Kopf und Fuß mit Quelle */
.druckkopf,.druckfuss{display:none}

/* ------------------------------------------------------------
   10. Druckbild – A4, ohne Bedienelemente
   ------------------------------------------------------------ */
@media print{
  @page{size:A4;margin:16mm 14mm 18mm}

  html,body{background:#fff !important;font-size:10.5pt;line-height:1.5}
  body{color:#1a2530}

  /* Alles, was auf Papier nichts zu suchen hat */
  .site-nav,.nav-toggle,.mobile-nav,.rhero-ctas,.hero-actions,.hero-ctas,
  .stapel,.rhero-visual,.proj-mehr,.btn,.btn-pdf,.pdf-band,
  .bc-bar,.bc-launcher,.mpa-launcher,.mpa-panel,.fontsize-bar,
  .seiten-werkzeuge,.werkzeug,.werkzeug-hinweis,.fach-fenster,
  [class*="business-check"],[class*="assistent"],[id*="assistent"]{display:none !important}

  /* Kopf des Ausdrucks – schlank, das Logo steht frei, keine Linie darunter */
  .druckkopf{display:block;border-bottom:0;padding-bottom:0;margin-bottom:5mm}
  .druckkopf b{display:block;font-family:var(--heading);font-size:13pt;font-weight:800;color:#082B46}
  .druckkopf span{display:block;font-size:8pt;color:#8A6E24;margin-top:1pt;
    letter-spacing:.08em;text-transform:uppercase;font-weight:700}

  /* Hero wird zum Titelblock */
  /* Der Abstand für die feste Navileiste muss weg – auf Papier gibt es
     keine Leiste. Die Bildschirmregel hält sonst 113px frei. */
  .rhero{background:#fff !important;color:#000;padding:0 0 4mm !important;min-height:0 !important}
  .rhero-grid{display:block}
  .rhero h1{color:#082B46 !important;font-size:21pt;line-height:1.15;margin:0 0 4mm;break-after:avoid}
  /* Kennzeile steht bereits im Druckkopf – hier wäre sie doppelt */
  .rhero-eyebrow{display:none}
  .rhero-sub{color:#1a2530 !important;font-size:11.5pt;margin:0 0 3mm}
  .rhero-lead{color:#3b4954 !important;font-size:10pt;margin:0 0 4mm}
  .rhero-stats{border-top:1px solid #d9d4cc;margin-top:0;page-break-inside:avoid}
  .rstat{border-right:1px solid #e3e9ef;padding:3mm 4mm 3mm 0;flex:1 1 40mm}
  .rstat b{color:#0E7C8C !important;font-size:14pt}
  .rstat span{color:#4E5D6C !important;font-size:8.5pt}

  /* Abschnitte */
  .section{padding:5mm 0 !important;background:#fff !important;break-inside:auto}
  .section:first-of-type{padding-top:0 !important}
  .section.muted{background:#fff !important}
  .container{width:100% !important}
  .section-head{margin-bottom:4mm;break-after:avoid}
  h2{font-size:14.5pt;break-after:avoid}
  h3{font-size:11pt;break-after:avoid}
  .eyebrow{color:#8A6E24 !important;font-size:8pt}
  .eyebrow::before{background:#B9975A}
  .section-lead{font-size:10.5pt;color:#3b4954}
  p{orphans:3;widows:3}

  /* Aufklappbereiche im Druck immer offen */
  details{display:block !important}
  details > summary{display:none !important}
  details > div{display:block !important}

  /* Tabellen und Karten nicht zerreißen.
     Der Kostenblock selbst darf umbrechen – sonst bleibt die erste Seite
     halb leer, weil er als Ganzes auf die nächste springt. */
  /* Kein Rahmen um den ganzen Block: Er bricht auf zwei Seiten um und
     zieht sich sonst als leerer Kasten bis zum Seitenende.
     Die Kacheln tragen ihre Trennlinien selbst. */
  .kosten{break-inside:auto;box-shadow:none;border:0;border-left:3px solid #C0392B;
    padding-left:4mm;background:transparent !important}
  /* Zwei mal zwei statt vier nebeneinander – auf A4 besser lesbar,
     und keine angebrochene Zeile mit grauer Restfläche. */
  .kosten-kopf{background:#d9d4cc;grid-template-columns:repeat(2,1fr) !important;break-inside:avoid;border:1px solid #d9d4cc;border-radius:0}
  .kosten-zelle{padding:4mm 5mm;break-inside:avoid}
  .kosten-zelle b{font-size:14pt}
  .kosten-zelle span{font-size:8.5pt;margin-top:1.5mm}
  .kosten-zelle.hebel b{color:#0E7C8C !important}
  .kosten-zelle.aufwand b{color:#C0392B !important}
  .eyebrow--ergebnis{color:#C0392B !important}
  .eyebrow--ergebnis::before{background:#C0392B !important}
  .kosten-legende{border-top:1px solid #d9d4cc;background:#fff !important;
    padding:2mm 0 0;font-size:8pt}
  .kosten-inhalt{padding:0}
  .kosten details{border-top:0}
  .kosten summary{display:none !important}
  .kosten-tab{font-size:9pt;break-inside:auto}
  .kosten-tab thead{display:table-header-group}   /* Kopfzeile auf jeder Folgeseite */
  .kosten-tab tfoot{display:table-row-group}
  .kosten-tab th{font-size:7.5pt}
  .kosten-tab tr{break-inside:avoid}
  .kosten-fuss{font-size:8.5pt}
  /* Auf Papier hilft keine Sprechblase – das Wort bleibt, die Linie geht. */
  .fach{border-bottom:0 !important;color:inherit !important}
  .table-scroll{overflow:visible !important}

  .proj,.stufe,.kette-glied,.card,.quote-panel,.proof-block{
    break-inside:avoid;box-shadow:none;border:1px solid #d9d4cc}
  .proj-grid,.stufen,.kette{gap:4mm}
  .proj-bild,.proj-platzhalter{display:none}

  /* Bildschirmfotos: lesbar, aber nicht seitenfüllend */
  .shot{break-inside:avoid;margin-bottom:6mm}
  .shot img{border:1px solid #d9d4cc;box-shadow:none;max-height:105mm;object-fit:contain;object-position:left top}
  .shot figcaption{font-size:8.5pt;margin-top:2mm}
  .shot-paar{display:block}
  .shot-paar .shot{margin-bottom:6mm}
  .beispielhinweis{border:1px solid #B9975A;color:#8A6E24 !important}

  /* Verweise: Adresse mitdrucken, aber nur bei echten Zielen */
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#5A6B7B;word-break:break-all}
  a[href^="#"]::after,a[href^="mailto"]::after,a[href^="tel"]::after{content:""}

  /* Fuß des Ausdrucks */
  .druckfuss{display:block;margin-top:8mm;padding-top:3mm;border-top:1px solid #d9d4cc;
    font-size:8.5pt;color:#5A6B7B;break-inside:avoid}
  .druckfuss b{color:#082B46}
  .site-footer{background:#fff !important;color:#5A6B7B;padding:5mm 0 0;border-top:1px solid #d9d4cc}
  .site-footer *{color:#5A6B7B !important}
  .bew-footer-brand b{color:#082B46 !important;font-size:10pt}
  .footer-bottom{border-top:0;margin-top:2mm;padding-top:0;font-size:8pt}
}


/* ------------------------------------------------------------------
   Kopfzeile der Arbeitsproben-Seiten
   Diese Seiten tragen mehr in der Leiste als die uebrigen: Marke,
   Sprachwahl, Rueckweg zur Bewerbung, das Referenzmenue und dazu die
   Anker der Seite. Ohne die folgenden Regeln schrumpft die Marke auf
   Breite 0 und Sprachwahl und Rueckweg legen sich darueber.
   ------------------------------------------------------------------ */
.site-nav .bew-brand{flex:0 0 auto}          /* Marke schrumpft nie */
.site-nav .nav-list{min-width:0;flex-wrap:nowrap}
.site-nav .nav-list>li{flex:0 0 auto}
.site-nav .lang-switch{flex:0 0 auto}

/* Zwischen 1181 und 1560 px passt die volle Ankerliste nicht in eine
   Zeile. Statt sie ineinanderzuschieben, uebernimmt das Mobilmenue -
   dort stehen dieselben Punkte vollstaendig. */
@media (min-width:1181px) and (max-width:1560px){
  .site-nav .nav-list{display:none}
  .site-nav .nav-toggle{display:flex}
}

/* Ab 1561 px steht alles nebeneinander - etwas kompakter, damit die
   Zeile sicher in den Satzspiegel passt. */
@media (min-width:1561px){
  .site-nav .nav-list{gap:.15rem}
  .site-nav .nav-list>li>a{padding:.55rem .5rem;font-size:.9rem}
  .site-nav .nav-list .nav-cta{padding:.6rem .85rem!important}
}


/* ==================================================================
   Vergleichstabelle (.kosten-tab)
   Bisher ohne Bildschirmgestaltung: kein Kopf, keine Spaltentrennung,
   keine Zeilenfuehrung. Ab hier eine Komponente des Designsystems.
   Dunkelblauer Kopf, ruhige Zebrastreifen, Gold als Hover-Akzent,
   die eigene Spalte tuerkis hinterlegt. Auf schmalen Geraeten
   Karten statt seitlichem Schieben.
   ================================================================== */
.table-scroll{border:1px solid #E3E9EF;border-radius:10px;background:#fff;
  box-shadow:0 8px 26px rgba(8,43,70,.06);overflow:hidden}
.kosten-tab{width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem;margin:0}

.kosten-tab thead th{
  background:#082B46;color:#fff;text-align:left;vertical-align:bottom;
  padding:.95rem .9rem;font-family:'Manrope',Arial,sans-serif;font-weight:800;
  font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;line-height:1.35;
  border-bottom:3px solid #18b7c9;
}
.kosten-tab thead th span{display:block;margin-top:.28rem;color:#9fc4d6;
  font-size:.74rem;letter-spacing:0;text-transform:none;font-weight:500}
.kosten-tab thead th:first-child{width:26%;min-width:150px}
.kosten-tab thead th:last-child{background:#0b3f5c;border-bottom-color:#D8BE7C}

.kosten-tab tbody td{
  padding:.82rem .9rem;border-bottom:1px solid #EDF1F5;color:#3b4954;
  vertical-align:top;line-height:1.55;
}
.kosten-tab tbody tr:last-child td{border-bottom:0}
.kosten-tab tbody tr:nth-child(even) td{background:#F7FAFC}
.kosten-tab tbody td:first-child{
  color:#082B46;font-weight:650;border-right:1px solid #E3E9EF;background:#F4F7FA;
}
.kosten-tab tbody tr:nth-child(even) td:first-child{background:#EDF3F7}
/* Eigene Spalte hervorheben - sie ist der Punkt der Tabelle. */
.kosten-tab tbody td:last-child{background:rgba(24,183,201,.07);color:#0a3348;font-weight:600}
.kosten-tab tbody tr:nth-child(even) td:last-child{background:rgba(24,183,201,.12)}
.kosten-tab tbody tr:hover td{background:rgba(216,190,124,.14)}
.kosten-tab tbody tr:hover td:first-child{background:rgba(216,190,124,.22);color:#6b4a12}
.kosten-tab tbody tr:hover td:last-child{background:rgba(216,190,124,.20)}
.kosten-tab .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---- Schmale Geraete: Karten statt Tabelle ----------------------- */
@media (max-width:820px){
  .table-scroll{border:0;background:none;box-shadow:none;border-radius:0;overflow:visible}
  .kosten-tab, .kosten-tab tbody, .kosten-tab tr, .kosten-tab td{display:block;width:auto}
  .kosten-tab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .kosten-tab tbody tr{
    border:1px solid #E3E9EF;border-radius:10px;background:#fff;margin-bottom:14px;
    box-shadow:0 6px 18px rgba(8,43,70,.06);overflow:hidden;
  }
  .kosten-tab tbody tr:hover td{background:inherit}
  .kosten-tab tbody td{border-bottom:1px solid #EDF1F5;padding:.7rem .9rem}
  .kosten-tab tbody tr td:last-child{border-bottom:0}
  .kosten-tab tbody tr:nth-child(even) td{background:#fff}
  /* Erste Zelle ist die Zeilenueberschrift der Karte */
  .kosten-tab tbody td:first-child{
    background:#082B46!important;color:#fff;font-family:'Manrope',Arial,sans-serif;
    font-weight:800;font-size:.98rem;border-right:0;border-bottom:0;padding:.8rem .9rem;
  }
  .kosten-tab tbody td:first-child::before{content:none}
  /* Alle weiteren Zellen bekommen ihre Spaltenueberschrift davor */
  .kosten-tab tbody td[data-spalte]:not(:first-child)::before{
    content:attr(data-spalte);display:block;margin-bottom:.18rem;
    font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#087d8f;
  }
  .kosten-tab tbody td:last-child{background:rgba(24,183,201,.09)!important;color:#0a3348}
  .kosten-tab tbody td:last-child::before{color:#0a3348}
}


/* ------------------------------------------------------------------
   Abstandsmass der Arbeitsproben-Seiten
   Das Grundsystem gibt den Sektionen 110px oben und unten - zwischen
   zwei Sektionen entstehen so fast 300px Leerraum, besonders nach
   grossen Bildschirmfotos. Hier gilt das engere Mass.
   ------------------------------------------------------------------ */
@media screen{
  .section{padding:72px 0}
  .section-head{margin-bottom:40px}
  .shot{margin:0 0 26px}
  .section .container > .shot:last-child,
  .section .container > figure:last-child{margin-bottom:0}
}


/* KANTENGLEICHHEIT 2026-09-03 */
/* ch-Werte verbietet die Hausregel ausdruecklich: 62ch waren gemessen
   594 px in einer 1280-px-Spalte. Kante = Spalte. */
.pdf-text p,.rhero-copy,.hero-copy{max-width:none}


/* KANTENGLEICHHEIT BEWERBERSEITEN 2026-09-03 */
/* Die Bewerber- und Referenzseiten hatten eigene Deckel:
   .hero-name 1060, .hero-summary 520/820, .hero-claim 760, .pnote 820,
   .bro-eyebrow und der Einleitungsabsatz in ch-Werten (522 bzw. 626 px
   in einer 1082-px-Spalte). Kante = Spalte, wie im Rest der Website. */
.hero-name,.hero-summary,.hero-solo .hero-summary,.hero-claim,
.pnote,.pnote-wide,.bro-eyebrow,.bro-lead,.hero-sub{max-width:none}