/* =================================================================
   Mietrechts Law Clinic – Stylesheet
   Farben exakt aus dem Logo (Mietrechts_Lawclinic_Logo.svg) uebernommen:
   Lila #8634B5 / Gruen #9DEB49
   ================================================================= */

:root{
  --purple:        #8634B5;
  --purple-ink:     #4E1D6C;   /* dunklere Variante fuer Text auf Gruen/Hell */
  --green:         #9DEB49;
  --green-ink:      #2E4A12;   /* dunklere Variante fuer Text auf Hell, kontraststark (AA) */
  --ink:           #201A26;   /* Fliesstext */
  --paper:         #FBF9FD;   /* Hintergrund */
  --paper-alt:      #F3EEF8;
  --muted:         #6E6478;   /* Sekundaertext */
  --line:          #E4DEEA;   /* Trennlinien */
  --focus:         #2A5DB0;   /* gut sichtbarer Fokusring, unabhaengig vom Markendesign */

  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body:    'Source Sans 3', 'Segoe UI', sans-serif;

  --radius: 18px;
  --maxw: 1180px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
}

/* Sprachspezifische Schriften (Arabisch) */
html[lang="ar"]{
  --font-display: 'Cairo', 'Segoe UI', sans-serif;
  --font-body: 'Noto Sans Arabic', 'Segoe UI', sans-serif;
}

