/* File: /pro-assets/pro-page.css */
/* SafeShare Pro Page CSS — rebuilt final for Pro App
   Scope:
   - Content/UI only
   - Works with /pro-assets/pro-shell.js
   - Supports /pro-de/04-pro-app.html
*/

:root{
  --pro-bg-0:#08111c;
  --pro-bg-1:#0c1625;
  --pro-bg-2:#101c2d;

  --pro-card:rgba(18,28,46,.82);
  --pro-card-soft:rgba(18,28,46,.66);
  --pro-surface:rgba(255,255,255,.045);
  --pro-surface-strong:rgba(255,255,255,.07);

  --pro-border:rgba(255,255,255,.12);
  --pro-border-strong:rgba(255,255,255,.16);

  --pro-text:#edf3ff;
  --pro-text-soft:#d9e4f8;
  --pro-muted:#b4c2d9;

  --pro-accent:#7ee7d1;
  --pro-accent-2:#a79cff;
  --pro-warn:#f3c96b;
  --pro-danger:#ff8d97;

  --pro-shadow:0 20px 50px rgba(0,0,0,.28);
  --pro-radius:20px;
  --pro-radius-sm:14px;

  --pro-max:1120px;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  color:var(--pro-text);
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(126,231,209,.10), transparent 55%),
    radial-gradient(1000px 650px at 100% 0%, rgba(167,156,255,.10), transparent 50%),
    linear-gradient(180deg, var(--pro-bg-0), var(--pro-bg-1) 45%, var(--pro-bg-2));
  font:16px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

a{
  color:var(--pro-accent);
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

code,
.mono,
textarea,
input,
select{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.wrap{
  min-height:100dvh;
}

.pro-main{
  width:min(100% - 2rem, var(--pro-max));
  margin:0 auto;
  padding:1rem 0 3rem;
}

.hero{
  padding:1.1rem 0 1.35rem;
}

.hero h1{
  margin:0;
  font-size:clamp(2rem, 4.4vw, 3rem);
  line-height:1.08;
  letter-spacing:-.02em;
}

.lead{
  margin:.8rem 0 0;
  max-width:48rem;
  font-size:clamp(1.03rem, 2.2vw, 1.2rem);
  line-height:1.55;
  color:var(--pro-text-soft);
}

.muted{
  color:var(--pro-muted);
}

.hero .muted{
  max-width:52rem;
  margin-top:.75rem;
}

.card{
  margin-top:1rem;
  padding:1.1rem;
  border:1px solid var(--pro-border);
  border-radius:var(--pro-radius);
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.012)), var(--pro-card);
  box-shadow:var(--pro-shadow);
  backdrop-filter:blur(8px);
}

/* =========================================================
   Pro Bundle — Karten / Buttons / Spacing Mini-Patch
========================================================= */

.card{
  margin-top:1.2rem;
  padding:1.2rem;
}

.card h2{
  margin:0 0 .5rem;
}

.card > .muted:first-of-type{
  margin-top:.15rem;
  margin-bottom:0;
}

.card > .box:first-of-type,
.card > .row:first-of-type,
.card > label:first-of-type,
.card > textarea:first-of-type,
.card > ul:first-of-type,
.card > ol:first-of-type,
.card > details:first-of-type{
  margin-top:.9rem;
}

.card .box + .row,
.card .row + .box,
.card .row + .tiny,
.card .box + .tiny,
.card textarea + .row,
.card select + .box,
.card select + .switchRow,
.card .switchRow + .box{
  margin-top:.9rem;
}

.box{
  padding:1rem 1.05rem;
  border-radius:18px;
}

.btn{
  min-height:48px;
  padding:.82rem 1.02rem;
  border-radius:16px;
}

.row{
  gap:.85rem;
}

textarea,
select,
input{
  min-height:52px;
}

textarea{
  padding:1rem 1rem;
}

details > summary{
  padding:.1rem 0;
}

/* =========================================================
   Mobile
========================================================= */

@media (max-width: 720px){
  .card{
    margin-top:1rem;
    padding:1rem;
    border-radius:18px;
  }

  .box{
    padding:.92rem .95rem;
    border-radius:16px;
  }

  .btn{
    min-height:50px;
    padding:.84rem .96rem;
    border-radius:15px;
  }

  .row{
    gap:.72rem;
  }

  .card > .box:first-of-type,
  .card > .row:first-of-type,
  .card > label:first-of-type,
  .card > textarea:first-of-type,
  .card > ul:first-of-type,
  .card > ol:first-of-type,
  .card > details:first-of-type{
    margin-top:.8rem;
  }

  .card .box + .row,
  .card .row + .box,
  .card .row + .tiny,
  .card .box + .tiny,
  .card textarea + .row,
  .card select + .box,
  .card select + .switchRow,
  .card .switchRow + .box{
    margin-top:.8rem;
  }
}

.card h2{
  margin:0 0 .35rem;
  font-size:1.12rem;
  line-height:1.3;
  letter-spacing:-.01em;
}

.card > .muted:first-of-type{
  margin-top:0;
}

.box{
  padding:.85rem .95rem;
  border:1px solid var(--pro-border);
  border-radius:16px;
  background:var(--pro-surface);
}

.box.ok{
  border-color:rgba(126,231,209,.24);
  background:linear-gradient(180deg, rgba(126,231,209,.08), rgba(126,231,209,.03));
}

.box.warn{
  border-color:rgba(243,201,107,.28);
  background:linear-gradient(180deg, rgba(243,201,107,.10), rgba(243,201,107,.04));
}

.row{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  align-items:center;
}

.row > *{
  min-width:0;
}

label{
  display:block;
  margin:.9rem 0 .42rem;
  font-weight:700;
  color:var(--pro-text);
}

input,
select,
textarea{
  width:100%;
  border:1px solid var(--pro-border);
  border-radius:16px;
  background:rgba(7,12,20,.58);
  color:var(--pro-text);
  padding:.85rem .95rem;
  outline:none;
  box-shadow:none;
}

input::placeholder,
textarea::placeholder{
  color:#8fa0bb;
}

input:focus,
select:focus,
textarea:focus{
  border-color:rgba(126,231,209,.38);
  box-shadow:0 0 0 3px rgba(126,231,209,.12);
}

textarea{
  min-height:168px;
  resize:vertical;
  line-height:1.5;
}

#output{
  min-height:132px;
}

#auditText{
  min-height:180px;
}

.btn{
  appearance:none;
  border:1px solid var(--pro-border);
  border-radius:14px;
  padding:.72rem .98rem;
  background:rgba(255,255,255,.045);
  color:var(--pro-text);
  font:inherit;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  transition:transform .06s ease, border-color .16s ease, background .16s ease;
}

.btn:hover{
  text-decoration:none;
  border-color:var(--pro-border-strong);
  background:rgba(255,255,255,.06);
}

.btn:active{
  transform:translateY(1px);
}

.btn.primary{
  background:linear-gradient(180deg, rgba(126,231,209,.22), rgba(126,231,209,.12));
  border-color:rgba(126,231,209,.32);
  color:var(--pro-text);
}

.btn.primary:hover{
  background:linear-gradient(180deg, rgba(126,231,209,.27), rgba(126,231,209,.14));
}

.btn.danger{
  background:linear-gradient(180deg, rgba(255,141,151,.12), rgba(255,141,151,.06));
  border-color:rgba(255,141,151,.22);
}

.btn.ghost{
  background:transparent;
}

.switchRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.2rem 0;
}

.switchRow > div:first-child{
  min-width:0;
  flex:1 1 auto;
}

.hint{
  margin-top:.2rem;
  color:var(--pro-muted);
  font-size:.95rem;
  line-height:1.5;
}

.toggle{
  position:relative;
  flex:0 0 auto;
  width:56px;
  height:32px;
  border-radius:999px;
  border:1px solid var(--pro-border);
  background:rgba(255,255,255,.08);
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease;
}

.toggle::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  transition:transform .18s ease;
}

.toggle.on{
  background:linear-gradient(180deg, rgba(126,231,209,.30), rgba(126,231,209,.16));
  border-color:rgba(126,231,209,.34);
}

.toggle.on::after{
  transform:translateX(24px);
}

.toggle:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(126,231,209,.14);
}

.auditList{
  display:grid;
  gap:0;
}

.audit-head{
  align-items:flex-start;
  justify-content:space-between;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  min-height:1.75rem;
  padding:.2rem .62rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:var(--pro-text);
  font-size:.82rem;
  line-height:1.2;
}

.pill.ok{
  border-color: rgba(126,231,209,.28);
  background: rgba(126,231,209,.12);
}

.pill.warn{
  border-color: rgba(243,201,107,.30);
  background: rgba(243,201,107,.12);
}

.pill.err{
  border-color: rgba(255,141,151,.30);
  background: rgba(255,141,151,.12);
}

.supportLink{
  color:var(--pro-accent);
  font-weight:700;
}

.tiny{
  font-size:.9rem;
  line-height:1.45;
  color:var(--pro-muted);
}

.mt-4{ margin-top:.25rem; }
.mt-8{ margin-top:.5rem; }
.mt-10{ margin-top:.625rem; }
.mt-12{ margin-top:.75rem; }

.mt-4{ margin-top:.25rem; }
.mt-8{ margin-top:.5rem; }
.mt-10{ margin-top:.625rem; }
.mt-12{ margin-top:.75rem; }

/* =========================================================
   Pro Bundle — globale Chips / Listen / Selftest-Abstände
========================================================= */

.chipRow{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin-top:1rem;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  min-height:2.1rem;
  padding:.46rem .8rem;
  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:var(--pro-text-soft);
  font-size:.96rem;
  line-height:1.2;
}

.chip .dot{
  width:.55rem;
  height:.55rem;
  border-radius:999px;
  background:var(--pro-accent);
  flex:0 0 auto;
}

