/* Miese Krise – Style */

:root {

  --color-bg: #E9E9EF;
  --color-text: #22222A;
  --color-accent: #FFE600;
  --color-accent-dark: #CFA500;

  --color-footer: #22222A;
  --color-footer-text: #E9E9EF;

  --focus-outline: 3px solid #FFE600;

  --border-strong: 3px solid #22222A;

  --content-width: 720px;
  --wide-content-width: 1000px;
}

/* Fonts */

@font-face {
  font-family: Outfit;
  src: url(../font/Outfit-Regular.woff2) format("woff2");
}

@font-face {
  font-family: Outfit;
  src: url(../font/Outfit-Bold.woff2) format("woff2");
  font-weight: bold;
}

@font-face {
  font-family: Outfit;
  src: url(../font/Outfit-Black.woff2) format("woff2");
  font-weight: 900;
}

/* Reset */

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body {
  font-family: Outfit, system-ui, Arial, Helvetica, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

.highlight {
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* Images */

img {
  max-width:100%;
  height:auto;
  display:block;
}

/* Logo */

.logo {
  margin:0;
  min-width:70%;
  max-width:90%;
  display:flex;
  justify-content:center;
}

/* Noise Background */

.noise-bg {
  position:relative;
}

.noise-bg::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0.5;
  background-image:url("../img/noise.svg");
  background-size:128px 128px;
  z-index:1;
}

.noise-bg > * {
  position:relative;
  z-index:2;
}

/* Links */

a {
  color:var(--color-text);
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
  text-decoration-thickness:3px;
  text-underline-offset:4px;
}

/* Accessibility focus */

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: var(--focus-outline);
  outline-offset:3px;
}

/* Hero */

.hero {
  background:var(--color-accent);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:30vh;
  padding:3rem 1.5rem;
}

.hero img {
  width:100%;
  max-width:720px;
}

/* Content container */

.content-container {
  max-width:var(--content-width);
  margin:0 auto;
}

.wide-content-container {
  max-width:var(--wide-content-width);
  margin:0 auto;
  padding:1.5rem;
}


/* Description */

.description {
  padding:4rem 1.5rem 3rem 1.5rem;
  max-width:var(--content-width);
  margin:0 auto;
}

.description p {
  font-size:clamp(1.1rem,2.5vw,1.35rem);
  line-height:1.6;
  font-weight:600;
  letter-spacing:-0.01em;
  margin-bottom:1.5rem;
}

/* Contact */

.contact {
  background:var(--color-footer);
  color:var(--color-accent);
  padding:3rem 1.5rem;
  text-align:center;
}

.contact h2 {
  font-size:clamp(1.5rem,4vw,2.5rem);
  font-weight:900;
  margin-bottom:2rem;
  letter-spacing:-0.02em;
}

.contact-links {
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  align-items:center;
}

.contact-link {
  color:var(--color-accent);
  font-size:clamp(1.2rem,3vw,1.8rem);
  font-weight:800;
  padding:0.75rem 1.5rem;
  border:3px solid var(--color-accent);
  display:inline-block;
  transition:background .1s,color .1s;
}

.contact-link:hover,
.contact-link:focus-visible {
  background:var(--color-accent);
  color:var(--color-text);
  text-decoration:none;
}

/* Obfuscated address */

.obfuscated-address {
  visibility:hidden;
  position:relative;
}

.obfuscated-address::before {
  content:'Andreas Berning';
  display:block;
  visibility:visible;
  position:relative;
}

/* Footer */

footer {
  background:var(--color-footer);
  color:var(--color-footer-text);
  padding:2rem 1.5rem;
  text-align:center;
  border-top:3px solid var(--color-accent);
  font-size:0.9rem;
}

footer .brand {
  font-weight:800;
  margin-bottom:0.25rem;
}

footer .domain {
  margin-bottom:1rem;
  opacity:0.7;
}

footer nav {
  display:flex;
  justify-content:center;
  gap:1.5rem;
}

footer a {
  color:var(--color-footer-text);
  font-weight:700;
}

/* Legal pages */

.legal {
  max-width:640px;
  margin:0 auto;
  padding:4rem 1.5rem;
  min-height:100vh;
}

.legal h1 {
  font-size:clamp(2rem,5vw,3rem);
  font-weight:900;
  margin-bottom:2rem;
  letter-spacing:-0.03em;
}

.legal h2 {
  font-weight:800;
  font-size:1.1rem;
  margin-bottom:0.5rem;
}

.legal section {
  margin-bottom:2rem;
}

.legal p {
  line-height:1.7;
  margin-bottom:.75rem;
}

.legal a {
  font-weight:800;
}

.legal ul {
  line-height:1.7rem;
  margin-bottom:1rem;
}

/* Back link */

.back-link {
  font-weight:800;
  font-size:1.1rem;
  padding:0.5rem 1rem;
  border:var(--border-strong);
  display:inline-block;
  margin-top:3rem;
}

/* FAQ */
.faq {
  max-width:var(--content-width);
  margin:0 auto;
  padding:4rem 1.5rem;
}

.faq details {
  margin:1rem 0;
  font-weight:800;
  padding:0.75rem 1.5rem;
  border:var(--border-strong);
  transition:background .1s,color .1s;
}

.faq details:hover {
  background:var(--color-accent);
}

.faq summary {
  cursor:pointer;
  font-weight:600;
}

.faq p {
  margin:.6rem 0;
  max-width:65ch;
  font-weight:400;
  line-height:1.6rem;
}

.faq a {
  word-break:break-word;
}

/* Motion accessibility */

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

/* Sticker Section */

.stickers-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 1rem 0;
}

/* Stickerkarte */

.sticker-card {
  background: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}

/* Desktop: 4 Spalten */

.sticker-card {
  flex: 1 1 calc(25% - 20px);
}

/* Tablet */

@media (max-width: 900px) {
  .sticker-card {
    flex: 1 1 calc(33.333% - 20px);
  }
}

/* Smartphone */

@media (max-width: 600px) {
  .sticker-card {
    flex: 1 1 calc(50% - 20px);
  }
}

.sticker-card img {
  width: 100%;
  height: auto;
  margin-bottom: 15px;
}