/* ---------------------------------------------------------------------------
   Losinka IT GmbH - Gestaltung der Firmenseite.

   Grundsatz: keine fremden Bilder, keine fremden Schriften, keine fremden
   Skripte. Alles Sichtbare entsteht aus der eigenen Bildmarke, aus Farbe und
   aus Typografie. Die Seite laedt ausschliesslich Dateien vom eigenen Server.

   Farbklima: tiefes Petrol (dunkles Blaugruen) mit tuerkisem Akzent. Die
   Bildmarke ist schwarzweiss und steht deshalb in einem hellen Feld, damit sie
   auf dem dunklen Kopfband klar abgesetzt bleibt.
   --------------------------------------------------------------------------- */

:root {
  --tinte:       #0c3238;
  --tinte-tief:  #06181d;
  --tinte-weit:  #0f4a52;
  --papier:      #ffffff;
  --papier-alt:  #eaf0f1;
  --text:        #12212a;
  --text-leise:  #4c6169;
  /* Dunkler als das urspruengliche #0c8b93: jenes ergab auf Weiss nur 4.09
     und auf dem grauen Feld 3.55 an Kontrast, gefordert sind 4.5. */
  --akzent:      #0a6f76;
  --akzent-hell: #34bfc7;
  --linie:       #d0dcdf;
  --papier-karte: #ffffff;
  --breite-doc:  46rem;
  --auf-dunkel:       #e8f3f3;
  --auf-dunkel-leise: #9bbcbd;
  --schatten: 0 1px 2px rgba(12,50,56,0.05), 0 6px 18px rgba(12,50,56,0.06);
  --schatten-hover: 0 2px 4px rgba(12,50,56,0.06), 0 14px 30px rgba(12,50,56,0.10);
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier:      #0f1518;
    --papier-alt:  #161f23;
    --text:        #e4edef;
    --text-leise:  #9fb2b7;
    --akzent:      #3fbec6;
    --akzent-hell: #6fd8de;
    /* Eigener Grund fuer die Kacheln und eine hellere Linie: vorher hatten
       Kachel und Seite denselben Ton, die Kante war praktisch unsichtbar,
       und der Schatten geht auf Schwarz ohnehin unter. Der Wert stand zuerst
       auf #161f23 - genau dem Ton von --papier-alt, also war die Kachel vom
       Panel wieder nicht zu unterscheiden; jetzt eine Stufe heller. */
    --papier-karte: #1b262b;
    --linie:       #33444b;
    --schatten: 0 1px 2px rgba(0,0,0,0.35), 0 6px 18px rgba(0,0,0,0.28);
    --schatten-hover: 0 2px 4px rgba(0,0,0,0.45), 0 14px 30px rgba(0,0,0,0.38);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  /* Groesse in rem, nicht in Pixeln: sonst bleibt der Text starr, wenn jemand
     im Browser eine groessere Grundschrift einstellt - waehrend Abstaende und
     Breiten (auch in rem) mitwachsen. 1.0625rem sind die frueheren 17px. */
  font: 1.0625rem/1.7 "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* text-wrap: pretty verteilt die Zeilen gleichmaessiger und verhindert ein
   einzelnes Wort in der letzten Zeile. Silbentrennung wird NICHT pauschal
   eingeschaltet: im Fliesstext zerhackt sie die Woerter und macht den Absatz
   schwerer lesbar. Sie gilt nur dort, wo die Spalte schmal ist: in den
   Kacheln (.card p), in ALLEN h3 - auch in denen der Profilspalten - und in
   der grossen Ueberschrift .brand. */
p, li { text-wrap: pretty; }

/* Der Browser stellt <address> von Haus aus kursiv. Bis zum 13.08.2026 wurde
   das nur innerhalb von .doc zurueckgenommen - dieselbe Firmenanschrift stand
   deshalb im Kontaktfeld der Startseite kursiv und im Impressum aufrecht. */
address { font-style: normal; }

/* Nur waagerecht zentrieren. Ein kurzes "margin: 0 auto" wuerde auch den
   senkrechten Aussenabstand auf 0 setzen - und da die Abschnitte selbst die
   Klasse "wrap" tragen, schlaegt die Klasse die Regel fuer <section>. Genau
   das hat den Abstand unter den Kacheln verschluckt. */
.wrap {
  max-width: 62rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* --- Kopfband -------------------------------------------------------------- */

.kopfband {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--tinte) 0%, var(--tinte-tief) 58%, var(--tinte-weit) 100%);
  color: var(--auf-dunkel);
  padding: 3.75rem 0 4rem;
  /* Der farbige Abschluss trennt Kopf und Inhalt sichtbar voneinander. */
  border-bottom: 3px solid var(--akzent);
}

