/* ==========================================================================
   GeekInfinity - site.css

   Gemeinsame Basis aller Inhaltsseiten: Reset, Grundtypografie,
   Zurueck-Link, Footer und Sprachumschalter.

   Eingebunden von impressum.php, datenschutz.php, kontakt.php, den drei
   Produktseiten (docmind.php, codebag.php, folderbag.php) und allen Seiten
   unter /help/.
   NICHT von index.php - die Startseite behaelt ihr eigenes CSS inline,
   weil Glitch- und Logo-Animation beim ersten Paint stehen muessen.

   Seitenspezifische Regeln stehen weiterhin inline IM jeweiligen <style>,
   das nach diesem Stylesheet geladen wird und es damit ueberschreibt.
   ========================================================================== */

* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; background: radial-gradient(1200px 600px at 20% -10%, var(--bg-2) 0%, var(--bg) 55%); background-attachment: fixed; color:var(--text); font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); }
.wrap { max-width:760px; margin:0 auto; padding:96px 24px 80px; width:100%; }
.h-back { display:inline-flex; align-items:center; gap:7px; font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; letter-spacing:.04em; text-decoration:none; color:rgba(var(--text-rgb), .6); margin-bottom:34px; transition:color .2s; }
.h-back:hover { color:var(--accent); }
.h-lead { font-size:clamp(16px,2.5vw,20px); font-weight:300; line-height:1.55; color:rgba(var(--text-rgb), .78); margin:0 0 12px; }
.h-bar { height:1.5px; width:120px; background:linear-gradient(90deg,var(--accent),var(--accent-2),transparent); border-radius:2px; margin:34px 0; }
.h-copy { position:fixed; left:0; right:0; bottom:16px; text-align:center; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em; color:rgba(var(--line-rgb), .30); }
.h-copy a { color:rgba(var(--line-rgb), .42); text-decoration:none; transition:color .2s; }
.h-copy a:hover { color:var(--accent); }
.gi-lang-pos { position:fixed; top:18px; right:18px; z-index:90; }
.lang-switch { position:relative; display:inline-block; font-size:14px; text-align:left; }
.lang-switch .flag { width:20px; height:14px; border-radius:2px; box-shadow:0 0 0 1px rgba(var(--shadow-rgb), .35) inset; flex:0 0 auto; display:block; }
.lang-btn { display:inline-flex; align-items:center; gap:8px; cursor:pointer; background:rgba(var(--panel-rgb), .72); color:var(--text); border:1px solid rgba(var(--accent-2-rgb), .35); border-radius:10px; padding:8px 12px; font:inherit; backdrop-filter:blur(6px); transition:border-color .2s, box-shadow .2s; }
.lang-btn:hover { border-color:var(--accent); box-shadow:0 0 14px rgba(var(--accent-rgb), .25); }
.lang-name { font-weight:300; }
.lang-caret { color:var(--muted); font-size:11px; }
.lang-menu { position:absolute; right:0; top:calc(100% + 6px); min-width:180px; background:rgba(var(--bg-rgb), .96); border:1px solid rgba(var(--accent-2-rgb), .35); border-radius:10px; padding:6px; display:none; z-index:91; box-shadow:0 12px 30px rgba(var(--shadow-rgb), .55); backdrop-filter:blur(8px); }
.lang-switch.open .lang-menu { display:block; }
.lang-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; color:var(--text); text-decoration:none; }
.lang-item:hover { background:rgba(var(--accent-2-rgb), .14); }
.lang-item[aria-current="true"] { color:var(--accent); font-weight:600; }

/* ==========================================================================
   Produktseiten (docmind.php, codebag.php, folderbag.php)

   Alle drei sehen gleich aus, deshalb stehen die Regeln hier und nicht
   dreimal inline. Das Praefix .p- kollidiert mit nichts Bestehendem
   (.h- gehoert den Hilfeseiten, .l- den Rechtstexten, .gi- der Startseite).
   ========================================================================== */

.p-kicker { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.32em; text-transform:uppercase; color:var(--accent); opacity:.85; margin-bottom:14px; }
.p-title { font-family:'Space Grotesk',sans-serif; font-weight:300; font-size:clamp(30px,5.5vw,48px); line-height:1.06; letter-spacing:-.02em; color:var(--head); margin:0 0 18px; }
.p-sec { margin:0 0 30px; }
.p-sec h2 { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:17px; color:var(--accent); margin:0 0 8px; letter-spacing:-.01em; }
.p-sec p { font-size:15.5px; font-weight:300; line-height:1.62; color:rgba(var(--text-rgb), .78); margin:0; }

