@charset "UTF-8";

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/Dateien/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/Dateien/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/Dateien/fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/Dateien/fonts/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Typography */
  --font-display: Fraunces, Georgia, serif;
  --font-body: "Source Sans 3", system-ui, sans-serif;

  /* Brand */
  --orange: #ea6a12;
  --orange-deep: #c2510a;
  --orange-soft: #fff1e4;
  --gold: #e2a12a;
  --gold-deep: #c98c1c;
  --teal: #0f766e;
  --blue: #1d4e89;
  --danger: #b4342a;
  --danger-soft: #fdf3f2;
  --danger-line: #f0d2ce;
  --teal-soft: #f1f8f6;
  --teal-line: #cfe6e0;

  /* Text */
  --ink: #1c1917;
  --ink-muted: #44403c;
  --ink-soft: #57534e;
  --ink-faint: #a8a29e;

  /* Surfaces */
  --white: #fff;
  --black: #000;
  --paper: #f6f1ea;
  --paper-translucent: rgba(246, 241, 234, .88);
  --sand-50: #fffdf9;
  --sand-100: #efe8dc;
  --sand-150: #efe7dc;
  --sand-200: #efe4d4;

  /* Borders */
  --line: #e7ddd0;
  --line-soft: #efe6d9;
  --line-faint: #f0e8dd;
  --line-hover: #d6c7b6;
  --line-buy: #e2d5c3;
  --line-sell: #f0d3b0;

  /* Radius */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Elevation */
  --shadow: 0 12px 28px rgba(28, 25, 23, 0.07);
  --shadow-btn: 0 8px 18px rgba(234, 106, 18, .22);

  /* Forms. One height for every text control and one for every field label, so
     that an <input> and a <select> standing next to each other line up and a
     label carrying a help "?" stays as tall as one without. */
  --control-height: 50px;
  --label-height: 21px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
img { max-width: 100%; display: block; }

.wrap { width: min(1180px, calc(100% - var(--space-8))); margin-inline: auto; }

header.site {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper-translucent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.navrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: var(--space-5);
}
.logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: var(--space-1);
}
.logo strong {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.logo strong em { font-style: normal; color: var(--orange); }
.logo small { font-size: 12.5px; color: var(--ink-soft); font-weight: 500; }
.nav { display: flex; align-items: center; gap: var(--space-2); }
.nav a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-muted);
}
.nav a:hover, .nav a.active { background: var(--white); color: var(--ink); }
.nav-cta { display: flex; gap: var(--space-2); align-items: center; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  transition: .18s ease;
}
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--white); }
.btn-outline { background: var(--white); border: 1px solid var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--line-hover); background: var(--sand-100); }
.btn-primary {
  background: var(--orange);
  color: var(--white);
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover { background: var(--orange-deep); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: var(--ink-muted); }
.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--white);
}

.hero { padding: var(--space-5) 0 var(--space-2); }
.hero-bar {
  display: grid;
  grid-template-columns: 1.45fr .55fr;
  background: var(--sand-50);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: 0;
}
.hero-copy { padding: var(--space-6); }
.hero-copy h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.hero-badge {
  width: 126px;
  height: 126px;
  background: url('/Dateien/gfx/redesign/hero-badge.svg') center / contain no-repeat;
  position: relative;
  left: var(--space-5);
  top: var(--space-5);
  opacity: 0.9;
  transform: rotate(15deg);
}
.lede {
  font-size: 16px;
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
}
.search {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}
.search-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
}
.search input[type="search"] {
  width: 100%;
  border: 0;
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  outline: none;
}
.hero-visual {
  min-height: clamp(120px, 16vw, 168px);
  background: var(--sand-200) url("/Dateien/gfx/redesign/hero.jpg") center/cover no-repeat;
}

/* The stat tiles are built exactly like the "So funktioniert's" steps below
   them: same card, same 54px disc, same column split. The one difference is
   that the row is an auto-fit track rather than a fixed three-up, so the tiles
   reflow on their own. The track minimum has to leave room for the disc, the
   padding and a word like "kostenlos" at display size - at 160px the tile used
   to push past its own track. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  padding: var(--space-5) 0 var(--space-1);
}
.stat {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: var(--space-3);
  align-items: start;
}
/* Grid children default to min-width: auto and refuse to shrink below their
   content, which is what pushes a tile wider than its track. */
.stat > div { min-width: 0; }
.stat-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--sand-150);
  display: grid;
  place-items: center;
  color: var(--ink);
}
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: -.03em;
}
.stat span { color: var(--ink-soft); font-size: 14.5px; }

.intents {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
  padding: var(--space-6) 0 var(--space-1);
}
.intent {
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-4);
  align-items: start;
  border: 1px solid var(--line);
}
.intent.buy {
  background: var(--sand-100);
  border-color: var(--line-buy);
}
.intent.sell {
  background: var(--orange-soft);
  border-color: var(--line-sell);
}
.intent-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: var(--white);
  color: var(--ink);
}
.intent h2 {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: -.03em;
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
}
.intent ul {
  list-style: none;
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.intent li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}
.intent li::before {
  content: "✓";
  color: var(--teal);
  font-weight: 800;
  line-height: 1.3;
}
.intent.sell li::before { color: var(--orange-deep); }
.intent .cta { grid-column: 2; justify-self: start; }
.btn-gold {
  background: var(--gold);
  color: var(--ink);
}
.btn-gold:hover { background: var(--gold-deep); }

.how { padding-top: var(--space-6); padding-bottom: var(--space-2); }
.how-steps {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--space-3);
  align-items: stretch;
}
.how-steps > li:not(.how-arrow) {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: var(--space-3);
  align-items: start;
}
.how-steps h3 { font-size: 18px; margin-bottom: var(--space-1); }
.how-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--sand-150);
  display: grid;
  place-items: center;
  color: var(--ink);
}
.how-arrow {
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  font-size: 22px;
  font-weight: 600;
}

.kicker { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
section.block { padding: var(--space-8) 0; }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
h2.sec {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 24px);
  letter-spacing: -.03em;
}
.muted { color: var(--ink-soft); }

.offer {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  padding: var(--space-4);
}
/* Real book titles run much longer than the prototype's samples - the old
   homepage cut them at 23 characters. Clamp visually instead of truncating, so
   the full title stays in the markup and in the title attribute. */
