Seiten-Sektion

Über uns

Die Vertrauens-Sektion einer Seite — neun ganze Layouts: von klar-zweispaltig, Craft-Atmosphäre, Werte-Raster und Zeitleiste über Gründer-Zitat, zentriertes Leitbild und Auszeichnungen bis zu Bild-Mosaik und „Warum wir"-Kontrast. Alle copy-paste-fähig, Akzentfarbe über --akzent, barrierefrei.

Über uns — klar, zweispaltig

Pol 2 · Klarheit Anlass: Handwerk, Dienstleistung

Visual links, Text rechts, drei Mini-Kennzahlen als Beleg. Ruhig und scanbar — kein Effekt-Lärm. Mobil stapelt sich die Sektion automatisch. Bild als CSS-Verlauf angedeutet (im Projekt durch <img> ersetzen).

Seit 2008

Ü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

Mehr über uns

<section class="au-klar">
  <div class="au-klar-media">
    <!-- statt Verlauf hier ein <img> einsetzen -->
    <span class="au-klar-badge">Seit 2008</span>
  </div>
  <div class="au-klar-body">
    <p class="au-klar-eyebrow">Über uns</p>
    <h2 class="au-klar-title">Handwerk, auf das man sich verlassen kann.</h2>
    <p class="au-klar-text">Wir sind ein Familienbetrieb aus der Region. Was wir
      anfangen, bringen wir sauber zu Ende – ohne Überraschungen auf der Rechnung.</p>
    <p class="au-klar-text">Jeder Auftrag wird vom Meister abgenommen. Erst wenn alles
      sitzt, sind wir fertig.</p>
    <ul class="au-klar-stats">
      <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>
    <a class="au-klar-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>
  </div>
</section>