.list{
  list-style:none;
  margin:.9rem 0 0;
  padding:0;
  display:grid;
  gap:.8rem;
}

.item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:.9rem 1rem;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(255,255,255,.035);
}

.item .left{
  min-width:0;
  flex:1 1 auto;
}

.muted2{
  color:var(--pro-muted);
}

.pill.ok{
  border-color:rgba(126,231,209,.28);
  background:rgba(126,231,209,.12);
}

.pill.warn{
  border-color:rgba(243,201,107,.30);
  background:rgba(243,201,107,.12);
}

.pill.err{
  border-color:rgba(255,141,151,.30);
  background:rgba(255,141,151,.12);
}

/* Selftest / Start / License hero rows etwas luftiger */
.hero .chipRow{
  margin-top:1.1rem;
}

.hero > .row{
  margin-top:1.05rem;
  gap:.8rem;
}

/* Buttons in Funktionskarten nicht kleben lassen */
.card .row{
  margin-top:.9rem;
}

.card .row .btn{
  min-height:48px;
}

/* =========================================================
   Mobile polish
========================================================= */

@media (max-width: 720px){
  .chipRow{
    gap:.55rem;
  }

  .chip{
    width:100%;
    justify-content:flex-start;
    border-radius:16px;
    padding:.7rem .85rem;
  }

  .item{
    flex-direction:column;
    align-items:flex-start;
    gap:.7rem;
    padding:.85rem .9rem;
  }

  .item > div:last-child{
    align-self:flex-start;
  }

  /* Kritisch: Selftest-/App-Buttons nicht nebeneinander quetschen */
  #run .row,
  #results .row,
  #reportBlock .row,
  [aria-label="Selftest ausführen"] .row,
  [aria-label="Run selftest"] .row,
  [aria-label="Eingabe"] .row,
  [aria-label="Input"] .row,
  [aria-label="Ausgabe"] .row,
  [aria-label="Output"] .row{
    flex-direction:column;
    align-items:stretch;
    gap:.7rem;
  }

  #run .row .btn,
  #results .row .btn,
  #reportBlock .row .btn,
  [aria-label="Selftest ausführen"] .row .btn,
  [aria-label="Run selftest"] .row .btn,
  [aria-label="Eingabe"] .row .btn,
  [aria-label="Input"] .row .btn,
  [aria-label="Ausgabe"] .row .btn,
  [aria-label="Output"] .row .btn{
    width:100%;
  }
}

/* =========================================================
   SafeShare Pro — Selftest Ergebnisliste
========================================================= */

.list{
  list-style:none;
  margin:.85rem 0 0;
  padding:0;
}

.item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.85rem;
  padding:.9rem .95rem;
  border-top:1px solid rgba(255,255,255,.08);
}

.item:first-child{
  border-top:0;
}

.left{
  min-width:0;
  flex:1 1 auto;
}

.muted2{
  color:var(--pro-muted);
  font-size:.95rem;
  line-height:1.55;
}

.pill.ok{
  border-color:rgba(126,231,209,.28);
  background:linear-gradient(180deg, rgba(126,231,209,.16), rgba(126,231,209,.08));
}

.pill.warn{
  border-color:rgba(243,201,107,.30);
  background:linear-gradient(180deg, rgba(243,201,107,.18), rgba(243,201,107,.08));
}

.pill.err{
  border-color:rgba(255,141,151,.28);
  background:linear-gradient(180deg, rgba(255,141,151,.16), rgba(255,141,151,.08));
}

@media (max-width: 720px){
  .item{
    flex-direction:column;
    align-items:flex-start;
    padding:.82rem .88rem;
  }
}

/* =========================================================
   SafeShare Pro App — Tabellen-Karte für Ergebnis pro Link
========================================================= */

.resultCard--table{
  overflow:clip;
}

.resultCard--table .audit-head{
  align-items:flex-start;
  gap:1rem;
}

.resultCard--table .audit-head .pill{
  white-space:nowrap;
}

.resultCard--table section + section{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:1rem;
}

.resultCard--table details{
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:1rem;
}