.offer h3 {
  font-size: 17px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.offer-list { display: flex; flex-direction: column; gap: var(--space-3); }
.offer-list img { max-width: 70px; max-height: 70px; height: auto; width: auto; object-fit: contain; margin-right: var(--space-3); }
.offer .btn { height: 50px; align-self: center; margin-left: auto; }
.price { font-weight: 700; font-size: 18px; }
.was { text-decoration: line-through; color: var(--ink-faint); font-weight: 500; font-size: 14px; margin-left: var(--space-2); }

.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-4);
}
.benefit-list { display: grid; gap: var(--space-3); }
.benefit {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: var(--space-3);
}
.icon {
  width: 42px; height: 42px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--orange-soft);
  color: var(--orange-deep);
  font-weight: 800;
}

/* The "Warum Schulbuch-Markt" tiles used single characters - %, €, the house
   glyph and a tick - which are drawn by the text font and so came out at a
   different weight and size from every other icon on the page. These are real
   icons, masked so that they keep the tile's orange rather than the ink the
   file is drawn in. Scoped to .benefit because .icon also carries the step
   numbers on selectbook.php. */
.benefit .icon::before {
  content: "";
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: var(--benefit-icon) center / 22px 22px no-repeat;
  mask: var(--benefit-icon) center / 22px 22px no-repeat;
}
.benefit .icon-save   { --benefit-icon: url("/Dateien/gfx/redesign/icon-percent.svg"); }
.benefit .icon-earn   { --benefit-icon: url("/Dateien/gfx/redesign/icon-money.svg"); }
.benefit .icon-pickup { --benefit-icon: url("/Dateien/gfx/redesign/icon-house.svg"); }
.benefit .icon-signup { --benefit-icon: url("/Dateien/gfx/redesign/icon-user-plus.svg"); }

.info-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); }
.links {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3) var(--space-6);
}
.links a {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line-faint);
  color: var(--blue);
  font-weight: 600;
}
.partner {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.partner img {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

/* ---------------------------------------------------------------------------
   Search and results (selectbook.php). The prototype only covered the homepage,
   so these extend the same vocabulary: the card, border, radius and button
   styles above are reused rather than redefined.
   --------------------------------------------------------------------------- */

.page-head { padding: var(--space-6) 0 var(--space-4); }
.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 30px);
  letter-spacing: -.03em;
  font-weight: 600;
}
.page-head .lede { margin-top: var(--space-2); margin-bottom: var(--space-4); }

/* The search field is the next thing the visitor has to act on, so it sits in a
   raised panel rather than loose on the page. .search itself is paper-coloured,
   which is invisible against the paper background - on the homepage it only
   reads as a control because the hero behind it is sand. This gives it the same
   backing here. */
.search-panel {
  background: var(--sand-50);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-top: var(--space-4);
}
/* Before a search has been made there is nothing else to do on the page, so the
   panel takes the brightest surface and a warm border, and the supporting card
   below it is muted. Brightness has to run in that order: white here and sand
   below, never the other way round. */
.search-panel.is-primary {
  background: var(--white);
  border: 1px solid var(--line-sell);
  padding: var(--space-6);
  box-shadow: var(--shadow);
}
/* The panel is the container now, so the inner .search wrapper drops its own
   paper background and border rather than sitting as a box inside a box. */
.search-panel.is-primary .search { background: transparent; border: 0; padding: 0; }
.search-panel.is-primary .search input[type="search"] {
  border: 1px solid var(--line);
  padding: var(--space-4);
  font-size: 17px;
}
.search-panel.is-primary .search input[type="search"]:focus { border-color: var(--orange); }
.search-panel.is-primary .btn { padding: var(--space-4) var(--space-6); font-size: 16px; }

/* The old page pointed at the search box with arrows because its explanation box
   sat above it and had to send the reader back up. Here the search panel already
   comes first and carries the most visual weight, so no pointer is needed. */

/* The "how it works" steps are supporting copy, so they are one quiet card
   rather than three that would outweigh the search panel above them. */
.howto {
  background: var(--sand-100);
  border: 1px solid var(--line-buy);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 760px;
  margin-inline: auto;
}
/* The numbered markers need to stay legible on the muted card. */
.howto .icon { background: var(--white); color: var(--orange-deep); }
.howto h2 {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: -.03em;
  margin-bottom: var(--space-5);
}
.howto-steps { list-style: none; display: grid; gap: var(--space-5); }
.howto-steps li { display: grid; grid-template-columns: 42px 1fr; gap: var(--space-4); align-items: start; }
.howto-steps strong { display: block; margin-bottom: var(--space-1); }

.result-list { display: grid; gap: var(--space-3); }
.result {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: var(--space-4);
  align-items: center;
}
.result img { max-width: 70px; max-height: 92px; width: auto; height: auto; object-fit: contain; }
.result h2 {
  font-size: 17px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.result h2 .publisher { color: var(--ink-soft); font-weight: 500; }
.isbn {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin-top: var(--space-2);
  font-size: 13.5px;
  color: var(--ink-soft);
}
.isbn b { font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
/* The check digit and prefix are shown greyed, as on the old page. */
.isbn .faint { color: var(--ink-faint); }
.offer-count { margin-top: var(--space-2); font-size: 14px; font-weight: 600; color: var(--orange-deep); }
.result-actions { display: grid; gap: var(--space-2); align-content: center; }
.result-actions .btn { white-space: nowrap; }

/* Der Kasten war frueher so breit wie die Seite, der Text darin aber auf 60
   Zeichen begrenzt und zentriert - auf einer 1180px breiten Seite fuellte die
   Schrift damit nur einen Streifen in der Mitte. Jetzt ist der Kasten selbst
   schmal, und der Text fuellt ihn. */
.notice {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
}
.notice h2 { font-family: var(--font-display); font-size: 24px; letter-spacing: -.03em; margin-bottom: var(--space-3); }
.notice p { color: var(--ink-soft); }
.notice .example { margin-top: var(--space-4); font-size: 15px; }
.notice .example b { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   Offers for one book (buybook_list_offers.php)
   --------------------------------------------------------------------------- */

.book-header {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: var(--space-6);
  align-items: start;
}
.book-header img { max-width: 120px; max-height: 160px; width: auto; height: auto; object-fit: contain; }
.book-header .cover { text-align: center; }
.book-header .disclaimer { margin-top: var(--space-2); font-size: 11px; color: var(--ink-faint); }
.book-header h1, .book-header h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -.03em;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.book-header .author { color: var(--ink-soft); margin-top: var(--space-1); }

/* Label/value pairs used by the book header and each offer. */
.spec { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); margin-top: var(--space-3); font-size: 14.5px; }
.spec dt { color: var(--ink-soft); }
.spec dd { color: var(--ink-muted); }
.spec .faint { color: var(--ink-faint); }
.spec b { font-variant-numeric: tabular-nums; font-weight: 600; }

.listing {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-5);
  align-items: center;
}
.listing-list { display: grid; gap: var(--space-3); }
/* The new-from-Amazon row is deliberately set apart from the used offers. */
.listing.is-new { background: var(--sand-100); border-color: var(--line-buy); }
.listing .who { font-weight: 600; }
.listing .who a { color: var(--blue); }
.listing .rating { font-weight: 500; color: var(--ink-soft); }
.listing-buy { text-align: right; display: grid; gap: var(--space-1); justify-items: end; }
.listing-buy .price { font-size: 22px; font-family: var(--font-display); letter-spacing: -.02em; }
.listing-buy .shipping { font-size: 13.5px; color: var(--ink-soft); }
.listing-buy .btn { margin-top: var(--space-2); white-space: nowrap; }

.badge {
  display: inline-block;
  margin-top: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--orange-soft);
  color: var(--orange-deep);
  font-size: 13px;
  font-weight: 600;
}
.badge.is-muted { background: var(--sand-100); color: var(--ink-soft); }

