/* ============================================================
   identpro – Corporate Design (EINE Quelle)
   Wird von WES-Hub UND Sales/Partner-Portal geladen.
   Hier ändern = beide Oberflächen ändern sich konsistent.
   Ausgerollt über Bitbucket Pipelines seit 15.09.2026.
   ============================================================ */

/* --- Schriften --- */
@import url('fonts/fonts.css');   /* Portal-Kopie: Schriften lokal statt von Google (Datenschutz) */

:root {
  /* --- Markenfarben (exakt von www.identpro.de) --- */
  --nb:      #003f68;   /* identpro-Blau (Primär) */
  --cyan:    #009ee3;   /* identpro-Cyan (Akzent) */
  --lime:    #d3d800;   /* Lime */
  --magenta: #c15f9c;   /* Magenta (Sekundär-Akzent) */

  /* --- Neutrale --- */
  --ink:   #12232f;     /* Text */
  --paper: #eef2f5;     /* Seitenhintergrund */
  --card:  #ffffff;     /* Karten/Flächen */
  --line:  #d7e0e6;     /* Rahmen/Trennlinien */
  --muted: #5a6b78;     /* gedämpfter Text (Kontrast >4.5:1 auf --paper) */
  --ok:    #2e9e5b;     /* Erfolg/positiv */

  /* --- Akzent-Reihe (Hub-Kachel-Farbstreifen) --- */
  --a1: #d3d800;  --a2: #009ee3;  --a4: var(--magenta);

  /* --- Typografie --- */
  --f:         'Barlow Condensed','Segoe UI',sans-serif;   /* Alias (Hub) */
  --font-head: 'Barlow Condensed','Segoe UI',sans-serif;   /* Überschriften */
  --font-body: 'Inter',system-ui,'Segoe UI',sans-serif;    /* Fließtext */
}

/* --- Accessibility (gilt auf Hub + Salesroom) --- */
/* Sichtbarer Tastatur-Fokus auf allen interaktiven Elementen */
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }
/* Bewegung reduzieren, wenn vom System gewünscht */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* --- Breadcrumb / Brotkrumen (Hub + Salesroom, Variante A: in der Kopfzeile) ---
   Farben ueber Variablen: heller Header setzt --crumb-* neu (siehe Salesroom-Header). */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;min-width:0;
  font-family:var(--font-body);font-size:13.5px;font-weight:600;line-height:1.2;}
