/* =====================================================================
   BRAUCHTUM MÜNCHEN — Design v4  (Abgleich mit der Live-Seite)
   Creme + tiefblauer Hero + Gold. Playfair Display / Spectral / Archivo.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Archivo:wght@400;500;600;700&display=swap');

:root{
  --paper:#f3ecdd;
  --paper-2:#ece2cd;
  --paper-3:#e6dabf;
  --ink:#26282f;
  --ink-soft:#5a5749;
  --navy:#1e2d4e;
  --navy-2:#1a2745;
  --navy-deep:#15203a;
  --gold:#b58a37;
  --gold-2:#c4a04c;
  --gold-soft:#bd9645;
  --mute:#a9b2c4;
  --hair:rgba(30,45,78,.16);
  --hair-soft:rgba(30,45,78,.09);

  --display:'Playfair Display',Georgia,serif;
  --serif:'Spectral',Georgia,'Times New Roman',serif;
  --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --t-xs:13px; --t-sm:15.5px; --t-base:19px; --t-md:22px;
  --t-lg:28px; --t-xl:40px; --t-2xl:54px; --t-3xl:72px; --t-4xl:108px;
  --measure:64ch; --max:1280px; --pad:clamp(22px,5vw,72px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--serif);font-size:var(--t-base);line-height:1.7;color:var(--ink);
  background-color:var(--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='0.8' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"liga" 1,"kern" 1,"onum" 1;
}
img,svg{display:block;max-width:100%}
a{color:var(--navy);text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.measure{max-width:var(--measure)}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:16px;background:#fff;color:var(--ink);padding:10px 14px;z-index:300;border:1px solid var(--ink)}

/* labels */
.eyebrow{font-family:var(--sans);font-weight:600;font-size:var(--t-xs);letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);display:inline-block}

/* ---------- Masthead ---------- */
.masthead{background:var(--paper);position:sticky;top:0;z-index:100}
.masthead .container{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-top:24px;padding-bottom:24px}
.wordmark{display:block;line-height:1;text-decoration:none}
.wordmark b{display:block;font-family:var(--display);font-weight:700;font-size:30px;color:var(--navy);letter-spacing:.005em}
.wordmark span{display:block;font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);margin-top:7px}
.nav{display:flex;gap:34px;align-items:center}
.nav a{font-family:var(--sans);font-weight:500;font-size:14.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--navy-2);position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--gold);transition:right .3s ease}
.nav a:hover{color:var(--gold)}
.nav a[aria-current="page"]{color:var(--navy)}
.nav a[aria-current="page"]::after,.nav a:hover::after{right:0}
.menu-toggle{display:none}
@media(max-width:980px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--paper);
    border-top:1px solid var(--hair);box-shadow:0 18px 30px rgba(21,32,58,.12);padding:6px 0}
  .nav a{padding:14px var(--pad);width:100%;font-size:15px}
  .menu-toggle{display:inline-flex;align-items:center;font-family:var(--sans);font-weight:600;font-size:13px;
    letter-spacing:.12em;text-transform:uppercase;background:none;border:1.5px solid var(--gold);color:var(--navy);
    border-radius:2px;padding:9px 16px;cursor:pointer}
}

/* ---------- Breadcrumb (auf Navy, direkt unter Masthead sitzt der Hero) ---------- */
.crumbs{background:var(--navy);color:var(--mute);font-family:var(--sans);font-size:12px;letter-spacing:.08em}
.crumbs .container{padding-top:16px;padding-bottom:0}
.crumbs a{color:var(--mute)}.crumbs a:hover{color:var(--gold-2)}
.crumbs span[aria-current]{color:#eee}

/* ---------- Hero (vollflaechig tiefblau) ---------- */
.hero{background:var(--navy);color:var(--paper);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 132px);
  background-position:center}
.hero .container{position:relative;z-index:1;
  padding-top:clamp(70px,11vw,150px);padding-bottom:clamp(64px,9vw,128px);max-width:62rem}
.hero--home .container{padding-top:clamp(84px,13vw,176px);padding-bottom:clamp(80px,11vw,150px)}
.hero .eyebrow{color:var(--gold)}
.hero h1{font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:-.012em;
  font-size:clamp(46px,8vw,var(--t-4xl));color:var(--paper);margin-top:26px;max-width:15ch}
.hero h1 em{font-style:italic;font-weight:600;color:var(--gold-2)}
.hero .dek{font-family:var(--serif);font-weight:300;font-size:clamp(19px,2.1vw,25px);line-height:1.62;
  color:var(--mute);max-width:40ch;margin-top:30px}