/* Login block shown to signed-out visitors. */
.login-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.login-card, .login-why {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.login-why { background: var(--sand-100); border-color: var(--line-buy); }
.login-why h2 { font-size: 17px; margin-bottom: var(--space-3); }
.login-why ul { list-style: none; display: grid; gap: var(--space-2); }
.login-why li { display: flex; gap: var(--space-2); }
.login-why li::before { content: "✓"; color: var(--teal); font-weight: 800; }

.field { display: grid; gap: var(--space-1); margin-bottom: var(--space-3); }
.field label { font-size: 14px; font-weight: 600; color: var(--ink-muted); }
.field input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--sand-50);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  outline: none;
}
.field input:focus { border-color: var(--orange); background: var(--white); }
.form-actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); }
.form-links { display: grid; gap: var(--space-1); font-size: 14px; }
.form-links a { color: var(--blue); font-weight: 600; }

.back-link { text-align: center; padding-top: var(--space-6); }
.back-link a { color: var(--blue); font-weight: 600; }

@media (max-width: 760px) {
  .book-header { grid-template-columns: 100px 1fr; }
  .book-header .header-action { grid-column: 1 / -1; }
  .listing { grid-template-columns: 1fr; }
  .listing-buy { text-align: left; justify-items: start; }
  .login-grid { grid-template-columns: 1fr; }
}

/* Pager. The markup comes from pagingRenderPageBar() in Paging.php, which emits
   empty <a class="previous"> / <a class="next"> that used to be arrow images. */
.pager_container { display: flex; justify-content: center; padding: var(--space-6) 0 var(--space-2); }
.pager { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; justify-content: center; }
.pager a,
.pager .current,
.pager .previous_inactive,
.pager .next_inactive {
  min-width: 38px;
  height: 38px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
}
.pager a { background: var(--white); border: 1px solid var(--line); color: var(--ink-muted); }
.pager a:hover { border-color: var(--line-hover); color: var(--ink); }
.pager .current { background: var(--orange); color: var(--white); }
.pager .spacer { color: var(--ink-faint); padding: 0 var(--space-1); }
/* Previous / next.

   These used the "←" and "→" characters, which are drawn by whatever font the
   system happens to pick and so came out at a different weight from everything
   around them. A chevron drawn as an SVG mask keeps the shape identical
   everywhere and, because the mask is painted with currentColor, it still picks
   up the hover and the disabled colour on its own. */
.pager .previous::before,
.pager .previous_inactive::before,
.pager .next::before,
.pager .next_inactive::before {
  content: "";
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--pager-icon) center / 18px 18px no-repeat;
  mask: var(--pager-icon) center / 18px 18px no-repeat;
}
.pager .previous::before, .pager .previous_inactive::before {
  --pager-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18 9 12l6-6'/%3E%3C/svg%3E");
}
.pager .next::before, .pager .next_inactive::before {
  --pager-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}
.pager .previous_inactive, .pager .next_inactive { color: var(--ink-faint); border: 1px solid var(--line-faint); }

@media (max-width: 620px) {
  /* Stack the card so the buttons get full width instead of squeezing the title. */
  .result { grid-template-columns: 70px 1fr; }
  .result-actions { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  /* The action column can hold three buttons, which will not fit side by side
     on a phone, so those keep stacking and sit against the left edge. */
  .result-actions.is-links { grid-auto-flow: row; grid-template-columns: 1fr; justify-items: start; }
}

footer {
  margin-top: var(--space-5);
  padding: var(--space-6) 0 var(--space-10);
  color: var(--ink-soft);
  font-size: 14px;
}
.foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: var(--space-6);
}
.legal { display: flex; gap: var(--space-4); }

/* Only the navigation and the two deliberately asymmetric layouts still need
   a viewport breakpoint. Every other grid reflows on its own via auto-fit,
   and type/heights scale with clamp(). */
@media (max-width: 900px) {
  .nav { display: none; }
  .nav.open {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--white);
    flex-direction: column;
    padding: var(--space-3);
    border-bottom: 1px solid var(--line);
  }
  .menu-toggle { display: grid; place-items: center; }
  .nav-cta .btn-ghost { display: none; }
  .nav-cta .btn { height: 30px; padding: 0 var(--space-4); font-size: 14.5px; }

  .hero-bar,
  .info-grid,
  .search-row,
  .how-steps { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .how-arrow { display: none; }
}

/* On narrow phones the header lockup does not fit next to the buttons, and a
   flex item will not shrink below its min-content width, so the row pushes the
   whole page into sideways scrolling. Drop the tagline (the wordmark above it
   says the same thing) and tighten the lockup and the buttons. Registrieren has
   to stay visible: the collapsed menu holds only the section links, so hiding it
   would leave no way to register. */
@media (max-width: 480px) {
  .logo small { display: none; }
  .logo strong { font-size: 19px; }
  .navrow { gap: var(--space-2); }
  .nav-cta { gap: var(--space-1); }
  .nav-cta .btn { padding: 0 var(--space-3); }
}

/* ---------------------------------------------------------------------------
   A single offer (buybook_show_offer_details.php)
   --------------------------------------------------------------------------- */

.offer-detail {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-top: var(--space-4);
}
.offer-detail-head {
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--line-faint);
  color: var(--ink-soft);
  font-size: 14.5px;
}
.offer-detail-head b { color: var(--ink); font-weight: 600; }
.offer-detail-grid { display: grid; grid-template-columns: 1fr 240px; gap: var(--space-6); align-items: start; }
/* The spec list carries longer values here than on the list page. */
.offer-detail .spec { margin-top: 0; grid-template-columns: 130px 1fr; gap: var(--space-3) var(--space-4); font-size: 15px; }

