/* =====================================================================
   PROREFERIT – gemeinsames Stylesheet für die Produkt-Landingpages
   prorefer.html · promail.html · proevent.html

   Einbindung je Seite:
   <link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="proreferit-landing.css">

   Die Akzentfarbe (Grün / Orange / Blau) wird über eine Modifier-Klasse
   am <main class="proreferit-page pr-prorefer|pr-promail|pr-proevent">
   gesetzt. Seitenspezifische Blöcke (Problem-Streifen, Sprachen-Streifen,
   Vorher/Nachher, Teilnehmer-Streifen) sind am Ende zusammengefasst und
   greifen nur, wenn die jeweilige Seite die Klasse im HTML verwendet.
   ===================================================================== */

:root {
  --navy: #223B57;
  --navy-ink: #1B2E44;
  --ink: #1E2A37;
  --muted: #5C6B78;
  --card: #FFFFFF;
  --radius: 14px;
  --maxw: 1120px;

  /* Semantische Basisfarben, unabhängig von der Seiten-Akzentfarbe */
  --green: #3F9142;
  --green-dark: #2E7031;
  --green-bg: #E7F3E7;
  --orange: #E8862B;
  --orange-dark: #C96E19;
  --orange-bg: #FBE7CF;
  --blue: #3B7DBE;
  --blue-dark: #2A5F94;
  --blue-bg: #DCEAF7;
}

/* ---------------------------------------------------------------------
   Basis-Typografie und Layout-Hilfen
   --------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* font-family:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,sans-serif; */
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--bg, #F5F7F6);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* h1,h2,h3{font-family:'Sora',system-ui,sans-serif;color:var(--navy);margin:0 0 .5em;letter-spacing:-0.01em;} */
h1,
h2,
h3 {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--navy);
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.12;
  font-weight: 700;
}

h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.22;
  font-weight: 700;
}

h3 {
  font-size: 1.15rem;
  font-weight: 600;
}

p {
  margin: 0 0 1em;
}

a {
  color: inherit;
}

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

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .9em 1.7em;
  border-radius: 999px;
  font-family: 'Arial', sans-serif;
  font-weight: 600;
  font-size: .98rem;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

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

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 18px var(--accent-shadow);
}

.btn-primary:hover {
  background: var(--accent-dark);
}

.btn-ghost {
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}

.btn-ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .08);
}

.btn-outline {
  border-color: var(--navy);
  color: var(--navy);
}

.btn-outline:hover {
  background: var(--navy);
  color: #fff;
}

/* ---------------------------------------------------------------------
   Vorschau-Kopf – nur zur Ansicht, nicht Teil des Joomla-Artikel-Inhalts
   --------------------------------------------------------------------- */
.preview-note {
  background: #FFF4E0;
  color: #7A4B00;
  font-size: .85rem;
  text-align: center;
  padding: 10px 16px;
  font-family: 'IBM Plex Sans', sans-serif;
}

.preview-note b {
  color: #5A3600;
}

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line, #E1E9E5);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}

.site-header img {
  height: 34px;
}

.site-nav {
  display: flex;
  gap: 26px;
  font-family: 'Arial', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  color: var(--navy);
}

/* =======================================================================
   Akzentfarbe je Modul
   ======================================================================= */
.pr-prorefer {
  --accent: var(--green);
  --accent-dark: var(--green-dark);
  --accent-shadow: rgba(63, 145, 66, .28);
  --icon-bg: #E7F3E7;
  --eyebrow-color: #9FD79C;
  --cta-text: #E5F2E4;
  --cta-hover-bg: #EFF9EE;
  --bg: #F5F8F6;
  --line: #E1E9E5;
}

.pr-promail {
  --accent: var(--orange);
  --accent-dark: var(--orange-dark);
  --accent-shadow: rgba(232, 134, 43, .3);
  --icon-bg: #FBE7CF;
  --eyebrow-color: #FBCF9E;
  --cta-text: #FCEBD8;
  --cta-hover-bg: #FFF3E4;
  --bg: #F6F5F2;
  --line: #EAE3D8;
}

