/* Hofhand · Grundlage „Modern“ (seit 04.10.2026)
   Gemeinsame Farben, Bausteine und Bewegung für alle Seiten. Klassen tragen das Präfix hh-,
   weil das Designsystem der Seiten (_ds) schon .card, .nav, .btn usw. belegt.
   Bewegung: ruhig und gerade, aus leichter Unschärfe nach oben – kein Kippen, kein Federn.
   Ohne Bewegung (Klasse hh-ruhig, gesetzt von hofhand-bewegung.js) nur, wenn jemand in den
   Einstellungen „Aus“ wählt oder „Wie mein Gerät“ bei „Animationen reduzieren“. */

:root{
  /* Farben */
  --bg:#F8F4EC; --tinte:#23262A; --grau:#6F6A62; --grau-2:#A49E93; --linie:#E7E0D1;
  --gruen:#3B6B35; --gruen-900:#1B3318; --gruen-800:#22401E; --gruen-700:#2E5429; --gruen-600:#35602F;
  --gruen-300:#B6CDAD; --gruen-200:#D8E5D2; --gruen-100:#EDF3EA;
  --kupfer:#C96A2B; --kupfer-700:#A9541E; --kupfer-800:#8A3F12; --kupfer-300:#E3A274; --kupfer-200:#F5D3B8; --kupfer-100:#FBE9DA;
  --rot:#C0392B; --rot-700:#8F2A20; --rot-100:#FBEBE8;
  --creme:#E8D5A8; --creme-200:#F3E7C9; --creme-100:#FAF3E4;
  --himmel-700:#2F5C7C; --himmel-200:#DCEAF4; --himmel-100:#EFF6FB;
  /* Schrift */
  --kopf:"Archivo",system-ui,sans-serif; --text:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Tiefe */
  --s1:0 1px 2px rgba(27,51,24,.06),0 3px 10px -3px rgba(27,51,24,.07);
  --s2:0 2px 4px rgba(27,51,24,.04),0 16px 36px -12px rgba(27,51,24,.2);
  --s3:0 6px 14px rgba(27,51,24,.06),0 36px 80px -26px rgba(27,51,24,.38);
  /* Bewegung: eine Handschrift für alles */
  --ease:cubic-bezier(.22,1,.36,1);
  --weich:cubic-bezier(.16,1,.3,1);
  --dauer-kurz:.35s; --dauer:.7s; --dauer-lang:1.1s;
}

/* ---------- Seitenwechsel: Startseite ↔ Anmelden ↔ eingeloggte Bereiche wie aus einem Guss ---------- */
@view-transition{navigation:auto;types:hh-seite}
html:active-view-transition-type(hh-seite)::view-transition-old(root){animation:hh-seite-raus .32s var(--ease) both}
html:active-view-transition-type(hh-seite)::view-transition-new(root){animation:hh-seite-rein .62s var(--weich) both}
@keyframes hh-seite-raus{to{opacity:0;filter:blur(4px)}}
@keyframes hh-seite-rein{from{opacity:0;transform:translate3d(0,10px,0);filter:blur(6px)}}

/* ---------- Einblenden ---------- */
/* Eine Ansicht, die neu erscheint (z. B. per sc-if), schwebt aus leichter Unschärfe ein. */
.hh-rein{animation:hh-rein var(--dauer) var(--weich) backwards}
@keyframes hh-rein{from{opacity:0;transform:translate3d(0,12px,0);filter:blur(6px)}}
/* Kinder nacheinander: style="--hh-i:0", "--hh-i:1" … am Kind setzen */
.hh-stufen>*{animation:hh-rein var(--dauer) var(--weich) backwards;animation-delay:calc(min(var(--hh-i,0),8) * 60ms)}
/* Beim Scrollen: data-hh-z am Element (hofhand-bewegung.js steuert die Klassen) */
.hh-z-warte{opacity:0;transform:translate3d(0,22px,0);filter:blur(12px)}
.hh-z-da{transition:opacity 1s var(--weich) var(--hh-zv,0s),transform 1.2s var(--weich) var(--hh-zv,0s),filter 1.1s var(--weich) var(--hh-zv,0s)!important}
/* Überschriften Wort für Wort: data-hh-woerter (nur für feste Texte) */
.hh-w{display:inline-block;vertical-align:top}
.hh-w>span{display:inline-block;opacity:0;transform:translate3d(0,.3em,0);filter:blur(10px)}
.hh-woerter-da .hh-w>span{opacity:1;transform:none;filter:none;transition:opacity 1s var(--weich) calc(var(--hh-wv,0s) + var(--hh-i,0) * 55ms),transform 1.2s var(--weich) calc(var(--hh-wv,0s) + var(--hh-i,0) * 55ms),filter 1.1s var(--weich) calc(var(--hh-wv,0s) + var(--hh-i,0) * 55ms)}
/* Ein Wert hat sich geändert: kurz weich aufleuchten */
.hh-aufleuchten{animation:hh-aufleuchten .55s var(--weich)}
@keyframes hh-aufleuchten{from{opacity:.25;filter:blur(3px)}}
/* Wechsel beim Darüberfahren: zwei Inhalte liegen übereinander, der zweite blendet ruhig ein */
.hh-wechsel{display:grid}
.hh-wechsel>*{grid-area:1/1;transition:opacity .45s var(--ease),transform .65s var(--weich),filter .45s}
.hh-wechsel>:nth-child(2){opacity:0;transform:translate3d(0,12px,0);filter:blur(4px);pointer-events:none}
@media (hover:hover){
  .hh-wechsel-ausloeser:hover .hh-wechsel>:first-child,.hh-wechsel-ausloeser:focus-visible .hh-wechsel>:first-child{opacity:0;transform:translate3d(0,-10px,0);filter:blur(4px)}
  .hh-wechsel-ausloeser:hover .hh-wechsel>:nth-child(2),.hh-wechsel-ausloeser:focus-visible .hh-wechsel>:nth-child(2){opacity:1;transform:none;filter:none;transition-delay:.06s}
}
/* Stapelkarten: Karten legen sich beim Scrollen übereinander, die untere wird kleiner und dunkler.
   <div data-hh-stapel> mit Kindern .hh-stapel-karte; die Höhe des Klebepunkts über --hh-stapel-oben. */
.hh-stapel-karte{position:sticky;top:var(--hh-stapel-oben,96px);transform-origin:50% 0;will-change:transform}
/* Fortschrittsbalken, der sich beim Einblenden füllt: <span class="hh-balken"><i data-hh-balken=".6"></i></span> */
.hh-balken{display:block;height:8px;border-radius:8px;background:rgba(232,213,168,.55);overflow:hidden}
.hh-balken>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--kupfer-300),var(--kupfer));transform:scaleX(var(--hh-wert,0));transform-origin:0 50%;transition:transform 1.4s var(--weich)}