/* Feines Linienraster - reine CSS-Geometrie, kein Bild, kaum sichtbar, gibt
   der Flaeche aber Tiefe statt toter Farbe. */
.kopfband::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 5.5rem),
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.035) 0 1px, transparent 1px 5.5rem);
  pointer-events: none;
}

/* Die eigene Bildmarke als grosses, ruhiges Hintergrundmotiv.
   Hoehe und rechter Abstand sind an das Band gekoppelt; das Motiv wird nie
   vom Rand angeschnitten. Einschraenkung, damit der Kommentar nicht mehr
   behauptet als der Code haelt: zwischen etwa 640 und 1100 px greift der
   Deckel max-width unten, die Box wird dann hoch und schmal, und weil das SVG
   sein Seitenverhaeltnis behaelt, steht oben und unten mehr Luft als 2.5rem. */
.kopfband .motiv {
  position: absolute;
  top: 2.5rem;
  bottom: 2.5rem;
  /* Am Fensterrand, nicht an der Textspalte. Eine Fassung vom 13.08.2026 hatte
     das Motiv an die Spalte gebunden - auf breiten Schirmen rueckte es damit
     zur Mitte hin und stand mitten im Band statt in der Ecke. */
  right: 2.5rem;
  width: auto;
  aspect-ratio: 1 / 1;
  /* Deckel gegen das Aufblaehen: sonst waere das quadratische Motiv auf
     mittleren Breiten (etwa 640 bis 1100 px) breiter als der halbe Schirm und
     schoebe sich unter den Text. Unter 640 px ist das Motiv ohnehin
     ausgeblendet, dort greift der Deckel also nicht. */
  max-width: 45%;
  color: var(--akzent-hell);
  opacity: 0.13;
  pointer-events: none;
}
.kopfband .motiv svg { width: 100%; height: 100%; display: block; }

.kopf { position: relative; z-index: 1; display: flex; align-items: center; gap: 1.4rem; }

.marke {
  flex: 0 0 auto;
  width: 5.6rem;
  height: 5.6rem;
  display: grid;
  place-items: center;
  background: var(--auf-dunkel);
  color: var(--tinte);
  border-radius: 12px;
  padding: 0.85rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
}
.marke svg { display: block; width: 100%; height: 100%; }
.marke-klein { width: 3.8rem; height: 3.8rem; padding: 0.6rem; border-radius: 9px; }