/* Die vier DocMind-Themenkarten, die frueher auf der Startseite standen. */
.p-links { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:0 0 34px; }
@media (max-width:620px) { .p-links { grid-template-columns:1fr; } }
.p-link { display:flex; flex-direction:column; background:rgba(var(--panel-rgb), .55); border:1px solid rgba(var(--accent-2-rgb), .22); border-radius:14px; padding:20px 20px 18px; text-decoration:none; transition:border-color .25s, transform .25s; }
.p-link:hover { border-color:rgba(var(--accent-rgb), .5); transform:translateY(-3px); }
.p-link .pl-t { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:15px; color:var(--accent); margin-bottom:8px; }
.p-link .pl-s { font-family:'Space Grotesk',sans-serif; font-weight:400; font-size:13px;
                color:rgba(var(--text-rgb), .55); margin:-4px 0 8px; letter-spacing:.01em; }
.p-link .pl-d { font-family:'Space Grotesk',sans-serif; font-weight:300; font-size:14px; line-height:1.5; color:rgba(var(--text-rgb), .7); margin:0 0 14px; }
.p-link .pl-m { margin-top:auto; align-self:flex-end; font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; color:var(--accent); opacity:.85; }

/* "Auf einen Blick" - technische Eckdaten, gleiche Optik wie die
   Tarifuebersicht unter /help/, damit die Seiten zusammengehoerig wirken. */
.p-specs { width:100%; border-collapse:collapse; margin:8px 0 34px; font-family:'Space Grotesk',sans-serif; }
.p-specs caption { text-align:left; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); opacity:.9; padding-bottom:14px; }
.p-specs th, .p-specs td { padding:14px 4px; border-bottom:1px solid rgba(var(--accent-2-rgb), .18); text-align:left; vertical-align:baseline; }
.p-specs th { font-weight:300; font-size:15px; color:rgba(var(--text-rgb), .82); }
.p-specs td { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:15px; color:var(--head); text-align:right; }
.p-specs tr:last-child th, .p-specs tr:last-child td { border-bottom:none; }
@media (max-width:520px) { .p-specs th, .p-specs td { display:block; text-align:left; } .p-specs th { border-bottom:none; padding-bottom:2px; } .p-specs td { padding-top:0; } }

.p-cta { display:inline-flex; align-items:center; gap:10px; margin-top:6px; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:15px; letter-spacing:.02em; text-decoration:none; color:var(--on-accent); background:linear-gradient(90deg,var(--accent),var(--accent-2)); padding:14px 28px; border-radius:12px; box-shadow:0 8px 30px rgba(var(--accent-rgb), .28); transition:transform .2s, box-shadow .2s; }
.p-cta:hover { transform:translateY(-2px); box-shadow:0 12px 40px rgba(var(--accent-2-rgb), .45); }

/* Hinweis statt Button, solange ein Produkt noch nicht ausgeliefert wird. */
.p-soon { border:1px solid rgba(var(--accent-2-rgb), .45); background:rgba(var(--accent-2-rgb), .10); border-radius:12px; padding:16px 18px; font-size:14.5px; font-weight:300; line-height:1.6; color:var(--accent-2-soft); }
.p-note { font-size:13px; font-weight:300; line-height:1.6; color:rgba(var(--text-rgb), .55); margin:14px 0 0; }
.p-sep { padding:0 8px; color:rgba(var(--line-rgb), .20); }

/* Kartenraster der DocMind-Produktseite: eine Karte je Funktion.
   Drei Spalten, darunter zwei, auf dem Telefon eine. Nutzt dieselben
   .p-link-Karten wie der kleinere Zweierblock. */
.p-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:0 0 34px; }
/* Vier Karten stehen im Dreier-Raster unschoen: drei oben, eine allein
   darunter. Die Zusatzklasse stellt sie in ein 2x2-Feld. Sie wird nur dort
   gesetzt, wo es vier sind - docmind.php mit elf Karten bleibt dreispaltig. */