.hero__cta{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap}
.hero__meta{display:flex;flex-wrap:wrap;gap:0;margin-top:42px;border-top:1px solid rgba(255,255,255,.16);padding-top:4px}
.hero__meta .m{padding:18px 34px 4px 0;margin-right:34px;border-right:1px solid rgba(255,255,255,.16)}
.hero__meta .m:last-child{border-right:0;margin-right:0}
.hero__meta .k{display:block;font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-2);margin-bottom:8px}
.hero__meta .v{font-family:var(--display);font-weight:600;font-size:20px;color:var(--paper)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:11px;font-family:var(--sans);font-weight:600;font-size:14px;
  letter-spacing:.16em;text-transform:uppercase;padding:17px 34px;border:1.5px solid var(--gold);color:var(--paper);
  background:transparent;transition:.24s;cursor:pointer}
.btn:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.btn--gold{background:var(--gold);color:var(--navy)}
.btn--gold:hover{background:var(--gold-2);border-color:var(--gold-2)}
.btn .arr{font-size:16px;line-height:0}
/* dunkle Buttons auf hellem Grund */
.band .btn,.prose .btn{color:var(--navy)}
.band .btn:hover,.prose .btn:hover{color:var(--paper)}

/* ---------- Baender ---------- */
section.band{padding:clamp(56px,8vw,100px) 0;position:relative}
section.band+section.band{border-top:1px solid var(--hair-soft)}
.band--paper2{background:var(--paper-2)}
.band--navy{background:var(--navy);color:var(--paper)}
.band--navy h2{color:#fff}.band--navy .eyebrow{color:var(--gold-2)}

.section-head{margin-bottom:36px;max-width:var(--measure)}
.section-head .num{font-family:var(--display);font-style:italic;font-weight:500;color:var(--gold);
  font-size:var(--t-xl);display:block;line-height:1;margin-bottom:10px}
h1,h2,h3,h4{font-family:var(--display);color:var(--navy);letter-spacing:-.01em}
h2{font-weight:700;font-size:clamp(32px,4.4vw,var(--t-2xl));line-height:1.08}
h3{font-weight:600;font-size:var(--t-lg);line-height:1.16;margin:34px 0 8px}

/* ---------- Prose ---------- */
.prose{max-width:var(--measure);margin:0 auto}
.prose p{margin-bottom:21px}
.prose .lead{font-size:var(--t-md);color:var(--ink-soft);font-weight:400;line-height:1.55}
.prose .lead.dropcap::first-letter,.prose>.dropcap::first-letter,.prose.dropcap>.lead::first-letter{
  font-family:var(--display);font-weight:700;float:left;font-size:4.6em;line-height:.78;
  margin:8px 16px 0 0;color:var(--navy)}
.prose a{border-bottom:1px solid var(--gold);transition:.2s}
.prose a:hover{color:var(--gold);border-color:transparent}

blockquote{font-family:var(--display);font-style:italic;font-weight:500;
  font-size:clamp(25px,3.3vw,36px);line-height:1.28;color:var(--navy);
  padding:6px 0 6px 32px;margin:40px 0;max-width:24ch;border-left:3px solid var(--gold)}
.band--navy blockquote{color:#fff;border-color:var(--gold-2)}

.rule-lozenge{display:flex;align-items:center;gap:14px;margin:42px 0;color:var(--gold)}
.rule-lozenge::before,.rule-lozenge::after{content:"";height:1px;flex:1;background:var(--hair)}
.rule-lozenge i{width:9px;height:9px;background:var(--gold);transform:rotate(45deg)}

/* ---------- Factbox / Einordnung ---------- */
.factbox{background:var(--paper-2);border-left:3px solid var(--navy);padding:22px 28px;margin:32px 0}
.factbox .t{font-family:var(--display);font-weight:600;color:var(--navy);font-size:var(--t-md);margin-bottom:7px}
.factbox.is-myth{border-left-color:var(--gold)}
.factbox.is-myth .t{color:var(--gold)}

/* ---------- Katalog ---------- */
.catalog{border-top:1px solid var(--hair)}
.entry{display:grid;grid-template-columns:auto 1fr auto;gap:8px 30px;align-items:start;
  padding:28px 2px;border-bottom:1px solid var(--hair);transition:.24s}
.entry:hover{padding-left:14px}
.entry .kick{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);grid-column:1;white-space:nowrap;line-height:1.2;padding-top:7px}
.entry .body{grid-column:2}
.entry h3{font-family:var(--display);font-weight:700;font-size:var(--t-lg);margin:0 0 6px;line-height:1.06}
.entry h3 a{color:var(--navy);border:0}
.entry:hover h3 a{color:var(--gold)}
.entry .body p{font-size:var(--t-sm);color:var(--ink-soft);margin:0;max-width:64ch;line-height:1.56}
.entry .when{grid-column:3;font-family:var(--display);font-style:italic;font-size:18px;color:var(--ink-soft);
  text-align:right;white-space:nowrap;line-height:1.2;padding-top:6px}
@media(max-width:680px){
  .entry{grid-template-columns:1fr;gap:4px}
  .entry .kick,.entry .body,.entry .when{grid-column:1}
  .entry .kick{padding-top:0}
  .entry .when{text-align:left;padding-top:2px}
}
@media(max-width:600px){
  .hero__meta{flex-direction:column;align-items:flex-start;gap:0}
  .hero__meta .m{border-right:0;margin-right:0;padding:14px 0 0;width:100%}
  .hero__meta .m:first-child{padding-top:10px}
}

/* ---------- Karten ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
.card{position:relative;background:var(--paper-2);border:1px solid var(--hair);padding:32px 30px 34px;
  transition:.24s;display:flex;flex-direction:column}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .3s}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(21,32,58,.13)}
.card:hover::before{transform:scaleX(1)}
.card .cemblem{display:none}
.card .kick{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.card h3{font-family:var(--display);font-weight:700;font-size:var(--t-lg);margin:11px 0 9px;line-height:1.1}
.card h3 a{color:var(--navy);border:0}
.card:hover h3 a{color:var(--gold)}
.card p{font-size:var(--t-sm);color:var(--ink-soft);margin:0 0 18px;line-height:1.56}
.card .more{margin-top:auto;font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy)}
.card:hover .more{color:var(--gold)}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;font-family:var(--display);font-weight:600;font-size:var(--t-md);
  color:var(--navy);padding:20px 44px 20px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:25px;width:12px;height:12px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform .22s}
.faq details[open] summary::after{transform:rotate(-135deg);top:29px}
.faq .ans{padding:0 0 20px;color:var(--ink-soft);max-width:var(--measure);line-height:1.62}

/* ---------- Quellen ---------- */
.sources{background:var(--paper-2);border:1px solid var(--hair);padding:26px 30px;margin-top:36px;
  font-size:var(--t-sm);color:var(--ink-soft)}
.sources h2{font-size:var(--t-md);margin-bottom:12px;color:var(--navy)}
.sources ol{margin-left:18px}.sources li{margin-bottom:7px}
.sources a{color:var(--navy);border-bottom:1px solid var(--gold)}
.stand{font-style:italic;font-size:var(--t-sm);color:var(--ink-soft);margin-top:24px}

.related-head{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:22px;display:flex;align-items:center;gap:14px}
.related-head::after{content:"";height:1px;flex:1;background:var(--hair)}

/* ---------- Formular ---------- */
.field{display:block}
.field span{display:block;font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--navy);margin-bottom:8px}
.field input,.field textarea{width:100%;padding:14px 16px;border:1px solid var(--hair);
  font-family:var(--serif);font-size:16px;background:var(--paper);color:var(--ink)}
