/* benediktbreuer.de — Visitenkarten-Seite (Übergang bis zum Astro-Neubau in
   website/). Aufbau wie website-breuer-software/, Farben aus dem Blau des
   Neubaus. Ein einziges Stylesheet, keine externen Requests (keine Google
   Fonts, kein Tracking) — das hält die Datenschutzerklärung kurz. */

:root {
  --ink: #0e2a47;
  --ink-2: #1b4775;
  --paper: #f2f7ff;
  --line: #d6e3f3;
  --text: #33404f;
  --muted: #677789;
  --muted-dark: #9fb6d0;
  --accent: #7db3ea;
  --accent-dark: #2c629c;
  --accent-hover: #1f4c7c;
  --schraege: 7rem; /* waagerechter Versatz der diagonalen Trennkante */
  --radius: 14px;
  --dauer: 0.75s; /* muss zu DAUER im Script in index.html passen */
  --kurve: cubic-bezier(0.77, 0, 0.18, 1);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
}

a { color: var(--accent-dark); }
a:hover { color: var(--ink); }

/* ── Startseite: drei Spalten auf einer Schiene ─────────────────────────────
   Die Seite ist eine waagerechte Schiene aus dunkler Spalte, Projekten und
   Detailspalte, von der im Ruhezustand nur die ersten beiden sichtbar sind.
   Öffnet sich ein Projekt (.offen), fährt die Schiene nach links: Vom dunklen
   Block bleibt nur der Keil der Schräge, die Projekte rücken in die Mitte, die
   Details erscheinen rechts.

   Breiten in cqw (Prozent der Breite von .buehne, ohne Scrollbalken):
     dunkel  = 50 + Schräge/2   Projekte = 50   Details = 50 − Schräge
   Verschiebung um 50 − Schräge/2 → die dunkle Kante läuft danach von
   „Schräge“ oben nach 0 unten, und die Details füllen genau den Rest. */

.buehne {
  container-type: inline-size;
  overflow: hidden;
  overflow: clip; /* clip statt hidden: kein Scroll-Container, sticky greift */
}

.split {
  display: grid;
  grid-template-columns:
    calc(50cqw + var(--schraege) / 2)
    50cqw
    calc(50cqw - var(--schraege));
  min-height: 100vh;
  min-height: 100svh;
  background: var(--paper);
  transition: transform var(--dauer) var(--kurve);
}

.split.offen,
html:not(.js) .split:has(.detail:target) {
  transform: translateX(calc(-50cqw + var(--schraege) / 2));
}

.split.ohne-animation,
.split.ohne-animation * { transition: none !important; animation: none !important; }

.half {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 6vw, 5.5rem);
}

.half--dark {
  background: var(--ink);
  background-image: radial-gradient(
    120% 100% at 0% 0%,
    var(--ink-2) 0%,
    var(--ink) 58%
  );
  color: #dde7f2;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--schraege)) 100%, 0 100%);
  /* Text aus der Schräge heraushalten */
  padding-right: calc(clamp(2.5rem, 6vw, 5.5rem) + var(--schraege) * 0.75);
}

.half--light { background: transparent; }

.inner { width: 100%; max-width: 32rem; margin-inline: auto; }

/* ── Wortmarke ──────────────────────────────────────────────────────────── */