.crumbs a{color:var(--crumb-link,#0a6fa8);text-decoration:none;padding:3px 7px;border-radius:6px;
  transition:background .12s ease;}
.crumbs a:hover{background:var(--crumb-hover,rgba(0,158,227,.14));text-decoration:underline;}
.crumbs a:focus-visible{outline:2.5px solid var(--cyan);outline-offset:1px;}
.crumbs .sep{color:var(--crumb-sep,#9fb2bd);font-weight:400;user-select:none;}
.crumbs [aria-current="page"]{color:var(--crumb-cur,var(--ink));font-weight:700;padding:3px 2px;}
.crumbs .home{display:inline-flex;align-items:center;gap:5px;}
.crumbs .home svg{width:14px;height:14px;flex:0 0 auto;}
.crumbs .mid-ell{display:none;}
@media (max-width:640px){ .crumbs .mid{display:none;} .crumbs .mid-ell{display:inline;} }

/* --- Vereinheitlichte Kopfzeile (Hub-Identität: weiß + identpro-Logo + „identpro WES") ---
   Genutzt von Salesroom (page-Shell) und 3D (injizierte zones.js), damit ALLE Oberflächen
   denselben Header haben. Klasse schlägt Element-Selektoren der App-eigenen header{}-Regel. */
.wes-topbar{background:var(--card,#fff);color:var(--ink);border-bottom:3px solid var(--lime);
  padding:11px 32px;height:auto;display:flex;align-items:center;gap:14px;
  box-shadow:0 2px 10px rgba(0,65,105,.07);font-family:var(--font-body);}
.wes-topbar .wt-logo{height:36px;width:auto;flex:0 0 auto;}
.wes-topbar .wt-brand{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.2px;white-space:nowrap;}
.wes-topbar .wt-brand span{color:var(--cyan);}
.wes-topbar .crumbs{margin-left:6px;}   /* nutzt die hellen .crumbs-Defaults (dunkel auf weiß) */
.wes-topbar .wt-right{margin-left:auto;display:flex;align-items:center;gap:14px;white-space:nowrap;}
.wes-topbar .wt-right a{color:var(--nb);text-decoration:none;font-weight:600;font-size:14px;}
.wes-topbar .wt-right a:hover{text-decoration:underline;}
.wes-topbar .wt-btn{background:transparent;border:2px solid var(--nb);color:var(--nb);padding:5px 14px;
  border-radius:4px;font-weight:600;font-size:14px;letter-spacing:.5px;cursor:pointer;text-decoration:none;transition:.18s;}
.wes-topbar .wt-btn:hover{background:var(--nb);color:#fff;}
/* Status-Kennzeichnung (z.B. „Intern · Vertraulich", „Intern · Nur Admin"):
   durchgaengig gefuellte Magenta-Plakette, gehoert in die Topbar -- nicht in den Header. */
.wes-topbar .wt-badge{display:inline-block;flex:0 0 auto;background:var(--magenta);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  padding:5px 12px;border-radius:3px;white-space:nowrap;}
@media (max-width:600px){ .wes-topbar .crumbs{display:none;} .wes-topbar{padding:10px 16px;} }

/* --- Dokument-/Themen-Kacheln (Hub-Katalog + generierte inhalte/-Seiten) ---
   Eine Komponente, zwei Groessen: Standard fuer Navigations-Kacheln (Hub-Adminbereich),
   Modifier-Klasse .doc auf der einzelnen Karte fuer die kompaktere Katalog-/Themenliste
   (Icon+Titel+Beschreibung+ein Badge, optional Fussnote .doc-stand).
   Wrapper .doc-cards um den Container, damit die Regeln nicht auf Salesroom durchschlagen,
   das dieselbe brand.css laedt, diese Komponente aber (noch) nicht nutzt. */
.doc-cards{max-width:1080px;margin:0 auto;padding:54px 32px 20px;flex:1;width:100%}
.doc-cards .portal-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px;border-bottom:1px solid var(--line);padding-bottom:12px}
.doc-cards .portal-head h2{font-size:15px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--nb)}
.doc-cards .portal-head .hint{font-size:14px;color:var(--muted);font-weight:300}
.doc-cards .portal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.doc-cards .portal-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:30px 26px 24px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
.doc-cards .portal-card::after{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent,var(--cyan))}
.doc-cards .portal-card.active{cursor:pointer;text-decoration:none;color:inherit}
.doc-cards .portal-card.active:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(0,65,105,.14);border-color:transparent}
.doc-cards .portal-card.placeholder{opacity:.62;order:4}
.doc-cards .portal-card.placeholder::after{background:var(--line)}
.doc-cards .card-icon{width:48px;height:48px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:24px;background:rgba(0,159,227,.10);color:var(--nb)}
.doc-cards .card-title{font-size:25px;font-weight:700;color:var(--ink);letter-spacing:-.2px;line-height:1}
.doc-cards .card-desc{font-size:16px;font-weight:300;color:var(--muted);line-height:1.5;flex:1}
.doc-cards .card-badge{display:inline-flex;align-items:center;align-self:flex-start;font-size:12.5px;font-weight:600;letter-spacing:.5px;padding:4px 12px;border-radius:20px;text-transform:uppercase;background:rgba(0,65,105,.09);color:var(--nb)}
.doc-cards .portal-card.placeholder .card-badge{background:var(--line);color:#7a8b96}
.doc-cards .card-arrow{position:absolute;right:22px;bottom:20px;font-size:24px;color:var(--cyan);opacity:0;transform:translateX(-6px);transition:.18s}
.doc-cards .portal-card.active:hover .card-arrow{opacity:1;transform:translateX(0)}
/* Kompakte Variante: Karte mit .doc, z.B. innerhalb eines Themen-/Dokumentenkatalogs */
.doc-cards .portal-title{font-size:24px}
.doc-cards .portal-note{font-size:13px;color:var(--muted)}
/* Abstand zur naechsten Kategorie: beim Zentralisieren zunaechst uebersehen. */
.doc-cards .portal-head{margin-top:56px;margin-bottom:18px}
.doc-cards .portal-head:first-of-type{margin-top:10px}
.doc-cards .portal-grid{margin-bottom:56px}
.doc-cards .portal-card.doc{padding:18px 20px;gap:11px}
.doc-cards .doc-t{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.2px;line-height:1.16}
.doc-cards .doc-d{font-size:13.5px;font-weight:300;color:var(--muted);line-height:1.5;flex:1}
.doc-cards .doc-badge{display:inline-flex;align-items:center;align-self:flex-start;font-size:12px;font-weight:600;letter-spacing:.5px;padding:4px 11px;border-radius:20px;text-transform:uppercase;background:rgba(0,65,105,.09);color:var(--nb)}
.doc-cards .doc-stand{margin-top:12px;padding-top:9px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted);letter-spacing:.3px}
@media(max-width:820px){ .doc-cards .portal-grid{grid-template-columns:1fr} }

/* --- Seiten-Header (Hero-Banner: Eyebrow-Label, Titel, optional Unterzeile) ---
   Gleiche Optik wie Hub-Startseite und die Schnittstellen-Detailseiten (dort mit
   Zusatzspalte fuer Badges/Meta - hier die einfache, gestapelte Variante fuer
   normale Doku-Seiten). Einbindung: <section class="hero"><div class="hero-inner">
   <div class="hero-label">…</div><h1>…</h1><div class="hero-sub">…</div></div></section> */
.hero{position:relative;background:var(--nb);color:#fff;overflow:hidden;padding:64px 32px 48px}
.hero::before{content:"";position:absolute;right:-140px;top:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(0,159,227,.28),transparent 62%);pointer-events:none}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--lime),var(--cyan),var(--magenta))}
.hero-inner{max-width:1080px;margin:0 auto;position:relative;z-index:1}
.hero-label{font-size:13px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--cyan);margin-bottom:14px}
.hero h1{font-size:clamp(36px,5vw,58px);font-weight:700;line-height:1.05;letter-spacing:-.5px;text-wrap:balance;margin:0}
.hero-sub{font-size:17px;font-weight:300;color:rgba(255,255,255,.82);max-width:640px;line-height:1.5;margin-top:12px}
@media(max-width:600px){ .hero{padding:40px 20px 32px} }

/* --- Interface-Meta-Box (Badges + Kurzreferenz-Zeile) ---
   Fuer Detailseiten, deren Header frueher Badges/Meta im Hero selbst trug (z.B. die
   Schnittstellenseiten). Der Hero ist jetzt einheitlich schlicht (siehe oben); Badges/
   Meta wandern stattdessen als kleine Box an den Anfang des Inhaltsbereichs.
   Einbindung: <div class="iface-meta"><span class="tag">…</span><span class="txt">…</span></div> */
.iface-meta{background:rgba(0,159,227,.07);border:1px solid var(--line);border-radius:10px;
  padding:14px 20px;margin:0 0 28px;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.iface-meta .tag{display:inline-block;background:var(--lime);color:var(--ink);font-size:11px;
  font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;border-radius:3px}
.iface-meta .txt{font-size:13px;color:var(--muted);line-height:1.7}
.iface-meta .txt code{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:1px 6px}