/* Leihnachbar website — components & layout, built on the design-system tokens.
   Everything here uses var(--token)s from tokens.css so it tracks the design system. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:var(--text-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--text-link);text-decoration:none}
h1,h2,h3,h4,p{margin:0}
/* Field groups use <fieldset>/<legend> for their semantics, not for the
   browser's default inset box — which drew a stray border around the
   accessories group on the listing forms. */
fieldset{margin:0;padding:0;border:0;min-width:0}
legend{padding:0;display:block}
::selection{background:var(--clay-200);color:var(--warm-900)}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-xs)}

.container{max-width:var(--layout-max);margin:0 auto;padding:0 var(--layout-gutter)}
/* Icons must sit ON the line of the text they belong to. `display:block` made
   every icon dropped into flowing text (hints, meta lines, headings) claim a
   line of its own; inline-block still blockifies inside the flex rows that make
   up most of the UI, so nothing there changes. */
.ic{display:inline-block;vertical-align:-0.18em;flex:none}
.section{padding:var(--space-12) 0}
.section-white{background:var(--white)}
.section-page{background:var(--surface-page)}
.section-title{font:var(--text-display-3);color:var(--ink-900);margin:0 0 var(--space-8)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-8)}
.section-head .section-title{margin:0}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{--_bg:var(--action-primary);--_fg:var(--text-inverse);--_bd:var(--action-primary);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--radius-pill);font-family:var(--font-sans);font-weight:600;letter-spacing:.005em;
  white-space:nowrap;cursor:pointer;text-decoration:none;border:1px solid var(--_bd);
  background:var(--_bg);color:var(--_fg);box-shadow:var(--shadow-sm);
  transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.btn:active{transform:translateY(1px)}
/* An anchor styled as a button is still an anchor: the base `a:hover` rule
   (0,1,1) outranks `.btn` (0,1,0) and was repainting the label link-brown on
   the button's dark fill — white-on-clay dropped to 2.06:1 on hover. Restore
   the button's own foreground and keep the link underline off it. */
.btn:hover{color:var(--_fg);border-bottom-color:transparent}
.btn-sm{height:var(--control-h-sm);padding:0 14px;font-size:13px;gap:6px}
.btn-md{height:var(--control-h-md);padding:0 18px;font-size:15px}
.btn-lg{height:var(--control-h-lg);padding:0 26px;font-size:17px;gap:10px}
.btn-primary{--_bg:var(--action-primary);--_fg:var(--text-inverse);--_bd:var(--action-primary)}
.btn-primary:hover{--_bg:var(--action-primary-hover);--_bd:var(--action-primary-hover)}
/* White on clay-500 is only 3.21:1, and this is the page's main call to action.
   Rest sits on clay-600 (4.56:1) and hover deepens to clay-700; the accent tone
   itself is untouched everywhere it is not carrying white text. */
.btn-accent{--_bg:var(--clay-600);--_fg:#fff;--_bd:var(--clay-600)}
.btn-accent:hover{--_bg:var(--clay-700);--_bd:var(--clay-700)}
.btn-secondary{--_bg:var(--surface-card);--_fg:var(--ink-900);--_bd:var(--border-default);box-shadow:var(--shadow-xs)}
.btn-secondary:hover{--_bg:var(--paper-100);--_bd:var(--ink-900);--_fg:var(--ink-900)}
.btn-ghost{--_bg:transparent;--_fg:var(--ink-900);--_bd:transparent;box-shadow:none}
.btn-ghost:hover{--_bg:var(--ink-100)}
.btn-ghost.on-dark{--_fg:#fff;--_bd:var(--ink-600)}
.btn-ghost.on-dark:hover{--_bg:rgba(255,255,255,.08)}

/* ── Badge / Tag ─────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius-pill);
  font:600 12px/1.4 var(--font-sans);letter-spacing:.01em;white-space:nowrap}
.badge .ic{stroke-width:2}
.badge-sm{gap:4px;padding:2px 8px;font-size:11px}
.badge-neutral{background:var(--warm-100);color:var(--warm-700)}
.badge-brand{background:var(--surface-brand-soft);color:var(--ink-900)}
.badge-accent{background:var(--clay-100);color:var(--clay-700)}
.tag{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border:1px solid var(--border-default);
  border-radius:var(--radius-pill);font:500 14px/1 var(--font-sans);color:var(--ink-900);background:var(--surface-card);
  cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
.tag:hover{background:var(--ink-100)}

/* ── Card ────────────────────────────────────────────────── */
.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.card-flat{box-shadow:none}
.card-interactive{transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-standard);cursor:pointer}
.card-interactive:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:var(--ink-200)}