.brand {
  margin: 0;
  font-size: clamp(1.8rem, 4.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  /* Vorsorge fuer "Datenschutzerklaerung", das laengste h1 der Seite: bei den
     gemessenen Breiten 390, 400 und 420 passt es in eine Zeile, aber wer die
     Grundschrift des Browsers hochstellt, bekaeme sonst einen harten Bruch
     mitten im Wort (overflow-wrap weiter unten). Mit lang="de" trennt der
     Browser stattdessen nach Silben. */
  hyphens: auto;
  -webkit-hyphens: auto;
}
.brand-sub {
  margin: 0.4rem 0 0;
  color: var(--auf-dunkel-leise);
  font-size: 0.98rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.lead {
  position: relative;
  z-index: 1;
  margin: 2.1rem 0 0;
  max-width: 41rem;
  font-size: clamp(1.08rem, 2.2vw, 1.32rem);
  line-height: 1.55;
}

.kopfband nav { position: relative; z-index: 1; margin-top: 2.25rem; }
.kopfband nav a {
  display: inline-block;
  margin: 0 0.55rem 0.6rem 0;
  padding: 0.52rem 1.15rem;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  color: var(--auf-dunkel);
  text-decoration: none;
  font-size: 0.97rem;
  font-weight: 600;
}
/* Heller Akzent, nicht der dunkle: das Kopfband ist immer dunkel, also muss
   die gefuellte Pille hell sein. Mit var(--akzent) (#0a6f76 im Hellmodus) kam
   die dunkle Schrift #04262a nur auf 2.70 an Kontrast - gefordert sind 4.5,
   und das ist zugleich der Zustand, den ein Tastaturnutzer beim Fokus sieht.
   Mit --akzent-hell sind es 7.16 (hell) und 9.54 (dunkel). */
.kopfband nav a:hover,
.kopfband nav a:focus {
  background: var(--akzent-hell);
  border-color: var(--akzent-hell);
  color: #04262a;
}

/* Kennzahlenreihe am Fuss des Kopfbands. */
.fakten {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0 3rem;
  margin: 2.5rem 0 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid rgba(255,255,255,0.16);
  list-style: none;
}
.fakten li { padding: 0.35rem 0; }
.fakten .zahl {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--akzent-hell);
  line-height: 1.2;
}
.fakten .wort {
  display: block;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  color: var(--auf-dunkel-leise);
}

/* Kopf der Unterseiten. */
.kopfband.schmal { padding: 2.4rem 0 2.5rem; }
/* Auf den Unterseiten ist das Band flacher, deshalb ruecken top und bottom
   naeher an den Rand - und weil die Hoehe genau daraus entsteht, wird das
   Motiv hier um 2rem groesser als mit den Werten der Grundregel. Von dort
   kommen nur max-width und right. */
.kopfband.schmal .motiv { top: 1.5rem; bottom: 1.5rem; }
.crumb { margin: 0 0 0.3rem; font-size: 0.9rem; letter-spacing: 0.05em; }
.crumb a { color: var(--auf-dunkel-leise); text-decoration: none; }
.crumb a:hover, .crumb a:focus { color: var(--auf-dunkel); text-decoration: underline; }

/* --- Inhalt ---------------------------------------------------------------- */

/* Ein einziges Abstandsmass fuer die Abschnitte: der Abstand von der farbigen
   Linie zu den Kacheln und der Abstand von den Kacheln zur naechsten
   Ueberschrift sind derselbe Wert. */
main { padding-top: 3rem; padding-bottom: 3rem; }
section { margin: 0 0 3rem; }
/* Der letzte Abschnitt braucht unten keinen zweiten Abstand - der von main
   genuegt, sonst wird der Zwischenraum zur Fusszeile doppelt so gross. */
main > section:last-of-type { margin-bottom: 0; }

h2 {
  font-size: clamp(1.4rem, 2.8vw, 1.8rem);
  margin: 0 0 0.45rem;
  letter-spacing: -0.015em;
}
/* Der farbige Strich unter der Ueberschrift wird gezeichnet, nicht in die
   Seite geschrieben: frueher stand dafuer ein leeres <div class="h2-strich">
   in der Auszeichnung - reine Gestaltung im Textgeruest. */
main h2::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  background: linear-gradient(90deg, var(--akzent), var(--akzent-hell));
  border-radius: 2px;
  margin: 0.45rem 0 3rem;
}
/* Auf den Rechtsseiten steht kein Strich - dort trennen Linien die Abschnitte. */
.doc h2::after { content: none; }
h3 {
  font-size: 1.06rem;
  margin: 0 0 0.4rem;
  letter-spacing: -0.005em;
  /* Deutsche Bandwurmwoerter ("Schwachstellenmanagement") sprengen sonst die
     Kachel, sobald der Text laenger wird oder die Schrift groesser gestellt
     ist. Trennung nach Silben, Rest notfalls hart umbrechen. */
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Letzte Sicherung gegen ein einzelnes ueberlanges Wort - egal wo. */
h1, h2, h3, p, li, address { overflow-wrap: break-word; }

.cards {
  display: grid;
  /* min(...) ist Pflicht: ohne es bleibt die Spalte 18.5rem breit, auch wenn
     der Schirm schmaler ist - auf 320 Punkten ragten die Kacheln dadurch
     ueber den Rand und erzeugten waagerechten Bildlauf. */
  grid-template-columns: repeat(auto-fill, minmax(min(18.5rem, 100%), 1fr));
  gap: 1.2rem;
}
.card {
  position: relative;
  background: var(--papier-karte);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 1.4rem 1.45rem 1.5rem;
  overflow: hidden;
  box-shadow: var(--schatten);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--akzent), var(--akzent-hell));
}
/* Ueber eine Variable, nicht fest verdrahtet: hier stand ein Petrol-Schatten,
   der im dunklen Schema unsichtbar war - die Kachel hob sich dort nur noch
   durch die Verschiebung ab. */
