/* 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 ----
   13.10.2026: Grenze von 820 auf 1140 px angehoben. Die volle Navigation braucht rund
   1120 px — darunter wurde „Anfrage stellen“ rechts abgeschnitten (iPad quer, 1024 px).
   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: 1140px){
  .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: 1140px){
  .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;
  color:var(--paper) !important; /* Schriftfarben-Regel: lesbarer Text nie grau (inline steht noch --g4) */
  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(--paper) !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 abwechselnd und beim Antippen (13.10.2026) ----
   Am Handy gibt es kein Darueberfahren. Robert wollte trotzdem das blaue Leuchten:
   - Ein kleines Skript in index.html (ganz unten) laesst laufend fuenf, sechs Blasen
     zufaellig nacheinander aufleuchten (Klasse .leuchtet), nur solange sie im Bild sind
     und nicht bei „Bewegung reduzieren“.
   - Antippen laesst eine Blase sofort fuer gut zwei Sekunden leuchten (Klasse .beruehrt).
   Kein transform hier: Die Blasen schweben weiter, sonst springen sie beim Ausgehen.
   `cursor: pointer` braucht iOS Safari, damit es das Antippen ueberhaupt meldet. */
@media (hover: none){
  .blase{ cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition-duration: .7s !important; }

  .blase:active, .blase.beruehrt, .blase.leuchtet{
    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;
  }
}

/* ---- 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) }