.field input:focus,.field textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-deep);color:#bcc4d4}
.site-footer .container{padding-top:60px;padding-bottom:36px}
.site-footer .cols{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:42px}
@media(max-width:760px){.site-footer .cols{grid-template-columns:1fr;gap:30px}}
.site-footer .brand b{font-family:var(--display);font-weight:700;font-size:26px;color:#fff;display:block;margin-bottom:12px}
.site-footer .brand p{font-size:14.5px;line-height:1.66;color:#97a0b5;max-width:42ch}
.site-footer h4{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-2);margin-bottom:16px}
.site-footer ul{list-style:none}.site-footer li{margin-bottom:11px}
.site-footer a{color:#bcc4d4;font-size:15px}.site-footer a:hover{color:var(--gold-2)}
.site-footer .legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  border-top:1px solid rgba(255,255,255,.13);margin-top:42px;padding-top:20px;font-size:13px;color:#7b8499}
.site-footer .legal a{color:#7b8499;font-size:13px}

/* ---------- Motion (dezent, nur Hero-Auftritt) ---------- */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.rise{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.rise-2{animation:rise .8s .1s cubic-bezier(.2,.7,.2,1) both}
.rise-3{animation:rise .8s .2s cubic-bezier(.2,.7,.2,1) both}
.rise-4{animation:rise .8s .3s cubic-bezier(.2,.7,.2,1) both}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}