/* * Startseite von mangold-it.de. * * Baut ausschliesslich auf den Werten aus mi-design.css auf (--grund, --flaeche, * --ton, --akzent, --mint, .mi-btn, .mi-flaeche, .mi-label). Damit sieht diese * Seite aus wie mangold-software.de - dieselbe Palette, dieselben Schriften, * dieselben Bauteile. Wer hier Farben oder Radien direkt hineinschreibt, * zerstoert genau diese Familienaehnlichkeit. * * Zwei Dinge sind an dieser Datei wichtig und sollten beim Aendern nicht * verlorengehen: * * 1. Kein Inhalt darf allein durch ein Skript sichtbar werden. Die Seite ist * ohne JavaScript vollstaendig lesbar und bedienbar; JavaScript ergaenzt nur * das Menue auf schmalen Geraeten, das sanfte Einblenden und die Taste * "nach oben". * * 2. Die dichten Kartenbaender (.statleiste, .prinzip, .kartenband) ziehen ihre * Trennlinien NICHT ueber eine Hintergrundfarbe des Rasters, die durch die * 1px-Luecken scheint. Das waere kuerzer, malt aber die leeren Zellen der * letzten Zeile als gefuellten Block, sobald die Kartenzahl nicht durch die * Spaltenzahl teilbar ist. Stattdessen traegt jede Karte einen 1px-Ring * (box-shadow); benachbarte Ringe fallen in der 1px-Luecke zusammen und * ergeben genau eine Linie. Der Preis dafuer sind eckige Bandecken; das ist * gewollt. */ /* ------------------------------------------------------------- Grundlagen */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--grund);color:var(--ton); font-family:var(--schrift-text);font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden} img,svg,video{max-width:100%} h1,h2,h3,h4,p,ul,ol,figure,figcaption{margin:0} ul{padding:0;list-style:none} a{color:var(--akzent);text-decoration:none} a:hover{color:#ff9470} ::selection{background:var(--akzent);color:var(--akzent-schrift)} .mi-wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,6vw,72px)} .eyebrow{display:block;font-family:var(--schrift-mono);font-size:11px;font-weight:500; letter-spacing:.26em;text-transform:uppercase;color:var(--akzent);margin-bottom:16px} .lead{max-width:70ch;font-size:clamp(15px,1.1vw,17px);line-height:1.6;color:var(--ton-2)} .center{text-align:center} .center .lead{margin-left:auto;margin-right:auto} /* Ueberschriften: Sora, schwer, eng - der auffaelligste Zug des Entwurfs. */ h1,h2,h3{font-family:var(--schrift-titel);color:var(--ton);letter-spacing:-.038em;line-height:1.04} /* * Ueberschriftengroesse: nicht nur an der Breite, auch an der HOEHE messen. * Ein Notebook ist breit, aber flach (1440 mal 900). Eine Groesse allein nach * der Breite schiebt dort Text und Schaltflaechen unter die Bildkante. */ h1{font-weight:800;font-size:clamp(32px,min(4.4vw,6.6vh),66px);line-height:1;letter-spacing:-.04em;text-wrap:balance} h2{font-weight:800;font-size:clamp(25px,min(2.9vw,4.2vh),42px);text-wrap:balance} h3{font-weight:700;font-size:20px;letter-spacing:-.025em} section{position:relative} main > section{padding:clamp(48px,6vh,84px) 0} .kopfzeile{max-width:64ch;margin-bottom:clamp(26px,3.6vh,44px)} .kopfzeile.center{margin-left:auto;margin-right:auto} .kopfzeile .lead{margin-top:16px} /* Nur fuer Hilfsmittel sichtbar. */ .nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* Sprung zum Inhalt: erscheint erst beim Anspringen mit der Tastatur. */ .sprung{position:absolute;left:16px;top:-60px;z-index:60;padding:12px 20px;border-radius:var(--radius); background:var(--akzent);color:var(--akzent-schrift);font-weight:700;transition:top .15s} .sprung:focus{top:16px;color:var(--akzent-schrift)} /* Sanftes Einblenden. Ohne JavaScript bleibt alles sichtbar: die Klasse .js auf wird erst gesetzt, wenn ein Skript laeuft. */ .js .auf{opacity:0;transform:translateY(18px); transition:opacity .5s cubic-bezier(.21,.8,.35,1),transform .5s cubic-bezier(.21,.8,.35,1)} .js .auf.da{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.js .auf{opacity:1;transform:none;transition:none}} /* ------------------------------------------------------------------- Kopf */ .kopf{position:fixed;top:0;left:0;right:0;z-index:40; background:linear-gradient(rgba(4,20,28,.94),rgba(4,20,28,.62) 70%,rgba(4,20,28,0)); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .kopf .mi-wrap{display:flex;align-items:center;gap:24px;height:70px} .marke{display:flex;align-items:center;gap:11px;color:var(--ton);flex:none} .marke:hover{color:var(--ton)} .marke svg{width:26px;height:26px;display:block} .marke b{font-family:var(--schrift-titel);font-weight:700;font-size:19px;letter-spacing:-.03em} .marke i{display:block;font-style:normal;font-family:var(--schrift-mono);font-size:9.5px; font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ton-4);margin-top:2px} .markentext{display:flex;flex-direction:column;line-height:1} .kopfnav{display:flex;align-items:center;gap:26px;margin-left:auto} .kopfnav a{font-size:14.5px;color:var(--ton-2);font-weight:500;white-space:nowrap} .kopfnav a:hover{color:var(--ton)} /* Die Regel ".kopfnav a" oben faerbt sonst auch die Schaltflaeche ein - heller Text auf Orange, und das ist nicht lesbar. */ .kopfnav .mi-btn{padding:11px 20px;font-size:14.5px} .kopfnav .mi-btn-primaer,.kopfnav .mi-btn-primaer:hover{color:var(--akzent-schrift)} .menutaste{display:none;margin-left:auto;width:42px;height:42px;flex:none; align-items:center;justify-content:center;border-radius:var(--radius); border:1px solid var(--linie-stark);background:transparent;color:var(--ton);cursor:pointer} .menutaste svg{width:20px;height:20px} .menutaste .zu{display:none} .menutaste[aria-expanded="true"] .auf-i{display:none} .menutaste[aria-expanded="true"] .zu{display:block} @media (max-width:980px){ .js .menutaste{display:inline-flex} .js .kopfnav{position:fixed;top:70px;left:0;right:0;margin:0;flex-direction:column; align-items:stretch;gap:4px;padding:16px clamp(20px,6vw,72px) 24px; background:var(--flaeche);border-bottom:1px solid var(--linie)} .js .kopfnav[hidden]{display:none} .js .kopfnav a{padding:12px 4px;font-size:16px} .js .kopfnav .mi-btn{margin-top:8px;justify-content:center} } /* Ohne JavaScript gibt es keine Menuetaste, die etwas aufklappen koennte. Der Kopf wird deshalb zu einer schlichten Leiste, die umbricht. */ html:not(.js) .kopf{position:relative;background:var(--grund);border-bottom:1px solid var(--linie)} html:not(.js) .kopf .mi-wrap{height:auto;flex-wrap:wrap;padding-top:14px;padding-bottom:14px} html:not(.js) .kopfnav{flex-wrap:wrap;gap:14px 20px} html:not(.js) .menutaste{display:none} html:not(.js) .hero{padding-top:clamp(48px,7vh,80px)!important} /* ------------------------------------------------------------- Kopfbereich */ .hero{padding:clamp(112px,14vh,152px) 0 clamp(44px,6vh,72px)!important;overflow:hidden} .hero::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(58vw 52vh at 88% 14%,rgba(255,106,61,.20),transparent 68%), radial-gradient(46vw 42vh at 8% 92%,rgba(127,212,193,.10),transparent 70%)} .hero::after{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(rgba(234,243,245,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(234,243,245,.05) 1px,transparent 1px); background-size:140px 140px; -webkit-mask-image:linear-gradient(180deg,transparent,#000 24%,#000 66%,transparent); mask-image:linear-gradient(180deg,transparent,#000 24%,#000 66%,transparent)} .hero .mi-wrap{position:relative;z-index:1} .hero .oben{display:grid;grid-template-columns:1.06fr .94fr;align-items:center;gap:clamp(28px,4vw,72px)} .hero h1{margin-bottom:clamp(14px,2.4vh,26px)} .hero h1 .akz{color:var(--akzent)} .hero .heroTx{max-width:56ch;margin-bottom:clamp(20px,3vh,34px); font-size:clamp(15px,1.25vw,19px);line-height:1.6;color:var(--ton-2)} .hero .taten{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:clamp(16px,3vh,30px)} .hero .taten .mi-btn{padding:16px 30px} .hero .hinweis{max-width:60ch;font-size:14px;line-height:1.6;color:var(--ton-3)} /* Die Tafel rechts im Kopfbereich ist kein Screenshot, sondern eine gezeichnete Uebersicht. Sie bleibt richtig, wenn sich eine Oberflaeche aendert. */ .heroTafel{position:relative;border-radius:var(--radius-gross);overflow:hidden; border:1px solid var(--linie-stark);background:var(--flaeche); box-shadow:0 40px 90px rgba(0,0,0,.5);padding:clamp(18px,2vw,26px)} .heroTafel .tafelkopf{display:flex;align-items:center;gap:8px;margin-bottom:18px} .heroTafel .tafelkopf span{width:9px;height:9px;border-radius:50%;background:var(--linie-stark)} .heroTafel .tafelkopf small{margin-left:auto;font-family:var(--schrift-mono);font-size:10.5px; letter-spacing:.16em;text-transform:uppercase;color:var(--ton-4)} .heroTafel .zeile{display:flex;align-items:center;gap:14px;padding:14px 12px;border-radius:var(--radius); background:rgba(234,243,245,.03);border:1px solid var(--linie);margin-bottom:10px} .heroTafel .zeile:last-of-type{margin-bottom:0} .heroTafel .zeile .pkt{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center; background:rgba(255,106,61,.12)} .heroTafel .zeile .pkt svg{width:19px;height:19px;display:block;fill:none;stroke:var(--akzent); stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .heroTafel .zeile b{display:block;font-family:var(--schrift-titel);font-weight:700;font-size:14.5px; letter-spacing:-.02em;color:var(--ton)} .heroTafel .zeile em{display:block;font-style:normal;font-size:12.5px;color:var(--ton-3);margin-top:2px} .heroTafel .zeile .zst{margin-left:auto;flex:none;font-family:var(--schrift-mono);font-size:10px; letter-spacing:.14em;text-transform:uppercase;color:var(--ton-4); border:1px solid var(--linie);border-radius:var(--radius-pille);padding:5px 10px;white-space:nowrap} .heroTafel .zeile .zst.live{color:var(--mint);border-color:rgba(127,212,193,.4)} /* Kennzahlen unter dem Einleitungstext. */ .statleiste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:clamp(24px,4vh,40px)} .statleiste .stat{background:var(--flaeche);box-shadow:0 0 0 1px var(--linie);padding:20px 18px} .statleiste .stat b{display:block;font-family:var(--schrift-titel);font-weight:700; font-size:20px;letter-spacing:-.02em;color:var(--ton)} .statleiste .stat span{display:block;margin-top:6px;font-size:13.5px;line-height:1.45;color:var(--ton-3)} @media (max-width:900px){.statleiste{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:480px){.statleiste .stat{padding:14px}.statleiste .stat b{font-size:17px}} /* Auf schmalen Geraeten bleibt die Reihenfolge wie im Quelltext: erst Ueberschrift und Aufforderung, dann die Tafel. */ @media (max-width:980px){ .hero .oben{grid-template-columns:minmax(0,1fr)} } /* Vertrauensleiste. */ .vertrauen{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie); background:var(--flaeche);padding:18px 0!important} .vertrauen .mi-wrap{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:center} .vertrauen .ti{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ton-2)} .vertrauen .ti svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--mint);stroke-width:2; stroke-linecap:round;stroke-linejoin:round} /* --------------------------------------------------------------- Software */ /* Die grosse Karte, die auf mangold-software.de verweist. */ .brueckenkarte{position:relative;overflow:hidden; display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(24px,3vw,48px);align-items:center; background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-gross); padding:clamp(24px,3vw,40px)} .brueckenkarte::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--akzent)} .brueckenkarte::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(38% 120% at 100% 0%,rgba(255,106,61,.14),transparent 72%)} .brueckenkarte > *{position:relative;z-index:1} .brueckenkarte .prodkopf{display:flex;align-items:center;gap:14px;margin-bottom:18px} .brueckenkarte .prodmark{width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center; background:rgba(255,106,61,.16);border:1px solid rgba(255,106,61,.34)} .brueckenkarte .prodmark svg{width:26px;height:26px;display:block} .brueckenkarte h3{font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.035em} .brueckenkarte .prodtx{font-size:clamp(15px,1.1vw,16.5px);line-height:1.62;color:var(--ton-2);max-width:56ch} .brueckenkarte .merkmale{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px} .brueckenkarte .merkmale span{font-family:var(--schrift-mono);font-size:11px;letter-spacing:.07em; color:var(--ton-3);border:1px solid var(--linie);border-radius:var(--radius-pille);padding:7px 12px} .brueckenkarte .taten{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:26px} .zst{font-family:var(--schrift-mono);font-size:10px;font-weight:500;letter-spacing:.16em; text-transform:uppercase;color:var(--ton-3);border:1px solid var(--linie-stark); border-radius:var(--radius-pille);padding:5px 11px;white-space:nowrap} .zst.live{color:var(--mint);border-color:rgba(127,212,193,.42)} .zst.beta{color:var(--warn);border-color:rgba(255,179,92,.42)} @media (max-width:900px){.brueckenkarte{grid-template-columns:minmax(0,1fr)} .brueckenkarte .prodkopf{flex-wrap:wrap}} /* Die vier Produkte als schmale Zeilen in der rechten Spalte. */ .prodzeilen{display:grid;gap:1px;border-radius:var(--radius);overflow:hidden} .prodzeilen a{display:flex;align-items:center;gap:13px;padding:15px 17px; background:rgba(234,243,245,.03);box-shadow:0 0 0 1px var(--linie);color:var(--ton); transition:background .18s} .prodzeilen a:hover{background:var(--flaeche-hoch);color:var(--ton)} .prodzeilen .pkt{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center; background:color-mix(in srgb,var(--pf,var(--akzent)) 14%,transparent)} .prodzeilen .pkt svg{width:20px;height:20px;display:block} .prodzeilen b{display:block;font-family:var(--schrift-titel);font-weight:700;font-size:14px; letter-spacing:-.02em;color:var(--ton)} .prodzeilen em{display:block;font-style:normal;font-size:12.5px;line-height:1.45;color:var(--ton-3);margin-top:3px} .prodzeilen .zst{margin-left:auto;flex:none} /* --------------------------------------------------------------- Schwerpunkte */ .prinzip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px} .prinzip article{background:var(--flaeche);box-shadow:0 0 0 1px var(--linie);padding:clamp(22px,2.4vw,30px)} .prinzip .nr{font-family:var(--schrift-mono);font-size:11px;letter-spacing:.2em;color:var(--akzent)} .prinzip h3{margin:14px 0 9px;font-size:18px} .prinzip p{font-size:14.5px;line-height:1.6;color:var(--ton-2)} @media (max-width:900px){.prinzip{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:620px){.prinzip{grid-template-columns:minmax(0,1fr)}} /* Der Personenblock: Text links, Eckdaten rechts. */ .person{background:var(--flaeche);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)} .personoben{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(28px,4vw,64px);align-items:start;margin-bottom:clamp(28px,4vh,44px)} .personoben p + p{margin-top:14px} .eckdaten{display:grid;gap:1px;border-radius:var(--radius);overflow:hidden} .eckdaten div{background:var(--grund);box-shadow:0 0 0 1px var(--linie);padding:16px 18px} .eckdaten b{display:block;font-family:var(--schrift-titel);font-weight:700;font-size:14.5px; letter-spacing:-.02em;color:var(--ton)} .eckdaten span{display:block;margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--ton-3)} .person .prinzip article{background:var(--grund)} @media (max-width:900px){.personoben{grid-template-columns:minmax(0,1fr)}} /* ---------------------------------------------------------------- Werkzeuge */ .kartenband{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px} .kartenband a{display:block;background:var(--flaeche);box-shadow:0 0 0 1px var(--linie); padding:24px 22px;color:var(--ton);transition:background .18s} .kartenband a:hover{background:var(--flaeche-hoch);color:var(--ton)} .kartenband svg{width:19px;height:19px;fill:none;stroke:var(--akzent);stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px;display:block} .kartenband b{display:block;font-family:var(--schrift-titel);font-weight:700;font-size:15.5px; letter-spacing:-.02em} .kartenband span{display:block;margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--ton-3)} @media (max-width:900px){.kartenband{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:520px){.kartenband{grid-template-columns:minmax(0,1fr)}} /* * Der private Bereich steht bewusst als ruhige Zeile unter den offenen * Werkzeugen und nicht als Kachelwand: er ist kein Angebot an Besucher, * sondern eine Tuer fuer genau eine Person. */ .privat{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:clamp(20px,3vh,30px); padding:18px 22px;border:1px dashed var(--linie-stark);border-radius:var(--radius)} .privat .schloss{width:18px;height:18px;flex:none;fill:none;stroke:var(--ton-3);stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .privat p{font-size:13.5px;line-height:1.5;color:var(--ton-3);max-width:52ch;flex:1 1 260px} .privat .wege{display:flex;flex-wrap:wrap;gap:8px} .privat .wege a{font-family:var(--schrift-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase; color:var(--ton-2);border:1px solid var(--linie);border-radius:var(--radius-pille);padding:8px 14px; transition:border-color .15s,color .15s} .privat .wege a:hover{color:var(--ton);border-color:var(--ton-4)} /* --------------------------------------------------------------- Abschluss */ .abschluss .kasten{position:relative;overflow:hidden;text-align:center; border:1px solid var(--linie-stark);border-radius:var(--radius-gross); background:var(--flaeche);padding:clamp(34px,5vw,64px) clamp(22px,4vw,48px)} .abschluss .kasten::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 120% at 50% 0%,rgba(255,106,61,.16),transparent 70%)} .abschluss .kasten > *{position:relative;z-index:1} .abschluss .kasten p{max-width:60ch;margin:16px auto 0;color:var(--ton-2); font-size:clamp(15px,1.1vw,17px)} .abschluss .taten{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px} .abschluss .taten .mi-btn{padding:16px 30px} /* * Die E-Mail-Adresse liegt ausschliesslich als Bild vor - nicht im Quelltext, * nicht im Alternativtext. Deshalb bekommt sie hier einen eigenen Rahmen statt * einer Schaltflaeche: eine Schaltflaeche verspricht einen Klick, den es nicht * gibt. image-rendering bleibt auf der Vorgabe, damit die Kanten beim * Hochskalieren nicht ausfransen. */ .mailbild{display:inline-flex;flex-direction:column;align-items:center;gap:10px; margin-top:28px;padding:16px 26px;border:1px solid var(--linie);border-radius:var(--radius); background:rgba(234,243,245,.03)} .mailbild img{display:block;height:23px;width:auto;opacity:.94} @media (max-width:420px){.mailbild{padding:14px 18px}.mailbild img{height:20px}} /* -------------------------------------------------------------------- Fuss */ .fuss{border-top:1px solid var(--linie);background:var(--flaeche);padding:clamp(40px,5vh,64px) 0 28px} .fussgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,3vw,48px)} .fussgrid h4{font-family:var(--schrift-titel);font-size:12px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--ton-3);margin-bottom:16px} .fussgrid a{display:block;font-size:14px;color:var(--ton-2);padding:5px 0} .fussgrid a:hover{color:var(--ton)} .fussgrid .marke a{padding:0} .fusstext{margin-top:16px;max-width:38ch;font-size:13.5px;line-height:1.6;color:var(--ton-3)} .fussunten{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between; margin-top:clamp(28px,4vh,44px);padding-top:22px;border-top:1px solid var(--linie); font-size:12.5px;line-height:1.6;color:var(--ton-4)} @media (max-width:900px){.fussgrid{grid-template-columns:1fr 1fr}} @media (max-width:520px){.fussgrid{grid-template-columns:1fr}} /* -------------------------------------------------------------- Nach oben */ .nachoben{position:fixed;right:20px;bottom:20px;z-index:35;width:44px;height:44px; display:grid;place-items:center;border-radius:50%;cursor:pointer; border:1px solid var(--linie-stark);background:var(--flaeche);color:var(--ton); opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .2s,transform .2s} .nachoben.sichtbar{opacity:1;pointer-events:auto;transform:none} .nachoben:hover{background:var(--flaeche-hoch)} html:not(.js) .nachoben{display:none} /* ============================================================ Startseite v2 * * Die Startseite ist eine Wegweiserseite, keine Selbstdarstellung. Deshalb ein * kuerzerer Kopfbereich ohne Kennzahlenleiste, die Werkzeuge als groesste * Flaeche der Seite und die Person auf drei Zeilen mit Verweis auf die eigene * Seite. */ /* Kopfbereich ohne Kennzahlenleiste: unten darf er enger schliessen. */ .hero-kurz{padding-bottom:clamp(30px,4vh,52px)!important} .hero-kurz .oben{align-items:center} /* Die Werkzeuge sind der Hauptinhalt und bekommen deshalb einen eigenen, leicht angehobenen Streifen statt einer weiteren Karte im Fluss. */ .werkzeuge-haupt{background:var(--flaeche); border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)} /* * Zwei Spalten statt vier: die Karten tragen jetzt einen erklaerenden Satz und * nicht mehr nur ein Stichwort. Vier nebeneinander ergaeben Textsaeulen von * wenigen Woertern Breite. */ .werkzeugraster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px} .werkzeugraster a{display:block;position:relative;background:var(--grund); box-shadow:0 0 0 1px var(--linie);padding:clamp(24px,2.6vw,32px); color:var(--ton);transition:background .18s} .werkzeugraster a:hover{background:var(--flaeche-hoch);color:var(--ton)} .werkzeugraster svg{width:22px;height:22px;display:block;margin-bottom:16px; fill:none;stroke:var(--akzent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .werkzeugraster b{display:block;font-family:var(--schrift-titel);font-weight:700; font-size:18px;letter-spacing:-.025em} .werkzeugraster span{display:block;margin-top:9px;font-size:14px;line-height:1.55;color:var(--ton-2)} .werkzeugraster em{display:inline-block;margin-top:14px;font-style:normal; font-family:var(--schrift-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--ton-4);border:1px solid var(--linie);border-radius:var(--radius-pille);padding:5px 11px} @media (max-width:820px){.werkzeugraster{grid-template-columns:minmax(0,1fr)}} /* Die Person: eine Zeile, kein Abschnitt. */ .wer .werkasten{display:flex;flex-wrap:wrap;align-items:center;gap:24px 40px; justify-content:space-between; border:1px solid var(--linie);border-radius:var(--radius-gross); background:var(--flaeche);padding:clamp(26px,3vw,40px)} .wer .werkasten > div:first-child{flex:1 1 380px} .wer .werkasten h2{font-size:clamp(22px,2.4vw,30px);margin-bottom:14px} .wer .werkasten .taten{display:flex;flex-wrap:wrap;gap:12px} /* Die Adresse sitzt jetzt in der Fusszeile und darf dort ruhiger auftreten. */ .mailbild-fuss{margin-top:20px;padding:12px 18px} .mailbild-fuss img{height:20px} /* * Empfehlung auf ein fremdes Werkzeug. * * Bewusst anders gebaut als die eigenen Kacheln: eigene Zeile, Markenkante * links, ausdrueckliche Kennzeichnung. Wer hierherkommt, soll auf einen Blick * sehen, dass das nicht von hier stammt und nicht unter meiner Kontrolle steht. */ .empfehlung{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px; margin-top:clamp(20px,3vh,30px);padding:20px 24px; border:1px solid var(--linie);border-left:3px solid var(--akzent); border-radius:var(--radius);background:rgba(234,243,245,.03)} .empfehlung .marke-extern{flex:1 1 320px} .empfehlung .kennung{display:flex;align-items:center;gap:10px;margin-bottom:7px} .empfehlung b{font-family:var(--schrift-titel);font-weight:700;font-size:16px; letter-spacing:-.02em;color:var(--ton)} .empfehlung .extern{font-family:var(--schrift-mono);font-size:9.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--ton-4);border:1px solid var(--linie); border-radius:var(--radius-pille);padding:4px 9px;white-space:nowrap} .empfehlung p{font-size:13.5px;line-height:1.55;color:var(--ton-3);max-width:62ch} .empfehlung .mi-btn{padding:12px 22px;font-size:14px}