.rating-box {
  background: var(--sand-100);
  border: 1px solid var(--line-buy);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
}
.rating-box .kicker { margin-bottom: var(--space-1); }
.rating-box .sold { font-size: 13.5px; color: var(--ink-soft); }
.rating-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-top: var(--space-3); }
.rating-nums b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.rating-nums span { font-size: 11.5px; color: var(--ink-soft); }
.rating-pos b { color: var(--teal); }
.rating-neg b { color: var(--danger); }
/* Ueber der eigenen Bewertungsseite steht dieselbe Box, dort aber ueber die
   volle Spaltenbreite. Ohne Begrenzung stuenden die drei Zahlen so weit
   auseinander, dass sie nicht mehr als eine Angabe zu lesen sind. */
.rating-box.is-summary .rating-nums { max-width: 420px; margin-left: auto; margin-right: auto; }

/* Badges shown next to the book header: distance and how much is saved. */
.offer-badges { display: grid; gap: var(--space-2); justify-items: end; }
.offer-badges .badge { margin-top: 0; }

.action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-5);
}
.action-bar .spacer { flex: 1 1 auto; }
/* Kauf nicht möglich - looks like a button but is a <span>, not a link. */
.btn-disabled {
  background: var(--sand-100);
  color: var(--ink-faint);
  cursor: not-allowed;
  border: 1px solid var(--line);
}
.btn-disabled:hover { background: var(--sand-100); }

@media (max-width: 760px) {
  .offer-detail-grid { grid-template-columns: 1fr; }
  .offer-detail .spec { grid-template-columns: 1fr; gap: 0 0; }
  .offer-detail .spec dt { margin-top: var(--space-3); }
  .offer-badges { justify-items: start; }
  .action-bar .spacer { display: none; }
  .action-bar .btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Content pages (Über uns, Wie funktioniert…, Informationen, Lehrmittelfreiheit)
   A prose column with the section's own navigation beside it.
   --------------------------------------------------------------------------- */

.content-layout { display: grid; grid-template-columns: 1fr 260px; gap: var(--space-6); align-items: start; }

.prose {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.prose h2 {
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: -.03em;
  margin-top: var(--space-8);
}
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-muted); }
.prose a { color: var(--blue); font-weight: 600; }
.prose ul { list-style: none; display: grid; gap: var(--space-3); }
.prose ul li { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-2); }
.prose ul li::before { content: "✓"; color: var(--teal); font-weight: 800; }
.prose li strong { display: block; }
.prose li .muted { font-size: 14.5px; }

/* A highlighted aside inside prose - the old .box_bgr. */
.callout {
  background: var(--orange-soft);
  border: 1px solid var(--line-sell);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  color: var(--ink-muted);
}

/* Label/value rows in prose, e.g. "Für Käufer / Für Verkäufer". */
.prose .spec { grid-template-columns: 140px 1fr; gap: var(--space-3) var(--space-4); font-size: 15px; }

.sidenav {
  background: var(--sand-100);
  border: 1px solid var(--line-buy);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.sidenav .kicker { padding: 0 var(--space-3) var(--space-2); }
.sidenav a {
  display: block;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-muted);
}
.sidenav a + a { margin-top: var(--space-1); }
.sidenav a:hover { background: var(--white); color: var(--ink); }
.sidenav a.active { background: var(--white); color: var(--orange-deep); }

/* Section navigation with an icon per entry, as on the profile pages. The icon
   is drawn as a mask rather than an <img> so that it is painted in the link's
   own colour and turns orange with the active entry. */
.sidenav.with-icon a { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3); align-items: center; }
.sidenav.with-icon a::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--nav-icon) center / 20px 20px no-repeat;
  mask: var(--nav-icon) center / 20px 20px no-repeat;
}
.sidenav .nav-books   { --nav-icon: url("/Dateien/gfx/redesign/icon-books.svg"); }
.sidenav .nav-star    { --nav-icon: url("/Dateien/gfx/redesign/icon-star.svg"); }
.sidenav .nav-holiday { --nav-icon: url("/Dateien/gfx/redesign/icon-holiday.svg"); }
.sidenav .nav-receipt { --nav-icon: url("/Dateien/gfx/redesign/icon-receipt.svg"); }
.sidenav .nav-user    { --nav-icon: url("/Dateien/gfx/redesign/icon-user.svg"); }
.sidenav .nav-message { --nav-icon: url("/Dateien/gfx/redesign/icon-message.svg"); }

.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.data-table th, .data-table td { padding: var(--space-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-faint); }
.data-table th { font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td b { font-weight: 600; }

@media (max-width: 860px) {
  .content-layout { grid-template-columns: 1fr; }
  .sidenav { order: -1; }
  .prose { padding: var(--space-6); }
}

/* Index of links with a short description each (Informationen). */
.prose ul.link-list { display: grid; gap: 0; }
.prose ul.link-list li { display: block; padding: var(--space-4) 0; border-bottom: 1px solid var(--line-faint); }
.prose ul.link-list li:first-child { padding-top: 0; }
.prose ul.link-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.prose ul.link-list li::before { content: none; display: none; }
.prose ul.link-list strong { display: block; margin-bottom: var(--space-1); }
.prose ul.link-list a { color: var(--blue); font-weight: 600; }
.prose ul.link-list .muted { font-size: 14.5px; }

/* Link list with an icon in front of each entry, as on the profile overview.
   The badge repeats the round sand disc the homepage uses for its "So
   funktioniert's" steps, one size down. */
.prose ul.link-list.with-icon li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-4);
  align-items: start;
}
.list-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sand-150);
  display: grid;
  place-items: center;
}
@media (max-width: 480px) {
  .prose ul.link-list.with-icon li { grid-template-columns: 36px 1fr; gap: var(--space-3); }
  .list-icon { width: 36px; height: 36px; }
  .list-icon img { width: 19px; height: 19px; }
}
/* States that charge nothing for school books - green and bold on the old page. */
.data-table .is-free { color: var(--teal); font-weight: 600; }

/* Content pages without a sidebar keep a narrower measure. */
.wrap.narrow { width: min(820px, calc(100% - var(--space-8))); }

