/* Outfit Glow – Redesign: nur Weiß, Schwarz, Gold.
   Schriften selbst gehostet (SIL Open Font License): Fraunces (Display), Outfit (Text).
   Gold #B08D2E nur für Linien und Flächen (Kontrast 3,1:1), Gold-Text #8A6A14 (5,1:1 auf Weiß). */
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-wght-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --white: #FFFFFF;
  --black: #0A0A0A;
  --gold: #B08D2E;
  --gold-text: #8A6A14;
  --paper: var(--white); --paper-2: var(--white); --pearl: var(--white);
  --ink: var(--black); --ink-2: var(--black); --line: var(--black);
  --night: var(--black); --night-2: var(--black); --gold-deep: var(--gold-text);
  --display: "Fraunces", Georgia, serif;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Outfit", "Segoe UI", Arial, sans-serif;
  --frame: min(82rem, calc(100% - 2 * clamp(.75rem, 4vw, 3rem)));
}

/* Graffiti-Feld hinter dem Seitenrand, Inhalt auf weißer Fläche mit 1px Linie */
body {
  background: var(--white) url("../img/graffiti.svg") repeat;
  background-size: 720px;
  color: var(--black);
  font-family: var(--sans);
}
main {
  display: block;
  width: var(--frame);
  margin: 1.5rem auto 0;
  background: var(--white);
  border: 1px solid var(--black);
}
h1, h2, h3, .brand { font-family: var(--display); font-variation-settings: "opsz" 144, "SOFT" 0; }
h1 { font-weight: 600; letter-spacing: -.02em; }
h2 { font-weight: 500; letter-spacing: -.01em; }
h3 { font-weight: 500; }
.deck, .look-notes p, .model p, .editor p { font-family: var(--sans); font-style: normal; }
a:hover { color: var(--black); text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }

/* Header: Graffiti-Fläche, Wortmarke, Linie bleibt beim Schrumpfen */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--white) url("../img/graffiti.svg") repeat;
  background-size: 520px;
  color: var(--black);
  border-bottom: 1px solid var(--black);
  transition: min-height .2s ease;
}
.site-header a, .site-header a:hover { color: var(--black); }
.header-inner {
  width: var(--frame); max-width: none; margin-inline: auto;
  background: var(--white); border: 1px solid var(--black); border-top: 0; border-bottom: 0;
  min-height: 5.5rem; padding-inline: clamp(1rem, 3vw, 2rem);
  transition: min-height .2s ease, padding .2s ease;
}
.is-scrolled .header-inner { min-height: 3.4rem; padding-block: .3rem; }
.brand { font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 700; letter-spacing: -.02em; transition: font-size .2s ease; }
.is-scrolled .brand { font-size: 1.35rem; }
.brand .glow { position: relative; display: inline-block; }
.brand .glow::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: 3px; background: var(--gold); }
.nav a { font-weight: 500; letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; }
.nav a[aria-current="page"] { color: var(--black); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .4em; }
.nav-toggle { color: var(--black); border: 1px solid var(--black); background: var(--white); }

/* Hero */
.hero { background: var(--white); color: var(--black); border-bottom: 1px solid var(--black); }
.hero h1 { color: var(--black); }
.hero-lede { color: var(--black); }
.hero-kicker, .byline, .jump-label { color: var(--gold-text); font-family: var(--sans); font-style: normal; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; }
.hero-plate { border: 1px solid var(--black); }
.hc { background: var(--white) !important; border: 1px solid var(--black); }

/* Buttons: weiß, schwarzer Text, Goldrahmen; Hover schwarz */
.btn, .btn--gold, .btn--ink, .btn--ghost {
  background: var(--white); color: var(--black);
  border: 1.5px solid var(--gold); border-radius: 0; margin-left: 0;
}
.btn:hover, .btn--gold:hover, .btn--ghost:hover { background: var(--black); color: var(--white); border-color: var(--black); }
.btn .star, .star { color: var(--gold-text); font-weight: 700; }
.btn:hover .star { color: var(--white); }