/* ── Header ──────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:40;background:rgba(250,246,239,.86);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border-subtle)}
.site-header .bar{height:72px;display:flex;align-items:center;gap:var(--space-6)}
.site-header .logo{height:34px;width:auto;display:block}
.site-menu{display:flex;flex:1;align-items:center;gap:var(--space-6);min-width:0}
.site-nav{display:flex;gap:var(--space-7)}
.site-nav a{font:500 15px/1 var(--font-sans);color:var(--text-body);white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent}
.site-nav a:hover{color:var(--ink-900);border-bottom-color:var(--clay-400)}
.menu-actions{margin-left:auto;display:flex;align-items:center;gap:var(--space-4)}
.nav-toggle{display:none;background:none;border:1px solid var(--border-default);border-radius:var(--radius-sm);
  width:42px;height:42px;align-items:center;justify-content:center;color:var(--ink-900);cursor:pointer;flex:none}

/* ── Hero ────────────────────────────────────────────────── */
.hero{background:var(--gradient-page);padding:var(--space-10) 0 var(--space-12)}
.hero .intro{max-width:760px}
.hero h1{font:var(--text-display-1);letter-spacing:var(--tracking-tight);color:var(--ink-900);margin:var(--space-6) 0 var(--space-5);overflow-wrap:break-word;hyphens:auto}
.hero .lead{font:var(--text-body-lg);color:var(--text-muted);max-width:620px;text-wrap:pretty}
.searchbar{margin-top:var(--space-9);background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-lg);padding:var(--space-5);display:flex;gap:var(--space-4);align-items:center}
/* The icon and the geo button are affordances of the field beside them, not
   separate controls, so they sit closer to it than the bar's own gap: it reads
   as one field and it is where the width the placeholders were short of comes
   from. */
.searchbar .lead-ic{color:var(--text-subtle);display:flex;margin-right:-6px}
.searchbar .loc-btn{margin-left:-6px}
.searchbar input{flex:1;min-width:0;border:none;outline:none;background:transparent;font:400 18px/1.4 var(--font-sans);color:var(--text-body)}
/* The bar is the page's first control and reads as the width of the page, so it
   runs the full container instead of stopping short of the sections below it.
   The two placeholders are what that width is for, and at the container's cap
   they ask for all of it and nothing more, so an even split is what cut
   "Stadtteil" off mid-word. Each field is based on the phrase it has to hold
   instead — the German wording, which is the longer of the two languages. Below
   the cap they shrink together and the location placeholder is the first to
   lose its tail; shortening that string is what would buy real headroom. */
.searchbar #taskInput{flex:1 1 430px}
.searchbar #locInput{flex:1 1 258px}
.searchbar .divider{width:1px;height:28px;background:var(--border-subtle);flex:none}
.searchbar .when{display:inline-flex;align-items:center;gap:6px;font:500 15px/1 var(--font-sans);color:var(--text-muted);white-space:nowrap}
.tasks{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6);align-items:center}
.tasks .label{font:var(--text-caption);color:var(--text-subtle);margin-right:4px}

/* ── How it works ────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
.step{background:var(--paper-000);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-6)}
.step .top{display:flex;align-items:center;gap:10px;margin-bottom:var(--space-5)}
.step .step-ic{width:40px;height:40px;border-radius:var(--radius-pill);background:var(--clay-100);color:var(--clay-700);display:grid;place-items:center}
.step .num{font:var(--text-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--text-subtle)}
.step h3{font:var(--text-h4);color:var(--text-strong);margin:0 0 6px}
.step p{font:var(--text-body-sm);color:var(--text-muted);text-wrap:pretty}

/* ── Categories ──────────────────────────────────────────── */
/* Sixteen of them. Every card has the same 4:3 tile on top — the category's
   illustration once it has been drawn, its icon on the illustration's ground
   until then — so a half-illustrated set still lines up row by row. */
.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5)}
.photo{background:var(--paper-100);display:grid;place-items:center;gap:8px;color:var(--warm-400);border:1px dashed var(--paper-300)}
.cat{display:flex;flex-direction:column;overflow:hidden}
.cat .cat-art{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--clay-100);border-bottom:1px solid var(--border-subtle)}
.cat .cat-art-icon{display:grid;place-items:center;color:var(--clay-700)}
.cat .body{min-width:0;padding:var(--space-4) var(--space-5) var(--space-5)}
.cat h3{font:var(--text-h4);color:var(--text-strong);margin:0 0 4px}
.cat p{font:var(--text-body-sm);color:var(--text-muted);margin:0;text-wrap:pretty}