/* FAQ. Built on <details>, so it needs no script to open and close. */
.faq-group { margin-top: var(--space-6); }
.faq-group:first-of-type { margin-top: 0; }
.faq-group > h2 {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: -.03em;
  margin-bottom: var(--space-3);
}
details.faq { border-bottom: 1px solid var(--line-faint); }
details.faq:last-child { border-bottom: 0; }
details.faq > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-3) var(--space-6) var(--space-3) 0;
  font-weight: 600;
  color: var(--blue);
  position: relative;
}
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary::after {
  content: "+";
  position: absolute;
  right: var(--space-2);
  top: var(--space-3);
  color: var(--ink-faint);
  font-weight: 700;
}
details.faq[open] > summary::after { content: "\2212"; }
details.faq > summary:hover { color: var(--orange-deep); }
details.faq .answer { padding: 0 0 var(--space-4); color: var(--ink-muted); }

/* ---------------------------------------------------------------------------
   Forms and multi-step flows (registration, contact)
   --------------------------------------------------------------------------- */

.steps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-size: 14px; color: var(--ink-faint); }
.steps .step { display: inline-flex; align-items: center; gap: var(--space-2); }
.steps .is-current { color: var(--orange-deep); font-weight: 700; }
.steps .sep { opacity: .6; }

.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

/* Eine Seite, die aus einer einzigen Spalte besteht - Buchkopf und Formular
   untereinander. Der Rahmen der Seite bleibt so breit wie ueberall, damit die
   Ueberschrift an derselben Stelle beginnt wie auf der Angebotsliste desselben
   Buches; der Inhalt darunter bleibt aber lesbar schmal, statt Eingabefelder
   ueber die ganze Seite zu ziehen. */
.wrap.is-single-column > * { max-width: 820px; }
/* Spacing between fields stacked directly in the card. Scoped to direct
   children on purpose: without the ">" this also hit the fields inside a
   .field-grid, where it outranked that grid's own "margin: 0" reset and pushed
   every field after the first down by 16px - which is why Auflage used to sit
   higher than Jahr and Zustand. */
.form-card > .field + .field { margin-top: var(--space-4); }
.field .hint { font-size: 13px; color: var(--ink-soft); font-weight: 400; }
.form-note { margin-top: var(--space-5); font-size: 14.5px; color: var(--ink-soft); }
.form-note a { color: var(--blue); font-weight: 600; }
.form-card .form-actions { margin-top: var(--space-6); }

/* Validation summary above a form. */
.form-errors {
  background: var(--orange-soft);
  border: 1px solid var(--line-sell);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.form-errors strong { display: block; margin-bottom: var(--space-2); color: var(--orange-deep); }
.form-errors ul { margin: 0; padding-left: var(--space-5); color: var(--ink-muted); }
.form-errors li { margin-top: var(--space-1); }

.field select {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--sand-50);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  outline: none;
}
.field select:focus { border-color: var(--orange); background: var(--white); }
/* Postleitzahl next to Ort. */
.field-split { display: grid; grid-template-columns: 110px 1fr; gap: var(--space-3); }
.check { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3); align-items: start; margin-top: var(--space-5); }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--orange); }
.check label { font-size: 14.5px; color: var(--ink-muted); font-weight: 400; }
.check a { color: var(--blue); font-weight: 600; }

.field textarea {
  width: 100%;
  min-height: 180px;
  resize: vertical;
  border: 1px solid var(--line);
  background: var(--sand-50);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  outline: none;
  line-height: 1.5;
}
.field textarea:focus { border-color: var(--orange); background: var(--white); }

/* Small "?" that opens a help popup next to a field label. */
.help-link {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sand-100);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
  margin-left: var(--space-1);
}
.help-link:hover { background: var(--orange-soft); color: var(--orange-deep); }

/* Three short fields on one row (Auflage / Jahr / Zustand). */
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); align-items: start; }
.field-grid .field { margin: 0; }

/* Keeping a row of fields aligned.

   Three things pulled these apart. A field is itself a grid, and as a grid item
   it was stretched to the height of its tallest neighbour, which then handed the
   spare height to its own rows and pushed both label and control down by a few
   pixels each. A label carrying a help "?" built a taller line box than a plain
   one, because the "?" is an 18px inline-grid sitting on the text baseline. And
   a <select> does not measure the same as an <input>, so the two never matched
   even when their padding did.

   So: nothing stretches, a label is exactly one line tall whatever it contains,
   and every control shares one height. */
.field { align-content: start; }
.field > label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  min-height: var(--label-height);
  line-height: var(--label-height);
}
.field input:not([type="checkbox"]):not([type="radio"]),
.field select { height: var(--control-height); }
.field .suffix { font-size: 14px; color: var(--ink-soft); }
.field-inline { display: grid; grid-template-columns: 120px auto; gap: var(--space-2); align-items: center; }

/* ---------------------------------------------------------------------------
   Checkout (buybook_buying_details_1 / _2)
   --------------------------------------------------------------------------- */

.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.choice {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  transition: .18s ease;
}
.choice:hover { border-color: var(--orange); box-shadow: var(--shadow); }
.choice .choice-title { font-family: var(--font-display); font-size: 20px; letter-spacing: -.03em; }
.choice .choice-sub { color: var(--ink-soft); font-size: 14.5px; margin-top: var(--space-1); }
.choice .choice-price { margin-top: var(--space-3); font-weight: 700; font-size: 18px; }

.price-summary { width: 100%; max-width: 420px; margin-inline: auto; border-collapse: collapse; }
.price-summary td { padding: var(--space-2) 0; }
.price-summary td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.price-summary .total td { border-top: 2px solid var(--ink); font-weight: 700; font-size: 18px; padding-top: var(--space-3); }

.contract {
  background: var(--orange-soft);
  border: 1px solid var(--line-sell);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-top: var(--space-6);
}
.contract strong { color: var(--orange-deep); display: block; margin-bottom: var(--space-1); }
.callout a { color: var(--blue); font-weight: 600; }

/* Seller profile header (buybook_user_overview.php). */
.profile-head {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--space-6);
  align-items: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.profile-head h1 { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -.03em; font-weight: 600; }
.profile-head .meta { color: var(--ink-soft); font-size: 14.5px; margin-top: var(--space-2); }
@media (max-width: 760px) { .profile-head { grid-template-columns: 1fr; } }

/* Checklist where each item is either met or not (account deactivation). */
.checklist { list-style: none; display: grid; gap: var(--space-3); }
.checklist li { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3); align-items: start; }
.checklist li::before { content: "\2713"; color: var(--teal); font-weight: 800; }
.checklist li.is-blocked::before { content: "\2715"; color: var(--danger); }
.checklist li.is-blocked { color: var(--ink-soft); }

