/* seite.css — macht das UI-Kit (auf 1280 px entworfen) auf jeder Bildschirmgroesse brauchbar.
   Das Design System bleibt unangetastet; hier steht nur, was sich verschiebt, wenn es eng wird.
   Die Raster sind beim Bauen von inline-Angaben auf diese Klassen umgestellt worden. */

.raster-2      { display:grid; grid-template-columns:1fr 1fr }
.raster-3      { display:grid; grid-template-columns:repeat(3,1fr) }
.raster-4      { display:grid; grid-template-columns:repeat(4,1fr) }
.raster-5      { display:grid; grid-template-columns:repeat(5,1fr) }
.raster-preise { display:grid; grid-template-columns:1.6fr 1fr 1fr }

/* ---- Tablet und kleiner Laptop ---- */
@media (max-width: 1020px){
  .raster-4, .raster-5 { grid-template-columns:repeat(2,1fr) }
  .raster-preise       { grid-template-columns:1fr 1fr }
}

/* ---- Hochkant-Tablet ---- */
@media (max-width: 820px){
  .raster-3      { grid-template-columns:repeat(2,1fr) }
  .raster-2      { grid-template-columns:1fr; gap:26px !important }
  .raster-preise { grid-template-columns:1fr }
  /* Portraet unter den Text statt daneben */
  #ueber img { max-width:340px; margin:0 auto }
}

/* ---- Handy ---- */
@media (max-width: 620px){
  .raster-2, .raster-3, .raster-4, .raster-5, .raster-preise { grid-template-columns:1fr }

  /* Nichts darf breiter sein als der Bildschirm */
  /* clip statt hidden: "overflow-x: hidden" macht den body zu einem eigenen
     Scrollbereich, und dann klebt "position: sticky" am Handy nicht mehr am
     oberen Bildschirmrand - die Kopfzeile scrollte weg. "clip" schneidet
     genauso ab, erzeugt aber keinen Scrollbereich. */
  html, body { overflow-x: clip }
  @supports not (overflow-x: clip) {
    html, body { overflow-x: hidden }
  }
  img, svg   { max-width:100%; height:auto }

  /* Seitenrand schmaler, sonst bleibt kaum Text uebrig */
  :root { --rand-seite:18px }

  /* Ueberschriften duerfen mitwachsen statt zu ueberlaufen */
  h1 { font-size:clamp(28px, 8.4vw, 44px) !important; line-height:1.14 !important }
  h2 { font-size:clamp(22px, 6.2vw, 31px) !important; line-height:1.2  !important }
  h3 { font-size:clamp(17px, 4.8vw, 21px) !important }

  /* Lange Woerter und E-Mail-Adressen umbrechen statt hinausschieben */
  p, li, td, dd, a, span, b { overflow-wrap:anywhere }

  /* Knopfreihen im Kopfbereich untereinander, volle Breite — am Daumen besser zu treffen.
     Ausdruecklich NICHT der Knopf in der klebenden Kopfzeile: der muss schmal bleiben. */
  div[style*="flex-wrap: wrap"] > a[href="#preise"],
  div[style*="flex-wrap: wrap"] > a[href="#arbeiten"],
  div[style*="flex-wrap: wrap"] > a[href="#kontakt"] { width:100%; text-align:center }

  /* Tabellenartige Preiszeilen bekommen Luft */
  .raster-3 > * { min-width:0 }
}

/* ---- sehr schmal (iPhone SE) ---- */
@media (max-width: 380px){
  :root { --rand-seite:14px }
}

/* Kein Element darf in einem Raster die Spalte sprengen */
.raster-2>*, .raster-3>*, .raster-4>*, .raster-5>*, .raster-preise>* { min-width:0 }

/* Tastaturbedienung sichtbar lassen (wird sonst von inline outline:none geschluckt) */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, summary:focus-visible{
  outline:2px solid var(--focus-ring) !important;
  outline-offset:2px !important;
  border-radius:4px;
}

/* Wer Bewegung nicht mag, bekommt keine */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}

/* ---- Kopfmenue ----
   Das UI-Kit blendet die Navigation unter 820 px per JavaScript aus und setzt
   nichts an ihre Stelle — am Handy gab es dann gar kein Menue mehr. Der Ersatz
   ist ein aufklappbares <details>: reines HTML, laeuft ohne JavaScript und
   funktioniert auch mit der Sprachausgabe. */
