/* ============================================================================
   Kundenportal — gestaltet in der Formsprache von mariusmay.de („Die Kante").

   EIGENSTÄNDIG, nicht importiert: das Portal liegt zwar auf demselben Webspace,
   aber in einem anderen Verzeichnis mit eigener Codebasis. Ein Verweis auf
   /live/marius-may-webentwicklung/assets/* würde das Portal an einen Pfad
   nageln, den der Vorschau/Live-Umzug jederzeit verschiebt. Die drei
   Schriftschnitte und das Logo liegen deshalb als Kopie hier (zusammen ~76 KB).

   Übernommen ist das Formprinzip, nicht die Datei:
   · Marine (#0b1b3a) + Signalblau (#0454fc), Papierweiß, Werkstattgrau
   · kondensierte Versalien (Big Shoulders) als Display, Hanken Grotesk im Satz
   · Mono-Labels für Meta-Angaben (Status, Datum, Tabellenköpfe)
   · Radius 0, keine Schatten — das Preset „minimalist" der Website
   · 2px-Oberkanten als Gliederung statt Karten-Schatten
   · der 33,3°-Keil GENAU EINMAL: auf der Anmeldeseite, dem Tor zum Portal
   ========================================================================== */

/* --- Schriften (lokal, keine externen Ressourcen) ------------------------- */
@font-face {
  font-family: "WDC Big Shoulders";
  src: local("Big Shoulders Display Bold"),
       url("fonts/big-shoulders-display-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "WDC Hanken Grotesk";
  src: local("Hanken Grotesk"), local("Hanken Grotesk Regular"),
       url("fonts/hanken-grotesk-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "WDC Hanken Grotesk";
  src: local("Hanken Grotesk Bold"),
       url("fonts/hanken-grotesk-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --akzent:        #0454fc;
  --marine:        #0b1b3a;
  --marine-tief:   #060f22;
  --papier:        #ffffff;
  --studiograu:    #f2f4f7;
  --werkstattgrau: #5b6675;
  --linie:         #dfe4ea;

  /* Signalblau erreicht auf Marine nur 2,99:1 und reißt selbst die 3:1-Schwelle
     für Großschrift. 75 % Akzent auf Weiß ergibt 4,62:1 — gleicher Farbton,
     kein zweiter Akzent. Wörtlich dieselbe Rechnung wie auf der Website. */
  --akzent-auf-dunkel: color-mix(in srgb, var(--akzent) 75%, #fff);

  --ok:     #1a7f4b;
  --ok-bg:  #e8f6ee;
  --fehler: #b3261e;
  --fehler-bg: #fbeae9;

  --kante-winkel: 33.3deg;

  --font-display: "WDC Big Shoulders", "Arial Narrow", "Helvetica Neue Condensed", system-ui, sans-serif;
  --font-body:    "WDC Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace;

  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.13rem + 0.36vw, 1.45rem);
  --step-2:  clamp(1.44rem, 1.32rem + 0.62vw, 1.86rem);
  --step-3:  clamp(1.73rem, 1.54rem + 0.98vw, 2.38rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  240ms;

  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--marine);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  /* Der Fuß sitzt unten, auch wenn eine Seite kurz ist (Anmeldung, leere Liste). */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* Versalien tragen die Struktur — wie auf der Website. Deutsche Komposita
   dürfen dabei NICHT mitten im Wort brechen („Webentwick|lung"). */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: 0.004em;
  overflow-wrap: normal; word-break: normal; hyphens: manual;
  margin: 0;
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Sichtbarer Fokus in Markenfarbe — Radius 0 wie alles andere. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 2px;
}

/* --- Mono-Label: Meta-Angaben, nie ganze Sätze --------------------------- */
.pk-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--akzent);
  margin: 0 0 0.35rem;
}
.pk-label--grau { color: var(--werkstattgrau); }

/* ============================================================================
   KOPFZEILE — weiß mit Hairline unten, wie der Kopf auf mariusmay.de. Nicht
   marine: das Logo liegt nur in der dunklen Fassung vor (dunkle Wortmarke,
   blaues Signet) und verschwände auf Marine fast vollständig. Ein Umfärben per
   filter: invert() zöge die Marken-Blau ins Orange — die Marke lässt sich nicht
   rechnerisch aufhellen. Marine trägt hier stattdessen das Tor und den Fuß.
   ========================================================================== */
.pk-kopf { background: var(--papier); color: var(--marine); border-bottom: 1px solid var(--linie); }
.pk-kopf__innen {
  max-width: 76rem; margin: 0 auto;
  padding: 0.9rem 1.1rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; flex-wrap: wrap;
}
.pk-marke { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--marine); }
.pk-marke:hover { text-decoration: none; }
.pk-marke img { height: 2rem; width: auto; display: block; }
/* Das Wort „Kundenportal" steht als Mono-Zusatz neben der Wortmarke, nicht als
   zweite Wortmarke — die Marke gibt es nur einmal. */
.pk-marke__zusatz {
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--werkstattgrau);
  padding-left: 0.7rem;
  border-left: 1px solid var(--linie);
}