/* ---------------------------------------------------------------------------
   Profile list hubs (books.php, valuation.php)
   --------------------------------------------------------------------------- */

/* Replaces the old "Zeige:" dropdown that needed JavaScript to submit itself. */
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.tabs a {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-muted);
  background: var(--white);
  border: 1px solid var(--line);
}
.tabs a:hover { border-color: var(--line-hover); color: var(--ink); }
.tabs a.active { background: var(--orange); border-color: var(--orange); color: var(--white); }

/* Actions on a list row.

   Diese Links waren einmal eine eigene Klassenfamilie (.act-view, .act-delete,
   ...), die die Schaltflaechen-Eigenschaften noch einmal von Hand aufgeschrieben
   hat - mit dem Ergebnis, dass sie zwar aussahen wie eine Schaltflaeche, aber
   nicht mit .btn mitgepflegt wurden. Jetzt sind es gewoehnliche .btn-outline,
   eine Groesse kleiner; eigen ist ihnen nur noch das Symbol und, beim Loeschen,
   die Farbe. */
.btn-sm { padding: var(--space-2) var(--space-3); font-size: 14px; }
.btn-sm.with-icon::before { width: 16px; height: 16px; mask-size: 16px 16px; -webkit-mask-size: 16px 16px; }

.icon-view    { --btn-icon: url("/Dateien/gfx/redesign/icon-eye.svg"); }
.icon-edit    { --btn-icon: url("/Dateien/gfx/redesign/icon-pencil.svg"); }
.icon-delete  { --btn-icon: url("/Dateien/gfx/redesign/icon-trash.svg"); }
.icon-cancel  { --btn-icon: url("/Dateien/gfx/redesign/icon-cancel.svg"); }
.icon-find    { --btn-icon: url("/Dateien/gfx/redesign/icon-search.svg"); }
.icon-mail    { --btn-icon: url("/Dateien/gfx/redesign/icon-envelope.svg"); }
.icon-comment { --btn-icon: url("/Dateien/gfx/redesign/icon-message.svg"); }

/* Loeschen soll in einer Liste aus zwanzig Zeilen nicht schreien, erst unter
   dem Zeiger rot werden. */
.btn.is-danger { color: var(--ink-soft); }
.btn.is-danger:hover { color: var(--danger); border-color: var(--danger-line); background: var(--danger-soft); }

/* In the action column the buttons stack and share one width. */
.result-actions.is-links { gap: var(--space-2); justify-items: stretch; }
.result-actions.is-links a { justify-content: start; }

/* A row the page was asked to draw attention to, e.g. after editing an offer. */
.result.is-highlighted { border-color: var(--orange); box-shadow: var(--shadow); }

.status-cancelled { color: var(--danger); font-weight: 600; }

/* Totals shown above a list. */
.summary-card {
  background: var(--sand-100);
  border: 1px solid var(--line-buy);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.summary-card h2 { font-family: var(--font-display); font-size: 18px; letter-spacing: -.03em; margin-bottom: var(--space-3); }
.summary-card .spec { margin-top: 0; grid-template-columns: auto 1fr; }

.empty-state { color: var(--ink-soft); }
.empty-state a { color: var(--blue); font-weight: 600; }

@media (max-width: 700px) {
  .result-actions.is-links { justify-items: start; }
  .result-actions.is-links a { text-align: left; }
}

/* Ratings (valuation.php). */
.rating-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.rating-item + .rating-item { margin-top: var(--space-3); }
.rating-item .who { font-size: 14px; color: var(--ink-soft); }
.rating-item .who a { color: var(--blue); font-weight: 600; }
.rating-item .trade { margin-top: var(--space-2); font-size: 14.5px; }
.rating-item .trade a { color: var(--blue); font-weight: 600; }
.rating-item .verdict { margin-top: var(--space-3); font-weight: 700; }
.verdict.is-positive { color: var(--teal); }
.verdict.is-neutral { color: var(--ink-soft); }
.verdict.is-negative { color: var(--danger); }
.rating-item .comment { margin-top: var(--space-2); color: var(--ink-muted); }
.rating-item .reply { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line-faint); color: var(--ink-muted); }
.rating-item .reply b { color: var(--ink); }

/* One row of the "rate your trading partner" list. */
.rate-form { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-5); align-items: start; }
.rate-choice { display: grid; gap: var(--space-2); align-self: center; }
.rate-choice label { display: flex; align-items: center; gap: var(--space-2); font-size: 14.5px; cursor: pointer; }
/* .verdict carries a top margin for the list of received ratings, where it sits
   on its own line. Inside a radio label that margin shifts the word down while
   the button stays centred, which is what pushed the two out of line. */
.rate-choice .verdict { margin-top: 0; }
.rate-choice input { accent-color: var(--orange); width: 16px; height: 16px; flex: none; }
.rate-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); margin-top: var(--space-3); }
.rate-row input[type="text"] {
  border: 1px solid var(--line);
  background: var(--sand-50);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  outline: none;
  width: 100%;
}
.rate-row input[type="text"]:focus { border-color: var(--orange); background: var(--white); }

@media (max-width: 640px) { .rate-form { grid-template-columns: 1fr; } }
.rating-item .reply a { color: var(--blue); font-weight: 600; }

/* ---------------------------------------------------------------------------
   One trade (trade.php)
   --------------------------------------------------------------------------- */

