/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./src/styles/globals.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************/
/* ── Fonts ── */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* ! tailwindcss v3.4.6 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Manrope, system-ui, -apple-system, Segoe UI, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: JetBrains Mono, ui-monospace, SF Mono, Menlo, monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
.collapse{
  visibility: collapse;
}
.fixed{
  position: fixed;
}
.relative{
  position: relative;
}
.block{
  display: block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.table{
  display: table;
}
.grid{
  display: grid;
}
.hidden{
  display: none;
}
.border{
  border-width: 1px;
}
.uppercase{
  text-transform: uppercase;
}
.italic{
  font-style: italic;
}
.line-through{
  text-decoration-line: line-through;
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* ── Design Tokens ── */
:root {
  /* Sage — PRIMARY (sustainability green) */
  --sage-50:  #EEF3EA;
  --sage-100: #D7E3CC;
  --sage-200: #B3CAA0;
  --sage-300: #8AAF72;
  --sage-400: #6A954E;
  --sage-500: #4F7D3A;
  --sage-600: #3E6A2E;
  --sage-700: #305322;
  --sage-800: #1F3C16;
  --sage-900: #13270D;

  /* Fern — deep green */
  --fern-500: #2D4A24;
  --fern-600: #1F361A;
  --fern-700: #142510;

  /* Clay — playful terracotta accent */
  --clay-50:  #FBEEE8;
  --clay-100: #F4D6C8;
  --clay-200: #E9B39C;
  --clay-300: #DB8C6E;
  --clay-400: #C86D4D;
  --clay-500: #B8553A;
  --clay-600: #9E432C;
  --clay-700: #803422;

  /* Ochre — secondary (honey / warning) */
  --ochre-50:  #FBF2E1;
  --ochre-100: #F4E0BB;
  --ochre-200: #E9C888;
  --ochre-300: #DCAF5B;
  --ochre-400: #C88A3E;
  --ochre-500: #AE7330;
  --ochre-600: #8B5A23;
  --ochre-700: #67421A;

  /* Moss — tertiary / success confirmed */
  --moss-50:  #EEF2E3;
  --moss-100: #D8E1BD;
  --moss-200: #B8C78F;
  --moss-300: #96AC66;
  --moss-400: #7A9152;
  --moss-500: #6B7F4A;
  --moss-600: #54653A;
  --moss-700: #3D4B2A;

  /* Rust — danger */
  --rust-50:  #F9E3DE;
  --rust-100: #F0BDB2;
  --rust-200: #DD8776;
  --rust-300: #C75C48;
  --rust-400: #9E3A2A;
  --rust-500: #7E2D20;
  --rust-600: #5E2017;

  /* Oak — warm foreground */
  --oak-50:  #EFEDE4;
  --oak-100: #D6D3C2;
  --oak-200: #B0AE99;
  --oak-300: #83826E;
  --oak-400: #5F5F4E;
  --oak-500: #454537;
  --oak-600: #323227;
  --oak-700: #23231B;
  --oak-800: #171711;
  --oak-900: #0C0C08;

  /* Canvas */
  --parchment:   #FBF8EF;
  --linen:       #F3EEDF;
  --linen-deep:  #E6DFCB;
  --paper-edge:  #D7CEB6;
  --paper-strong:#B9AE8D;
  --ink:         #1A2014;

  /* Semantic */
  --bg:            var(--linen);
  --bg-sunken:     var(--linen-deep);
  --surface:       var(--parchment);
  --surface-2:     #FFFBF2;
  --surface-inv:   var(--oak-700);

  --fg:            var(--oak-600);
  --fg-strong:     var(--oak-800);
  --fg-muted:      var(--oak-400);
  --fg-subtle:     var(--oak-300);
  --fg-on-sage:    #F7FBF2;
  --fg-on-clay:    #FFF8F0;
  --fg-on-ink:     #F3EEDF;

  --border:        var(--paper-edge);
  --border-strong: var(--paper-strong);
  --border-focus:  var(--sage-500);

  --accent:        var(--sage-500);
  --accent-hover:  var(--sage-600);
  --accent-soft:   var(--sage-50);
  --accent-fg:     var(--fg-on-sage);

  --secondary:      var(--clay-500);
  --secondary-soft: var(--clay-50);

  --success:       var(--sage-500);
  --success-soft:  var(--sage-50);
  --warning:       var(--ochre-400);
  --warning-soft:  var(--ochre-50);
  --danger:        var(--rust-400);
  --danger-soft:   var(--rust-50);

  /* Radius */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Shadows */
  --shadow-sm:    0 1px 2px rgba(75,50,25,.06), 0 1px 1px rgba(75,50,25,.04);
  --shadow-md:    0 4px 10px -2px rgba(75,50,25,.10), 0 2px 4px -2px rgba(75,50,25,.06);
  --shadow-lg:    0 18px 40px -12px rgba(75,50,25,.22), 0 6px 14px -6px rgba(75,50,25,.10);
  --shadow-focus: 0 0 0 3px rgba(79,125,58,.28);
  --shadow-inset: inset 0 1px 2px rgba(75,50,25,.10);

  /* Fonts */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale */
  --fs-display-xl: 56px;
  --fs-display-lg: 40px;
  --fs-display-md: 32px;
  --fs-h1: 28px;
  --fs-h2: 22px;
  --fs-h3: 18px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-meta: 11px;
  --fs-mono: 12.5px;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.55;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ── Base ── */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Shell Layout ── */
.hc-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  background: var(--bg);
}

.hc-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.hc-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 16px;
}
.hc-brand-mark { width: 28px; height: 28px; }
.hc-brand-word {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--fg-strong);
  letter-spacing: -0.02em;
}

