/* Startseite · Richtung A */
.held { border-bottom: 1px solid var(--linie); background-image: linear-gradient(var(--raster) 1px, transparent 1px), linear-gradient(90deg, var(--raster) 1px, transparent 1px); background-size: 48px 48px; }
.held-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-top: 88px; padding-bottom: 96px; }
.held-text { display: flex; flex-direction: column; gap: 22px; }
.held h1 { margin: 0; font-size: clamp(36px, 5.2vw, 58px); line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; }
.einleitung { margin: 0; font-size: 19px; color: var(--leise); max-width: 34em; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; }
.merkmale { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-family: var(--mono); font-size: 13px; color: var(--leise); }
.merkmale li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--oliv); vertical-align: 1px; }

/* Geräte-Darstellung: echte Oberfläche als Grafik, keine Fotos */
.geraete { position: relative; padding-bottom: 28px; }
.laptop { border: 1px solid var(--linie-stark); border-radius: 10px; background: var(--weiss); box-shadow: 0 24px 48px rgba(15,42,71,0.10); overflow: hidden; margin-right: 64px; }
.laptop-leiste { height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.laptop-leiste i { width: 9px; height: 9px; border-radius: 50%; background: var(--linie-stark); }
.laptop-leiste span { margin-left: 10px; font-family: var(--mono); font-size: 11px; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.laptop-inhalt { display: flex; min-height: 330px; font-size: 12px; }
.menue { width: 118px; flex: 0 0 auto; border-right: 1px solid var(--linie); padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; color: var(--leise); }
.menue strong { color: var(--tinte); font-size: 13px; }
.menue .aktiv { color: var(--blau); font-weight: 600; }
.plan { flex: 1; min-width: 0; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.plan-kopf { display: flex; justify-content: space-between; }
.plan-kopf span { font-family: var(--mono); color: var(--leise); }
.plan-raster { display: grid; grid-template-columns: 66px repeat(5, minmax(0, 1fr)); gap: 4px; font-size: 10px; }
.plan-raster .tag, .plan-raster .team { color: var(--leise); }
.block { background: var(--blau-hell); border-left: 3px solid var(--blau); padding: 6px; border-radius: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.block.oliv { background: var(--oliv-hell); border-left-color: var(--oliv); }
.block.frei { background: var(--flaeche); border: 1px dashed var(--linie-stark); color: var(--leise); }
.s2 { grid-column: span 2; } .s3 { grid-column: span 3; } .s5 { grid-column: span 5; }
.ki { margin-top: 10px; border: 1px solid var(--linie); border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 11px; }
.ki-kennung { font-family: var(--mono); color: var(--oliv); font-size: 10px; letter-spacing: 0.06em; }
.ki-knopf { align-self: flex-start; background: var(--tinte); color: var(--weiss); padding: 4px 10px; border-radius: 3px; }
.leise { color: var(--leise); }
.mitte { text-align: center; }
.handy { position: absolute; right: 0; bottom: 0; width: 172px; border: 6px solid var(--tinte); border-radius: 26px; background: var(--weiss); box-shadow: 0 20px 40px rgba(15,42,71,0.18); padding: 18px 12px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 11px; }
.handy strong { font-size: 12px; }
.einsatz { border: 1px solid var(--linie); border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.einsatz span { color: var(--leise); }
.einchecken { background: var(--oliv); color: var(--weiss); text-align: center; padding: 8px; border-radius: 6px; font-weight: 600; }

/* Abschnitte */
.abschnitt { padding: 88px 0; border-bottom: 1px solid var(--linie); }
.abschnitt.flaeche { background: var(--flaeche); }
.abschnitt-kopf { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px 40px; margin-bottom: 40px; }
.abschnitt-kopf h2, .stapel h2 { margin: 10px 0 0; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.15; font-weight: 600; }
.neben { margin: 0; max-width: 28em; color: var(--leise); }
.zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.zwei.oben { align-items: start; }
.stapel { display: flex; flex-direction: column; gap: 18px; }
.stapel p { margin: 0; }

.gewerke { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--linie); border-left: 1px solid var(--linie); }
.gewerke a { display: flex; flex-direction: column; gap: 8px; min-height: 128px; padding: 26px 22px; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); color: var(--tinte); text-decoration: none; height: 100%; }
.gewerke a:hover { background: var(--blau-flaeche); }
.gewerke strong { font-size: 18px; font-weight: 600; }
.gewerke span { font-size: 15px; color: var(--leise); }
.gewerke a.alle { background: var(--flaeche); color: var(--blau); }

.liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.liste li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.status { font-family: var(--mono); font-size: 13px; color: var(--oliv); white-space: nowrap; }
.ansicht { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ansicht a { display: block; border: 1px solid var(--linie-stark); border-radius: 8px; overflow: hidden; background: var(--weiss); box-shadow: 0 1px 2px rgba(15, 42, 71, .06), 0 12px 32px -16px rgba(15, 42, 71, .25); }
.ansicht a:hover { border-color: var(--blau); }
.ansicht a:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }
.ansicht img { display: block; width: 100%; height: auto; }
.ansicht figcaption { font-size: 14px; color: var(--leise); }
.ansichten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .42fr); gap: 28px; margin-top: 40px; align-items: start; }
.ansicht-handy a { border-radius: 18px; }
.ansichten-hinweis { font-family: var(--mono); font-size: 12px; color: var(--leise); margin-top: 20px; }
@media (max-width: 960px) { .ansichten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ansicht-handy { grid-column: 1 / -1; max-width: 240px; } }
@media (max-width: 560px) { .ansichten { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--tinte); }
.schritte li { padding: 28px 28px 0 0; display: flex; flex-direction: column; gap: 10px; }
.schritte .nr { font-family: var(--mono); font-size: 40px; line-height: 1; color: var(--blau); }
.schritte strong { font-size: 20px; }
.schritte span:last-child { color: var(--leise); }

.funktionen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.funktionen li { background: var(--weiss); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.funktionen strong { font-size: 19px; font-weight: 600; }
.funktionen li > span:last-child { color: var(--leise); }

.umschalter { display: inline-flex; border: 1px solid var(--tinte); border-radius: var(--radius); overflow: hidden; }
.umschalter button { font: inherit; font-size: 15px; min-height: 48px; padding: 0 18px; border: 0; background: var(--weiss); color: var(--tinte); cursor: pointer; }
.umschalter button[aria-pressed="true"] { background: var(--tinte); color: var(--weiss); }
.pakete { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--linie); }
.pakete li { padding: 32px; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--linie); }
.pakete li:last-child { border-right: 0; }
.pakete li.hervor { background: var(--flaeche); box-shadow: inset 0 3px 0 var(--oliv); }
.pakete strong { font-size: 22px; }
.pakete li > span:nth-child(2) { color: var(--leise); }
.preis { font-size: 26px; font-weight: 600; padding-top: 12px; margin-top: auto; }
.art { font-size: 14px; color: var(--leise); }
.hinweis { margin: 18px 0 0; color: var(--leise); font-size: 15px; max-width: 60em; }