.resultCard--table summary{
  cursor:pointer;
  user-select:none;
  list-style:none;
  font-weight:700;
  color:var(--pro-text, #edf3ff);
}

.resultCard--table summary::-webkit-details-marker{
  display:none;
}

.resultCard--table summary::after{
  content:"▾";
  display:inline-block;
  margin-left:.45rem;
  font-size:.9em;
  opacity:.8;
  transition:transform .18s ease;
}

.resultCard--table details[open] summary::after{
  transform:rotate(180deg);
}

.resultCard__urlBox{
  padding:.9rem 1rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(255,255,255,.045);
  overflow-wrap:anywhere;
  word-break:break-word;
}

.resultCard__urlHelp{
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
}

.resultCard__tableWrap{
  width:100%;
  overflow-x:auto;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}

.resultTable{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
  table-layout:fixed;
}

.resultTable thead th{
  position:sticky;
  top:0;
  z-index:1;
  padding:.95rem .9rem;
  text-align:left;
  vertical-align:top;
  font-size:.88rem;
  line-height:1.35;
  color:var(--pro-text, #edf3ff);
  background:rgba(255,255,255,.085);
  border-bottom:1px solid rgba(255,255,255,.16);
}

.resultTable tbody tr{
  border-top:1px solid rgba(255,255,255,.12);
}

.resultTable tbody tr:first-child{
  border-top:0;
}

.resultTable tbody td{
  padding:.95rem .9rem;
  vertical-align:top;
  border-left:1px solid rgba(255,255,255,.08);
}

.resultTable tbody td:first-child{
  border-left:0;
}

.resultTable th:nth-child(1),
.resultTable td:nth-child(1){
  width:24%;
}

.resultTable th:nth-child(2),
.resultTable td:nth-child(2){
  width:27%;
}

.resultTable th:nth-child(3),
.resultTable td:nth-child(3){
  width:13%;
}

.resultTable th:nth-child(4),
.resultTable td:nth-child(4){
  width:36%;
}

.resultTable__part{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.resultTable__meaning b{
  display:inline-block;
  color:var(--pro-text, #edf3ff);
}

.resultTable .mono{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.resultTable .tiny{
  color:var(--pro-muted, #b4c2d9);
}

.resultTable__row--remove td{
  background:rgba(255,255,255,.02);
}

.resultTable__row--keep td{
  background:rgba(255,255,255,.032);
}

.resultTable__row--extract td{
  background:rgba(255,255,255,.05);
}

.resultTable__row--inspect td,
.resultTable__row--unchanged td{
  background:rgba(255,255,255,.024);
}

.resultCard--table .pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.25rem;
  min-height:1.8rem;
  padding:.22rem .68rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.055);
  color:var(--pro-text, #edf3ff);
  font-size:.82rem;
  line-height:1.2;
  white-space:nowrap;
}

.is-hidden{
  display:none !important;
}

.resultCard--table [aria-label="Kurz-Zusammenfassung"] .mono{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.resultCard--table [aria-label="Technische Details"] .box{
  border-radius:14px;
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width: 820px){
  .resultCard--table .audit-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .resultCard--table .audit-head .pill{
    white-space:normal;
  }

  .resultCard__tableWrap{
    overflow:visible;
    border:0;
    background:transparent;
    box-shadow:none;
  }

  .resultTable{
    min-width:0;
    display:block;
  }

  .resultTable thead{
    display:none;
  }

  .resultTable tbody{
    display:grid;
    gap:.8rem;
  }

  .resultTable tr{
    display:block;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:rgba(255,255,255,.035);
    overflow:hidden;
  }

  .resultTable td{
    display:block;
    width:100% !important;
    border-top:1px solid rgba(255,255,255,.06);
    border-left:0;
    padding:.75rem .85rem;
    background:transparent !important;
  }

  .resultTable td:first-child{
    border-top:0;
  }

  .resultTable td::before{
    content:attr(data-label);
    display:block;
    margin-bottom:.3rem;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.01em;
    color:var(--pro-text-soft, #d9e4f8);
    text-transform:none;
  }

  .resultCard__urlBox{
    padding:.8rem .85rem;
  }
}

@media (max-width: 720px){
  .pro-main{
    width:min(100% - 1rem, var(--pro-max));
    padding:.8rem 0 2.2rem;
  }

  .card{
    padding:.95rem;
    border-radius:18px;
  }

  .row{
    flex-direction:column;
    align-items:stretch;
  }

  .switchRow{
    align-items:flex-start;
  }

  .switchRow .toggle{
    margin-top:.2rem;
  }

  .resultCard--table .audit-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .pill{
    white-space:normal;
  }

  .btn{
    width:100%;
  }
}

/* =========================================================
   SafeShare Pro Handbook — leichter Leseschub
========================================================= */

.pro-handbook .lead{
  max-width: 56rem;
}

.pro-handbook p,
.pro-handbook li{
  font-size: 1.04rem;
  line-height: 1.72;
}

.pro-handbook .muted{
  font-size: 1.02rem;
  line-height: 1.72;
}

.pro-handbook .tiny{
  font-size: .96rem;
  line-height: 1.58;
}

.pro-handbook h2{
  font-size: 1.28rem;
}

.pro-handbook h3{
  font-size: 1.05rem;
  line-height: 1.4;
  margin-top: 1rem;
}

.pro-handbook details summary{
  font-size: 1.02rem;
  line-height: 1.45;
}

.pro-handbook .box{
  padding: .95rem 1rem;
}

.pro-handbook pre{
  font-size: .98rem;
  line-height: 1.55;
  overflow-x: auto;
}

.pro-handbook .chip{
  font-size: .98rem;
}

@media (max-width: 720px){
  .pro-handbook p,
  .pro-handbook li,
  .pro-handbook .muted{
    font-size: 1rem;
    line-height: 1.66;
  }

  .pro-handbook .tiny{
    font-size: .92rem;
  }
}

/* =========================================================
   SafeShare Pro Handbook — Hero / Chips / Quicklinks
========================================================= */

.pro-handbook .hero{
  padding: 1.2rem 0 1.55rem;
}

.pro-handbook .hero .row{
  flex-direction: row;
  align-items: center;
  gap: .7rem;
}

.pro-handbook .hero .btn{
  width: auto;
  min-width: 0;
}

.pro-handbook .chipRow{
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1rem;
}

.pro-handbook .chip{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.1rem;
  padding: .45rem .78rem;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--pro-text-soft);
  font-size: .96rem;
  line-height: 1.2;
}

.pro-handbook .chip .dot{
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: var(--pro-accent);
  flex: 0 0 auto;
}

.pro-handbook #whats-new{
  margin-top: 1.15rem;
}

.pro-handbook .toc{
  margin-top: 1.15rem;
}

@media (max-width: 720px){
  .pro-handbook .hero .row{
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .pro-handbook .hero .btn{
    width: auto;
    flex: 0 0 auto;
  }

  .pro-handbook .chipRow{
    gap: .45rem;
  }

  .pro-handbook .chip{
    width: 100%;
    justify-content: flex-start;
  }
}

/* =========================================================
   SafeShare Pro Handbook — TOC / Details / Listen
========================================================= */

.pro-handbook .toc ul,
.pro-handbook .card ul,
.pro-handbook .card ol{
  margin: .7rem 0 0;
  padding-left: 1.2rem;
}

.pro-handbook .toc li,
.pro-handbook .card li{
  margin: .32rem 0;
}

.pro-handbook .toc ul{
  display: grid;
  gap: .18rem;
}

.pro-handbook .toc a{
  color: var(--pro-accent);
  text-decoration: none;
}

.pro-handbook .toc a:hover{
  text-decoration: underline;
}

.pro-handbook details{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
  padding: .8rem .9rem;
}

.pro-handbook details + details{
  margin-top: .75rem;
}

.pro-handbook details summary{
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--pro-text);
}

.pro-handbook details summary::-webkit-details-marker{
  display: none;
}

.pro-handbook details summary::before{
  content: "▸";
  display: inline-block;
  margin-right: .45rem;
  opacity: .85;
  transition: transform .18s ease;
}

.pro-handbook details[open] summary::before{
  transform: rotate(90deg);
}

.pro-handbook details > .muted,
.pro-handbook details > .box,
.pro-handbook details > ul,
.pro-handbook details > ol,
.pro-handbook details > pre,
.pro-handbook details > div{
  margin-top: .7rem;
}

.pro-handbook .list-tight{
  margin-top: .55rem;
}

.pro-handbook .list-tight li{
  margin: .18rem 0;
}

.pro-handbook .list-start{
  margin-top: .6rem;
  padding-left: 1.3rem;
}

.pro-handbook .list-start li{
  margin: .32rem 0;
}

.pro-handbook pre{
  margin: .7rem 0 0;
  padding: .85rem .95rem;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(7,12,20,.48);
  color: var(--pro-text-soft);
}

@media (max-width: 720px){
  .pro-handbook .toc ul,
  .pro-handbook .card ul,
  .pro-handbook .card ol{
    padding-left: 1.05rem;
  }

  .pro-handbook details{
    padding: .75rem .8rem;
    border-radius: 14px;
  }

  .pro-handbook pre{
    padding: .8rem .85rem;
  }
}

/* =========================================================
   SafeShare Pro Handbook — Abschnittsabstände / Hierarchie
========================================================= */

.pro-handbook > .card{
  margin-top: 1.25rem;
}

.pro-handbook > .card:first-of-type{
  margin-top: 1rem;
}

.pro-handbook .card h2 + p,
.pro-handbook .card h2 + .muted,
.pro-handbook .card h2 + .box,
.pro-handbook .card h2 + ul,
.pro-handbook .card h2 + ol,
.pro-handbook .card h2 + details{
  margin-top: .7rem;
}

.pro-handbook .card h3{
  margin-bottom: .45rem;
}

.pro-handbook .card h3 + p,
.pro-handbook .card h3 + .muted,
.pro-handbook .card h3 + .box,
.pro-handbook .card h3 + ul,
.pro-handbook .card h3 + ol,
.pro-handbook .card h3 + details{
  margin-top: .45rem;
}

.pro-handbook .box + .box{
  margin-top: .75rem;
}

.pro-handbook p + .box,
.pro-handbook ul + .box,
.pro-handbook ol + .box,
.pro-handbook details + .box,
.pro-handbook pre + .box{
  margin-top: .8rem;
}

.pro-handbook .box + p,
.pro-handbook .box + .muted,
.pro-handbook .box + ul,
.pro-handbook .box + ol,
.pro-handbook .box + details{
  margin-top: .8rem;
}

.pro-handbook .box.ok,
.pro-handbook .box.warn{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.015);
}

.pro-handbook .card > *:last-child{
  margin-bottom: 0;
}

.pro-handbook .card p:last-child,
.pro-handbook .card ul:last-child,
.pro-handbook .card ol:last-child,
.pro-handbook .card .box:last-child,
.pro-handbook .card details:last-child,
.pro-handbook .card pre:last-child{
  margin-bottom: 0;
}

@media (max-width: 720px){
  .pro-handbook > .card{
    margin-top: 1rem;
  }

  .pro-handbook .box + .box,
  .pro-handbook p + .box,
  .pro-handbook ul + .box,
  .pro-handbook ol + .box,
  .pro-handbook .box + p,
  .pro-handbook .box + .muted,
  .pro-handbook .box + ul,
  .pro-handbook .box + ol{
    margin-top: .7rem;
  }
}

/* =========================================================
   SafeShare Pro Handbook — mehr Luft
========================================================= */

.pro-handbook .hero h1{
  margin-bottom: .5rem;
}

.pro-handbook .lead{
  margin-top: .9rem;
}

.pro-handbook .hero .muted{
  margin-top: 1rem;
}

.pro-handbook .chipRow{
  margin-top: 1.15rem;
  gap: .7rem;
}

.pro-handbook .hero .row{
  margin-top: 1.1rem;
  gap: .8rem;
}

.pro-handbook #whats-new{
  margin-top: 1.4rem;
}

.pro-handbook .toc{
  margin-top: 1.35rem;
}

.pro-handbook .toc h2{
  margin-bottom: .7rem;
}

.pro-handbook .toc ul{
  gap: .38rem;
}

.pro-handbook .toc li{
  margin: .12rem 0;
}

.pro-handbook details{
  padding: .9rem 1rem;
}

@media (max-width: 720px){
  .pro-handbook .hero h1{
    margin-bottom: .45rem;
  }

  .pro-handbook .lead{
    margin-top: .8rem;
  }

  .pro-handbook .hero .muted{
    margin-top: .9rem;
  }

  .pro-handbook .chipRow{
    margin-top: 1rem;
    gap: .55rem;
  }

  .pro-handbook .hero .row{
    margin-top: 1rem;
    gap: .65rem;
  }

  .pro-handbook #whats-new{
    margin-top: 1.2rem;
  }

  .pro-handbook .toc{
    margin-top: 1.15rem;
  }

  .pro-handbook details{
    padding: .82rem .9rem;
  }
}

/* =========================================================
   SafeShare Pro Handbook — Beispielblöcke lesbarer
========================================================= */

.pro-handbook pre{
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  white-space: pre;
  padding: .95rem 1rem;
  margin: .75rem 0 0;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(7,12,20,.52);
  color: var(--pro-text-soft);
}

.pro-handbook .box pre{
  margin-top: .65rem;
}

.pro-handbook pre code{
  white-space: inherit;
}

@media (max-width: 720px){
  .pro-handbook pre{
    padding: .9rem .95rem;
    border-radius: 12px;
  }
}

/* =========================================================
   SafeShare Pro Handbook — FAQ schlicht statt Kapseln
========================================================= */

.pro-handbook #faq details{
  margin: 0;
  padding: .82rem 0;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-radius: 0;
  background: transparent;
}

.pro-handbook #faq details:first-of-type{
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: .35rem;
}

.pro-handbook #faq details + details{
  margin-top: 0;
}

.pro-handbook #faq details summary{
  cursor: pointer;
  list-style: none;
  font-weight: 550;
  font-size: .98rem;
  line-height: 1.42;
  color: var(--pro-text);
  padding: 0;
}

.pro-handbook #faq details summary::-webkit-details-marker{
  display: none;
}

.pro-handbook #faq details summary::before{
  content: "▸";
  display: inline-block;
  width: 1rem;
  margin-right: .35rem;
  color: var(--pro-muted);
  transition: transform .18s ease;
}

.pro-handbook #faq details[open] summary::before{
  transform: rotate(90deg);
}

.pro-handbook #faq details > div,
.pro-handbook #faq details > p,
.pro-handbook #faq details > .muted{
  margin-top: .65rem;
  padding-left: 1.35rem;
  font-size: .98rem;
  line-height: 1.62;
  color: var(--pro-muted);
}

@media (max-width: 720px){
  .pro-handbook #faq details{
    padding: .74rem 0;
  }

  .pro-handbook #faq details summary{
    font-size: .94rem;
    line-height: 1.4;
  }

  .pro-handbook #faq details > div,
  .pro-handbook #faq details > p,
  .pro-handbook #faq details > .muted{
    font-size: .95rem;
    padding-left: 1.2rem;
  }
}

/* =========================================================
   SafeShare Pro Handbook — Footer etwas leichter
========================================================= */