.pr-proevent {
  --accent: var(--blue);
  --accent-dark: var(--blue-dark);
  --accent-shadow: rgba(59, 125, 190, .3);
  --icon-bg: #DCEAF7;
  --eyebrow-color: #AACBEB;
  --cta-text: #DCEAF7;
  --cta-hover-bg: #EAF3FC;
  --bg: #F4F7FA;
  --line: #DEE7EE;
}

/* Startseite: grün als Leitfarbe für CTA-Band und Lizenz-Hervorhebung;
   die drei Modulkarten führen ihre eigene Farbe über c-green/c-orange/c-blue */
.pr-start {
  --accent: var(--green);
  --accent-dark: var(--green-dark);
  --accent-shadow: rgba(63, 145, 66, .28);
  --icon-bg: var(--green-bg);
  --eyebrow-color: #9FD79C;
  --cta-text: #E5F2E4;
  --cta-hover-bg: #EFF9EE;
  --bg: #F5F7F6;
  --line: #E3E9E6;
  --radius: 16px;
}

/* =======================================================================
   ARTIKEL-INHALT (für Joomla)
   ======================================================================= */
.proreferit-page {
  background: var(--bg);
}

.proreferit-page .eyebrow {
  display: inline-block;
  color: var(--eyebrow-color);
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
  margin-bottom: .9em;
}

.proreferit-page .hero {
  background: linear-gradient(135deg, var(--navy) 0%, #2C4C6E 60%, #315C82 100%);
  color: #fff;
  padding: 72px 0 64px;
}

.proreferit-page .hero h1 {
  color: #fff;
}

.proreferit-page .hero p.lead {
  color: #D7E2EA;
  font-size: 1.12rem;
  max-width: 46ch;
}

.proreferit-page .hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 48px;
  align-items: center;
}

.proreferit-page .hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 1.7em;
  flex-wrap: wrap;
}

.proreferit-page .hero-card {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius);
  padding: 26px 26px 22px;
  backdrop-filter: blur(2px);
}

.proreferit-page .hero-card .stat {
  font-family: 'Arial', sans-serif;
  font-weight: 800;
  font-size: 2.1rem;
  color: #fff;
}

.proreferit-page .hero-card .stat span {
  color: var(--accent);
}

.proreferit-page .hero-card .stat-label {
  color: #C9D6DF;
  font-size: .92rem;
  margin-top: .2em;
}

.proreferit-page .hero-card hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .16);
  margin: 18px 0;
}

.proreferit-page section {
  padding: 64px 0;
}

.proreferit-page section.tight {
  padding: 48px 0;
}

.proreferit-page .section-head {
  max-width: 640px;
  margin-bottom: 2.2em;
}

.proreferit-page .section-head p {
  color: var(--muted);
}

/* Vorteile: Zeilenliste statt Karten-Kit */
.proreferit-page .benefits {
  display: flex;
  flex-direction: column;
}

.proreferit-page .benefit-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 22px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}

.proreferit-page .benefits .benefit-row:last-child {
  border-bottom: 1px solid var(--line);
}

.proreferit-page .benefit-row .icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--icon-bg);
  color: var(--accent-dark);
  flex-shrink: 0;
}

.proreferit-page .benefit-row .icon svg {
  width: 24px;
  height: 24px;
}

.proreferit-page .benefit-row h3 {
  margin-bottom: .28em;
}

.proreferit-page .benefit-row p {
  color: var(--muted);
  margin: 0;
  max-width: 60ch;
}

/* Ablauf: nummerierte Sequenz */
.proreferit-page .flow {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.proreferit-page .flow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.proreferit-page .flow-step {
  position: relative;
  padding: 8px 26px 8px 0;
}

.proreferit-page .flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--line);
  border-right: 2px solid var(--line);
  transform: rotate(45deg);
}

.proreferit-page .flow-num {
  font-family: 'Arial', sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--accent);
  margin-bottom: .3em;
}

.proreferit-page .flow-step h3 {
  font-size: 1.02rem;
  margin-bottom: .3em;
}

.proreferit-page .flow-step p {
  color: var(--muted);
  font-size: .92rem;
}