.dunkel { background: var(--tinte); color: var(--weiss); padding: 88px 0; }
.dunkel .kennung { color: var(--oliv-auf-dunkel); }
.dunkel p { color: #C7D3E0; font-size: 18px; }
.termine { display: flex; flex-direction: column; gap: 12px; }
.termine a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; border: 1px solid #3A5675; border-radius: var(--radius); padding: 16px 20px; color: var(--weiss); text-decoration: none; }
.termine a:hover { background: #163A60; color: var(--weiss); }
.termine a.oliv { border-color: var(--oliv-auf-dunkel); }

@media (max-width: 960px) {
  .held-raster, .zwei { grid-template-columns: minmax(0, 1fr); }
  .held-raster { padding-top: 48px; padding-bottom: 64px; gap: 40px; }
  .gewerke { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .funktionen, .pakete, .schritte { grid-template-columns: minmax(0, 1fr); }
  .pakete li { border-right: 0; border-bottom: 1px solid var(--linie); }
  .pakete li:last-child { border-bottom: 0; }
  .abschnitt, .dunkel { padding: 64px 0; }
}
@media (max-width: 560px) {
  .gewerke { grid-template-columns: minmax(0, 1fr); }
  .gewerke a { min-height: 0; padding: 18px; }
  .laptop { margin-right: 40px; }
  .menue { display: none; }
  .handy { width: 140px; }
  .knopfreihe .knopf { width: 100%; }
  .umschalter { width: 100%; } .umschalter button { flex: 1; padding: 0 8px; font-size: 14px; }
}