.pro-handbook [data-pro-footer] h2,
.pro-handbook [data-pro-footer] h3,
.pro-handbook [data-pro-footer] strong,
.pro-handbook [data-pro-footer] b{
  font-weight: 650;
}

.pro-handbook [data-pro-footer] .pill,
.pro-handbook [data-pro-footer] .btn{
  font-weight: 600;
}
/* =========================================================
   SafeShare Pro Handbook — leichtere Beispielstruktur
========================================================= */

.pro-handbook .examplePair{
  margin-top: .8rem;
  display: grid;
  gap: .7rem;
}

.pro-handbook .exampleLine{
  padding: .8rem .95rem;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
}

.pro-handbook .exampleLine__label{
  display: block;
  margin-bottom: .38rem;
  font-weight: 700;
  color: var(--pro-text);
}

.pro-handbook .exampleLine__value{
  color: var(--pro-text-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .97rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.pro-handbook .exampleNotes{
  margin-top: .75rem;
}

.pro-handbook .exampleNotes li{
  margin: .24rem 0;
}

.pro-handbook .exampleMiniTitle{
  margin-top: 1rem;
  margin-bottom: .35rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--pro-text);
}

@media (max-width: 720px){
  .pro-handbook .exampleLine{
    padding: .75rem .85rem;
  }

  .pro-handbook .exampleLine__value{
    font-size: .94rem;
  }
}

.pro-handbook .handbookExample{
  margin-top: .7rem;
  padding: .95rem 1rem;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(7,12,20,.52);
  color: var(--pro-text-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.pro-handbook .box .handbookExample{
  margin-top: .65rem;
}

@media (max-width: 720px){
  .pro-handbook .handbookExample{
    padding: .9rem .95rem;
    border-radius: 12px;
    font-size: .84rem;
  }
}

/* =========================================================
   SafeShare Pro — Mobile Header FINAL for Safari
   robust ohne display:contents
========================================================= */

@media (max-width: 820px){

  .proShellHeader__bar{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:.75rem !important;
    align-items:start !important;
    padding:.85rem .9rem !important;
  }

  .proShellHeader__left{
    min-width:0 !important;
  }

  .proShellBrand{
    display:grid !important;
    grid-template-columns:56px minmax(0,1fr) !important;
    align-items:center !important;
    gap:.72rem !important;
    min-width:0 !important;
  }

  .proShellBrand__mark{
    width:56px !important;
    height:56px !important;
    flex:0 0 56px !important;
    border-radius:16px !important;
  }

  .proShellBrand__text{
    min-width:0 !important;
  }

  .proShellBrand__title{
    display:block !important;
    margin:0 !important;
    font-size:1.34rem !important;
    line-height:1.02 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .proShellBrand__sub{
    display:block !important;
    margin-top:.14rem !important;
    font-size:.94rem !important;
    line-height:1.14 !important;
    max-width:14ch !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }

  .proShellNav{
    display:none !important;
  }

  .proShellHeader__actions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:.65rem !important;
    align-items:center !important;
    width:100% !important;
  }

  .proShellBack{
    min-width:0 !important;
    width:100% !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:.78rem 1rem !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .proShellMenuBtn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:44px !important;
    padding:.72rem 1rem !important;
    white-space:nowrap !important;
  }
}

@media (max-width: 560px){

  .proShellHeader__bar{
    gap:.65rem !important;
    padding:.8rem .85rem !important;
  }

  .proShellBrand{
    grid-template-columns:52px minmax(0,1fr) !important;
    gap:.65rem !important;
  }

  .proShellBrand__mark{
    width:52px !important;
    height:52px !important;
    flex-basis:52px !important;
    border-radius:15px !important;
  }

  .proShellBrand__title{
    font-size:1.24rem !important;
  }

  .proShellBrand__sub{
    font-size:.88rem !important;
    max-width:12ch !important;
  }

  .proShellBack,
  .proShellMenuBtn{
    padding:.7rem .95rem !important;
  }
}

@media (max-width: 420px){

  .proShellBrand{
    grid-template-columns:48px minmax(0,1fr) !important;
    gap:.58rem !important;
  }

  .proShellBrand__mark{
    width:48px !important;
    height:48px !important;
    flex-basis:48px !important;
    border-radius:14px !important;
  }

  .proShellBrand__sub{
    display:none !important;
  }

  .proShellBrand__title{
    font-size:1.12rem !important;
  }

  .proShellHeader__actions{
    grid-template-columns:1fr auto !important;
    gap:.55rem !important;
  }

  .proShellBack,
  .proShellMenuBtn{
    font-size:.95rem !important;
  }
}

/* =========================================================
   SafeShare Pro — Mobile Header mini polish final
========================================================= */

@media (max-width: 820px){
  .proShellHeader__bar{
    padding: .78rem .85rem !important;
    gap: .65rem !important;
    border-radius: 18px !important;
  }

  .proShellBrand{
    gap: .65rem !important;
  }

  .proShellBrand__mark{
    width: 52px !important;
    height: 52px !important;
    flex-basis: 52px !important;
    border-radius: 15px !important;
  }

  .proShellBrand__title{
    font-size: 1.26rem !important;
  }

  .proShellBrand__sub{
    font-size: .9rem !important;
    margin-top: .1rem !important;
    max-width: 12ch !important;
  }

  .proShellHeader__actions{
    gap: .55rem !important;
  }

  .proShellBack{
    padding: .72rem .9rem !important;
  }

  .proShellMenuBtn{
    padding: .72rem .92rem !important;
  }
}

@media (max-width: 420px){
  .proShellHeader__bar{
    padding: .72rem .78rem !important;
    border-radius: 16px !important;
  }

  .proShellBrand{
    grid-template-columns: 46px minmax(0,1fr) !important;
    gap: .56rem !important;
  }

  .proShellBrand__mark{
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
    border-radius: 14px !important;
  }

  .proShellBrand__title{
    font-size: 1.12rem !important;
  }

  .proShellBack,
  .proShellMenuBtn{
    font-size: .95rem !important;
  }
}

/* =========================================================
   SafeShare Pro — More Sheet final compact (bereinigt)
   passend zu aktuellem pro-shell.js
========================================================= */

.proShellBackdrop{
  background: rgba(4, 9, 18, .68) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

.proShellPanel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    rgba(10, 18, 32, .96) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,.44) !important;
  overflow: hidden !important;
}

.proShellPanel__head{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .75rem !important;
}

.proShellPanel__title{
  line-height: 1.2 !important;
}

.proShellPanel__close{
  padding: .62rem .92rem !important;
  min-height: 42px !important;
  font-size: .98rem !important;
}

.proShellPanel__nav,
.proShellPanel__meta{
  display: grid !important;
  gap: .65rem !important;
}

.proShellPanel__nav a,
.proShellPanel__meta a{
  display: block !important;
  padding: .78rem .95rem !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: var(--pro-shell-text, #edf3ff) !important;
  text-decoration: none !important;
}

.proShellPanel__nav a.is-active{
  border-color: rgba(126,231,209,.34) !important;
  background: linear-gradient(180deg, rgba(126,231,209,.18), rgba(126,231,209,.10)) !important;
}

.proShellPanel__nav a:hover,
.proShellPanel__meta a:hover,
.proShellPanel__close:hover{
  border-color: rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.07) !important;
  text-decoration: none !important;
}

@media (max-width: 820px){
  .proShellPanel{
    border-radius: 22px !important;
  }
}

@media (max-width: 560px){
  .proShellBackdrop{
    background: rgba(4, 9, 18, .74) !important;
  }

  .proShellPanel{
    border-radius: 20px !important;
  }

  .proShellPanel__close{
    padding: .58rem .86rem !important;
    font-size: .95rem !important;
  }

  .proShellPanel__nav a,
  .proShellPanel__meta a{
    padding: .74rem .9rem !important;
    border-radius: 16px !important;
  }
}

/* =========================================================
   Pro Bundle — Selftest Buttonblock Mini-Patch
========================================================= */

#run .row{
  align-items:stretch;
  gap:.9rem;
}

#run .row .btn{
  flex:1 1 220px;
  justify-content:center;
  text-align:center;
}

#run .box.warn + .row{
  margin-top:1rem;
}

#run #btnRun{
  box-shadow:0 10px 24px rgba(126,231,209,.10);
}

#run #btnClear{
  flex:0 0 auto;
  min-width:140px;
}

@media (max-width: 900px){
  #run .row .btn{
    flex:1 1 calc(50% - .4rem);
  }

  #run #btnClear{
    flex:1 1 calc(50% - .4rem);
    min-width:0;
  }
}

@media (max-width: 720px){
  #run .row{
    gap:.72rem;
  }

  #run .row .btn,
  #run #btnClear{
    flex:1 1 100%;
    width:100%;
    min-width:0;
  }
}

/* =========================================================
   Pro Bundle — Selftest Hero / Chips Mini-Patch
========================================================= */

body[data-pro-page="selftest"] .hero{
  padding:1.2rem 0 1.7rem;
}

body[data-pro-page="selftest"] .hero h1{
  margin-bottom:.55rem;
}

body[data-pro-page="selftest"] .hero .lead{
  margin-top:.95rem;
  max-width:58rem;
}

body[data-pro-page="selftest"] .hero .muted{
  margin-top:1rem;
  max-width:62rem;
  line-height:1.68;
}

body[data-pro-page="selftest"] .chipRow{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:1.15rem;
}

body[data-pro-page="selftest"] .chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  min-height:2.1rem;
  padding:.46rem .8rem;
  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:var(--pro-text-soft);
  font-size:.96rem;
  line-height:1.2;
}

body[data-pro-page="selftest"] .chip .dot{
  width:.55rem;
  height:.55rem;
  border-radius:999px;
  background:var(--pro-accent);
  flex:0 0 auto;
}

body[data-pro-page="selftest"] .hero .row{
  margin-top:1.1rem;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
}

