/* ============================================================
   Seitenwerkzeuge – eigenstaendige Fassung
   Fuer Seiten, die css/style-ds.css nicht einbinden, weil sie ihr
   eigenes Aussehen mitbringen. Inhaltsgleich mit dem Abschnitt
   "Seitenwerkzeuge" in style-ds.css, nur mit Ersatzfarben statt
   der dort gesetzten Variablen.
   ============================================================ */
.seiten-werkzeuge{display:flex;justify-content:flex-end;gap:.5rem;
  width:min(1180px,calc(100% - 40px));margin:0 auto;padding:1.25rem 0}
.werkzeug{position:relative;display:inline-flex;align-items:center;gap:.55rem;
  min-height:44px;padding:.55rem .85rem;border-radius:6px;
  border:1.5px solid #E3E9EF;background:transparent;color:#4E5D6C;
  font-family:inherit;font-size:.82rem;font-weight:650;line-height:1.1;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}
.werkzeug:hover{background:#F2FAFB;border-color:rgba(216,190,124,.68);color:#087d8f;
  box-shadow:0 6px 18px rgba(216,190,124,.22)}
.werkzeug:focus-visible{outline:2px solid rgba(216,190,124,.68);outline-offset:3px}
.werkzeug svg{flex:0 0 auto}

