/* style-extra.css
   New components added during the "modernize" pass.
   Deliberately kept SEPARATE from the original style.css so the
   original file stays untouched and this is easy to review or revert.
   Reuses the same variables (--bg, --accent, --line, --radius, etc.)
   defined in style.css, so it inherits the same look automatically. */

/* --- Make the burger/drawer trigger visible at every screen size,
   not just mobile as it was originally set up (style.css line ~230).
   This is the whole point of the sidebar redesign: works the same
   way whether you're on a phone or a desktop monitor. --- */
.nav-burger{ display:inline-flex !important; }

/* --- Clickable logo/brand block --- */
.brand-link{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:inherit;
}
.brand-link:hover .brandname{ color: var(--accent2); }

/* --- Page hero band: used at the top of every inner page
   (service pages, about, contact) so they all share one consistent
   "banner" look instead of just starting cold with an <h1> --- */
.page-hero{
  padding:56px 0 40px;
  border-bottom:1px solid var(--line);
  margin-bottom:48px;
}
.page-hero .eyebrow{
  color:var(--accent);
  font-weight:700;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.page-hero h1{
  font-size:clamp(32px,4vw,48px);
  line-height:1.1;
  margin:0 0 16px;
}
.page-hero .lead{
  color:var(--muted);
  font-size:18px;
  line-height:1.6;
  max-width:720px;
}

/* --- Feature row: alternating image + text blocks used on
   every service page to break up long text into readable chunks --- */
.feature-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:40px;
  align-items:center;
  margin:56px 0;
}
.feature-row.reverse{ direction: rtl; }
.feature-row.reverse > *{ direction: ltr; }
.feature-row img{
  width:100%;
  height:320px;
  object-fit:cover;
  border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--panel2); /* shows as a soft dark box if image is missing */
}
.feature-row h3{ margin-top:0; font-size:24px; }
.feature-row p{ color:var(--muted); line-height:1.65; }

@media (max-width: 820px){
  .feature-row{ grid-template-columns: 1fr; }
  .feature-row.reverse{ direction: ltr; }
}

/* --- Pill-style material/feature list, replaces plain <ul><li>
   with the same "chip" language already used in the hero trust row --- */
.pill-list{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  list-style:none;
  padding:0;
  margin:20px 0 0;
}
.pill-list li{
  padding:12px 16px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  font-size:14px;
}
.pill-list li strong{ color: var(--accent2); }

/* --- Numbered process steps as cards, replaces plain <ol> --- */
.steps-row{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap:18px;
  margin:24px 0 0;
}
.step-card{
  padding:20px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
.step-card .num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;height:32px;
  border-radius:50%;
  background: var(--accent);
  color:#1a1206;
  font-weight:800;
  margin-bottom:10px;
}
.step-card p{ margin:0; color:var(--muted); font-size:14px; line-height:1.5; }

/* --- Closing contact callout band, used at the bottom of every page --- */
.cta-band{
  margin:56px 0 0;
  padding:32px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background: radial-gradient(600px 300px at 20% -20%, rgba(240,138,36,.18), transparent 60%), var(--panel);
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  align-items:center;
  justify-content:space-between;
}
.cta-band .addr{ color:var(--muted); font-size:15px; line-height:1.6; }

/* --- Services hub grid (the /leistungen/ and /services/ overview pages) --- */
.hub-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap:20px;
  margin-top:24px;
}
.hub-card{
  padding:24px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
}
.hub-card img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:16px;
  background: var(--panel2);
}
.hub-card h3{ margin:0 0 8px; }
.hub-card p{ color:var(--muted); font-size:14px; margin:0 0 16px; }