.mark {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

/* ── Typografie ─────────────────────────────────────────────────────────── */

.kicker {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.half--light .kicker { color: var(--accent-dark); }

h1 {
  margin: 2.5rem 0 1.25rem;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #fff;
}

.lead { font-size: 1.05rem; color: #c6d5e6; }
.lead strong { color: #fff; font-weight: 600; }

/* ── Person: Foto, Begrüßung, Terminbuchung ─────────────────────────────── */

.person {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.person__foto {
  width: 4.75rem;
  height: 4.75rem;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 5px rgba(125, 179, 234, 0.25), 0 10px 24px rgba(0, 0, 0, 0.3);
}

.person__rolle {
  display: block;
  font-size: 0.88rem;
  color: var(--muted-dark);
}

.half--dark h1 { margin-top: 2rem; }

.termin-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.1rem;
  margin-top: 2rem;
}

/* .btn.btn--hell: doppelte Klasse, weil .btn erst weiter unten definiert ist */
.btn.btn--hell {
  padding: 0.85rem 1.4rem;
  font-size: 0.98rem;
  background: #fff;
  border-color: #fff;
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.btn.btn--hell:hover { background: #e6f0fb; border-color: #e6f0fb; color: var(--ink); }

.termin-cta small { font-size: 0.85rem; color: var(--muted-dark); }

.kalender__hinweis { font-size: 0.82rem !important; color: var(--muted); }

/* ── Kontaktblock ───────────────────────────────────────────────────────── */

.kontakt {
  margin: 2.5rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--muted-dark);
}

.kontakt a { color: #dde7f2; text-decoration-color: rgba(221, 231, 242, 0.4); }
.kontakt a:hover { color: var(--accent); }

.rechtliches {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.rechtliches a { color: var(--muted-dark); text-decoration: none; }
.rechtliches a:hover { color: var(--accent); text-decoration: underline; }
.rechtliches span { margin: 0 0.6rem; opacity: 0.4; }

/* ── Projektkarten ──────────────────────────────────────────────────────────
   Drei kompakte Karten untereinander; die ganze Karte ist der Link. Ist ein
   Projekt geöffnet, bleibt die Liste sichtbar und markiert das aktive. */

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

.projekt {
  position: relative;
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(14, 42, 71, 0.05);
  transition: border-color 0.18s ease, transform 0.18s ease,
    box-shadow 0.18s ease, opacity 0.3s ease;
}

.projekt:hover,
.projekt:focus-within {
  border-color: #b5cdea;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(14, 42, 71, 0.1);
}

.projekt.ist-aktiv {
  border-color: var(--accent-dark);
  box-shadow: 0 0 0 1px var(--accent-dark), 0 8px 22px rgba(14, 42, 71, 0.12);
}

.offen .projekt:not(.ist-aktiv) { opacity: 0.72; }
.offen .projekt:not(.ist-aktiv):hover { opacity: 1; }

.projekt__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: #fff;
  object-fit: contain;
  display: block;
  flex: none;
}

.projekt__titel {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Link über die ganze Karte strecken, ohne die Karte in ein <a> zu packen */
.projekt__titel a { color: inherit; text-decoration: none; }
.projekt__titel a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.projekt__titel a:focus-visible { outline: none; }
.projekt:has(a:focus-visible) { outline: 2px solid var(--accent-dark); outline-offset: 2px; }

.projekt__typ {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.projekt p { margin: 0.5rem 0 0; font-size: 0.93rem; line-height: 1.55; }

.projekt__pfeil {
  margin-left: auto;
  align-self: center;
  flex: none;
  color: var(--accent-dark);
  font-weight: 600;
  transition: transform 0.18s ease;
}

.projekt:hover .projekt__pfeil,
.projekt.ist-aktiv .projekt__pfeil { transform: translateX(3px); }

/* ── Kennzahlen ─────────────────────────────────────────────────────────── */

.kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 1.5rem 0 0;
  padding: 0;
}

.kpis div {
  padding: 1rem 0.75rem 0.9rem;
  border: 1px dashed #bcd0e8;
  border-radius: var(--radius);
  text-align: center;
}

.kpis dt {
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--muted);
}

.kpis dd {
  order: -1;
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.kpis div { display: flex; flex-direction: column; gap: 0.2rem; }

/* ── Detailspalte ───────────────────────────────────────────────────────────
   Eigene Spalte rechts auf der Schiene. Sie ist höchstens so hoch wie das
   Fenster und scrollt bei langen Inhalten in sich — so bleibt die Seite beim
   Öffnen ruhig, und die Projektliste daneben verrutscht nicht. */

.half--detail {
  position: sticky;
  top: 0;
  justify-content: flex-start;
  max-height: 100vh;
  max-height: 100svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(2rem, 4vw, 4rem) clamp(1.75rem, 3.5vw, 3.5rem);
  background: #fff;
  box-shadow: -1px 0 0 var(--line), -24px 0 48px rgba(14, 42, 71, 0.06);
}

.half--detail .inner { max-width: 36rem; margin-block: auto; }

.detail { display: none; }

.detail.aktiv,
html:not(.js) .detail:target {
  display: block;
  animation: einblenden 0.5s 0.28s var(--kurve) both;
}

/* Wechsel zwischen zwei Projekten bei schon offener Spalte: sofort */
.offen .detail.wechsel { animation-delay: 0s; animation-duration: 0.35s; }

@keyframes einblenden {
  from { opacity: 0; transform: translateX(1.5rem); }
  to { opacity: 1; transform: none; }
}

.detail__zurueck {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent-dark);
}
.detail__zurueck:hover { color: var(--ink); }

.detail__kopf {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.25rem;
}

.detail__titel {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.detail__titel:focus { outline: none; }

/* Screenshots: Geräte-Mockups (transparente PNGs) auf hellem Grund … */
.detail__bild {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1rem 0.75rem;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #e3eefb 0%, var(--paper) 100%);
}
.detail__bild img { display: block; width: 100%; height: auto; }

.detail p { margin: 0 0 1.1rem; font-size: 0.98rem; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.status::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #2f9e6b;
  box-shadow: 0 0 0 3px rgba(47, 158, 107, 0.18);
}

/* ── Terminbuchung (Detailspalte #termin) ───────────────────────────────────
   Der TidyCal-Kalender wird erst nach einem Klick geladen (Datenschutz). */

.detail__kopf .person__foto {
  width: 3.5rem;
  height: 3.5rem;
  border: 0;
  box-shadow: 0 0 0 1px var(--line);
}

.kalender {
  margin: 1.5rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.kalender__start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.5rem;
}

.kalender__start p { margin: 0 !important; font-size: 0.85rem !important; color: var(--muted); }

.kalender.geladen { background: #fff; min-height: 38rem; }
.kalender.geladen .kalender__start { display: none; }

.tidycal-embed { min-height: 38rem; }

.detail__lead { color: var(--ink); font-size: 1.02rem !important; }

.detail__fakten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 1.5rem 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.detail__fakten div { padding: 0.75rem 1rem; background: #fff; }
.detail__fakten dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.detail__fakten dd { margin: 0.15rem 0 0; font-size: 0.92rem; line-height: 1.45; color: var(--ink); }

/* ungerade Anzahl Fakten: letzter Eintrag über die volle Breite */
.detail__fakten div:last-child:nth-child(odd) { grid-column: 1 / -1; }

.detail__liste {
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}

.detail__liste li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.45rem;
}

.detail__liste li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.62em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
}

.detail__links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 !important; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.2rem;
  border: 1px solid var(--accent-dark);
  border-radius: 9px;
  background: var(--accent-dark);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }

.btn--leise { background: #fff; color: var(--accent-dark); border-color: var(--line); }
.btn--leise:hover { background: #fff; color: var(--ink); border-color: var(--accent-dark); }

/* ── Unterseiten ────────────────────────────────────────────────────────── */

.seite {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem 5rem;
}

.seite__kopf {
  padding-bottom: 2rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
}

.seite .mark { color: var(--ink); }

.seite h1 {
  margin: 1.5rem 0 0;
  color: var(--ink);
  font-size: clamp(1.9rem, 4vw, 2.4rem);
}

.seite h2 {
  margin: 2.75rem 0 0.75rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.seite p, .seite ul { margin: 0 0 1.1rem; font-size: 1rem; }
.seite ul { padding-left: 1.25rem; }
.seite li { margin-bottom: 0.4rem; }

.zurueck {
  display: inline-block;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  width: 100%;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--muted);
}
.zurueck:hover { color: var(--accent-dark); }

/* ── Schmale Viewports ──────────────────────────────────────────────────────
   Gestapelt gibt es keine Schiene: dunkler Block, Projekte und — sobald ein
   Projekt offen ist — die Details darunter. Die Diagonale trennt oben/unten. */

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    min-height: 0;
    transition: none;
  }
  .split.offen,
  html:not(.js) .split:has(.detail:target) { transform: none; }

  .half { padding: 3rem 1.5rem; }
  .half--dark {
    padding: 3.5rem 1.5rem 5rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%);
  }
  .inner { max-width: 34rem; }

  .half--detail {
    display: none;
    position: static;
    max-height: none;
    overflow: visible;
    padding: 2.5rem 1.5rem 3.5rem;
    box-shadow: 0 -1px 0 var(--line);
    scroll-margin-top: 0;
  }
  .split.offen .half--detail,
  html:not(.js) .split:has(.detail:target) .half--detail { display: flex; }

  .half--detail .inner { margin-block: 0; }

  @keyframes einblenden {
    from { opacity: 0; transform: translateY(1rem); }
    to { opacity: 1; transform: none; }
  }
  .detail.aktiv,
  html:not(.js) .detail:target { animation-delay: 0s; }
}

@media (max-width: 480px) {
  .projekt { padding: 1.1rem; gap: 0.85rem; }
  .projekt__pfeil { display: none; }
  .detail__screens { gap: 0.5rem; padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .split, .projekt, .projekt__pfeil { transition: none; }
  .detail.aktiv, html:not(.js) .detail:target { animation: none; }
  .projekt:hover { transform: none; }
  .projekt:hover .projekt__pfeil { transform: none; }
}