/* deinrecatch.de – zentrales Stylesheet
   Lokale Systemschriften, keine externen Ressourcen. */

:root{
  --navy:#0f1d33;
  --navy-2:#16273f;
  --blue:#2563c9;
  --blue-dark:#1c4da3;
  --cyan:#0e9aa7;
  --cyan-soft:#e3f5f6;
  --paper:#faf9f6;
  --card:#ffffff;
  --ink:#1b2330;
  --muted:#5b6472;
  --line:#dfe3ea;
  --green:#1f7a4f;
  --green-soft:#e7f4ec;
  --orange:#a35a0a;
  --orange-soft:#fdf0df;
  --red:#b3362b;
  --red-soft:#fdecea;
  --radius:10px;
  --maxw:72rem;
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
}
img,svg{max-width:100%;height:auto}
a{color:var(--blue-dark)}
a:hover{color:var(--blue)}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:3px}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
  padding:.6rem 1rem;z-index:100;border-radius:0 0 var(--radius) 0;
}
.skip-link:focus{left:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.25rem}

/* ---------- Header / Navigation ---------- */
.site-header{background:var(--navy);color:#fff}
.header-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;font-weight:700;font-size:1.15rem;letter-spacing:.01em}
.brand:hover{color:#fff}
.brand .brand-dot{font-family:var(--font-mono);color:#6fd8df;font-weight:600}
.brand svg{flex:none}
.nav-toggle{
  display:none;background:var(--navy-2);color:#fff;border:1px solid #2b3c58;
  border-radius:8px;padding:.5rem .9rem;font:inherit;cursor:pointer;
}
.site-nav ul{display:flex;flex-wrap:wrap;gap:.25rem;list-style:none;margin:0;padding:0}
.site-nav a{
  display:block;color:#e7ecf4;text-decoration:none;padding:.45rem .7rem;
  border-radius:8px;font-size:.97rem;
}
.site-nav a:hover,.site-nav a:focus-visible{background:var(--navy-2);color:#fff}
.site-nav a[aria-current="page"]{background:var(--blue);color:#fff}
@media (max-width:56rem){
  .nav-toggle{display:inline-block}
  .js .site-nav{display:none;padding-bottom:.9rem}
  .js .site-nav.open{display:block}
  .site-nav ul{flex-direction:column}
  .site-nav a{padding:.7rem .8rem;font-size:1.05rem}
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{font-size:.9rem;color:var(--muted);padding:.9rem 0 0}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0}
.breadcrumbs li+li::before{content:"›";margin-right:.35rem;color:var(--line)}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--blue-dark)}

/* ---------- Typografie ---------- */
main{padding-bottom:3rem}
h1{font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.2;letter-spacing:-.015em;margin:1rem 0 .6rem}
h2{font-size:1.45rem;line-height:1.3;margin:2.2rem 0 .6rem;letter-spacing:-.01em}
h3{font-size:1.15rem;margin:1.6rem 0 .4rem}
p{margin:.7rem 0}
.lead{font-size:1.15rem;color:#2c3546}
ul,ol{padding-left:1.35rem}
li{margin:.3rem 0}
.mono,code{font-family:var(--font-mono);font-size:.93em}
code{background:#eef1f5;padding:.1em .35em;border-radius:5px}

/* Domain-Chip: Signatur-Element für Domainnamen und Prozessbegriffe */
.chip{
  display:inline-block;font-family:var(--font-mono);font-size:.88em;
  background:var(--cyan-soft);color:#0b6b74;border:1px solid #bfe6e9;
  border-radius:6px;padding:.05em .5em;white-space:nowrap;
}

/* ---------- Meta-Zeile (Autor, Datum, Stand) ---------- */
.page-meta{
  display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.88rem;color:var(--muted);
  border-bottom:1px solid var(--line);padding-bottom:.9rem;margin-bottom:1.2rem;
}
.page-meta .fact-stand{color:var(--orange);font-weight:600}

/* ---------- Boxen ---------- */
.box{border-radius:var(--radius);padding:1rem 1.15rem;margin:1.3rem 0;border:1px solid var(--line);background:var(--card)}
.box>:first-child{margin-top:0}
.box>:last-child{margin-bottom:0}
.box-info{border-left:5px solid var(--cyan);background:var(--cyan-soft)}
.box-warn{border-left:5px solid var(--orange);background:var(--orange-soft)}
.box-risk{border-left:5px solid var(--red);background:var(--red-soft)}
.box-risk strong:first-child,.box-risk .box-title{color:var(--red)}
.box-ok{border-left:5px solid var(--green);background:var(--green-soft)}
.box-title{display:block;font-weight:700;margin-bottom:.3rem}
.fact-box{background:var(--card);border:1px solid var(--line)}
.fact-box dl{display:grid;grid-template-columns:minmax(9rem,auto) 1fr;gap:.35rem 1rem;margin:0}
.fact-box dt{font-weight:600;color:var(--muted);font-size:.93rem}
.fact-box dd{margin:0}
@media (max-width:36rem){.fact-box dl{grid-template-columns:1fr}}
.fact-source{font-size:.85rem;color:var(--muted);margin-top:.7rem;border-top:1px dashed var(--line);padding-top:.5rem}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;padding:2.6rem 0 2.8rem}
.hero h1{color:#fff;margin-top:0}
.hero .sub{color:#c9d4e4;font-size:1.13rem;max-width:46rem}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
@media (max-width:56rem){.hero-grid{grid-template-columns:1fr}}
.hero-visual{background:transparent}

/* ---------- Pfadkarten ---------- */
.path-cards{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:1.6rem 0}
@media (max-width:48rem){.path-cards{grid-template-columns:1fr}}
.path-card{
  background:var(--card);border:1px solid var(--line);border-top:5px solid var(--blue);
  border-radius:var(--radius);padding:1.3rem 1.3rem 1.5rem;
}
.path-card.seller{border-top-color:var(--cyan)}
.path-card h2,.path-card h3{margin-top:0}
.hero .path-card{color:var(--ink)}

/* ---------- Buttons / CTAs ---------- */
.btn{
  display:inline-block;text-decoration:none;font-weight:600;border-radius:9px;
  padding:.7rem 1.15rem;margin:.35rem .5rem .35rem 0;border:2px solid transparent;
  min-height:44px;line-height:1.35;
}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-dark);color:#fff}
.btn-secondary{background:transparent;color:var(--blue-dark);border-color:var(--blue)}
.btn-secondary:hover{background:#eaf1fc}
.hero .btn-secondary{color:#dce8fb;border-color:#5f7fb4}
.hero .btn-secondary:hover{background:var(--navy-2);color:#fff}
.btn-ext::after{content:" ↗";font-size:.85em}
.ext-note{font-size:.85rem;color:var(--muted)}
.hero .ext-note{color:#aebbd1}

/* ---------- Tabellen ---------- */
.table-scroll{overflow-x:auto;margin:1.2rem 0;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:38rem;background:var(--card);font-size:.97rem}
caption{text-align:left;font-weight:700;padding:.4rem 0;caption-side:top}
th,td{border:1px solid var(--line);padding:.6rem .7rem;text-align:left;vertical-align:top}
thead th{background:var(--navy);color:#fff;border-color:#31435f}
tbody tr:nth-child(even){background:#f4f6f9}

/* ---------- Prozess-Schritte ---------- */
.steps{list-style:none;counter-reset:step;padding:0;margin:1.3rem 0}
.steps>li{
  counter-increment:step;position:relative;padding:.15rem 0 .9rem 2.9rem;margin:0;
}
.steps>li::before{
  content:counter(step);position:absolute;left:0;top:0;
  width:2rem;height:2rem;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;
}
.steps>li:not(:last-child)::after{
  content:"";position:absolute;left:.95rem;top:2.2rem;bottom:0;width:2px;background:var(--line);
}
.steps.seller>li::before{background:var(--cyan)}

/* Flow-Zeile (Redomain → RGP → ReCatch) */
.flow{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-family:var(--font-mono);font-size:.95rem;margin:1rem 0}
.flow .stage{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:.35rem .7rem}
.flow .stage.hot{border-color:var(--cyan);background:var(--cyan-soft);font-weight:600}
.flow .arrow{color:var(--muted)}

/* ---------- Checklisten ---------- */
.checklist{list-style:none;padding:0;margin:1.2rem 0}
.checklist li{
  display:flex;gap:.7rem;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:8px;padding:.65rem .8rem;margin:.45rem 0;
}
.checklist input[type="checkbox"]{width:1.35rem;height:1.35rem;margin-top:.15rem;accent-color:var(--green);flex:none}
.checklist label{cursor:pointer}

/* ---------- Tools / Formulare ---------- */
.tool{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;margin:1.5rem 0}
.tool h2,.tool h3{margin-top:0}
.tool fieldset{border:1px solid var(--line);border-radius:8px;margin:1rem 0;padding:.8rem 1rem}
.tool legend{font-weight:700;padding:0 .4rem}
.field{margin:.8rem 0}
.field label{display:block;font-weight:600;margin-bottom:.25rem}
.field .hint{display:block;font-weight:400;font-size:.85rem;color:var(--muted)}
input[type="text"],input[type="number"],select{
  font:inherit;padding:.55rem .7rem;border:1px solid #b9c1cd;border-radius:8px;
  width:100%;max-width:24rem;background:#fff;color:var(--ink);
}
.radio-row label{font-weight:400;display:inline-flex;align-items:center;gap:.4rem;margin-right:1.1rem}
input[type="radio"],input[type="checkbox"]{accent-color:var(--blue)}
.tool-result{margin-top:1.2rem}
.tool-result[hidden]{display:none}
.result-num{font-family:var(--font-mono);font-weight:700}
.js-only{display:none}
.js .js-only{display:block}
.js .nojs-only{display:none}

/* ---------- FAQ / Glossar ---------- */
.faq details,.glossar dt{margin:.5rem 0}
details{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:.2rem .9rem}
summary{font-weight:600;cursor:pointer;padding:.55rem 0}
details[open]{padding-bottom:.7rem}
.glossar dt{font-weight:700;margin-top:1.4rem;font-size:1.08rem}
.glossar dt code{background:none;padding:0}
.glossar dd{margin:0 0 .4rem}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:#c9d4e4;margin-top:3rem;padding:2.2rem 0 2.6rem;font-size:.95rem}
.site-footer a{color:#e7ecf4}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.6rem}
.site-footer h2{font-size:1rem;color:#fff;margin:0 0 .5rem}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:.3rem 0}
.footer-note{border-top:1px solid #2b3c58;margin-top:1.8rem;padding-top:1.2rem;color:#9fb0c8;font-size:.87rem}

/* ---------- Druck ---------- */
@media print{
  .site-header,.site-footer,.breadcrumbs,.btn,.no-print{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  a{color:#000;text-decoration:none}
  .checklist li{border:1px solid #999;break-inside:avoid}
  .box{border:1px solid #999}
  h1{margin-top:0}
}

/* --- Sprachumschalter (mehrsprachige Version) --- */
/* Header: kompaktes Dropdown (natives <details>, ohne JS nutzbar) */
.lang-switch-compact{position:relative;flex:none}
.lang-switch-compact summary{
  list-style:none;cursor:pointer;background:var(--navy-2);color:#fff;
  border:1px solid #2b3c58;border-radius:8px;padding:.45rem .7rem;
  font-size:.9rem;font-weight:600;letter-spacing:.03em;white-space:nowrap;
}
.lang-switch-compact summary::-webkit-details-marker{display:none}
.lang-switch-compact summary::after{content:" ▾";font-size:.75em;opacity:.8}
.lang-switch-compact[open] summary::after{content:" ▴"}
.lang-switch-compact summary:hover,.lang-switch-compact summary:focus-visible{background:var(--blue);border-color:var(--blue)}
.lang-switch-compact ul{
  position:absolute;right:0;top:calc(100% + .4rem);z-index:60;min-width:11rem;
  list-style:none;margin:0;padding:.35rem;background:var(--navy-2);
  border:1px solid #2b3c58;border-radius:10px;box-shadow:0 10px 26px rgba(0,0,0,.35);
}
.lang-switch-compact a{
  display:block;color:#e7ecf4;text-decoration:none;padding:.5rem .7rem;
  border-radius:7px;font-size:.95rem;white-space:nowrap;
}
.lang-switch-compact a:hover,.lang-switch-compact a:focus-visible{background:var(--blue);color:#fff}
.lang-switch-compact a[aria-current="page"]{font-weight:700;color:#6fd8df}
/* Footer: ausgeschriebene horizontale Liste */
.lang-switch-list ul{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;margin:0;padding:0}
.lang-switch-list a{font-size:.9rem;color:inherit;text-decoration:none;opacity:.85}
.lang-switch-list a:hover,.lang-switch-list a:focus-visible{text-decoration:underline;opacity:1}
.lang-switch-list a[aria-current="page"]{font-weight:600;opacity:1}
.site-footer .lang-switch-list{margin:1.4rem 0 .6rem}
/* Mobil: Dropdown bleibt kompakt neben dem Hamburger-Menü sichtbar */
@media (max-width:56rem){
  .header-bar{flex-wrap:wrap}
  .lang-switch-compact{order:2;margin-left:auto}
  .nav-toggle{order:3}
  .site-nav{order:4;flex-basis:100%}
}