/* CTA-Band am Seitenende */
.proreferit-page .cta {
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff;
  text-align: center;
}

.proreferit-page .cta h2 {
  color: #fff;
}

.proreferit-page .cta p {
  color: var(--cta-text);
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

.proreferit-page .cta .hero-actions {
  justify-content: center;
}

.proreferit-page .cta .btn-primary {
  background: #fff;
  color: var(--accent-dark);
  box-shadow: none;
}

.proreferit-page .cta .btn-primary:hover {
  background: var(--cta-hover-bg);
}

/* -----------------------------------------------------------------------
   Seitenspezifische Blöcke
   ----------------------------------------------------------------------- */

/* PROREFER: Problem-Streifen */
.proreferit-page .problem {
  background: #EFF4F1;
}

.proreferit-page .problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}

.proreferit-page .problem-item {
  padding: 26px 28px 26px 0;
  border-right: 1px solid var(--line);
}

.proreferit-page .problem-item:last-child {
  border-right: none;
  padding-right: 0;
}

.proreferit-page .problem-item .kicker {
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  color: var(--navy);
  font-size: .98rem;
  margin-bottom: .35em;
}

.proreferit-page .problem-item p {
  color: var(--muted);
  font-size: .95rem;
  margin: 0;
}

/* PROREFER: Vertrauen / Zitatband */
.proreferit-page .trust {
  background: var(--navy-ink);
  color: #fff;
  text-align: center;
}

.proreferit-page .trust p.quote {
  font-family: 'Arial', sans-serif;
  font-weight: 600;
  font-size: 1.3rem;
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.4;
}

.proreferit-page .trust p.quote span {
  color: #9FD79C;
}

/* PROMAIL: Sprachen-Streifen */
.proreferit-page .langs {
  background: #FBF3E7;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.proreferit-page .lang-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.proreferit-page .lang-chip {
  display: flex;
  align-items: center;
  gap: .5em;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .5em 1.1em;
  font-family: 'Arial', sans-serif;
  font-weight: 600;
  font-size: .9rem;
  color: var(--navy);
}

.proreferit-page .lang-chip .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

/* PROMAIL: Vorher / Nachher */
.proreferit-page .compare {
  background: #fff;
}

.proreferit-page .compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.proreferit-page .compare-card {
  border-radius: var(--radius);
  padding: 26px 28px;
}

.proreferit-page .compare-card.before {
  background: #F4F1EC;
  border: 1px dashed #CBB994;
}

.proreferit-page .compare-card.after {
  background: linear-gradient(160deg, #2E4E30, var(--green));
  color: #fff;
}

.proreferit-page .compare-card .tag {
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .02em;
  margin-bottom: .6em;
  display: block;
}

.proreferit-page .compare-card.before .tag {
  color: #8A6E33;
}

.proreferit-page .compare-card.after .tag {
  color: #D9F0D6;
}

.proreferit-page .compare-card p {
  font-size: .98rem;
}

.proreferit-page .compare-card.before p {
  color: #5F5334;
}

.proreferit-page .compare-card.after p {
  color: #EAF6E8;
}

/* PROEVENT: Teilnehmer-Streifen */
.proreferit-page .audience {
  background: #EAF1F8;
}

.proreferit-page .audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.proreferit-page .audience-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
}

.proreferit-page .audience-card .tag {
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  font-size: .8rem;
  color: var(--accent-dark);
  letter-spacing: .02em;
  margin-bottom: .5em;
  display: block;
}

.proreferit-page .audience-card p {
  color: var(--muted);
  margin: 0;
  font-size: .96rem;
}

/* START: hohe Hero mit überlappender Kartenreihe darunter */
.proreferit-page.pr-start .hero {
  padding: 76px 0 200px;
  position: relative;
  overflow: hidden;
}

.proreferit-page.pr-start .hero .wrap {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.proreferit-page.pr-start .hero p.lead {
  max-width: 52ch;
}

/* START: drei Module als überlappende Kartenreihe */
.proreferit-page .modules {
  margin-top: -160px;
  padding-bottom: 60px;
  position: relative;
  z-index: 2;
}

.proreferit-page .module-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.proreferit-page .module-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 30px 28px 28px;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(20, 40, 60, .12);
  display: flex;
  flex-direction: column;
}

