/* Handarbeit – schlichtes Stylesheet, hell und dunkel */
:root {
  --hg: #fbf8f4; --text: #2b2622; --leise: #7a6f66; --rand: #e6ded5;
  --akzent: #b4533a; --karte: #ffffff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --hg: #1d1a18; --text: #ece6e0; --leise: #a89d93; --rand: #3a3430; --akzent: #e08a6d; --karte: #272320; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--hg); color: var(--text); line-height: 1.45; }
a { color: var(--akzent); }
main { max-width: 1100px; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.5rem; margin: .5rem 0 1rem; }

header { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; padding: .6rem 1rem; border-bottom: 1px solid var(--rand); background: var(--karte); }
.pfad { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem; margin-right: auto; min-width: 0; }
.pfad a { text-decoration: none; }
.pfad a:hover { text-decoration: underline; }
.pfad .trenner { color: var(--leise); }
.pfad [aria-current] { color: var(--leise); }
.marke { font-weight: 700; font-size: 1.2rem; }
.suche { display: flex; gap: .4rem; flex: 1 1 18rem; max-width: 30rem; }
.suche input { flex: 1; min-width: 0; }

/* Knopf nur mit Icon (Lupe): Icon in Weiß auf Akzentfarbe */
.nur-icon { display: grid; place-items: center; padding: .45rem .6rem; }
.nur-icon .icon { width: 1.25rem; height: 1.25rem; background-color: #fff; }

/* Benutzermenü: Icon, Klick klappt Name und Abmelden auf (ohne JavaScript) */
.konto { position: relative; }
.konto summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--rand); border-radius: 50%; }
.konto summary::-webkit-details-marker { display: none; }
.konto summary:hover, .konto[open] summary { border-color: var(--akzent); }
.konto summary .icon { width: 1.4rem; height: 1.4rem; }
.konto-menue { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 10; display: grid; gap: .6rem; min-width: 12rem;
  padding: .8rem 1rem; border: 1px solid var(--rand); border-radius: 8px; background: var(--karte); box-shadow: 0 6px 20px rgb(0 0 0 / .12); }
.konto-menue button { width: 100%; }

input, button { font: inherit; padding: .45rem .6rem; border: 1px solid var(--rand); border-radius: 6px; background: var(--hg); color: var(--text); }
button, .knopf { background: var(--akzent); color: #fff; border-color: var(--akzent); cursor: pointer; text-decoration: none; padding: .45rem .8rem; border-radius: 6px; }

.menue { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; }
.menue a { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border: 1px solid var(--rand); border-radius: 8px; background: var(--karte); text-decoration: none; color: var(--text); }
.menue a:hover { border-color: var(--akzent); }
.menue .text { display: grid; }
.menue small { color: var(--leise); font-size: .9rem; }

/* Themen-Icons: SVG als Maske, eingefärbt mit der Akzentfarbe (hell und dunkel) */
.icon { flex: none; width: 2rem; height: 2rem; background-color: var(--akzent);
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.icon-stricken    { --icon: url("icons/stricken.svg"); }
.icon-haekeln     { --icon: url("icons/haekeln.svg"); }
.icon-naehen      { --icon: url("icons/naehen.svg"); }
.icon-sticken     { --icon: url("icons/sticken.svg"); }
.icon-amigurumi   { --icon: url("icons/amigurumi.svg"); }
.icon-kuscheltier { --icon: url("icons/kuscheltier.svg"); }
.icon-filzen      { --icon: url("icons/filzen.svg"); }
.icon-wolle       { --icon: url("icons/wolle.svg"); }
.icon-lupe        { --icon: url("icons/lupe.svg"); }
.icon-benutzer    { --icon: url("icons/benutzer.svg"); }

.werke { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 1rem; }
.werke a { display: block; text-decoration: none; color: var(--text); }
.werke img, .ohne-cover { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; border: 1px solid var(--rand); background: var(--karte); display: block; }
.werke strong { display: block; margin-top: .35rem; font-size: .95rem; }
.werke span { color: var(--leise); font-size: .85rem; }

.werk { display: grid; grid-template-columns: minmax(0, 16rem) 1fr; gap: 1.5rem; }
.werk .cover img { width: 100%; border-radius: 6px; border: 1px solid var(--rand); }
.werk dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; }
.werk dt { color: var(--leise); }
.werk dd { margin: 0; }
.dateien { list-style: none; padding: 0; display: grid; gap: .6rem; }
.dateien small { color: var(--leise); }
.beschreibung { white-space: pre-line; }
@media (max-width: 640px) { .werk { grid-template-columns: 1fr; } .werk .cover img { max-width: 14rem; } }

.blaettern { display: flex; justify-content: space-between; margin: 1.5rem 0; }

/* Schmale Bildschirme: Pfad und Benutzer-Icon oben, Suche in voller Breite darunter */
@media (max-width: 640px) {
  .suche { order: 3; flex-basis: 100%; max-width: none; }
}

body.login main { max-width: 22rem; margin-top: 12vh; }
.login form { display: grid; gap: .8rem; padding: 1.2rem; border: 1px solid var(--rand); border-radius: 10px; background: var(--karte); }
.login label { display: grid; gap: .3rem; }
.fehler { color: #b3261e; margin: 0; }