<style>
.au-klar{display:grid;gap:2rem;align-items:center;width:100%;
  grid-template-columns:1fr;background:#16161a;border:1px solid #26262c;border-radius:18px;
  padding:1.6rem;color:#e9e9ee}
@media(min-width:720px){.au-klar{grid-template-columns:1.05fr .95fr;padding:2.4rem}}
.au-klar-media{position:relative;min-height:230px;border-radius:14px;overflow:hidden;
  border:1px solid #26262c;
  background:radial-gradient(120% 100% at 75% 15%,#34344a 0%,#23232f 45%,#15151b 100%)}
.au-klar-badge{position:absolute;left:1rem;bottom:1rem;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)}
.au-klar-eyebrow{margin:0 0 .7rem;font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--akzent,#7c87ff)}
.au-klar-title{margin:0 0 1rem;font-size:clamp(1.4rem,3.2vw,1.95rem);line-height:1.15;
  letter-spacing:-.01em;color:#f4f4f5}
.au-klar-text{margin:0 0 1rem;font-size:.95rem;color:#a1a1aa;max-width:46ch}
.au-klar-stats{list-style:none;display:flex;flex-wrap:wrap;gap:1.8rem;margin:1.5rem 0 1.4rem;padding:0}
.au-klar-stats b{display:block;font-size:1.5rem;font-weight:800;color:#f4f4f5;line-height:1}
.au-klar-stats small{display:block;margin-top:.3rem;font-size:.74rem;color:#a1a1aa}
.au-klar-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}
.au-klar-link svg{width:18px;height:18px;transition:transform .25s ease}
.au-klar-link:hover svg,.au-klar-link:focus-visible svg{transform:translateX(4px)}
.au-klar-link:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.au-klar-link svg{transition:none}}
</style>

Über uns — Craft, Atmosphäre

Pol 1 · Craft Anlass: Marke, Premium, Tech

Versetztes Layout: Akzent-Glow hinter dem Visual, eine schwebende Glas-Karte als Blickfang, Inhaber-Signatur als Vertrauensanker. Edler Auftritt für Marken. Der Glow ruht bei prefers-reduced-motion.

12 Jahre
Meisterbetrieb

Wer wir sind

Wir bauen, was bleibt.

Zwischen schnell und richtig entscheiden wir uns für richtig. Material, Detail, Übergabe — jeder Schritt trägt unsere Handschrift.

Max SanderInhaber & Meister

<section class="au-craft">
  <div class="au-craft-visual">
    <div class="au-craft-glow" aria-hidden="true"></div>
    <div class="au-craft-photo"></div><!-- statt Verlauf hier ein <img> -->
    <figure class="au-craft-float">
      <b>12</b>
      <span>Jahre<br>Meisterbetrieb</span>
    </figure>
  </div>
  <div class="au-craft-body">
    <p class="au-craft-eyebrow">Wer wir sind</p>
    <h2 class="au-craft-title">Wir bauen, was <span>bleibt</span>.</h2>
    <p class="au-craft-text">Zwischen schnell und richtig entscheiden wir uns für
      richtig. Material, Detail, Übergabe – jeder Schritt trägt unsere Handschrift.</p>
    <div class="au-craft-sign">
      <span class="au-craft-mark" aria-hidden="true">MS</span>
      <div><b>Max Sander</b><small>Inhaber & Meister</small></div>
    </div>
  </div>
</section>

<style>
.au-craft{position:relative;display:grid;gap:2.2rem;align-items:center;width:100%;
  grid-template-columns:1fr;overflow:hidden;
  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:760px){.au-craft{grid-template-columns:.95fr 1.05fr;padding:2.6rem}}
.au-craft-visual{position:relative;min-height:260px}
.au-craft-glow{position:absolute;width:240px;height:240px;top:-40px;left:-30px;border-radius:50%;
  filter:blur(60px);opacity:.55;z-index:0;
  background:radial-gradient(circle,var(--akzent,#7c87ff) 0%,transparent 70%);
  animation:au-float 14s ease-in-out infinite alternate;will-change:transform}
@keyframes au-float{0%{transform:translate(0,0) scale(1)}100%{transform:translate(26px,-20px) scale(1.12)}}
.au-craft-photo{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%);
  box-shadow:0 24px 50px rgba(0,0,0,.4)}
.au-craft-float{position:absolute;right:-6px;bottom:1.4rem;z-index:2;margin:0;display:flex;
  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)}
.au-craft-float b{font-size:1.9rem;font-weight:800;color:var(--akzent,#7c87ff);line-height:1}
.au-craft-float span{font-size:.74rem;font-weight:600;letter-spacing:.04em;color:#e9e9ee;line-height:1.25}
.au-craft-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-craft-eyebrow::before{content:"";width:26px;height:1px;background:var(--akzent,#7c87ff)}
.au-craft-title{margin:0 0 1.1rem;font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.1;
  letter-spacing:-.02em;color:#f4f4f5}
.au-craft-title span{color:var(--akzent,#7c87ff)}
.au-craft-text{margin:0 0 1.6rem;font-size:.97rem;color:#a1a1aa;max-width:48ch}
.au-craft-sign{display:flex;align-items:center;gap:.8rem}
.au-craft-mark{width:46px;height: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)}
.au-craft-sign b{font-size:.95rem;color:#f4f4f5}
.au-craft-sign small{display:block;font-size:.8rem;color:#a1a1aa}
@media (prefers-reduced-motion:reduce){.au-craft-glow{animation: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>
  </div>
  <div class="au-zert-grid">
    <div class="au-zert-badge">
      <span class="au-zert-ico"><svg><!-- Icon --></svg></span>
      <b>Meisterbetrieb</b><small>Eingetragen bei der HWK</small>
    </div>
    <!-- weitere Karten identisch -->
  </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 — Bild-Mosaik

Pol 1 · Craft Anlass: Einblicke, Werkstatt/Team

Text links, ein Mosaik aus drei unterschiedlich großen Bild-Kacheln rechts — gibt der Sektion Atmosphäre und zeigt echte Einblicke. Die Flächen sind CSS-Verläufe; im Projekt durch Fotos ersetzen. Ab Handy rutscht das Mosaik unter den Text.

Einblicke

Ein Blick in unseren Betrieb

Werkstatt, Team und Baustelle — hier entsteht, worauf sich unsere Kunden verlassen. Die Flächen stehen im Projekt für echte Fotos.

<section class="au-mosaik">
  <div class="au-mosaik-body">
    <p class="au-mosaik-eyebrow">Einblicke</p>
    <h2 class="au-mosaik-title">Ein Blick in unseren Betrieb</h2>
    <p class="au-mosaik-text">Werkstatt, Team und Baustelle …</p>
  </div>
  <div class="au-mosaik-grid" aria-hidden="true"><!-- Kacheln = <img> im Projekt -->
    <div class="au-mosaik-tile au-mosaik-tile--tall"></div>
    <div class="au-mosaik-tile"></div>
    <div class="au-mosaik-tile"></div>
  </div>
</section>

<style>
.au-mosaik{display:grid;gap:2rem;align-items:center;grid-template-columns:1fr;
  background:radial-gradient(130% 120% at 100% 0%,#1c1c28 0%,#141319 55%,#101014 100%);
  border:1px solid #26262c;border-radius:20px;padding:1.8rem}
@media(min-width:800px){.au-mosaik{grid-template-columns:1fr 1fr;padding:2.6rem}}
.au-mosaik-grid{display:grid;gap:.8rem;grid-template-columns:1fr 1fr;grid-auto-rows:92px}
.au-mosaik-tile{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%)}
.au-mosaik-tile--tall{grid-row:span 2}
</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"><svg><!-- X --></svg></span>Termine, die verschoben werden</li>
        <!-- weitere Punkte -->
      </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"><svg><!-- Haken --></svg></span>Feste Termine, verlässlich eingehalten</li>
        <!-- weitere Punkte -->
      </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}
</style>