/* What a site of seven pages needs that a one-pager did not.

   Every selector here carries the .taste prefix. That is not decoration: this
   project's own gpt-taste.css and legacy-diagram.css restate rules as
   ".taste .x" specifically so they outrank the base theme, and they are meant
   to. A plain ".x" in this file would load last and still lose the argument,
   which is a confusing way to spend an afternoon. */

/* ---------------------------------------------------------------------------
   1. Things that used to be divs and are now links.

   The four area cards were <div onclick>; the wordmark was a <div>; the two
   language buttons were <button onclick="setLang()">. All three are now the
   element that means "go somewhere", which fixes middle-click, new-tab, the
   keyboard and what a screen reader announces. It also hands them the browser's
   default link styling, which has to be taken straight back off.
   -------------------------------------------------------------------------- */
/* Only the underline comes off. My first version also set color:inherit on all
   three, which was wrong twice over: the wordmark and the inactive language
   button both have their own colour rule, and inheriting instead handed them
   the dark ink of the bar they sit in — navy on navy, invisible, measured at
   rgb(19,26,34) against a rgba(12,20,28,.95) background. Only the cards want
   to inherit, because their text colour belongs to the card. */
.taste a.console-mod,
.taste a.logo,
.taste a.lang-btn{
  text-decoration:none;
}
.taste a.console-mod{display:block;color:inherit;}
.taste a.logo{display:flex;align-items:center;gap:9px;cursor:pointer;}

/* The language switch keeps the pill it had as a button. */
.taste .lang-btn{
  display:inline-block;
  line-height:1;
  text-align:center;
}
.taste a.lang-btn.active{background:var(--amber);color:var(--ink);}

/* The card's own focus ring, because a link that can be tabbed to has to show
   where it is. The cards sit on dark ink, so the ring is amber rather than the
   browser's blue. */
.taste a.console-mod:focus-visible,
.taste .footer-nav a:focus-visible,
.taste .links a:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:-3px;
}

/* ---------------------------------------------------------------------------
   2. The current page in the menu.

   On the one-pager an IntersectionObserver worked out which section you were
   looking at and lit the matching link. There are no sections to observe
   across documents, so the build writes aria-current onto the link and this
   rule reads it. One source of truth, no script, correct before first paint.
   -------------------------------------------------------------------------- */
.taste .links a[aria-current="page"]{color:#fff;}
.taste .mobile-menu a[aria-current="page"]{color:var(--amber);}

/* ---------------------------------------------------------------------------
   3. The closing band.

   Six pages end with it, so it has to be quiet. The contact page has the full
   amber section and does not get this.
   -------------------------------------------------------------------------- */
.taste .band{
  background:#0f1a24;
  border-top:1px solid #ffffff14;
  padding:72px 0;
  text-align:center;
}
.taste .band-inner{max-width:620px;margin:0 auto;}
.taste .band h2{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(28px,3.4vw,40px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.01em;
  color:#fff;
  margin:0 0 12px;
  text-transform:none;
}
.taste .band p{
  font-size:15px;
  line-height:1.65;
  color:#9fadb9;
  margin:0 0 28px;
}
.taste .band-actions{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}

/* ---------------------------------------------------------------------------
   4. The footer now carries the site's own map.
   -------------------------------------------------------------------------- */
.taste .footer-nav{
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
  justify-content:center;
}
.taste .footer-nav a{
  color:#a8b6c1;
  text-decoration:none;
  letter-spacing:.03em;
  transition:color .18s ease;
}
.taste .footer-nav a:hover{color:#fff;}

/* ---------------------------------------------------------------------------
   5. The four areas, as a teaser on the home page.

   The same cream as the services page, and for the same reason: this section
   holds the .console component, whose cards are #e1dcd3 with ink text and were
   drawn against that background. Left without one, the section fell through to
   the dark body and its heading — ink, correctly, for a cream section — was
   invisible. The colour is #leistungen's own, not a new one.
   -------------------------------------------------------------------------- */
.taste .teaser{background:#f7f4ef;}
.taste .teaser-through{
  margin:40px 0 0;
  text-align:center;
}

/* ---------------------------------------------------------------------------
   6. The reports page.

   The documents were three levels down on the one-pager: inside a module
   chapter, behind a collapsed panel, on a section ten screens from the top.
   Here they are the page. The .module-chapter class has to stay on the wrapper
   because the lightbox binds to ".module-chapter .doc-card" — but its
   full-section padding does not belong on a page that is nothing else.
   -------------------------------------------------------------------------- */
.taste .reports-chapter{
  padding:0;
  margin:40px 0 0;
  border:none;
  background:none;
}
/* Six documents across the full page width fell into five columns and one
   orphan on a second row. Three columns make two even rows of three, and give
   each preview enough width to be worth looking at — which is the only reason
   the previews are there. */
.taste .reports-chapter .doc-grid{
  margin-top:0;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
@media(max-width:900px){ .taste .reports-chapter .doc-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:620px){ .taste .reports-chapter .doc-grid{grid-template-columns:1fr;} }
.taste .reports-through{
  margin:40px 0 0;
  font-size:13.5px;
  color:#8d9aa6;
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  align-items:baseline;
}
.taste .reports-through a{
  color:var(--amber);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .18s ease;
}
.taste .reports-through a:hover{border-bottom-color:var(--amber);}

@media(max-width:620px){
  .taste .band{padding:56px 0;}
  .taste .band-actions .btn{width:100%;justify-content:center;}
  .taste .footer-nav{gap:4px 14px;}
}