.proreferit-page .module-card .icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.proreferit-page .module-card .icon svg {
  width: 26px;
  height: 26px;
}

.proreferit-page .module-card.c-green .icon {
  background: var(--green-bg);
  color: var(--green-dark);
}

.proreferit-page .module-card.c-orange .icon {
  background: var(--orange-bg);
  color: var(--orange-dark);
}

.proreferit-page .module-card.c-blue .icon {
  background: var(--blue-bg);
  color: var(--blue-dark);
}

.proreferit-page .module-card .eyebrow {
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .03em;
  margin-bottom: .4em;
}

.proreferit-page .module-card.c-green .eyebrow {
  color: var(--green-dark);
}

.proreferit-page .module-card.c-orange .eyebrow {
  color: var(--orange-dark);
}

.proreferit-page .module-card.c-blue .eyebrow {
  color: var(--blue-dark);
}

.proreferit-page .module-card h3 {
  margin-bottom: .4em;
}

.proreferit-page .module-card p.desc {
  color: var(--muted);
  font-size: .96rem;
  margin-bottom: 1.2em;
}

.proreferit-page .module-card ul {
  list-style: none;
  margin: 0 0 1.4em;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55em;
}

.proreferit-page .module-card li {
  display: flex;
  gap: .6em;
  font-size: .92rem;
  color: var(--ink);
  align-items: flex-start;
}

.proreferit-page .module-card li svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: .2em;
}

.proreferit-page .module-card.c-green li svg {
  color: var(--green);
}

.proreferit-page .module-card.c-orange li svg {
  color: var(--orange);
}

.proreferit-page .module-card.c-blue li svg {
  color: var(--blue);
}

.proreferit-page .link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-family: 'Arial', sans-serif;
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
}

.proreferit-page .link-arrow svg {
  width: 16px;
  height: 16px;
  transition: transform .15s ease;
}

.proreferit-page .link-arrow:hover svg {
  transform: translateX(3px);
}

.proreferit-page .module-card .link-arrow {
  margin-top: auto;
}

.proreferit-page .module-card.c-green .link-arrow {
  color: var(--green-dark);
}

.proreferit-page .module-card.c-orange .link-arrow {
  color: var(--orange-dark);
}

.proreferit-page .module-card.c-blue .link-arrow {
  color: var(--blue-dark);
}

/* START: "Ein Login, drei Bausteine" – vierstufige Sequenz wie .flow, eigener Klassenname */
.proreferit-page .together {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.proreferit-page .together-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.proreferit-page .together-step {
  position: relative;
  padding: 8px 26px 8px 0;
}

.proreferit-page .together-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--line);
  border-right: 2px solid var(--line);
  transform: rotate(45deg);
}

.proreferit-page .together-num {
  font-family: 'Arial', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--navy);
  margin-bottom: .3em;
}

.proreferit-page .together-step h3 {
  font-size: 1rem;
  margin-bottom: .3em;
}

.proreferit-page .together-step p {
  color: var(--muted);
  font-size: .9rem;
  margin: 0;
}

/* START: Lizenzband */
.proreferit-page .plans {
  background: #EFF4F1;
}

.proreferit-page .plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.proreferit-page .plan-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}

.proreferit-page .plan-card .name {
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  margin-bottom: .35em;
}

.proreferit-page .plan-card .name span {
  color: var(--green-dark);
}

.proreferit-page .plan-card p {
  color: var(--muted);
  font-size: .92rem;
  margin: 0;
}

.proreferit-page .plan-card.hi {
  border-color: var(--green);
  box-shadow: 0 10px 24px rgba(63, 145, 66, .14);
}


/* Ergänzung zur user.css: nur Elemente, die in der Startseite fehlen. Nach user.css einbinden. */

/* Text links, Bild rechts */
.proreferit-page .split{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;}
.proreferit-page .split img{border-radius:var(--radius);border:1px solid var(--line);box-shadow:0 18px 40px rgba(20,40,60,.12);}

