/* Eigentümerportal – mobil zuerst (projektdocs/portal-v1-plan.md, Abschnitt 6). Eine Spalte, nur
   die Akte auf der Startseite ab 900 px mit dem Dokument rechts (Runde 2, 02.10.2026).

   Eigenständig: Diese Datei bindet app.css nicht ein. Das Büro bleibt hinter der Basic Auth,
   das Portal später nicht – frei sind dann nur /portal/, /static/portal/ und
   /static/scheckos/assets/ (Plan, Abschnitt 9). Die Tokens stammen deshalb als Kopie aus
   buero/static/scheckos/app.css, der Aufbau aus dem Klickdummy
   (code/klickdummy-crm-vorschau-v03/portal.css). Ändert sich dort eine Farbe, hier nachziehen.

   Schriften nach projektdocs/webseite-hvscheck-design.md: Manrope für den Text, aus
   /static/scheckos/assets/fonts/; EB Garamond kursiv als Akzent für die Überschriften, als Kopie
   der Webseite in fonts/ samt OFL-Lizenz. */

@font-face{font-family:"Manrope";font-style:normal;font-display:swap;font-weight:200 800;
  src:url("../scheckos/assets/fonts/manrope-latin-wght-normal.938c6e8019b6.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Manrope";font-style:normal;font-display:swap;font-weight:200 800;
  src:url("../scheckos/assets/fonts/manrope-latin-ext-wght-normal.6d36d5bdedfa.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"EB Garamond";font-style:italic;font-display:swap;font-weight:400;
  src:url("fonts/eb-garamond-latin-400-italic-v1.985f75b87984.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"EB Garamond";font-style:italic;font-display:swap;font-weight:400;
  src:url("fonts/eb-garamond-latin-ext-400-italic-v1.fc06c5346df3.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --wein:#6b1f2a; --wein-tief:#4d1620; --wein-hell:#8a3341;
  --gold:#b58b5a; --gold-dunkel:#7d5a2f; --gold-hell:#d9bd94;
  --verdigris:#4a7c62; --verdigris-soft:#dde9e1;
  --sand:#f8f4ef; --sand-deep:#f0e9e1; --paper:#fff;
  --ink:#2a1f21; --muted:#6d6165; --line:#e6dcd2; --line-soft:#f1ebe4;
  --rot:#b4442e; --rot-soft:#f8e3de;
  --r:12px; --r-sm:8px;
  --schatten:0 2px 8px rgba(42,31,33,.06);
  --font:"Manrope","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --font-akzent:"EB Garamond","Iowan Old Style","Hoefler Text",Garamond,Georgia,serif;
  --rand:1rem;   /* Seitenrand: 16 px am Handy */
  --innen:1rem;  /* Innenabstand von Blöcken und Zeilen */
}

/* Grundlage */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* 16 px: kleiner zoomt Safari beim Tippen in ein Feld heran. */
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font-family:var(--font);
  font-size:16px;line-height:1.55;color:var(--ink);background:var(--sand)}
a{color:var(--gold-dunkel);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
h1,h2,h3{color:var(--wein);line-height:1.2;margin:0 0 .5em}
/* Überschrift im Akzent wie die Mails der Hausvorlage (dort Georgia) und die Webseite. */
h1{font-family:var(--font-akzent);font-style:italic;font-weight:400;font-size:1.85rem;letter-spacing:0}
h2{font-size:1.05rem;font-weight:800;letter-spacing:-.015em}
h3{font-size:1rem;font-weight:700}
p{margin:0 0 .8em}
button,input,select{font:inherit}
img{max-width:100%}

/* Knöpfe – mindestens 44 px hoch, damit sie sich mit dem Daumen treffen lassen. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;
  border:1px solid var(--wein);background:transparent;color:var(--wein);border-radius:99px;
  padding:.55rem 1.2rem;font-weight:700;cursor:pointer;text-decoration:none;
  transition:background .15s,color .15s}
.btn:hover{background:var(--wein);color:#fff}
.btn--primaer{background:var(--wein);color:#fff}
.btn--primaer:hover{background:var(--wein-tief);border-color:var(--wein-tief)}

/* Kopf – die Fläche über die ganze Breite, der Inhalt auf derselben Linie wie Seite und Fuß
   (max-width 62rem, seit der Vorschau vom 01.10.2026: vorher stand die Marke am Fensterrand). */
/* Seit 02.10.2026 in Firmenrot mit Goldlinie wie der Kopf der Mails (Dominik). */
/* print-color-adjust: Browser drucken Hintergründe sonst nicht – weiße Schrift auf weißem Papier. */
.p-kopf{background:var(--wein);border-bottom:3px solid var(--gold);color:#fff;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.p-kopf a:focus-visible,.p-kopf button:focus-visible{outline-color:var(--gold-hell)}
.p-kopf-innen{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.4rem 1.5rem;
  width:100%;max-width:62rem;margin:0 auto;padding:.5rem var(--rand)}
.p-marke{display:flex;align-items:center;gap:.6rem;min-height:44px;text-decoration:none;
  color:#fff;font-weight:800;font-size:1.1rem;line-height:1.05}
.p-marke-zeichen{width:36px;height:30px;flex:none;color:var(--gold-hell)}
.p-marke small{display:block;font-weight:600;font-size:.72rem;color:var(--gold-hell);
  letter-spacing:.08em;text-transform:uppercase}
.p-nutzer{display:flex;align-items:center;justify-content:space-between;gap:.2rem 1rem;flex:1 1 100%;
  border-top:1px solid rgba(255,255,255,.16);padding-top:.35rem;font-size:.84rem;
  color:rgba(255,255,255,.78);line-height:1.3}
.p-nutzer-name{min-width:0}
.p-nutzer-name strong,.p-nutzer-name span{display:block;overflow-wrap:anywhere}
.p-nutzer-name strong{color:#fff}
.p-nutzer form{margin:0 0 0 auto;flex:none}
.p-abmelden{min-height:44px;padding:0 .2rem;border:0;background:none;cursor:pointer;
  color:var(--gold-hell);font-size:.84rem;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.p-abmelden:hover{color:#fff}

/* Glocke im Kopf (Runde 2, Vorgabe 4, 02.10.2026): die Zahl der Unterlagen, die der Eigentümer
   noch nicht geöffnet hat; ein Klick öffnet das Fenster mit der Liste. Ein <details>, damit es
   auch ohne JavaScript aufgeht - portal.js schließt es zusätzlich bei Klick daneben und mit Esc.
   Das Fenster hängt an .p-nutzer: am Handy über die volle Breite, ab Tablettbreite rechtsbündig.
   Neu ist überall Gold: Zahl an der Glocke, „Neu“ an der Zeile, „… neu“ am Ordner. */
.p-nutzer{position:relative}
.p-glocke{flex:none;margin-left:auto}
.p-glocke[hidden]{display:none}
.p-glocke + form{margin-left:0}
.p-glocke>summary{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  list-style:none;cursor:pointer;color:var(--gold-hell)}
.p-glocke>summary::-webkit-details-marker{display:none}
.p-glocke>summary:hover,.p-glocke[open]>summary{background:rgba(255,255,255,.12);color:#fff}
.p-glocke>summary:focus-visible{outline:2px solid var(--gold-hell);outline-offset:0}
.p-glocke>summary svg{width:22px;height:22px}
.p-glocke-zahl{position:absolute;top:2px;right:0;min-width:20px;height:20px;padding:0 5px;border:2px solid var(--wein);
  border-radius:99px;background:var(--gold-hell);color:var(--wein);font-size:.68rem;font-weight:800;line-height:16px;
  text-align:center;font-variant-numeric:tabular-nums}
.p-glocke-fenster{position:absolute;z-index:30;top:calc(100% + .45rem);left:0;right:0;overflow:hidden;
  background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 14px 36px rgba(42,31,33,.24);text-align:left;font-size:.9rem;line-height:1.4}
.p-glocke-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;padding:.75rem 1rem .6rem;
  border-bottom:1px solid var(--line-soft)}
.p-glocke-kopf strong{color:var(--wein);font-size:.95rem}
.p-glocke-kopf span{color:var(--muted);font-size:.8rem;white-space:nowrap}
.p-glocke-liste{list-style:none;margin:0;padding:0;max-height:min(22rem,55vh);overflow-y:auto}
.p-glocke-liste li+li{border-top:1px solid var(--line-soft)}
.p-glocke-liste a{display:flex;align-items:baseline;gap:.65rem;min-height:48px;padding:.6rem 1rem;color:inherit;
  text-decoration:none}
.p-glocke-liste a::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--gold)}
.p-glocke-liste a:hover{background:var(--sand)}
.p-glocke-liste a:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.p-glocke-liste .text{min-width:0;overflow:hidden}
.p-glocke-liste .titel{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-weight:700;overflow-wrap:anywhere}
/* Ordner und Tag der Freigabe, getrennt durch „·“. Der Punkt steht vor jedem Teil und ragt um
   .8em nach links aus der Spalte, die .text abschneidet - so fällt er am Zeilenanfang weg: Am Handy
   stand sonst „Eigentümerversammlungen ·“ allein am Ende der Zeile (Vorschau vom 03.10.2026). */
.p-glocke-liste .neben{display:flex;flex-wrap:wrap;margin:.1rem 0 0 -.8em;font-size:.8rem;color:var(--muted)}
.p-glocke-liste .neben>span::before{content:"·";display:inline-block;width:.8em;text-align:center}
/* „freigegeben am 02.10.2026“ bricht nicht mittendrin um (Vorschau vom 03.10.2026), ebenso
   „jetzt unterschrieben“ (seit 03.10.2026). */
.p-glocke-liste .wann{white-space:nowrap}
.p-glocke-alle{margin:0;padding:.7rem 1rem;border-top:1px solid var(--line-soft);background:var(--sand)}
.p-glocke-alle .btn{width:100%}
.p-glocke-alle .btn:focus-visible{outline-color:var(--gold)}
.p-glocke-neu[hidden]{display:none}
/* „Bitte unterschreiben“ ganz oben (seit 03.10.2026): eine Aufgabe, keine Nachricht - deshalb mit
   Feder in Firmenrot auf Sand und dem Knopf in Firmenrot, abgesetzt von den goldenen Punkten der
   neuen Unterlagen darunter. Kein Gelb, kein Rot: Es ist eine Bitte, kein Fehler. */
.p-glocke-kopf--unterschreiben{background:var(--sand)}
.p-glocke-unterschriften{list-style:none;margin:0;padding:0;max-height:min(16rem,40vh);overflow-y:auto;
  background:var(--sand);border-bottom:1px solid var(--line)}
.p-glocke-unterschrift{display:flex;align-items:flex-start;gap:.7rem;padding:.75rem 1rem .85rem}
.p-glocke-unterschrift+.p-glocke-unterschrift{border-top:1px solid var(--line)}
.p-glocke-feder{flex:none;width:2rem;height:2rem;padding:.42rem;border-radius:50%;background:var(--paper);
  border:1px solid var(--gold-hell);color:var(--wein)}
.p-glocke-unterschrift .text{min-width:0;flex:1}
.p-glocke-unterschrift .titel{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  color:var(--ink);font-weight:700;text-decoration:none;overflow-wrap:anywhere}
.p-glocke-unterschrift .titel:hover{color:var(--wein);text-decoration:underline;text-underline-offset:2px}
.p-glocke-unterschrift .titel:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* Wie unter den neuen Unterlagen: der Punkt vor jedem Teil ragt links hinaus und fällt am
   Zeilenanfang weg - hier schneidet ihn clip-path ab, .text darf nicht abschneiden (sonst fehlte
   der Fokusrahmen des Knopfs). */
.p-glocke-unterschrift .neben{display:flex;flex-wrap:wrap;margin:.1rem 0 0 -.8em;clip-path:inset(0 0 0 .8em);font-size:.8rem;
  color:var(--gold-dunkel);font-weight:600}
.p-glocke-unterschrift .neben>span::before{content:"·";display:inline-block;width:.8em;text-align:center}
.p-glocke-unterschrift .wann{white-space:nowrap;color:var(--muted);font-weight:500}
.p-glocke-unterschrift .btn{margin-top:.55rem}
.p-glocke-unterschrift .btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.p-glocke-unterschrift-hinweis{display:block;margin-top:.35rem;font-size:.8rem;color:var(--muted)}

/* Inhalt und Fuß */
.p-inhalt{flex:1 0 auto;width:100%;max-width:62rem;margin:0 auto;padding:1.4rem var(--rand) 2.5rem}
.p-fuss{width:100%;max-width:62rem;margin:0 auto;padding:1rem var(--rand) 2rem;display:flex;
  flex-direction:column;gap:.1rem;border-top:1px solid var(--line);font-size:.84rem;color:var(--muted)}
.p-fuss strong{color:var(--ink);font-weight:700}
/* Links im Fuß wie alle anderen mindestens 44 px hoch; der Name des Inhabers bricht nicht um. */
.p-fuss a{display:inline-flex;align-items:center;align-self:flex-start;min-height:44px;color:var(--gold-dunkel)}
.p-fuss-impressum{white-space:nowrap}
/* Am Handy steht der Inhaber in einer eigenen Zeile, ohne Punkt davor - sonst hing „·“ allein am
   Ende der ersten Zeile (Vorschau vom 03.10.2026). Ab 40rem wieder in einer Zeile. */
.p-fuss-trenner{display:none}
.p-fuss-impressum{display:block}

/* Karte für Anmelden, Gesendet, Bestätigen und „Kein Zugang“. Seit 02.10.2026 ohne goldene
   Oberkante: Die Goldlinie trägt jetzt der Kopf, zwei Goldlinien übereinander wirkten doppelt. */
.p-login{max-width:26rem;margin:.5rem auto 0;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:1.6rem 1.2rem;box-shadow:var(--schatten);
  text-align:center}
.p-login img{width:64px;height:auto;display:block;margin:0 auto 1rem}
.p-login h1{font-size:1.7rem;text-wrap:balance}
/* pretty: kein einzelnes Wort allein in der letzten Zeile („an.“). */
.p-login p{color:var(--muted);font-size:.95rem;text-wrap:pretty}
.p-login label{display:block;text-align:left;font-weight:700;font-size:.88rem;margin:1.2rem 0 .35rem}
.p-login input{width:100%;min-height:44px;font-size:16px;padding:.6rem .85rem;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--sand);color:var(--ink)}
.p-login input:focus{outline:none;border-color:var(--wein);box-shadow:0 0 0 3px rgba(107,31,42,.16);background:#fff}
.p-login .btn{width:100%;margin-top:1rem}
.p-login form{margin:0}
.p-login .fein{font-size:.82rem;margin:1rem 0 0}
.p-login .fehler{color:var(--rot);font-weight:600;margin:1rem 0 0}
/* Die ungültige Adresse direkt unter dem Feld, klein und links wie die Beschriftung. */
.p-login .fehler--feld{margin:.4rem 0 0;font-size:.88rem;text-align:left;line-height:1.4}
.p-login input[aria-invalid="true"]{border-color:var(--rot)}
.p-login strong{color:var(--ink);overflow-wrap:anywhere}
/* Sonst bricht „info@scheck-iv.de“ am Bindestrich um. */
.p-login a[href^="mailto:"]{white-space:nowrap}
.p-kontaktzeile{display:flex;flex-direction:column;align-items:center;gap:.1rem}
.p-kontaktzeile a{display:inline-block;padding:.35rem 0;font-weight:700}
/* Der Haken in den Hausfarben, Gold auf Gold-hell (seit der Vorschau vom 01.10.2026). */
.p-gesendet .haken{display:inline-flex;width:56px;height:56px;border-radius:50%;background:#f3e4d4;
  color:var(--gold-dunkel);align-items:center;justify-content:center;margin-bottom:.8rem}
.p-gesendet .haken svg{width:28px;height:28px}

/* Gruß und Abschnitte */
/* Der Gruß steht als Band im Kopf (Block „band“ in _rahmen.html), auf derselben Linie wie die Seite. */
.p-gruss{width:100%;max-width:62rem;margin:0 auto;padding:1.1rem var(--rand) 1.6rem}
.p-gruss h1{margin-bottom:.2rem;color:#fff;font-size:2.1rem;text-wrap:balance}
.p-gruss p{color:rgba(255,255,255,.8);margin:0}
.p-hinweis{color:var(--muted);font-size:.86rem;margin-top:1.6rem}
.p-hinweis a[href^="mailto:"]{white-space:nowrap}

/* Je Objekt ein Abschnitt (Arbeitsschritt 11): Anschrift als Kopf, darunter die Ordner. */
.p-objekt + .p-objekt{margin-top:1.8rem}
.p-objekt[hidden]{display:none}
.p-objekt-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .7rem;margin:0 0 .6rem;
  font-size:1.2rem;font-weight:800;letter-spacing:-.015em;overflow-wrap:anywhere}
.p-objekt-kopf small{font-size:.86rem;font-weight:600;color:var(--muted);letter-spacing:0}
.p-leer{margin:0;padding:1.1rem var(--innen);color:var(--muted)}

/* ---------- Akte und Dokument (Runde 2, 02.10.2026) ----------
   Nachgebildet dem Dokumente-Reiter im Büro (.dok-* in buero/static/scheckos/app.css): links die
   Akte als Ordner, rechts das gewählte Dokument. Die Startseite darf dafür breiter werden als die
   übrigen Portalseiten - das PDF braucht die Fläche. Ab 900 px zwei Spalten, darunter erst die
   Akte und nach einem Tipp das Dokument als eigene Ansicht. */
.p-body--akte .p-kopf-innen,.p-body--akte .p-gruss,.p-body--akte .p-inhalt,.p-body--akte .p-fuss{max-width:88rem}
.p-liste{min-width:0}
.p-nur-js{display:none}
.p-js .p-nur-js{display:block}
.p-js .p-nur-js[hidden]{display:none}

/* Suche über der Akte, wie im Büro als Pille; der Knopf schickt sie an den Server (auch Volltext). */
.p-suche{display:flex;gap:.45rem;align-items:center;margin:0 0 .8rem}
.p-suche input{flex:1;min-width:0;min-height:44px;border:1px solid var(--line);border-radius:99px;
  padding:.5rem 1.1rem;font-size:16px;background:var(--paper);color:var(--ink)}
.p-suche input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(181,139,90,.2)}
/* Das Kreuz zum Leeren in Gold statt im Blau des Browsers (Vorschau vom 03.10.2026). Eine Datei
   vom eigenen Server - die CSP erlaubt Bilder nur von dort, kein data:. */
.p-suche input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:20px;height:20px;
  margin:0 -.3rem 0 .4rem;background:url("leeren.03991d53fe8d.svg") center/13px 13px no-repeat;cursor:pointer;opacity:.8}
.p-suche input::-webkit-search-cancel-button:hover{opacity:1}
.p-suche button{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--wein);background:var(--wein);color:#fff;cursor:pointer}
.p-suche button:hover{background:var(--wein-tief);border-color:var(--wein-tief)}
.p-suche svg{width:18px;height:18px}
.p-treffer{font-size:.84rem;color:var(--muted);margin:-.3rem 0 .8rem 1.1rem}
.p-treffer a{font-weight:700}
.p-treffer[hidden],.p-keine[hidden],.p-meldung[hidden]{display:none}
.p-keine,.p-meldung{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--r-sm);padding:.8rem 1rem;margin:0 0 1rem;font-size:.9rem;color:var(--muted)}
.p-keine p{margin:0 0 .4rem}
.p-keine p:last-child{margin:0}
.p-keine strong{color:var(--ink);overflow-wrap:anywhere}
.p-keine a[href^="mailto:"]{white-space:nowrap}
/* Ohne Treffer steht „Suche aufheben“ im Hinweis, die Zeile „0 Dokumente“ darüber entfällt. */
.p-keine p.p-keine-aufheben{margin-top:.55rem}
.p-keine .p-keine-aufheben a{font-weight:700}

/* Ordner: beim Öffnen alle zu, wie im Büro (Dominik, 30.09.2026). <details>, damit sie auch ohne
   JavaScript aufgehen. „Nur für Sie“ steht oben und trägt das Personensymbol in Firmenrot. */
.p-ordner{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--schatten);
  margin-bottom:.5rem;overflow:hidden}
.p-ordner[hidden]{display:none}
.p-ordner>summary{display:flex;align-items:center;gap:.6rem;min-height:48px;padding:.6rem .95rem;cursor:pointer;
  list-style:none;font-size:.97rem;font-weight:700;color:var(--wein);line-height:1.3}
.p-ordner>summary::-webkit-details-marker{display:none}
.p-ordner>summary::before{content:"";flex:none;width:0;height:0;border-top:4px solid transparent;
  border-bottom:4px solid transparent;border-left:5px solid var(--gold-dunkel);transition:transform .15s}
.p-ordner[open]>summary::before{transform:rotate(90deg)}
.p-ordner>summary:hover{background:var(--sand)}
.p-ordner>summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.p-ordner>summary svg{width:18px;height:18px;flex:none;color:var(--gold)}
.p-ordner .name{min-width:0;overflow-wrap:anywhere}
.p-ordner .jahr{color:var(--muted);font-weight:600}
.p-ordner .zahl{margin-left:auto;font-size:.82rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
/* „2 neu“ hinter dem Namen (Vorgabe 4). Im Namen statt daneben: Am Handy rückt es unter einen langen
   Namen („Eigentümerversammlungen“), statt ihn mitten im Wort zu teilen (Vorschau vom 02.10.2026). */
.p-ordner-neu{display:inline-block;padding:0 .5rem;border-radius:99px;background:#f3e4d4;color:var(--gold-dunkel);
  font-size:.74rem;font-weight:800;line-height:1.6;white-space:nowrap;vertical-align:1px;font-variant-numeric:tabular-nums}
.p-ordner-neu[hidden]{display:none}
.p-ordner--eigen{border-color:var(--gold-hell)}
.p-ordner--eigen>summary svg{color:var(--wein)}
.p-karte{border-top:1px solid var(--line-soft)}
.p-karte>:first-child{border-top:0}
.p-karte--leer{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--schatten)}
.p-unterkopf{display:flex;justify-content:space-between;gap:.8rem;padding:.32rem .95rem;background:var(--sand);
  border-top:1px solid var(--line-soft);font-size:.74rem;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.p-unterkopf[hidden]{display:none}
.p-unterkopf--versammlung{font-size:.8rem;color:var(--wein)}
.p-unterkopf--versammlung span:last-child{flex:none;color:var(--muted);font-weight:700}

/* Zeilen: Datum, Titel (bis zu zwei Zeilen) und darunter Art und Einheit. Jede Zeile ist ein Link,
   mindestens 48 px hoch. */
.p-zeile{display:grid;grid-template-columns:4.3rem minmax(0,1fr);align-items:center;gap:.7rem;min-height:48px;
  padding:.5rem .95rem;border-top:1px solid var(--line-soft);color:inherit;text-decoration:none;line-height:1.35}
.p-zeile[hidden]{display:none}
.p-zeile:hover{background:var(--sand)}
.p-zeile:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.p-zeile.ist-gewaehlt{background:#f3e3e5;box-shadow:inset 3px 0 0 var(--wein)}
.p-zeile .datum{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.p-zeile .text{min-width:0}
.p-zeile .titel{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:.93rem;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.p-zeile.ist-gewaehlt .titel{color:var(--wein)}
.p-zeile .neben{display:block;font-size:.8rem;color:var(--muted)}
/* Noch nicht gesehen: Titel kräftiger, davor „Neu“ in Gold (Vorgabe 4). */
.p-zeile.ist-neu .titel{font-weight:800}
.p-neu{display:inline-block;margin-right:.4rem;padding:0 .4rem;border-radius:99px;background:#f3e4d4;
  color:var(--gold-dunkel);font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  line-height:1.6;vertical-align:1px}
/* Fehlen Unterschriften (seit 03.10.2026): eine dezente Pille hinter der Art, Gold auf Weiß - nicht
   gefüllt wie „Neu“, damit beide nebeneinander unterscheidbar bleiben. */
.p-unterschrift-pille{display:inline-block;margin-left:.3rem;padding:0 .45rem;border:1px solid var(--gold-hell);
  border-radius:99px;color:var(--gold-dunkel);font-size:.7rem;font-weight:700;line-height:1.5;white-space:nowrap;
  vertical-align:1px}
/* Bricht die Pille am Handy in eine eigene Zeile um, steht sie bündig unter „Neu“ und der Art statt um
   ihren Rand eingerückt (Vorschau vom 03.10.2026) - der Abstand kommt dann aus gap, nicht aus margin. */
.p-zeile .neben:has(.p-unterschrift-pille){display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .3rem}
.p-zeile .neben:has(.p-unterschrift-pille) .p-unterschrift-pille{margin-left:0}
.p-zeile .neben:has(.p-unterschrift-pille) .p-neu{margin-right:.1rem}
.p-im-text[hidden]{display:none}
/* „Unterlagen dazu“ unter einer Versammlung, wie .dok-verweis im Büro (Prüfung vom 03.10.2026):
   eingerückt auf die Titel der Zeilen. */
.p-verweis{padding:.4rem .95rem .55rem calc(4.3rem + .7rem + .95rem);border-top:1px solid var(--line-soft);
  font-size:.8rem;color:var(--muted);line-height:1.5;overflow-wrap:anywhere}
.p-verweis[hidden]{display:none}
.p-verweis a{color:var(--gold-dunkel);font-weight:700;text-decoration:none}
.p-verweis a:hover{text-decoration:underline}
.p-verweis span{white-space:nowrap}
mark{background:#f6e3a6;color:inherit;border-radius:2px;padding:0 1px}

/* Rechts: das Dokument. Ab 900 px klebt es beim Blättern und füllt die Höhe des Fensters. */
.p-ansicht{display:none;min-width:0}
.p-ansicht-kopf{padding:.9rem 1.1rem .9rem;border-bottom:1px solid var(--line-soft)}
.p-ansicht-titel{margin:0;font-size:1.08rem;font-weight:800;line-height:1.3;overflow-wrap:anywhere}
.p-ansicht-meta{margin:.25rem 0 0;font-size:.84rem;color:var(--muted);overflow-wrap:anywhere}
/* Wessen Unterschrift fehlt (seit 03.10.2026): ein ruhiger Kasten in Sand mit Goldkante wie die
   Hinweise der Suche - kein Gelb, kein Rot, es ist ein Stand, kein Fehler. Knapp, das PDF darunter
   braucht die Höhe. */
.p-unterschrift{margin:.65rem 0 0;padding:.5rem .8rem;background:var(--sand);border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:var(--r-sm);font-size:.86rem;line-height:1.45;color:var(--muted);
  overflow-wrap:anywhere}
.p-unterschrift p{margin:0}
.p-unterschrift p+p{margin-top:.2rem}
.p-unterschrift strong{color:var(--gold-dunkel);font-weight:800}
.p-unterschrift-eigen{color:var(--ink);font-weight:600}
/* „Jetzt unterschreiben“ im Kasten, nur für den Unterzeichner selbst (seit 03.10.2026). */
.p-unterschrift .p-unterschrift-knopf{margin-top:.5rem}
.p-ansicht-knoepfe{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.75rem}
.btn--klein{padding:.4rem 1.05rem;font-size:.88rem}
.p-zurueck{display:none}
.p-seiten{flex:1;min-height:0;display:flex;background:#ebe5de}
.p-rahmen{flex:1;width:100%;height:100%;border:0;background:#ebe5de}
/* Ohne src ist der Rahmen leer: portal.js füllt ihn erst ab 900 px, ohne JavaScript steht der aus
   <noscript> da (Prüfung vom 03.10.2026). Nur dann darf <noscript> sichtbar werden - mit
   JavaScript ist sein Inhalt bloßer Text, und der stünde sonst rechts neben dem PDF. */
.p-rahmen:not([src]){display:none}
@media (scripting:none){.p-seiten>noscript{display:contents}}
.p-bild{flex:1;overflow:auto;padding:.9rem;text-align:center}
.p-bild img{max-width:100%;height:auto;box-shadow:0 1px 3px rgba(0,0,0,.14)}
.p-ohne{margin:auto;padding:1.5rem 1.1rem;text-align:center;color:var(--muted);font-size:.92rem}
/* Ein Dokument-Zeichen über jedem Hinweis ohne Vorschau (am Handy beim PDF, ohne Vorschau, Datei
   fehlt) - der graue Kasten wirkte sonst leer (Vorschau vom 03.10.2026). */
.p-ohne::before{content:"";display:block;width:40px;height:40px;margin:0 auto .55rem;
  background:url("dokument.7a6901a71f20.svg") center/contain no-repeat}
.p-ohne p{margin:0 0 .5rem}
.p-ohne p:last-child{margin:0}
.p-ohne strong{color:var(--ink)}
/* Rechts, solange nichts geöffnet ist. */
.p-leerstand{margin:auto;max-width:23rem;padding:2rem 1.5rem;text-align:center;color:var(--muted);font-size:.9rem;line-height:1.5}
.p-leerstand svg{width:44px;height:44px;color:var(--gold-hell);margin-bottom:.5rem}
.p-leerstand p{margin:0 0 .5rem}
.p-leerstand .p-leerstand-titel{font-size:1rem;font-weight:800;color:var(--wein);margin-bottom:.3rem}
.p-leerstand .p-leerstand-tasten{margin-top:.9rem;font-size:.82rem}
.p-leerstand kbd{font:inherit;font-size:.76rem;font-weight:700;padding:0 .32rem;border:1px solid var(--line);
  border-bottom-width:2px;border-radius:4px;background:var(--sand);color:var(--ink)}

/* Ab Tablettbreite: Kopf in einer Zeile, mehr Luft. */
@media (min-width:40rem){
  :root{--rand:clamp(1.2rem,4vw,2.5rem);--innen:1.2rem}
  .p-kopf-innen{padding:.6rem var(--rand)}
  .p-nutzer{flex:0 1 auto;margin-left:auto;border-top:0;padding-top:0;text-align:right}
  .p-glocke-fenster{left:auto;width:25rem}
  .p-inhalt{padding:2rem var(--rand) 3rem}
  .p-fuss{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.2rem 1.4rem}
  .p-fuss a{align-self:auto}
  .p-fuss-trenner,.p-fuss-impressum{display:inline}
  .p-login{margin:2.5rem auto 0;padding:2rem}
  .p-kontaktzeile{flex-direction:row;justify-content:center;gap:1.2rem}
  h1{font-size:2.15rem}
}

/* Ab 900 px: Akte links, Dokument rechts, wie im Büro (dort 47:53). */
@media (min-width:900px){
  .p-akte{display:grid;grid-template-columns:minmax(21rem,2fr) minmax(0,3fr);gap:1.2rem;align-items:start}
  .p-ansicht{display:flex;flex-direction:column;position:sticky;top:1rem;height:calc(100vh - 2rem);min-height:30rem;
    background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--schatten);overflow:hidden}
  .p-nur-schmal{display:none}
}

/* Unter 900 px: erst die Akte; ein Tipp lädt die Seite mit ?d= neu (body.ist-dokument), dann steht
   nur das Dokument da, mit „Zurück zur Übersicht“. Der Link springt auf die Zeile (#z<pk>) - dann
   zeigt :target die Akte wieder, ohne neu zu laden, der Ordner ist offen, die Zeile markiert.
   Den PDF-Rahmen gibt es hier nicht: Chrome auf Android zeigt PDFs darin nicht an (wie im Büro),
   „Öffnen“ bringt das PDF in die Ansicht des Geräts. */
@media (max-width:899.98px){
  .ist-dokument .p-liste{display:none}
  .ist-dokument .p-ansicht{display:block;background:var(--paper);border:1px solid var(--line);
    border-radius:var(--r);box-shadow:var(--schatten);overflow:hidden}
  .ist-dokument .p-akte:has(.p-zeile:target) .p-liste{display:block}
  .ist-dokument .p-akte:has(.p-zeile:target) .p-ansicht{display:none}
  .ist-dokument:not(:has(.p-zeile:target)) .p-gruss{display:none}
  .p-zurueck{display:inline-flex;align-items:center;min-height:44px;margin:-.5rem 0 .2rem;font-weight:700;
    text-decoration:none}
  .p-zurueck::before{content:"‹";margin-right:.4rem;font-size:1.25rem;line-height:1}
  .p-ansicht-knoepfe .btn{flex:1 1 9rem}
  /* Am Handy drei Zeilen Titel: „Protokoll der Eigentümerversammlung vom …“ verlor sonst das
     Unterscheidende (Vorschau vom 02.10.2026). */
  .p-zeile .titel{-webkit-line-clamp:3}
  .p-rahmen{display:none}
  .p-seiten{min-height:7rem}
  .p-bild{padding:.6rem}
}