/* Clara Lind – abgeleitet vom CL-Stempel-Logo: Stempel-Rot, Creme, Tinte, Clarendon-Schrift */
@font-face { font-family: "DM Serif Display"; src: url("fonts/DMSerifDisplay-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Oswald"; font-weight: 200 700; src: url("fonts/Oswald.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("fonts/AtkinsonHyperlegible-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Atkinson"; font-weight: 700; src: url("fonts/AtkinsonHyperlegible-Bold.ttf") format("truetype"); font-display: swap; }

:root {
  --rot: #b31a1a;
  --rot-dunkel: #861313;
  --creme: #f6ecd8;
  --papier: #fffaf0;
  --tinte: #1d1412;
  --grau: #5d5148;
  --linie: #e2d2b2;
  --serif: "DM Serif Display", Georgia, serif;
  --plakat: "Oswald", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Atkinson", Verdana, sans-serif; font-size: 1.15rem; line-height: 1.6; color: var(--tinte); background: var(--creme); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rot); }
a:focus-visible, .knopf:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* Stempelschrift: Buchstaben mit Druckspuren und schwarzem Versatz-Schatten */
.stempel, .stempel-hell { font-family: var(--serif); font-weight: 400; line-height: 1; color: transparent;
  -webkit-background-clip: text; background-clip: text; }
.stempel      { background-image: url("img/tex-rot.png");   background-color: var(--rot);   filter: drop-shadow(.05em .045em 0 var(--tinte)); }
.stempel-hell { background-image: url("img/tex-creme.png"); background-color: var(--creme); filter: drop-shadow(.06em .05em 0 var(--tinte)); }
.claim { font-family: var(--plakat); font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }

/* Kopfleiste (Variante 1) */
.kopf { background: var(--rot) url("img/tex-rot.png"); color: var(--creme); border-bottom: 4px solid var(--creme); box-shadow: 0 4px 0 var(--rot); position: relative; z-index: 3; }
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo img { width: 58px; height: 58px; filter: drop-shadow(0 0 0 var(--creme)); border-radius: 50%; box-shadow: 0 0 0 2px var(--creme); }
.logo span { font-size: 2.3rem; }
.kopf nav { display: flex; gap: 22px; flex-wrap: wrap; }
.kopf nav a { color: var(--creme); text-decoration: none; font-family: var(--plakat); font-weight: 500; font-size: 1.1rem; letter-spacing: .14em; text-transform: uppercase; border-bottom: 3px solid transparent; }
.kopf nav a:hover { border-bottom-color: var(--creme); }

/* Bühne mit Briefkopf (Variante 4) */
.buehne { position: relative; overflow: hidden; padding: 64px 0 72px; text-align: center;
  background: repeating-conic-gradient(from 0deg at 50% 120%, rgba(179,26,26,.06) 0deg 5deg, transparent 5deg 10deg), var(--papier);
  border-bottom: 3px double var(--rot); }
.briefkopf { display: flex; align-items: center; justify-content: center; gap: 32px; text-align: left; margin-bottom: 30px; }
.briefkopf img { width: 220px; height: 220px; flex: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); }
.briefkopf h1 { font-size: clamp(3.6rem, 10vw, 7.4rem); margin: 0; display: inline-block; padding-right: .08em; }
.briefkopf .claim { margin: 12px 0 0; padding-top: 12px; border-top: 2px solid var(--rot); font-size: clamp(.95rem, 2vw, 1.3rem); }
.buehne .lead { font-size: clamp(1.15rem, 2.6vw, 1.4rem); max-width: 720px; margin: 0 auto 28px; }
.buehne .aktion { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.knopf { display: inline-block; background: var(--rot); color: var(--creme); font-family: var(--plakat); font-weight: 500; font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: 10px 24px; border-radius: 6px; border: 3px solid var(--tinte); box-shadow: 4px 4px 0 var(--tinte); transition: transform .12s, box-shadow .12s; }
.knopf:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--tinte); }
.knopf.hell { background: var(--papier); color: var(--rot); }

/* Abschnitte */
section { padding: 64px 0; }
.titel { text-align: center; margin-bottom: 38px; }
.titel h2 { font-size: clamp(2.5rem, 6vw, 3.6rem); margin: 0; display: inline-block; padding-right: .08em; }
.titel p { margin: 8px 0 0; color: var(--grau); }
.titel .claim { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--tinte); font-size: .95rem; margin-top: 12px; }
.titel .claim::before, .titel .claim::after { content: ""; width: 60px; height: 2px; background: var(--rot); box-shadow: 0 5px 0 var(--rot); }

/* Räume */
.raeume { background: var(--papier); border-bottom: 3px double var(--rot); }
.tueren { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 28px; }
.tuer { display: block; text-decoration: none; color: var(--tinte); background: var(--creme); border: 3px solid var(--tinte); border-radius: 12px; overflow: hidden; box-shadow: 6px 6px 0 var(--rot); transition: transform .15s, box-shadow .15s; }
.tuer:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--rot); }
.tuer img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; border-bottom: 3px solid var(--tinte); }
.tuer div { padding: 14px 18px 18px; }
.tuer h3 { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.15; margin: 0 0 4px; color: var(--rot); }
.tuer p { margin: 0; color: var(--grau); font-size: 1.02rem; }
.tuer .los { display: inline-block; margin-top: 10px; font-family: var(--plakat); letter-spacing: .12em; text-transform: uppercase; color: var(--rot); font-size: 1rem; }