/* Häkchenliste außerhalb der Modulkarten */
.proreferit-page .check-list{list-style:none;margin:0 0 1.4em;padding:0;display:flex;flex-direction:column;gap:.6em;}
.proreferit-page .check-list li{display:flex;gap:.6em;align-items:flex-start;font-size:.96rem;}
.proreferit-page .check-list li svg{width:16px;height:16px;flex-shrink:0;margin-top:.25em;color:var(--green);}





/* Für Lizenzseite */
 /* Grunddesign für den Container */
        .pricing-container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: stretch;
            gap: 8px;
            /* max-width: 1200px; */
            margin: 40px auto;
            padding: 0 0px;
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            font-family: 'Arial', Roboto, Helvetica, Arial, sans-serif;
            color: #333333;
        }

        /* Gemeinsames Design für alle Karten */
        .pricing-card {
            flex: 1;
            background: #ffffff;
            /* background-color: chartreuse; */
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            position: relative;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
          }

        .pricing-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
        }

        /* Optische Hervorhebung für das empfohlene Paket (Plus) */
        .pricing-card.featured {
            /* border: 2px solid #0056b3; */
            box-shadow: 0 8px 16px rgba(0, 86, 179, 0.15);
        }

        .pricing-card.featured:hover {
            box-shadow: 0 16px 28px rgba(0, 86, 179, 0.25);
        }

        /* Badge für die Empfehlung */
        .pricing-card .badge {
            position: absolute;
            top: -14px;
            left: 50%;
            transform: translateX(-50%);
            background: #0056b3;
            color: #ffffff;
            padding: 4px 16px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: bold;
            /* text-transform: uppercase; */
            letter-spacing: 0.5px;
        }

        /* Typografie innerhalb der Karten */
        .pricing-card h2 {
            font-size: 1.6rem;
            margin: 10px 0 5px 0;
            text-align: center;
            color: #111111;
        }

        .pricing-card .tagline {
            font-size: 0.95rem;
            color: #666666;
            text-align: center;
            margin-bottom: 20px;
            min-height: 40px;
            /* Hält die Ausrichtung bei unterschiedlichen Textlängen stabil */
        }

        .pricing-card .price {
            font-size: 2rem;
            font-weight: bold;
            text-align: center;
            color: #0056b3;
            /* margin-bottom: 5px; */
                        min-height: 70px;

        }

        .pricing-card.basic .price {
            color: #28a745;
            min-height: 90px;
            /* Grün für das kostenlose Paket */
        }

        .pricing-card .period {
            font-size: 1rem;
            font-weight: normal;
            color: #666666;
        }

        .pricing-card .terms,
        .pricing-card .comission {
            font-size: 0.8rem;
            color: #777777;
            text-align: center;
            margin: 4px 0;
            line-height: 1.3;
        }

        .pricing-card .comission {
            font-weight: 600;
            color: #333333;
            margin-bottom: 25px;
        }

        /* Feature-Gruppen und Listen */
        .features-group {
            margin-bottom: 20px;
            border-top: 1px dashed #e5e5e5;
            padding-top: 15px;
            padding-left: 8px;
            padding-right: 8px;
        }

        .features-group h3 {
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #888888;
            margin-bottom: 10px;
        }

        .features-group ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .features-group li {
            font-size: 0.9rem;
            line-height: 1.4;
            margin-bottom: 8px;
            position: relative;
            padding-left: 20px;
        }

        /* Häkchen vor den Features */
        .features-group li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #28a745;
            font-weight: bold;
        }

        /* Call to Action Container & Buttons */
        .cta-container {
            margin-top: auto;
            /* Schiebt den Button immer ganz nach unten, falls Listen ungleich lang sind */
            padding-top: 20px;
        }

        .btn {
            display: block;
            text-align: center;
            padding: 14px 20px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: bold;
            font-size: 1rem;
            transition: background 0.2s ease, transform 0.1s ease;
        }

        .btn:active {
            transform: scale(0.98);
        }

        .btn-basic {
            background: #e9ecef;
            color: #495057;
        }

        .btn-basic:hover {
            background: #dee2e6;
        }

        .btn-plus {
            background: #0056b3;
            color: #ffffff;
        }

        .btn-plus:hover {
            background: #004085;
        }

        .btn-pro {
            background: #111111;
            color: #ffffff;
        }

        .btn-pro:hover {
            background: #222222;
        }