.p-cards--4 { grid-template-columns:repeat(2,1fr); max-width:760px; margin-left:auto; margin-right:auto; }
@media (max-width:600px) { .p-cards--4 { grid-template-columns:1fr; } }

@media (max-width:860px) { .p-cards { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .p-cards { grid-template-columns:1fr; } }

/* Aufzaehlung auf den Funktionsseiten - kurze, konkrete Punkte unter dem
   Fliesstext. Bewusst schmal gehalten, damit sie den Text nicht erschlaegt. */
.p-list { margin:14px 0 0; padding-left:20px; }
.p-list li { font-size:15px; font-weight:300; line-height:1.6; color:rgba(var(--text-rgb), .72); margin-bottom:7px; }
.p-list li::marker { color:var(--accent); }

/* ==========================================================================
   MOBIL
   Ergaenzt 08/2026. Betrifft alle Seiten, die site.css einbinden - also
   Produkt-, Leistungs-, Funktions- und Altseiten.

   1. FUSSZEILE. .h-copy stand auf position:fixed. Auf einem Telefon legt
      sich die Zeile damit dauerhaft ueber den Text, und weil sie dort auf
      zwei bis drei Zeilen umbricht, verdeckt sie mehr als die 80px
      Innenabstand, die .wrap unten freilaesst. Auf schmalen Geraeten laeuft
      sie deshalb im normalen Textfluss mit.

   2. WORTUMBRUCH. Woerter wie "Auftragsverarbeitungsvertrag" oder
      "Verzeichnis der Verarbeitungstaetigkeiten" sind laenger als ein
      320px breites Display. Ohne Umbruchregel schiebt ein einziges solches
      Wort die ganze Seite waagerecht auf.

   3. TABELLEN. Die Tarifseiten unter /help/ haben zweispaltige Tabellen mit
      langen Beschriftungen. Untereinander gestellt passen sie; nebeneinander
      werden die Spalten unlesbar schmal. Die Selektoren sind bewusst mit
      .wrap davor geschrieben: die Altseiten bringen ihre eigenen Regeln in
      einem <style> NACH diesem Stylesheet mit, und ohne die hoehere
      Gewichtung wuerden sie gewinnen.

   4. TIPPFLAECHEN. Der Sprachumschalter bekommt auf dem Telefon etwas mehr
      Hoehe, damit er sicher zu treffen ist.
   ========================================================================== */

/* 2 - gilt auf allen Groessen */
body { overflow-wrap:break-word; }
.p-title, .h-lead, .p-sec p, .p-sec h2, .p-list li, .p-link .pl-t, .p-link .pl-d { overflow-wrap:break-word; hyphens:auto; }
img, svg { max-width:100%; }

@media (max-width:760px) {
  /* 1 */
  .h-copy { position:static; margin:44px 0 0; padding:0 18px 28px; line-height:2.1; }
  .wrap { padding-bottom:16px; }
  .p-sep { display:inline-block; padding:0 6px; }

  /* 4 */
  .lang-btn { padding:11px 14px; }
  .lang-item { padding:12px 10px; }
}

/* 3 */
@media (max-width:560px) {
  .wrap .h-limits th, .wrap .h-limits td,
  .wrap .h-syslimits th, .wrap .h-syslimits td { display:block; text-align:left; width:auto; }
  .wrap .h-limits th, .wrap .h-syslimits th { border-bottom:none; padding-bottom:2px; }
  .wrap .h-limits td, .wrap .h-syslimits td { padding-top:0; padding-bottom:14px; color:var(--text); }
}

/* Textverweis unter den Karten, z. B. von leistungen.php auf portfolio.php.
   Bewusst KEINE Schaltflaeche - die grosse Schaltflaeche darunter fuehrt zum
   Kontakt und soll die auffaelligste bleiben.
   display:block ist WICHTIG: mit inline-block floss der Verweis neben die
   Schaltflaeche in dieselbe Zeile, weil auch .p-cta ein Zeilenelement ist
   (inline-flex). width:fit-content haelt die Klickflaeche trotzdem so
   schmal wie der Text. */
.p-more { display:block; width:fit-content; margin:0 0 26px; font-family:'JetBrains Mono',monospace;
          font-size:13px; font-weight:700; letter-spacing:.04em; text-decoration:none;
          color:var(--accent); opacity:.9; transition:opacity .2s; }
.p-more:hover { opacity:1; }