.pk-nav { display: flex; align-items: center; gap: 1.15rem; flex-wrap: wrap; }
.pk-nav a {
  color: var(--werkstattgrau);
  font-weight: 700; font-size: var(--step--1);
  letter-spacing: 0.02em;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pk-nav a:hover { color: var(--marine); border-bottom-color: var(--akzent); text-decoration: none; }
.pk-nav a[aria-current="page"] { color: var(--marine); border-bottom-color: var(--akzent); }

.pk-wer { font-family: var(--font-mono); font-size: var(--step--1); color: var(--werkstattgrau); }
.pk-kopf form { margin: 0; }
.pk-linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--werkstattgrau);
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pk-linkbtn:hover { color: var(--marine); border-bottom-color: var(--akzent); }

/* ============================================================================
   INHALT
   ========================================================================== */
.pk-inhalt {
  flex: 1;
  width: 100%;
  max-width: 76rem;
  margin: 0 auto;
  padding: 2.75rem 1.1rem 4.5rem;
}
@media (min-width: 50rem) {
  .pk-kopf__innen, .pk-inhalt { padding-left: 2rem; padding-right: 2rem; }
  .pk-inhalt { padding-top: 3.5rem; padding-bottom: 6rem; }
}
.pk-inhalt > h1 { margin-bottom: 1.6rem; }
.pk-inhalt > p { max-width: 46rem; }

/* Zurück-Weg: der Pfeil-Link der Website, gespiegelt. */
.pk-zurueck {
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  font-weight: 700; font-size: var(--step--1);
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--werkstattgrau);
  border-bottom: 2px solid currentColor; padding-bottom: 0.1em;
  margin-bottom: 1.5rem;
}
.pk-zurueck:hover { color: var(--akzent); text-decoration: none; }

/* --- Karte: keine Schatten, keine Radien — eine 2px-Oberkante gliedert. ---- */
.pk-karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-top: 2px solid var(--marine);
  padding: 1.4rem;
}
.pk-karte + .pk-karte { margin-top: 0.9rem; }
.pk-karte h2, .pk-karte h3 { margin-bottom: 0.6rem; }
.pk-karte > p:last-child { margin-bottom: 0; }
.pk-karte--akzent { border-top-color: var(--akzent); }
/* Linksbündig, nicht zentriert: die Überschrift darüber steht links, eine
   mittig gesetzte Karte kippte die Seite optisch nach rechts. */
.pk-schmal { max-width: 30rem; }

.pk-liste { display: flex; flex-direction: column; gap: 0.9rem; }
/* Folgt einer Liste noch eine Karte (das Antwortfeld unter dem Verlauf), braucht
   sie mehr Luft als den Listenabstand — sonst klebt sie am letzten Eintrag. */
.pk-liste + .pk-karte { margin-top: 1.6rem; }

/* Klickbare Karten (Projekt, Datei): die Oberkante schlägt beim Hover auf
   Signalblau um — dieselbe Geste wie die Treppe auf der Startseite. */