.card:hover { transform: translateY(-2px); box-shadow: var(--schatten-hover); }
.card p {
  margin: 0;
  color: var(--text-leise);
  font-size: 0.96rem;
  line-height: 1.62;
  /* Schmale Spalte, ohne Trennung reisst der rechte Rand auf. Dasselbe gilt
     fuer h3 und .brand, siehe Anmerkung am Kopf der Datei. */
  hyphens: auto;
  -webkit-hyphens: auto;
}
.card.weit { grid-column: 1 / -1; }

/* Der Profilteil sitzt in einem eigenen Feld in Textbreite - mit runden Ecken
   und Rand. Ein Streifen ueber die volle Fensterbreite schnitt die Seite quer
   durch; ein Feld tut das nicht. Aussen bleibt derselbe Abstand wie ueber den
   Kacheln: 3rem aus main oben, 3rem aus section unten. */
.feld {
  background: var(--papier-alt);
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: 2.5rem 2.5rem 2.25rem;
}
/* Profil: erst der Fliesstext ueber die ganze Feldbreite, darunter die beiden
   Listen nebeneinander. Nebeneinandergestellt waeren Text und Listen
   unterschiedlich hoch - der Kasten wirkte unten leer. */
.profil-text p:first-child { margin-top: 0; }
.profil-text p:last-child { margin-bottom: 0; }

.profil-listen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1.5rem 3.25rem;
  margin-top: 2rem;
  padding-top: 1.85rem;
  border-top: 1px solid var(--linie);
}
/* Branchen und Qualifikationen: einspaltige Liste mit Trennlinien.
   Hier stand bis zum 13.08.2026 zusaetzlich ein mehrspaltiges Raster
   (repeat(auto-fit, minmax(min(12rem,100%),1fr))) und eine Zeile darueber
   ".profil-listen .branchen { grid-template-columns: 1fr }", die es wegen
   hoeherer Staerke IMMER schlug. Beide Listen der Seite stehen in
   .profil-listen, das Raster kam also nie zum Zug - der Kommentar behauptete
   trotzdem "gleich breite Spalten". Beides entfernt; das Bild bleibt gleich,
   denn ein Raster ohne Spaltenangabe ist einspaltig. */
.branchen {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem 1.25rem;
}
.branchen li {
  position: relative;
  padding: 0.32rem 0 0.32rem 1.1rem;
  font-size: 0.95rem;
  color: var(--text-leise);
  border-bottom: 1px solid var(--linie);
}
.branchen li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--akzent);
}

.kontakt-feld {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1.5rem 2.5rem;
  background: var(--papier-alt);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--akzent);
  border-radius: 10px;
  padding: 1.8rem 1.9rem;
}
.kontakt-feld p { margin: 0 0 0.35rem; }
/* Ersetzt ein frueheres style="..."-Attribut im HTML. Die strenge
   Inhaltsrichtlinie der Seite (default-src 'none') verbietet Stile im Tag;
   ohne diese Klasse muesste sie mit 'unsafe-inline' aufgeweicht werden. */
.leise { color: var(--text-leise); }
.kontakt-feld .gross { font-size: 1.14rem; font-weight: 600; word-break: break-word; }

a { color: var(--akzent); }

/* --- Rechtstexte ----------------------------------------------------------- */

/* Textbreite der Rechtsseiten an EINER Stelle. "eng" traegt nur die Breite
   (Kopf und Fusszeile), "doc" zusaetzlich die Textgestaltung. Frueher trugen
   auch Kopf und Fusszeile "doc" - dessen Farbregeln faerbten die Fusszeile auf
   dem dunklen Band fast schwarz.
   ACHTUNG: Beide Klassen haben dieselbe Staerke wie "wrap"; dass sie gewinnen,
   haengt allein daran, dass diese Zeile NACH .wrap steht. Nicht hochschieben. */