body[data-pro-page="selftest"] .hero .row .btn{
  width:auto;
  min-width:0;
}

@media (max-width: 720px){
  body[data-pro-page="selftest"] .hero{
    padding:1rem 0 1.45rem;
  }

  body[data-pro-page="selftest"] .hero .lead{
    margin-top:.82rem;
  }

  body[data-pro-page="selftest"] .hero .muted{
    margin-top:.9rem;
    line-height:1.62;
  }

  body[data-pro-page="selftest"] .chipRow{
    gap:.5rem;
    margin-top:1rem;
  }

  body[data-pro-page="selftest"] .chip{
    width:100%;
    justify-content:flex-start;
  }

  body[data-pro-page="selftest"] .hero .row{
    margin-top:1rem;
    gap:.65rem;
    align-items:stretch;
  }

  body[data-pro-page="selftest"] .hero .row .btn{
    width:auto;
    flex:0 0 auto;
  }
}

/* =========================================================
   Pro Bundle — Selftest Ergebnisliste Mini-Patch
========================================================= */

body[data-pro-page="selftest"] #resultList{
  list-style:none;
  margin:1rem 0 0;
  padding:0;
  display:grid;
  gap:.8rem;
}

body[data-pro-page="selftest"] #resultList .item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:1rem;
  align-items:start;
  padding:1rem 1rem;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(255,255,255,.035);
}

body[data-pro-page="selftest"] #resultList .left{
  min-width:0;
}

body[data-pro-page="selftest"] #resultList .left b{
  display:block;
  line-height:1.35;
  color:var(--pro-text);
}

body[data-pro-page="selftest"] #resultList .muted2{
  color:var(--pro-muted);
  font-size:.96rem;
  line-height:1.62;
}

body[data-pro-page="selftest"] #resultList .pill{
  justify-self:end;
  white-space:nowrap;
  min-width:4.4rem;
  justify-content:center;
}

body[data-pro-page="selftest"] #resultList .item .pill.ok{
  border-color:rgba(126,231,209,.28);
  background:rgba(126,231,209,.12);
}

body[data-pro-page="selftest"] #resultList .item .pill.warn{
  border-color:rgba(243,201,107,.30);
  background:rgba(243,201,107,.12);
}

body[data-pro-page="selftest"] #resultList .item .pill.err{
  border-color:rgba(255,141,151,.30);
  background:rgba(255,141,151,.12);
}

@media (max-width: 720px){
  body[data-pro-page="selftest"] #resultList{
    gap:.7rem;
  }

  body[data-pro-page="selftest"] #resultList .item{
    grid-template-columns:1fr;
    gap:.7rem;
    padding:.9rem .9rem;
  }

  body[data-pro-page="selftest"] #resultList .pill{
    justify-self:start;
  }

  body[data-pro-page="selftest"] #resultList .muted2{
    font-size:.94rem;
    line-height:1.56;
  }
}

/* =========================================================
   Pro Bundle — Selftest Report-Textarea + Statuszeile Mini-Patch
========================================================= */

body[data-pro-page="selftest"] #statusLine{
  margin-top:.85rem;
  min-height:1.4rem;
  color:var(--pro-text-soft);
  font-size:.95rem;
  line-height:1.45;
}

body[data-pro-page="selftest"] #report{
  margin-top:1rem;
  min-height:220px;
  padding:1rem 1rem;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(7,12,20,.52);
  color:var(--pro-text-soft);
  line-height:1.58;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.015);
}

body[data-pro-page="selftest"] #report::placeholder{
  color:#8fa0bb;
}

body[data-pro-page="selftest"] #report:focus{
  border-color:rgba(126,231,209,.32);
  box-shadow:
    0 0 0 3px rgba(126,231,209,.10),
    inset 0 0 0 1px rgba(255,255,255,.015);
}

@media (max-width: 720px){
  body[data-pro-page="selftest"] #statusLine{
    margin-top:.75rem;
    font-size:.92rem;
  }

  body[data-pro-page="selftest"] #report{
    margin-top:.9rem;
    min-height:200px;
    padding:.9rem .9rem;
    border-radius:14px;
    font-size:.94rem;
    line-height:1.54;
  }
}

/* =========================================================
   SafeShare Pro — License / Handbook spacing patch
========================================================= */

.pro-handbook > .card,
body[data-pro-page="license"] .pro-main > .card{
  margin-top: 1.35rem;
}

.pro-handbook > .card:first-of-type,
body[data-pro-page="license"] .pro-main > .card:first-of-type{
  margin-top: 1.05rem;
}

body[data-pro-page="license"] .card,
.pro-handbook .card{
  padding: 1.2rem 1.2rem 1.15rem;
}

body[data-pro-page="license"] .card h2,
.pro-handbook .card h2{
  margin-bottom: .6rem;
}

body[data-pro-page="license"] .card h3,
.pro-handbook .card h3{
  margin-top: 1.05rem;
  margin-bottom: .45rem;
}

body[data-pro-page="license"] .card p + ul,
body[data-pro-page="license"] .card p + ol,
body[data-pro-page="license"] .card ul + p,
body[data-pro-page="license"] .card ol + p,
body[data-pro-page="license"] .card .box + p,
body[data-pro-page="license"] .card .box + ul,
body[data-pro-page="license"] .card .box + ol,
.pro-handbook .card p + ul,
.pro-handbook .card p + ol,
.pro-handbook .card ul + p,
.pro-handbook .card ol + p{
  margin-top: .8rem;
}

body[data-pro-page="license"] .card ul,
body[data-pro-page="license"] .card ol{
  margin: .75rem 0 0;
  padding-left: 1.2rem;
}

body[data-pro-page="license"] .card li,
.pro-handbook .card li{
  margin: .34rem 0;
}

body[data-pro-page="license"] .card .box,
.pro-handbook .card .box{
  margin-top: .9rem;
}

@media (max-width: 720px){
  .pro-handbook > .card,
  body[data-pro-page="license"] .pro-main > .card{
    margin-top: 1.05rem;
  }

  body[data-pro-page="license"] .card,
  .pro-handbook .card{
    padding: 1rem .98rem .96rem;
  }

  body[data-pro-page="license"] .card ul,
  body[data-pro-page="license"] .card ol{
    padding-left: 1.05rem;
  }
}

/* =========================================================
   SafeShare Pro — Hero spacing patch for Handbook / License
========================================================= */

.pro-handbook .hero,
body[data-pro-page="license"] .hero{
  padding: 1.35rem 0 1.7rem;
}

.pro-handbook .hero h1,
body[data-pro-page="license"] .hero h1{
  margin: 0 0 .55rem;
}

.pro-handbook .hero .lead,
body[data-pro-page="license"] .hero .lead{
  margin-top: .95rem;
  max-width: 56rem;
}

.pro-handbook .hero .muted,
body[data-pro-page="license"] .hero .muted{
  margin-top: .95rem;
  max-width: 58rem;
}

.pro-handbook .hero .chipRow,
body[data-pro-page="license"] .hero .chipRow{
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.15rem;
}

.pro-handbook .hero .row,
body[data-pro-page="license"] .hero .row{
  margin-top: 1.15rem;
  gap: .75rem;
}

.pro-handbook .hero .btn,
body[data-pro-page="license"] .hero .btn{
  width: auto;
  min-width: 0;
}

@media (max-width: 720px){
  .pro-handbook .hero,
  body[data-pro-page="license"] .hero{
    padding: 1.05rem 0 1.35rem;
  }

  .pro-handbook .hero .lead,
  body[data-pro-page="license"] .hero .lead{
    margin-top: .8rem;
  }

  .pro-handbook .hero .muted,
  body[data-pro-page="license"] .hero .muted{
    margin-top: .8rem;
  }

  .pro-handbook .hero .chipRow,
  body[data-pro-page="license"] .hero .chipRow{
    gap: .5rem;
    margin-top: 1rem;
  }

  .pro-handbook .hero .row,
  body[data-pro-page="license"] .hero .row{
    margin-top: 1rem;
    gap: .65rem;
  }
}

/* =========================================================
   SafeShare Pro — List spacing patch for Handbook / License
========================================================= */

.pro-handbook .card ul,
.pro-handbook .card ol,
body[data-pro-page="license"] .card ul,
body[data-pro-page="license"] .card ol{
  margin: .8rem 0 0;
  padding-left: 1.2rem;
}

.pro-handbook .card li,
body[data-pro-page="license"] .card li{
  margin: .42rem 0;
  line-height: 1.68;
}

.pro-handbook .card h3 + ul,
.pro-handbook .card h3 + ol,
body[data-pro-page="license"] .card h3 + ul,
body[data-pro-page="license"] .card h3 + ol{
  margin-top: .55rem;
}

.pro-handbook .card p + ul,
.pro-handbook .card p + ol,
.pro-handbook .card .muted + ul,
.pro-handbook .card .muted + ol,
body[data-pro-page="license"] .card p + ul,
body[data-pro-page="license"] .card p + ol,
body[data-pro-page="license"] .card .muted + ul,
body[data-pro-page="license"] .card .muted + ol{
  margin-top: .7rem;
}

.pro-handbook .card ul + p,
.pro-handbook .card ol + p,
.pro-handbook .card ul + .muted,
.pro-handbook .card ol + .muted,
body[data-pro-page="license"] .card ul + p,
body[data-pro-page="license"] .card ol + p,
body[data-pro-page="license"] .card ul + .muted,
body[data-pro-page="license"] .card ol + .muted{
  margin-top: .85rem;
}

.pro-handbook .list-tight li,
body[data-pro-page="license"] .list-tight li{
  margin: .24rem 0;
  line-height: 1.6;
}

.pro-handbook .list-start,
body[data-pro-page="license"] .list-start{
  padding-left: 1.3rem;
}