/* ── Trust band ──────────────────────────────────────────── */
.trust{background:var(--ink-900);color:var(--white);padding:var(--space-12) 0}
.trust .grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-11);align-items:center}
.trust h2{font:var(--text-display-2);letter-spacing:var(--tracking-tight);color:var(--white);margin:0 0 var(--space-5)}
.trust .lead{font:var(--text-body-lg);color:var(--ink-300);margin:0 0 var(--space-8);max-width:460px;text-wrap:pretty}
.trust .actions{display:flex;gap:var(--space-4);flex-wrap:wrap}
.trust .points{display:flex;flex-direction:column;gap:var(--space-4)}
.trust .point{background:rgba(255,255,255,.06);border:1px solid var(--ink-700);border-radius:var(--radius-lg);
  padding:var(--space-5);display:flex;gap:var(--space-5);align-items:flex-start}
.trust .point .ic{color:var(--clay-400);margin-top:2px}
.trust .point .t{font:var(--text-h4);color:var(--white);margin-bottom:3px}
.trust .point .b{font:var(--text-body-sm);color:var(--ink-300)}

/* ── Footer ──────────────────────────────────────────────── */
.site-footer{background:var(--ink-900);color:var(--ink-300);padding:var(--space-11) 0 var(--space-8)}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--space-8)}
.footer-brand .logo{height:30px;width:auto;margin-bottom:var(--space-5)}
.footer-brand p{font:var(--text-body-sm);max-width:250px;color:var(--ink-300)}
.footer-col .h{font:var(--text-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:#9ab3cf;margin-bottom:var(--space-5)}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.footer-col a{font:400 14px/1.4 var(--font-sans);color:var(--ink-300)}
.footer-col a:hover{color:var(--white)}
.footer-bottom{margin-top:var(--space-10);padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;font:var(--text-caption);color:#9ab3cf}
/* The legal links never got a colour for the dark ground, so they inherited the
   page's link brown — 2.96:1 on navy. Match the rest of the footer. */
.footer-bottom a{color:var(--ink-300)}
.footer-bottom a:hover{color:var(--white)}

/* ── Toast (search feedback) ─────────────────────────────── */
.toast-wrap{position:fixed;right:24px;bottom:24px;z-index:80;display:flex;flex-direction:column;gap:10px}
.toast{display:flex;gap:12px;align-items:flex-start;background:var(--surface-card);border:1px solid var(--border-subtle);
  border-left:3px solid var(--status-success);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  padding:14px 16px;max-width:360px;animation:lnb-rise var(--dur-slow) var(--ease-out) both}
.toast .ic{color:var(--status-success);margin-top:1px}
.toast .t{font:var(--text-label);color:var(--text-strong)}
.toast .b{font:var(--text-body-sm);color:var(--text-muted);margin-top:2px}
.toast .close{margin-left:6px;background:none;border:none;color:var(--text-subtle);cursor:pointer;padding:2px}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:960px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .cats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .trust .grid{grid-template-columns:1fr;gap:var(--space-8)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-8)}
}
/* Header collapses to a hamburger drawer once the inline nav + actions
   no longer fit comfortably on one row. */
@media (max-width:860px){
  .nav-toggle{display:inline-flex;margin-left:auto}
  .site-menu{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface-card);border-bottom:1px solid var(--border-subtle);box-shadow:var(--shadow-lg);
    padding:var(--space-4) var(--layout-gutter) var(--space-5);max-height:calc(100dvh - 72px);overflow-y:auto}
  .site-header.open .site-menu{display:flex}
  .site-nav{flex-direction:column;gap:0}
  .site-nav a{padding:14px 2px;border-bottom:1px solid var(--border-subtle);border-radius:0}
  .site-nav a:hover{border-bottom-color:var(--border-subtle)}
  .site-nav a.is-active{border-bottom-color:var(--border-subtle);color:var(--clay-600)}
  .menu-actions{margin-left:0;flex-direction:column;align-items:stretch;gap:var(--space-3);padding-top:var(--space-4)}
  .menu-actions .btn,.menu-actions .inline-form,.menu-actions .inline-form .btn{width:100%;justify-content:center}
}
@media (max-width:720px){
  .searchbar{flex-wrap:wrap}
  .searchbar .when,.searchbar .divider{display:none}
  .searchbar .btn{width:100%}
  /* The hero now asks for an item AND a location. Side by side on a phone that
     leaves two fields showing about six characters each, so the item takes a
     row of its own and the location shares the next one with the geo button.
     The leading icons go: at this width they cost a line each and the
     placeholders already say what the fields are. */
  .searchbar .lead-ic{display:none}
  .searchbar #taskInput{flex:1 0 100%}
  .searchbar #locInput{flex:1 1 auto}
  .searchbar .loc-btn{flex:none}
  .cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-7)}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:560px){
  .container{padding:0 20px}
  /* Two columns leave German compounds like "Schneideplotter" nowhere to go,
     and sixteen full-width tiles would be four screens, so on a phone the tile
     shrinks to a thumbnail beside the text. */
  .cats{grid-template-columns:1fr;gap:var(--space-3)}
  .cat{flex-direction:row;align-items:center}
  .cat .cat-art{width:112px;flex:none;border-bottom:none;border-right:1px solid var(--border-subtle)}
  .cat .body{padding:var(--space-3) var(--space-4)}
  /* The example devices wrapped to two or three lines beside the thumbnail and
     made some tiles taller than others; the name and the picture are enough. */
  .cat p{display:none}
  .hero h1{font:var(--text-display-2);letter-spacing:var(--tracking-tight)}
  .hero{padding:var(--space-8) 0 var(--space-10)}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}

