/* creatorwerk – Filebrowser branding */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Jost:wght@400;500&display=swap');

:root {
  --cw-paper: #F2ECE2;
  --cw-sheet: #FBF8F3;
  --cw-ink: #1C1915;
  --cw-ink-soft: #5E564C;
  --cw-bronze: #9C7B52;
  --cw-bronze-light: #C9AB80;
  --cw-hair: rgba(28, 25, 21, .10);
  --cw-card: #1A1714;

  --blue: var(--cw-bronze);
  --dark-blue: #7E6243;
  --icon-blue: var(--cw-bronze);
  --iconPrimary: var(--cw-bronze);
  --iconSecondary: #fff;
  --iconTertiary: #CDBFAB;
  --action: var(--cw-ink-soft);
  --background: var(--cw-paper);
  --surfacePrimary: var(--cw-sheet);
  --surfaceSecondary: #E7DFD2;
  --textPrimary: var(--cw-ink-soft);
  --textSecondary: var(--cw-ink);
  --divider: var(--cw-hair);
  --hover: rgba(156, 123, 82, .10);
  --borderPrimary: var(--cw-hair);
  --borderSecondary: rgba(28, 25, 21, .18);
  --item-selected: #fff;
}

:root.dark {
  --cw-paper: #171512;
  --cw-sheet: #211E1A;
  --cw-ink: #F2ECE2;
  --cw-ink-soft: #B3A99B;
  --cw-hair: rgba(242, 236, 226, .09);
  --blue: var(--cw-bronze-light);
  --icon-blue: var(--cw-bronze-light);
  --iconPrimary: var(--cw-bronze-light);
  --action: var(--cw-ink-soft);
  --background: var(--cw-paper);
  --surfacePrimary: var(--cw-sheet);
  --surfaceSecondary: #2C2823;
  --textPrimary: var(--cw-ink-soft);
  --textSecondary: var(--cw-ink);
  --hover: rgba(201, 171, 128, .10);
  --borderPrimary: var(--cw-hair);
  --borderSecondary: rgba(242, 236, 226, .16);
}

html, body, input, button, select, textarea {
  font-family: 'Jost', system-ui, sans-serif;
  letter-spacing: .01em;
}

body { background: var(--background); color: var(--textSecondary); }

::selection { background: rgba(156, 123, 82, .25); }

/* ---------- Anmeldung: schwarze Karte auf Papier ---------- */
#login {
  position: fixed;
  inset: 0;
  background-color: var(--cw-paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .33 0 0 0 0 .25 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 16px;
  box-sizing: border-box;
}

#login form {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none;
  width: min(100%, 22.5rem);
  max-width: none;
  margin: 0;
  padding: 3rem 2.5rem 2.5rem;
  background: var(--cw-card);
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .04) inset,
    0 30px 60px -28px rgba(40, 28, 14, .55),
    0 8px 18px -10px rgba(40, 28, 14, .35);
  color: #EDE6DA;
  text-align: center;
  animation: cw-rise .7s cubic-bezier(.2, .7, .2, 1) both;
}

#login form img {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto 1.25rem;
}

#login form h1 {
  margin: 0 0 2.25rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: lowercase;
  color: #F2ECE2;
}

#login .input {
  display: block;
  width: 100%;
  margin: 0 0 1rem;
  padding: .7rem .1rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(237, 230, 218, .22);
  border-radius: 0;
  color: #F2ECE2;
  font-size: 1rem;
  transition: border-color .2s ease;
}

#login .input::placeholder { color: rgba(237, 230, 218, .45); }

#login .input:focus {
  outline: none;
  border-bottom-color: var(--cw-bronze-light);
}

#login .button {
  margin-top: 1.5rem;
  padding: .85rem 1rem;
  width: 100%;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(135deg, #D2B48A 0%, #A3825A 48%, #C6A577 72%, #8C6C47 100%);
  color: #1A1714;
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .04em;
  cursor: pointer;
  transition: filter .2s ease, transform .2s ease;
}

#login .button:hover { filter: brightness(1.06); }
#login .button:active { transform: translateY(1px); }
#login .button:focus-visible,
#login .input:focus-visible { outline: 2px solid var(--cw-bronze-light); outline-offset: 3px; }

#login .wrong {
  background: rgba(214, 120, 100, .14);
  color: #F0C3B8;
  border-radius: 3px;
  margin: 0 0 1.25rem;
  padding: .6rem;
  font-size: .9rem;
}

#login p { color: rgba(237, 230, 218, .6); }
#login p:hover { color: var(--cw-bronze-light); }

@keyframes cw-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Oberfläche nach dem Login ---------- */
header {
  background: var(--surfacePrimary);
  border-bottom: 1px solid var(--borderPrimary);
  box-shadow: none !important;
}

header img { height: 2.1em; }

#search #input { border-radius: 4px; background: var(--surfaceSecondary); }

nav .action { border-radius: 4px; }
nav .action:hover, nav .action:focus-visible { background: var(--hover); }

#breadcrumbs span,
#breadcrumbs a { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.15rem; }

.card, .card-content {
  border-radius: 6px;
}

.card { box-shadow: 0 20px 50px -24px rgba(40, 28, 14, .35); }

.card .card-title h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 1.6rem;
}

#listing .item {
  border-radius: 4px;
  transition: background .15s ease;
}

#listing .item:hover { background: var(--hover); }

#listing .item[aria-selected="true"] {
  background: var(--cw-ink) !important;
  color: var(--cw-paper) !important;
}

#listing .item[aria-selected="true"] i,
#listing .item[aria-selected="true"] .name,
#listing .item[aria-selected="true"] .size,
#listing .item[aria-selected="true"] .modified { color: var(--cw-paper) !important; }

#listing h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--textSecondary);
}

.button { border-radius: 3px; }
.button--flat { color: var(--blue); }

.input:focus { border-color: var(--blue); }

@media (prefers-reduced-motion: reduce) {
  #login form { animation: none; }
  * { transition: none !important; }
}

@media (max-width: 480px) {
  #login form { padding: 2.5rem 1.5rem 2rem; }
}