/* 165 – Kartei: ein Karteikasten. Linierte Karteikarten mit Zelluloid-Reitern,
   Schreibmaschinenschrift, Blechkasten. Cutive Mono + Archivo. */
:root {
  --ink: #24221e;
  --ink-2: #3e3b35;
  --red: #b3352b;
  --blue: #2b4c97;
  --paper: #fcfaf3;
  --rule: #a9c1dc;
  --l: 30px;           /* Zeilenabstand der Lineatur */
  --head: 64px;        /* Kopfzone bis zur roten Doppellinie */
  --metal: #74806a;
  --metal-d: #4e5847;
  --mono: 'Cutive Mono', 'Courier New', Courier, monospace;
  --sans: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --pad: clamp(16px, 3.5vw, 40px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; color: var(--ink); font: 400 1.0625rem/var(--l) var(--mono);
  background-color: #d9d4c5;
  background-image:
    radial-gradient(rgba(255, 255, 255, .35) 1px, transparent 1.5px),
    radial-gradient(rgba(80, 70, 50, .12) 1px, transparent 1.5px);
  background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 5px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: #fff; padding: 10px 14px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---------- Kopf ---------- */
.top__in { max-width: 1300px; margin: 0 auto; padding: 16px var(--pad) 8px; display: flex; align-items: center; gap: 24px; }
.logo { background: var(--paper); padding: 6px 10px; box-shadow: 0 1px 0 rgba(0, 0, 0, .1), 0 4px 8px -3px rgba(40, 35, 20, .35); transform: rotate(-1.2deg); }
.logo img { width: 66px; }
.top__line { font-size: .9rem; color: var(--ink-2); letter-spacing: .02em; }
.top__end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.label {
  display: inline-block; text-decoration: none; padding: 4px 12px; font: 400 .98rem/1.6 var(--mono); background: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(60, 50, 30, .15), 0 3px 6px -3px rgba(40, 35, 20, .45);
}
.label:hover { background: #fff; }
.label--lang { font-family: var(--sans); font-weight: 700; font-size: .85rem; letter-spacing: .08em; }
.menu { display: none; }

/* ---------- Kasten ---------- */
.drawer { max-width: 1260px; margin: 0 auto; padding: 18px var(--pad) 0; position: relative; }

/* Reiter (Navigation) */
.tabs ul { display: flex; gap: 6px; padding: 0 20px; position: relative; z-index: 3; }
.tabs li { flex: 1; min-width: 0; }
.tabs a {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; text-decoration: none; white-space: nowrap; overflow: hidden;
  font: 400 .9rem/1 var(--mono); color: var(--ink);
  background: linear-gradient(#fffdf6, #f3efe2);
  border: 5px solid var(--c); border-bottom: 0; border-radius: 7px 7px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 -1px 0 rgba(0, 0, 0, .08);
  transform: translateY(12px); transition: transform .25s ease, filter .25s ease;
  filter: saturate(.85) brightness(.96);
  position: relative;
}
.tabs a::after { /* Zelluloid-Glanz */
  content: ''; position: absolute; inset: -5px -5px auto; height: 5px; border-radius: 7px 7px 0 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55) 30%, transparent 60%);
}
.tabs b { font: 800 1rem/1 var(--sans); font-stretch: 80%; color: var(--ink); }
.tabs a:hover { transform: translateY(6px); filter: none; }
.tabs a[aria-current="true"] { transform: translateY(0); filter: none; background: var(--paper); }

.stack { position: relative; padding: 0 20px; background: linear-gradient(90deg, var(--metal-d), var(--metal) 14px, var(--metal) calc(100% - 14px), var(--metal-d)); border-radius: 4px 4px 0 0; }
.stack::before { /* Kante des Kastens */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(#9aa58f, var(--metal)); border-radius: 4px 4px 0 0;
}

/* Karte */
.card {
  position: relative; background-color: var(--paper);
  background-image:
    linear-gradient(var(--red), var(--red)), linear-gradient(var(--red), var(--red)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--l) - 1px), var(--rule) calc(var(--l) - 1px) var(--l));
  background-size: 100% 1.5px, 100% 1px, 100% calc(100% - var(--head) - 70px);
  background-position: 0 calc(var(--head) - 5px), 0 calc(var(--head) - 1px), 0 var(--head);
  background-repeat: no-repeat;
  padding: calc(var(--head) + 6px) clamp(28px, 5vw, 72px) 90px;
  border-radius: 3px 3px 6px 6px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 0 0 1px rgba(80, 70, 50, .12), 0 18px 30px -12px rgba(30, 28, 20, .45);
}
.card::after { /* Papierkörnung */
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: .35; mix-blend-mode: multiply;
  background: radial-gradient(rgba(120, 100, 60, .18) .6px, transparent 1px) 0 0 / 5px 5px;
}
.card__head { position: absolute; left: clamp(28px, 5vw, 72px); right: clamp(28px, 5vw, 72px); top: 22px; display: flex; justify-content: space-between; font-size: .92rem; color: var(--ink-2); line-height: 1; }
.card__tab { display: none; }
.hole { position: absolute; left: 50%; bottom: 26px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #3b4236, #5a6552); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .8); }
.hole::before { content: ''; position: absolute; left: 50%; top: 100%; width: 8px; height: 27px; margin-left: -4px; background: linear-gradient(#5a6552, #3b4236); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }

/* Text auf der Lineatur */
.red { color: var(--red); }
.card > .red, .hero__text > .red, .about .red { margin-top: var(--l); }
h1, h2 { font-family: var(--sans); font-weight: 760; font-stretch: 78%; letter-spacing: -.01em; color: var(--ink); }
h1 { font-size: clamp(2.5rem, 4.7vw, 4.15rem); line-height: calc(var(--l) * 2); margin: var(--l) 0 var(--l); text-transform: none; }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: calc(var(--l) * 2); margin: var(--l) 0 var(--l); }
h3 { font: 700 1rem/var(--l) var(--sans); font-stretch: 100%; letter-spacing: .06em; text-transform: uppercase; }
.typed { max-width: 40em; }
.typed--intro { margin-bottom: var(--l); }
.typed, .entries p, .steps p, .fields dd { text-shadow: 0 0 .5px rgba(36, 34, 30, .55); }

.ctas { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: var(--l); }
.key {
  display: inline-flex; align-items: center; height: 46px; padding: 0 20px; text-decoration: none; font: 700 .92rem/1 var(--sans); letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink); background: linear-gradient(#fff, #ece7d8); border-radius: 23px; box-shadow: inset 0 0 0 2px var(--ink), 0 3px 0 var(--ink); transition: transform .12s ease, box-shadow .12s ease;
}
.key:hover { transform: translateY(1px); box-shadow: inset 0 0 0 2px var(--ink), 0 2px 0 var(--ink); }
.key:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 var(--ink); }
.key--main { background: linear-gradient(#c94236, var(--red)); color: #fff; box-shadow: inset 0 0 0 2px #6b1912, 0 3px 0 #6b1912; }
.key--main:hover { box-shadow: inset 0 0 0 2px #6b1912, 0 2px 0 #6b1912; }
.key--main::after { content: ''; width: 18px; height: 10px; margin-left: 10px; background: currentColor; clip-path: polygon(0 40%, 65% 40%, 65% 0, 100% 50%, 65% 100%, 65% 60%, 0 60%); }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 60px); }
.hero__side { position: relative; padding-top: calc(var(--l) * 1.5); }
.clipped { position: relative; background: #fff; padding: 10px 10px 34px; box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 12px 18px -8px rgba(40, 35, 20, .45); }
.clipped--hero { transform: rotate(2deg); }
.clipped img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.9) contrast(1.02); }
.clip { position: absolute; top: -26px; left: 22%; width: 22px; height: 62px; filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .3)); }
.stamp {
  position: absolute; right: 10px; bottom: -64px; transform: rotate(-7deg); display: grid; gap: 2px; padding: 8px 14px; text-align: center;
  color: var(--blue); font: 700 .86rem/1.25 var(--sans); font-stretch: 85%; letter-spacing: .08em; text-transform: uppercase;
  border: 3px double var(--blue); border-radius: 4px; background: rgba(252, 250, 243, .55); opacity: .88; mix-blend-mode: multiply;
  -webkit-mask: radial-gradient(circle at 30% 40%, #000 60%, rgba(0, 0, 0, .65) 61%) 0 0 / 5px 5px;
          mask: radial-gradient(circle at 30% 40%, #000 60%, rgba(0, 0, 0, .65) 61%) 0 0 / 5px 5px;
}

/* Einträge */
.entries { display: grid; grid-template-columns: 1fr 1fr; gap: var(--l) clamp(28px, 4vw, 60px); }
.entries li { position: relative; padding-left: 64px; }
.sig { position: absolute; left: 0; top: 0; color: var(--red); white-space: nowrap; }
.entries p { color: var(--ink-2); hyphens: auto; }
.see { margin-top: var(--l); text-align: right; color: var(--red); }

/* Route */
.route { max-width: 52em; }
.legs { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-bottom: var(--l); }
.legs li { display: flex; align-items: center; }
.legs li + li::before { content: ""; width: clamp(18px, 3.4vw, 54px); height: 0; border-top: 2px dashed var(--ink-2); margin: 0 10px; }
.legs b { font: 760 clamp(1.6rem, 3vw, 2.4rem)/calc(var(--l) * 2) var(--sans); font-stretch: 80%; letter-spacing: .04em; padding: 0 10px; border: 2px solid var(--ink); border-radius: 50%; line-height: 1.6; }
.route .red { margin-top: 0; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 30px; margin-top: calc(var(--l) * 2); border-top: 2px solid var(--ink); }
.stats div { padding-top: calc(var(--l) - 2px); }
.stats dt { font: 760 2.4rem/calc(var(--l) * 2) var(--sans); font-stretch: 78%; color: var(--red); }
.stats dd { color: var(--ink-2); }

/* Ablauf */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--l) 30px; }
.steps li { position: relative; padding-top: var(--l); }
.steps .sig { top: 0; }
.steps p { color: var(--ink-2); hyphens: auto; }