.msg-thread { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.msg {
  border-radius: var(--radius-md);
  padding: var(--space-4);
  max-width: 78%;
  font-size: 14.5px;
  color: var(--ink-muted);
}
.msg .msg-head { font-size: 13px; color: var(--ink-soft); margin-bottom: var(--space-2); }
.msg .msg-head b { color: var(--ink); }
.msg.received { background: var(--sand-100); border: 1px solid var(--line-buy); justify-self: start; }
.msg.sent { background: var(--orange-soft); border: 1px solid var(--line-sell); justify-self: end; }

/* The cancellation form. A native <dialog> replaces the hand-rolled overlay,
   so it closes on Escape and traps focus without extra script. */
dialog.sheet {
  /* The global reset zeroes margin, which is what centres a modal dialog. */
  margin: auto;
  max-height: calc(100vh - 64px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  width: min(640px, calc(100% - var(--space-8)));
  background: var(--white);
  color: var(--ink);
}
dialog.sheet::backdrop { background: rgba(28, 25, 23, .45); }
dialog.sheet h2 { font-family: var(--font-display); font-size: 22px; letter-spacing: -.03em; margin-bottom: var(--space-4); }
dialog.sheet h3 { font-size: 16px; margin: var(--space-6) 0 var(--space-3); }
dialog.sheet ul { margin: var(--space-2) 0 0 var(--space-5); color: var(--ink-muted); font-size: 14.5px; }
dialog.sheet li { margin-top: var(--space-1); }
dialog.sheet .sheet-actions { display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-6); }

/* Accept / reject a cancellation request. */
.decision-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.spec a { color: var(--blue); font-weight: 600; }
/* The inbox is a list, not a two-sided conversation, so rows fill the column. */
.msg-thread.is-inbox .msg { max-width: none; justify-self: stretch; }
.msg-head a { color: var(--blue); font-weight: 600; }

/* ---------------------------------------------------------------------------
   Posteingang (chat.php).

   Eine Zeile je Unterhaltung statt je Nachricht. Zwei Spalten: links Name,
   Betreff und Vorschau, rechts Datum und Anzahl.
   --------------------------------------------------------------------------- */
.inbox { display: grid; gap: var(--space-2); }
.inbox-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-1) var(--space-4);
  align-items: baseline;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  transition: .18s ease;
}
.inbox-item:hover { border-color: var(--line-hover); box-shadow: var(--shadow); }
/* Links drei Zeilen Text, rechts oben das Datum und rechts unten die
   Schaltflaeche - so haengt die rechte Spalte an beiden Enden fest, statt dass
   sich dort drei Angaben untereinander stapeln. Die Anzahl der Nachrichten ist
   deshalb in die Betreffzeile gerutscht. */
.inbox-item .who { grid-column: 1; grid-row: 1; font-weight: 600; color: var(--ink); }
.inbox-item .when { grid-column: 2; grid-row: 1; color: var(--ink-soft); font-size: 13.5px; white-space: nowrap; text-align: right; }
/* Worum die Unterhaltung geht, ist die wichtigste Angabe nach dem Namen. Das
   Buchsymbol davor genuegt, um die Zeile von der Vorschau darunter zu trennen.
   Unterhaltungen ohne Angebot bekommen kein Symbol; dort gibt es nichts zu
   kennzeichnen. */
.inbox-item .about {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  max-width: 100%;
  display: inline-flex;
  /* Bei einem langen Titel bricht die Zeile um; das Symbol soll dann auf der
     ersten Zeile sitzen und nicht in der Mitte des Blocks schweben. */
  align-items: start;
  gap: var(--space-2);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.inbox-item .about::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
  background-color: var(--ink-soft);
  -webkit-mask: url("/Dateien/gfx/redesign/icon-books.svg") center / 16px 16px no-repeat;
  mask: url("/Dateien/gfx/redesign/icon-books.svg") center / 16px 16px no-repeat;
}
.inbox-item .about.is-empty {
  color: var(--ink-faint);
  font-style: italic;
  font-weight: 400;
  font-size: 14.5px;
}
.inbox-item .about.is-empty::before { display: none; }
.inbox-item .preview {
  grid-column: 1;
  grid-row: 3;
  color: var(--ink-soft);
  font-size: 14px;
  /* Die Vorschau ist schon in PHP gekuerzt; das hier faengt lange Woerter ab. */
  overflow-wrap: anywhere;
}
.inbox-item .preview .from-me { color: var(--ink-faint); }
/* Die ganze Zeile ist klickbar - ohne sichtbare Schaltflaeche sah sie aber aus
   wie ein Absatz. Der Knopf reagiert mit der Zeile, weil er nur mitgefaerbt
   wird; angeklickt wird immer die Zeile. */
.inbox-item .btn { grid-column: 2; grid-row: 3; justify-self: end; align-self: end; pointer-events: none; }
.inbox-item:hover .btn { border-color: var(--line-hover); background: var(--sand-100); }
@media (max-width: 560px) {
  .inbox-item { grid-template-columns: 1fr; }
  .inbox-item .who   { grid-row: 1; }
  .inbox-item .when  { grid-column: 1; grid-row: 2; text-align: left; }
  .inbox-item .about { grid-row: 3; }
  .inbox-item .preview { grid-row: 4; }
  .inbox-item .btn { grid-column: 1; grid-row: 5; justify-self: start; margin-top: var(--space-2); }
}

/* Im Verlauf steht unter der Ueberschrift, um welches Buch es geht - dieselbe
   Angabe und dasselbe Zeichen wie in der Uebersicht, damit beide Seiten
   zusammengehoeren. Der Titel ist zugleich der Verweis auf das Angebot, deshalb
   traegt er die Farbe der Textlinks und das Zeichen folgt ihr. */
.thread-about {
  display: inline-flex;
  align-items: start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: 15px;
  font-weight: 600;
}
.thread-about::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 3px;
  background-color: currentColor;
  -webkit-mask: url("/Dateien/gfx/redesign/icon-books.svg") center / 16px 16px no-repeat;
  mask: url("/Dateien/gfx/redesign/icon-books.svg") center / 16px 16px no-repeat;
}

/* Ein Hinweis, der wirklich auffallen soll - kräftigerer Rahmen als .callout
   und ein Zeichen davor. */
.callout.is-warning {
  background: var(--orange-soft);
  border: 2px solid var(--line-sell);
  color: var(--orange-deep);
}
.callout.is-warning b { color: var(--orange-deep); }
.callout.has-icon { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-4); align-items: start; }
.callout.has-icon > div { min-width: 0; color: var(--ink-muted); }
.callout.has-icon::before {
  content: "";
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("/Dateien/gfx/redesign/icon-alert.svg") center / 24px 24px no-repeat;
  mask: url("/Dateien/gfx/redesign/icon-alert.svg") center / 24px 24px no-repeat;
}

/* ---------------------------------------------------------------------------
   Grid and flex children default to min-width:auto, which means they refuse to
   shrink below their content. A wide table inside .prose therefore stretched its
   whole column and pushed the page into sideways scrolling, defeating the
   .table-scroll wrapper. These let the columns actually shrink.
   --------------------------------------------------------------------------- */
.content-layout > * { min-width: 0; }
.offer-detail-grid > * { min-width: 0; }
.book-header > * { min-width: 0; }
.result > * { min-width: 0; }
.listing > * { min-width: 0; }
.prose { min-width: 0; }
.table-scroll { max-width: 100%; }

/* ---------------------------------------------------------------------------
   Motion and focus
   --------------------------------------------------------------------------- */