a.pk-karte { display: block; color: inherit; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
a.pk-karte:hover { border-top-color: var(--akzent); background: var(--studiograu); text-decoration: none; }

.pk-projekt, .pk-datei { display: flex; align-items: baseline; justify-content: space-between; gap: 0.9rem; flex-wrap: wrap; }
.pk-projekt strong, .pk-datei strong {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--step-1); line-height: 1; letter-spacing: 0.004em;
}
.pk-status { font-family: var(--font-mono); font-size: var(--step--1); color: var(--werkstattgrau); }
/* Die Anker brauchen dieselbe Spezifitaet wie a.pk-karte oben, sonst gewinnt
   dessen display:block und die Aufteilung links/rechts greift nicht — gilt
   fuer Projekt- und Dateikarten gleichermassen. */
/* min-width:0 ist noetig, damit overflow-wrap am Kind ueberhaupt greift —
   Flex-Kinder haben per Default min-width:auto und schrumpfen sonst nicht. */
a.pk-projekt, a.pk-datei { display: flex; align-items: baseline; justify-content: space-between; gap: 0.9rem; flex-wrap: wrap; }
.pk-datei__haupt { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.pk-datei__beschreibung {
  font-family: var(--font-body, inherit); font-weight: 400; text-transform: none;
  font-size: var(--step--1); color: var(--werkstattgrau); overflow-wrap: anywhere;
}

/* Status-Marke „live" — eckig, gefüllt, wie das Laufband. */
.pk-live {
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--akzent); color: var(--papier);
  padding: 0.15rem 0.5rem;
}

/* --- Nachrichten: der Absender steht als Mono-Zeile über dem Text. -------- */
.pk-nachricht { border-top-width: 2px; }
.pk-nachricht.pk-von-uns { border-top-color: var(--akzent); background: var(--studiograu); }
.pk-nachricht .pk-wer {
  color: var(--werkstattgrau);
  letter-spacing: 0.1em; text-transform: uppercase;
  display: block; margin-bottom: 0.4rem;
}

/* --- Formulare ------------------------------------------------------------ */
form label {
  display: block; margin-bottom: 1rem;
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--werkstattgrau);
}
form input, form textarea {
  display: block; width: 100%; margin-top: 0.4rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--linie); border-radius: 0;
  background: var(--papier); color: var(--marine);
  font-family: var(--font-body); font-size: var(--step-0);
  letter-spacing: normal; text-transform: none;
  transition: border-color var(--dur) var(--ease);
}
form input:focus, form textarea:focus { border-color: var(--akzent); }
form textarea { resize: vertical; min-height: 5.5rem; }
form input[type="file"] { padding: 0.55rem; }

/* :not(.pk-linkbtn), weil „Abmelden" im Kopf ebenfalls ein type="submit" ist
   (es beendet eine POST-Sitzung) — ohne die Ausnahme gewinnt diese Regel mit
   ihrer höheren Spezifität und macht aus dem Kopf-Link einen blauen Knopf. */
button[type="submit"]:not(.pk-linkbtn) {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--akzent); color: var(--papier);
  border: 2px solid var(--akzent); border-radius: 0;
  padding: 0.7rem 1.6rem;
  font-family: var(--font-body); font-weight: 700; font-size: var(--step-0);
  letter-spacing: 0.02em;
  cursor: pointer;
  /* 44px Mindesthöhe wie auf der Website (WCAG 2.5.8). */
  min-height: 44px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
button[type="submit"]:not(.pk-linkbtn):hover { background: var(--marine); border-color: var(--marine); }

/* --- Meldungen: keine Radien, farbige Oberkante statt Pille. -------------- */
.pk-fehler, .pk-ok {
  padding: 0.8rem 1rem; margin-bottom: 1.2rem;
  border-left: 3px solid currentColor;
  font-size: var(--step--1);
}
.pk-fehler { color: var(--fehler); background: var(--fehler-bg); }
.pk-ok     { color: var(--ok);     background: var(--ok-bg); }