.kopf-nav   { display:flex }
.kopf-menue { display:none }

@media (max-width: 820px){
  .kopf-nav   { display:none }
  .kopf-menue { display:block; position:relative }

  .kopf-menue > summary{
    list-style:none; cursor:pointer; user-select:none;
    font-size:var(--fs-nav); font-weight:var(--fw-medium); color:var(--paper);
    padding:9px 14px; border:1px solid var(--line-strong); border-radius:999px;
    white-space:nowrap;
  }
  .kopf-menue > summary::-webkit-details-marker{ display:none }
  .kopf-menue[open] > summary{ border-color:var(--accent); color:var(--accent) }

  .kopf-menue[open] > nav{
    display:flex; flex-direction:column; gap:0;
    position:absolute; right:0; top:calc(100% + 10px); z-index:60; min-width:212px;
    background:var(--ink-850); border:1px solid var(--line-strong);
    border-radius:var(--r-karte); padding:6px; box-shadow:0 18px 40px rgba(0,0,0,.55);
  }
  .kopf-menue[open] > nav a{
    padding:11px 14px; border-radius:8px; color:var(--paper) !important;
  }
  .kopf-menue[open] > nav a:hover,
  .kopf-menue[open] > nav a:focus-visible{ background:var(--accent-tint); color:var(--accent) !important }
}

/* ---- Sprungziele ----
   Die Abschnitte haben oben 80 px Polsterung. Zaehlt man die Kopfhoehe noch dazu,
   landet nach einem Sprung die halbe vorige Sektion im Bild und die Ueberschrift
   erst weit unten. Deshalb die Polsterung gegenrechnen: Ziel ist, dass die
   Augenbraue („KONTAKT") knapp unter dem Kopf steht. */
section[id]{
  scroll-margin-top: calc(var(--hoehe-kopf) - var(--pad-sektion) + 14px);
}
@media (max-width: 620px){
  section[id]{ scroll-margin-top: calc(var(--hoehe-kopf) - var(--pad-sektion) + 6px) }
}

/* ---- Kopfzeile am Handy ----
   Mit dem neuen Menue stehen drei Dinge nebeneinander: Wortmarke, Menue und
   der Anfrage-Knopf. Auf 375 px wurde der Knopf dabei zu einer Buchstabensaeule
   zusammengequetscht. Deshalb: Wortmarke kleiner, Knopf kompakter, nichts umbrechen. */
@media (max-width: 820px){
  .kopf-nav ~ *, .kopf-menue { flex-shrink:0 }

  /* Wortmarke: von 32 px herunter, damit Platz fuer Menue und Knopf bleibt */
  .kopf-menue ~ a, .kopf-menue + a { white-space:nowrap }
}
@media (max-width: 620px){
  /* Die Wortmarke ist das erste Kind der Kopfzeile */
  .kopf-menue { margin-left:auto }
  header span:first-child, div[style*="position: sticky"] span:first-child{
    font-size:21px !important; line-height:1.05 !important;
  }
  /* Anfrage-Knopf: schmaler, aber niemals umbrechen */
  div[style*="position: sticky"] a[href="#kontakt"]{
    padding:9px 13px !important; font-size:13.5px !important;
    white-space:nowrap !important; flex-shrink:0 !important;
  }
  div[style*="position: sticky"] > div{ gap:10px !important }
}

/* Menuepunkte linksbuendig — der Kopfbereich zentriert sonst alles */
.kopf-menue nav a{ text-align:left !important; display:block }

/* Menue schliesst sich, sobald ein Punkt angetippt wird (nur Komfort, kein Muss) */

/* Der Knopf in der Kopfzeile bleibt in jeder Breite ein Knopf und keine Buchstabensaeule. */
div[style*="position: sticky"] a[href="#kontakt"]{ width:auto !important; flex:0 0 auto !important }
@media (max-width: 460px){
  /* Ganz schmal: Wortmarke, Menue und Knopf teilen sich 375 px — der Knopf wird kurz. */
  div[style*="position: sticky"] a[href="#kontakt"]{ font-size:12.5px !important; padding:9px 11px !important }
}