.pro-handbook .list-start li,
body[data-pro-page="license"] .list-start li{
  margin: .34rem 0;
}

@media (max-width: 720px){
  .pro-handbook .card ul,
  .pro-handbook .card ol,
  body[data-pro-page="license"] .card ul,
  body[data-pro-page="license"] .card ol{
    padding-left: 1.05rem;
  }

  .pro-handbook .card li,
  body[data-pro-page="license"] .card li{
    margin: .36rem 0;
    line-height: 1.62;
  }

  .pro-handbook .list-start,
  body[data-pro-page="license"] .list-start{
    padding-left: 1.15rem;
  }
}

/* =========================================================
   SafeShare Pro — Paragraph spacing patch for Handbook / License
========================================================= */

.pro-handbook .card p,
.pro-handbook .card .muted,
.pro-handbook .card .tiny,
body[data-pro-page="license"] .card p,
body[data-pro-page="license"] .card .muted,
body[data-pro-page="license"] .card .tiny{
  line-height: 1.72;
}

.pro-handbook .card p + p,
.pro-handbook .card .muted + .muted,
.pro-handbook .card p + .muted,
.pro-handbook .card .muted + p,
body[data-pro-page="license"] .card p + p,
body[data-pro-page="license"] .card .muted + .muted,
body[data-pro-page="license"] .card p + .muted,
body[data-pro-page="license"] .card .muted + p{
  margin-top: .8rem;
}

.pro-handbook .card h2 + p,
.pro-handbook .card h2 + .muted,
.pro-handbook .card h3 + p,
.pro-handbook .card h3 + .muted,
body[data-pro-page="license"] .card h2 + p,
body[data-pro-page="license"] .card h2 + .muted,
body[data-pro-page="license"] .card h3 + p,
body[data-pro-page="license"] .card h3 + .muted{
  margin-top: .6rem;
}

.pro-handbook .card p + .box,
.pro-handbook .card .muted + .box,
body[data-pro-page="license"] .card p + .box,
body[data-pro-page="license"] .card .muted + .box{
  margin-top: .85rem;
}

.pro-handbook .card .box + p,
.pro-handbook .card .box + .muted,
body[data-pro-page="license"] .card .box + p,
body[data-pro-page="license"] .card .box + .muted{
  margin-top: .85rem;
}

@media (max-width: 720px){
  .pro-handbook .card p,
  .pro-handbook .card .muted,
  .pro-handbook .card .tiny,
  body[data-pro-page="license"] .card p,
  body[data-pro-page="license"] .card .muted,
  body[data-pro-page="license"] .card .tiny{
    line-height: 1.66;
  }

  .pro-handbook .card p + p,
  .pro-handbook .card .muted + .muted,
  .pro-handbook .card p + .muted,
  .pro-handbook .card .muted + p,
  body[data-pro-page="license"] .card p + p,
  body[data-pro-page="license"] .card .muted + .muted,
  body[data-pro-page="license"] .card p + .muted,
  body[data-pro-page="license"] .card .muted + p{
    margin-top: .72rem;
  }
}

/* =========================================================
   SafeShare Pro — Paragraph spacing patch for Handbook / License
========================================================= */

.pro-handbook .card p,
.pro-handbook .card .muted,
.pro-handbook .card .tiny,
body[data-pro-page="license"] .card p,
body[data-pro-page="license"] .card .muted,
body[data-pro-page="license"] .card .tiny{
  line-height: 1.72;
}

.pro-handbook .card p + p,
.pro-handbook .card .muted + .muted,
.pro-handbook .card p + .muted,
.pro-handbook .card .muted + p,
body[data-pro-page="license"] .card p + p,
body[data-pro-page="license"] .card .muted + .muted,
body[data-pro-page="license"] .card p + .muted,
body[data-pro-page="license"] .card .muted + p{
  margin-top: .8rem;
}

.pro-handbook .card h2 + p,
.pro-handbook .card h2 + .muted,
.pro-handbook .card h3 + p,
.pro-handbook .card h3 + .muted,
body[data-pro-page="license"] .card h2 + p,
body[data-pro-page="license"] .card h2 + .muted,
body[data-pro-page="license"] .card h3 + p,
body[data-pro-page="license"] .card h3 + .muted{
  margin-top: .6rem;
}

.pro-handbook .card p + .box,
.pro-handbook .card .muted + .box,
body[data-pro-page="license"] .card p + .box,
body[data-pro-page="license"] .card .muted + .box{
  margin-top: .85rem;
}

.pro-handbook .card .box + p,
.pro-handbook .card .box + .muted,
body[data-pro-page="license"] .card .box + p,
body[data-pro-page="license"] .card .box + .muted{
  margin-top: .85rem;
}

@media (max-width: 720px){
  .pro-handbook .card p,
  .pro-handbook .card .muted,
  .pro-handbook .card .tiny,
  body[data-pro-page="license"] .card p,
  body[data-pro-page="license"] .card .muted,
  body[data-pro-page="license"] .card .tiny{
    line-height: 1.66;
  }

  .pro-handbook .card p + p,
  .pro-handbook .card .muted + .muted,
  .pro-handbook .card p + .muted,
  .pro-handbook .card .muted + p,
  body[data-pro-page="license"] .card p + p,
  body[data-pro-page="license"] .card .muted + .muted,
  body[data-pro-page="license"] .card p + .muted,
  body[data-pro-page="license"] .card .muted + p{
    margin-top: .72rem;
  }
}

/* =========================================================
   SafeShare Pro — Heading spacing patch for Handbook / License
========================================================= */

.pro-handbook .card h2,
body[data-pro-page="license"] .card h2{
  margin: 0 0 .55rem;
  line-height: 1.28;
  letter-spacing: -.01em;
}

.pro-handbook .card h3,
body[data-pro-page="license"] .card h3{
  margin-top: 1.15rem;
  margin-bottom: .42rem;
  line-height: 1.38;
  letter-spacing: -.01em;
}

.pro-handbook .card h2 + p,
.pro-handbook .card h2 + .muted,
.pro-handbook .card h2 + .box,
.pro-handbook .card h2 + ul,
.pro-handbook .card h2 + ol,
.pro-handbook .card h3 + p,
.pro-handbook .card h3 + .muted,
.pro-handbook .card h3 + .box,
.pro-handbook .card h3 + ul,
.pro-handbook .card h3 + ol,
body[data-pro-page="license"] .card h2 + p,
body[data-pro-page="license"] .card h2 + .muted,
body[data-pro-page="license"] .card h2 + .box,
body[data-pro-page="license"] .card h2 + ul,
body[data-pro-page="license"] .card h2 + ol,
body[data-pro-page="license"] .card h3 + p,
body[data-pro-page="license"] .card h3 + .muted,
body[data-pro-page="license"] .card h3 + .box,
body[data-pro-page="license"] .card h3 + ul,
body[data-pro-page="license"] .card h3 + ol{
  margin-top: .55rem;
}

@media (max-width: 720px){
  .pro-handbook .card h2,
  body[data-pro-page="license"] .card h2{
    margin-bottom: .48rem;
    line-height: 1.26;
  }

  .pro-handbook .card h3,
  body[data-pro-page="license"] .card h3{
    margin-top: 1rem;
    margin-bottom: .38rem;
    line-height: 1.34;
  }
}

/* =========================================================
   SafeShare Pro — Box patch for Handbook / License
========================================================= */

.pro-handbook .box,
body[data-pro-page="license"] .box{
  padding: 1rem 1.05rem;
  border-radius: 16px;
  background: rgba(255,255,255,.038);
  border: 1px solid rgba(255,255,255,.10);
}

.pro-handbook .box.ok,
body[data-pro-page="license"] .box.ok{
  background: linear-gradient(180deg, rgba(126,231,209,.09), rgba(126,231,209,.035));
  border-color: rgba(126,231,209,.22);
}

.pro-handbook .box.warn,
body[data-pro-page="license"] .box.warn{
  background: linear-gradient(180deg, rgba(243,201,107,.11), rgba(243,201,107,.04));
  border-color: rgba(243,201,107,.24);
}

.pro-handbook .box b,
.pro-handbook .box strong,
body[data-pro-page="license"] .box b,
body[data-pro-page="license"] .box strong{
  color: var(--pro-text);
}

.pro-handbook .box .muted,
.pro-handbook .box .tiny,
body[data-pro-page="license"] .box .muted,
body[data-pro-page="license"] .box .tiny{
  color: var(--pro-text-soft);
}

.pro-handbook .box + .box,
body[data-pro-page="license"] .box + .box{
  margin-top: .85rem;
}

@media (max-width: 720px){
  .pro-handbook .box,
  body[data-pro-page="license"] .box{
    padding: .92rem .95rem;
    border-radius: 14px;
  }
}

/* =========================================================
   SafeShare Pro Handbook — TOC / Quicklinks mini patch
========================================================= */

.pro-handbook .toc{
  margin-top: 1.45rem;
}

.pro-handbook .toc h2{
  margin-bottom: .8rem;
}

.pro-handbook .toc ul{
  margin-top: 0;
  display: grid;
  gap: .5rem;
  padding-left: 1.1rem;
}

.pro-handbook .toc li{
  margin: 0;
  line-height: 1.5;
}

.pro-handbook .toc a{
  color: var(--pro-text-soft);
  text-decoration: none;
}

.pro-handbook .toc a:hover{
  color: var(--pro-accent);
  text-decoration: underline;
}

.pro-handbook .hero .row{
  margin-top: 1.15rem;
  gap: .75rem;
}

.pro-handbook .hero .row .btn{
  min-height: 44px;
  padding: .74rem .98rem;
}