/* Kennzeichnung */
.ad-label { color: var(--black); border-color: var(--black); }
.disclosure { color: var(--black); border-left: 2px solid var(--gold); }

/* Karten und Flächen: weiß mit schwarzer Linie, kein Grau, kein Beige */
.teaser a { border: 1px solid var(--black); padding: .75rem; background: var(--white); }
.plate { background: var(--white); border: 1px solid var(--black); }
.plate-block, .plate-block--ill, .plate-block--json, .piece-ill, .mh-ill, .hc { background: var(--white) !important; border: 1px solid var(--black); }
.mh-ill { border-top: 1px solid var(--black) !important; }
.plate-letter { color: var(--black); }
.piece { border-bottom: 1px solid var(--black); }
.piece-list { border-top: 1px solid var(--black); }
.piece-letter { color: var(--black); }
.piece-color, .piece-price, .amz-title, .amz-price, .teaser-meta, .mh-note { color: var(--black); }
.mh-card { border: 1px solid var(--black); padding: 1rem; background: var(--white); }

/* Kategorien, Jahreszeiten, Anlässe */
.mh-cat a, .season a { background: var(--white) !important; color: var(--black) !important; border: 1px solid var(--black); }
.mh-cat a:hover, .season a:hover { outline: 2px solid var(--gold); outline-offset: 3px; color: var(--black) !important; }
.mh-cat-ills .ill { background: var(--white); border: 1px solid var(--black); }
.mh-band { background: var(--white); color: var(--black); border-block: 1px solid var(--black); }
.mh-band h2 { color: var(--black); }
.seasons-band { background: var(--white); border-block: 1px solid var(--black); }
.occasion { border-top: 1px solid var(--black); }
.occ-section { border-top: 1px solid var(--black); }
.section + .section { border-top: 1px solid var(--black); }
.chips a { border: 1px solid var(--black); background: var(--white); color: var(--black); }
.chips a[aria-current="page"], .chips a:hover { background: var(--black); color: var(--white); }
.monogram { color: var(--black); border-color: var(--gold); }

/* Footer: schwarz, weiß, Goldlinie */
.site-footer { background: var(--black); color: var(--white); border-top: 3px solid var(--gold); margin-top: 0; }
.site-footer a, .site-footer a:hover { color: var(--white); }
.site-footer a:hover { text-decoration-color: var(--gold); }
.footer-small { color: var(--white); }

/* Kuratorinnen-Seiten */
.curator-head .byline { margin-bottom: 1rem; }

@media (max-width: 40rem) {
  main { margin-top: .75rem; }
  .header-inner { min-height: 4.25rem; }
}

/* Vorschaubilder der Looks: schwarze Linie statt Gold */
.plate-grid, .plate-grid--thumb { border-color: var(--black) !important; outline-color: var(--black); }
.footer-small { opacity: 1; }
.mh-card { grid-template-columns: 96px minmax(0, 1fr); }
.mh-ill { width: 96px; height: 96px; }
.mh-text { min-width: 0; }
.mh-text .btn { padding: .6rem .9rem; }