/* ---- Branchen-Blasen: blaues Leuchten beim Darueberfahren ----
   Das UI-Kit macht diesen Effekt in React. Beim Einfrieren der Seite ist er
   verlorengegangen — die Blasen brachten zwar noch die Uebergangsangaben mit,
   aber es gab nichts mehr, was den Zustand umschaltet. Hier steht er als CSS,
   damit er ohne JavaScript wieder da ist. */
.blase{
  cursor:default;
  transition:color var(--t-langsam), border-color var(--t-langsam),
             box-shadow var(--t-langsam), transform var(--t-langsam),
             background-color var(--t-langsam);
}
.blase:hover, .blase:focus-visible{
  color:var(--azur-400) !important;
  border-color:var(--azur-500) !important;
  background-color:var(--azur-tint) !important;
  box-shadow:0 0 0 1px rgba(45,140,240,.34), 0 0 22px rgba(96,165,250,.42),
             0 6px 20px rgba(45,140,240,.20) !important;
  transform:translateY(-2px) !important;
}

/* Am Handy gibt es kein Darueberfahren — dort wuerde der Effekt nach dem
   Antippen haengenbleiben. Deshalb nur auf Geraeten mit echtem Zeiger. */
@media (hover: none){
  .blase:hover{
    color:var(--g4) !important; border-color:rgba(255,255,255,.13) !important;
    background-color:transparent !important; box-shadow:var(--shadow-pille) !important;
    transform:none !important;
  }
}

/* ---- Preiszeilen: Spaltensprung am Handy aufheben ----
   Zwei Zeilen (Google-Grundeinrichtung, Speicherplatz) haben inline ein
   `grid-column: span 2`, weil sie am Rechner ueber die ganze Breite gehen.
   Steht das Raster am Handy auf EINER Spalte, erzeugt `span 2` eine implizite
   zweite Spalte — und die uebrigen Zeilen werden auf ~70 px zusammengequetscht.
   Genau das war am iPhone zu sehen: "W ei te re S ei te n" untereinander. */
@media (max-width: 620px){
  .raster-2 > *, .raster-3 > *, .raster-4 > *,
  .raster-5 > *, .raster-preise > *{
    grid-column: auto !important;
  }
  /* Bezeichnung darf mehrzeilig werden, der Preis bleibt rechts oben stehen.
     (Ein flex-wrap wuerde den Preis in eine eigene Zeile werfen — das sieht
     bei langen Bezeichnungen uneinheitlich aus.) */
  .raster-3 > div[style*="space-between"]{
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .raster-3 > div[style*="space-between"] > *:first-child{
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .raster-3 > div[style*="space-between"] > *:last-child{
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* ---- Blasen am Handy: leuchten beim Antippen ----
   Am Handy gibt es kein Darueberfahren. Frueher war der Effekt dort ganz
   abgeschaltet, damit er nach dem Antippen nicht haengenbleibt. Mit :active
   leuchtet die Blase nur, solange der Finger sie beruehrt — und geht von
   selbst wieder aus. `cursor: pointer` ist noetig, damit iOS Safari das
   Element ueberhaupt als antippbar behandelt und :active ausloest. */
@media (hover: none){
  .blase{ cursor: pointer; -webkit-tap-highlight-color: transparent; }

  .blase:active, .blase.beruehrt{
    color: var(--azur-400) !important;
    border-color: var(--azur-500) !important;
    background-color: var(--azur-tint) !important;
    box-shadow: 0 0 0 1px rgba(45,140,240,.34), 0 0 22px rgba(96,165,250,.42),
                0 6px 20px rgba(45,140,240,.20) !important;
    transform: translateY(-2px) !important;
  }
}

/* ---- Arbeitsproben: sichtbar machen, dass die Kacheln anklickbar sind ---- */
a.arbeit:hover, a.arbeit:focus-visible{
  border-color: var(--line-accent) !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.42);
}
a.arbeit:active{ transform: translateY(-1px) }

/* Kleiner Pfeil rechts oben, damit man sieht: das fuehrt hinaus */
a.arbeit{ position: relative }
a.arbeit::after{
  content: "↗";
  position: absolute; top: 9px; right: 11px;
  font-size: 14px; line-height: 1; color: var(--g5);
  opacity: .55; transition: opacity var(--t-normal), color var(--t-normal);
  pointer-events: none;
}
a.arbeit:hover::after{ opacity: 1; color: var(--accent) }