/* Bücher */
.buecher { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 32px; }
.buch { background: var(--papier); border: 3px solid var(--tinte); border-radius: 12px; box-shadow: 8px 8px 0 var(--rot); padding: 20px; display: flex; flex-direction: column; position: relative; }
.buch:nth-child(2) { box-shadow: 8px 8px 0 var(--tinte); }
.buch .cover { border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.25); transform: rotate(-1.5deg); margin: 4px 8px 22px; background: #fff; }
.buch:nth-child(2) .cover { transform: rotate(1.2deg); }
.buch h3 { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; line-height: 1.12; margin: 0 0 6px; color: var(--rot); }
.buch .unter { font-family: var(--plakat); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte); margin: 0 0 10px; font-size: 1rem; }
.buch ul { padding-left: 1.2em; margin: 0 0 18px; }
.buch li { margin-bottom: 4px; }
.buch li::marker { content: "★  "; color: var(--rot); font-size: .85em; }
.buch .aktion { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.stoerer { position: absolute; top: -20px; right: -14px; width: 96px; height: 96px; display: grid; place-items: center; text-align: center; z-index: 2; padding: 0 12px;
  background: var(--rot) url("img/tex-rot.png"); color: var(--creme); font-family: var(--plakat); font-weight: 600; text-transform: uppercase; font-size: 1rem; line-height: 1.05; letter-spacing: .05em; transform: rotate(12deg);
  border-radius: 50%; box-shadow: inset 0 0 0 4px var(--rot), inset 0 0 0 6px var(--creme), 3px 3px 0 var(--tinte); }
.stoerer.dunkel { background: var(--tinte); box-shadow: inset 0 0 0 4px var(--tinte), inset 0 0 0 6px var(--creme), 3px 3px 0 var(--rot); }

/* Über */
.ueber { background: var(--rot); color: var(--creme); border-top: 4px solid var(--creme); border-bottom: 4px solid var(--creme); box-shadow: 0 -4px 0 var(--rot), 0 4px 0 var(--rot); }
.ueber .titel p { color: var(--creme); }
.ueber .titel .claim { color: var(--creme); }
.ueber .titel .claim::before, .ueber .titel .claim::after { background: var(--creme); box-shadow: 0 5px 0 var(--creme); }
.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.karte { border: 2px solid var(--creme); outline: 2px solid var(--creme); outline-offset: -8px; border-radius: 10px; padding: 24px 24px 22px; }
.karte h3 { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.2; color: var(--creme); margin: 0 0 6px; }
.karte p { margin: 0; }

/* Online-Extras */
.extra { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; background: var(--papier); border: 3px solid var(--tinte); border-radius: 12px; padding: 28px; box-shadow: 8px 8px 0 var(--rot); }
.extra h3 { font-family: var(--serif); font-weight: 400; font-size: 2rem; color: var(--rot); margin: 0 0 6px; }
.extra p { margin: 0; }

/* Fuß */
.fuss { background: var(--tinte); color: var(--creme); padding: 30px 0; font-size: 1rem; }
.fuss .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.fuss a { color: var(--creme); }
.fuss .marke { display: flex; align-items: center; gap: 12px; }
.fuss .marke img { width: 48px; height: 48px; }
.fuss .marke b { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; }

/* Textseiten (Impressum, Datenschutz) */
.text { max-width: 760px; margin: 0 auto; background: var(--papier); border: 3px solid var(--tinte); border-radius: 12px; padding: 32px; box-shadow: 8px 8px 0 var(--rot); }
.text h1 { font-size: 2.8rem; margin: 0 0 16px; display: inline-block; padding-right: .08em; }
.text h2 { font-size: 1.2rem; margin: 26px 0 6px; }
.text p { margin: 0 0 10px; }

@media (max-width: 720px) {
  .kopf .wrap { justify-content: center; }
  .logo span { font-size: 1.9rem; }
  .logo img { width: 48px; height: 48px; }
  .kopf nav { gap: 14px; justify-content: center; }
  .kopf nav a { font-size: .95rem; }
  .buehne { padding: 40px 0 52px; }
  .briefkopf { flex-direction: column; text-align: center; gap: 18px; }
  .briefkopf img { width: 150px; height: 150px; }
  .extra { grid-template-columns: 1fr; }
  .stoerer { right: -4px; width: 84px; height: 84px; font-size: .9rem; }
  .text { padding: 22px; }
}