Seiten-Sektion

Über uns

Die Vertrauens-Sektion einer Seite. Ganz oben die flexible Über-uns-Sektion — ein Gerüst nach dem Hero-Prinzip: Inhalts-Positionen (Über-Überschrift · Titel · Text · Beleg · Abschluss) und Optik (Anordnung · Medien · Bild-Akzent · Stil) werden über data-Achsen umgeschaltet, pro Position ist genau eine Option aktiv. Darunter sechs Einzel-Layouts (Werte-Raster, Zeitleiste, Gründer-Zitat, Leitbild, Auszeichnungen, „Warum wir") — die früheren Split-Varianten klar/craft/Mosaik sind in den Achsen der flexiblen Sektion aufgegangen. Ganz unten die Über-uns-Bauteile einzeln zum Einbetten. Alle copy-paste-fähig, Akzentfarbe über --akzent, barrierefrei.

Flexible Über-uns-Sektion — jede Position umschaltbar

Pol 2 · Klarheit Pol 1 · Craft Anlass: Vertrauens-Sektion jeder Seite Achsen: Eyebrow · Titel-Akzent · Beleg · Abschluss · Anordnung · Medien · Bild-Akzent · Stil (+ Handy) · alle Texte frei eingebbar

Ein Über-uns-Gerüst nach dem Hero-Prinzip: fünf Inhalts-Positionen von oben nach unten (Über-Überschrift schlicht oder mit Akzent-Strich, Text frei eingebbar · Titel mit schaltbarem Akzent-Wort · Text · Beleg als drei Mini-Kennzahlen oder Inhaber-Signatur · Abschluss als Text-Link oder Button, Beschriftung frei) plus Optik-Achsen (Bild links/rechts · Medien Foto/Mosaik/ohne · Bild-Akzent Badge/Glas-Karte · Stil klar/craft mit ruhendem Glow bei prefers-reduced-motion). Alle Texte sind im Panel frei eingebbar (Titel samt Akzent-Wort, Absätze, Kennzahlen, Signatur, Badge, Karte, Beschriftungen) — der Kopier-Code übernimmt sie fertig; Felder nicht aktiver Varianten blenden sich aus. „Foto" und Mosaik sind CSS-Verläufe — im Projekt echte Bilder einsetzen. Nicht genutzte Varianten können im Markup gelöscht werden.

Über uns

Handwerk, auf das man sich verlassen kann.

Wir sind ein Familienbetrieb aus der Region. Was wir anfangen, bringen wir sauber zu Ende — ohne Überraschungen auf der Rechnung.

Jeder Auftrag wird vom Meister abgenommen. Erst wenn alles sitzt, sind wir fertig.

16Jahre Erfahrung
1.200+Projekte
4,9 ★Bewertung

Max SanderInhaber & Meister

Mehr über uns Mehr über uns

Seit 2008

16Jahre
Meisterbetrieb

Inhalte

Über-Überschrift

Über-Überschrift — Text

Titel

Akzent-Wort

Titel-Akzent

Absatz 1

Absatz 2

Beleg

Kennzahl 1

Kennzahl 2

Kennzahl 3

Signatur — Initialen

Signatur — Name

Signatur — Rolle

Abschluss

Abschluss — Text

Badge — Text

Karte — Zahl

Karte — Text

Optik

Button-Form

Anordnung

Medien

Bild-Akzent

Stil

Bild (mobil)

<!-- Achsen am section-Element (.site-ueberuns):
     data-layout     = bild-links | bild-rechts      (Anordnung: Bild links vom Text oder rechts davon)
     data-medien     = foto | mosaik | ohne          (Medienhälfte: großes Foto · 3er-Bild-Mosaik · keine, Text volle Breite)
     data-bildakzent = aus | badge | karte           (nur bei Foto: Glas-Badge unten links · Glas-Karte mit Kennzahl unten rechts)
     data-stil       = klar | craft                  (ruhige Fläche · Verlauf mit Akzent-Glow hinterm Bild)
     data-eyebrow    = aus | schlicht | strich       (Über-Überschrift: Uppercase-Zeile · mit Akzent-Strich davor)
     data-akzentwort = aus | an                      (das <em>-Wort im Titel in Akzentfarbe)
     data-beleg      = aus | kennzahlen | signatur   (Beleg unterm Text: 3 Mini-Kennzahlen · Inhaber-Signatur)
     data-abschluss  = aus | link | button           (Abschluss: Text-Link mit Pfeil · Akzent-Button)
     data-btnform    = eckig | abgerundet | pill     (Form des Abschluss-Buttons; wirkt nur bei Abschluss "button")
     data-mbild      = oben | unten                  (Handy: Bild über oder unter dem Text)
     Nicht genutzte Eyebrow-/Beleg-/Abschluss-Varianten kannst du im Markup löschen — die Achsen blenden sie ohnehin aus.
     „Foto"/Mosaik sind CSS-Verläufe — im Projekt echte Bilder einsetzen (background:url(…) bzw. <img>). -->
<section class="site-ueberuns" data-layout="bild-links" data-medien="foto" data-bildakzent="badge" data-stil="klar" data-eyebrow="schlicht" data-akzentwort="an" data-beleg="kennzahlen" data-abschluss="link" data-btnform="abgerundet" data-mbild="oben">
  <div class="site-ueberuns__in">
    <div class="site-ueberuns__txt">
      <p class="site-ueberuns__eye site-ueberuns__eye--schlicht">Über uns</p>
      <p class="site-ueberuns__eye site-ueberuns__eye--strich">Über uns</p>
      <h2 class="site-ueberuns__titel">Handwerk, auf das man sich <em>verlassen</em> kann.</h2>
      <p class="site-ueberuns__text">Wir sind ein Familienbetrieb aus der Region. Was wir anfangen, bringen wir sauber zu Ende — ohne Überraschungen auf der Rechnung.</p>
      <p class="site-ueberuns__text">Jeder Auftrag wird vom Meister abgenommen. Erst wenn alles sitzt, sind wir fertig.</p>
      <ul class="site-ueberuns__beleg site-ueberuns__beleg--zahlen">
        <li><b>16</b><small>Jahre Erfahrung</small></li>
        <li><b>1.200+</b><small>Projekte</small></li>
        <li><b>4,9 ★</b><small>Bewertung</small></li>
      </ul>
      <div class="site-ueberuns__beleg site-ueberuns__beleg--sign">
        <span class="site-ueberuns__mark" aria-hidden="true">MS</span>
        <div><b>Max Sander</b><small>Inhaber &amp; Meister</small></div>
      </div>
      <a class="site-ueberuns__schluss site-ueberuns__schluss--link" href="#">Mehr über uns <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
      <a class="site-ueberuns__schluss site-ueberuns__schluss--btn" href="#">Mehr über uns</a>
    </div>
    <div class="site-ueberuns__media">
      <div class="site-ueberuns__glow" aria-hidden="true"></div>
      <div class="site-ueberuns__bild" aria-hidden="true"></div>
      <div class="site-ueberuns__mosaik" aria-hidden="true"><i class="hoch"></i><i></i><i></i></div>
      <span class="site-ueberuns__badge">Seit 2008</span>
      <figure class="site-ueberuns__karte"><b>16</b><span>Jahre<br>Meisterbetrieb</span></figure>
    </div>
  </div>
</section>

<style>
.site-ueberuns{position:relative;width:100%;overflow:hidden;background:#101014;color:#e9e9ee}
.site-ueberuns__in{position:relative;width:100%;max-width:1120px;margin:0 auto;
  padding:clamp(2.2rem,6vw,4.5rem) clamp(1.2rem,4vw,2.5rem);
  display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(1.6rem,4vw,3rem);align-items:center}

/* Achse Stil: klar = ruhige Fläche · craft = Verlauf + Akzent-Glow hinterm Bild */
.site-ueberuns[data-stil="craft"]{background:radial-gradient(130% 120% at 100% 0%,#1c1c28 0%,#141319 55%,#101014 100%)}
.site-ueberuns__glow{position:absolute;width:240px;height:240px;top:-40px;left:-30px;border-radius:50%;
  filter:blur(60px);opacity:.55;z-index:0;display:none;
  background:radial-gradient(circle,var(--akzent,#7c87ff) 0%,transparent 70%);
  animation:sueber-float 14s ease-in-out infinite alternate;will-change:transform}
.site-ueberuns[data-stil="craft"] .site-ueberuns__glow{display:block}
@keyframes sueber-float{0%{transform:translate(0,0) scale(1)}100%{transform:translate(26px,-20px) scale(1.12)}}

/* Textspalte — Positionen von oben nach unten */
.site-ueberuns__txt{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;min-width:0}

/* Position 1 · Über-Überschrift — pro Achse ist genau EINE Variante sichtbar */
.site-ueberuns__eye{display:none;margin:0;font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--akzent,#7c87ff)}
.site-ueberuns[data-eyebrow="schlicht"] .site-ueberuns__eye--schlicht{display:inline-block}
.site-ueberuns[data-eyebrow="strich"] .site-ueberuns__eye--strich{display:inline-flex;align-items:center;gap:.6em}
.site-ueberuns__eye--strich::before{content:"";width:26px;height:1px;background:var(--akzent,#7c87ff)}

/* Position 2 · Titel — das <em>-Wort färbt sich über data-akzentwort */
.site-ueberuns__titel{margin:0;font-size:clamp(1.5rem,3.4vw,2.15rem);line-height:1.14;
  letter-spacing:-.015em;color:#f4f4f5}
.site-ueberuns__titel em{font-style:normal;color:inherit}
.site-ueberuns[data-akzentwort="an"] .site-ueberuns__titel em{color:var(--akzent,#7c87ff)}

/* Position 3 · Text (zweiten Absatz bei Bedarf im Markup löschen) */
.site-ueberuns__text{margin:0;font-size:.95rem;line-height:1.6;color:#a1a1aa;max-width:46ch}

/* Position 4 · Beleg — Kennzahlen ODER Inhaber-Signatur */
.site-ueberuns__beleg{display:none;margin:.4rem 0 0}
.site-ueberuns[data-beleg="kennzahlen"] .site-ueberuns__beleg--zahlen{display:flex;flex-wrap:wrap;
  gap:1.8rem;list-style:none;padding:0}
.site-ueberuns__beleg--zahlen b{display:block;font-size:1.5rem;font-weight:800;color:#f4f4f5;line-height:1}
.site-ueberuns__beleg--zahlen small{display:block;margin-top:.3rem;font-size:.74rem;color:#a1a1aa}
.site-ueberuns[data-beleg="signatur"] .site-ueberuns__beleg--sign{display:flex;align-items:center;gap:.8rem}
.site-ueberuns__mark{width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:grid;place-items:center;
  font-size:.9rem;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--akzent,#7c87ff),#42466e)}
.site-ueberuns__beleg--sign b{font-size:.95rem;color:#f4f4f5}
.site-ueberuns__beleg--sign small{display:block;font-size:.8rem;color:#a1a1aa}

/* Position 5 · Abschluss — Text-Link ODER Button (Beschriftung frei) */
.site-ueberuns__schluss{display:none;margin-top:.2rem;text-decoration:none}
.site-ueberuns[data-abschluss="link"] .site-ueberuns__schluss--link{display:inline-flex;align-items:center;gap:.5rem;
  font-weight:600;font-size:.92rem;color:var(--akzent,#7c87ff);padding:.3rem .1rem;border-radius:6px}
.site-ueberuns__schluss--link svg{width:18px;height:18px;transition:transform .25s ease}
.site-ueberuns__schluss--link:hover svg,.site-ueberuns__schluss--link:focus-visible svg{transform:translateX(4px)}
.site-ueberuns__schluss--link:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:3px}
.site-ueberuns[data-abschluss="button"] .site-ueberuns__schluss--btn{display:inline-flex;align-items:center;
  padding:.75rem 1.4rem;background:var(--akzent,#7c87ff);color:#0d0d10;font-weight:700;
  font-size:.92rem;transition:transform .2s ease,box-shadow .2s ease}
.site-ueberuns[data-btnform="eckig"] .site-ueberuns__schluss--btn{border-radius:0}
.site-ueberuns[data-btnform="abgerundet"] .site-ueberuns__schluss--btn{border-radius:12px}
.site-ueberuns[data-btnform="pill"] .site-ueberuns__schluss--btn{border-radius:999px}
.site-ueberuns__schluss--btn:hover,.site-ueberuns__schluss--btn:focus-visible{transform:translateY(-2px);
  box-shadow:0 10px 26px -10px var(--akzent,#7c87ff)}
.site-ueberuns__schluss--btn:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:2px}

/* Medienhälfte: Foto (mit optionalem Bild-Akzent) ODER Mosaik — Flächen sind CSS-Verläufe,
   im Projekt echte Bilder einsetzen (background:url(…) auf __bild bzw. die Mosaik-Kacheln) */
.site-ueberuns__media{position:relative;align-self:stretch;min-height:260px}
.site-ueberuns__bild{position:relative;z-index:1;height:100%;min-height:260px;border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:radial-gradient(120% 110% at 25% 20%,#3b3b54 0%,#24242f 48%,#15151b 100%)}
.site-ueberuns[data-stil="craft"] .site-ueberuns__bild{box-shadow:0 24px 50px rgba(0,0,0,.4)}
.site-ueberuns__badge{position:absolute;left:1rem;bottom:1rem;z-index:2;display:none;font-size:.74rem;
  font-weight:700;letter-spacing:.04em;color:#f4f4f5;padding:.5rem .9rem;border-radius:10px;
  background:rgba(15,15,18,.55);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.site-ueberuns[data-bildakzent="badge"] .site-ueberuns__badge{display:inline-block}
.site-ueberuns__karte{position:absolute;right:-6px;bottom:1.4rem;z-index:2;margin:0;display:none;
  align-items:center;gap:.8rem;padding:.9rem 1.1rem;border-radius:14px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 30px rgba(0,0,0,.4)}
.site-ueberuns[data-bildakzent="karte"] .site-ueberuns__karte{display:flex}
.site-ueberuns__karte b{font-size:1.9rem;font-weight:800;color:var(--akzent,#7c87ff);line-height:1}
.site-ueberuns__karte span{font-size:.74rem;font-weight:600;letter-spacing:.04em;color:#e9e9ee;line-height:1.25}
.site-ueberuns__mosaik{display:none;height:100%;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(92px,1fr);gap:.8rem}
.site-ueberuns__mosaik i{display:block;border-radius:14px;border:1px solid rgba(255,255,255,.06);
  background:radial-gradient(120% 120% at 20% 15%,#34344a 0%,#20202b 50%,#15151b 100%)}
.site-ueberuns__mosaik i.hoch{grid-row:span 2}
.site-ueberuns__mosaik i:nth-child(2){background:radial-gradient(120% 120% at 80% 20%,#3a2f4e 0%,#211d2b 55%,#15151b 100%)}
.site-ueberuns__mosaik i:nth-child(3){background:radial-gradient(120% 120% at 30% 80%,#233a44 0%,#1a222a 55%,#15151b 100%)}

/* Achse Medien: foto | mosaik | ohne */
.site-ueberuns[data-medien="mosaik"] .site-ueberuns__bild,
.site-ueberuns[data-medien="mosaik"] .site-ueberuns__badge,
.site-ueberuns[data-medien="mosaik"] .site-ueberuns__karte{display:none}
.site-ueberuns[data-medien="mosaik"] .site-ueberuns__mosaik{display:grid}
.site-ueberuns[data-medien="ohne"] .site-ueberuns__media{display:none}
.site-ueberuns[data-medien="ohne"] .site-ueberuns__in{grid-template-columns:1fr}
.site-ueberuns[data-medien="ohne"] .site-ueberuns__txt{max-width:640px}

/* Achse Anordnung: Bild links vom Text oder rechts davon (Bildspalte bleibt die schmalere) */
.site-ueberuns[data-layout="bild-links"] .site-ueberuns__media{order:1}
.site-ueberuns[data-layout="bild-links"] .site-ueberuns__txt{order:2}
.site-ueberuns[data-layout="bild-rechts"] .site-ueberuns__in{grid-template-columns:1.05fr .95fr}

/* Handy: eine Spalte; Achse data-mbild (Bild über oder unter dem Text) */
@media (max-width:760px){
  .site-ueberuns__in{grid-template-columns:1fr;gap:1.5rem}
  .site-ueberuns__media,.site-ueberuns__bild{min-height:210px}
  .site-ueberuns[data-mbild="oben"] .site-ueberuns__media{order:-1}
  .site-ueberuns[data-mbild="unten"] .site-ueberuns__media{order:2}
  .site-ueberuns__karte{right:.8rem}
}
@media (prefers-reduced-motion:reduce){
  .site-ueberuns__glow{animation:none}
  .site-ueberuns__schluss--link svg,.site-ueberuns__schluss--btn{transition:none}
  .site-ueberuns__schluss--btn:hover,.site-ueberuns__schluss--btn:focus-visible{transform:none}
  .site-ueberuns__schluss--link:hover svg,.site-ueberuns__schluss--link:focus-visible svg{transform:none}
}
</style>

Über uns — Werte-Raster

Pol 2 · Klarheit Anlass: Handwerk, Dienstleistung, Kanzlei

Drei Werte als gleichgewichtete Karten mit Inline-SVG-Icon, Titel und einem Satz. Ruhig, scanbar, hebt beim Hover/Fokus leicht an. Mobil stapeln die Karten. Icons als Inline-SVG (kein Icon-Font).

Wofür wir stehen

Drei Grundsätze, an denen wir uns messen lassen.

Verlässlichkeit

Zugesagte Termine halten wir. Wer nicht kommen kann, sagt rechtzeitig Bescheid.
Sauberkeit

Erst wenn die Baustelle besenrein übergeben ist, gilt der Auftrag als erledigt.
Klare Preise

Ein Festpreis vor Beginn, keine Überraschungen auf der Schlussrechnung.

<section class="au-werte">
  <div class="au-werte-head">
    <p class="au-werte-eyebrow">Wofür wir stehen</p>
    <h2 class="au-werte-title">Drei Grundsätze, an denen wir uns messen lassen.</h2>
  </div>
  <ul class="au-werte-grid">
    <li class="au-werte-card">
      <span class="au-werte-ico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></span>
      <h3>Verlässlichkeit</h3>
      <p>Zugesagte Termine halten wir. Wer nicht kommen kann, sagt rechtzeitig Bescheid.</p>
    </li>
    <li class="au-werte-card">
      <span class="au-werte-ico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg></span>
      <h3>Sauberkeit</h3>
      <p>Erst wenn die Baustelle besenrein übergeben ist, gilt der Auftrag als erledigt.</p>
    </li>
    <li class="au-werte-card">
      <span class="au-werte-ico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></span>
      <h3>Klare Preise</h3>
      <p>Ein Festpreis vor Beginn, keine Überraschungen auf der Schlussrechnung.</p>
    </li>
  </ul>
</section>

<style>
.au-werte{width:100%;background:#16161a;border:1px solid #26262c;border-radius:18px;
  padding:1.6rem;color:#e9e9ee}
@media(min-width:720px){.au-werte{padding:2.4rem}}
.au-werte-head{max-width:52ch;margin:0 0 1.8rem}
.au-werte-eyebrow{margin:0 0 .7rem;font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--akzent,#7c87ff)}
.au-werte-title{margin:0;font-size:clamp(1.4rem,3.2vw,1.95rem);line-height:1.15;
  letter-spacing:-.01em;color:#f4f4f5}
.au-werte-grid{list-style:none;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:1fr}
@media(min-width:640px){.au-werte-grid{grid-template-columns:repeat(3,1fr)}}
.au-werte-card{position:relative;display:block;padding:1.4rem;border-radius:14px;
  background:#17171b;border:1px solid #26262c;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.au-werte-card:hover,.au-werte-card:focus-within{transform:translateY(-4px);
  border-color:var(--akzent,#7c87ff);box-shadow:0 16px 34px -18px rgba(0,0,0,.7)}
.au-werte-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  margin:0 0 1rem;background:rgba(124,135,255,.12);border:1px solid rgba(124,135,255,.28);
  transition:background .25s ease}
.au-werte-card:hover .au-werte-ico,.au-werte-card:focus-within .au-werte-ico{
  background:rgba(124,135,255,.2)}
.au-werte-ico svg{width:22px;height:22px;color:var(--akzent,#7c87ff)}
.au-werte-card h3{margin:0 0 .5rem;font-size:1.08rem;color:#f4f4f5;letter-spacing:-.01em}
.au-werte-card p{margin:0;font-size:.9rem;line-height:1.5;color:#a1a1aa}
@media (prefers-reduced-motion:reduce){
  .au-werte-card,.au-werte-ico{transition:none}
  .au-werte-card:hover,.au-werte-card:focus-within{transform:none}}
</style>

Über uns — Zeitleiste der Firmengeschichte

Pol 1 · Craft Anlass: Marke, Traditionsbetrieb, Meilensteine

Vertikale Zeitleiste mit Akzent-Verlaufslinie und Punkten, die beim Hover/Fokus aufleuchten. Jede Station ist per unsichtbarem Overlay-Link tastaturerreichbar (:focus-within triggert denselben Zustand). Der Punkt-Glow ruht bei prefers-reduced-motion.

Unsere Geschichte

Vom Ein-Mann-Betrieb zum eingespielten Team.

2008
Gründung in der Werkstatt

Aus einer kleinen Werkstatt heraus starten die ersten Aufträge in der Nachbarschaft.
2014
Erstes Team

Zwei Gesellen und ein Lehrling kommen dazu. Der erste eigene Transporter rollt.
2024
Eigene Halle

Umzug in die neue Halle am Ortsrand — Platz für Lager, Zuschnitt und Ausbildung.

<section class="au-zeit">
  <p class="au-zeit-eyebrow">Unsere Geschichte</p>
  <h2 class="au-zeit-title">Vom Ein-Mann-Betrieb zum eingespielten Team.</h2>
  <ol class="au-zeit-line">
    <li class="au-zeit-item">
      <span class="au-zeit-dot" aria-hidden="true"></span>
      <span class="au-zeit-year">2008</span>
      <h3>Gründung in der Werkstatt</h3>
      <p>Aus einer kleinen Werkstatt heraus starten die ersten Aufträge in der Nachbarschaft.</p>
      <a class="au-zeit-hit" href="#" aria-label="Meilenstein 2008: Gründung in der Werkstatt"></a>
    </li>
    <li class="au-zeit-item">
      <span class="au-zeit-dot" aria-hidden="true"></span>
      <span class="au-zeit-year">2014</span>
      <h3>Erstes Team</h3>
      <p>Zwei Gesellen und ein Lehrling kommen dazu. Der erste eigene Transporter rollt.</p>
      <a class="au-zeit-hit" href="#" aria-label="Meilenstein 2014: Erstes Team"></a>
    </li>
    <li class="au-zeit-item">
      <span class="au-zeit-dot" aria-hidden="true"></span>
      <span class="au-zeit-year">2024</span>
      <h3>Eigene Halle</h3>
      <p>Umzug in die neue Halle am Ortsrand – Platz für Lager, Zuschnitt und Ausbildung.</p>
      <a class="au-zeit-hit" href="#" aria-label="Meilenstein 2024: Eigene Halle"></a>
    </li>
  </ol>
</section>

<style>
.au-zeit{width:100%;position:relative;
  background:radial-gradient(130% 120% at 100% 0%,#1c1c28 0%,#141319 55%,#101014 100%);
  border:1px solid #26262c;border-radius:20px;padding:1.8rem;color:#e9e9ee}
@media(min-width:720px){.au-zeit{padding:2.6rem}}
.au-zeit-eyebrow{margin:0 0 .8rem;display:inline-flex;align-items:center;gap:.6em;
  font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--akzent,#7c87ff)}
.au-zeit-eyebrow::before{content:"";width:26px;height:1px;background:var(--akzent,#7c87ff)}
.au-zeit-title{margin:0 0 2rem;font-size:clamp(1.6rem,3.6vw,2.2rem);line-height:1.12;
  letter-spacing:-.02em;color:#f4f4f5}
.au-zeit-line{list-style:none;margin:0;padding:0;position:relative}
.au-zeit-line::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--akzent,#7c87ff),#26262c)}
.au-zeit-item{position:relative;padding:0 0 1.8rem 2.4rem}
.au-zeit-item:last-child{padding-bottom:0}
.au-zeit-dot{position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%;
  background:#101014;border:2px solid #3a3a45;display:grid;place-items:center;
  transition:border-color .25s ease,box-shadow .25s ease}
.au-zeit-dot::after{content:"";width:8px;height:8px;border-radius:50%;background:#3a3a45;
  transition:background .25s ease,transform .25s ease}
.au-zeit-item:hover .au-zeit-dot,.au-zeit-item:focus-within .au-zeit-dot{
  border-color:var(--akzent,#7c87ff);box-shadow:0 0 0 6px rgba(124,135,255,.14)}
.au-zeit-item:hover .au-zeit-dot::after,.au-zeit-item:focus-within .au-zeit-dot::after{
  background:var(--akzent,#7c87ff);transform:scale(1.25)}
.au-zeit-year{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.06em;
  color:var(--akzent,#7c87ff);margin:0 0 .3rem}
.au-zeit-item h3{margin:0 0 .35rem;font-size:1.05rem;color:#f4f4f5;letter-spacing:-.01em}
.au-zeit-item p{margin:0;font-size:.9rem;line-height:1.5;color:#a1a1aa;max-width:52ch}
.au-zeit-item a.au-zeit-hit{position:absolute;inset:0;border-radius:8px}
.au-zeit-item a.au-zeit-hit:focus-visible{outline:2px solid var(--akzent,#7c87ff);
  outline-offset:4px}
@media (prefers-reduced-motion:reduce){
  .au-zeit-dot,.au-zeit-dot::after{transition:none}}
</style>

Über uns — Gründer-Zitat

Pol 1 · Craft Anlass: persönliche Note, Vertrauen

Ein großes Zitat des Inhabers mit Portrait und Signatur — die persönlichste Vertrauens-Variante. Ein Schlüsselwort steht in der Akzentfarbe. Bild als CSS-Verlauf angedeutet (im Projekt durch <img> ersetzen).

Ich gebe jeden Auftrag erst frei, wenn ich selbst zufrieden bin. Mein Name steht an der Tür — und für jede Arbeit gerade.

Max SanderInhaber & Meister

<section class="au-zitat">
  <div class="au-zitat-portrait" aria-hidden="true"></div><!-- statt Verlauf ein <img> -->
  <div class="au-zitat-body">
    <span class="au-zitat-mark" aria-hidden="true">„</span>
    <p class="au-zitat-quote">Ich gebe jeden Auftrag erst frei, wenn ich selbst zufrieden bin.
      Mein Name steht an der Tür — und <b>für jede Arbeit gerade</b>.</p>
    <div class="au-zitat-sign">
      <span class="au-zitat-mk" aria-hidden="true">MS</span>
      <div><b>Max Sander</b><small>Inhaber & Meister</small></div>
    </div>
  </div>
</section>

<style>
.au-zitat{display:grid;gap:1.8rem;align-items:center;grid-template-columns:1fr;overflow:hidden;
  background:radial-gradient(130% 120% at 0% 0%,#1c1c28 0%,#141319 55%,#101014 100%);
  border:1px solid #26262c;border-radius:20px;padding:1.8rem}
@media(min-width:760px){.au-zitat{grid-template-columns:.8fr 1.2fr;padding:2.6rem;gap:2.4rem}}
.au-zitat-portrait{position:relative;min-height:240px;border-radius:16px;
  background:radial-gradient(120% 110% at 30% 20%,#3b3b54 0%,#24242f 48%,#15151b 100%)}
.au-zitat-mark{display:block;font-size:3.4rem;line-height:.6;color:var(--akzent,#7c87ff);opacity:.5;
  font-family:Georgia,serif}
.au-zitat-quote{margin:.3rem 0 1.4rem;font-size:clamp(1.25rem,2.8vw,1.7rem);line-height:1.4;
  color:#f4f4f5;font-weight:500}
.au-zitat-quote b{color:var(--akzent,#7c87ff);font-weight:600}
.au-zitat-mk{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;color:#fff;background:linear-gradient(135deg,var(--akzent,#7c87ff),#42466e)}
</style>

Über uns — Leitbild (zentriertes Statement)

Pol 2 · Klarheit Anlass: Mission, Haltung

Ein großes, zentriertes Leitbild — bewusst reduziert. Der Fließtext ist gedämpft, die tragenden Worte stehen in Weiß und Akzent hervorgehoben, sodass die Kernaussage optisch führt. Viel Weißraum, keine Ablenkung.

Unser Leitbild

Wir glauben, dass gutes Handwerk Vertrauen ist, das man sehen und anfassen kann.

<section class="au-leitbild">
  <p class="au-leitbild-eyebrow">Unser Leitbild</p>
  <p class="au-leitbild-text">Wir glauben, dass gutes Handwerk <b>Vertrauen</b> ist,
    das man <span class="ak">sehen und anfassen</span> kann.</p>
  <div class="au-leitbild-rule" aria-hidden="true"></div>
</section>

<style>
.au-leitbild{background:#16161a;border:1px solid #26262c;border-radius:18px;
  padding:2.6rem 1.6rem;text-align:center}
@media(min-width:720px){.au-leitbild{padding:3.4rem 2.4rem}}
.au-leitbild-eyebrow{margin:0 0 1.1rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--akzent,#7c87ff)}
.au-leitbild-text{margin:0 auto;max-width:640px;font-size:clamp(1.5rem,4.2vw,2.25rem);line-height:1.3;
  color:#8a8a95;font-weight:600}
.au-leitbild-text b{color:#f4f4f5;font-weight:700}
.au-leitbild-text .ak{color:var(--akzent,#7c87ff);font-weight:700}
.au-leitbild-rule{width:44px;height:3px;border-radius:99px;margin:1.6rem auto 0;background:var(--akzent,#7c87ff)}
</style>

Über uns — Auszeichnungen & Zertifikate

Pol 2 · Klarheit Anlass: Siegel, Mitgliedschaften, Garantie

Vier Vertrauens-Belege als Karten mit Icon: Siegel, Mitgliedschaft, Garantie, Prüfung. Belegt statt behauptet. Ab vier Spalten auf Desktop, zwei auf Tablet, eine am Handy. Icons als Inline-SVG.

Geprüft & ausgezeichnet

Qualität, die belegt ist

Nicht nur behauptet — durch Siegel, Mitgliedschaften und Garantien abgesichert.

MeisterbetriebEingetragen bei der HWK

InnungsmitgliedGeprüfter Fachbetrieb

5 Jahre GarantieAuf alle Arbeiten

TÜV-geprüftRegelmäßig kontrolliert

<section class="au-zert">
        <div class="au-zert-head">
          <p class="au-zert-eyebrow">Geprüft &amp; ausgezeichnet</p>
          <h2 class="au-zert-title">Qualität, die belegt ist</h2>
          <p class="au-zert-lead">Nicht nur behauptet — durch Siegel, Mitgliedschaften und Garantien abgesichert.</p>
        </div>
        <div class="au-zert-grid">
          <div class="au-zert-badge"><span class="au-zert-ico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="6"/><path d="M8.5 13.5 7 22l5-3 5 3-1.5-8.5"/></svg></span><b>Meisterbetrieb</b><small>Eingetragen bei der HWK</small></div>
          <div class="au-zert-badge"><span class="au-zert-ico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4-3 7-7 8-4-1-7-4-7-8V6z"/></svg></span><b>Innungsmitglied</b><small>Geprüfter Fachbetrieb</small></div>
          <div class="au-zert-badge"><span class="au-zert-ico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4-3 7-7 8-4-1-7-4-7-8V6z"/><path d="M9 12l2 2 4-4"/></svg></span><b>5 Jahre Garantie</b><small>Auf alle Arbeiten</small></div>
          <div class="au-zert-badge"><span class="au-zert-ico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="m8.5 12 2.5 2.5 4.5-4.5"/></svg></span><b>TÜV-geprüft</b><small>Regelmäßig kontrolliert</small></div>
        </div>
      </section>

<style>
.au-zert-grid{display:grid;gap:.9rem;grid-template-columns:1fr}
@media(min-width:520px){.au-zert-grid{grid-template-columns:1fr 1fr}}
@media(min-width:800px){.au-zert-grid{grid-template-columns:repeat(4,1fr)}}
.au-zert-badge{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;
  padding:1.2rem;border-radius:14px;background:#17171b;border:1px solid #26262c}
.au-zert-ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:rgba(124,135,255,.12);border:1px solid rgba(124,135,255,.28);color:var(--akzent,#7c87ff)}
</style>

Über uns — „Warum wir" (Kontrast)

Pol 2 · Klarheit Anlass: Differenzierung zum Wettbewerb

Zwei gegenübergestellte Spalten: links das oft Übliche (gedämpft, mit X), rechts der eigene Anspruch (hervorgehoben, mit Akzent-Häkchen). Macht den Unterschied auf einen Blick sichtbar — sachlich, ohne den Wettbewerb namentlich zu nennen.

Warum wir

Der Unterschied, den Sie merken

Oft üblich

Termine, die verschoben werden
Endpreis erst auf der Rechnung
Wechselnde Subunternehmer
Baustelle bleibt unaufgeräumt

Bei uns

Feste Termine, verlässlich eingehalten
Festpreis vor Beginn, schriftlich
Ein festes Team, das Sie kennen
Besenrein übergeben — immer

<section class="au-warum">
        <div class="au-warum-head">
          <p class="au-warum-eyebrow">Warum wir</p>
          <h2 class="au-warum-title">Der Unterschied, den Sie merken</h2>
        </div>
        <div class="au-warum-grid">
          <div class="au-warum-col au-warum-col--bad">
            <h3>Oft üblich</h3>
            <ul class="au-warum-list">
              <li><span class="au-warum-mk" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></span>Termine, die verschoben werden</li>
              <li><span class="au-warum-mk" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></span>Endpreis erst auf der Rechnung</li>
              <li><span class="au-warum-mk" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></span>Wechselnde Subunternehmer</li>
              <li><span class="au-warum-mk" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></span>Baustelle bleibt unaufgeräumt</li>
            </ul>
          </div>
          <div class="au-warum-col au-warum-col--good">
            <h3>Bei uns</h3>
            <ul class="au-warum-list">
              <li><span class="au-warum-mk" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span>Feste Termine, verlässlich eingehalten</li>
              <li><span class="au-warum-mk" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span>Festpreis vor Beginn, schriftlich</li>
              <li><span class="au-warum-mk" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span>Ein festes Team, das Sie kennen</li>
              <li><span class="au-warum-mk" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span>Besenrein übergeben — immer</li>
            </ul>
          </div>
        </div>
      </section>

<style>
.au-warum-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){.au-warum-grid{grid-template-columns:1fr 1fr}}
.au-warum-col{border-radius:16px;padding:1.4rem;border:1px solid #26262c;background:#17171b}
.au-warum-col--good{border-color:#3a3a72;
  background:radial-gradient(120% 100% at 100% 0%,rgba(124,135,255,.14) 0%,transparent 55%),#17171b}
.au-warum-list li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start}
.au-warum-col--good .au-warum-mk{background:rgba(124,135,255,.16);color:var(--akzent,#7c87ff)}
.au-warum-col--bad .au-warum-mk{background:rgba(255,255,255,.05);color:#6a6a75}
/* Mobil: Spalte schrumpfbar, Zeilentext-Spur auf 0 (minmax) + Umbruch — kein horizontaler Überlauf */
@media(max-width:640px){.au-warum-col{min-width:0}.au-warum-list li{grid-template-columns:auto minmax(0,1fr);overflow-wrap:break-word}}
</style>

Bauteile

Über-uns-Bauteile

Die Elemente der flexiblen Über-uns-Sektion einzeln — zum Einbetten in bestehende Seiten. Die Codes bringen nur ihre eigene Optik mit (Klassen-Präfix ue-, Akzentfarbe über --akzent), erben die Schrift der Zielseite und erzwingen kein Layout. Individuelle Texte trägst du direkt im Fenster ein — Demo und Kopier-Code übernehmen sie sofort. Der passende CTA-Button steht als Hero-Bauteil (mit Stil-, Form- und Pfeil-Achsen) in der Kategorie Hero.

Inhaber-Signatur

Pol 1 · Craft Anlass: Vertrauensanker unter Text

Initialen-Kreis + Name + Rolle — die persönliche Note unter einem Über-uns-Text oder Zitat. Statt Initialen kann im Projekt ein rundes Foto auf den Kreis gelegt werden.

Max SanderInhaber & Meister

Initialen

Name

Rolle

<div class="ue-sign">
  <span class="ue-sign-mark" aria-hidden="true">MS</span>
  <div><b>Max Sander</b><small>Inhaber &amp; Meister</small></div>
</div>

<style>
.ue-sign{display:inline-flex;align-items:center;gap:.8rem;font-size:.95rem}
.ue-sign-mark{width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:grid;place-items:center;
  font-size:.9rem;font-weight:800;font-style:normal;color:#fff;
  background:linear-gradient(135deg,var(--akzent, #7c87ff),#42466e)}
.ue-sign b{display:block}
.ue-sign small{display:block;font-size:.8rem;opacity:.7}
</style>

Text-Link mit Pfeil

Pol 2 · Klarheit Anlass: leiser Abschluss einer Sektion

Der ruhige Weiterlese-Link: Akzentfarbe, Pfeil wandert beim Hover/Fokus mit. Wo ein Button zu laut wäre. Bewegung ruht bei prefers-reduced-motion.

Mehr über uns

Text

<a class="ue-link" href="#">Mehr über uns <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>

<style>
.ue-link{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.92rem;
  color:var(--akzent, #7c87ff);text-decoration:none;padding:.3rem .1rem;border-radius:6px}
.ue-link svg{width:18px;height:18px;transition:transform .25s ease}
.ue-link:hover svg,.ue-link:focus-visible svg{transform:translateX(4px)}
.ue-link:focus-visible{outline:2px solid var(--akzent, #7c87ff);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.ue-link svg{transition:none}}
</style>

Bild-Badge (Glas)

Pol 1 · Craft Anlass: Kurzinfo auf einem Foto

Milchglas-Plakette für Fotos („Seit 2008", „Werkstatt Musterstadt"). Zum Verankern das Eltern-Bild auf position:relative setzen und die auskommentierten Positions-Zeilen im Code aktivieren.

Seit 2008

Text

<span class="ue-badge">Seit 2008</span>

<style>
.ue-badge{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.04em;color:#f4f4f5;
  padding:.5rem .9rem;border-radius:10px;background:rgba(15,15,18,.55);
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* Auf einem Foto verankern (Eltern-Element braucht position:relative):
.ue-badge{position:absolute;left:1rem;bottom:1rem} */
</style>

Glas-Kennzahl-Karte

Pol 1 · Craft Anlass: Blickfang auf/neben einem Foto

Schwebende Glas-Karte mit großer Akzent-Zahl — der Blickfang aus der Craft-Variante. Zum Verankern auf einem Foto die auskommentierten Positions-Zeilen im Code aktivieren.

16Jahre Meisterbetrieb

Zahl

Text

<figure class="ue-karte"><b>16</b><span>Jahre Meisterbetrieb</span></figure>

<style>
.ue-karte{display:inline-flex;align-items:center;gap:.8rem;margin:0;padding:.9rem 1.1rem;border-radius:14px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 30px rgba(0,0,0,.4)}
.ue-karte b{font-size:1.9rem;font-weight:800;color:var(--akzent, #7c87ff);line-height:1}
.ue-karte span{font-size:.74rem;font-weight:600;letter-spacing:.04em;color:#e9e9ee;line-height:1.25;max-width:12ch}
/* Auf einem Foto verankern (Eltern-Element braucht position:relative):
.ue-karte{position:absolute;right:-6px;bottom:1.4rem} */
</style>

Kennzahlen-Block

Pol 2 · Klarheit Anlass: Beleg unter Text-Absätzen

Drei gestapelte Kennzahlen (große Zahl, gedämpfte Beschriftung) — der ruhige Beleg unter einem Über-uns-Text. Format je Feld: erst die Zahl, dann die Beschriftung (z. B. 16 Jahre Erfahrung). Erbt Schrift und Farbe der Zielseite. Für die animierte Zähl-Variante siehe „Trust: Kennzahlen-Zeile" in der Kategorie Hero.

16Jahre Erfahrung
1.200+Projekte
4,9 ★Bewertung

Kennzahl 1

Kennzahl 2

Kennzahl 3

<ul class="ue-zahlen">
  <li><b>16</b><small>Jahre Erfahrung</small></li>
  <li><b>1.200+</b><small>Projekte</small></li>
  <li><b>4,9 ★</b><small>Bewertung</small></li>
</ul>

<style>
.ue-zahlen{list-style:none;display:inline-flex;flex-wrap:wrap;gap:1.8rem;margin:0;padding:0}
.ue-zahlen b{display:block;font-size:1.5rem;font-weight:800;line-height:1}
.ue-zahlen small{display:block;margin-top:.3rem;font-size:.74rem;opacity:.7}
</style>