/* Auf dunklem Grund dreht sich die Farbgebung um */
.section.dark .seiten-werkzeuge .werkzeug,
.werkzeug.auf-dunkel{border-color:rgba(255,255,255,.42);color:rgba(255,255,255,.86)}
.section.dark .seiten-werkzeuge .werkzeug:hover,
.werkzeug.auf-dunkel:hover{background:rgba(255,255,255,.1);color:#fff;box-shadow:none}

/* Die Erklärung beim Überfahren */
.werkzeug-hinweis{position:absolute;top:calc(100% + 9px);right:0;z-index:60;
  width:max-content;max-width:min(250px,80vw);padding:.6rem .75rem;border-radius:8px;
  background:#082B46;color:#fff;font-size:.8rem;font-weight:500;line-height:1.45;
  text-align:left;letter-spacing:0;text-transform:none;
  box-shadow:0 12px 30px rgba(8,43,70,.28);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:scale(0);transform-origin:top right;
  transition:opacity .15s ease,visibility .15s ease}
.werkzeug-hinweis::before{content:"";position:absolute;bottom:100%;right:16px;
  border:6px solid transparent;border-bottom-color:#082B46}
.werkzeug:hover .werkzeug-hinweis,
.werkzeug:focus-visible .werkzeug-hinweis{opacity:1;visibility:visible;transform:none}

@media(max-width:720px){
  .seiten-werkzeuge{width:min(100% - 28px,1180px);padding:1rem 0}
}

/* Weiterempfehlen: schlanke Symbolknoepfe neben dem beschrifteten PDF-Knopf.
   Die Hauptfunktion traegt Text, die Nebenfunktionen nur ein Zeichen –
   sonst wird die Leiste zur zweiten Navigation. */
.werkzeug--symbol{padding:.55rem;width:44px;justify-content:center;color:#4E5D6C;text-decoration:none}
.werkzeug--symbol:hover{color:#087d8f}
.werkzeug--erledigt{border-color:#087d8f;color:#087d8f;background:#F2FAFB}
.werkzeug-trenner{align-self:center;width:1px;height:22px;background:#E3E9EF;margin:0 .15rem}

/* Zurueck nach oben. Sitzt oberhalb des Assistenten, damit sich beide
   nicht ueberdecken, und erscheint erst nach dem ersten Bildschirm. */
.nach-oben{position:fixed;right:24px;bottom:100px;z-index:1400;
  display:grid;place-items:center;width:46px;height:46px;padding:0;
  border:1px solid rgba(255,255,255,.18);border-radius:50%;
  background:#082B46;color:#fff;cursor:pointer;
  box-shadow:0 10px 26px rgba(8,43,70,.34);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .18s ease,visibility .18s ease,transform .18s ease,background .18s ease}
.nach-oben.sichtbar{opacity:1;visibility:visible;transform:none}
.nach-oben:hover{background:#087d8f}
.nach-oben:focus-visible{outline:2px solid rgba(216,190,124,.68);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.nach-oben{transition:none}}
@media(max-width:720px){
  .nach-oben{right:16px;bottom:92px;width:42px;height:42px}
  .werkzeug--symbol{width:42px}
}
@media print{.nach-oben,.werkzeug--symbol,.werkzeug-trenner{display:none !important}}

/* Kopf und Fuss des Ausdrucks: am Bildschirm unsichtbar.
   Ohne diese Regel stehen sie im Seitenfluss – und die lange Quell-Adresse
   im Fuss sprengt auf schmalen Bildschirmen die Seitenbreite. */
.druckkopf,.druckfuss{display:none}

/* ============================================================
   Mobile Korrekturen · 27.08.2026
   Vier Bausteine sprengten bei 390 px die Seitenbreite. Nach
   Master-Skill Abschnitt 8 ist das jeweils ein P1-Fehler.
   Die Regeln stehen hier zentral, damit sie nicht in vier
   Seiten-Stylesheets doppelt gepflegt werden muessen.
   ============================================================ */
@media(max-width:720px){

  /* Tabellen: bei schmalem Bildschirm waegerecht rollbar statt die
     ganze Seite zu verbreitern. Der Rollbehaelter ist vorhanden, stand
     aber auf "abschneiden" – die Tabelle darunter behaelt ihre 720 px
     Mindestbreite und ragte deshalb hinaus.
     Das !important ist hier noetig, nicht bequem: Die betroffenen Seiten
     bringen einen eigenen <style>-Block mit, der nach diesem Stylesheet
     steht und sonst gewinnt. */
  .table-scroll{overflow-x:auto !important;-webkit-overflow-scrolling:touch;max-width:100%}
  main table{display:block;max-width:100%;overflow-x:auto}

  /* Kopfleiste der Bewerbungsunterlagen: zwei Elemente nebeneinander,
     die zusammen breiter sind als das Display. Sie duerfen umbrechen. */
  .pbar-row{flex-wrap:wrap;height:auto;padding:14px 16px;gap:10px;justify-content:flex-start}

  /* Preisangabe: stand auf "nicht schrumpfen" und schob den Zusatztext
     ueber den Rand hinaus. Auch hier gewinnt sonst der seitenlokale
     <style>-Block, deshalb !important. */
  .ken-price{flex:0 1 auto !important;min-width:0 !important}
  .ken-price small{overflow-wrap:anywhere}
  .ken-offer{flex-wrap:wrap}

  /* Raster mit festen Spaltenbreiten: Die Zellen stehen von Haus aus auf
     min-width:auto und schrumpfen deshalb nicht unter ihren Inhalt. Passt
     der Text nicht in die Spalte, waechst das Raster ueber den Rand hinaus.
     min-width:0 erlaubt das Schrumpfen, der Umbruch faengt lange Woerter ab. */
  .fit4 > *,.fitc{min-width:0}
  .fit4,.fitc{overflow-wrap:break-word}

  /* Schaubild mit ringfoermig angeordneten Knoten: die aeusseren
     Knoten ragen ueber ihren Kreis hinaus. Statt die Anordnung
     aufzuloesen wird das ganze Schaubild verkleinert – die
     Proportionen bleiben, der Aufbau bleibt lesbar. */
  .arch-core{transform:scale(.78);transform-origin:center center}
}

/* ------------------------------------------------------------
   Grundlegendes Drucklayout für alle Seiten
   Reicht für Leistungs- und Themenseiten. Die Referenzseiten
   verfeinern es zusätzlich in css/referenz.css.
   ------------------------------------------------------------ */
@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}

  .site-nav,.nav-toggle,.mobile-nav,.seiten-werkzeuge,.werkzeug,.werkzeug-hinweis,
  .hero-actions,.hero-ctas,.cta-band,.contact-form,.lightbox,.fontsize-bar,
  .bc-bar,.bc-launcher,.mpa-launcher,.mpa-panel,.visual-zoom::after,
  [class*="business-check"],[class*="assistent"],[id*="assistent"]{display:none !important}

  /* Dunkle Flächen werden auf Papier hell – sonst frisst der Drucker eine Patrone */
  .home-hero,.page-hero,.section.dark,.private-hero,.site-footer{
    background:#fff !important;color:#1a2530 !important;min-height:0 !important;padding:0 0 6mm !important}
  .hero-shade,.private-overlay,.hero-media{display:none !important}
  .home-hero h1,.page-hero h1,.section.dark h2,.section.dark h3,.private-hero h1{color:#082B46 !important}
  .home-hero p,.page-hero p,.section.dark p,.private-hero p{color:#3b4954 !important}
  .hero-content,.private-hero-content{padding:0 !important;position:static !important}

  .container{width:100% !important}
  .section{padding:5mm 0 !important;background:#fff !important}
  h1{font-size:20pt;break-after:avoid}
  h2{font-size:14pt;break-after:avoid}
  h3{font-size:11pt;break-after:avoid}
  .card,.stat,.ai-platform,.download-card,figure,table{break-inside:avoid}
  img{max-height:75mm;object-fit:contain}
  a{color:inherit !important;text-decoration:none}

  /* Kopf und Fuß setzt js/site.js ein */
  .druckkopf,.druckfuss{display:block !important;width:100%}
  .druckkopf{margin-bottom:5mm}
  .druckkopf b{display:block;font-family:'Manrope',Arial,sans-serif;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}
  .druckfuss{margin-top:6mm;padding-top:3mm;border-top:1px solid #d9d4cc;
    overflow-wrap:anywhere;word-break:break-word;
    font-size:8.5pt;color:#5A6B7B;break-inside:avoid}
  .druckfuss b{color:#082B46}
}


/* DIREKTER DRAHT 2026-09-03 */
/* Diese Seiten laden style-ds.css nicht, tragen aber denselben Fusszeilen-
   block. Gleiche Werte wie dort, damit die Kante nicht auseinanderlaeuft. */
.footer-draht{margin-top:1.2rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.12)}
.footer-draht .footer-draht-kopf{display:block;margin-bottom:.35rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.02em;color:rgba(255,255,255,.42);font-weight:800}
.footer-draht a{display:block;margin:.25rem 0;color:#fff;font-size:.94rem;font-weight:700;font-variant-numeric:tabular-nums;border-bottom:1px solid transparent;width:max-content;transition:color .18s ease,border-color .18s ease}
.footer-draht a:hover,.footer-draht a:focus-visible{color:#B9975A;border-bottom-color:currentColor}