/* Ende Lizenzseite */




/* Ergänzung zur user.css für Rechtstexte (Datenschutz, AGB, ...).
   Seite mit <div class="proreferit-page pr-legal"> umschließen. Nach user.css einbinden. */

/* Modifier: grüne Leitfarbe wie auf der Startseite */
.pr-legal {
  --accent: var(--green);
  --accent-dark: var(--green-dark);
  --eyebrow-color: #9FD79C;
  --bg: #F5F7F6;
  --line: #E3E9E6;
  --radius: 16px;
}

/* Kompakter Kopf */
.proreferit-page.pr-legal .hero { padding: 56px 0 48px; }
.proreferit-page.pr-legal .hero p.lead { margin-bottom: 0; }

/* Lesebreite */
.proreferit-page.pr-legal section.legal { padding: 48px 0 72px; }
.proreferit-page.pr-legal .legal .wrap { max-width: 900px; }

/* Inhaltsverzeichnis */
.proreferit-page .legal-toc {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 40px;
  box-shadow: 0 10px 26px rgba(20, 40, 60, .06);
}
.proreferit-page .legal-toc h2 { font-size: 1.1rem; margin: 0 0 .6em; }
.proreferit-page .legal-toc ol { margin: 0; padding-left: 1.4em; columns: 2; column-gap: 40px; }
.proreferit-page .legal-toc li { margin-bottom: .45em; break-inside: avoid; font-size: .95rem; }
.proreferit-page .legal-toc a { color: var(--navy); text-decoration: none; }
.proreferit-page .legal-toc a:hover { color: var(--accent-dark); text-decoration: underline; }

/* Fließtext */
.proreferit-page .legal-text { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px 44px; }
.proreferit-page .legal-text h2 {
  font-size: 1.35rem;
  margin: 2.2em 0 .7em;
  padding-top: 1.2em;
  border-top: 1px solid var(--line);
  scroll-margin-top: 90px;
}
.proreferit-page .legal-text h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.proreferit-page .legal-text h3 { font-size: 1.05rem; margin: 1.6em 0 .6em; color: var(--accent-dark); }
.proreferit-page .legal-text p { text-align: left; hyphens: auto; }
.proreferit-page .legal-text a { color: var(--accent-dark); }
.proreferit-page .legal-text a:hover { text-decoration: none; }

/* Einrückung für Unterpunkte (B-Block, Rechte a) bis h)) */
.proreferit-page .legal-indent { border-left: 3px solid var(--line); padding-left: 20px; margin: 0 0 1em; }

/* Adressblöcke */
.proreferit-page .legal-address {
  font-style: normal;
  background: var(--bg);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 0 0 1em;
  line-height: 1.7;
}
.proreferit-page .legal-address strong { display: block; color: var(--navy); }

/* Listen */
.proreferit-page .legal-list { margin: 0 0 1.1em; padding-left: 1.3em; }
.proreferit-page .legal-list li { margin-bottom: .45em; }
.proreferit-page .legal-ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.proreferit-page .legal-ol > li { margin-bottom: .8em; }






