/* =========================================================
   PIXEL WITCH — Neocities Theme by Cameelia
   Inspiriert von: clean, cute, witchy, natürlich
   Farben: Beige, Salbeigrün, Weiß
   ========================================================= */

:root {
  --night: #4f594d;
  --night-deep: #3f483f;
  --night-soft: #65705f;
  --sage: #89947c;
  --sage-light: #adb49b;
  --paper: #f4ead6;
  --paper-light: #fbf4e7;
  --paper-dark: #d9c7a8;
  --wood: #8d7456;
  --gold: #c7a875;
  --ink: #3f4038;
  --muted: #756d60;
  --line: #6c725f;
  --page-width: 900px;
  --pixel-shadow: 4px 4px 0 #30382f;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--paper);
  background:
    radial-gradient(circle at 2px 2px, rgba(244, 234, 214, .08) 1px, transparent 1px),
    var(--night-deep);
  background-size: 18px 18px;
  font-family: "Courier New", Courier, monospace;
  line-height: 1.5;
}

img { display: block; margin: auto; max-width: 100%; image-rendering: pixelated; }
a { color: inherit; }

.site-shell {
  width: min(calc(100% - 2rem), var(--page-width));
  margin: 2rem auto;
  overflow: hidden;
  background: var(--night);
  border: 3px solid var(--paper-dark);
  box-shadow: 8px 8px 0 #2d342c;
}

.site-header {
  position: relative;
  padding: 2.2rem 1.5rem 1.8rem;
  text-align: center;
  background:
    var(--night);
  border-bottom: 2px solid var(--gold);
}

.stars {
  margin-bottom: .8rem;
  color: var(--gold);
  letter-spacing: .7rem;
  font-size: .9rem;
}

.site-title {
  margin: 0;
  color: var(--paper);
  font-size: clamp(2rem, 7vw, 4rem);
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 var(--night-deep);
}

.site-subtitle {
  margin: .9rem 0 0;
  color: var(--paper-dark);
  font-size: .85rem;
  letter-spacing: .15em;
}

.main-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background: var(--paper);
  border-bottom: 3px solid var(--wood);
}

.main-nav a {
  padding: .9rem 1.25rem;
  color: var(--ink);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-right: 1px solid var(--paper-dark);
}

.main-nav a::before { content: "✦"; margin-right: .45rem; color: var(--gold); }
.main-nav a:last-child { border-right: 0; }
.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a[aria-current="page"] { color: var(--paper-light); background: var(--night-soft); }

main { padding: 0 1.5rem 2rem; }

.archive-whisper {
    display: grid;
    grid-template-columns: 10rem 1fr;
    align-items: center;

    min-height: 2.5rem;
    padding: .55rem 1rem;

    background: var(--paper);
    border-bottom: 1px solid var(--paper-dark);
}

.archive-whisper-label {
  font-weight: bold;
  white-space: nowrap;
  color: var(--night);
}

#whisper-text {
  transition: opacity .4s ease;
  text-align: center;
  color: var(--night);
}

#whisper-text.is-changing {
  opacity: 0;
}

.hero {
  margin: 1.5rem 0 0;
  background: var(--paper);
  border: 3px solid var(--wood);
  box-shadow: var(--pixel-shadow);
}

.hero-image {
  position: relative;
  overflow: hidden;
  background: var(--night-deep);
  border-bottom: 3px solid var(--wood);
}

.hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero-image::after { content: ""; position: absolute; inset: 8px; border: 2px solid rgba(244,234,214,.72); pointer-events: none; }

.hero-intro {
  padding: clamp(1.8rem, 5vw, 3.2rem);
  color: var(--ink);
  text-align: center;
  background:
    radial-gradient(circle at 1px 1px, rgba(79,89,77,.08) 1px, transparent 1px),
    var(--paper);
  background-size: 14px 14px;
}

.eyebrow { margin: 0 0 .7rem; color: var(--wood); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; }
.hero h1 { max-width: 17ch; margin: 0 auto; color: var(--night-deep); font-size: clamp(2rem, 6vw, 3.8rem); line-height: 1.08; text-transform: uppercase; }
.hero-intro > p:not(.eyebrow) { max-width: 58ch; margin: 1rem auto 1.5rem; color: var(--muted); }
.ornament { margin: 1rem 0; color: var(--gold); letter-spacing: .35rem; }

.button {
  display: inline-block;
  padding: .75rem 1rem;
  color: var(--paper-light);
  background: var(--night-soft);
  border: 2px solid var(--night-deep);
  box-shadow: 3px 3px 0 var(--gold);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.button:hover, .button:focus-visible { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--gold); }