/* Über uns */
.about { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 70px); }
.clipped--about { transform: rotate(-2.2deg); align-self: start; margin-top: calc(var(--l) * 2); }
.clipped--about img { aspect-ratio: 1; }
.checks { margin-top: var(--l); display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
.checks li { position: relative; padding-left: 40px; }
.checks li::before { content: '[x]'; position: absolute; left: 0; color: var(--red); }

/* Kontakt */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.fields div { display: grid; grid-template-columns: 9.5em 1fr; gap: 0 12px; padding-bottom: var(--l); }
.fields dt { color: var(--red); }
.fields dt::after { content: ':'; }
.fields a { text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* Kastenfront */
.front {
  position: relative; display: block; height: 150px; margin-top: -2px; border-radius: 0 0 8px 8px;
  background:
    linear-gradient(rgba(255, 255, 255, .22), transparent 8px),
    linear-gradient(90deg, rgba(0, 0, 0, .18), transparent 6%, transparent 94%, rgba(0, 0, 0, .18)),
    var(--metal);
  box-shadow: inset 0 2px 0 #9aa58f, inset 0 -3px 0 rgba(0, 0, 0, .25), 0 24px 30px -14px rgba(30, 28, 20, .55);
}
.front__holder {
  position: absolute; left: 50%; top: 26px; width: 210px; height: 58px; margin-left: -105px; border-radius: 4px; padding: 7px;
  background: linear-gradient(160deg, #f0dca2, #b99550 45%, #e4c983 70%, #a9853f);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .4);
}
.front__holder span { display: grid; place-items: center; height: 100%; background: var(--paper); font: 400 1.15rem/1 var(--mono); letter-spacing: .3em; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .25); }
.front__nut { position: absolute; left: 50%; top: 98px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: repeating-conic-gradient(#d9dcd8 0 8deg, #8e938d 8deg 16deg); box-shadow: 0 0 0 3px #59604f, 0 2px 3px rgba(0, 0, 0, .5); }
.front__pull { position: absolute; left: 50%; top: 92px; width: 120px; height: 32px; margin-left: 30px; border: 5px solid #c9ced0; border-top: 0; border-radius: 0 0 60px 60px; box-shadow: 0 3px 3px rgba(0, 0, 0, .35); }

/* ---------- Fuß ---------- */
.foot__in { max-width: 1260px; margin: 0 auto; padding: 60px var(--pad) 90px; display: grid; grid-template-columns: auto 1fr; gap: 6px 26px; align-items: center; font-size: .95rem; }
.foot__logo { grid-row: span 3; background: var(--paper); padding: 6px 10px; transform: rotate(1.5deg); box-shadow: 0 4px 8px -3px rgba(40, 35, 20, .45); }
.foot__logo img { width: 60px; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.foot__nav a { text-underline-offset: 4px; }
.foot__copy { color: var(--ink-2); }

/* ---------- Kastenmodus (nur mit JS, breite Fenster) ---------- */
.drawer-mode .card { display: none; }
.drawer-mode .card.is-front { display: block; }
.drawer-mode .card.lift { animation: lift .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes lift { from { transform: translateY(46px) rotate(.6deg); opacity: .2; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .drawer-mode .card.lift { animation: none; } }

/* ---------- Listenmodus: ohne JS / schmale Fenster ---------- */
html:not(.drawer-mode) .tabs a { transform: none; filter: none; }
html:not(.drawer-mode) .stack { background: none; padding: 0; }
html:not(.drawer-mode) .stack::before { display: none; }
html:not(.drawer-mode) .card { margin-top: 64px; }
html:not(.drawer-mode) .card__tab {
  display: flex; align-items: center; gap: 8px; position: absolute; top: -44px; height: 44px; padding: 0 14px;
  left: calc(20px + var(--i) * (100% - 220px) / 6); width: 180px;
  background: linear-gradient(#fffdf6, #f3efe2); border: 5px solid var(--c); border-bottom: 0; border-radius: 7px 7px 0 0; font-size: .95rem; white-space: nowrap; overflow: hidden;
}
html:not(.drawer-mode) .card__tab b { font: 800 1rem/1 var(--sans); font-stretch: 80%; }
html:not(.drawer-mode) .front { display: none; }

/* ---------- Rechtsseiten ---------- */
.legal .card { display: block; }
.legal .back { display: inline-block; margin-top: var(--l); color: var(--blue); }
.legal-body { max-width: 68ch; }
.legal-body h2 { font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: var(--l); margin: var(--l) 0 0; font-stretch: 90%; }
.legal-body p, .legal-body ul { margin: 0 0 var(--l); }
.legal-body li { position: relative; padding-left: 2ch; }
.legal-body li::before { content: '-'; position: absolute; left: 0; color: var(--red); }
.legal-body a { color: var(--blue); text-underline-offset: 4px; }
.legal-body .legal-note { color: var(--red); }
.legal-body .legal-address { padding-left: 2ch; border-left: 2px solid var(--red); }
.legal h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); hyphens: auto; }

/* ---------- Breakpoints ---------- */
@media (max-width: 1180px) {
  .top__line { display: none; }
  .tabs a { font: 500 .84rem/1 var(--sans); font-stretch: 82%; padding: 0 8px; gap: 6px; }
  .tabs ul { padding: 0 12px; gap: 4px; }
  .entries, .fields { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .fields div { grid-template-columns: 11em 1fr; }
}
@media (max-width: 899px) {
  .tabs a { font: 400 1rem/1 var(--mono); }
  .menu {
    display: inline-flex; align-items: center; gap: 10px; font: 700 .82rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
    padding: 0 16px; height: 42px; border: 0; border-radius: 21px; background: var(--ink); color: var(--paper); cursor: pointer;
  }
  .menu__ico { display: grid; gap: 4px; width: 16px; }
  .menu__ico i { display: block; height: 2px; background: currentColor; transition: transform .25s, opacity .2s; }
  .open .menu__ico i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .open .menu__ico i:nth-child(2) { opacity: 0; }
  .open .menu__ico i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .label--tel { display: none; }
  .js .tabs { display: none; position: absolute; left: var(--pad); right: var(--pad); top: 0; z-index: 30; }
  .js.menu-open .tabs { display: block; }
  .tabs ul { flex-direction: column; gap: 0; padding: 10px; background: var(--paper); box-shadow: 0 18px 30px -10px rgba(30, 28, 20, .5); }
  .tabs a { border: 0; border-left: 8px solid var(--c); border-radius: 0; height: 50px; font-size: 1rem; margin-bottom: 4px; background: #fff; }
  .hero, .about { grid-template-columns: 1fr; }
  .hero__side { max-width: 420px; padding-bottom: 40px; }
  .steps { grid-template-columns: 1fr 1fr; }
  html:not(.drawer-mode) .card__tab { left: calc(var(--i) * (100% - 170px) / 6); width: 170px; }
}
@media (max-width: 560px) {
  :root { --pad: 12px; --head: 56px; }
  body { font-size: 1rem; }
  .card { padding: calc(var(--head) + 6px) 18px 80px; }
  .card__head { left: 18px; right: 18px; top: 18px; font-size: .82rem; }
  .card__head span:last-child { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  h1 { font-size: 2.35rem; line-height: 45px; margin: 15px 0 var(--l); }
  h2 { font-size: 1.9rem; line-height: 45px; margin: 15px 0 var(--l); }
  .entries li { padding-left: 0; padding-top: var(--l); }
  .steps, .checks, .stats { grid-template-columns: 1fr; }
  .stats div { padding-top: 0; }
  .fields div { grid-template-columns: 1fr; }
  .legs b { font-size: 1.15rem; padding: 0 6px; }
  .legs li + li::before { width: 12px; margin: 0 4px; }
  .key { width: 100%; justify-content: center; }
  .stamp { position: relative; right: auto; bottom: auto; margin: 34px 0 0 auto; width: max-content; max-width: 100%; }
  .hero__side { padding-bottom: 10px; }
  html:not(.drawer-mode) .card__tab { width: 150px; left: calc(var(--i) * (100% - 150px) / 6); font-size: .85rem; }
  .foot__in { grid-template-columns: 1fr; padding-bottom: 100px; }
  .foot__logo { grid-row: auto; justify-self: start; }
}
[tabindex="-1"]:focus { outline: none; }