.eng, .doc { max-width: var(--breite-doc); }
.doc h2 {
  font-size: 1.14rem;
  margin: 2.4rem 0 0.7rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linie);
}
.doc h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.doc p, .doc li { color: var(--text-leise); }
/* Vorsorge: die Rechtstexte enthalten heute keine Aufzaehlung, eine Liste der
   Betroffenenrechte kann aber jederzeit dazukommen. Bewusst behalten, damit
   sie dann nicht ungestaltet dasteht. */
.doc ul { padding-left: 1.15rem; }
.doc li { margin: 0.3rem 0; }
.doc address { color: var(--text-leise); }
/* Der letzte Absatz erzeugt sonst zusaetzlich zum Abstand von main noch
   seinen eigenen - unten stuende dann mehr Luft als oben. */
.doc > :last-child { margin-bottom: 0; }

/* --- Schmale Bildschirme --------------------------------------------------- */

@media (max-width: 40rem) {
  /* Langform, wie in der Grundregel oben. Die Kurzform "padding: 0 1.15rem"
     stand hier bis zum 13.08.2026 und setzte damit auch padding-top und
     padding-bottom auf 0 - und weil .wrap (Klasse) die Regel fuer main (Tag)
     schlaegt, hatten Impressum und Datenschutzerklaerung auf dem Telefon
     gemessene 0px Luft oben und unten, waehrend die Startseite 41.6px hatte.
     Dieselbe Falle wie in der Grundregel; deshalb dort UND hier Langform. */
  .wrap { padding-left: 1.15rem; padding-right: 1.15rem; }
  body { font-size: 1rem; }
  .kopfband { padding: 2.6rem 0 2.9rem; }
  /* Auf schmalen Schirmen wird das Hintergrundmotiv ganz weggelassen: dort
     bleibt neben dem Text kein Platz, es schiebt sich unter die Schrift und
     wird am rechten Rand angeschnitten. Die Marke im hellen Feld bleibt. */
  .kopfband .motiv { display: none; }
  .kopf { gap: 1rem; }
  .marke { width: 4.4rem; height: 4.4rem; padding: 0.65rem; border-radius: 10px; }
  .marke-klein { width: 3.1rem; height: 3.1rem; padding: 0.5rem; }
  .lead { margin-top: 1.6rem; }
  .kopfband nav { margin-top: 1.8rem; }
  .fakten { gap: 0 2rem; margin-top: 1.9rem; }
  .fakten .zahl { font-size: 1.3rem; }
  /* Oben und unten derselbe Wert - vorher stand hier 2.6rem oben und 1rem
     unten, und genau das hat die Pruefung als "Abstaende ungleich" gemeldet. */
  main { padding-top: 2.6rem; padding-bottom: 2.6rem; }
  /* Auch hier gilt: ein Wert fuer beide Abstaende. */
  section { margin-bottom: 2.2rem; }
  .feld { padding: 1.5rem 1.4rem 1.35rem; border-radius: 10px; }
  .card { padding: 1.2rem 1.25rem 1.3rem; }
  .kontakt-feld { padding: 1.35rem 1.4rem; gap: 1.25rem; }
  main h2::after { margin-bottom: 2.2rem; }
  footer a { display: inline-block; margin: 0 1.25rem 0.4rem 0; }
}

@media (max-width: 24rem) {
  .kopf { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .fakten { flex-direction: column; gap: 0; }
}

/* --- Fusszeile ------------------------------------------------------------- */

footer {
  background: var(--tinte);
  color: var(--auf-dunkel-leise);
  border-top: 3px solid var(--akzent);
  /* Kein eigener Aussenabstand: der Abstand zum Inhalt kommt allein aus
     main (padding-bottom) und ist damit genauso gross wie der oben. */
  margin-top: 0;
  padding: 2.1rem 0 2.4rem;
  font-size: 0.94rem;
}
/* Wer im System "Bewegung reduzieren" eingestellt hat, bekommt weder sanftes
   Springen zu Sprungzielen noch angehobene Kacheln. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card { transition: none; }
  .card:hover { transform: none; }
}

footer a { color: var(--auf-dunkel); margin-right: 1.5rem; text-decoration: none; }
footer a:hover, footer a:focus { text-decoration: underline; }
/* Farbe kommt aus footer; hier nur der Abstand. (Die frueher noetige eigene
   Farbe entfiel, als Kopf und Fusszeile der Rechtsseiten von "doc" auf "eng"
   umgestellt wurden.) */
.fuss-zeile { margin: 1rem 0 0; }