@media (max-width: 720px){
  .pro-handbook .toc{
    margin-top: 1.2rem;
  }

  .pro-handbook .toc ul{
    gap: .42rem;
    padding-left: 1rem;
  }

  .pro-handbook .hero .row{
    margin-top: 1rem;
    gap: .6rem;
  }

  .pro-handbook .hero .row .btn{
    width: auto;
    min-width: 0;
  }
}

/* =========================================================
   SafeShare Pro Handbook — FAQ mini patch
========================================================= */

.pro-handbook #faq{
  margin-top: 1.4rem;
}

.pro-handbook #faq h2{
  margin-bottom: .85rem;
}

.pro-handbook #faq details{
  padding: .95rem 0 !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}

.pro-handbook #faq details:first-of-type{
  margin-top: .45rem;
}

.pro-handbook #faq details summary{
  font-size: 1rem !important;
  line-height: 1.5 !important;
  font-weight: 650 !important;
  color: var(--pro-text) !important;
}

.pro-handbook #faq details summary::before{
  color: var(--pro-text-soft) !important;
}

.pro-handbook #faq details > div,
.pro-handbook #faq details > p,
.pro-handbook #faq details > .muted{
  margin-top: .75rem !important;
  padding-left: 1.4rem !important;
  font-size: .99rem !important;
  line-height: 1.68 !important;
  color: var(--pro-muted) !important;
}

@media (max-width: 720px){
  .pro-handbook #faq{
    margin-top: 1.15rem;
  }

  .pro-handbook #faq h2{
    margin-bottom: .75rem;
  }

  .pro-handbook #faq details{
    padding: .82rem 0 !important;
  }

  .pro-handbook #faq details summary{
    font-size: .96rem !important;
    line-height: 1.46 !important;
  }

  .pro-handbook #faq details > div,
  .pro-handbook #faq details > p,
  .pro-handbook #faq details > .muted{
    margin-top: .65rem !important;
    padding-left: 1.2rem !important;
    font-size: .95rem !important;
    line-height: 1.62 !important;
  }
}

/* =========================================================
   SafeShare Pro Handbook — Details arrow / summary mini patch
========================================================= */

.pro-handbook details summary{
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  padding:0;
}

.pro-handbook details summary::before{
  content:"▸";
  flex:0 0 auto;
  width:1rem;
  margin:0;
  line-height:1.35;
  opacity:.88;
  transform-origin:50% 48%;
  transition:transform .18s ease, opacity .18s ease;
}

.pro-handbook details[open] summary::before{
  transform:rotate(90deg);
  opacity:1;
}

.pro-handbook details summary b{
  display:block;
  line-height:1.45;
}

.pro-handbook #faq details summary{
  display:flex;
  align-items:flex-start;
  gap:.5rem;
}

.pro-handbook #faq details summary::before{
  width:.95rem;
  line-height:1.4;
  margin:0;
}

@media (max-width: 720px){
  .pro-handbook details summary{
    gap:.48rem;
  }

  .pro-handbook details summary::before{
    width:.92rem;
  }

  .pro-handbook #faq details summary{
    gap:.45rem;
  }

  .pro-handbook #faq details summary::before{
    width:.9rem;
  }
}

/* =========================================================
   SafeShare Pro Handbook — offene Details-Inhalte mini patch
========================================================= */

.pro-handbook details[open] > .muted,
.pro-handbook details[open] > p,
.pro-handbook details[open] > div,
.pro-handbook details[open] > ul,
.pro-handbook details[open] > ol,
.pro-handbook details[open] > .box,
.pro-handbook details[open] > pre{
  margin-top:.8rem;
}

.pro-handbook details[open] > :last-child{
  margin-bottom:0;
}

.pro-handbook #faq details[open] > div,
.pro-handbook #faq details[open] > p,
.pro-handbook #faq details[open] > .muted{
  margin-top:.7rem;
  padding-bottom:.1rem;
}

@media (max-width: 720px){
  .pro-handbook details[open] > .muted,
  .pro-handbook details[open] > p,
  .pro-handbook details[open] > div,
  .pro-handbook details[open] > ul,
  .pro-handbook details[open] > ol,
  .pro-handbook details[open] > .box,
  .pro-handbook details[open] > pre{
    margin-top:.72rem;
  }

  .pro-handbook #faq details[open] > div,
  .pro-handbook #faq details[open] > p,
  .pro-handbook #faq details[open] > .muted{
    margin-top:.62rem;
  }
}

/* =========================================================
   SafeShare Pro Handbook — offene Details-Boxen/Listen mini patch
========================================================= */

.pro-handbook details[open] > .box{
  padding:1rem 1.05rem;
  border-radius:16px;
}

.pro-handbook details[open] > ul,
.pro-handbook details[open] > ol{
  padding-left:1.25rem;
}

.pro-handbook details[open] > ul li,
.pro-handbook details[open] > ol li{
  margin:.34rem 0;
}

.pro-handbook details[open] > .box + ul,
.pro-handbook details[open] > .box + ol,
.pro-handbook details[open] > ul + .box,
.pro-handbook details[open] > ol + .box{
  margin-top:.8rem;
}

@media (max-width: 720px){
  .pro-handbook details[open] > .box{
    padding:.9rem .95rem;
    border-radius:14px;
  }

  .pro-handbook details[open] > ul,
  .pro-handbook details[open] > ol{
    padding-left:1.08rem;
  }

  .pro-handbook details[open] > ul li,
  .pro-handbook details[open] > ol li{
    margin:.28rem 0;
  }

  .pro-handbook details[open] > .box + ul,
  .pro-handbook details[open] > .box + ol,
  .pro-handbook details[open] > ul + .box,
  .pro-handbook details[open] > ol + .box{
    margin-top:.72rem;
  }
}

/* =========================================================
   SafeShare Pro Handbook — offene Details Pre/Beispielblöcke mini patch
========================================================= */

.pro-handbook details[open] > pre,
.pro-handbook details[open] > .handbookExample,
.pro-handbook details[open] > .examplePair,
.pro-handbook details[open] > .exampleLine{
  margin-top:.8rem;
}

.pro-handbook details[open] > pre,
.pro-handbook details[open] > .handbookExample{
  padding:1rem 1.05rem;
  border-radius:16px;
}

.pro-handbook details[open] > .examplePair{
  gap:.8rem;
}

.pro-handbook details[open] > .exampleLine{
  padding:.9rem 1rem;
  border-radius:16px;
}

.pro-handbook details[open] > pre + .box,
.pro-handbook details[open] > .handbookExample + .box,
.pro-handbook details[open] > .examplePair + .box,
.pro-handbook details[open] > .box + pre,
.pro-handbook details[open] > .box + .handbookExample,
.pro-handbook details[open] > .box + .examplePair{
  margin-top:.8rem;
}

@media (max-width: 720px){
  .pro-handbook details[open] > pre,
  .pro-handbook details[open] > .handbookExample{
    padding:.9rem .95rem;
    border-radius:14px;
  }

  .pro-handbook details[open] > .examplePair{
    gap:.72rem;
  }

  .pro-handbook details[open] > .exampleLine{
    padding:.82rem .9rem;
    border-radius:14px;
  }

  .pro-handbook details[open] > pre + .box,
  .pro-handbook details[open] > .handbookExample + .box,
  .pro-handbook details[open] > .examplePair + .box,
  .pro-handbook details[open] > .box + pre,
  .pro-handbook details[open] > .box + .handbookExample,
  .pro-handbook details[open] > .box + .examplePair{
    margin-top:.72rem;
  }
}

/* =========================================================
   SafeShare Pro Handbook — FAQ-Details vs. normale Details trennen (final)
========================================================= */

/* Normale offene Details im Handbook */
.pro-handbook details[open]:not(#faq > details){
  padding-bottom: .9rem;
}