.hc-nav { display: flex; flex-direction: column; gap: 2px; }
.hc-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base);
}
.hc-nav a:hover { background: var(--linen-deep); color: var(--fg-strong); }
.hc-nav a.active {
  background: var(--accent-soft);
  color: var(--sage-700);
  font-weight: 600;
}
.hc-nav-icon { width: 18px; height: 18px; color: var(--fg-muted); flex: none; }
.hc-nav a.active .hc-nav-icon { color: var(--accent); }
.hc-nav-count {
  margin-left: auto;
  background: var(--clay-500);
  color: #FFF8F0;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
}

.hc-sidebar-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.hc-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--ochre-200);
  color: var(--ochre-700);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  flex: none;
}
.hc-user-email { font-size: 12px; color: var(--fg-muted); }

.hc-main { display: flex; flex-direction: column; min-width: 0; }

.hc-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.hc-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  width: 360px;
}
.hc-search input {
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  color: var(--fg-strong);
  width: 100%;
  font-size: 14px;
}
.hc-topbar-actions { display: flex; gap: 8px; align-items: center; }
.hc-topbar-title { font-size: 13px; color: var(--fg-muted); font-weight: 600; }
.hc-content { padding: 28px; }

/* ── Mobile-Navigation (Tab-Bar + „Mehr"-Sheet) — Desktop: ausgeblendet ── */
.hc-tabbar { display: none; }
.hc-sheet-backdrop,
.hc-sheet { display: none; }

/* ── Buttons ── */
.btn {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base), transform 180ms var(--ease-out);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1.15;
  white-space: nowrap;
  text-decoration: none;
}
/* Icons/„+" im Button bleiben kompakt neben dem Label, nie darüber/umgebrochen */
.btn > svg,
.btn > .btn-icon { flex: none; line-height: 0; }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: var(--fg-on-sage); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--surface-2); color: var(--fg-strong); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--border-strong); }
.btn-ghost { background: transparent; color: var(--fg-strong); }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-danger { background: var(--danger); color: var(--surface); }
.btn-danger:hover { background: var(--rust-500); }
.btn-sm { padding: 6px 12px; font-size: 13px; }

/* ── Cards ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.card-hover {
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.card-hover:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.card-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
  font-weight: 700;
  margin: 0 0 12px;
}

/* ── Inputs ── */
.field {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fg-strong);
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.field:hover { border-color: var(--border-strong); }
.field:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus); }

/* ── Badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  line-height: 1.3;
}
.badge .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none; }
.badge-received   { background: var(--linen-deep); color: var(--oak-600); }
.badge-processing { background: var(--ochre-50); color: var(--ochre-700); border-color: var(--ochre-100); }
.badge-ready      { background: var(--sage-50); color: var(--sage-700); border-color: var(--sage-100); }
.badge-review     { background: var(--clay-50); color: var(--clay-700); border-color: var(--clay-100); }
.badge-failed     { background: var(--rust-50); color: var(--rust-500); border-color: var(--rust-100); }
.badge-rule   { background: var(--linen-deep); color: var(--oak-500); }
.badge-ai     { background: var(--ochre-50); color: var(--ochre-700); }
.badge-manual { background: var(--sage-50); color: var(--sage-700); }

/* ── Table ── */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.hc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hc-table thead { background: var(--linen-deep); }
.hc-table th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
  padding: 12px 16px;
  text-align: left;
}
.hc-table td { padding: 14px 16px; border-top: 1px solid var(--border); color: var(--fg); }
.hc-table tr:hover td { background: var(--surface-2); }
.hc-table a { color: var(--clay-700); text-decoration: none; font-weight: 500; }
.hc-table a:hover { text-decoration: underline; }

/* ── Page header ── */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.page-title {
  font-size: var(--fs-h1);
  font-weight: 600;
  color: var(--fg-strong);
  margin: 0;
  letter-spacing: var(--tracking-tight);
  font-family: var(--font-sans);
}
.page-sub { font-size: 14px; color: var(--fg-muted); margin: 6px 0 0; }

/* ── Stat tiles ── */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.stat .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-subtle); font-weight: 700; }
.stat .v { font-family: var(--font-display); font-size: 48px; font-weight: 500; color: var(--fg-strong); letter-spacing: -0.03em; line-height: 1; margin-top: 8px; }
.stat .f { font-size: 12px; color: var(--fg-muted); margin-top: 6px; }
.stat.accent { background: var(--clay-50); border-color: var(--clay-100); }
.stat.accent .k { color: var(--clay-700); }
.stat.accent .v { color: var(--clay-700); }
.stat.accent .f { color: var(--clay-600); }

/* ── Modal ── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(35, 26, 19, 0.55);
  backdrop-filter: blur(6px);
  z-index: 40;
  animation: hcFadeIn var(--dur-base) var(--ease-out);
}
.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 50;
  transform: translate(-50%, -50%);
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: 24px 26px 22px;
  width: 460px;
  max-width: calc(100vw - 32px);
  animation: hcPop 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--fg-strong);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

@keyframes hcFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes hcPop {
  0%   { transform: translate(-50%, -48%) scale(0.92); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
}

/* ── Sparziel-Erreicht-Animation ── */
@keyframes hc-reached-pop {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0px  rgba(62, 106, 46, 0); }
  30%  { transform: scale(1.03); box-shadow: 0 0 0 8px  rgba(62, 106, 46, 0.25); }
  60%  { transform: scale(1.01); box-shadow: 0 0 0 16px rgba(62, 106, 46, 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0px  rgba(62, 106, 46, 0); }
}
@keyframes hc-sparkle {
  0%   { opacity: 0; transform: translateY(0)    scale(0.6); }
  40%  { opacity: 1; transform: translateY(-12px) scale(1); }
  100% { opacity: 0; transform: translateY(-24px) scale(0.8); }
}
.hc-reached-card { animation: hc-reached-pop 2.4s ease-out 1; }
.hc-sparkles {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit;
}
.hc-sparkles span {
  position: absolute; bottom: 18px; font-size: 18px;
  animation: hc-sparkle 1.4s ease-out infinite;
}

/* ── Upload dropzone ── */
.dropzone {
  border: 2px dashed var(--border-strong);
  background: var(--surface-2);
  border-radius: var(--radius-xl);
  padding: 48px 40px;
  text-align: center;
  transition: all var(--dur-base) var(--ease-out);
  cursor: pointer;
}
.dropzone.drag {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.dropzone .dz-hint {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--fg-strong);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 12px 0 4px;
}
.dropzone .dz-sub { color: var(--fg-muted); font-size: 13px; }

/* ── Search result ── */
.result {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
  text-decoration: none;
  display: block;
}
.result:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.result-title { font-weight: 600; color: var(--fg-strong); font-size: 15px; }
.result-meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
.result-snippet { margin-top: 6px; font-size: 13.5px; color: var(--fg); }
.result-snippet mark { background: var(--ochre-100); color: var(--oak-700); padding: 0 2px; border-radius: 3px; }