/* The prototype set scroll-behavior unconditionally. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* One visible focus ring for everything reachable by keyboard. The pill buttons
   need an offset ring rather than an outline hugging the border radius. */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.btn:focus-visible, .tabs a:focus-visible, .nav a:focus-visible { border-radius: var(--radius-pill); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.search input[type="search"]:focus-visible { outline-offset: 0; }

/* ---------------------------------------------------------------------------
   Notice variants.

   The old design distinguished box_success, box_error and box_warning by colour.
   The first pass of this redesign rendered all three as the same neutral card,
   so a confirmation looked identical to a failure. These restore the
   distinction in the redesign's own palette.
   --------------------------------------------------------------------------- */

.notice.is-success { background: var(--teal-soft); border-color: var(--teal-line); }
.notice.is-success h2 { color: var(--teal); }

.notice.is-error { background: var(--danger-soft); border-color: var(--danger-line); }
.notice.is-error h2 { color: var(--danger); }

.notice.is-warning { background: var(--orange-soft); border-color: var(--line-sell); }
.notice.is-warning h2 { color: var(--orange-deep); }

/* ---------------------------------------------------------------------------
   Small layout helpers.

   These replace inline style attributes that were repeated across roughly thirty
   files: a section whose heading block already supplied the top padding, and the
   gap between stacked blocks in a page body.
   --------------------------------------------------------------------------- */
.block.is-tight { padding-top: 0; }
.gap-above { margin-top: var(--space-4); }
.gap-below { margin-bottom: var(--space-4); }
.gap-above-lg { margin-top: var(--space-6); }

/* A heading inside a form card. Two pages were setting this inline. */
.form-card > h2 {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: -.03em;
  margin-bottom: var(--space-4);
}
.form-card > ol { margin: 0 0 var(--space-5) var(--space-5); color: var(--ink-muted); font-size: 14.5px; }
.form-card > ol li { margin-top: var(--space-1); }

/* The holidays table has seven columns of dates and cannot fit a phone. Its
   markup is inherited from the original page and has no wrapper to scroll
   inside, so at narrow widths the table itself becomes the scroll container. */
@media (max-width: 760px) {
  .prose table.ferien { display: block; overflow-x: auto; max-width: 100%; }
  .prose table { max-width: 100%; }
}

/* ---------------------------------------------------------------------------
   Hover fuer Textlinks.

   Schaltflaechen, Navigation, Reiter und Seitenzahlen hatten von Anfang an
   einen Hover-Zustand, die Textlinks im Inhalt aber nicht - sie sahen im
   Ruhezustand genauso aus wie unter dem Zeiger. Einheitlich: unterstrichen und
   eine Spur waermer.
   --------------------------------------------------------------------------- */
.prose a:hover,
.prose ul.link-list a:hover,
.callout a:hover,
.check a:hover,
.empty-state a:hover,
.form-links a:hover,
.form-note a:hover,
.links a:hover,
.back-link a:hover,
.spec a:hover,
.listing .who a:hover,
.msg-head a:hover,
.rating-item .who a:hover,
.rating-item .trade a:hover,
.rating-item .reply a:hover {
  color: var(--orange-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}


.btn.with-icon::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--btn-icon) center / 18px 18px no-repeat;
  mask: var(--btn-icon) center / 18px 18px no-repeat;
}
.btn.icon-offers   { --btn-icon: url("/Dateien/gfx/redesign/icon-tag.svg"); }
.btn.icon-sellbook { --btn-icon: url("/Dateien/gfx/redesign/icon-sell.svg"); }

/* Kleine Fenster (window.open): weniger Rand als eine volle Seite, und der
   Inhalt darf die ganze Breite nutzen. */
body.is-popup { background: var(--paper); }
body.is-popup .block { padding: var(--space-5) 0 var(--space-4); }
body.is-popup .wrap { width: calc(100% - var(--space-5)); }
body.is-popup .page-head h1 { font-size: 22px; }
body.is-popup .back-link { padding-top: var(--space-5); }

/* ---------------------------------------------------------------------------
   Fortschritt der Registrierung.

   Dieselben Karten wie "So funktioniert's" auf der Startseite, nur mit einem
   Zustand je Schritt: erledigt, aktuell, noch offen. Die Symbole sind Masken,
   damit der aktuelle Schritt sein Zeichen weiss auf Orange tragen kann.
   --------------------------------------------------------------------------- */
.how-steps.is-progress { margin-top: var(--space-4); }
.how-steps.is-progress > li:not(.how-arrow) { align-items: center; padding: var(--space-4); gap: var(--space-3); }
.how-steps.is-progress h3 { font-size: 16px; }
.how-steps.is-progress .muted { font-size: 14px; }

.how-icon.icon-key      { --step-icon: url("/Dateien/gfx/redesign/icon-key.svg"); }
.how-icon.icon-user     { --step-icon: url("/Dateien/gfx/redesign/icon-user.svg"); }
.how-icon.icon-envelope { --step-icon: url("/Dateien/gfx/redesign/icon-envelope.svg"); }
.how-steps.is-progress .how-icon::before {
  content: "";
  width: 26px;
  height: 26px;
  background-color: currentColor;
  -webkit-mask: var(--step-icon) center / 26px 26px no-repeat;
  mask: var(--step-icon) center / 26px 26px no-repeat;
}

/* Erledigt: gruener Haken statt des Symbols. */
.how-steps.is-progress > li.is-done .how-icon { background: var(--teal-soft); color: var(--teal); }
.how-steps.is-progress > li.is-done .how-icon::before {
  --step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 5 5 9-10'/%3E%3C/svg%3E");
}
.how-steps.is-progress > li.is-done h3 { color: var(--ink-soft); }

/* Aktuell: orange Scheibe, kraeftigerer Rahmen, damit klar ist, wo man steht. */
.how-steps.is-progress > li.is-current {
  border-color: var(--orange);
  box-shadow: var(--shadow);
}
.how-steps.is-progress > li.is-current .how-icon { background: var(--orange); color: var(--white); }

/* Noch offen: blasser als die anderen beiden. */
.how-steps.is-progress > li:not(.is-done):not(.is-current):not(.how-arrow) { color: var(--ink-faint); }
.how-steps.is-progress > li:not(.is-done):not(.is-current):not(.how-arrow) h3 { color: var(--ink-faint); }
.how-steps.is-progress > li:not(.is-done):not(.is-current):not(.how-arrow) .how-icon { color: var(--ink-faint); }

/* Ein kurzes Eingabefeld mit seiner Schaltflaeche daneben statt darunter - die
   Beschriftung bleibt ueber dem Feld, beide stehen unten buendig und rutschen
   auf schmalen Schirmen untereinander. */
.field-row { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); margin-top: var(--space-4); }
.field-row > .field { margin: 0; width: 220px; }
.field-row .btn { height: var(--control-height); }