/* ---------- Barrierefreier Modus: nur Schwarz/Weiss, hoher Kontrast ---------- */
html.a11y{
  --purple: #000000;
  --purple-ink: #000000;
  --green: #000000;
  --green-ink: #000000;
  --ink: #000000;
  --paper: #FFFFFF;
  --paper-alt: #FFFFFF;
  --muted: #000000;
  --line: #000000;
  --focus: #000000;
}
html.a11y{ font-size: 112%; }
html.a11y *{ letter-spacing: 0.01em; }
html.a11y a{ text-decoration: underline; text-underline-offset: 3px; }
html.a11y img, html.a11y .deco-shape, html.a11y .hero-graphic{ display:none !important; }
html.a11y .split-half{ border: 3px solid #000 !important; }

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 700;
}
p{ margin: 0 0 1em; max-width: 62ch; }
a{ color: var(--purple-ink); }
html.a11y a{ color:#000; }
img{ max-width:100%; display:block; }
button{ font-family: inherit; }

:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

.container{
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* ================= Kopfzeile ================= */
.site-header{
  position: sticky; top:0; z-index: 40;
  background: rgba(251,249,253,.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
html.a11y .site-header{ background:#fff; }
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  gap: 1rem; padding-block: .6rem;
}
.brand{
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none; color: var(--ink);
  font-family: var(--font-display); font-weight:700; font-size:1.05rem;
}
.brand img{ width:38px; height:38px; border-radius:50%; }
.brand span{ max-width: 22ch; }

.header-tools{ display:flex; align-items:center; gap:.5rem; }

.tool-btn{
  border:1px solid var(--line); background:transparent; color:var(--ink);
  border-radius: 999px; padding:.45rem .9rem; font-size:.85rem;
  cursor:pointer; display:flex; align-items:center; gap:.4rem;
}
.tool-btn:hover{ border-color: var(--purple); }
.tool-btn svg{ width:16px; height:16px; flex:none; }

.lang-menu{ position:relative; }
.lang-list{
  position:absolute; inset-inline-end:0; top:calc(100% + .5rem);
  background:#fff; border:1px solid var(--line); border-radius:12px;
  min-width:180px; padding:.35rem; display:none; box-shadow:0 12px 30px rgba(32,26,38,.14);
}
.lang-menu.open .lang-list{ display:block; }
.lang-list button{
  display:block; width:100%; text-align:start; background:none; border:0;
  padding:.5rem .7rem; border-radius:8px; cursor:pointer; font-size:.9rem; color:var(--ink);
}
.lang-list button:hover, .lang-list button[aria-current="true"]{ background: var(--paper-alt); }

/* Hinweis: das Ein-/Ausblenden des .site-header auf der Startseite
   uebernimmt main.js (showRoute), da CSS-Geschwister-Selektoren von der
   DOM-Reihenfolge abhaengen wuerden. */

/* ================= Router: nur die aktive Section zeigen ================= */
main > section{ display:none; }
main > section.active{ display:block; }

/* ================= Startseite: Split Screen ================= */
.split{
  min-height: 100dvh;
  display:flex;
  flex-direction: row;
}
html[dir="rtl"] .split{ flex-direction: row-reverse; }
@media (max-width: 760px){
  .split{ flex-direction: column; min-height: auto; }
}

.split-half{
  flex: 1;
  position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: clamp(1.75rem, 6vw, 4.5rem);
  min-height: 100dvh;
  text-decoration:none;
  transition: flex-grow .35s ease;
  overflow:hidden;
}
@media (max-width: 760px){
  .split-half{ min-height: 62vh; padding: 2.25rem; }
}
.split-half:hover, .split-half:focus-visible{ flex-grow: 1.18; }

.split-half.is-students{ background: var(--purple); color:#fff; }
.split-half.is-seekers{ background: var(--green); color: var(--green-ink); }
html.a11y .split-half.is-students,
html.a11y .split-half.is-seekers{ background:#fff; color:#000; }

.split-eyebrow{
  font-family: var(--font-body); font-weight:600; font-size:.95rem;
  opacity:.85; margin-bottom:.6rem;
}
.split-half h2{
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  max-width: 14ch;
}
.split-half p{ opacity:.92; max-width: 40ch; }
.split-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:1rem; font-weight:600;
}
.split-cta svg{ width:20px; height:20px; transition: transform .2s ease; }
html[dir="rtl"] .split-cta svg{ transform: scaleX(-1); }
.split-half:hover .split-cta svg{ transform: translateX(4px); }
html[dir="rtl"] .split-half:hover .split-cta svg{ transform: translateX(-4px) scaleX(-1); }

.split-mark{
  position:absolute; inset-inline-end: -40px; top: -40px;
  width: 260px; height:260px; opacity:.15; pointer-events:none;
}

.home-toolbar{
  position:absolute; top: 1.1rem; inset-inline-end: 1.1rem; z-index:5;
  display:flex; gap:.5rem;
}
.home-toolbar .tool-btn{ background:rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); color:#fff; }
@media (max-width:760px){ .home-toolbar{ position:static; margin-bottom:1rem; justify-content:flex-end; } }

/* ================= Unterseiten-Layout ================= */
.page{ padding-block: clamp(2rem, 5vw, 3.5rem) 5rem; }
.page-head{ margin-bottom: 2rem; }
.page-head .kicker{ color: var(--muted); font-weight:600; margin-bottom:.3rem; display:block; }
.page-head h1{ font-size: clamp(1.8rem, 3.6vw, 2.6rem); max-width: 20ch; }
.lede{ font-size:1.1rem; color:var(--muted); max-width: 60ch; }
html.a11y .lede{ color:#000; }

.tabbar{
  display:flex; flex-wrap:wrap; gap:.3rem; border-bottom:1px solid var(--line);
  margin-bottom: 2.25rem;
}
.tabbar a{
  text-decoration:none; color:var(--muted); font-weight:600; font-size:.95rem;
  padding: .7rem .2rem; margin-inline-end: 1.6rem; border-bottom:3px solid transparent;
}
.tabbar a.active{ color: var(--ink); border-color: var(--green-ink); }
html.a11y .tabbar a.active{ border-color:#000; }

.content-grid{
  display:grid; grid-template-columns: 1.4fr 1fr; gap: var(--gap);
  align-items:start;
}
@media (max-width: 860px){ .content-grid{ grid-template-columns: 1fr; } }

.card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
}
.card + .card{ margin-top: 1.2rem; }
.card h3{ font-size:1.15rem; }

.icon-row{ display:flex; gap:.7rem; align-items:flex-start; }
.icon-row svg{ width:26px; height:26px; flex:none; margin-top:.15rem; color: var(--purple-ink); }
html.a11y .icon-row svg{ color:#000; }

.link-list{ list-style:none; margin:0; padding:0; }
.link-list li{ margin-bottom:.6rem; }
.link-list a{ font-weight:600; }

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--purple); color:#fff; text-decoration:none;
  padding:.75rem 1.3rem; border-radius:999px; font-weight:600; border:none; cursor:pointer;
  font-size:1rem;
}
.btn:hover{ background: var(--purple-ink); }
.btn.btn-green{ background: var(--green); color: var(--green-ink); }
.btn.btn-green:hover{ background:#87d431; }
html.a11y .btn{ background:#000; color:#fff; border:2px solid #000; }
html.a11y .btn.btn-green{ background:#fff; color:#000; }

.note{
  border-inline-start: 4px solid var(--green); background: var(--paper-alt);
  padding: 1rem 1.2rem; border-radius: 0 12px 12px 0; font-size:.95rem; color:var(--muted);
}
html.a11y .note{ border-color:#000; background:#fff; color:#000; border:2px solid #000; }

/* ================= Formular ================= */
.form-grid{ display:grid; gap:1.1rem; max-width: 46rem; }
.field label{ display:block; font-weight:600; margin-bottom:.35rem; font-size:.95rem; }
.field .hint{ display:block; color:var(--muted); font-size:.85rem; margin-bottom:.4rem; }
.field input, .field textarea{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:.7rem .8rem;
  font: inherit; background:#fff; color: var(--ink);
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus, .field textarea:focus{ border-color: var(--purple); }
.required-mark{ color: var(--purple-ink); }
.honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status{ font-weight:600; padding:.8rem 1rem; border-radius:10px; display:none; }
.form-status.show{ display:block; }
.form-status.ok{ background:#eaf7de; color: var(--green-ink); }
.form-status.err{ background:#fbe7e7; color:#8a2323; }

/* ================= Footer ================= */
.site-footer{
  border-top:1px solid var(--line); padding-block: 2.5rem; margin-top: 3rem;
  color: var(--muted); font-size:.9rem;
}
html.a11y .site-footer{ color:#000; }
.site-footer .container{
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:center;
}
.site-footer a{ color: inherit; text-decoration:underline; text-underline-offset:3px; }
.footer-brand{ display:flex; align-items:center; gap:.5rem; }
.footer-brand img{ width:26px; height:26px; border-radius:50%; }

/* Deko-Grafik (frei/eigen erstellt, keine Fremdbilder) */
.deco-shape{ position:absolute; z-index:-1; opacity:.5; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; scroll-behavior:auto !important; animation:none !important; }
}