/* ── Summary box ── */
.summary {
  background: var(--ochre-50);
  border: 1px solid var(--ochre-100);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  color: var(--oak-600);
  font-size: 14px;
  line-height: 1.55;
}

/* ── Login ── */
.login-bg {
  min-height: 100vh;
  background: var(--bg);
  display: grid;
  place-items: center;
  padding: 20px;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: var(--shadow-md);
}
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.login-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--fg-strong);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.login-sub { font-size: 13.5px; color: var(--fg-muted); margin: 0 0 20px; }

/* ── Utilities ── */
.hc-link { color: var(--clay-700); text-decoration: none; font-weight: 500; }
.hc-link:hover { text-decoration: underline; }

.mono { font-family: var(--font-mono); font-size: var(--fs-mono); }

.hc-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--fg-muted);
  font-size: 14px;
}

/* ── Suche: Ergebnisse + Facetten ── */
.hc-results-layout { display: grid; grid-template-columns: 1fr 220px; gap: 18px; }

/* ── Detail-Layout (Viewer + Panel) ── */
.hc-detail-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }

@media (max-width: 768px) {
  .hc-results-layout { grid-template-columns: 1fr; }
  .hc-detail-layout { grid-template-columns: 1fr; }

  /* SettingField: Label und Steuerelement untereinander */
  .hc-setting-row { flex-direction: column; }
  .hc-setting-control { width: 100% !important; }
}

/* ── Responsive: Tablet ── */
@media (max-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .hc-content { padding: 24px; }
  .hc-topbar { padding: 14px 20px; }
}

/* ── Responsive: Handy ── */
@media (max-width: 768px) {
  /* Sidebar weicht der unteren Tab-Bar */
  .hc-shell { grid-template-columns: 1fr; }
  .hc-sidebar { display: none; }

  .hc-topbar { padding: 12px 16px; }
  .hc-topbar-title { font-size: 15px; color: var(--fg-strong); }

  /* Platz für die fixierte Tab-Bar unten freihalten */
  .hc-content {
    padding: 16px;
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  /* Untere Tab-Bar */
  .hc-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px -6px rgba(75, 50, 25, 0.18);
  }
  .hc-tabbar a,
  .hc-tabbar button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 2px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    color: var(--fg-muted);
    font: inherit;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    min-width: 0;
  }
  .hc-tabbar a.active,
  .hc-tabbar button.active { color: var(--sage-700); }
  .hc-tab-icon { font-size: 20px; line-height: 1; }
  .hc-tab-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* „Mehr"-Bottom-Sheet */
  .hc-sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(35, 26, 19, 0.45);
    backdrop-filter: blur(3px);
    z-index: 40;
    animation: hcFadeIn var(--dur-base) var(--ease-out);
  }
  .hc-sheet {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: var(--surface);
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
    animation: hcSheetUp var(--dur-slow) var(--ease-out);
  }
  .hc-sheet-grip {
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: var(--border-strong);
    margin: 0 auto 14px;
  }
  .hc-sheet-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }
  .hc-sheet-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
  .hc-sheet-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 500;
    color: var(--fg-strong);
    text-decoration: none;
  }
  .hc-sheet-nav a.active { background: var(--accent-soft); color: var(--sage-700); font-weight: 600; }

  /* Inhalte stapeln statt nebeneinander */
  .stat-grid { grid-template-columns: 1fr; gap: 12px; }
  .stat .v { font-size: 36px; }

  .page-head { flex-wrap: wrap; gap: 12px; }
  .page-title { font-size: var(--fs-h2); }

  /* Breite Tabellen horizontal scrollbar machen */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hc-table { min-width: 560px; }

  /* Topbar-Suche (falls genutzt) flexibel */
  .hc-search { width: 100%; }

  /* Modal nimmt fast volle Breite, ggf. scrollbar */
  .modal {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 20px 18px 18px;
  }
  .modal-title { font-size: 22px; }

  .dropzone { padding: 32px 20px; }
}

@keyframes hcSheetUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}