/* ogm-wordmark */
.site-header .brand{font-size:0;line-height:0;display:inline-flex;flex-direction:column;align-items:flex-start;gap:.35rem;text-decoration:none}
.site-header .brand .glow{display:none}
.site-header .brand .brand-logo{content:url(/assets/img/og-wordmark.png);width:auto;height:64px;margin:0;vertical-align:middle;transition:height .2s ease}
.site-header .brand::after{content:"Das junge Magazin für Mode, Beauty und Must-haves";font-family:var(--sans,sans-serif);font-size:.66rem;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:#7a6a3a;font-weight:600;padding-left:.15rem}
.is-scrolled .site-header .brand .brand-logo{height:46px}
.is-scrolled .site-header .brand::after{font-size:.58rem}
@media(max-width:52rem){.site-header .brand .brand-logo{height:46px}.site-header .brand::after{font-size:.56rem;letter-spacing:.1em}}


/* ogm-glitter-2 */
body{background:#a9abb2!important}
#ogm-band{display:none!important}
.site-header .brand .brand-logo{height:88px!important}
.is-scrolled .site-header .brand .brand-logo{height:62px!important}
@media(max-width:52rem){.site-header .brand .brand-logo{height:60px!important}.is-scrolled .site-header .brand .brand-logo{height:46px!important}}
.partners-band{padding:clamp(2.5rem,5vw,4rem) 0;border-top:1.5px solid #0A0A0A;background:#fff}
.partners-band h2{margin:0 0 .6rem}
.pb-lead{max-width:44rem;margin:0 0 1.8rem;color:#444}
.pb-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
.pb-card{display:flex;flex-direction:column;height:100%;box-sizing:border-box;border:1.5px solid #0A0A0A;background:#fff;text-decoration:none!important;color:#0A0A0A;transition:transform .15s,box-shadow .15s}
.pb-card:hover,.pb-card:focus-visible{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #B08D2E}
.pb-logo{display:flex;align-items:center;justify-content:center;min-height:5.5rem;background:#fff;border-bottom:1.5px solid #0A0A0A;padding:1rem;text-align:center;font-size:1.7rem;line-height:1}
.pb-body{padding:1rem 1.1rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.pb-desc{font-size:.95rem;line-height:1.45}
.pb-cta{margin-top:auto;padding-top:.5rem;font-weight:700;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:#7a6a3a}
.pb-note{margin:1.4rem 0 0;font-size:.8rem;color:#555}
.pb-logo--tt{font-family:Arial,Helvetica,sans-serif;font-weight:800;letter-spacing:-.02em;color:#0A0A0A;text-transform:none}
.pb-logo--ts{font-family:var(--display,Georgia,serif);font-weight:400;letter-spacing:.32em;text-transform:uppercase;font-size:1.35rem}
.pb-logo--br{font-family:Arial,Helvetica,sans-serif;font-weight:900;letter-spacing:.18em;font-size:2rem}
.pb-logo--sv{font-family:var(--display,Georgia,serif);font-style:italic;font-weight:700;font-size:1.9rem}
.pb-logo--an{font-family:Arial,Helvetica,sans-serif;font-weight:800;letter-spacing:.12em;font-size:1.9rem;color:#0A0A0A}
.pb-logo--am{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:1.9rem;letter-spacing:-.01em}

/* ogm-glitter-3 */
body::before{content:""!important;position:fixed!important;inset:0!important;z-index:-1!important;pointer-events:none!important;background:#a9abb2 url("/assets/glitter-silver.jpg") center center/cover no-repeat!important}
.site-header{background:linear-gradient(180deg,#ffffff 0%,#eef0f5 100%)!important}

/* ogm-glitter-4 */
.pb-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:60rem){.pb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:34rem){.pb-grid{grid-template-columns:minmax(0,1fr)}}

/* ogm-h1 */
.prose h1,.wrap.prose h1{font-size:clamp(1.9rem,6.5vw,3rem);overflow-wrap:break-word;hyphens:auto}

/* ogm-header-fix: Logo beim Scrollen nur optisch verkleinern (transform),
   Header-Höhe bleibt gleich. Verhindert das Zittern und Neuberechnen der Seite. */
.site-header .brand .brand-logo{transition:transform .2s ease;transform-origin:left center}
.is-scrolled .site-header .brand .brand-logo{height:88px!important;transform:scale(.72)}
.is-scrolled .header-inner{min-height:88px;padding-block:12px}
.is-scrolled .site-header .brand::after{font-size:.66rem}
@media (max-width:52rem){
  .is-scrolled .site-header .brand .brand-logo{height:60px!important;transform:scale(.78)}
  .is-scrolled .site-header .brand::after{font-size:.56rem}
}