.quick-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 1.5rem 0 0;
  background: var(--paper);
  border: 3px solid var(--wood);
  box-shadow: var(--pixel-shadow);
}

.quick-card {
  display: grid;
  justify-items: center;
  gap: .35rem;
  padding: 1.3rem 1rem;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  border-right: 2px solid var(--paper-dark);
}
.quick-card:last-child { border-right: 0; }
.quick-card:hover, .quick-card:focus-visible { background: #e9dcc4; }
.quick-icon { color: var(--night); font-size: 1.8rem; }
.quick-card strong { text-transform: uppercase; letter-spacing: .08em; }
.quick-card small { color: var(--muted); }

.panel {
  margin-top: 2rem;
  padding: clamp(1.2rem, 4vw, 2rem);
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--wood);
  box-shadow: var(--pixel-shadow);
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.section-heading::before,
.section-heading::after {
    content: "✦";
    color: var(--gold);
    font-size: .8rem;
    opacity: .85;
}

.section-heading h2 {
    margin: 0;
    color: var(--night-deep);
    text-transform: uppercase;
    letter-spacing: .08em;
    text-align: center;
}

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.content-card { position: relative; padding: 1.4rem; background: var(--paper-light); border: 2px solid var(--line); box-shadow: 3px 3px 0 var(--paper-dark); }
.content-card::before { content: "✦"; position: absolute; top: .45rem; left: .55rem; color: var(--sage); font-size: .72rem; }
.card-icon { color: var(--night); font-size: 2rem; text-align: center; }
.content-card h3 { margin: .4rem 0 .7rem; color: var(--night-deep); text-align: center; text-transform: uppercase; }
.content-card p { color: var(--muted); }
.text-link { color: var(--wood); font-weight: bold; text-decoration: none; }
.text-link:hover { color: var(--night); }

.journal-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; }
.journal-entries { display: grid; gap: 1rem; }
.journal-entry { padding: 1.5rem; background: var(--paper-light); border: 2px solid var(--line); box-shadow: 3px 3px 0 var(--paper-dark); }
.journal-entry time { color: var(--wood); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.journal-entry h3 { margin: .45rem 0 .8rem; color: var(--night-deep); }
.journal-entry p { color: var(--muted); }

.content-layout { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.content-entries { display: grid; gap: 1rem; }
.content-entry { padding: 1.5rem; background: var(--paper-light); border: 2px solid var(--line); box-shadow: 3px 3px 0 var(--paper-dark); }
.content-entry time { color: var(--wood); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.content-entry h3 { margin: .45rem 0 .8rem; color: var(--night-deep); }
.content-entry p { color: var(--muted); }

.ritual-layout { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.ritual-entries { display: grid; gap: 1rem; }
.ritual-entry { padding: 1.5rem; background: var(--paper-light); border: 2px solid var(--line); box-shadow: 3px 3px 0 var(--paper-dark); }
.ritual-entry time { color: var(--wood); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.ritual-entry h3 { margin: .45rem 0 .8rem; color: var(--night-deep); }
.ritual-entry p { color: var(--muted); }

.ritual-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ritual-card { position: relative; padding: 1.4rem; background: var(--paper-light); border: 2px solid var(--line); box-shadow: 3px 3px 0 var(--paper-dark); }
.ritual-card::before { content: "✦"; position: absolute; top: .45rem; left: .55rem; color: var(--sage); font-size: .72rem; }
.ritual-card h3 { margin: .4rem 0 .7rem; color: var(--night-deep); text-align: center; text-transform: uppercase; }
.ritual-card p { color: var(--muted); }

.sidebar { display: grid; align-content: start; gap: 1rem; }
.sidebar-box { padding: 1.2rem; color: var(--paper); background: var(--night-soft); border: 2px solid var(--night-deep); box-shadow: 3px 3px 0 var(--gold); }
.sidebar-box h3 { margin-top: 0; color: var(--paper-light); text-transform: uppercase; }
.sidebar-box ul { padding-left: 1.2rem; }
.sidebar-box li::marker { color: var(--gold); }
.sidebar-box strong { color: var(--paper-dark); }

.info-box{
    float:right;
    width:240px;
    margin:0 0 1.5rem 2rem;
    padding: 1.2rem;
    color: var(--paper);
    background: var(--night-soft);
    border: 2px solid var(--night-deep);
    box-shadow: 3px 3px 0 var(--gold);
}

.info-box h3 { margin-top: 0; color: var(--paper-light); text-transform: uppercase; }
.info-box ul { padding-left: 1.2rem; }
.info-box li::marker { color: var(--gold); }
.info-box strong { color: var(--paper-dark); }

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.gallery-item { margin: 0; padding: .55rem; background: var(--paper-light); border: 2px solid var(--line); box-shadow: 3px 3px 0 var(--paper-dark); }
.pixel-art { display: grid; place-items: center; aspect-ratio: 1; font-size: clamp(3rem, 8vw, 5rem); border: 2px solid var(--line); }
.plant-art .pixel-art { color: var(--night); background: #d8d1b8; }
.moon-art .pixel-art { color: var(--paper); background: var(--night-soft); }
.book-art .pixel-art { color: var(--wood); background: #eee1c8; }
.tea-art .pixel-art { color: var(--night-deep); background: var(--sage-light); }
.gallery-item figcaption { padding: .75rem .25rem .2rem; color: var(--muted); text-align: center; }

.link-box { position: relative; padding: 1.5rem; background: var(--paper-light); border: 2px solid var(--line); }
.link-box::before { content: ""; position: absolute; inset: 7px; border: 1px dashed var(--paper-dark); pointer-events: none; }
.link-box > * { position: relative; }
.link-box a { color: var(--wood); font-weight: bold; }
.link-box li::marker { color: var(--gold); }

.site-footer { padding: 1.6rem; color: var(--paper-dark); text-align: center; border-top: 2px solid var(--gold); }
.site-footer div { color: var(--gold); letter-spacing: .5rem; }
.site-footer p { margin: .5rem 0 0; }
.site-footer a { color: var(--paper); }

.skip-link { position: absolute; top: -100px; left: 1rem; z-index: 99; padding: .7rem 1rem; color: var(--night-deep); background: var(--paper); }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.alert {
    margin: 1.5rem 0;
    padding: 1rem 1.2rem;
    border-left: 4px solid;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(2px);
}

.alert-title {
    font-weight: bold;
    display: block;
    margin-bottom: 0.5rem;
}

.alert p:last-child {
    margin-bottom: 0;
}

.alert-info {
    border-color: #77bdfb;
    background: rgba(119,189,251,.10);
}

.alert-success {
    border-color: #7fcf95;
    background: rgba(127,207,149,.10);
}

.alert-warning {
    border-color: #e7c26a;
    background: rgba(231,194,106,.10);
}

.alert-danger {
    border-color: #d98a8a;
    background: rgba(217,138,138,.10);
}

.alert-note {
    border-color: #bda7e5;
    background: rgba(189,167,229,.10);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 2rem;
}

.tag {
  display: inline-block;
  padding: .3rem .65rem;
  color: var(--night);
  background: rgba(244, 234, 214, .55);
  border: 1px solid var(--paper-dark);
  border-radius: 999px;
  font-size: .82rem;
  text-decoration: none;
}

.tag-results { position: relative; padding: 1.5rem; background: var(--paper-light); border: 2px solid var(--line); }
.tag-results::before { content: ""; position: absolute; inset: 7px; border: 1px dashed var(--paper-dark); pointer-events: none; }
.tag-results > * { position: relative; }
.tag-results a { color: var(--wood); font-weight: bold; }
.tag-results li::marker { color: var(--gold); }

.tag:hover,
.tag:focus-visible {
  background: var(--paper);
  border-color: var(--gold);
}

#tag-index a{
  display:block;
  margin:.35rem 0;
}

.tag-letter{
  margin-top:2rem;
  margin-bottom:.5rem;
  color:var(--gold);
  border-bottom:1px solid var(--paper-dark);
  padding-bottom:.2rem;
}

@media (max-width: 760px) {
  .site-shell { width: calc(100% - 1rem); margin: .5rem auto; }
  main { padding-inline: .75rem; }
  .card-grid, .gallery { grid-template-columns: repeat(2, 1fr); }
  .journal-layout { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .main-nav { display: grid; grid-template-columns: repeat(2, 1fr); }
  .main-nav a { border-right: 1px solid var(--paper-dark); border-bottom: 1px solid var(--paper-dark); text-align: center; }
  .quick-links, .card-grid, .gallery { grid-template-columns: 1fr; }
  .quick-card { border-right: 0; border-bottom: 2px solid var(--paper-dark); }
  .quick-card:last-child { border-bottom: 0; }
  .section-heading { gap: .5rem; }
  .section-heading > span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

@media (max-width:900px){

    .sidebar-box{
        float:none;
        width:100%;
        margin:1rem 0;
    }

}