/* hilli.cloud – gemeinsame Gestaltung aller Apps (Design hilli.tirol: Skill design-hilli-tirol).
   Schriften lokal (OFL, core/fonts), keine fremden Quellen (CSP 'self').
   Apps ergänzen nur Anordnung; Farben ausschließlich über die Tokens unten. */

@font-face { font-family: "Fraunces"; font-weight: 400; font-display: swap; src: url("fonts/Fraunces-Regular.ttf") format("truetype"); }
@font-face { font-family: "Fraunces"; font-weight: 500; font-display: swap; src: url("fonts/Fraunces-Medium.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/Inter-Regular.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("fonts/Inter-Medium.ttf") format("truetype"); }

:root {
  --schnee: #F7F9FA; --weiss: #FFFFFF; --fels-hell: #E3E8EA; --fels: #858F95; --granit: #56636A;
  --schiefer: #1E2A31; --bergsee: #0E4F5C;
  --cook: #D39B22; --cook-tief: #8A6212; --ride: #2F7FB5; --ride-tief: #2A72A3;
  --fly: #2AAFB0; --fly-tief: #16787A; --drink: #3F5B3B;
  --reserve-enzian: #3D4C9E; --reserve-latsche: #6F8A3A; --reserve-eis: #9AD4DE; --reserve-granitblau: #34505E;
  --status-offen: #56636A; --status-aktiv: #2A72A3; --status-erledigt: #2E7A4F; --status-warten: #8A6212; --status-fehler: #A3336B;
  --space-2: 8px; --space-4: 16px; --space-6: 24px; --space-10: 40px; --space-16: 64px;
  --radius-sm: 6px; --radius-lg: 14px; --radius-pill: 999px;
}

/* ---- Bausteine aus dem Design-System (assets/komponenten.css, ohne Google-Fonts-Einbindung) ---- */
:root,[data-bereich]{--b:var(--bergsee);--b-fill:var(--bergsee);--b-on:#FFFFFF;--b-text:var(--bergsee)}
[data-bereich="cook"]{--b:var(--cook);--b-fill:var(--cook);--b-on:var(--schiefer);--b-text:var(--cook-tief)}
[data-bereich="ride"]{--b:var(--ride);--b-fill:var(--ride-tief);--b-on:#FFFFFF;--b-text:var(--ride-tief)}
[data-bereich="fly"]{--b:var(--fly);--b-fill:var(--fly);--b-on:var(--schiefer);--b-text:var(--fly-tief)}
[data-bereich="drink"]{--b:var(--drink);--b-fill:var(--drink);--b-on:#FFFFFF;--b-text:var(--drink)}
[data-bereich]{--b-soft:color-mix(in srgb,var(--b) 14%,#FFFFFF)}
.ht{font-family:"Inter",system-ui,sans-serif;color:var(--schiefer);font-size:16px;line-height:26px}
.ht *{box-sizing:border-box}
.ht-h1,.ht-h2,.ht-h3{font-family:"Fraunces",Georgia,serif;font-weight:500;margin:0;color:var(--schiefer)}
.ht-h1{font-size:40px;line-height:46px}.ht-h2{font-size:28px;line-height:34px}.ht-h3{font-size:20px;line-height:26px}
.ht-meta{font-size:14px;line-height:20px;color:var(--granit)}
.ht-btn{display:inline-flex;align-items:center;gap:var(--space-2);height:40px;padding:0 var(--space-4);border-radius:var(--radius-sm);font:500 14px/1 "Inter",system-ui,sans-serif;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s}
.ht-btn:focus-visible{outline:2px solid var(--bergsee);outline-offset:2px}
.ht-btn--primary{background:var(--b-fill);color:var(--b-on)}
.ht-btn--primary:hover{background:color-mix(in srgb,var(--b-fill) 88%,#000)}
.ht-btn--secondary{background:var(--weiss);color:var(--schiefer);border-color:var(--fels)}
.ht-btn--secondary:hover{border-color:var(--schiefer)}
.ht-btn--ghost{background:transparent;color:var(--b-text)}
.ht-btn--ghost:hover{background:var(--b-soft)}
.ht-btn[disabled]{background:var(--fels-hell);color:var(--granit);border-color:transparent;cursor:not-allowed}
.ht-field{display:flex;flex-direction:column;gap:6px}
.ht-label{font-size:13px;line-height:18px;font-weight:500;color:var(--schiefer)}
.ht-input{height:40px;padding:0 12px;border:1px solid var(--fels);border-radius:var(--radius-sm);background:var(--weiss);font:400 15px "Inter",system-ui,sans-serif;color:var(--schiefer);width:100%}
.ht-input::placeholder{color:var(--granit)}
.ht-input:focus{outline:none;border-color:var(--bergsee);box-shadow:0 0 0 3px color-mix(in srgb,var(--bergsee) 22%,transparent)}
.ht-hint{font-size:13px;color:var(--granit)}
.ht-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.ht-chip{height:32px;padding:0 14px;border-radius:var(--radius-pill);border:1px solid var(--fels);background:var(--weiss);color:var(--schiefer);font:500 13px "Inter",system-ui,sans-serif;cursor:pointer}
.ht-chip[aria-pressed="true"]{background:var(--b-fill);border-color:var(--b-fill);color:var(--b-on)}
.ht-card{background:var(--weiss);border:1px solid var(--fels-hell);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.ht-card__media{height:140px;background:var(--b-soft);position:relative}
.ht-card__media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--b)}
.ht-card__body{padding:var(--space-4) var(--space-6) var(--space-6);display:flex;flex-direction:column;gap:var(--space-2)}
.ht-tag{display:inline-block;font-size:12px;font-weight:500;color:var(--b-text);background:var(--b-soft);padding:2px 10px;border-radius:var(--radius-pill);align-self:flex-start}
.ht-hero{background:var(--b);padding:var(--space-10) var(--space-10) var(--space-10);border-radius:var(--radius-lg);color:var(--b-on)}
.ht-hero .ht-h1,.ht-hero .ht-hero__kicker,.ht-hero p{color:var(--b-on)}
[data-bereich="ride"] .ht-hero,[data-bereich="ride"].ht-hero{--b-on:#FFFFFF}
.ht-hero__kicker{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--space-2)}
.ht-hero p{margin:var(--space-2) 0 0;max-width:520px}
.ht-nav{display:flex;align-items:center;gap:var(--space-6);background:var(--bergsee);padding:0 var(--space-6);height:64px;border-radius:var(--radius-lg)}
.ht-nav__logo{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:22px;color:#FFFFFF;margin-right:auto;text-decoration:none}
.ht-nav a.ht-nav__item{color:#FFFFFF;opacity:1;font-size:14px;font-weight:500;text-decoration:none;padding:6px 0;border-bottom:3px solid transparent}
.ht-nav a.ht-nav__item[aria-current="page"]{border-bottom-color:var(--nav-akzent,#FFFFFF)}
.ht-list{width:100%;border-collapse:collapse;font-size:14px;background:var(--weiss);border:1px solid var(--fels-hell);border-radius:var(--radius-lg);overflow:hidden}
.ht-list th{text-align:left;font-weight:500;font-size:13px;color:var(--granit);padding:10px 16px;border-bottom:1px solid var(--fels-hell);background:var(--schnee)}
.ht-list td{padding:12px 16px;border-bottom:1px solid var(--fels-hell)}
.ht-list tr:last-child td{border-bottom:none}
.ht-list tbody tr:hover td{background:var(--b-soft)}
.ht-list td.ht-num{text-align:right;font-variant-numeric:tabular-nums}
.ht-export{display:flex;align-items:center;gap:var(--space-2);padding:12px 16px;background:var(--weiss);border:1px solid var(--fels-hell);border-radius:var(--radius-lg)}
.ht-export__info{margin-right:auto;font-size:14px;color:var(--granit)}
.ht-page{background:var(--schnee);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-6)}
.ht-home-hero{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--bergsee);color:#FFFFFF;padding:var(--space-16) var(--space-10);min-height:300px;display:flex;flex-direction:column;justify-content:flex-end}
.ht-home-hero__berg{position:absolute;right:0;bottom:0;width:62%;height:100%}
.ht-home-hero .ht-h1{color:#FFFFFF;font-size:56px;line-height:60px;position:relative}
.ht-home-hero p{position:relative;margin:var(--space-2) 0 0;max-width:420px;color:#FFFFFF}
.ht-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.ht-tile{background:var(--weiss);border:1px solid var(--fels-hell);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;color:var(--schiefer);display:flex;flex-direction:column}
.ht-tile__band{height:72px;background:var(--b)}
.ht-tile__body{padding:var(--space-4);display:flex;flex-direction:column;gap:4px}
.ht-tile--offen{border-style:dashed;border-color:var(--fels)}
.ht-tile--offen .ht-tile__band{opacity:.35}
.ht-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-4)}
.ht-toolbar .ht-field{min-width:260px}
.ht-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.ht-count{font-size:14px;color:var(--granit)}
.ht-foot{display:flex;justify-content:space-between;padding:var(--space-4) var(--space-6);border-top:1px solid var(--fels-hell);font-size:13px;color:var(--granit)}
.ht-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:2px 10px;border-radius:var(--radius-pill);color:var(--s);background:color-mix(in srgb,var(--s) 10%,#FFFFFF)}
.ht-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--s)}
.ht-status--offen{--s:var(--status-offen)}.ht-status--aktiv{--s:var(--status-aktiv)}.ht-status--erledigt{--s:var(--status-erledigt)}.ht-status--warten{--s:var(--status-warten)}.ht-status--fehler{--s:var(--status-fehler)}
.ht-flow{list-style:none;margin:0;padding:0;background:var(--weiss);border:1px solid var(--fels-hell);border-radius:var(--radius-lg)}
.ht-flow li{display:grid;grid-template-columns:32px 1fr auto auto;align-items:center;gap:var(--space-4);padding:14px 16px;border-bottom:1px solid var(--fels-hell)}
.ht-flow li:last-child{border-bottom:none}
.ht-flow__nr{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;border:1.5px solid var(--fels);color:var(--granit)}
.ht-flow li[data-state="erledigt"] .ht-flow__nr{background:var(--status-erledigt);border-color:var(--status-erledigt);color:#FFFFFF}
.ht-flow li[data-state="aktiv"]{background:var(--b-soft)}
.ht-flow li[data-state="aktiv"] .ht-flow__nr{border-color:var(--b-fill);background:var(--b-fill);color:var(--b-on)}
.ht-flow__titel{font-weight:500}.ht-flow__sub{font-size:13px;color:var(--granit)}
.ht-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ht-check label{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer}
.ht-check label:hover{background:var(--b-soft)}
.ht-check input{appearance:none;width:20px;height:20px;border:1.5px solid var(--fels);border-radius:5px;margin:0;display:grid;place-content:center;background:var(--weiss)}
.ht-check input:checked{background:var(--b-fill);border-color:var(--b-fill)}
.ht-check input:checked::after{content:"";width:10px;height:6px;border-left:2px solid var(--b-on);border-bottom:2px solid var(--b-on);transform:rotate(-45deg) translate(1px,-1px)}
.ht-check input:checked+span{color:var(--granit);text-decoration:line-through}
.ht-check input:focus-visible{outline:2px solid var(--bergsee);outline-offset:2px}
.ht-note{display:flex;gap:12px;padding:12px 16px;border-radius:var(--radius-sm);font-size:14px;color:var(--schiefer);background:color-mix(in srgb,var(--s) 9%,#FFFFFF);border:1px solid color-mix(in srgb,var(--s) 35%,#FFFFFF)}
.ht-note b{color:var(--s);font-weight:500}
.ht-note--info{--s:var(--status-aktiv)}.ht-note--erfolg{--s:var(--status-erledigt)}.ht-note--warnung{--s:var(--status-warten)}.ht-note--fehler{--s:var(--status-fehler)}
.ht-toast{display:inline-flex;align-items:center;gap:12px;background:var(--schiefer);color:#FFFFFF;padding:12px 16px;border-radius:var(--radius-sm);font-size:14px}
.ht-toast button{background:none;border:none;color:var(--reserve-eis);font:500 14px "Inter",sans-serif;cursor:pointer}
.ht-overlay{background:rgba(30,42,49,.45);padding:var(--space-10);display:flex;justify-content:center;border-radius:var(--radius-lg)}
.ht-dialog{background:var(--weiss);border-radius:var(--radius-lg);padding:var(--space-6);width:420px;max-width:100%;display:flex;flex-direction:column;gap:var(--space-4)}
.ht-dialog__actions{display:flex;justify-content:flex-end;gap:var(--space-2)}
.ht-btn--danger{background:var(--status-fehler);color:#FFFFFF}
.ht-tabs{display:flex;gap:var(--space-6);border-bottom:1px solid var(--fels-hell)}
.ht-tabs button{background:none;border:none;padding:10px 0;font:500 14px "Inter",sans-serif;color:var(--granit);border-bottom:3px solid transparent;margin-bottom:-1px;cursor:pointer}
.ht-tabs button[aria-selected="true"]{color:var(--schiefer);border-bottom-color:var(--b)}
.ht-empty{text-align:center;padding:var(--space-10) var(--space-6);background:var(--weiss);border:1px dashed var(--fels);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
.ht-empty__mark{width:48px;height:48px;border-radius:50%;background:var(--b-soft);margin-bottom:var(--space-2)}

/* ---- hilli.cloud: Seitenrahmen ---- */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--schnee); min-height: 100vh; }
[hidden] { display: none !important; }
.hc-rahmen { max-width: 1120px; margin: 0 auto; }
.ht-nav__logo:focus-visible, .ht-tile:focus-visible, a:focus-visible { outline: 2px solid var(--bergsee); outline-offset: 2px; }
.ht-nav .ht-btn--nav { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .5); }
.ht-nav .ht-btn--nav:hover { border-color: #FFFFFF; }
.ht-nav .ht-btn--nav:focus-visible { outline-color: #FFFFFF; }
a { color: var(--bergsee); }

/* Anmeldung */
.hc-anmeldung { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); box-sizing: border-box; }
.hc-karte { background: var(--weiss); border: 1px solid var(--fels-hell); border-radius: var(--radius-lg); padding: var(--space-6); width: 400px; max-width: 100%; display: flex; flex-direction: column; gap: var(--space-4); box-sizing: border-box; }
.hc-wortmarke { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 28px; line-height: 34px; color: var(--bergsee); margin: 0; }
.hc-karte form { display: flex; flex-direction: column; gap: var(--space-4); }
.hc-aktionen { display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; }
.hc-aktionen .ht-btn--primary { min-width: 120px; justify-content: center; }
.hc-code { font-variant-numeric: tabular-nums; letter-spacing: .15em; font-size: 20px; }
.ht-field--fehler .ht-input { border-color: var(--status-fehler); }
.ht-field--fehler .ht-hint { color: var(--status-fehler); }

/* Startseite */
.hc-start { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-6); }
.hc-start .ht-tile__band { height: 56px; }
.hc-tile-status { margin-top: 4px; align-self: flex-start; }

/* Handy: einspaltig, Navigation kompakt */
@media (max-width: 900px) {
  .ht-tiles, .ht-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ht-tiles, .ht-grid3 { grid-template-columns: 1fr; }
  .ht-nav { padding: 0 var(--space-4); gap: var(--space-4); height: 56px; }
  .ht-h1 { font-size: 28px; line-height: 34px; }
  .hc-start { padding: var(--space-2); gap: var(--space-4); }
  .hc-start .ht-tile__band { height: 16px; }
  .hc-aktionen { flex-direction: column-reverse; align-items: stretch; }
  .hc-aktionen .ht-btn { justify-content: center; }
}