/*
Theme Name: Resilienzbrief
Theme URI: https://www.resilienzbrief.de/
Author: Resilience Brief
Description: Custom company theme for Resilience Brief.
Version: 1.0.0
Text Domain: resilienzbrief
*/

:root {
  --ink: #0b1724;
  --ink-soft: #314052;
  --paper: #f7f8f5;
  --white: #ffffff;
  --line: #dfe5df;
  --accent: #e7a943;
  --accent-dark: #b97916;
  --signal: #2d725c;
  --night: #08131f;
  --night-2: #102437;
  --muted: #697787;
  --radius: 22px;
  --shadow: 0 24px 70px rgba(7, 20, 33, .10);
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
button, input, textarea { font: inherit; }

.rb-wrap { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.rb-section { padding: 104px 0; }
.rb-section--tight { padding: 78px 0; }
.rb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  color: var(--signal);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.rb-eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.rb-title {
  max-width: 840px;
  margin: 0;
  font-size: clamp(38px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -.045em;
}
.rb-title--section { font-size: clamp(32px, 4vw, 52px); max-width: 760px; }
.rb-lead { max-width: 720px; margin: 24px 0 0; color: var(--ink-soft); font-size: clamp(18px, 2vw, 22px); }
.rb-copy { color: var(--ink-soft); font-size: 17px; }
.rb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 800;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  cursor: pointer;
}
.rb-btn:hover { transform: translateY(-2px); }
.rb-btn--primary { background: var(--accent); color: #18202a; }
.rb-btn--primary:hover { background: #f0b956; }
.rb-btn--ghost { border-color: rgba(255,255,255,.32); color: #fff; }
.rb-btn--ghost:hover { background: rgba(255,255,255,.08); }
.rb-btn--dark { background: var(--ink); color: #fff; }
.rb-btn--dark:hover { background: var(--night-2); }

.rb-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247,248,245,.90);
  border-bottom: 1px solid rgba(11,23,36,.08);
  backdrop-filter: blur(18px);
}
.rb-nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.rb-brand { display: flex; align-items: center; gap: 12px; font-weight: 900; letter-spacing: -.02em; }
.rb-mark {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; background: var(--ink); color: var(--accent);
  font-size: 13px; letter-spacing: -.06em;
}
.rb-links { display: flex; align-items: center; gap: 28px; color: var(--ink-soft); font-size: 14px; font-weight: 700; }
.rb-links a:hover { color: var(--ink); }
.rb-menu-toggle { display:none; border:0; background:transparent; font-weight:800; }

.rb-hero {
  position: relative;
  overflow: hidden;
  min-height: 760px;
  padding: 132px 0 88px;
  color: #fff;
  background:
    radial-gradient(circle at 77% 24%, rgba(231,169,67,.19), transparent 23%),
    radial-gradient(circle at 65% 72%, rgba(45,114,92,.24), transparent 29%),
    linear-gradient(135deg, var(--night) 0%, #0c1d2c 58%, #122b38 100%);
}
.rb-hero::after {
  content:""; position:absolute; inset:0; opacity:.17; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
}
.rb-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns: 1.12fr .88fr; gap: 80px; align-items:center; }
.rb-hero .rb-eyebrow { color: #9fd3c0; }
.rb-hero .rb-lead { color: #c5d0d9; }
.rb-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.rb-pills { display:flex; flex-wrap:wrap; gap:10px; margin-top:42px; }
.rb-pill { padding:8px 13px; border:1px solid rgba(255,255,255,.17); border-radius:999px; color:#cbd6de; font-size:13px; font-weight:700; background:rgba(255,255,255,.035); }
.rb-console {
  position:relative; padding:24px; border:1px solid rgba(255,255,255,.14); border-radius:28px;
  background:rgba(4,13,22,.66); box-shadow:0 45px 100px rgba(0,0,0,.28); backdrop-filter: blur(12px);
}
.rb-console-top { display:flex; justify-content:space-between; align-items:center; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.1); }
.rb-console-title { font-size:13px; color:#9fb0bd; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.rb-live { display:flex; align-items:center; gap:8px; color:#a7dfc7; font-size:12px; font-weight:800; }
.rb-live::before { content:""; width:8px; height:8px; border-radius:50%; background:#71cfa7; box-shadow:0 0 0 5px rgba(113,207,167,.10); }
.rb-flow { padding:19px 0 0; display:grid; gap:12px; }
.rb-flow-row { display:grid; grid-template-columns:38px 1fr auto; gap:13px; align-items:center; padding:14px; border-radius:16px; background:rgba(255,255,255,.045); }
.rb-flow-icon { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:rgba(231,169,67,.13); color:var(--accent); font-size:13px; font-weight:900; }
.rb-flow-main strong { display:block; font-size:14px; }
.rb-flow-main span { color:#93a6b4; font-size:12px; }
.rb-state { font-size:11px; font-weight:900; padding:5px 8px; border-radius:999px; background:rgba(45,114,92,.26); color:#a7dfc7; }
.rb-state--approval { background:rgba(231,169,67,.17); color:#f4c97f; }

.rb-trustbar { background:#fff; border-bottom:1px solid var(--line); }
.rb-trustbar-inner { display:grid; grid-template-columns:repeat(4,1fr); }
.rb-trustitem { padding:26px 24px; border-right:1px solid var(--line); }
.rb-trustitem:last-child { border-right:0; }
.rb-trustitem strong { display:block; font-size:15px; }
.rb-trustitem span { display:block; margin-top:4px; color:var(--muted); font-size:13px; }

.rb-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:54px; }
.rb-card {
  position:relative; min-height:270px; padding:30px; border:1px solid var(--line); border-radius:var(--radius); background:#fff;
  box-shadow:0 1px 0 rgba(11,23,36,.02); transition:transform .2s ease, box-shadow .2s ease;
}
.rb-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.rb-card-no { color:var(--accent-dark); font-size:13px; font-weight:900; letter-spacing:.1em; }
.rb-card h3 { margin:42px 0 12px; font-size:24px; line-height:1.15; letter-spacing:-.025em; }
.rb-card p { margin:0; color:var(--muted); }
.rb-card--dark { background:var(--ink); border-color:var(--ink); color:#fff; }
.rb-card--dark p { color:#b7c5d0; }

.rb-split { display:grid; grid-template-columns:.86fr 1.14fr; gap:84px; align-items:start; }
.rb-sticky { position:sticky; top:116px; }
.rb-steps { display:grid; gap:14px; }
.rb-step { display:grid; grid-template-columns:58px 1fr; gap:20px; padding:25px 0; border-top:1px solid var(--line); }
.rb-step:last-child { border-bottom:1px solid var(--line); }
.rb-step-num { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:#fff; border:1px solid var(--line); font-weight:900; color:var(--signal); }
.rb-step h3 { margin:2px 0 6px; font-size:22px; }
.rb-step p { margin:0; color:var(--muted); }

.rb-platform { background:var(--ink); color:#fff; }
.rb-platform .rb-eyebrow { color:#9fd3c0; }
.rb-platform .rb-lead, .rb-platform .rb-copy { color:#b6c4cf; }
.rb-capabilities { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:42px; }
.rb-capability { padding:22px 24px; border:1px solid rgba(255,255,255,.12); border-radius:18px; background:rgba(255,255,255,.035); }
.rb-capability strong { display:block; margin-bottom:6px; }
.rb-capability span { color:#aebdc9; font-size:14px; }
.rb-architecture { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:46px; }
.rb-arch { padding:24px; border-top:2px solid rgba(231,169,67,.85); background:rgba(255,255,255,.035); }
.rb-arch h3 { margin:0 0 8px; font-size:18px; }
.rb-arch p { margin:0; color:#afbdc8; font-size:14px; }

.rb-audience { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:48px; }
.rb-audience-box { padding:38px; border-radius:var(--radius); background:#fff; border:1px solid var(--line); }
.rb-audience-box h3 { font-size:28px; margin:0 0 14px; letter-spacing:-.03em; }
.rb-checks { list-style:none; padding:0; margin:24px 0 0; display:grid; gap:10px; }
.rb-checks li { position:relative; padding-left:25px; color:var(--ink-soft); }
.rb-checks li::before { content:"✓"; position:absolute; left:0; color:var(--signal); font-weight:900; }

.rb-contact { background:#e9ece7; }
.rb-contact-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:start; }
.rb-contact-card { padding:34px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.rb-form { display:grid; gap:15px; }
.rb-form-row { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.rb-field label { display:block; margin-bottom:7px; font-size:13px; font-weight:800; }
.rb-field input, .rb-field textarea {
  width:100%; border:1px solid #ccd4ce; border-radius:13px; background:#fbfcfa; padding:13px 14px; color:var(--ink); outline:none;
}
.rb-field input:focus, .rb-field textarea:focus { border-color:var(--signal); box-shadow:0 0 0 3px rgba(45,114,92,.1); }
.rb-field textarea { min-height:132px; resize:vertical; }
.rb-form-note { margin:0; font-size:12px; color:var(--muted); }
.rb-form-success { padding:13px 15px; margin-bottom:15px; border-radius:12px; background:#e6f3ed; color:#215c48; font-weight:700; }
.rb-hp { position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; }

.rb-footer { padding:54px 0 34px; background:#06111b; color:#fff; }
.rb-footer-top { display:flex; justify-content:space-between; gap:40px; align-items:flex-start; padding-bottom:38px; border-bottom:1px solid rgba(255,255,255,.10); }
.rb-footer-copy { max-width:520px; color:#9fb0bd; font-size:14px; margin:12px 0 0; }
.rb-footer-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; padding-top:24px; color:#8093a1; font-size:12px; }
.rb-footer-note { max-width:660px; }

.rb-page { padding:90px 0 110px; min-height:65vh; }
.rb-page article { max-width:820px; }
.rb-page h1 { font-size:clamp(38px,5vw,64px); line-height:1.05; letter-spacing:-.04em; }
.rb-page h2 { margin-top:2em; }
.rb-page p, .rb-page li { color:var(--ink-soft); }

@media (max-width: 920px) {
  .rb-links { display:none; position:absolute; top:76px; left:0; right:0; padding:22px; flex-direction:column; align-items:flex-start; background:var(--paper); border-bottom:1px solid var(--line); }
  .rb-links.is-open { display:flex; }
  .rb-menu-toggle { display:block; }
  .rb-hero { min-height:auto; padding-top:96px; }
  .rb-hero-grid, .rb-split, .rb-contact-grid { grid-template-columns:1fr; gap:50px; }
  .rb-console { max-width:650px; }
  .rb-sticky { position:static; }
  .rb-grid-3 { grid-template-columns:1fr 1fr; }
  .rb-trustbar-inner { grid-template-columns:1fr 1fr; }
  .rb-trustitem:nth-child(2) { border-right:0; }
  .rb-trustitem:nth-child(-n+2) { border-bottom:1px solid var(--line); }
}

@media (max-width: 640px) {
  .rb-wrap { width:min(calc(100% - 28px), var(--max)); }
  .rb-section { padding:76px 0; }
  .rb-grid-3, .rb-capabilities, .rb-architecture, .rb-audience, .rb-form-row { grid-template-columns:1fr; }
  .rb-card { min-height:auto; }
  .rb-card h3 { margin-top:28px; }
  .rb-trustitem { padding:20px 15px; }
  .rb-hero-grid { gap:48px; }
  .rb-flow-row { grid-template-columns:34px 1fr; }
  .rb-state { grid-column:2; justify-self:start; }
  .rb-footer-top { flex-direction:column; }
}

/* Multilingual navigation and Arabic RTL support */
.rb-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.7);
}
.rb-lang-switch a {
  min-width: 31px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
}
.rb-lang-switch a:hover { color: var(--ink); }
.rb-lang-switch a[aria-current="page"] { background: var(--ink); color: #fff; }

html[dir="rtl"] body { font-family: Tahoma, Arial, sans-serif; text-align: right; }
html[dir="rtl"] .rb-title { letter-spacing: 0; }
html[dir="rtl"] .rb-card h3,
html[dir="rtl"] .rb-audience-box h3 { letter-spacing: 0; }
html[dir="rtl"] .rb-checks li { padding-left: 0; padding-right: 25px; }
html[dir="rtl"] .rb-checks li::before { left: auto; right: 0; }
html[dir="rtl"] .rb-trustitem { border-right: 0; border-left: 1px solid var(--line); }
html[dir="rtl"] .rb-trustitem:last-child { border-left: 0; }
html[dir="rtl"] .rb-card-no,
html[dir="rtl"] .rb-console-title { letter-spacing: 0; }
html[dir="rtl"] .rb-field input,
html[dir="rtl"] .rb-field textarea { text-align: right; }

@media (max-width: 920px) {
  .rb-lang-switch { margin-top: 4px; }
  html[dir="rtl"] .rb-links { align-items: flex-start; }
  html[dir="rtl"] .rb-trustitem { border-left: 1px solid var(--line); }
  html[dir="rtl"] .rb-trustitem:nth-child(2) { border-left: 0; }
}

/* RTL/mobile overflow fix: avoid off-canvas honeypot expanding the viewport */
html, body { max-width: 100%; overflow-x: hidden; }
.rb-hp {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
}
html[dir="rtl"] .rb-wrap { margin-left: auto; margin-right: auto; }