/* The marketplace disclosure above the request button (§ 312l BGB): who the
   lender is, whether consumer law governs the rental, who performs it. */
.pc-disclosure { margin: 12px 0 4px; padding-top: 10px; border-top: 1px solid var(--border-subtle, #e6e1d8); }
.pc-disclosure .pc-note + .pc-note { margin-top: 4px; }

/* --- Timeline (/so-funktionierts) ------------------------------------------
   An ordered list read top to bottom as the days of one booking. The rail on
   the left and the dot per item are the only things a list does not do by
   itself; the text is the site's ordinary type. */
.timeline{list-style:none;margin:0;padding:0 0 0 28px;position:relative}
.timeline::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:var(--border-default)}
.timeline > li{position:relative;padding:0 0 var(--space-7)}
.timeline > li:last-child{padding-bottom:0}
.timeline > li::before{content:"";position:absolute;left:-26px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--clay-400);border:2px solid var(--paper-000);box-shadow:0 0 0 2px var(--border-default)}
.timeline-when{display:block;font:var(--text-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--text-subtle);margin-bottom:4px}
.timeline h3{margin:0 0 4px}
.timeline p{margin:0;color:var(--text-muted)}

/* --- Earnings examples (/vermieten, /vermieten/was-kann-ich-verdienen) -----
   A card per device: category overline, the device, its new price, the
   payout range large, the monthly arithmetic small and with its assumption. */
.earn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
.earn-card{padding:var(--space-6)}
.earn-cat{display:block;font:var(--text-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--text-subtle);margin-bottom:6px}
.earn-card h3{margin:0 0 4px;text-wrap:balance}
.earn-value{margin:0 0 var(--space-4);font:var(--text-body-sm);color:var(--text-muted)}
.earn-day{margin:0;font:var(--text-display-3);color:var(--clay-600);letter-spacing:var(--tracking-tight)}
.earn-day span{display:block;font:var(--text-body-sm);color:var(--text-muted);letter-spacing:0}
.earn-month{margin:var(--space-3) 0 0;font:var(--text-body-sm);color:var(--text-strong)}
.earn-calc{padding:var(--space-7);margin-top:var(--space-6)}
.earn-calc .field-row{margin-bottom:var(--space-5)}
.earn-out > div:last-child{border-bottom:0}
@media (max-width:960px){.earn-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.earn-grid{grid-template-columns:1fr}.earn-calc .field-row{grid-template-columns:1fr}}
.earn-grid.is-three{grid-template-columns:repeat(3,1fr)}
@media (max-width:960px){.earn-grid.is-three{grid-template-columns:1fr}}
#vermieten .hero-actions{margin-top:var(--space-6)}

/* --- Project pages: prose with cards in it ---------------------------------
   One narrow column; the listing grid inside it fits three cards. */
.proj-body > p{max-width:none}
.proj-steps{margin:0 0 var(--space-5);padding-left:1.4em;color:var(--warm-800)}
.proj-steps li{margin-bottom:var(--space-3);padding-left:4px}
.proj-steps li::marker{font-weight:700;color:var(--clay-600)}
.proj-days{display:flex;align-items:center;gap:8px;margin:0 0 var(--space-7);font:var(--text-body-sm);color:var(--text-muted)}
.proj-days .ic{color:var(--clay-600)}
.proj-none{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;padding:var(--space-5) var(--space-6);margin-bottom:var(--space-7)}
.proj-none p{margin:0;color:var(--text-muted)}
.proj-body .browse-grid{margin-bottom:var(--space-7)}
.proj-body .data-table tfoot th{font:var(--text-label);color:var(--text-strong);text-transform:none;letter-spacing:0;border-top:1px solid var(--border-default)}

/* --- Activity block (homepage, behind Support\Activity) ------------------- */
.activity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.activity-card{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.activity-where{font:var(--text-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--text-subtle)}
.activity-line{margin:0;color:var(--text-strong);text-wrap:pretty}
.activity-line a{color:var(--text-link);font-weight:600}
.activity-stars{display:inline-flex;gap:2px;color:var(--clay-500)}
.activity-stars .is-off{opacity:.25}
@media (max-width:960px){.activity-grid{grid-template-columns:1fr}}
.activity-stars .is-on{fill:currentColor}