/* ---------- Bausteine ---------- */
.hh-knopf{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border:0;border-radius:999px;font:650 15px var(--text);white-space:nowrap;text-decoration:none;cursor:pointer;isolation:isolate;overflow:hidden;transition:transform .5s var(--weich),background-color .35s,color .35s,box-shadow .45s var(--ease)}
.hh-knopf:hover{text-decoration:none}
.hh-knopf:active{transform:scale(.97)}
.hh-knopf svg{width:17px;height:17px;flex:none}
.hh-knopf-gruen{background:var(--gruen);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 26px -12px rgba(59,107,53,.85)}
.hh-knopf-gruen:hover{background:var(--gruen-700);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 34px -12px rgba(59,107,53,.95)}
.hh-knopf-gruen::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-130%)}
.hh-knopf-gruen:hover::after{transform:translateX(130%);transition:transform 1s var(--ease)}
.hh-knopf-hell{background:#fff;color:var(--gruen-800);box-shadow:var(--s1),inset 0 0 0 1px var(--linie)}
.hh-knopf-hell:hover{color:var(--gruen-800);box-shadow:var(--s2),inset 0 0 0 1px var(--gruen-200)}
.hh-knopf-zart{background:var(--gruen-100);color:var(--gruen-800);box-shadow:inset 0 0 0 1px var(--gruen-200)}
.hh-knopf-zart:hover{background:var(--gruen-200);color:var(--gruen-800)}
.hh-knopf-klein{height:40px;padding:0 16px;font-size:14px}
.hh-knopf .hh-dreher{display:none;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:hh-drehen .8s linear infinite}
.hh-knopf.hh-laedt .hh-dreher{display:block}
.hh-knopf.hh-laedt>svg{display:none}
@keyframes hh-drehen{to{transform:rotate(360deg)}}
.hh-textknopf{display:inline-flex;align-items:center;gap:6px;border:0;padding:0 0 2px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;font:650 14.5px var(--text);color:var(--gruen-700);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-size .5s var(--ease),color .3s}
.hh-textknopf:hover{background-size:100% 1.5px;color:var(--gruen-800);text-decoration:none}
.hh-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:var(--gruen-100);color:var(--gruen-800);font:650 12px var(--text);white-space:nowrap}
.hh-chip svg{width:13px;height:13px;flex:none}
.hh-chip-grau{background:#F3F0E9;color:#4A463F}
.hh-chip-kupfer{background:var(--kupfer-100);color:var(--kupfer-800)}
.hh-chip-himmel{background:var(--himmel-100);color:var(--himmel-700)}
.hh-chip-creme{background:var(--creme-100);color:#8A7A52}
.hh-chip-sofort{gap:5px;background:var(--kupfer-100);color:var(--kupfer-800)}
.hh-chip-sofort::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--kupfer)}
.hh-plakette{display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:var(--kupfer-700);color:#fff;font:800 10.5px/1 var(--text);font-variant-numeric:tabular-nums}
.hh-karte{border-radius:24px;background:#fff;box-shadow:var(--s1),inset 0 0 0 1px var(--linie);transition:box-shadow .6s var(--ease),transform .7s var(--ease)}
a.hh-karte,button.hh-karte,.hh-karte-hebt{cursor:pointer}
a.hh-karte:hover,button.hh-karte:hover,.hh-karte-hebt:hover{transform:translate3d(0,-3px,0);box-shadow:var(--s2),inset 0 0 0 1px var(--gruen-200)}
.hh-pfeil-rund{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;background:var(--gruen-100);color:var(--gruen-800);transition:background-color .4s,color .4s}
.hh-pfeil-rund svg{width:17px;height:17px;transition:transform .5s var(--ease)}
.hh-wechsel-ausloeser:hover .hh-pfeil-rund,a.hh-karte:hover .hh-pfeil-rund,button.hh-karte:hover .hh-pfeil-rund{background:var(--gruen);color:#fff}
/* Segment mit gleitender Markierung: style="--n:3;--wahl:0" */
.hh-segment{--n:2;--wahl:0;position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));padding:5px;border-radius:999px;background:var(--creme-100);box-shadow:inset 0 0 0 1px var(--creme-200)}
.hh-segment>button,.hh-segment>a{position:relative;z-index:1;display:grid;place-items:center;height:40px;padding:0 12px;border:0;border-radius:999px;background:none;font:650 14px var(--text);color:var(--grau);white-space:nowrap;text-decoration:none;cursor:pointer;transition:color .4s}
.hh-segment>[aria-checked="true"],.hh-segment>[aria-current="page"],.hh-segment>[aria-selected="true"]{color:var(--gruen-900)}
.hh-segment-daumen{position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 10px) / var(--n));border-radius:999px;background:#fff;box-shadow:var(--s1);transform:translate3d(calc(var(--wahl) * 100%),0,0);transition:transform .6s var(--weich)}
/* Schalter: <button role="switch" aria-checked="…"><span class="hh-schalter"></span></button> */
.hh-schalter{position:relative;display:inline-block;width:52px;height:30px;flex:none;border-radius:999px;background:#D9D2C3;transition:background-color .4s}
.hh-schalter::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .55s var(--weich)}
[aria-checked="true"]>.hh-schalter,.hh-schalter.an{background:var(--gruen)}
[aria-checked="true"]>.hh-schalter::after,.hh-schalter.an::after{transform:translateX(22px)}
/* Auswahl-Chips mit Haken */
.hh-wahl{display:flex;flex-wrap:wrap;gap:8px}
.hh-wahl>button{display:inline-flex;align-items:center;justify-content:center;gap:0;height:42px;padding:0 16px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--linie);font:650 14px var(--text);color:var(--tinte);cursor:pointer;transition:background-color .35s,box-shadow .35s,color .35s,gap .45s var(--weich)}
.hh-wahl>button:hover{box-shadow:inset 0 0 0 1.5px var(--gruen-300)}
.hh-wahl>button svg{width:0;height:15px;stroke-width:3;opacity:0;transition:width .45s var(--weich),opacity .3s}
.hh-wahl>button[aria-pressed="true"]{gap:7px;background:var(--gruen);color:#fff;box-shadow:none}
.hh-wahl>button[aria-pressed="true"] svg{width:15px;opacity:1}
/* Eingabefelder */
.hh-eingabe{width:100%;height:50px;padding:0 16px;border-radius:14px;border:1.5px solid var(--linie);background:#FFFDF8;font:500 15.5px var(--text);color:var(--tinte);outline:none;box-sizing:border-box;transition:border-color .25s,box-shadow .3s,background-color .3s}
.hh-eingabe::placeholder{color:#B3AC9F}
/* Mitwachsendes Schreibfeld der Chats (Daniel, 24.10.2026): eine Zeile bis etwa 8 Zeilen, danach scrollt es innen;
   die Höhe setzt HofhandAuth.feldAnpassen beim Tippen. Ungesteuert, damit beim Tippen nichts ruckelt. */
.hh-schreibfeld{display:block;flex:1;min-width:0;width:100%;min-height:46px;max-height:200px;padding:12px 16px;border-radius:18px;border:1.5px solid var(--linie);background:#FFFDF8;font:500 15px/1.45 var(--text);color:var(--tinte);resize:none;overflow-y:auto;box-sizing:border-box;outline:none;transition:border-color .2s}
.hh-schreibfeld::placeholder{color:#B3AC9F}
.hh-schreibfeld:focus{border-color:var(--gruen)}
/* Nur ein Fokus-Rahmen (der grüne Rand) – nicht zusätzlich der allgemeine Fokus-Ring der Seite (24.10.2026) */
.hh-schreibfeld:focus-visible{outline:none}
/* Bilder im Chat (seit 25.10.2026): Knopf neben dem Schreibfeld, Vorschau vor dem Senden, Bilder in der Sprechblase */
.hh-anhang-knopf{width:46px;height:46px;flex:none;border-radius:999px;border:1.5px solid var(--linie);background:#FFFDF8;color:#3B6B35;display:grid;place-items:center;cursor:pointer;padding:0}
.hh-anhang-knopf:hover{border-color:#3B6B35}
.hh-anhang-knopf.hh-anhang-klein{width:40px;height:40px;margin-bottom:3px}
.hh-anhang-knopf.hh-anhang-klein svg{width:18px;height:18px}
.hh-anhang-leiste{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hh-anhang-bild{position:relative;width:64px;height:64px;flex:none}
.hh-anhang-bild img{width:64px;height:64px;object-fit:cover;border-radius:12px;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.hh-anhang-bild button{position:absolute;top:-7px;right:-7px;width:24px;height:24px;padding:0;border:2px solid #fff;border-radius:50%;background:#23262A;color:#fff;font-size:15px;line-height:1;cursor:pointer}
.hh-anhang-status{font-size:13px;color:var(--grau)}
.hh-chat-bilder{display:grid;gap:4px;margin:-4px -8px 8px}
.hh-chat-bilder img{display:block;width:100%;max-width:260px;max-height:320px;object-fit:cover;border-radius:12px;cursor:zoom-in}
.hh-chat-bilder.mehrere{grid-template-columns:repeat(2,minmax(0,130px))}
.hh-chat-bilder.mehrere img{height:130px}
.hh-chat-bild-platz{display:block;width:200px;max-width:100%;height:150px;border-radius:12px;background:rgba(127,127,127,.16)}
.hh-eingabe:hover{border-color:#D6CDB8}
.hh-eingabe:focus{border-color:var(--gruen);background:#fff;box-shadow:0 0 0 4px rgba(59,107,53,.14)}
textarea.hh-eingabe{height:auto;min-height:110px;padding:13px 16px;line-height:1.5;resize:vertical}
.hh-eingabe.hh-fehler{border-color:var(--rot);box-shadow:0 0 0 4px rgba(192,57,43,.12)}
/* Klappe: weich auf- und zuklappen, Klasse hh-zu schließt */
.hh-klappe{display:grid;grid-template-rows:1fr;transition:grid-template-rows .55s var(--ease),opacity .4s var(--ease)}
.hh-klappe>*{min-height:0;overflow:hidden}
.hh-klappe.hh-zu{grid-template-rows:0fr;opacity:0}
/* Hinweis beim Darüberfahren: data-hh-tipp="Text" */
[data-hh-tipp]{position:relative}
[data-hh-tipp]::after{content:attr(data-hh-tipp);position:absolute;left:50%;bottom:calc(100% + 12px);z-index:30;width:max-content;max-width:250px;padding:10px 13px;border-radius:12px;background:var(--gruen-900);color:#fff;font:500 12.5px/1.4 var(--text);letter-spacing:0;text-transform:none;white-space:normal;text-align:left;box-shadow:var(--s2);opacity:0;transform:translate3d(-50%,6px,0);pointer-events:none;transition:opacity .35s var(--ease),transform .5s var(--weich)}
[data-hh-tipp]:hover::after,[data-hh-tipp]:focus-visible::after{opacity:1;transform:translate3d(-50%,0,0)}
/* Seitenblatt (rechts, auf dem Handy von unten) */
.hh-blatt{position:fixed;inset:0;z-index:80;visibility:hidden;transition:visibility 0s linear .7s}
.hh-blatt.hh-offen{visibility:visible;transition:none}
.hh-blatt-grund{position:absolute;inset:0;background:rgba(27,51,24,.3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .5s var(--ease)}
.hh-blatt.hh-offen .hh-blatt-grund{opacity:1}
.hh-blatt-panel{position:absolute;top:12px;right:12px;bottom:12px;width:min(580px,calc(100% - 24px));display:flex;flex-direction:column;border-radius:30px;background:#fff;box-shadow:var(--s3);overflow:hidden;transform:translate3d(110%,0,0);transition:transform .7s var(--ease);outline:none}
.hh-blatt.hh-offen .hh-blatt-panel{transform:none}
.hh-blatt.hh-sofort .hh-blatt-panel,.hh-blatt.hh-sofort .hh-blatt-grund{transition:none}
@media (max-width:760px){
  .hh-blatt-panel{top:auto;left:0;right:0;bottom:0;width:100%;height:92vh;height:92dvh;border-radius:28px 28px 0 0;transform:translate3d(0,105%,0)}
}
/* Kurze Meldung unten */
.hh-toast{position:fixed;left:50%;bottom:22px;z-index:95;max-width:calc(100% - 40px);padding:13px 18px;border-radius:16px;background:var(--gruen-900);color:#fff;font:500 14px var(--text);box-shadow:var(--s3);opacity:0;transform:translate3d(-50%,140%,0);transition:transform .7s var(--weich),opacity .5s var(--ease);pointer-events:none}
.hh-toast.hh-an{opacity:1;transform:translate3d(-50%,0,0)}
/* Übergang Karte → Blatt (View Transition, Name „hh-karte“) */
::view-transition-group(hh-karte){animation-duration:.62s;animation-timing-function:cubic-bezier(.22,1,.36,1);border-radius:26px;overflow:clip}
::view-transition-old(hh-karte),::view-transition-new(hh-karte){width:100%;height:100%;object-fit:none;object-position:0 0}
::view-transition-old(hh-karte){animation:hh-vt-weg .22s ease both}
::view-transition-new(hh-karte){animation:hh-vt-her .4s ease .08s both}
@keyframes hh-vt-weg{to{opacity:0}}
@keyframes hh-vt-her{from{opacity:0}}

/* ---------- Rahmen der eingeloggten Bereiche: Seitenleiste, Kopfzeile, Tableiste ---------- */
.hh-app{background:var(--bg);isolation:isolate}
/* Saatreihen (Daniels Wahl vom 04.10.2026): ein zartes grünes Punktraster überall; um die Maus herum werden die
   Punkte kräftiger, wie ein Lichtkegel über einem frisch gesäten Feld. Die Position (--x/--y am Element
   .hh-saat-licht mit data-hh-saat-licht) setzt hofhand-bewegung.js weich nachgleitend; ohne Maus (Handy) und bei „Bewegung: Aus“ bleibt nur das zarte Raster. */
.hh-saat-licht{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(59,107,53,.44) 1.1px,transparent 1.5px);background-size:22px 22px;-webkit-mask-image:radial-gradient(280px circle at var(--x,-999px) var(--y,-999px),#000,transparent 70%);mask-image:radial-gradient(280px circle at var(--x,-999px) var(--y,-999px),#000,transparent 70%)}
.hh-ruhig .hh-saat-licht{display:none}
/* Flur (Daniel, 21.10.2026, wie Startseite): warme Salbei-/Sandflächen und Getreide (Weizen, Dinkel, Roggen, Hafer, Gerste)
   fest hinter dem Saatbett der eingeloggten Ansichten (z-index -2 < -1). .hh-korn gilt auch für die Startseite. */
.hh-app-flur{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.hh-app-flaeche{position:absolute;inset:0;width:100%;height:100%}
.hh-korn{height:auto;max-width:none;pointer-events:none;fill:#8FA87B}
.hh-korn .s{fill:none;stroke:#8FA87B;stroke-width:3;stroke-linecap:round}
.hh-korn .g{fill:none;stroke:#8FA87B;stroke-width:1.5;stroke-linecap:round}
.hh-korn .a{fill:none;stroke:#8FA87B;stroke-width:1.7;stroke-linecap:round}
.hh-app-flur .hh-korn{position:absolute;bottom:-60px;width:clamp(170px,13vw,240px);opacity:.5;-webkit-mask-image:linear-gradient(#000 45%,transparent 92%);mask-image:linear-gradient(#000 45%,transparent 92%)}
.hh-app-korn-l{left:clamp(250px,19vw,300px)}
.hh-app-korn-r{right:-20px}
@media (max-width:760px){.hh-app-flur .hh-korn{display:none}}
.hh-app::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(rgba(59,107,53,.11) 1.1px,transparent 1.5px) 0 0/22px 22px,radial-gradient(48% 38% at 88% 0%,rgba(216,229,210,.55),transparent 70%),radial-gradient(40% 34% at 22% 0%,rgba(243,231,201,.6),transparent 70%)}
/* Ansicht erscheint: aus leichter Unschärfe, kurz und ruhig */
.hh-ansicht{animation:hh-ansicht .6s var(--weich) backwards}
@keyframes hh-ansicht{from{opacity:0;transform:translate3d(0,10px,0);filter:blur(5px)}}
/* Insel (Daniels Wahl vom 04.10.2026): die Leiste schwebt als abgerundete Glas-Karte über dem Hintergrund */
.hh-leiste{position:relative;z-index:30;width:256px;flex:none;display:flex;flex-direction:column;gap:18px;margin:14px 0 14px 14px;padding:24px 14px 14px;box-sizing:border-box;border-radius:28px;background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:var(--s3),inset 0 0 0 1px rgba(255,255,255,.8);transition:box-shadow .6s var(--ease)}
.hh-leiste:hover{box-shadow:0 10px 20px rgba(27,51,24,.07),0 44px 90px -26px rgba(27,51,24,.42),inset 0 0 0 1px #fff}
.hh-leiste-marke{display:block;padding:2px 10px 0;color:inherit;text-decoration:none}
.hh-leiste-marke:hover{color:inherit;text-decoration:none}
.hh-leiste-marke img{display:block;width:178px;max-width:100%;height:auto}
.hh-leiste-marke small{display:block;margin-top:9px;font-size:11px;font-weight:500;line-height:1.38;color:var(--grau)}
.hh-leiste-neu{width:100%;height:46px;flex:none;margin-top:auto;font-size:14.5px}
.hh-leiste-neu+.hh-leiste-fuss{margin-top:-6px}
.hh-leiste-nav{display:grid;gap:2px}
/* Lebendig: jeder Reiter sagt in einer zweiten Zeile, was dort los ist; beim Darüberfahren gleitet eine Vorschau heraus */
.hh-nav-punkt{position:relative;z-index:1;display:flex;align-items:center;gap:12px;height:56px;padding:0 12px;border-radius:14px;font-size:14.5px;font-weight:600;color:var(--grau);text-decoration:none;transition:color .4s,background-color .4s}
.hh-nav-text{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.hh-nav-text>small{display:block;margin-top:2px;overflow:hidden;font-size:11.5px;font-weight:500;color:var(--grau-2);text-overflow:ellipsis;white-space:nowrap;transition:color .4s}
.hh-nav-text>small.neu{color:var(--kupfer-700);font-weight:650}
.hh-nav-vorschau{position:absolute;left:calc(100% + 36px);top:50%;z-index:40;width:256px;padding:14px 16px;box-sizing:border-box;border-radius:20px;background:#fff;box-shadow:var(--s3),inset 0 0 0 1px var(--linie);color:var(--tinte);font-weight:400;white-space:normal;opacity:0;visibility:hidden;transform:translate3d(-10px,-50%,0) scale(.98);filter:blur(3px);pointer-events:none;transition:opacity .3s var(--ease),transform .5s var(--weich),filter .3s,visibility 0s linear .5s}
@media (hover:hover){.hh-nav-punkt:hover .hh-nav-vorschau{opacity:1;visibility:visible;transform:translate3d(0,-50%,0);filter:none;transition-delay:.15s,.15s,.15s,0s}}
.hh-nav-punkt[aria-current="page"] .hh-nav-vorschau{display:none}
.hh-nav-vorschau>b{display:block;font:650 15px/1.25 var(--kopf);font-variation-settings:'wdth' 112;color:var(--gruen-900)}
.hh-nv-zeile{display:flex;align-items:center;gap:9px;margin-top:9px;font-size:13px;line-height:1.35}
.hh-nv-zeile>i{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;background:var(--creme-100);box-shadow:inset 0 0 0 1px var(--creme);font:650 10px var(--kopf);font-style:normal;color:var(--gruen-700)}
.hh-nv-text{display:block;margin-top:6px;font-size:13px;line-height:1.45;color:var(--grau)}
.hh-nav-punkt:hover{color:var(--gruen-800);text-decoration:none}
.hh-nav-punkt[aria-current="page"],.hh-nav-punkt[aria-current="page"]:hover{color:var(--gruen-900);font-weight:700;background:#fff}
.hh-nav-punkt[aria-current="page"] .hh-nav-ic{color:var(--gruen)}
.hh-nav-punkt[aria-current="page"] .hh-nav-text>small{color:var(--grau)}
.hh-nav-punkt[aria-current="page"] .hh-nav-text>small.neu{color:var(--kupfer-700)}
.hh-nav-ic{display:grid;place-items:center;flex:none}
.hh-nav-ic svg{width:19px;height:19px}
.hh-nav-zahl{margin-left:auto;min-width:22px;height:22px;padding:0 7px;box-sizing:border-box;border-radius:99px;background:var(--kupfer-700);color:#fff;font-size:11.5px;font-weight:750;display:grid;place-items:center;font-variant-numeric:tabular-nums;transition:background-color .4s}
.hh-nav-punkt[aria-current="page"] .hh-nav-zahl{margin-right:14px}
.hh-leiste-fuss{margin-top:auto;display:grid;gap:4px;padding-top:12px;border-top:1px solid var(--linie)}
.hh-leiste-wer{display:flex;align-items:center;gap:11px;min-width:0;padding:8px;border-radius:14px;color:inherit;text-decoration:none;transition:background-color .3s}
.hh-leiste-wer:hover{background:var(--creme-100);color:inherit;text-decoration:none}
.hh-leiste-wer b{display:block;overflow:hidden;font-size:13.5px;font-weight:650;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.hh-leiste-wer small{display:block;font-size:12px;color:var(--grau)}
.hh-avatar{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:12px;background:var(--creme-100);box-shadow:inset 0 0 0 1px var(--creme);font:650 13px var(--kopf);font-variation-settings:'wdth' 112;color:var(--gruen-700);object-fit:cover}
.hh-abmelden{justify-self:start;margin-left:55px;padding:2px 0 4px;border:0;background:none;font:600 12px var(--text);color:var(--grau);cursor:pointer;transition:color .3s}
.hh-abmelden:hover{color:var(--rot)}
/* Gleitende Markierung: Container mit data-hh-gleiter, darin .hh-gleiter-marke (aktiv) und optional .hh-gleiter-schweben (Maus) */
[data-hh-gleiter]{position:relative}
.hh-gleiter-marke,.hh-gleiter-schweben{position:absolute;left:0;top:0;width:0;height:0;z-index:0;pointer-events:none;opacity:0;transition:transform .65s var(--weich),width .65s var(--weich),height .65s var(--weich),opacity .3s}
.hh-gleiter-schweben{transition:transform .45s var(--weich),width .45s var(--weich),height .45s var(--weich),opacity .3s}
/* Glas + Kupferpunkt (Daniels Wahl): weiße, leicht erhabene Pille, rechts ein sanft pulsierender Kupferpunkt */
.hh-leiste-nav .hh-gleiter-marke{border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(27,51,24,.06),0 10px 24px -12px rgba(27,51,24,.35),inset 0 0 0 1px var(--linie)}
.hh-leiste-nav .hh-gleiter-marke::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--kupfer);animation:hh-kupfer-puls 2.6s var(--ease) infinite}
@keyframes hh-kupfer-puls{0%{box-shadow:0 0 0 0 rgba(201,106,43,.45)}70%,100%{box-shadow:0 0 0 7px rgba(201,106,43,0)}}
.hh-leiste-nav .hh-gleiter-schweben{border-radius:14px;background:rgba(237,243,234,.85)}
.hh-gleitet>[aria-current="page"],.hh-gleitet>[aria-current="page"]:hover{background:transparent}
/* Kopfzeile über dem Inhalt */
.hh-kopf{flex:none;position:relative;z-index:20;display:flex;align-items:center;gap:12px;height:64px;padding:0 24px;box-sizing:border-box}
.hh-kopf-marke{display:block;margin-right:auto}
.hh-kopf-marke img{display:block;width:132px;height:auto}
.hh-kopf-werkzeuge{display:flex;align-items:center;gap:8px;margin-left:auto}
.hh-was-ist{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border:0;border-radius:999px;background:none;font:650 13.5px var(--text);color:var(--gruen-700);cursor:pointer;transition:background-color .3s}
.hh-was-ist:hover{background:var(--gruen-100)}
.hh-was-ist svg{width:16px;height:16px;flex:none}
.hh-glocke-huelle{position:relative}
.hh-glocke{position:relative;display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--tinte);box-shadow:var(--s1),inset 0 0 0 1px var(--linie);cursor:pointer;transition:box-shadow .35s,background-color .3s}
.hh-glocke:hover,.hh-glocke[aria-expanded="true"]{box-shadow:var(--s2),inset 0 0 0 1px var(--gruen-200)}
.hh-glocke svg{width:18px;height:18px}
.hh-glocke-zahl{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;box-sizing:border-box;border-radius:99px;background:var(--kupfer-700);color:#fff;font-size:10.5px;font-weight:800;line-height:1;display:grid;place-items:center;box-shadow:0 0 0 2.5px var(--bg);font-variant-numeric:tabular-nums}
.hh-meldungen-grund{position:fixed;inset:0;z-index:39}
.hh-meldungen{position:absolute;right:0;top:calc(100% + 10px);z-index:40;width:min(340px,calc(100vw - 32px));max-height:60vh;overflow-y:auto;padding:8px;box-sizing:border-box;border-radius:22px;background:#fff;box-shadow:var(--s3),inset 0 0 0 1px var(--linie);transform-origin:100% 0;animation:hh-meldungen .5s var(--weich) backwards}
@keyframes hh-meldungen{from{opacity:0;transform:translate3d(0,-6px,0) scale(.98);filter:blur(4px)}}
.hh-meldungen h4{margin:0;padding:8px 10px 6px;font:700 11px var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--grau-2)}
.hh-meldungen-leer{margin:0;padding:14px 10px 16px;font-size:13.5px;color:var(--grau)}
.hh-meldung{display:flex;gap:12px;padding:11px 10px;border-radius:14px;color:inherit;text-decoration:none;transition:background-color .3s}
.hh-meldung:hover{background:var(--creme-100);color:inherit;text-decoration:none}
.hh-meldung-punkt{width:8px;height:8px;flex:none;margin-top:7px;border-radius:50%;background:var(--kupfer)}
.hh-meldung>span:last-child{min-width:0}
.hh-meldung b{display:block;font-size:13.5px;font-weight:650}
.hh-meldung>span:last-child>span{display:block;overflow:hidden;font-size:12.5px;color:var(--grau);text-overflow:ellipsis;white-space:nowrap}
.hh-meldung time{display:block;margin-top:3px;font-size:11.5px;color:var(--grau-2);font-variant-numeric:tabular-nums}
/* Tableiste auf dem Handy: schwebende Leiste mit gleitender Markierung */
.hh-tabs{flex:none;z-index:18;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:6px 10px calc(10px + env(safe-area-inset-bottom));padding:6px;border-radius:24px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:var(--s3),inset 0 0 0 1px rgba(231,224,209,.9)}
.hh-tabs .hh-gleiter-marke{border-radius:18px;background:var(--gruen-100)}
.hh-tab{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:54px;border-radius:18px;font-size:9.8px;letter-spacing:-.02em;font-weight:600;color:var(--grau);white-space:nowrap;text-decoration:none;transition:color .35s,background-color .35s}
.hh-tab:hover{color:var(--gruen-800);text-decoration:none}
.hh-tab[aria-current="page"]{color:var(--gruen-800);font-weight:750;background:var(--gruen-100)}
.hh-tab-ic{position:relative;display:grid;place-items:center}
.hh-tab-ic svg{width:20px;height:20px}
.hh-tab-zahl{position:absolute;top:5px;left:calc(50% + 5px);min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:99px;background:var(--kupfer-700);color:#fff;font-size:9.5px;font-weight:800;line-height:1;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
/* breit: keine Kopfzeile, „Was ist Hofhand?“ und die Glocke schweben frei oben rechts über dem Inhalt */
.hh-schwebekopf>.hh-kopf{position:absolute;top:0;left:0;right:0;height:auto;padding:14px 24px 0;pointer-events:none}
.hh-schwebekopf>.hh-kopf .hh-kopf-werkzeuge{pointer-events:auto}
.hh-schwebekopf>.hh-kopf .hh-was-ist{background:rgba(255,253,249,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(231,224,209,.7)}
.hh-schwebekopf>.hh-kopf .hh-was-ist:hover{background:var(--gruen-100)}
.hh-schwebekopf .hh-ansicht{padding-top:58px}
@media (max-width:760px){
  .hh-kopf{height:58px;padding:0 14px;background:rgba(248,244,236,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--linie)}
  .hh-was-ist>span{display:none}
  .hh-was-ist{width:40px;padding:0;justify-content:center}
}

/* ---------- Inhalte der eingeloggten Bereiche ---------- */
.hh-seite{container-type:inline-size;max-width:1160px;margin:0 auto;padding:4px 24px 56px;box-sizing:border-box}
@media (max-width:760px){.hh-seite{padding:12px 14px 32px}}
.hh-abschnitt-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-bottom:14px}
.hh-abschnitt-kopf h2{margin:0;font-size:22px;line-height:1.15;color:var(--gruen-900)}
.hh-abschnitt-kopf p{margin:4px 0 0;font-size:14px;color:var(--grau)}
.hh-fuss{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;margin-top:56px;padding-top:20px;border-top:1px solid var(--linie);font-size:13px;font-weight:600}
.hh-fuss a{color:var(--grau);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .5s var(--ease),color .3s}
.hh-fuss a:hover{background-size:100% 1.5px;color:var(--gruen-700);text-decoration:none}
/* Kopf der Startseite: Datum, Gruß und Willkommenstext auf dem ruhigen Grund */
.hh-begruessung{display:flex;align-items:flex-end;flex-wrap:wrap;gap:10px 28px;padding:30px 2px 18px;border-bottom:1px solid rgba(201,183,140,.55)}
.hh-begruessung>div{margin-right:auto;min-width:0}
.hh-begruessung .hh-gruss-datum{color:#8A7A55}
.hh-begruessung h1{margin:10px 0 0;font-size:clamp(30px,3.3vw,44px);line-height:1;font-weight:700;font-variation-settings:'wdth' 118;letter-spacing:-.035em;color:var(--gruen-900)}
.hh-begruessung p{margin:0 0 4px;font-size:14.5px;line-height:1.55;color:var(--grau);text-align:right}
/* der kleine grüne Strich wandert beim Öffnen einmal ruhig von links nach rechts und bleibt dort stehen */
.hh-begr-linie{position:relative;height:3px;margin:-2px 0 30px}
.hh-begr-linie>i{position:absolute;left:0;top:0;width:56px;height:3px;border-radius:3px;background:var(--gruen);animation:hh-linie-wandert 2.6s cubic-bezier(.65,0,.35,1) .5s both}
@keyframes hh-linie-wandert{0%{left:0;width:56px}45%{width:110px}100%{left:calc(100% - 56px);width:56px}}
@media (max-width:760px){.hh-begruessung{padding-top:18px}.hh-begruessung p{text-align:left}}
/* Gruß oben auf der Startseite (Banner, nicht mehr verwendet) */
.hh-gruss{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:clamp(200px,22vw,268px);margin-bottom:16px;padding:clamp(22px,3vw,36px);box-sizing:border-box;border-radius:30px;overflow:hidden;color:#fff;background:var(--gruen-800)}
.hh-gruss img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 60%;transform:scale(1.07);animation:hh-gruss-bild 2.6s var(--weich) backwards}
@keyframes hh-gruss-bild{from{transform:scale(1.16)}}
.hh-gruss::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(27,51,24,.84),rgba(27,51,24,.5) 42%,rgba(27,51,24,.06) 78%),linear-gradient(0deg,rgba(27,51,24,.4),transparent 55%)}
.hh-gruss-datum{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#F1BC92}
.hh-gruss h1{margin:10px 0 0;font-size:clamp(34px,4.4vw,56px);line-height:1;font-weight:700;font-variation-settings:'wdth' 118;letter-spacing:-.035em;color:#fff}
.hh-gruss p{margin:12px 0 0;max-width:44ch;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.82)}
/* Kennzahl-Kacheln */
.hh-kz-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:38px}
@container (max-width:640px){.hh-kz-reihe{grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:30px}}
.hh-kz{position:relative;display:flex;flex-direction:column;padding:18px 20px;border-radius:24px;background:#fff;box-shadow:var(--s1),inset 0 0 0 1px var(--linie);color:inherit;text-decoration:none;overflow:hidden;transition:box-shadow .6s var(--ease),transform .7s var(--ease)}
.hh-kz:hover{transform:translate3d(0,-3px,0);box-shadow:var(--s2),inset 0 0 0 1px var(--gruen-200);color:inherit;text-decoration:none}
.hh-kz-oben{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hh-kz-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--gruen-100);color:var(--gruen-700)}
.hh-kz-ic svg{width:19px;height:19px}
.hh-kz .hh-pfeil-rund{width:34px;height:34px}
.hh-kz-zahl{display:flex;align-items:baseline;gap:10px;margin-top:16px;font:700 44px/1 var(--kopf);font-variation-settings:'wdth' 116;letter-spacing:-.03em;color:var(--gruen-900);font-variant-numeric:tabular-nums}
.hh-kz-zahl .hh-chip{position:relative;top:-6px;letter-spacing:0}
.hh-kz-wechsel{margin-top:8px;font-size:14px}
.hh-kz-wechsel>:first-child{color:var(--grau)}
.hh-kz-wechsel>:nth-child(2){overflow:hidden;color:var(--gruen-800);font-weight:600;text-overflow:ellipsis;white-space:nowrap}
@container (max-width:640px){.hh-kz{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:14px 16px}.hh-kz-oben{order:3;margin-left:auto}.hh-kz-oben .hh-kz-ic{display:none}.hh-kz-zahl{margin:0;font-size:34px}.hh-kz-wechsel{flex:1;min-width:0;margin:0}}
/* Startseite: Inhalt links, Stand rechts */
.hh-start-raster{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:28px;align-items:start}
.hh-start-haupt{display:grid;gap:40px;min-width:0}
.hh-start-seite{position:sticky;top:8px;display:grid;gap:14px}
@container (max-width:1000px){
  .hh-start-raster{grid-template-columns:minmax(0,1fr);gap:36px}
  .hh-start-haupt{display:contents}
  .hh-start-haupt>:first-child{order:1}.hh-start-seite{order:2;position:static;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.hh-start-haupt>:nth-child(2){order:3}
}
@container (max-width:640px){.hh-start-seite{grid-template-columns:minmax(0,1fr)}.hh-umkreis{height:300px}}
/* Personen-Karten */
.hh-personen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@container (max-width:640px){.hh-personen{grid-template-columns:minmax(0,1fr)}}
.hh-person{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:16px;border-radius:22px;background:#fff;box-shadow:var(--s1),inset 0 0 0 1px var(--linie);color:inherit;text-decoration:none;overflow:hidden;transition:box-shadow .6s var(--ease),transform .7s var(--ease)}
.hh-person:hover{transform:translate3d(0,-3px,0);box-shadow:var(--s2),inset 0 0 0 1px var(--gruen-200);color:inherit;text-decoration:none}
.hh-person-kopf{display:flex;align-items:center;gap:12px;min-width:0}
.hh-p-av{display:grid;place-items:center;width:44px;height:44px;flex:none;box-sizing:border-box;border-radius:50%;border:1px solid var(--creme);background:var(--creme-100);font:650 14px var(--kopf);font-variation-settings:'wdth' 112;color:var(--gruen-700)}
.hh-person-name{min-width:0;flex:1}
.hh-person-name b{display:block;overflow:hidden;font:650 15.5px/1.3 var(--kopf);font-variation-settings:'wdth' 112;color:var(--tinte);text-overflow:ellipsis;white-space:nowrap}
.hh-person-name>span{display:block;margin-top:2px;overflow:hidden;font-size:13px;color:var(--grau);text-overflow:ellipsis;white-space:nowrap}
.hh-person-info{display:flex;flex-wrap:wrap;gap:6px}
.hh-person-mehr{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;font-weight:600;color:var(--gruen-800)}
.hh-person-mehr small{display:block;font-size:12.5px;font-weight:500;color:var(--grau)}
.hh-person .hh-pfeil-rund{width:32px;height:32px}
/* „Ihr Stand“: Zahlen nur, wo es etwas zu zählen gibt – sonst ein Satz mit dem nächsten Schritt */
.hh-stand{padding:8px;border-radius:24px;background:#fff;box-shadow:var(--s1),inset 0 0 0 1px var(--linie)}
.hh-stand-kopf{padding:10px 12px 6px;font:700 11px var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--grau-2)}
.hh-stand-zeile{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;color:inherit;text-decoration:none;transition:background-color .3s}
.hh-stand-zeile:hover{background:var(--creme-100);color:inherit;text-decoration:none}
.hh-stand-zeile{position:relative}
.hh-stand-zeile+.hh-stand-zeile::before{content:"";position:absolute;left:62px;right:12px;top:0;height:1px;background:var(--linie);transition:opacity .3s}
.hh-stand-zeile:hover::before,.hh-stand-zeile:hover+.hh-stand-zeile::before{opacity:0}
.hh-stand-ic{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:12px;background:var(--gruen-100);color:var(--gruen-700)}
.hh-stand-ic svg{width:18px;height:18px}
.hh-stand-text{min-width:0;flex:1}
.hh-stand-text>b{display:block;font-size:14.5px;font-weight:650;color:var(--tinte)}
.hh-stand-text>small{display:block;margin-top:1px;font-size:13px;color:var(--grau)}
.hh-stand-zahl{min-width:24px;height:24px;font-size:12px}
.hh-stand-aktion{flex:none;font-size:13px;font-weight:650;color:var(--gruen-700);white-space:nowrap;transition:transform .5s var(--weich)}
.hh-stand-zeile:hover .hh-stand-aktion{transform:translateX(3px)}
/* Umkreis-Karte mit kleinem Radar */
/* Glasfenster (Daniels Wahl): die Karte füllt die ganze Kachel, der Text liegt unten auf einer Milchglas-Leiste */
.hh-umkreis{position:relative;display:block;height:340px;border-radius:26px;background:#E4E6D6;color:var(--gruen-900);text-decoration:none;overflow:hidden;isolation:isolate;box-shadow:var(--s2),inset 0 0 0 1px rgba(255,255,255,.6);transition:transform .7s var(--ease),box-shadow .6s var(--ease)}
.hh-umkreis:hover{transform:translate3d(0,-3px,0);box-shadow:var(--s3),inset 0 0 0 1px rgba(255,255,255,.8);color:var(--gruen-900);text-decoration:none}
.hh-umkreis::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.hh-uk-radar{width:100%;aspect-ratio:1.55;margin:-4px 0 6px}
.hh-uk-radar svg{display:block;width:100%;height:100%;overflow:visible}
/* echte kleine Karte statt Radar: gleiche Größe, ruhig getönt, nicht bedienbar */
.hh-uk-karte{position:absolute;inset:0;z-index:0;background:#E4E6D6}
.hh-uk-karte .leaflet-container{background:#E4E6D6}
.hh-uk-karte .leaflet-tile-pane{filter:saturate(.85)}
.hh-uk-karte .leaflet-bottom{top:0;bottom:auto}
.hh-uk-karte .leaflet-control-attribution{margin:8px 8px 0 0;padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.75);font:500 9.5px var(--text);color:#4A463F}
.hh-uk-glas{position:absolute;left:10px;right:10px;bottom:10px;z-index:3;padding:14px 16px 13px;border-radius:18px;background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 8px 24px -10px rgba(27,51,24,.35),inset 0 0 0 1px rgba(255,255,255,.85)}
.hh-umkreis:hover .hh-uk-karte .leaflet-tile-pane{filter:saturate(1)}
.hh-mk-hof span{position:absolute;inset:0;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.35),0 2px 6px rgba(0,0,0,.35)}
.hh-mk-hof span::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--gruen)}
.hh-mk-punkt{animation:hh-mk-punkt .7s var(--weich) backwards}
@keyframes hh-mk-punkt{from{opacity:0;stroke-width:12px}}
.hh-uk-ring{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1;stroke-dasharray:3 4}
.hh-uk-ring.aussen{stroke:rgba(227,162,116,.6);stroke-dasharray:5 5}
.hh-uk-punkt{fill:var(--kupfer-300);transform-box:fill-box;transform-origin:50% 50%;transition:opacity .7s var(--weich),transform .9s var(--weich)}
.hh-z-warte .hh-uk-punkt{opacity:0;transform:scale(.4)}
.hh-uk-hof{fill:#fff}
.hh-uk-hof-ring{fill:none;stroke:#fff;stroke-width:1.5;opacity:.6}
.hh-uk-zahl{display:flex;align-items:baseline;gap:7px;font:700 22px/1.1 var(--kopf);font-variation-settings:'wdth' 116;letter-spacing:-.02em;color:var(--gruen-900)}
.hh-uk-zahl small{font:inherit;letter-spacing:inherit;color:inherit}
.hh-umkreis p{margin:4px 0 0;font-size:13px;line-height:1.4;color:var(--grau)}
.hh-uk-fuss{display:flex;align-items:center;justify-content:space-between;margin-top:8px;font-size:14px;font-weight:650;color:var(--gruen-700)}
.hh-uk-fuss svg{width:17px;height:17px;transition:transform .5s var(--ease)}
.hh-umkreis:hover .hh-uk-fuss svg{transform:translateX(4px)}
/* Profil vervollständigen */
.hh-profil-fort{padding:20px;border-radius:24px;background:var(--creme-100);box-shadow:inset 0 0 0 1px var(--creme-200)}
.hh-profil-fort h3{margin:0;font-size:16.5px;color:var(--gruen-900)}
.hh-pf-stand{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:10px;font-size:13px;color:var(--grau)}
.hh-pf-stand b{font:700 15px var(--kopf);color:var(--gruen-800);font-variant-numeric:tabular-nums}
.hh-profil-fort .hh-balken{margin-top:8px}
.hh-pf-liste{display:grid;gap:2px;margin:14px 0 0;padding:0;list-style:none}
.hh-pf-zeile{display:flex;align-items:center;gap:10px;margin:0 -8px;padding:8px;border-radius:12px;font-size:13.5px;color:var(--tinte);text-decoration:none;transition:background-color .3s}
a.hh-pf-zeile:hover{background:rgba(255,255,255,.7);color:var(--tinte);text-decoration:none}
.hh-pf-zeile.erledigt{color:var(--grau)}
.hh-pf-ok{display:grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;background:var(--gruen);color:#fff}
.hh-pf-ok svg{width:13px;height:13px}
.hh-pf-offen{width:22px;height:22px;flex:none;box-sizing:border-box;border-radius:50%;border:2px solid #CFC3A4}
.hh-pf-ergaenzen{margin-left:auto;font-size:12.5px;font-weight:650;color:var(--gruen-700);opacity:0;transform:translate3d(-4px,0,0);transition:opacity .35s,transform .5s var(--weich)}
a.hh-pf-zeile:hover .hh-pf-ergaenzen,a.hh-pf-zeile:focus-visible .hh-pf-ergaenzen{opacity:1;transform:none}
@media (hover:none){.hh-pf-ergaenzen{opacity:1;transform:none}}
/* Neuigkeiten */
.hh-neuigkeit{padding:22px 24px}
.hh-neuigkeit h3{margin:0;font-size:18px;line-height:1.3;color:var(--gruen-900)}
.hh-neu-datum{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12.5px;color:var(--grau-2)}
.hh-neu-datum svg{width:14px;height:14px;flex:none}
.hh-update{display:inline-flex;align-items:center;height:24px;margin-top:10px;padding:0 10px;border-radius:999px;background:var(--kupfer-700);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.hh-neu-text{margin-top:16px;padding-top:16px;border-top:1px solid var(--linie);font-size:14.5px}
.hh-neu-fuss{display:flex;align-items:center;gap:18px;margin-top:6px;padding-top:14px;border-top:1px solid var(--linie)}
.hh-neu-knopf{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;font:650 13.5px var(--text);color:var(--grau);cursor:pointer;transition:color .3s}
.hh-neu-knopf svg{width:17px;height:17px;transition:transform .5s var(--weich)}
.hh-neu-knopf:active svg{transform:scale(1.2)}
.hh-kommentieren{display:flex;gap:10px;align-items:flex-end;margin-top:14px}
.hh-kommentieren .hh-eingabe{flex:1;min-height:46px;height:auto;padding:11px 14px;font-size:14.5px}

/* ---------- Seitenkopf und Anzeigen (Betriebsübersicht) ---------- */
.hh-seitenkopf{display:flex;align-items:flex-end;gap:16px 24px;flex-wrap:wrap;margin:4px 0 24px}
.hh-seitenkopf>div{margin-right:auto;min-width:0}
.hh-seitenkopf h1{margin:0;font-size:clamp(30px,3.2vw,42px);line-height:1.05;font-weight:700;font-variation-settings:'wdth' 116;letter-spacing:-.028em;color:var(--gruen-900)}
.hh-seitenkopf p{margin:8px 0 0;font-size:15px;color:var(--grau)}
.hh-kz-chips{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:-6px 0 24px}
.hh-kz-chip{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 18px 0 8px;box-sizing:border-box;border-radius:999px;background:#fff;box-shadow:var(--s1),inset 0 0 0 1px var(--linie);font-size:14px;font-weight:650;color:var(--tinte);text-decoration:none;transition:box-shadow .45s var(--ease)}
.hh-kz-chip:hover{box-shadow:var(--s2),inset 0 0 0 1px var(--gruen-200);color:var(--tinte);text-decoration:none}
.hh-kz-chip-ic{position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--gruen-100);color:var(--gruen-700)}
.hh-kz-chip-ic svg{width:16px;height:16px}
.hh-kz-chip-ic i{position:absolute;top:-4px;right:-5px;min-width:17px;height:17px;padding:0 4px;box-sizing:border-box;border-radius:99px;background:var(--kupfer-700);color:#fff;font:800 10px/17px var(--text);font-style:normal;text-align:center;box-shadow:0 0 0 2px #fff}
.hh-follower{display:inline-flex;align-items:center;gap:6px;padding:0 6px;font-size:13px;color:var(--grau);cursor:help}
.hh-follower b{color:var(--tinte);font-variant-numeric:tabular-nums}
.hh-anzeigen{display:grid;gap:14px}
.hh-anzeige{position:relative;border-radius:26px;background:#fff;box-shadow:var(--s1),inset 0 0 0 1px var(--linie);transition:box-shadow .6s var(--ease),transform .7s var(--ease),background-color .5s}
.hh-anzeige:hover{transform:translate3d(0,-2px,0);box-shadow:var(--s2),inset 0 0 0 1px var(--gruen-200)}
.hh-anzeige.ruht{background:rgba(255,255,255,.72)}
.hh-anzeige.ruht .hh-a-titel{color:var(--grau)}
.hh-anzeige.offen-menue{z-index:5}
.hh-anzeige-haupt{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:center;padding:22px 24px 18px;border-radius:26px 26px 0 0;color:inherit;text-decoration:none}
.hh-anzeige-haupt:hover{color:inherit;text-decoration:none}
.hh-a-titel{display:block;margin:0;overflow-wrap:break-word;font:650 21px/1.2 var(--kopf);font-variation-settings:'wdth' 112;letter-spacing:-.015em;color:var(--gruen-900);transition:color .4s}
.hh-a-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:14px;color:var(--grau)}
.hh-a-meta>span{display:inline-flex;align-items:center;gap:6px}
.hh-a-meta svg{width:15px;height:15px;flex:none;color:var(--grau-2)}
.hh-a-eingestellt{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;font-size:12.5px;color:var(--grau-2)}
.hh-a-rechts{display:flex;align-items:center;gap:16px}
.hh-av-stapel{display:flex;padding-left:7px}
.hh-av-stapel>span{position:relative;display:grid;place-items:center;width:36px;height:36px;margin-left:-7px;border-radius:50%;background:var(--creme-100);box-shadow:0 0 0 2.5px #fff,inset 0 0 0 1px var(--creme);font:650 11.5px var(--kopf);letter-spacing:-.02em;color:var(--gruen-700);transition:transform .6s var(--weich)}
.hh-av-stapel>span:nth-child(1){z-index:3}.hh-av-stapel>span:nth-child(2){z-index:2}.hh-av-stapel>span:nth-child(3){z-index:1}
.hh-anzeige:hover .hh-av-stapel>span:nth-child(2){transform:translate3d(3px,0,0)}
.hh-anzeige:hover .hh-av-stapel>span:nth-child(3){transform:translate3d(6px,0,0)}
.hh-a-bew{text-align:right}
.hh-a-bew b{display:block;font:700 26px/1 var(--kopf);font-variation-settings:'wdth' 116;color:var(--gruen-900);font-variant-numeric:tabular-nums}
.hh-a-bew small{display:block;margin-top:4px;font-size:12.5px;color:var(--grau);white-space:nowrap}
.hh-a-bew .hh-chip{margin-top:6px;height:22px;font-size:11px}
.hh-a-keine{font-size:14px;font-weight:600;color:var(--grau-2);white-space:nowrap}
@media (hover:hover){.hh-anzeige:hover .hh-anzeige-haupt .hh-pfeil-rund{background:var(--gruen);color:#fff}.hh-anzeige:hover .hh-anzeige-haupt .hh-pfeil-rund svg{transform:translateX(2px)}}
.hh-anzeige-fuss{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;padding:12px 14px 14px 24px;border-top:1px dashed var(--linie)}
.hh-status{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:650;color:var(--gruen-800)}
.hh-status i{width:8px;height:8px;border-radius:50%;background:var(--gruen);box-shadow:0 0 0 3px var(--gruen-100)}
.hh-status.st-vergeben,.hh-status.st-besetzt{color:var(--himmel-700)}
.hh-status.st-vergeben i,.hh-status.st-besetzt i{background:#7FB0D4;box-shadow:0 0 0 3px var(--himmel-200)}
.hh-status.st-abgelaufen{color:var(--grau)}
.hh-status.st-abgelaufen i{background:#C4BCAA;box-shadow:0 0 0 3px #F3F0E9}
.hh-laufzeit{flex:1;display:flex;align-items:center;gap:12px;min-width:200px}
.hh-lz-balken{flex:1;max-width:200px;height:6px;border-radius:6px;background:var(--creme-200);overflow:hidden}
.hh-lz-balken i{display:block;height:100%;border-radius:6px;background:var(--kupfer);transform:scaleX(var(--hh-wert,0));transform-origin:0 50%;transition:transform 1.4s var(--weich)}
.hh-lz-balken.knapp i{background:var(--rot)}
.hh-lz-text{font-size:12.5px;color:var(--grau);font-variant-numeric:tabular-nums}
.hh-aktionen{position:relative;margin-left:auto}
.hh-aktionen-knopf{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:0;border-radius:999px;background:none;font:650 13.5px var(--text);color:var(--gruen-800);cursor:pointer;transition:background-color .3s}
.hh-aktionen-knopf:hover,.hh-aktionen-knopf[aria-expanded="true"]{background:var(--creme-100)}
.hh-aktionen-knopf svg{width:18px;height:18px}
.hh-menue-grund{position:fixed;inset:0;z-index:10}
.hh-menue{position:absolute;right:0;bottom:calc(100% + 8px);z-index:12;width:262px;padding:6px;box-sizing:border-box;border-radius:18px;background:#fff;box-shadow:var(--s3),inset 0 0 0 1px var(--linie);transform-origin:100% 100%;animation:hh-menue .45s var(--weich) backwards}
@keyframes hh-menue{from{opacity:0;transform:translate3d(0,6px,0) scale(.98);filter:blur(3px)}}
.hh-menue button{display:flex;align-items:center;gap:11px;width:100%;min-height:42px;padding:0 12px;border:0;border-radius:12px;background:none;font:600 14px var(--text);text-align:left;color:var(--tinte);cursor:pointer;transition:background-color .25s}
.hh-menue button:hover{background:var(--creme-100)}
.hh-menue button:disabled{opacity:.5;cursor:default}
.hh-menue button svg{width:17px;height:17px;flex:none;color:var(--grau)}
.hh-menue hr{margin:5px 8px;border:0;border-top:1px solid var(--linie)}
.hh-menue .gefahr,.hh-menue .gefahr svg{color:var(--rot)}
.hh-menue .gefahr:hover{background:var(--rot-100)}
.hh-menue-hinweis{padding:8px 12px 6px;font-size:12.5px;color:var(--grau)}
.hh-leer{padding:56px 20px;text-align:center}
.hh-leer h3{margin:0;font-size:22px;color:var(--gruen-900)}
.hh-leer p{max-width:40ch;margin:10px auto 22px;font-size:15px;line-height:1.55;color:var(--grau)}
@container (max-width:640px){
  .hh-anzeige-haupt{grid-template-columns:minmax(0,1fr);padding:18px 18px 14px}
  .hh-a-rechts{justify-content:space-between}
  .hh-a-bew{text-align:left}
  .hh-anzeige-fuss{padding:10px 12px 12px 18px}
  .hh-laufzeit{order:3;flex-basis:100%;min-width:0}
}

/* ---------- Seitenblatt, das beim Erscheinen hereingleitet (per sc-if eingehängt) ---------- */
.hh-blatt-an{position:fixed;inset:0;z-index:56;visibility:visible}
.hh-blatt-an .hh-blatt-grund{opacity:1;animation:hh-blatt-grund .5s var(--ease) backwards}
@keyframes hh-blatt-grund{from{opacity:0}}
.hh-blatt-an .hh-blatt-panel{transform:none;animation:hh-blatt-rein .7s var(--ease) backwards}
@keyframes hh-blatt-rein{from{transform:translate3d(110%,0,0)}}
@keyframes hh-blatt-rein-unten{from{transform:translate3d(0,105%,0)}}
.hh-blatt-an.hh-schliesst .hh-blatt-grund{opacity:0;transition:opacity .4s var(--ease)}
.hh-blatt-an.hh-schliesst .hh-blatt-panel{transform:translate3d(110%,0,0);transition:transform .42s cubic-bezier(.5,0,.75,0)}
@media (max-width:760px){
  .hh-blatt-an .hh-blatt-panel{animation-name:hh-blatt-rein-unten}
  .hh-blatt-an.hh-schliesst .hh-blatt-panel{transform:translate3d(0,105%,0)}
}
.hh-blatt-griff{display:none;width:44px;height:5px;margin:10px auto 0;border-radius:99px;background:#DDD5C4}
@media (max-width:760px){.hh-blatt-griff{display:block}}
.hh-blatt-kopf{flex:none;display:flex;align-items:center;gap:10px;min-height:40px;padding:14px 14px 6px 20px}
.hh-blatt-zurueck{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 8px;border-radius:999px;background:var(--creme-100);font:650 13.5px var(--text);color:var(--gruen-800);text-decoration:none;transition:background-color .3s}
.hh-blatt-zurueck:hover{background:var(--creme-200);color:var(--gruen-800);text-decoration:none}
.hh-blatt-zurueck svg{width:16px;height:16px;transition:transform .5s var(--weich)}
.hh-blatt-zurueck:hover svg{transform:translateX(-2px)}
.hh-blatt-zu{display:grid;place-items:center;width:40px;height:40px;margin-left:auto;padding:0;border:0;border-radius:50%;background:#F3F0E9;color:var(--tinte);cursor:pointer;transition:background-color .3s,transform .6s var(--weich)}
.hh-blatt-zu:hover{background:var(--creme-200);transform:rotate(90deg)}
.hh-blatt-zu svg{width:18px;height:18px}
.hh-blatt-titel{flex:none;padding:4px 24px 16px;border-bottom:1px solid var(--linie)}
.hh-blatt-titel small{display:block;font:700 11px var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--kupfer-700)}
.hh-blatt-titel h2{margin:6px 0 0;font-size:24px;line-height:1.15;color:var(--gruen-900)}
.hh-blatt-titel p{margin:6px 0 0;font-size:13.5px;color:var(--grau);font-variant-numeric:tabular-nums}
.hh-blatt-inhalt{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 20px 24px}
.hh-blatt-seite-vor{animation:hh-blatt-seite-vor .55s var(--weich) backwards}
.hh-blatt-seite-zurueck{animation:hh-blatt-seite-zurueck .55s var(--weich) backwards}
@keyframes hh-blatt-seite-vor{from{opacity:0;transform:translate3d(28px,0,0);filter:blur(4px)}}
@keyframes hh-blatt-seite-zurueck{from{opacity:0;transform:translate3d(-28px,0,0);filter:blur(4px)}}
.hh-blatt-fuss{flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:14px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--linie);background:rgba(255,255,255,.94)}
.hh-blatt-fuss .hh-knopf{height:46px}
.hh-zuruecknehmen{margin-left:auto;padding:8px 4px;border:0;background:none;font:600 13.5px var(--text);color:var(--rot);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.hh-zuruecknehmen:hover{color:var(--rot-700)}
/* Bewerber in der Liste */
.hh-bewerber-liste{display:grid;gap:10px}
.hh-bewerber{display:flex;align-items:center;gap:12px;padding:14px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--linie);color:inherit;text-decoration:none;transition:box-shadow .45s var(--ease),transform .6s var(--ease)}
.hh-bewerber:hover{transform:translate3d(0,-2px,0);box-shadow:var(--s2),inset 0 0 0 1px var(--gruen-200);color:inherit;text-decoration:none}
.hh-bewerber .hh-p-av,.hh-bd-kopf .hh-p-av{overflow:hidden}
.hh-p-av img{display:block;width:100%;height:100%;object-fit:cover}
.hh-bewerber-text{min-width:0;flex:1}
.hh-bewerber-text b{display:flex;align-items:center;gap:6px;overflow:hidden;font-size:15px;font-weight:700;white-space:nowrap}
.hh-bewerber-text b svg{width:14px;height:14px;flex:none;color:var(--grau-2)}
.hh-bewerber-text small{display:block;margin-top:2px;font-size:12.5px;color:var(--grau);font-variant-numeric:tabular-nums}
.hh-bewerber-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.hh-bewerber-chips .hh-chip{height:22px;font-size:11.5px}
.hh-bewerber .hh-pfeil-rund{width:32px;height:32px}
@media (hover:hover){.hh-bewerber:hover .hh-pfeil-rund{background:var(--gruen);color:#fff}}
/* Bewerber im Detail */
.hh-bd-kopf{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.hh-bd-kopf .hh-p-av{width:64px;height:64px;font-size:21px}
.hh-bd-kopf h3{margin:0;font-size:26px;line-height:1.15;color:var(--gruen-900)}
.hh-bd-kopf p{margin:5px 0 0;font-size:14px;color:var(--grau);font-variant-numeric:tabular-nums}
.hh-bd-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.hh-bd-karte{margin-bottom:12px;padding:16px 18px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--linie)}
.hh-bd-karte.creme{background:var(--creme-100);box-shadow:inset 0 0 0 1px var(--creme-200)}
.hh-bd-karte p{margin:0;font-size:15px;line-height:1.6;color:#3D4045;white-space:pre-line}
.hh-bd-label{display:block;margin-bottom:10px;font:700 11px var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--grau)}
.hh-bd-zwei{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px;margin-bottom:12px}
.hh-bd-zwei .hh-bd-karte{margin:0}
.hh-abgleich{display:grid;gap:12px}
.hh-abgleich>div{display:flex;align-items:flex-start;gap:11px}
.hh-abgleich b{display:block;font-size:14.5px;font-weight:600;line-height:1.35}
.hh-abgleich small{display:block;margin-top:2px;font-size:13px}

/* ---------- Stelle anbieten: Formular links, Live-Vorschau rechts ---------- */
.hh-zurueck-link{display:inline-flex;align-items:center;gap:7px;margin:2px 0 14px;font-size:14px;font-weight:600;color:var(--grau);text-decoration:none;transition:color .3s}
.hh-zurueck-link:hover{color:var(--gruen-700);text-decoration:none}
.hh-zurueck-link svg{width:16px;height:16px;transition:transform .5s var(--weich)}
.hh-zurueck-link:hover svg{transform:translateX(-3px)}
.hh-neu-raster{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
@container (max-width:900px){.hh-neu-raster{grid-template-columns:minmax(0,1fr)}.hh-vorschau{position:static!important}}
.hh-formular{display:grid;gap:16px;min-width:0}
.hh-formkarte{padding:24px;border-radius:26px;background:#fff;box-shadow:var(--s1),inset 0 0 0 1px var(--linie)}
@container (max-width:640px){.hh-formkarte{padding:18px}}
.hh-formkarte h3{margin:0;font-size:18px;line-height:1.2;color:var(--gruen-900)}
.hh-hilfe{margin:4px 0 16px;font-size:13.5px;line-height:1.45;color:var(--grau)}
.hh-felder{display:grid;gap:16px}
.hh-zeile3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hh-zeile3 .hh-eingabe{min-width:0;max-width:100%}
.hh-eingabe[type="date"]{padding:0 12px;-webkit-appearance:none;appearance:none}
@container (max-width:640px){.hh-zeile3{grid-template-columns:1fr 1fr}.hh-zeile3>:last-child{grid-column:1/-1}}
.hh-f{display:grid;gap:7px;min-width:0}
.hh-f>span,.hh-f-label{font-size:12.5px;font-weight:700;letter-spacing:.01em;color:var(--grau)}
.hh-f-label{display:block;margin-bottom:9px}
.hh-ort-feld{position:relative}
.hh-vorschlaege{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:14;padding:6px;border-radius:18px;background:#fff;box-shadow:var(--s3),inset 0 0 0 1px var(--linie);animation:hh-menue .4s var(--weich) backwards}
.hh-vorschlaege button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:12px;background:none;text-align:left;cursor:pointer;transition:background-color .25s}
.hh-vorschlaege button:hover{background:var(--gruen-100)}
.hh-vorschlaege b{min-width:0;flex:1;overflow:hidden;font-size:14px;font-weight:650;color:var(--tinte);text-overflow:ellipsis;white-space:nowrap}
.hh-vorschlaege small{flex:none;font-size:12.5px;color:var(--grau);font-variant-numeric:tabular-nums}
.hh-lohn-felder{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding-top:14px}
.hh-lohn-felder .hh-eingabe{width:150px}
.hh-lohn-felder>span{font-size:14px;color:var(--grau)}
.hh-feed-zeile{margin-top:14px;padding:12px 16px;border-radius:16px;background:var(--creme-100);font-size:13.5px;color:#5C5347}
.hh-feed-zeile strong{color:var(--tinte)}
.hh-wahl.klein>button{min-width:58px;height:40px;padding:0 14px}
.hh-info-punkt{display:grid;place-items:center;width:24px;height:24px;flex:none;padding:0;border:0;border-radius:50%;background:#F3F0E9;font:700 12.5px var(--text);color:var(--grau);cursor:pointer;transition:background-color .3s,color .3s}
.hh-info-punkt:hover,.hh-info-punkt[aria-expanded="true"]{background:var(--gruen-100);color:var(--gruen-800)}
.hh-schalter-zeile{display:flex;align-items:center;gap:16px;width:100%;padding:18px 22px;box-sizing:border-box;border:0;border-radius:22px;background:#fff;box-shadow:var(--s1),inset 0 0 0 1px var(--linie);text-align:left;font:inherit;color:inherit;cursor:pointer;transition:box-shadow .45s var(--ease)}
.hh-schalter-zeile:hover{box-shadow:var(--s2),inset 0 0 0 1px var(--gruen-200)}
.hh-schalter-zeile>span:first-child{flex:1;min-width:0}
.hh-schalter-zeile b{display:block;font:650 16px var(--kopf);font-variation-settings:'wdth' 112;color:var(--tinte)}
.hh-schalter-zeile small{display:block;margin-top:3px;font-size:13.5px;line-height:1.45;color:var(--grau)}
.hh-bilder2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hh-bild-leer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;height:140px;border-radius:18px;border:2px dashed var(--gruen-300);background:var(--gruen-100);color:var(--gruen-800);font-size:12.5px;font-weight:650;cursor:pointer;transition:background-color .3s,border-color .3s}
.hh-bild-leer:hover{background:var(--gruen-200);border-color:var(--gruen)}
.hh-bild-leer svg{width:22px;height:22px;transition:transform .5s var(--weich)}
.hh-bild-leer:hover svg{transform:scale(1.12)}
.hh-hinweiszeile{display:flex;align-items:center;gap:12px;padding:2px 8px;font-size:13.5px;color:var(--grau);font-variant-numeric:tabular-nums}
.hh-hinweiszeile svg{width:18px;height:18px;flex:none;color:var(--grau-2)}
.hh-absenden-zeile{display:flex;align-items:center;flex-wrap:wrap;gap:16px;padding-top:4px}
.hh-absenden-zeile .hh-knopf{height:52px;padding:0 26px;font-size:15.5px}
.hh-vorschau{position:sticky;top:8px;display:grid;gap:12px}
.hh-vorschau-kopf{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grau-2)}
.hh-vorschau-kopf i{width:7px;height:7px;border-radius:50%;background:var(--kupfer);box-shadow:0 0 0 3px var(--kupfer-100);animation:hh-puls 2.4s var(--ease) infinite}
@keyframes hh-puls{50%{box-shadow:0 0 0 6px rgba(201,106,43,.08)}}
.hh-jobkarte{display:flex;flex-direction:column;min-height:300px;padding:22px 22px 18px;box-sizing:border-box;border-radius:26px;background:#fff;box-shadow:var(--s2),inset 0 0 0 1px var(--linie)}
.hh-jk-oben{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:26px}
.hh-jk-marke{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grau-2)}
.hh-jk-titel{display:block;margin:14px 0 12px;font:650 21px/1.2 var(--kopf);font-variation-settings:'wdth' 112;letter-spacing:-.015em;color:var(--gruen-900);overflow-wrap:anywhere}
.hh-jk-titel.leer,.hh-jk-meta .leer{color:#C9C1B1}
.hh-jk-meta{display:grid;gap:7px;font-size:14px;color:var(--grau)}
.hh-jk-meta>span{display:flex;align-items:center;gap:9px}
.hh-jk-meta svg{width:16px;height:16px;flex:none;color:var(--grau-2)}
.hh-jk-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--tinte);white-space:pre-line}
.hh-jk-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.hh-jk-betrieb{display:flex;align-items:center;gap:8px;margin:14px 0 16px;font-size:12.5px;font-weight:600;color:#8F897D}
.hh-jk-betrieb .hh-avatar{width:24px;height:24px;border-radius:8px;font-size:10px}
.hh-jk-fuss{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--linie)}
.hh-jk-fuss b{font-size:14.5px;color:var(--gruen-800)}
.hh-jobkarte .hh-aufleuchten-text{animation:hh-aufleuchten .55s var(--weich)}
.hh-pflicht{padding:16px 18px;border-radius:20px;background:var(--creme-100);font-size:13.5px}
.hh-pflicht ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.hh-pflicht li{display:flex;align-items:center;gap:10px;color:var(--grau);transition:color .4s}
.hh-pflicht li.ok{color:var(--gruen-800)}
.hh-kreis{position:relative;display:grid;place-items:center;width:20px;height:20px;flex:none}
.hh-kreis .hh-pf-offen,.hh-kreis .hh-pf-ok{width:20px;height:20px}
.hh-kreis .hh-pf-ok{position:absolute;inset:0;transform:scale(0);transition:transform .5s var(--weich)}
.hh-pflicht li.ok .hh-pf-ok{transform:scale(1)}
.hh-pflicht p{margin:10px 0 0;padding-top:10px;border-top:1px solid rgba(232,213,168,.7);font-size:12.5px;color:var(--grau);font-variant-numeric:tabular-nums}
/* Neu veröffentlichte Anzeige leuchtet in der Übersicht einmal kupfern auf */
.hh-anzeige.frisch{animation:hh-frisch 2.6s var(--ease) .5s backwards}
@keyframes hh-frisch{0%,30%{box-shadow:var(--s2),inset 0 0 0 2px var(--kupfer),0 0 0 7px rgba(201,106,43,.16)}}

/* ---------- Gesuche: Liste und Filter links, Karte oder Suchanzeige rechts ---------- */
.hh-g-kopf{flex:none;display:flex;align-items:flex-end;gap:6px 16px;flex-wrap:wrap;padding:4px 24px 14px}
.hh-g-kopf h1{margin:0;font-size:clamp(28px,3vw,38px);line-height:1.05;font-weight:700;font-variation-settings:'wdth' 116;letter-spacing:-.028em;color:var(--gruen-900)}
.hh-g-kopf p{margin:0 0 3px;font-size:14px;color:var(--grau)}
.hh-g-flaeche{flex:1;min-height:0;display:flex;gap:14px;overflow:hidden;padding:0 24px 18px}
.hh-g-liste{min-width:0;overflow-y:auto;overscroll-behavior:contain;border-radius:26px;background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px var(--linie)}
.hh-g-filter{display:flex;flex-direction:column;gap:14px;padding:14px 14px 14px;border-bottom:1px solid var(--linie)}
.hh-g-zeile{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.hh-g-label{margin-right:auto;font:700 11px var(--text);letter-spacing:.09em;text-transform:uppercase;color:var(--grau)}
.hh-g-wert{font-size:13.5px;font-weight:700;color:var(--tinte);font-variant-numeric:tabular-nums}
.hh-g-mitte{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:9px;font-size:12px;color:var(--grau)}
.hh-g-hinweis{margin:9px 2px 0;font-size:12.5px;line-height:1.5;color:#8D877D}
.hh-eingabe.klein{height:44px;border-radius:999px;font-size:14.5px}
.hh-mini-knopf{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--linie);font:650 12.5px var(--text);color:var(--gruen-800);cursor:pointer;transition:box-shadow .3s,background-color .3s}
.hh-mini-knopf:hover{background:var(--gruen-100);box-shadow:inset 0 0 0 1px var(--gruen-200)}
.hh-mini-knopf svg{width:13px;height:13px}
.hh-filter-knopf{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border:0;border-radius:999px;background:none;font:650 12.5px var(--text);color:var(--gruen-700);cursor:pointer;transition:background-color .3s}
.hh-filter-knopf:hover,.hh-filter-knopf[aria-expanded="true"]{background:var(--gruen-100)}
.hh-filter-knopf svg{width:14px;height:14px}
.hh-regler{-webkit-appearance:none;appearance:none;display:block;width:100%;height:28px;margin:0;background:transparent;cursor:pointer}
.hh-regler::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--gruen) var(--p,20%),var(--creme-200) var(--p,20%))}
.hh-regler::-moz-range-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--gruen) var(--p,20%),var(--creme-200) var(--p,20%))}
.hh-regler::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--gruen),0 4px 10px -2px rgba(27,51,24,.35);transition:transform .4s var(--weich)}
.hh-regler::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--gruen),0 4px 10px -2px rgba(27,51,24,.35)}
.hh-regler:active::-webkit-slider-thumb{transform:scale(1.12)}
/* eine Spalte, die nie breiter als der Platz wird: sonst bläht die seitlich wischbare Reihe (Führerscheinklassen …)
   das Raster auf und die ganze Liste lässt sich seitlich schieben (27.10.2026) */
.hh-g-filtergruppen{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.hh-g-filtergruppen>*{min-width:0}
.hh-wahl.zart>button{height:34px;padding:0 13px;font-size:12.5px}
.hh-wahl.rollbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:-2px;padding:2px}
.hh-wahl.rollbar::-webkit-scrollbar{display:none}
.hh-wahl.rollbar>button{flex:none}
/* Schnellfilter über der Liste (seit 26.10.2026): eine Reihe, seitlich wischbar */
.hh-schnell{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:2px 14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
.hh-schnell::-webkit-scrollbar{display:none}
.hh-schnell>button{flex:none;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--linie);font:650 12.5px var(--text);color:var(--tinte);white-space:nowrap;cursor:pointer;transition:background-color .25s var(--ease),box-shadow .25s,color .25s,transform .18s var(--ease)}
.hh-schnell>button:hover{box-shadow:inset 0 0 0 1.5px var(--gruen-300)}
.hh-schnell>button:active{transform:scale(.96)}
.hh-schnell>button[aria-pressed="true"]{background:var(--gruen);color:#fff;box-shadow:none}
.hh-schnell-ic{width:14px;height:14px;flex:none}
.hh-schnell-punkt{width:8px;height:8px;border-radius:999px;background:var(--kupfer);box-shadow:0 0 0 2px var(--kupfer-100)}
.hh-schnell>button[aria-pressed="true"] .hh-schnell-punkt{box-shadow:0 0 0 2px rgba(255,255,255,.35)}
/* Bildschirm: umbrechen statt wischen (mit der Maus lässt sich eine Reihe schlecht seitlich schieben) */
@media (min-width:900px){
  .hh-schnell{flex-wrap:wrap;gap:6px;overflow:visible;margin:0;padding:0;-webkit-mask-image:none;mask-image:none}
  .hh-schnell>button{height:30px;padding:0 11px;font-size:12px}
}
.hh-g-treffer{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--grau);font-variant-numeric:tabular-nums}
.hh-g-treffer b{color:var(--tinte)}
.hh-g-karten{display:flex;flex-direction:column;gap:10px;padding:14px 14px 40px}
.hh-gesuch{position:relative}
.hh-gesuch-karte{display:flex;gap:13px;padding:12px;border-radius:22px;background:#fff;box-shadow:var(--s1),inset 0 0 0 1px var(--linie);color:inherit;text-decoration:none;transition:box-shadow .45s var(--ease),transform .6s var(--ease)}
.hh-gesuch-karte:hover{transform:translate3d(0,-2px,0);box-shadow:var(--s2),inset 0 0 0 1px var(--gruen-200);color:inherit;text-decoration:none}
.hh-gesuch-karte.aktiv,.hh-gesuch-karte.aktiv:hover{box-shadow:var(--s2),inset 0 0 0 2px var(--gruen)}
/* Nadel auf der Karte überfahren → Eintrag leuchtet kupfern, wie die Nadel (seit 26.10.2026) */
.hh-gesuch-karte.schwebt{transform:translate3d(0,-2px,0);box-shadow:0 0 0 4px rgba(201,106,43,.14),var(--s2),inset 0 0 0 1.5px var(--kupfer)}
.hh-gesuch-av{position:relative;display:grid;place-items:center;width:96px;height:96px;flex:none;border-radius:16px;overflow:hidden;font:650 25px var(--kopf);font-variation-settings:'wdth' 112}
.hh-gesuch-text{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center;gap:3px;padding-right:30px}
.hh-gesuch-text>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hh-gesuch-text h3{margin:0;overflow:hidden;font-size:16px;font-weight:700;line-height:1.3;text-overflow:ellipsis;white-space:nowrap;color:var(--tinte)}
.hh-gesuch-zeit{font-size:12.5px;color:var(--grau);font-variant-numeric:tabular-nums}
.hh-gesuch-wer{font-size:13px;color:var(--grau)}
.hh-gesuch-km{margin-top:2px;font-size:15.5px;font-weight:700;color:var(--gruen-700);font-variant-numeric:tabular-nums}
.hh-gesuch-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.hh-gesuch-chips .hh-chip{height:21px;padding:0 8px;font-size:10.5px}
.hh-merk{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--linie);cursor:pointer;transition:background-color .3s,transform .5s var(--weich)}
.hh-merk:hover{background:var(--gruen-100)}
.hh-merk:active{transform:scale(.86)}
.hh-merk svg{width:15px;height:15px}
.hh-g-rechts{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;border-radius:26px;background:#fff;box-shadow:var(--s1),inset 0 0 0 1px var(--linie)}
.hh-g-rechts-kopf{flex:none;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--linie)}
.hh-g-rechts-kopf small{margin-left:auto;font-size:12.5px;color:var(--grau);font-variant-numeric:tabular-nums}
.hh-g-rechts-kopf .hh-segment{min-width:250px}
.hh-g-rechts-kopf .hh-segment>button{height:34px;font-size:13.5px}
/* Umschalter Karte ↔ Stelle/Suchanzeige (seit 27.10.2026): weiß mit Rahmen, gewählte Seite grün, mit Symbol und
   dem Namen des geöffneten Eintrags – vorher Creme auf Creme und leicht zu übersehen */
.hh-g-rechts-kopf .hh-segment.hh-umschalter{min-width:330px;max-width:480px;padding:4px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--linie),var(--s1)}
.hh-umschalter .hh-segment-daumen{top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--n));background:var(--gruen);box-shadow:0 4px 12px -4px rgba(27,51,24,.45)}
.hh-g-rechts-kopf .hh-umschalter>button{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;height:40px;padding:0 14px;font-size:14px;color:var(--tinte);transition:color .35s var(--ease)}
.hh-umschalter>button[aria-checked="true"]{color:#fff}
.hh-umschalter>button:not([aria-checked="true"]):hover{color:var(--gruen-700)}
.hh-umschalter-ic{display:grid;place-items:center;width:17px;height:17px;flex:none}
.hh-umschalter-ic svg{width:17px;height:17px}
.hh-umschalter small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;opacity:.78}
.hh-umschalter small::before{content:"· "}
.hh-g-karte{position:relative;z-index:0;flex:1;min-height:0;background:#EEF2E6}
/* Umkreis direkt auf der Karte (Handy, Daniels Wunsch vom 08.10.2026): Glaspille am oberen Kartenrand,
   zwischen Zoom-Knöpfen und Vollbild-Knopf */
.hh-karte-rahmen{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.hh-karte-umkreis{position:absolute;top:10px;left:12px;right:58px;z-index:500;display:flex;align-items:center;gap:10px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 8px 24px -10px rgba(27,51,24,.35),inset 0 0 0 1px rgba(255,255,255,.85)}
.hh-karte-umkreis .hh-regler{flex:1;width:auto;min-width:0;margin:0}
.hh-karte-umkreis-label{flex:none;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grau)}
.hh-karte-umkreis b{flex:none;min-width:52px;text-align:right;font-size:13.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
/* Rechtliches steht in geteilten Ansichten nur einmal: unten in der Liste links */
.hh-g-rechts .hh-fuss{display:none}
.hh-g-detail{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:22px 22px 24px}
.hh-g-fuss{flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:14px 70px 14px 18px;border-top:1px solid var(--linie);background:rgba(255,255,255,.94)}
.hh-g-fuss .hh-knopf{height:46px}
.hh-runder-knopf{display:grid;place-items:center;width:46px;height:46px;flex:none;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:var(--s1),inset 0 0 0 1px var(--linie);cursor:pointer;transition:background-color .3s}
.hh-runder-knopf:hover{background:#F3F0E9}
@media (max-width:760px){
  .hh-g-kopf{padding:4px 14px 10px}
  .hh-g-flaeche{gap:0;padding:0;overflow:visible}
  /* Auf dem Handy scrollt die ganze Seite, nicht die Liste: ohne eigenen Scrollbereich und ohne
     „overscroll-behavior:contain“, sonst kommt das Wischen über der Liste nirgends an (08.10.2026) */
  .hh-g-liste{overflow:visible;overscroll-behavior:auto}
  .hh-g-liste,.hh-g-rechts{border-radius:0;background:transparent;box-shadow:none}
  .hh-g-fuss{padding:12px 14px}
  .hh-g-detail{padding:16px 14px 24px}
}

/* ---------- Handy: Karte mit Liste als Blatt (Jobsuche und Gesuche, seit 27.10.2026) ----------
   Die Karte füllt den Platz zwischen Kopfzeile und Navigationsleiste; oben liegen Ortssuche und
   Schnellfilter, unten die Liste als Blatt (zu: nur Griff, halb, offen). Am Bildschirm unverändert. */
.hh-feed-blatt>.hh-g-kopf{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hh-g-flaeche.hh-blatt-modus{position:relative;display:block;flex:1;min-height:0;padding:0;overflow:hidden}
.hh-blatt-modus>.hh-g-rechts{position:absolute;inset:0;border-radius:0;box-shadow:none;background:#EFEBE1}
.hh-blatt-modus .hh-g-rechts-kopf,.hh-blatt-modus .hh-karte-umkreis{display:none}
.hh-blatt-modus .hh-karte-rahmen{position:absolute;inset:0}
.hh-blatt-modus .hh-g-karte{position:absolute;inset:0;min-height:0!important}
.hh-blatt-modus>.hh-g-liste{position:absolute;left:0;right:0;bottom:0;z-index:20;width:auto!important;height:calc(100% - 118px);overflow-y:auto;overscroll-behavior:contain;border-radius:24px 24px 0 0;background:#FBF8F1;box-shadow:0 -10px 40px -12px rgba(27,51,24,.35),inset 0 1px 0 #fff;transition:transform .45s var(--weich);will-change:transform}
.hh-blatt-modus>.hh-g-liste.hh-zieht{transition:none}
.hh-blatt-modus>.hh-g-liste{overflow-x:hidden}
/* Im Blatt der Reihe nach: Griff, Alle/Gemerkt, Umkreis in einer Zeile, Knöpfe der Trefferzeile, Filter (wenn
   offen), Einträge, ganz unten „Bei neuen Jobs hier benachrichtigen“. Ortssuche und Schnellfilter liegen oben auf der Karte. */
.hh-blatt-modus>.hh-g-liste{display:flex;flex-direction:column;gap:10px}
.hh-blatt-modus>.hh-g-liste>.hh-g-filter{display:contents}
.hh-blatt-modus>.hh-g-liste>.hh-listenblatt-griff{order:0;flex:none;margin-bottom:-6px}
.hh-blatt-modus .hh-g-filter>.hh-segment{order:1;flex:none;margin:0 14px}
.hh-blatt-modus .hh-g-filter>div:has(>.hh-ort-feld),.hh-blatt-modus .hh-g-filter>.hh-schnell{display:none}
.hh-blatt-modus .hh-g-filter>div:has(>.hh-regler){order:2;flex:none;display:flex;align-items:center;gap:12px;margin:0 16px}
.hh-blatt-modus .hh-g-filter>div:has(>.hh-regler)>.hh-g-zeile{display:contents}
.hh-blatt-modus .hh-g-filter>div:has(>.hh-regler) .hh-g-label{order:0;margin:0}
.hh-blatt-modus .hh-g-filter>div:has(>.hh-regler)>.hh-regler{order:1;flex:1;min-width:0;margin:0}
.hh-blatt-modus .hh-g-filter>div:has(>.hh-regler) .hh-g-wert{order:2;min-width:50px;text-align:right}
.hh-blatt-modus .hh-g-filter>.hh-g-treffer{order:3;flex:none;margin:0 16px}
.hh-blatt-modus .hh-g-filter>.hh-g-treffer>span{display:none}
.hh-blatt-modus .hh-g-filter>.hh-g-treffer:not(:has(button)){display:none}
.hh-blatt-modus .hh-g-filter>.hh-g-filtergruppen{order:4;flex:none;margin:0 14px}
.hh-blatt-modus>.hh-g-liste>.hh-g-karten{order:5;flex:none;padding-top:2px}
.hh-blatt-modus .hh-g-filter>.hh-g-alarm{order:6;flex:none;margin:0 14px 28px}
.hh-listenblatt-griff{position:sticky;top:0;z-index:5;padding:9px 16px 13px;border-radius:24px 24px 0 0;background:#FBF8F1;text-align:center;font-size:14px;color:var(--grau);touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.hh-listenblatt-griff i{display:block;width:40px;height:5px;margin:0 auto 9px;border-radius:999px;background:#D6CEBE}
.hh-listenblatt-griff b{color:var(--tinte);font-variant-numeric:tabular-nums}
.hh-blatt-oben{position:absolute;left:0;right:0;top:0;z-index:900;display:flex;flex-direction:column;gap:8px;padding:10px 12px 16px;background:linear-gradient(rgba(248,244,236,.96) 72%,rgba(248,244,236,0));pointer-events:none}
.hh-blatt-oben>*{pointer-events:auto}
.hh-blatt-ort{display:flex;gap:8px;position:relative}
.hh-blatt-ort .hh-eingabe{flex:1;min-width:0;box-shadow:inset 0 0 0 1px var(--linie),0 4px 14px -6px rgba(27,51,24,.25)}
.hh-blatt-ort .hh-vorschlaege{right:52px}
.hh-blatt-standort{display:grid;place-items:center;width:44px;height:44px;flex:none;padding:0;border:0;border-radius:999px;background:#fff;color:var(--gruen-700);box-shadow:inset 0 0 0 1px var(--linie),0 4px 14px -6px rgba(27,51,24,.25);cursor:pointer}
.hh-blatt-standort svg{width:18px;height:18px}
/* Blau wie der eigene Standpunkt auf der Karte, solange die Karte vom Umkreis weggeschoben ist (seit 27.10.2026) */
.hh-blatt-standort{transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.hh-blatt-standort.hh-weg{background:#E4EFF8;color:#2B6A9E;box-shadow:inset 0 0 0 1px #BFD6EA,0 4px 14px -6px rgba(27,51,24,.25)}
.hh-blatt-oben .hh-schnell{margin:0 -12px;padding:2px 12px}
.hh-blatt-oben .hh-schnell>button{height:32px;box-shadow:inset 0 0 0 1px var(--linie),0 3px 10px -5px rgba(27,51,24,.25)}
.hh-blatt-oben .hh-schnell>button[aria-pressed="true"]{box-shadow:none}
/* Karte im Blatt-Modus: Vorschau-Karte und Hinweise über dem Griff, ohne Vollbild-Knopf */
.hh-blatt-modus .hh-k-unten{bottom:86px}
.hh-blatt-modus .hh-k .leaflet-bottom.leaflet-left{bottom:62px}
.hh-blatt-modus .hh-k-voll{display:none}
.hh-blatt-modus .hh-k-knoepfe{top:auto;bottom:78px}
.hh-blatt-modus .hh-k-mit-karte .hh-k-knoepfe{opacity:0;pointer-events:none}
.hh-ruhig .hh-blatt-modus>.hh-g-liste{transition:none}

/* ---------- Allgemein: Titel, flache Karte, Gefahr-Knopf, Dialoge ---------- */
.hh-titel{margin:0 0 6px;font-size:clamp(28px,3vw,38px);line-height:1.08;font-weight:700;font-variation-settings:'wdth' 116;letter-spacing:-.025em;color:var(--gruen-900)}
.hh-flach{background:#fff;border-radius:22px;box-shadow:var(--s1),inset 0 0 0 1px var(--linie)}
.hh-knopf-rot{background:var(--rot);color:#fff;box-shadow:0 12px 26px -14px rgba(192,57,43,.8)}
.hh-knopf-rot:hover{background:var(--rot-700);color:#fff}
.hh-knopf:disabled{opacity:.6;cursor:default}
.hh-dialog-grund{background:rgba(27,51,24,.3);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:hh-blatt-grund .4s var(--ease) backwards}
.hh-dialog{border-radius:28px;background:#fff;box-shadow:var(--s3);animation:hh-dialog .55s var(--weich) backwards}
@keyframes hh-dialog{from{opacity:0;transform:translate3d(0,14px,0) scale(.97);filter:blur(6px)}}

/* ---------- Ruhig: ohne Bewegung ---------- */
/* nur unsere eigenen Bausteine – fremde Bewegung (z. B. die Leaflet-Karte) bleibt unberührt */
.hh-ruhig [class*="hh-"],.hh-ruhig [class*="hh-"]::before,.hh-ruhig [class*="hh-"]::after,.hh-ruhig [class*="hh-"]>*,.hh-ruhig [data-hh-z],.hh-ruhig [data-hh-balken]{transition-duration:0s!important;transition-delay:0s!important;animation-duration:0s!important;animation-delay:0s!important}
.hh-ruhig .hh-z-warte{opacity:1;transform:none;filter:none}
.hh-ruhig .hh-w>span{opacity:1;transform:none;filter:none}
.hh-ruhig .hh-stapel-karte{transform:none!important;filter:none!important}
.hh-ruhig::view-transition-group(*),.hh-ruhig::view-transition-old(*),.hh-ruhig::view-transition-new(*){animation:none!important}

/* ---------- Beispiele (erfundene, klar gekennzeichnete Einträge, bis eine Sektion echte hat) ---------- */
.hh-beispiel-plakette{display:inline-flex;align-items:center;flex:none;height:21px;padding:0 9px;margin-left:8px;border-radius:999px;background:var(--kupfer-100);color:var(--kupfer-800);font:750 10.5px/1 var(--text);letter-spacing:.07em;text-transform:uppercase;vertical-align:3px;white-space:nowrap}
.hh-beispiel{outline:1.5px dashed var(--kupfer-300);outline-offset:-1.5px}
a.hh-beispiel,.hh-anzeige.hh-beispiel,.hh-gesuch-karte.hh-beispiel{border-color:transparent!important}
.hh-beispiel-hinweis{display:flex;align-items:flex-start;gap:10px;margin:0 0 14px;padding:12px 14px;border-radius:16px;background:rgba(251,233,218,.55);border:1px dashed var(--kupfer-300);color:var(--kupfer-800);font-size:13.5px;line-height:1.5}
.hh-beispiel-hinweis>.hh-beispiel-plakette{margin:0;vertical-align:0}
.hh-beispiel-band{display:flex;align-items:center;gap:10px;margin:12px 0 14px;padding:9px 12px;border-radius:14px;background:var(--kupfer-100);color:var(--kupfer-800);font-size:13px;line-height:1.45}
.hh-beispiel-band>.hh-beispiel-plakette{margin:0;background:#fff}
.hh-blatt-panel>.hh-beispiel-band{margin:12px 22px 4px}
.hh-beispiel-bilder{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:16px;margin-bottom:16px}
.hh-beispiel-bild{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px;border:0;border-radius:22px;background:#fff;text-align:left;font:inherit;color:var(--gruen-900);cursor:pointer;transition:transform .6s var(--weich),box-shadow .6s var(--weich)}
.hh-beispiel-bild:hover{transform:translate3d(0,-2px,0);box-shadow:var(--s1)}
.hh-beispiel-bild-flaeche{display:block;width:100%;height:150px;margin-bottom:10px;border-radius:16px;background:radial-gradient(rgba(59,107,53,.16) 1.1px,transparent 1.5px) 0 0/16px 16px,linear-gradient(160deg,var(--creme-100,#F8F4EA),#EDF3EA)}
.hh-beispiel-bild>.hh-beispiel-plakette{position:absolute;top:24px;left:24px;margin:0}
.hh-beispiel-bild b{font:650 15px var(--kopf)}
.hh-beispiel-bild small{font-size:13px;line-height:1.45;color:var(--grau)}

/* ---------- Bild mit freiem Ausschnitt: Fokuspunkt (--bx/--by) + Zoom (--bz), in jedem Format ---------- */
.hh-bild{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--bx,50%) var(--by,50%);transform-origin:var(--bx,50%) var(--by,50%);transform:scale(var(--bz,1));transition:transform 1.1s var(--weich)}

/* ---------- Bild-Editor (hofhand-bildausschnitt.js) ---------- */
.hh-ba-grund{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(20,30,18,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .38s var(--weich);font:400 15px/1.5 var(--text);color:var(--tinte)}
.hh-ba-grund.an{opacity:1}
.hh-ba{width:min(980px,100%);max-height:calc(100vh - 40px);overflow-y:auto;padding:24px;border-radius:28px;background:#fff;box-shadow:var(--s3);transform:translate3d(0,14px,0) scale(.985);transition:transform .5s var(--weich)}
.hh-ba-grund.an .hh-ba{transform:none}
.hh-ba-kopf h2{margin:0;font:650 21px var(--kopf);font-variation-settings:'wdth' 112;color:var(--gruen-900)}
.hh-ba-kopf p{margin:4px 0 0;font-size:13.5px;color:var(--grau)}
.hh-ba-formen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0 0}
.hh-ba-formen button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:10px 14px;border:0;border-radius:16px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--linie);text-align:left;font:inherit;color:inherit;cursor:pointer;transition:box-shadow .35s var(--weich),background .35s var(--weich)}
.hh-ba-formen button b{font:650 14.5px var(--kopf);color:var(--gruen-900)}
.hh-ba-formen button small{font-size:12px;color:var(--grau)}
.hh-ba-formen button[aria-checked="true"]{background:var(--kupfer-100);box-shadow:inset 0 0 0 2px var(--kupfer)}
.hh-ba-inhalt{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px;margin-top:16px}
.hh-ba-buehne{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:#1d2a1b;cursor:crosshair;touch-action:none;user-select:none}
.hh-ba-buehne img{width:100%;height:100%;object-fit:contain;opacity:.45;pointer-events:none;max-width:none}
.hh-ba-ziel{position:absolute;border:2px solid #fff;border-radius:10px;box-shadow:0 0 0 999px rgba(15,25,13,.35);pointer-events:none;transition:left .25s var(--weich),top .25s var(--weich),width .25s var(--weich),height .25s var(--weich),border-radius .4s var(--weich)}
.hh-ba-ziel.bogen{border-radius:999px 999px 14px 14px}
.hh-ba-punkt{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:2.5px solid #fff;background:rgba(201,106,43,.9);box-shadow:0 2px 10px rgba(0,0,0,.35);pointer-events:none}
.hh-ba-zoom{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:13px;color:var(--grau)}
.hh-ba-zoom input{flex:1;accent-color:var(--kupfer)}
.hh-ba-zoom output{min-width:44px;font-variant-numeric:tabular-nums}
.hh-ba-mitte{border:0;background:none;color:var(--gruen-700);font:650 13px var(--text);cursor:pointer}
.hh-ba-vorschauen{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.hh-ba-vorschauen figure{margin:0}
.hh-ba-vorschauen figure.breit{grid-column:1/-1}
.hh-ba-vorschauen figcaption{margin-top:5px;font-size:12px;color:var(--grau)}
.hh-ba-rahmen{position:relative;overflow:hidden;border-radius:14px;background:var(--creme-100)}
.hh-ba-rahmen.bogen{border-radius:999px 999px 14px 14px;max-width:210px}
.hh-ba-rahmen.rund,.hh-ba-ziel.rund{border-radius:50%}
.hh-ba-rahmen.logo{border-radius:22%;background:#fff;box-shadow:inset 0 0 0 1px var(--linie)}
.hh-ba-rahmen.rund{box-shadow:inset 0 0 0 1px var(--linie)}
.hh-ba-fehler{margin:14px 0 0;padding:10px 14px;border-radius:14px;background:var(--rot-100);color:var(--rot-700);font-size:13.5px}
.hh-ba-fuss{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
@media (max-width:760px){.hh-ba{padding:18px}.hh-ba-inhalt{grid-template-columns:1fr}.hh-ba-formen{grid-template-columns:1fr}.hh-ba-formen button{flex-direction:row;align-items:baseline;gap:8px}}

/* ---------- Profil „Panorama“ (Betrieb und Person; Formen panorama | rahmen | bogen) ---------- */
.hh-pr{container-type:inline-size;position:relative;width:100%;max-width:1240px;margin:0 auto;padding-bottom:10px}
.hh-pr-kopf{position:relative}
.hh-pr-kopfbild{position:relative;height:clamp(220px,32cqi,420px);overflow:hidden;background:var(--creme-100);-webkit-mask-image:linear-gradient(180deg,#000 34%,transparent 86%);mask-image:linear-gradient(180deg,#000 34%,transparent 86%)}
.hh-pr-ohnebild{position:absolute;inset:0;background:radial-gradient(120% 140% at 85% 0%,rgba(201,106,43,.20),transparent 55%),radial-gradient(rgba(255,255,255,.13) 1.1px,transparent 1.6px) 0 0/18px 18px,linear-gradient(160deg,#2F5A2A,#1B3318)}
.hh-pr-werkzeug{position:absolute;z-index:3;top:14px;left:14px;display:flex;gap:8px;flex-wrap:wrap}
.hh-pr-wz{position:relative;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border:0;border-radius:999px;background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--gruen-900);font:650 12.5px var(--text);text-decoration:none;cursor:pointer;box-shadow:0 4px 14px -6px rgba(0,0,0,.35);transition:background .3s var(--weich),transform .4s var(--weich)}
.hh-pr-wz:hover{background:#fff;transform:translate3d(0,-1px,0);text-decoration:none}
.hh-pr-wz svg{width:15px;height:15px}
.hh-pr-wz input{display:none}
.hh-pr-ident{position:relative;z-index:2;display:flex;align-items:flex-end;gap:22px;margin:-86px 34px 0;flex-wrap:wrap}
.hh-pr-av{position:relative;flex:none;width:112px;height:112px;display:grid;place-items:center;overflow:hidden;font:700 32px var(--kopf);font-variation-settings:'wdth' 112}
.hh-pr-av.betrieb{border-radius:28px;background:linear-gradient(150deg,#3B6B35,#1F3A1C);color:#F4EFE3;box-shadow:0 0 0 5px var(--bg),0 14px 30px -12px rgba(27,51,24,.55)}
.hh-pr-av.person{border-radius:50%;background:var(--creme-100);color:var(--gruen-700);border:1px solid var(--creme);box-shadow:0 0 0 5px var(--bg),0 14px 30px -14px rgba(27,51,24,.45)}
.hh-pr-av img{width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.hh-pr-av label{position:absolute;inset:0;display:grid;place-items:end center;padding-bottom:10px;cursor:pointer;color:#fff;background:linear-gradient(180deg,transparent 45%,rgba(20,38,18,.6));opacity:0;transition:opacity .35s var(--weich)}
.hh-pr-av:hover label,.hh-pr-av label:focus-within{opacity:1}
.hh-pr-av label svg{width:18px;height:18px}
.hh-pr-av label input{display:none}
/* Profilbild: Kamera (neues Bild) und Zuschnitt (Ausschnitt ändern) nebeneinander */
.hh-pr-av.mit-zuschnitt label{place-items:end start;padding:0 0 10px calc(50% - 25px)}
.hh-pr-av-zuschnitt{position:absolute;z-index:2;bottom:7px;left:calc(50% + 5px);width:24px;height:24px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:none;color:#fff;cursor:pointer;opacity:0;transition:opacity .35s var(--weich)}
.hh-pr-av-zuschnitt svg{width:17px;height:17px}
.hh-pr-av:hover .hh-pr-av-zuschnitt,.hh-pr-av-zuschnitt:focus-visible{opacity:1}
@media (hover:none){.hh-pr-av label,.hh-pr-av-zuschnitt{opacity:1}}
.hh-pr-text{min-width:0;flex:1;padding-bottom:4px}
.hh-pr-dach{display:none}
.hh-pr-name{margin:0;font:700 clamp(28px,4.4cqi,46px)/1.05 var(--kopf);font-variation-settings:'wdth' 116;letter-spacing:-.025em;color:var(--gruen-900);overflow-wrap:anywhere}
.hh-pr-unter{margin:6px 0 0;color:var(--grau);font-size:15px}
.hh-pr-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.hh-pr-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--linie);font-size:12.5px;font-weight:600;color:var(--tinte)}
.hh-pr-chip svg{width:14px;height:14px;flex:none}
.hh-pr-chip.ok{background:var(--gruen-100);box-shadow:none;color:var(--gruen-900)}
.hh-pr-knoepfe{display:flex;gap:9px;flex-wrap:wrap;padding-bottom:6px}
.hh-pr-raster{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;padding:26px 34px 0}
.hh-pr-haupt,.hh-pr-seite{display:flex;flex-direction:column;gap:18px;min-width:0}
.hh-pr-block{padding:20px 22px;border-radius:22px;background:#fff;box-shadow:inset 0 0 0 1px var(--linie)}
.hh-pr-block>h2{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:750 11.5px var(--text);letter-spacing:.11em;text-transform:uppercase;color:var(--grau)}
.hh-pr-mehr{margin-left:auto;padding:0;border:0;background:none;font:650 13px var(--text);letter-spacing:0;text-transform:none;color:var(--gruen-700);cursor:pointer;text-decoration:none}
.hh-pr-mehr:hover{text-decoration:underline}
.hh-pr-block>p{margin:0;line-height:1.65;white-space:pre-line}
.hh-pr-leer{color:var(--grau)}
.hh-pr-galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.hh-pr-kachel{position:relative;display:block;aspect-ratio:4/3;padding:0;border:0;border-radius:18px;overflow:hidden;background:var(--creme-100);cursor:zoom-in}
.hh-pr-kachel:hover .hh-bild{transform:scale(calc(var(--bz,1) * 1.035))}
.hh-pr-kachel.neu{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:2px dashed var(--gruen-300);background:var(--gruen-100);color:var(--gruen-800);font:650 12.5px var(--text);cursor:pointer}
.hh-pr-kachel.neu svg{width:22px;height:22px}
.hh-pr-kachel.neu input{display:none}
.hh-pr-tags{display:flex;flex-wrap:wrap;gap:6px}
.hh-pr-tag{padding:5px 11px;border-radius:999px;background:var(--gruen-100);color:var(--gruen-900);font-size:13px;font-weight:600}
.hh-pr-tag.grau{background:#F3F0E9;color:#4A463F}
.hh-pr-eintrag{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--linie);color:inherit;text-decoration:none}
.hh-pr-eintrag:first-of-type{border-top:0;padding-top:2px}
.hh-pr-eintrag:hover{text-decoration:none}
.hh-pr-eintrag b{display:block;font:650 15.5px var(--kopf);color:var(--gruen-900)}
.hh-pr-eintrag small{display:block;color:var(--grau);font-size:13px}
.hh-pr-eintrag .hh-pfeil-rund{margin-left:auto;flex:none}
button.hh-pr-eintrag{width:100%;border:0;border-top:1px solid var(--linie);background:none;font:inherit;text-align:left;cursor:pointer}
button.hh-pr-eintrag:first-of-type{border-top:0}
.hh-pr-fakt{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--linie);font-size:14px}
.hh-pr-fakt:first-of-type{border-top:0;padding-top:2px}
.hh-pr-fakt span{color:var(--grau)}
.hh-pr-fakt b{font-weight:600;text-align:right}
/* Form „Rahmen“ */
.hh-pr.rahmen .hh-pr-kopfbild{margin:16px 16px 0;height:clamp(200px,28cqi,380px);border-radius:24px;-webkit-mask-image:none;mask-image:none}
.hh-pr.rahmen .hh-pr-ident{margin-top:-52px;align-items:flex-start}
.hh-pr.rahmen .hh-pr-text,.hh-pr.rahmen .hh-pr-knoepfe{padding-top:62px}
/* Form „Bogen“ */
.hh-pr.bogen .hh-pr-kopf{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"text bild" "knopf bild";column-gap:40px;padding:38px 34px 0}
.hh-pr.bogen .hh-pr-kopfbild{grid-area:bild;height:auto;aspect-ratio:4/5;max-height:560px;border-radius:999px 999px 30px 30px;-webkit-mask-image:none;mask-image:none;box-shadow:0 30px 60px -32px rgba(27,51,24,.55)}
.hh-pr.bogen .hh-pr-werkzeug{top:auto;left:auto;bottom:16px;right:16px;justify-content:flex-end}
.hh-pr.bogen .hh-pr-ident{display:contents}
.hh-pr.bogen .hh-pr-av{grid-area:bild;align-self:end;justify-self:start;margin:0 0 18px 18px;width:84px;height:84px;font-size:24px;z-index:2;box-shadow:0 0 0 4px #fff}
.hh-pr.bogen .hh-pr-av.betrieb{border-radius:22px}
.hh-pr.bogen .hh-pr-text{grid-area:text;align-self:end;padding:0}
.hh-pr.bogen .hh-pr-knoepfe{grid-area:knopf;align-self:start;margin-top:18px}
.hh-pr.bogen .hh-pr-dach{display:block;margin-bottom:10px;font:700 12px var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--kupfer-700)}
.hh-pr.bogen .hh-pr-name{font-size:clamp(36px,6cqi,68px)}
.hh-pr.bogen .hh-pr-name::after{content:"";display:block;width:56px;height:3px;margin:20px 0 4px;border-radius:3px;background:var(--kupfer)}
@container (max-width:980px){
  .hh-pr-knoepfe{width:100%;padding-left:134px}
  .hh-pr.rahmen .hh-pr-knoepfe{padding-top:0}
}
@container (max-width:760px){
  .hh-pr-ident{margin:-64px 16px 0;gap:14px}
  .hh-pr-av{width:88px;height:88px;font-size:26px}
  .hh-pr-text{flex-basis:100%}
  .hh-pr-knoepfe{width:100%;padding-left:0}
  .hh-pr-raster{grid-template-columns:1fr;padding:20px 14px 0}
  .hh-pr.rahmen .hh-pr-kopfbild{margin:10px 10px 0}
  .hh-pr.rahmen .hh-pr-text,.hh-pr.rahmen .hh-pr-knoepfe{padding-top:0}
  .hh-pr.bogen .hh-pr-kopf{grid-template-columns:1fr;grid-template-areas:"bild" "text" "knopf";row-gap:18px;padding:16px 14px 0}
  .hh-pr.bogen .hh-pr-kopfbild{aspect-ratio:1;border-radius:200px 200px 26px 26px}
  .hh-pr.bogen .hh-pr-knoepfe{margin-top:0}
}
/* Job-Suche der Personen: Hinweis-Schalter für neue Jobs im Umkreis */
.hh-g-alarm{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--linie)}
.hh-g-alarm b{display:block;font-size:13px;font-weight:650;color:var(--tinte)}
.hh-g-alarm small{display:block;margin-top:2px;font-size:12px;line-height:1.4;color:var(--grau)}
/* Bewerbungen und Nachrichten der Personen */
.hh-bew-gruppe{display:flex;align-items:baseline;gap:10px;margin:0 4px 10px}
.hh-bew-gruppe h2{margin:0;font:750 12px var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--grau)}
.hh-bew-gruppe span{font-size:12.5px;color:var(--grau-2)}
.hh-bew-karte{padding:16px 18px}
.hh-bew-zeile{display:flex;align-items:center;gap:13px}
.hh-bew-zeile h3{margin:0;font:650 16.5px/1.3 var(--kopf);font-variation-settings:'wdth' 112;color:var(--gruen-900)}
.hh-bew-zeile small{display:block;margin-top:3px;font-size:13px;color:var(--grau);font-variant-numeric:tabular-nums}
.hh-bew-aktion{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:14px;padding-top:12px;border-top:1px solid var(--linie);font-size:13.5px;color:var(--gruen-800)}
.hh-bew-aktion span{margin-right:auto}
.hh-chat-zeile{display:flex;align-items:center;gap:13px;padding:15px 18px;color:inherit;text-decoration:none}
.hh-chat-zeile:hover{color:inherit;text-decoration:none;transform:translate3d(0,-2px,0);box-shadow:var(--s2),inset 0 0 0 1px var(--gruen-200)}
.hh-chat-text{display:flex;flex-direction:column;min-width:0;flex:1}
.hh-chat-text>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hh-chat-text b{font-size:15px;color:var(--tinte)}
.hh-chat-text small{margin-top:2px;font-size:12.5px;color:var(--grau)}
.hh-chat-text>span{margin-top:4px;font-size:13px}
.hh-chat-rechts{display:flex;flex-direction:column;align-items:flex-end;gap:8px;align-self:flex-start;flex:none}
.hh-chat-rechts time{font-size:11.5px;color:var(--grau-2);font-variant-numeric:tabular-nums}
/* Nachrichtenliste (Daniel, 24.10.2026: klarer getrennt): Schild, worum es geht, und Markierung für Ungelesenes */
.hh-chat-art{display:inline-block;padding:1px 8px;border-radius:99px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;vertical-align:1px;margin-right:6px}
.hh-chat-art.art-hofruf{background:#FBEBE8;color:#8F2A20}
.hh-chat-art.art-bew{background:#EDF3EA;color:#22401E}
.hh-chat-art.art-dk{background:#F3F0E9;color:#4A463F}
.hh-chat-art.art-hh{background:#EFF6FB;color:#2F5C7C}
.hh-chat-zeile{position:relative}
.hh-chat-zeile.ungelesen::before,.hh-chatfaden.ungelesen::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:#3B6B35}
.hh-chatgruppen{display:flex;flex-direction:column;gap:10px;padding:0 12px 12px}
.hh-chatgruppe{background:#fff;border-radius:18px;box-shadow:0 1px 2px rgba(27,51,24,.05),inset 0 0 0 1px var(--linie);overflow:hidden}
.hh-chatgruppe-kopf{display:flex;align-items:center;gap:11px;padding:12px 14px;border-bottom:1px solid #F0EADC}
.hh-chatgruppe-kopf .av{width:36px;height:36px;flex:none;border-radius:999px;overflow:hidden;background:var(--cream-100,#FBF3E4);border:1px solid var(--cream,#EADBB8);display:grid;place-items:center;font-weight:650;font-size:13px;color:#2E5429}
.hh-chatgruppe-kopf .av img{width:100%;height:100%;object-fit:cover;display:block}
.hh-chatgruppe-kopf .name{min-width:0;flex:1;font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hh-chatfaden{position:relative;display:flex;align-items:flex-start;gap:10px;padding:11px 14px 12px;color:inherit;text-decoration:none}
.hh-chatfaden+.hh-chatfaden{border-top:1px solid #F3EEE3}
.hh-chatfaden:hover{background:#F7F4EC;color:inherit;text-decoration:none}
.hh-chatfaden.aktiv{background:#EDF3EA}
.hh-chatfaden .text{min-width:0;flex:1}
.hh-chatfaden .titel{display:block;font-size:13.5px;font-weight:650;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hh-chatfaden .vor{display:block;font-size:12.5px;color:#6F6A62;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hh-chatfaden.ungelesen .titel,.hh-chatfaden.ungelesen .vor{font-weight:800;color:#23262A}
.hh-chatfaden .rechts{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:11.5px;color:#8D877D;font-variant-numeric:tabular-nums;margin-top:2px}
.hh-chat-neu{width:9px;height:9px;border-radius:50%;background:var(--kupfer);animation:hh-kupfer-puls 2.6s var(--ease) infinite}
.hh-chat-kopf{position:sticky;top:0;z-index:10;padding:12px 18px 14px;border-radius:0 0 22px 22px;background:rgba(251,248,241,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--linie)}
.hh-vorschau{min-width:0}
.hh-vorschau .hh-gesuch,.hh-vorschau .hh-gesuch-karte{min-width:0;max-width:100%;box-sizing:border-box}
.hh-vorschau .hh-gesuch-text>span,.hh-vorschau .hh-gesuch-text>h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Abzeichen „Mitgestalter“ (neben Namen) und Hinweistext ---------- */
/* Mitte des Abzeichens auf Höhe der Großbuchstaben: inline-block ohne Text hat die Unterkante als Grundlinie,
   also Unterkante = Mitte der Versalhöhe (~0,36em) minus halbe Abzeichenhöhe. */
.hh-mg{position:relative;display:inline-block;flex:none;width:1.15em;height:1.15em;margin-left:.35em;vertical-align:-.215em;border-radius:50%;background:var(--kupfer,#C96A2B);color:#fff;cursor:help;box-shadow:0 0 0 1.5px rgba(255,255,255,.9);outline:none}
.hh-mg svg{position:absolute;inset:17%;width:66%;height:66%}
.hh-mg:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--kupfer,#C96A2B)}
.hh-tipp{position:fixed;z-index:10000;max-width:260px;padding:8px 12px;border-radius:12px;background:#1B3318;color:#F4EFE3;font:500 12.5px/1.4 var(--text,Figtree,system-ui,sans-serif);box-shadow:0 10px 30px -10px rgba(0,0,0,.45);pointer-events:none;opacity:0;transform:translate3d(0,4px,0);transition:opacity .2s ease,transform .2s ease}
.hh-tipp.an{opacity:1;transform:none}
.hh-pr-name .hh-mg,h1 .hh-mg,h2 .hh-mg{width:.74em;height:.74em;margin-left:.3em;vertical-align:-.01em}

/* ---------- Admin: Profil ansehen (assets/hofhand-profilansicht.js) ---------- */
.hh-ap-grund{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:24px;background:rgba(15,25,13,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .3s ease}
.hh-ap-grund.an{opacity:1}
.hh-ap{display:flex;flex-direction:column;width:min(1180px,100%);max-height:calc(100vh - 48px);border-radius:26px;background:var(--bg);box-shadow:0 30px 80px -20px rgba(0,0,0,.5);overflow:hidden;transform:translate3d(0,14px,0);transition:transform .4s var(--weich,ease)}
.hh-ap-grund.an .hh-ap{transform:none}
.hh-ap-leiste{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 20px;background:#1B3318;color:#F4EFE3;font:600 13px/1.4 var(--text)}
.hh-ap-leiste span{flex:1}
.hh-ap-zu{display:grid;place-items:center;flex:none;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.hh-ap-zu:hover{background:rgba(255,255,255,.22)}
.hh-ap-zu svg{width:18px;height:18px}
.hh-ap-inhalt{overflow-y:auto;padding-bottom:24px}
@media (max-width:760px){.hh-ap-grund{padding:0}.hh-ap{max-height:100vh;height:100%;border-radius:0}}
/* Glocke: „Früher“ (gelesen, letzte 30 Tage) unter dem Neuen */
.hh-meldungen-trenner{margin:6px 10px 2px;padding-top:10px;border-top:1px solid var(--linie);font:700 11px var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--grau-2)}
.hh-meldung.gelesen{opacity:.72}
.hh-meldung.gelesen .hh-meldung-punkt{background:transparent;box-shadow:inset 0 0 0 1.5px var(--grau-2)}