/* --- Tabelle (Angebote & Rechnungen) ------------------------------------- */
.pk-tabelle { width: 100%; border-collapse: collapse; }
.pk-tabelle th {
  text-align: left; padding: 0.6rem 0.5rem;
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--werkstattgrau); font-weight: 400;
  border-bottom: 2px solid var(--marine);
}
.pk-tabelle td { padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--linie); }
.pk-tabelle tbody tr:hover { background: var(--studiograu); }
/* Beträge stehen in Mono — Zahlenkolonnen fluchten nur mit gleichen Ziffernbreiten. */
.pk-tabelle .pk-zahl { font-family: var(--font-mono); text-align: right; white-space: nowrap; }
/* Auf schmalen Schirmen darf die Tabelle scrollen statt die Seite zu sprengen. */
.pk-tabelle-huelle { overflow-x: auto; }

code {
  font-family: var(--font-mono); font-size: 0.94em;
  background: var(--studiograu); padding: 0.1rem 0.35rem;
}

/* ============================================================================
   ANMELDESEITE — das Tor. Marine-Feld mit dem Signalblau-Keil im exakten
   Logo-Winkel; der einzige Ort im Portal, an dem die Kante voll auftritt.
   Eine Drehung hält den Winkel EXAKT — anders als clip-path in Prozent, dessen
   Winkel sich mit dem Seitenverhältnis ändert.
   ========================================================================== */
.pk-tor {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--marine); color: var(--papier);
  flex: 1;
  display: grid; align-content: center;
  padding: 3.5rem 1.1rem 4.5rem;
}
@media (min-width: 50rem) { .pk-tor { padding: 5rem 2rem 6rem; } }
.pk-tor__keil { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.pk-tor__keil::before {
  content: "";
  position: absolute; left: 58%; top: 100%;
  width: 220%; height: 220%;
  background: var(--akzent);
  transform-origin: 0 0;
  transform: rotate(calc(var(--kante-winkel) * -1));
}
@media (max-width: 860px) { .pk-tor__keil::before { left: 38%; } }

.pk-tor__innen {
  position: relative;
  width: 100%; max-width: 76rem; margin: 0 auto;
  display: grid; gap: 2.5rem;
  align-items: start;
}
@media (min-width: 56rem) {
  .pk-tor__innen { grid-template-columns: 1fr minmax(20rem, 24rem); gap: 4rem; }
}
.pk-tor__satz .pk-label { color: color-mix(in srgb, var(--papier) 72%, transparent); }
.pk-tor h1 { font-size: clamp(2.6rem, 8vw, 4.6rem); line-height: 0.84; margin: 0 0 1rem; }
.pk-tor__lead { color: color-mix(in srgb, var(--papier) 82%, transparent); margin: 0; max-width: 34ch; }

/* Die Anmeldekarte steht als helles Feld im Marine — Papier auf Marine, kein
   Glas, kein Schatten. */
.pk-tor__karte { background: var(--papier); color: var(--marine); padding: 1.75rem; border-top: 2px solid var(--akzent); }
.pk-tor__karte h2 { margin-bottom: 1.2rem; }
.pk-tor__karte button[type="submit"] { width: 100%; }

/* Das </> aus dem Signet, unten rechts im Keil — rein dekorativ. */
.pk-tor__code {
  position: absolute; right: clamp(1rem, 4vw, 3.5rem); bottom: clamp(1rem, 4vw, 2.5rem);
  width: clamp(4rem, 10vw, 8rem); height: auto;
  color: var(--papier); opacity: 0.9; z-index: 1; pointer-events: none;
}
.pk-tor__code path { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: square; stroke-linejoin: miter; }

/* ============================================================================
   FUSS — schmaler Marine-Streifen, schließt die Seite wie auf der Website.
   ========================================================================== */
.pk-fuss { background: var(--marine-tief); color: color-mix(in srgb, var(--papier) 62%, transparent); }
.pk-fuss__innen {
  max-width: 76rem; margin: 0 auto; padding: 1.4rem 1.1rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.06em;
}
@media (min-width: 50rem) { .pk-fuss__innen { padding-left: 2rem; padding-right: 2rem; } }
.pk-fuss a { color: color-mix(in srgb, var(--papier) 78%, transparent); }
.pk-fuss a:hover { color: var(--papier); }