@font-face {
  font-family: "Bricolage";
  src: url("schrift/bricolage.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson";
  src: url("schrift/atkinson-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson";
  src: url("schrift/atkinson-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --tinte: #1d2756;
  --tinte-hell: #3a4785;
  --text: #22273a;
  --leise: #586079;
  --grund: #e7ebf1;
  --papier: #ffffff;
  --linie: #c9d0dc;
  --notiz: #ffd84d;
  --erledigt: #2e7d4f;
  --schatten: 0 1px 2px rgba(29, 39, 86, .12), 0 12px 28px -8px rgba(29, 39, 86, .28);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 1.125rem/1.6 "Atkinson", system-ui, sans-serif;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--tinte); text-underline-offset: .18em; }
a:hover { color: var(--tinte-hell); }
:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 {
  font-family: "Bricolage", "Atkinson", sans-serif;
  color: var(--tinte);
  font-weight: 750;
  letter-spacing: -.02em;
  margin: 0;
}
h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); line-height: 1.12; }
h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -.01em; }
p { margin: 0 0 1em; }

.rahmen { width: min(1120px, 100% - 32px); margin-inline: auto; }
.schmal { max-width: 40rem; }

/* Kopf */
.kopf { padding: 20px 0; }
.kopf .rahmen { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marke {
  font-family: "Bricolage", sans-serif; font-weight: 800; font-size: 1.4rem;
  letter-spacing: -.03em; color: var(--tinte); text-decoration: none;
  display: inline-flex; align-items: center; gap: .45em;
}
.marke svg, .marke img { width: 1.35em; height: 1.35em; }
.kopf-tel { font-weight: 700; text-decoration: none; white-space: nowrap; }
.kopf-tel span { color: var(--leise); font-weight: 400; }

/* Knöpfe */
.knopf {
  display: inline-block; padding: .8em 1.3em; border-radius: 10px;
  font-weight: 700; text-decoration: none; line-height: 1.2;
  border: 2px solid var(--tinte);
}
.knopf-voll { background: var(--tinte); color: #fff; }
.knopf-voll:hover { background: var(--tinte-hell); border-color: var(--tinte-hell); color: #fff; }
.knopf-leer { color: var(--tinte); }
.knopf-leer:hover { background: var(--papier); }

/* Einstieg */
.einstieg { padding: 32px 0 88px; overflow-x: clip; }
.einstieg .rahmen { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.einstieg h1 {
  font-size: clamp(2.6rem, 1.4rem + 4.6vw, 4.6rem);
  line-height: .98; letter-spacing: -.035em; font-weight: 800;
  margin-bottom: 28px; text-wrap: balance;
}
.einstieg .vorspann { font-size: 1.25rem; max-width: 30rem; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Der Brief */
.tisch { position: relative; padding: 28px 96px 72px 16px; }
.brief {
  position: relative;
  background: var(--papier);
  box-shadow: var(--schatten);
  padding: 30px 32px 34px;
  transform: rotate(-2deg);
  font-size: .8rem; line-height: 1.5; color: #39405a;
  border-radius: 2px;
  animation: ankommen 900ms cubic-bezier(.2, .8, .25, 1) both;
}
@keyframes ankommen {
  from { transform: translateY(40px) rotate(3deg); opacity: 0; }
  to { transform: rotate(-2deg); opacity: 1; }
}
.brief-absender { margin-left: 120px; font-size: .66rem; color: var(--leise); border-bottom: 1px solid var(--linie); padding-bottom: 3px; margin-bottom: 10px; }
.brief-empfaenger { margin-bottom: 18px; }
.brief-titel { font-family: "Bricolage", sans-serif; font-weight: 750; font-size: 1.15rem; color: var(--tinte); margin: 0 0 8px; letter-spacing: -.01em; }
.brief p { margin: 0 0 8px; }
.brief-zugang { display: flex; gap: 16px; align-items: center; margin: 14px 0 10px; }
.brief-zugang svg { width: 82px; height: 82px; flex: none; }
.brief-zugang strong { display: block; color: var(--tinte); }
.notiz {
  position: absolute; left: -12px; top: 0; z-index: 2;
  background: var(--notiz); color: #3d3300;
  padding: 14px 16px 16px; width: 148px;
  transform: rotate(-6deg);
  box-shadow: 0 2px 4px rgba(60, 50, 0, .18), 0 10px 16px -10px rgba(60, 50, 0, .35);
  font-family: "Bricolage", sans-serif; font-weight: 600; font-size: .95rem; line-height: 1.25;
  animation: kleben 500ms 750ms cubic-bezier(.2, .9, .3, 1.3) both;
}
.notiz small { display: block; font-family: "Atkinson", sans-serif; font-weight: 400; font-size: .72rem; margin-top: 6px; }
@keyframes kleben {
  from { transform: rotate(-16deg) scale(1.15); opacity: 0; }
  to { transform: rotate(-6deg) scale(1); opacity: 1; }
}

/* Handy mit Beispielseite */
.handy {
  position: absolute; right: 0; bottom: 0; width: 150px;
  background: #1b1f2c; padding: 7px; border-radius: 24px;
  box-shadow: var(--schatten);
  transform: rotate(5deg);
  animation: ankommen-handy 900ms 250ms cubic-bezier(.2, .8, .25, 1) both;
}
@keyframes ankommen-handy {
  from { transform: translateY(50px) rotate(10deg); opacity: 0; }
  to { transform: rotate(5deg); opacity: 1; }
}
.handy-bild { border-radius: 18px; overflow: hidden; background: #f6f3ee; height: 270px; font-size: .5rem; line-height: 1.4; color: #3b3227; }
.bsp-oben { background: #5b3b22; color: #fff; padding: 22px 12px 18px; }
.bsp-oben b { display: block; font-family: "Bricolage", sans-serif; font-size: .95rem; line-height: 1.05; margin-bottom: 4px; letter-spacing: -.02em; }
.bsp-knopf { display: inline-block; margin-top: 8px; background: #e9b44c; color: #2d1f0e; padding: 3px 7px; border-radius: 4px; font-weight: 700; }
.bsp-teil { padding: 10px 12px 0; }
.bsp-teil b { font-family: "Bricolage", sans-serif; font-size: .7rem; color: #5b3b22; }
.bsp-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 6px 12px; }
.bsp-kacheln i { height: 34px; border-radius: 4px; background: linear-gradient(135deg, #c8a27a, #8a5f3c); }
.bsp-kacheln i:nth-child(2) { background: linear-gradient(135deg, #d9c2a3, #a77b52); }
.bsp-kacheln i:nth-child(3) { background: linear-gradient(135deg, #b38c64, #6e4a2d); }
.bsp-kacheln i:nth-child(4) { background: linear-gradient(135deg, #e3d1b6, #b48b62); }
.handy-hinweis { position: absolute; left: -6px; bottom: -26px; font-size: .78rem; color: var(--leise); transform: rotate(-5deg); white-space: nowrap; }

/* Abschnitte */
.abschnitt { padding: 88px 0; }
.abschnitt-hell { background: var(--papier); }
.abschnitt h2 { margin-bottom: 20px; }
.einleitung { font-size: 1.2rem; color: var(--leise); max-width: 38rem; }

/* Brief bekommen */
.empfang { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.zusagen { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.zusagen li { padding-left: 40px; position: relative; }
.zusagen li::before {
  content: ""; position: absolute; left: 0; top: .15em; width: 26px; height: 26px; border-radius: 50%;
  background: var(--erledigt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.zusagen strong { display: block; color: var(--tinte); }

/* Ablauf */
.ablauf { list-style: none; counter-reset: schritt; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.ablauf li { counter-increment: schritt; padding: 0 28px 0 0; position: relative; }
.ablauf li::before {
  content: counter(schritt);
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--papier); border: 2px solid var(--tinte); color: var(--tinte);
  font-family: "Bricolage", sans-serif; font-weight: 800; font-size: 1.4rem;
  margin-bottom: 20px; position: relative; z-index: 1;
}
.ablauf li::after { content: ""; position: absolute; top: 26px; left: 52px; right: 0; border-top: 2px dashed var(--linie); }
.ablauf li:last-child::after { display: none; }
.ablauf li:last-child::before { background: var(--erledigt); border-color: var(--erledigt); color: #fff; }
.ablauf h3 { margin-bottom: 8px; }
.ablauf p { color: var(--leise); font-size: 1.02rem; }

/* Preis als Beleg */
.preis { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.beleg {
  background: var(--papier); box-shadow: var(--schatten);
  padding: 32px 32px 28px; max-width: 30rem; justify-self: end; width: 100%;
  position: relative;
  -webkit-mask: radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 0 0 / 22px 100% repeat-x;
          mask: radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 0 0 / 22px 100% repeat-x;
  padding-bottom: 40px;
}
.beleg h3 { font-size: 1.1rem; margin-bottom: 16px; }
.beleg dl { margin: 0; }
.beleg-zeile { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; font-size: 1rem; }
.beleg-zeile dt { flex: none; max-width: 70%; }
.beleg-zeile::after { content: ""; order: 1; flex: 1; border-bottom: 2px dotted var(--linie); transform: translateY(-4px); }
.beleg-zeile dd { order: 2; margin: 0; color: var(--erledigt); font-weight: 700; white-space: nowrap; }
.beleg-summe {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  border-top: 2px solid var(--tinte); margin-top: 14px; padding-top: 14px;
}
.beleg-summe span { font-weight: 700; color: var(--tinte); }
.beleg-summe b { font-family: "Bricolage", sans-serif; font-size: 2.6rem; line-height: 1; color: var(--tinte); letter-spacing: -.03em; }
.beleg-fuss { font-size: .9rem; color: var(--leise); margin: 10px 0 0; }
.preis-text p { max-width: 34rem; }

.zaehlung { width: 100%; border-collapse: collapse; margin: 24px 0 8px; font-size: 1rem; max-width: 34rem; }
.zaehlung th, .zaehlung td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.zaehlung th { font-weight: 400; padding-right: 16px; }
.zaehlung td { font-weight: 700; color: var(--tinte); white-space: nowrap; text-align: right; }

/* Fragen */
.fragen { max-width: 46rem; margin-top: 32px; }
.fragen details { border-top: 1px solid var(--linie); }
.fragen details:last-child { border-bottom: 1px solid var(--linie); }
.fragen summary {
  cursor: pointer; list-style: none; padding: 20px 44px 20px 0; position: relative;
  font-family: "Bricolage", sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--tinte); letter-spacing: -.01em;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px;
  border-right: 3px solid var(--tinte); border-bottom: 3px solid var(--tinte);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.fragen details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.fragen details > div { padding: 0 0 20px; max-width: 40rem; }

/* Person und Kontakt */
.person { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: start; }
.kontaktkarte {
  background: var(--tinte); color: #fff; padding: 32px; border-radius: 14px;
}
.kontaktkarte h3 { color: #fff; margin-bottom: 16px; }
.kontaktkarte a { color: #fff; }
.kontaktkarte .gross { font-family: "Bricolage", sans-serif; font-weight: 750; font-size: 1.7rem; letter-spacing: -.02em; display: inline-block; margin-bottom: 4px; }
.kontaktkarte address { font-style: normal; margin-top: 20px; color: #cdd3ea; }

/* Fuß */
.fuss { padding: 36px 0 48px; font-size: .95rem; color: var(--leise); }
.fuss .rahmen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
.fuss nav { display: flex; gap: 24px; }

/* Rechtstexte */
.recht { padding: 24px 0 80px; }
.recht h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); margin: 24px 0 32px; letter-spacing: -.03em; }
.recht h2 { font-size: 1.35rem; margin: 36px 0 10px; }
.recht .papierbogen { background: var(--papier); padding: clamp(24px, 5vw, 56px); box-shadow: var(--schatten); max-width: 48rem; }

@media (max-width: 900px) {
  .einstieg .rahmen, .empfang, .preis, .person { grid-template-columns: 1fr; gap: 40px; }
  .einstieg { padding-bottom: 72px; }
  .tisch { max-width: 560px; }
  .beleg { justify-self: start; }
  .ablauf { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .ablauf li:nth-child(2)::after { display: none; }
  .abschnitt { padding: 64px 0; }
}
@media (max-width: 560px) {
  body { font-size: 1.0625rem; }
  .kopf-tel span { display: none; }
  .tisch { padding: 24px 52px 72px 8px; }
  .brief { padding: 22px 20px 26px; font-size: .74rem; }
  .brief-zugang svg { width: 64px; height: 64px; }
  .notiz { width: 112px; font-size: .8rem; left: -8px; padding: 9px 11px 11px; }
  .brief-absender { margin-left: 96px; }
  .handy { width: 118px; right: -4px; }
  .handy-bild { height: 210px; }
  .ablauf { grid-template-columns: 1fr; }
  .ablauf li { padding: 0 0 0 72px; min-height: 52px; }
  .ablauf li::before { position: absolute; left: 0; top: 0; }
  .ablauf li::after { top: 52px; bottom: -40px; left: 25px; right: auto; border-top: 0; border-left: 2px dashed var(--linie); }
  .ablauf li:nth-child(2)::after { display: block; }
  .beleg { padding: 24px 20px 36px; }
  .beleg-summe b { font-size: 2.1rem; }
  .kontaktkarte { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}