/* * DIE GESTALTUNG ALLER OEFFENTLICHEN SEITEN - an einer Stelle. * * WOZU ES DIESE DATEI GIBT * Vier Seiten stehen ohne Anmeldung im Netz: die Startseite, die Seite * zur Webex-Kachel, die Seite fuer CRM- und ERP-Hersteller und die * Datenschutzerklaerung. Bis zum 03.09.2026 hatte jede ihre eigene * Gestaltung. Wer von der einen auf die andere klickte, verliess dem * Anschein nach das Haus: anderer Grund, andere Schriftgroessen, keine * Kopfzeile, kein Logo. * * Das ist der Unterschied zwischen "sieht ordentlich aus" und "wirkt * professionell". Professionell wirkt nicht die einzelne schoene Seite, * sondern die Erwartbarkeit: dass die naechste Seite aussieht wie die * vorige. * * WARUM NICHT app.css * app.css ist fuer die angemeldete Oberflaeche geschrieben - Kacheln, * Tabellen, Menueband. Auf einer Werbeseite ist davon nichts brauchbar. * * ==================================================================== * DIE FARBEN KOMMEN VON www.haus-it.de - DAS IST DAS CD. * * Diese Datei hat die Frage zweimal beantwortet, und beim zweiten Mal * anders. Beide Male wurde gemessen; was sich geaendert hat, ist die * QUELLE, auf die man sich beruft. * * ERSTE FASSUNG - aus der Logodatei (public/assets/logo.png, 820x315, * Pixel gezaehlt): * * #BD1D1D 30.412 Pixel Rot * #F07D00 7.660 Pixel Orange * #1D1D1B 1.478 Pixel Schwarz * * Daraus wurde Rot zur Leitfarbe gemacht - mit dem guten Grund, dass es * als einzige der drei weissen Text traegt (6,29:1) UND als Schrift auf * Weiss lesbar ist. * * ZWEITE FASSUNG - auf der Website gemessen (03.09.2026, jede * berechnete Farbe jedes Elements gezaehlt): * * #F48600 256 Fundstellen Ueberschriften, Knopfschrift * #222222 373 Fundstellen Text * Rot: kommt nicht vor * * Damit ist die Frage entschieden: Das CD des Unternehmens ist das, * was das Unternehmen zeigt. Rot steht im Logo, aber es ist nicht die * Farbe, unter der Haus iT auftritt. * * WELCHE FARBE WAS TRAEGT - gerechnet, nicht gewaehlt (WCAG 2.2, 1.4.3): * * #222222 auf #F48600 6,26:1 ok <- so macht es die Website * #F48600 auf #222222 6,26:1 ok <- Fuss, dunkle Flaechen * #F48600 als Text auf Weiss 2,54:1 DURCHGEFALLEN * weisser Text auf #F48600 2,54:1 DURCHGEFALLEN * #AD5F00 als Text auf Weiss 4,76:1 ok <- derselbe Ton, tiefer * #222222 auf Weiss 15,91:1 ok * * Die Website selbst haelt sich nicht ganz daran: Ihre Ueberschriften * stehen orange auf hellgrauem Grund, 2,39:1. Das nachzubauen hiesse, * einen Fehler mitzunehmen. Stattdessen: Vollton-Orange fuer FLAECHEN * und fuer Schrift auf Dunkel, --marke-text (#AD5F00, gleicher Farbton * 33 Grad, gleiche Saettigung, nur abgedunkelt) fuer Schrift auf Hell. * Nebeneinander sieht man den Zusammenhang; getrennt faellt niemandem * auf, dass es zwei Werte sind. * * Rot bleibt - fuer Stoerungen (--stoerung). Dort ist Rot keine * Markenaussage, sondern eine Bedeutung. * ==================================================================== * * DIE SCHRIFT IST SELBST GEHOSTET, und zwar aus zwei Gruenden. * * Der eine ist Datenschutz: Ein auf fonts.googleapis.com * uebertraegt die IP jedes Besuchers an Google. Auf einer Seite, die mit * "Server in Deutschland" und Auftragsverarbeitung nach Artikel 28 * DSGVO wirbt, waere das ein Widerspruch, den ein aufmerksamer * Interessent findet (LG Muenchen I, 3 O 17493/20). * * Der andere ist die Sprachabdeckung: Die Oberflaeche gibt es in 21 * Sprachen, darunter Russisch und Ukrainisch. Archivo - die Schrift des * ersten Entwurfs - hat kein Kyrillisch; dort waere die Seite auf die * Systemschrift zurueckgefallen und haette anders ausgesehen als in den * uebrigen neunzehn. Commissioner traegt latin, latin-ext, cyrillic und * cyrillic-ext. * * Vier Dateien mit unicode-range: Der Browser laedt nur, was die Seite * tatsaechlich braucht - fuer eine deutsche Seite 37 kB, nicht 122. */ /* * DIE FARBEN KOMMEN VON www.haus-it.de - NICHT AUS DEM LOGO. * * Hier stand Rot (#BD1D1D) als Leitfarbe, weil es aus dem Logo kommt und * weissen Text traegt. Gemessen auf der Website am 03.09.2026: Rot kommt * dort ueberhaupt nicht vor. Die Leitfarbe ist ORANGE #F48600 - 256 * Fundstellen, Ueberschriften und Knopfbeschriftungen; Text ist #222222. * * WARUM DAS ORANGE ZWEI TOENE BRAUCHT * #F48600 hat auf Weiss nur 2,54:1. Das reicht fuer keinen Text - auch * nicht fuer grossen (3:1) und auch nicht fuer Symbole. Die Website * setzt es deshalb genau richtig ein: als FLAECHE und als Text auf * dunklem Grund, nie als helle Schrift. * * Orange als Flaeche, Text #222222 darauf ....... 6,26:1 ja * Orange als Text auf Weiss ..................... 2,54:1 nein * Weisser Text auf Orange ....................... 2,54:1 nein * * Wo Orange trotzdem Schrift sein muss - Links, Kleinueberschriften - * steht --marke-text: derselbe Farbton (33 Grad) und dieselbe Saettigung, * nur abgedunkelt, bis 4,5:1 erreicht sind. Es ist dieselbe Farbe, nur * eine Stufe tiefer; nebeneinander sieht man den Zusammenhang. * * Rot bleibt fuer eine Sache: Stoerung. Als Leitfarbe waere es eine * Behauptung ueber die Marke, die die Website nicht deckt. */ /* * DIE WERTE STEHEN IN cd.css - hier nur die Namen, unter denen diese * Datei sie kennt. Wer eine Farbe aendern will, aendert sie DORT, und * sie aendert sich ueberall: oeffentliche Seiten, Portal, Kachel und * die Wochenbericht-E-Mail. Zwei Orte fuer denselben Wert sind ein * Versprechen, das beim ersten Zeitdruck bricht. */ :root{ --marke: var(--cd-marke); --marke-tief: var(--cd-marke-tief); --marke-text: var(--cd-marke-text); --auf-marke: var(--cd-auf-marke); --akzent: var(--cd-marke); --akzent-weich:#FFF3E4; /* Orange stark aufgehellt, fuer Flaechen */ --akzent-rand: #F8D9AE; --stoerung: var(--cd-stoerung); --text: var(--cd-text); --leise: var(--cd-leise); --linie: var(--cd-linie); --grund: var(--cd-grund); --grund-2: var(--cd-grund-2); /* Richtung A ist eckig. 4 px, nicht 10 - ein Werkzeug hat Kanten. */ --rund: 4px; --rund-gross: 8px; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } body{ margin:0;background:var(--grund);color:var(--text); font:16px/1.65 "Commissioner","Segoe UI",Helvetica,Arial,sans-serif; font-synthesis-weight:none; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} img{max-width:100%;height:auto} a{color:var(--marke-text)} a:hover{color:var(--text)} .b{max-width:1180px;margin:0 auto;padding:0 40px} @media (max-width:900px){ .b{padding:0 28px} } @media (max-width:520px){ .b{padding:0 20px} } /* ------------------------------------------------------------- Kopf */ /* Weiss, Logo links, Navigation als schlichte Links rechts. Der dunkle Navigationskasten der ersten Fassung war von haus-it.de uebernommen; er zieht den Blick auf die Navigation statt auf die Aussage und macht den Kopf schwer. */ .kopf{position:sticky;top:0;z-index:30;background:var(--grund); border-bottom:1px solid var(--linie)} .kopf__i{display:flex;align-items:center;justify-content:space-between; gap:24px;height:78px} .kopf__logo{display:flex;align-items:center;text-decoration:none} .kopf__logo img{height:32px;width:auto;display:block} .kopf__nav{display:flex;align-items:center;gap:28px} .kopf__nav a{color:var(--leise);text-decoration:none;font-size:13px; font-weight:500;min-height:24px;display:inline-flex;align-items:center} .kopf__nav a:hover{color:var(--text)} @media (max-width:980px){ .kopf__i{height:auto;padding-block:12px;flex-wrap:wrap} .kopf__nav{order:3;width:100%;overflow-x:auto;gap:22px;padding-top:4px; -webkit-overflow-scrolling:touch;scrollbar-width:none} .kopf__nav::-webkit-scrollbar{display:none} .kopf__nav a{white-space:nowrap;flex:none} } /* ------------------------------------------------------------ Knoepfe */ .k{display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:16px 28px;border-radius:var(--rund);font-size:16px; font-weight:600;text-decoration:none;border:1.5px solid transparent; cursor:pointer;min-height:46px; transition:background .12s ease,border-color .12s ease,color .12s ease} /* Dunkler Text auf dem CD-Orange: 6,26:1. */ .k--haupt{background:var(--marke);color:var(--auf-marke);border-color:var(--marke)} .k--haupt:hover{background:var(--marke-tief);border-color:var(--marke-tief); color:var(--auf-marke)} .k--rand{background:transparent;color:var(--text);border-color:var(--text)} .k--rand:hover{background:var(--text);color:#fff} .k--dunkel{background:var(--text);color:#fff;border-color:var(--text)} .k--dunkel:hover{background:#000;border-color:#000;color:#fff} .k--hell{background:#fff;color:var(--text);border-color:#fff} .k--hell:hover{background:#EDECE9;border-color:#EDECE9} /* Der Fokusrahmen muss 3:1 erreichen (WCAG 1.4.11). Vollton-Orange hat auf Weiss 2,54:1 - also der dunklere Ton, 4,76:1. */ :focus-visible{outline:3px solid var(--marke-text);outline-offset:2px} /* -------------------------------------------------------------- Held */ /* * RICHTUNG A: DIE SCHLAGZEILE IST GROSS UND ENG, DIE ZAHLEN STEHEN * DIREKT DARUNTER. * * Die erste Fassung hatte einen Zweispalter - Text links, Bild rechts - * und die gemessenen Zahlen in einem dunklen Band weiter unten. Das ist * die Anordnung, die jede zweite Anbieterseite hat, und sie verschenkt * das Einzige, was hier nicht austauschbar ist: dass die Zahlen * nachgemessen sind. */ /* * overflow-x:clip, weil ein ZIERKREIS die Seitenbreite bestimmt hat. * * .schau-huelle::before sitzt absichtlich 24 px ueber der rechten * Kante. Auf dem Telefon (375 px) machte das aus der Seite 381 px: * gescrollt wurde nicht, aber der Browser zoomte die GANZE Seite um * 1,6 % heraus, damit sie hineinpasst. Ein Schmuckelement darf die * Breite eines Dokuments nicht bestimmen. * * clip statt hidden: hidden macht den Abschnitt zum Scroll-Behaelter * und nimmt allem darin position:sticky die Wirkung. clip schneidet * nur ab. */ .held{padding:80px 0 0;overflow-x:clip} @media (max-width:900px){ .held{padding:48px 0 0} } .marke-zeile{display:flex;align-items:center;gap:12px;margin:0 0 28px} .marke-zeile::before{content:"";width:34px;height:2px;background:var(--marke-text); flex:none} .marke-zeile span{font-size:13px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--marke-text)} h1{font-size:83px;line-height:.98;letter-spacing:-.045em;font-weight:800; margin:0 0 32px;max-width:15ch;text-wrap:balance} @media (max-width:1100px){ h1{font-size:57px} } @media (max-width:760px){ h1{font-size:40px;letter-spacing:-.035em} } @media (max-width:400px){ h1{font-size:33px} } .held__i{display:grid;grid-template-columns:1fr 1fr;gap:64px; align-items:start} @media (max-width:980px){ .held__i{grid-template-columns:1fr;gap:40px} } .held__text{font-size:19px;line-height:1.55;color:var(--leise); margin:0 0 36px;max-width:32em} @media (max-width:760px){ .held__text{font-size:16px} } .held__tun{display:flex;flex-wrap:wrap;gap:12px} .held__klein{font-size:13px;color:var(--leise);margin:0;line-height:1.5} /* * DAS ZAHLENRASTER. * * Zwei mal zwei, mit einer 2 px starken Oberlinie - die Linie sagt * "hier faengt etwas Eigenes an", ohne dass eine Ueberschrift noetig * waere. Tabellenziffern, weil vier Zahlen untereinander sonst * verschieden breit stehen und das Raster wackelt. */ .zahlen{display:grid;grid-template-columns:1fr 1fr; border-top:2px solid var(--text);margin-top:48px} .zahlen > div{padding:24px 24px 24px 0;border-bottom:1px solid var(--linie)} .zahlen > div:nth-child(2n){padding-left:24px;padding-right:0; border-left:1px solid var(--linie)} .zahlen > div:nth-last-child(-n+2){border-bottom:0} .zahlen b{display:block;font-size:40px;font-weight:700;line-height:1; letter-spacing:-.03em;font-variant-numeric:tabular-nums} .zahlen b small{font-size:19px;font-weight:600;color:var(--leise); letter-spacing:0} .zahlen span{display:block;font-size:13px;color:var(--leise); margin-top:8px;line-height:1.45} @media (max-width:420px){ .zahlen b{font-size:33px} .zahlen > div{padding-block:18px} } /* Das Schaubild bekommt einen Rahmen und eine Scheibe in der Akzentfarbe dahinter - sie bindet die helle Kachel an die Seite, ohne sie zu ueberdecken. */ .schau{border:1px solid var(--linie);border-radius:var(--rund-gross); overflow:hidden;box-shadow:0 24px 60px rgba(29,29,27,.14);background:#fff} .schau img{display:block;width:100%} .schau-huelle{position:relative} .schau-huelle::before{content:"";position:absolute; right:-24px;top:-24px;width:248px;height:248px;border-radius:50%; background:var(--akzent-weich);z-index:0} .schau-huelle > *{position:relative;z-index:1} /* ----------------------------------------------------------- Bloecke */ .blk{padding:76px 0} .blk--grau{background:var(--grund-2);border-block:1px solid var(--linie)} @media (max-width:640px){ .blk{padding:52px 0} } .blk__kopf{max-width:44em;margin:0 0 40px} .blk__kopf--mitte{margin-left:auto;margin-right:auto;text-align:center} h2{font-size:40px;line-height:1.1;letter-spacing:-.035em;margin:0 0 16px; font-weight:700} @media (max-width:760px){ h2{font-size:28px;letter-spacing:-.025em} } .blk__text{font-size:16px;color:var(--leise);margin:0;line-height:1.6} /* --------------------------------------------------------- Karten */ /* * Karten OHNE Rahmenkasten: nur eine Oberlinie. Sechs umrandete * Rechtecke nebeneinander waren die Stelle, an der die erste Fassung * "gebaut" statt "gestaltet" aussah - jedes gleich schwer, keines * fuehrt. */ .gitter{display:grid;gap:2px 34px; grid-template-columns:repeat(auto-fit,minmax(268px,1fr))} .karte{background:transparent;border:0;border-top:2px solid var(--linie); border-radius:0;padding:24px 0 32px} .karte h3{font-size:19px;margin:0 0 8px;font-weight:650;letter-spacing:-.01em} .karte p{margin:0;color:var(--leise);font-size:16px;line-height:1.65} .karte__z{width:38px;height:38px;color:var(--marke-text);display:flex; align-items:center;justify-content:center;margin:0 0 16px;flex:none} .karte__z svg{display:block;width:26px;height:26px} /* ---------------------------------------------------------- Schritte */ .schritte{counter-reset:s;list-style:none;padding:0;margin:0; display:grid;gap:2px 34px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .schritte li{counter-increment:s;position:relative;background:transparent; border:0;border-top:2px solid var(--linie);border-radius:0; padding:20px 0 28px} .schritte li::before{content:counter(s,decimal-leading-zero);display:block; font-size:13px;font-weight:700;color:var(--marke-text); letter-spacing:.1em;margin:0 0 12px;font-variant-numeric:tabular-nums} .schritte b{display:block;margin:0 0 8px;font-size:16px;font-weight:650; letter-spacing:-.01em} .schritte span{color:var(--leise);font-size:16px;line-height:1.65} /* ----------------------------------------------------------- Systeme */ /* * EIN GITTER OHNE ABSTAENDE: Die Felder teilen sich ihre Linien, wie * eine Tabelle. Das sieht nach Bestandsliste aus statt nach * Logo-Sammlung - und genau das ist es. */ /* * DIE LINIEN KOMMEN VON DEN ZELLEN, NICHT VOM GITTER. * * Zuerst war der Gitterhintergrund die Linienfarbe und die Zellen * weiss - eine uebliche Abkuerzung. Sie hat einen Haken, der genau * hier auffaellt: Zwoelf Systeme in sieben Spalten lassen in der * zweiten Reihe zwei Plaetze frei, und dort scheint der graue Grund * durch. Das sieht aus wie ein Ladefehler. * * Jetzt traegt jede Zelle ihre rechte und untere Linie, der Rahmen die * obere und linke. Freie Plaetze bleiben weiss. */ .sys{display:grid;gap:0;background:#fff; border-top:1px solid var(--linie);border-left:1px solid var(--linie); grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .sys__e{background:#fff;padding:20px 12px 16px;text-align:center; border-right:1px solid var(--linie);border-bottom:1px solid var(--linie); display:flex;flex-direction:column;align-items:center; justify-content:center;gap:11px;min-height:104px} .sys__e img{height:28px;width:auto;max-width:100%;object-fit:contain; filter:grayscale(1);opacity:.72;transition:filter .15s ease,opacity .15s ease} .sys__e:hover img{filter:none;opacity:1} .sys__e span{font-size:13px;color:var(--leise);line-height:1.35} /* * Ein System ohne Bildzeichen steht als Wort da - etwas groesser, * damit die Kachel nicht wie eine halb geladene aussieht. * * ABER IN DERSELBEN FARBE wie die uebrigen Namen. Zuerst war es fett * und schwarz; damit zog ausgerechnet das eine System den Blick auf * sich, dem ein Logo fehlt - genau umgekehrt zur Absicht. */ .sys__e--wort span{font-size:13px;font-weight:500;color:var(--leise); max-width:14ch} /* ------------------------------------------------------------ Preise */ .preise{display:grid;gap:2px 34px; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); align-items:stretch} .pk{background:transparent;border:0;border-top:2px solid var(--linie); border-radius:0;padding:24px 0 28px;display:flex;flex-direction:column; position:relative} .pk--her{border-top-color:var(--marke);padding-top:44px} .pk__marke{position:absolute;top:-2px;left:0;background:var(--marke); color:var(--auf-marke);font-size:11px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;padding:4px 12px} .pk h3{font-size:13px;margin:0 0 12px;font-weight:600;color:var(--leise); letter-spacing:.04em;text-transform:uppercase} .pk__zahl{font-size:40px;font-weight:700;line-height:1;margin:0; letter-spacing:-.03em;font-variant-numeric:tabular-nums} .pk__zahl small{font-size:16px;font-weight:500;color:var(--leise); letter-spacing:0} .pk__sub{margin:12px 0 0;color:var(--leise);font-size:16px;line-height:1.6} /* --------------------------------------------------------- Beratung */ .rat{background:var(--text);color:#fff;padding:76px 0} .rat h2{color:#fff} .rat p{color:rgba(255,255,255,.78);font-size:16px;max-width:40em; line-height:1.65} .rat__tun{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 0} .rat a.k--hell{color:var(--text)} /* Auf dunklem Grund traegt das Rot zu wenig Kontrast (2,6:1 gegen #1D1D1B). Der Hauptknopf wird dort weiss mit dunkler Schrift. */ .rat .k--haupt{background:#fff;color:var(--text);border-color:#fff} .rat .k--haupt:hover{background:#EDECE9;border-color:#EDECE9;color:var(--text)} /* ------------------------------------------------------------- Fuss */ .fuss{background:var(--text);color:rgba(255,255,255,.66); padding:44px 0 36px;font-size:13px; border-top:1px solid rgba(255,255,255,.12)} .fuss__i{display:flex;flex-wrap:wrap;gap:20px 44px; justify-content:space-between;align-items:flex-start} .fuss a{color:rgba(255,255,255,.84);text-decoration:none;margin-right:20px; display:inline-block;padding:4px 0} .fuss a:hover{color:var(--akzent);text-decoration:underline} .fuss__recht{margin-top:28px;padding-top:20px; border-top:1px solid rgba(255,255,255,.13);font-size:13px; color:rgba(255,255,255,.5);line-height:1.6} /* -------------------------------------------------------- Sprachwahl */ .spr{display:inline-flex;align-items:center;gap:6px} .spr select{background:rgba(255,255,255,.07);color:#fff; border:1px solid rgba(255,255,255,.22);border-radius:var(--rund); padding:8px 12px;font:inherit;font-size:13px;min-height:38px} .spr option{color:var(--text)} .liste{list-style:none;padding:0;margin:0} .liste li{position:relative;padding:0 0 12px 28px;color:var(--leise); font-size:16px;line-height:1.6} .liste li::before{content:"";position:absolute;left:2px;top:9px; width:9px;height:9px;background:var(--marke-text)} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ==================================================================== * FLIESSTEXT - fuer die Seiten, die etwas erklaeren statt zu werben. * * Die Kachel- und die Herstellerseite sind Lesetexte: Absaetze, Listen, * Schrittfolgen. Sie brauchen eine Spalte, die man lesen kann, und * keine ueber die ganze Breite. * * 38em Zeilenlaenge. Die Leseforschung (Tinker, spaeter * Dyson/Haselgrove) findet das Optimum zwischen 45 und 75 Zeichen je * Zeile; darunter springt das Auge zu oft um, darueber findet es den * Zeilenanfang nicht wieder. 38em liegen bei dieser Schrift um 70 * Zeichen. * ==================================================================== */ .lese{max-width:38em} .lese p,.lese li{font-size:16px;line-height:1.7} .lese p{margin:0 0 16px} .lese h2{margin:44px 0 16px} .lese h3{font-size:19px;margin:32px 0 8px;font-weight:650; letter-spacing:-.015em} .lese ul,.lese ol{padding-left:24px;margin:0 0 20px} .lese li{margin:0 0 8px} .lese li::marker{color:var(--marke-text)} .lese strong{font-weight:650} /* Eine Schrittfolge ist keine Aufzaehlung: Die Reihenfolge ist die Aussage. Die Zahl steht deshalb hervorgehoben und nicht als Punkt. */ .lese ol.folge{list-style:none;padding:0;counter-reset:f} .lese ol.folge > li{counter-increment:f;position:relative; padding:0 0 20px 48px;margin:0} .lese ol.folge > li::before{content:counter(f,decimal-leading-zero); position:absolute;left:0;top:2px;font-size:13px;font-weight:700; color:var(--marke-text);letter-spacing:.06em; font-variant-numeric:tabular-nums} /* Ein Kasten fuer das, was man nicht ueberlesen darf. */ .merk{border-left:3px solid var(--marke-text);background:var(--akzent-weich); padding:20px 24px;margin:0 0 20px} .merk p:last-child{margin-bottom:0} /* Tabellen laufen in einer eigenen Rolle - eine breite Tabelle darf niemals die Seite waagerecht scrollen lassen. */ .tab-huelle{overflow-x:auto;margin:0 0 20px; border:1px solid var(--linie)} table.tab{border-collapse:collapse;width:100%;font-size:16px} table.tab th,table.tab td{text-align:left;padding:12px 16px; border-bottom:1px solid var(--linie)} table.tab th{background:var(--grund-2);font-weight:650;white-space:nowrap} table.tab tr:last-child td{border-bottom:0} /* Der Seitentitel oben auf einer Unterseite - dieselbe Rolle wie der Held auf der Startseite, nur ohne Zahlenraster. */ .titel{padding:64px 0 40px;border-bottom:1px solid var(--linie)} @media (max-width:640px){ .titel{padding:40px 0 28px} } .titel h1{font-size:57px;margin:0 0 16px;max-width:20ch} @media (max-width:1100px){ .titel h1{font-size:48px} } @media (max-width:640px){ .titel h1{font-size:33px} } .titel__sub{font-size:19px;color:var(--leise);margin:0;max-width:36em; line-height:1.6} /* Ein Brotkrumenpfad: Wer ueber eine Suchmaschine auf einer Unterseite landet, muss zurueckfinden, ohne den Zurueck-Knopf zu suchen. */ .krume{font-size:13px;color:var(--leise);margin:0 0 24px; letter-spacing:.02em} .krume a{text-decoration:none} .krume a:hover{text-decoration:underline} .krume span{margin:0 8px;opacity:.5} /* ==================================================================== * RECHTSTEXTE - Datenschutzerklaerung und was ihr folgt. * * Ein Rechtstext wird anders gelesen als eine Werbeseite: nicht * ueberflogen, sondern an einer bestimmten Stelle nachgeschlagen. Er * braucht deshalb sichtbare Abschnittsgrenzen (Linie ueber jedem h2) * und Tabellen, in denen links die Frage und rechts die Antwort steht. * ==================================================================== */ .recht h1{font-size:33px;margin:0 0 8px;line-height:1.15} .recht .stand{color:var(--leise);font-size:13px;margin:0 0 28px; line-height:1.6} .recht h2{font-size:23px;margin:40px 0 12px;padding-top:24px; border-top:2px solid var(--linie);letter-spacing:-.02em} .recht h3{font-size:16px;margin:24px 0 8px;font-weight:650} .recht p,.recht li{line-height:1.7} .recht table{border-collapse:collapse;width:100%;margin:16px 0; font-size:16px} .recht th,.recht td{text-align:left;vertical-align:top; padding:12px 16px 12px 0;border-bottom:1px solid var(--linie)} .recht th{font-weight:650;width:34%} @media (max-width:560px){ /* Auf dem Telefon ist eine zweispaltige Tabelle nicht lesbar - die Zellen stapeln sich, die Frage bleibt fett ueber der Antwort. */ .recht table,.recht tbody,.recht tr,.recht th,.recht td{ display:block;width:auto} .recht th{border-bottom:0;padding-bottom:2px} .recht td{padding-top:0;padding-bottom:16px} } /* ==================================================================== * DIE SEITE FUER CRM- UND ERP-HERSTELLER. * * Sie hat Bestandteile, die keine andere braucht: das Systemraster mit * den drei Anbindungsarten, Formatkaesten mit Beispielantworten, eine * Zahlenreihe. Die Regeln stehen deshalb hier unten und gelten nur * unter .hp. * ==================================================================== */ .hp h2{font-size:28px;margin:48px 0 16px;letter-spacing:-.03em} .hp h2:first-of-type{margin-top:8px} .hp h3{font-size:16px;margin:0 0 8px;font-weight:650} .hp p,.hp li{line-height:1.7;font-size:16px} .hp li{margin:0 0 8px} .hp ul,.hp ol{padding-left:24px} .hp li::marker{color:var(--marke-text)} /* Die Zeilenlaenge: Absaetze laufen sonst ueber die volle Breite von 1180 px - bei 16,5 px Schrift rund 130 Zeichen je Zeile. Ueber 100 findet das Auge beim Zeilenwechsel den Anfang nicht mehr zuverlaessig wieder. Karten, Tabellen und Raster behalten die volle Breite - sie werden nicht gelesen, sondern ueberblickt. */ .hp > p, .hp > ul, .hp > ol, .hp > h2, .hp > h3{max-width:38em} .hp__karten{display:grid;gap:2px 34px; grid-template-columns:repeat(auto-fit,minmax(262px,1fr))} .hp__karte{background:transparent;border:0;border-top:2px solid var(--linie); border-radius:0;padding:20px 0 28px} .hp__karte p{font-size:16px;color:var(--leise);margin:0} .hp__karte--wichtig{border-top-color:var(--marke-text)} .hp__vier{display:grid;gap:2px 34px;grid-template-columns:repeat(4,1fr)} @media (max-width:780px){ .hp__vier{grid-template-columns:repeat(2,1fr)} } .hp__zahl{font-size:40px;font-weight:700;line-height:1;letter-spacing:-.03em; font-variant-numeric:tabular-nums} .hp__zahl small{display:block;font-size:13px;font-weight:400; color:var(--leise);margin-top:8px;line-height:1.45;letter-spacing:0} .hp__schau{display:grid;gap:20px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:16px 0} .hp__schau figure{margin:0} .hp__schau img{width:100%;height:auto;display:block;background:#fff; border:1px solid var(--linie);border-radius:var(--rund-gross)} .hp__schau figcaption{font-size:13px;color:var(--leise);margin-top:8px; line-height:1.5} .hp table{width:100%;border-collapse:collapse;font-size:16px} .hp th{text-align:left;font-weight:650;padding:12px 12px 12px 0; border-bottom:2px solid var(--text)} .hp td{padding:12px 12px 12px 0;vertical-align:top; border-bottom:1px solid var(--linie)} /* Die Anbindungsart. Farbe UND Wort - eine Ampel allein waere fuer rund acht Prozent der Maenner nicht lesbar (WCAG 1.4.1). */ .hp__weg{display:inline-block;font-size:13px;padding:3px 12px; white-space:nowrap;font-weight:600} .hp__weg--direkt,.hp__weg--eigen{background:#E7F3E4;color:#2C5A18} .hp__weg--spiegel{background:var(--grund-2);color:var(--leise); border:1px solid var(--linie)} .hp pre{background:var(--grund-2);border:1px solid var(--linie); padding:16px 16px;overflow-x:auto;font-size:13px;line-height:1.55} .hp code{font-size:13px} .hp__schritte{counter-reset:s;list-style:none;padding:0} .hp__schritte li{counter-increment:s;position:relative;padding-left:48px; margin:20px 0} .hp__schritte li::before{content:counter(s,decimal-leading-zero); position:absolute;left:0;top:2px;font-size:13px;font-weight:700; color:var(--marke-text);letter-spacing:.06em; font-variant-numeric:tabular-nums} /* DIE REIHE DER SYSTEME. Gleich grosse Felder, das Bildzeichen mittig, der Name darunter - so wirkt kein Hersteller wichtiger als ein anderer, nur weil sein Logo breiter ist. */ .hp__wand{display:grid;gap:0;margin:20px 0 4px;background:#fff; border-top:1px solid var(--linie);border-left:1px solid var(--linie); grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .hp__sys{background:#fff;padding:20px 12px;text-align:center;display:flex; border-right:1px solid var(--linie);border-bottom:1px solid var(--linie); flex-direction:column;align-items:center;justify-content:center; gap:11px;min-height:108px} .hp__sys img{width:38px;height:38px;object-fit:contain;filter:grayscale(1); opacity:.75} .hp__sys span{font-size:13px;line-height:1.35;color:var(--leise)} .hp__mockup{margin:20px 0 28px} .hp__mockup svg{width:100%;height:auto;display:block;background:var(--grund-2); border:1px solid var(--linie);border-radius:var(--rund-gross)} .hp__mockup figcaption{font-size:13px;color:var(--leise);margin-top:8px; line-height:1.5}