.pro-handbook details[open]:not(#faq > details) > .muted,
.pro-handbook details[open]:not(#faq > details) > p,
.pro-handbook details[open]:not(#faq > details) > div,
.pro-handbook details[open]:not(#faq > details) > ul,
.pro-handbook details[open]:not(#faq > details) > ol,
.pro-handbook details[open]:not(#faq > details) > .box,
.pro-handbook details[open]:not(#faq > details) > pre,
.pro-handbook details[open]:not(#faq > details) > .handbookExample,
.pro-handbook details[open]:not(#faq > details) > .examplePair{
  margin-top: .78rem;
}

/* FAQ bleibt schlichter und enger */
.pro-handbook #faq > details[open]{
  padding-bottom: .2rem;
}

.pro-handbook #faq > details[open] > .muted,
.pro-handbook #faq > details[open] > p,
.pro-handbook #faq > details[open] > div{
  margin-top: .58rem;
}

.pro-handbook #faq > details[open] > ul,
.pro-handbook #faq > details[open] > ol,
.pro-handbook #faq > details[open] > .box,
.pro-handbook #faq > details[open] > pre,
.pro-handbook #faq > details[open] > .handbookExample,
.pro-handbook #faq > details[open] > .examplePair{
  margin-top: .65rem;
}

@media (max-width: 720px){
  .pro-handbook details[open]:not(#faq > details){
    padding-bottom: .82rem;
  }

  .pro-handbook details[open]:not(#faq > details) > .muted,
  .pro-handbook details[open]:not(#faq > details) > p,
  .pro-handbook details[open]:not(#faq > details) > div,
  .pro-handbook details[open]:not(#faq > details) > ul,
  .pro-handbook details[open]:not(#faq > details) > ol,
  .pro-handbook details[open]:not(#faq > details) > .box,
  .pro-handbook details[open]:not(#faq > details) > pre,
  .pro-handbook details[open]:not(#faq > details) > .handbookExample,
  .pro-handbook details[open]:not(#faq > details) > .examplePair{
    margin-top: .72rem;
  }

  .pro-handbook #faq > details[open] > .muted,
  .pro-handbook #faq > details[open] > p,
  .pro-handbook #faq > details[open] > div{
    margin-top: .52rem;
  }

  .pro-handbook #faq > details[open] > ul,
  .pro-handbook #faq > details[open] > ol,
  .pro-handbook #faq > details[open] > .box,
  .pro-handbook #faq > details[open] > pre,
  .pro-handbook #faq > details[open] > .handbookExample,
  .pro-handbook #faq > details[open] > .examplePair{
    margin-top: .6rem;
  }
}

/* =========================================================
   SafeShare Pro Handbook — Beispielblöcke auf kleineren Breiten ruhiger
========================================================= */

.pro-handbook .handbookExample,
.pro-handbook pre{
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 900px){
  .pro-handbook .handbookExample,
  .pro-handbook pre{
    font-size: .84rem;
    line-height: 1.55;
    padding: .9rem .95rem;
    border-radius: 12px;
  }
}

@media (max-width: 560px){
  .pro-handbook .handbookExample,
  .pro-handbook pre{
    font-size: .78rem;
    line-height: 1.5;
    padding: .82rem .86rem;
  }

  .pro-handbook .box .tiny{
    line-height: 1.55;
  }
}

/* License hero without quicklink button row */
body[data-pro-page="license"] .hero{
  padding-bottom: 1rem;
}

body[data-pro-page="license"] .hero .chipRow{
  margin-top: 1rem;
}

/* =========================================================
   SafeShare Pro — Header Back Button softer final
========================================================= */

.proShellBack{
  background: rgba(255,255,255,.028) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(237,243,255,.92) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

.proShellBack:hover{
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.14) !important;
}

@media (min-width: 821px){
  .proShellBack{
    width: auto !important;
    min-width: 220px !important;
    padding: .72rem 1.1rem !important;
  }
}

@media (max-width: 820px){
  .proShellBack{
    padding: .7rem .95rem !important;
    font-size: .98rem !important;
  }
}

/* =========================================================
   SafeShare Pro — Header Back Button less centered
========================================================= */

.proShellBack{
  justify-content: flex-start !important;
  text-align: left !important;
}

@media (min-width: 821px){
  .proShellBack{
    padding-left: 1.2rem !important;
    padding-right: 1rem !important;
  }
}

@media (max-width: 820px){
  .proShellBack{
    justify-content: center !important;
    text-align: center !important;
  }
}

/* =========================================================
   SafeShare Pro — Header Back Button softer left align
========================================================= */

.proShellBack{
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 1.15rem !important;
  padding-right: .9rem !important;
}

@media (max-width: 820px){
  .proShellBack{
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: 1rem !important;
    padding-right: .85rem !important;
  }
}

/* ===== Pro App compact mode list FINAL ===== */

.proToolCompactList{
  display:grid;
  gap:.45rem;
  margin-top:.45rem;
}

.proToolCompactItem{
  display:flex;
  align-items:center;
  gap:.7rem;
  min-height:44px;
  padding:.55rem .1rem;
  cursor:pointer;
}

.proToolCompactItem input{
  margin:0;
  inline-size:18px;
  block-size:18px;
  flex:0 0 18px;
  accent-color:#7ee7d1;
}

.proToolCompactItem span{
  font-weight:700;
  line-height:1.25;
}

.proToolCompactItem--check span{
  font-weight:600;
}

.proToolMiniHint{
  margin-top:.65rem;
  padding:.8rem .95rem;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  line-height:1.4;
  color:inherit;
}

.pro-main .card{
  padding:.95rem;
}

.pro-main .card > h2{
  margin:0 0 .55rem;
}

@media (max-width: 720px){
  .proToolCompactItem{
    min-height:42px;
    padding:.5rem 0;
  }

  .proToolMiniHint{
    padding:.75rem .85rem;
  }
}

/* ===== Pro App compact hero + spacing trim ===== */

.pro-main{
  padding-top:.4rem;
}

.pro-main .hero{
  margin:0 0 1rem;
  padding:0;
}

.pro-main .hero h1{
  margin:0 0 .45rem;
  font-size:clamp(2rem, 4vw, 2.6rem);
  line-height:1.06;
  letter-spacing:-.02em;
}

.pro-main .hero .lead{
  margin:0;
  font-size:1.08rem;
  line-height:1.4;
}

.pro-main .hero .muted{
  margin:.55rem 0 0;
  font-size:.98rem;
  line-height:1.45;
  max-width:70ch;
}

.pro-main .card{
  padding:1rem;
  border-radius:18px;
}

.pro-main .card + .card{
  margin-top:.9rem;
}

.pro-main .card > h2{
  margin:0 0 .55rem;
  font-size:1.2rem;
  line-height:1.2;
}

.pro-main .card > label{
  display:block;
  margin:0 0 .45rem;
}

.pro-main .card textarea{
  margin-top:.25rem;
}

.pro-main .box{
  padding:.9rem 1rem;
}

.pro-main .tiny{
  line-height:1.4;
}

.pro-main .mt-12{
  margin-top:.75rem !important;
}

.pro-main .mt-10{
  margin-top:.6rem !important;
}

.pro-main .row{
  margin-top:.75rem;
  gap:.55rem;
}

@media (max-width: 720px){
  .pro-main{
    padding-top:.2rem;
  }

  .pro-main .hero{
    margin:0 0 .85rem;
  }

  .pro-main .hero h1{
    margin-bottom:.38rem;
    font-size:clamp(1.8rem, 8vw, 2.25rem);
    line-height:1.08;
  }

  .pro-main .hero .lead{
    font-size:1rem;
    line-height:1.38;
  }

  .pro-main .hero .muted{
    margin-top:.45rem;
    font-size:.95rem;
    line-height:1.4;
  }

  .pro-main .card{
    padding:.9rem;
    border-radius:16px;
  }

  .pro-main .card + .card{
    margin-top:.8rem;
  }

  .pro-main .card > h2{
    margin-bottom:.45rem;
    font-size:1.12rem;
  }

  .pro-main .box{
    padding:.82rem .9rem;
  }

  .pro-main .row{
    margin-top:.7rem;
    gap:.5rem;
  }

  .pro-main .mt-12{
    margin-top:.65rem !important;
  }

  .pro-main .mt-10{
    margin-top:.5rem !important;
  }
}

/* ===== Pro App compact mode list FINAL BYPASS ===== */

.proToolCompactList{
  display:grid;
  gap:.45rem;
  margin-top:.45rem;
}

.proToolCompactItem{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.18rem 0;
  margin:0;
  cursor:pointer;
  border:0;
  background:none;
  box-shadow:none;
}

.proToolVisuallyHidden{
  position:absolute !important;
  inline-size:1px !important;
  block-size:1px !important;
  width:1px !important;
  height:1px !important;
  margin:-1px !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}

.proToolControl{
  position:relative;
  flex:0 0 18px;
  width:18px;
  height:18px;
  display:inline-block;
  box-sizing:border-box;
  border:2px solid rgba(255,255,255,.45);
  background:transparent;
}

.proToolControl--radio{
  border-radius:999px;
}

.proToolControl--check{
  border-radius:5px;
}

.proToolLabelText{
  display:inline-block;
  font-weight:600;
  line-height:1.25;
}

.proToolLabelText--subtle{
  font-weight:500;
}

#detectBox b,
#detectHelp b{
  font-weight:600;
}

.proToolCompactItem input[type="radio"]:checked + .proToolControl--radio{
  border-color:#7ee7d1;
}

.proToolCompactItem input[type="radio"]:checked + .proToolControl--radio::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:999px;
  background:#7ee7d1;
}

.proToolCompactItem input[type="checkbox"]:checked + .proToolControl--check{
  border-color:#7ee7d1;
  background:#7ee7d1;
}

.proToolCompactItem input[type="checkbox"]:checked + .proToolControl--check::after{
  content:"";
  position:absolute;
  left:4px;
  top:1px;
  width:5px;
  height:9px;
  border-right:3px solid #08111c;
  border-bottom:3px solid #08111c;
  transform:rotate(45deg);
}

.proToolCompactItem input:focus-visible + .proToolControl{
  outline:2px solid rgba(126,231,209,.55);
  outline-offset:2px;
}

.proToolMiniHint{
  margin-top:.65rem;
  padding:.8rem .95rem;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  line-height:1.4;
  color:inherit;
}

@media (max-width: 720px){
  .proToolCompactItem{
    padding:.14rem 0;
  }

  .proToolMiniHint{
    padding:.75rem .85rem;
  }
}

.pro-main .row{
  margin-top:.55rem;
  gap:.5rem;
}

.pro-main .row .btn{
  padding:.78rem 1rem;
  min-height:0;
  font-size:1rem;
  line-height:1.1;
  border-radius:14px;
}

.pro-main .card > label{
  margin:0 0 .35rem;
}

.pro-main .card textarea{
  margin-top:.15rem;
}

@media (max-width: 720px){
  .pro-main .row .btn{
    padding:.72rem .95rem;
    font-size:.98rem;
  }
}

.pro-main .proToolCompactItem{
  gap:.62rem;
  padding:.12rem 0;
}

.pro-main .proToolCompactItem .proToolLabelText{
  font-size:1rem;
  line-height:1.2;
}

#cleanModeInfo{
  font-size:.96rem;
  line-height:1.38;
  opacity:.92;
}

/* ===== Pro Start page helpers ===== */

.proFeatureList,
.proStepList,
.proInfoList{
  display:grid;
  gap:1rem;
}

.proFeatureList .box,
.proStepList .box,
.proInfoList .box{
  height:100%;
}

@media (min-width: 760px){
  .proFeatureList,
  .proStepList,
  .proInfoList{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 759px){
  .proFeatureList,
  .proStepList,
  .proInfoList{
    grid-template-columns:1fr;
  }
}