/* Für Registrierung: */
.pr-register .register-box { max-width: 520px; margin: 0 auto; }
      .pr-register .field { display: block; margin: 0 0 1.1em; }
      .pr-register .field > span { display: block; font-weight: 600; margin: 0 0 .35em; }
      .pr-register .field input[type="text"],
      .pr-register .field input[type="email"],
      .pr-register .field input[type="password"] {
        width: 100%; box-sizing: border-box; padding: .75em .9em; font: inherit;
        border: 1px solid var(--pr-border, #c5cdd8); border-radius: 8px; background: #fff; color: inherit;
      }
      .pr-register .field input:focus { outline: 2px solid var(--pr-focus, #1f6feb); outline-offset: 1px; }
      .pr-register .field input.invalid { border-color: #c0392b; }
      .pr-register .hint { display: block; font-size: .85em; opacity: .75; margin-top: .3em; }
      .pr-register .consent { display: flex; gap: .6em; align-items: flex-start; margin: 0 0 .8em; font-size: .95em; }
      .pr-register .consent input { margin-top: .3em; flex: none; }
      .pr-register .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
      .pr-register .form-msg { display: none; padding: .8em 1em; border-radius: 8px; margin: 0 0 1.2em; }
      .pr-register .form-msg.error { display: block; background: #fdecea; color: #7a1c13; border: 1px solid #f5c2bd; }
      .pr-register .form-msg.ok { display: block; background: #e8f6ee; color: #14532d; border: 1px solid #b7e2c7; }
      .pr-register .actions { margin-top: 1.4em; text-align: center; }
      .pr-register .actions button[disabled] { opacity: .6; cursor: progress; }
      .pr-register .signin { text-align: center; margin-top: 1.4em; }
      .pr-register .success-panel { display: none; text-align: center; padding: 1em 0; }







/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */

/* Für Lizenzseite */
     @media (max-width: 992px) {
            .pricing-container {
                flex-direction: column;
                align-items: center;
            }

            .pricing-card {
                width: 100%;
                max-width: 450px;
                margin-bottom: 20px;
            }

            .pricing-card .badge {
                top: -12px;
            }
        }

/* Ende Lizenzseite */



@media(max-width:900px){
  .proreferit-page .split{grid-template-columns:1fr;gap:32px;}
}   


@media(max-width:860px) {
  .proreferit-page .hero-grid {
    grid-template-columns: 1fr;
  }

  .proreferit-page .problem-grid {
    grid-template-columns: 1fr;
  }

  .proreferit-page .problem-item {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 22px 0;
  }

  .proreferit-page .problem-item:last-child {
    border-bottom: none;
  }

  .proreferit-page .flow-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 28px;
  }

  .proreferit-page .flow-step:nth-child(2)::after {
    display: none;
  }

  .proreferit-page .compare-grid {
    grid-template-columns: 1fr;
  }

  .proreferit-page .audience-grid {
    grid-template-columns: 1fr;
  }

  .proreferit-page .module-grid {
    grid-template-columns: 1fr;
  }

  .proreferit-page .modules {
    margin-top: -120px;
  }

  .proreferit-page .together-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 28px;
  }

  .proreferit-page .together-step:nth-child(2)::after {
    display: none;
  }

  .proreferit-page .plans-grid {
    grid-template-columns: 1fr;
  }

  .site-nav {
    display: none;
  }
}

.site-header { display:flex; justify-content:space-between; align-items:center; padding:12px 20px; position:relative; }
.burger { display:none; background:none; border:0; cursor:pointer; width:32px; height:26px; position:relative; }
.burger span { display:block; height:3px; background:#222; margin:5px 0; transition:.3s; }
.mainnav ul { display:flex; gap:24px; list-style:none; margin:0; padding:0; }




@media (max-width:2768px) {
  .burger { display:block; }
  .mainnav { display:none; position:absolute; top:100%; left:0; right:0; background:#fff; box-shadow:0 8px 16px rgba(0,0,0,.15); }
  .mainnav.open { display:block; }
  .mainnav ul { flex-direction:column; gap:0; }
  .mainnav a { display:block; padding:14px 20px; border-top:1px solid #eee; }

  /* Burger -> X */
  .burger.open span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
  .burger.open span:nth-child(2) { opacity:0; }
  .burger.open span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
}



@media (max-width: 700px) {
  .proreferit-page .legal-toc ol { columns: 1; }
  .proreferit-page .legal-text { padding: 26px 20px; }
}



@media(max-width:520px) {
  .proreferit-page .flow-grid {
    grid-template-columns: 1fr;
  }

  .proreferit-page .flow-step::after {
    display: none;
  }

  .proreferit-page .benefit-row {
    grid-template-columns: 44px 1fr;
  }

  .proreferit-page .together-grid {
    grid-template-columns: 1fr;
  }

  .proreferit-page .together-step::after {
    display: none;
  }

  .proreferit-page.pr-start .hero {
    padding-bottom: 170px;
  }
}