```css
/* =========================================================
   GRUNDLAGEN
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: #333333;
    background: #ffffff;
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: #7f3f2f;
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}


/* =========================================================
   OBERE WILLKOMMENSLEISTE
   ========================================================= */

.topbar {
    background: #7f3f2f;
    color: #ffffff;
    text-align: center;
    padding: 8px 15px;
    font-size: 0.9rem;
}


/* =========================================================
   BANNER + NAVIGATION
   ========================================================= */

.seitenkopf {
    width: 100%;
    background: #ffffff;
}


/* Banner */

.vereins-banner {
    width: 100%;
    background: #ffffff;
    text-align: center;
    padding: 20px;
}

.vereins-banner img {
    display: block;
    width: 100%;
    max-width: 1100px;
    height: auto;
    margin: 0 auto;
}


/* Navigation */

.seitenkopf .navigation {
    width: 100%;
    padding: 0 5%;
    background: #f4f0e8;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-top: 1px solid #ddd5c8;
    border-bottom: 1px solid #ddd5c8;
}


/* Vereinsname */

.logo {
    color: #333333;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    line-height: 1.2;
}

.logo span {
    display: block;
    font-size: 0.75rem;
    font-weight: normal;
    margin-top: 4px;
}


/* Navigation */

nav {
    display: flex;
    align-items: center;
    gap: 3px;
}

nav a {
    display: block;
    padding: 17px 13px;

    color: #333333;
    text-decoration: none;
    font-weight: bold;

    transition: 0.2s;
}

nav a:hover {
    background: #ffffff;
    color: #7f3f2f;
}

nav a.aktiv {
    background: #7f3f2f;
    color: #ffffff;
}


/* =========================================================
   STARTSEITEN-HERO
   ========================================================= */

.hero {
    background: #eee7dc;
    padding: 20px 20px;
}

.hero-inhalt {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
}

.hero h1 {
    margin: 0 0 20px;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.15;
    color: #333333;
}

.hero p {
    max-width: 700px;
    font-size: 1.15rem;
}



/* =========================================================
   ALLGEMEINE ABSCHNITTE
   ========================================================= */

section {
    padding: 20px 0;
}

/* =========================================================
   ÜBERSCHRIFTEN
   ========================================================= */

h1,
h2,
h3 {
    font-weight: 700;
}

h2 {
    color: #7f3f2f;
}

h3 {
    color: #444444;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 25px;
}

.button {
    display: inline-block;
    padding: 12px 22px;

    background: #7f3f2f;
    color: #ffffff;

    text-decoration: none;
    font-weight: bold;

    border-radius: 4px;

    transition: 0.2s;
}

.button:hover {
    background: #5f2e22;
    color: #ffffff;
}

.button.hell {
    background: #ffffff;
    color: #7f3f2f;
    border: 1px solid #7f3f2f;
}

.button.hell:hover {
    background: #7f3f2f;
    color: #ffffff;
}


/* =========================================================
   KARTEN
   ========================================================= */

.karten {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.karte {
    background: #ffffff;
    padding: 30px;
    border: 1px solid #e0d9cf;
    border-radius: 5px;
}

.karte h3 {
    margin-top: 10px;
}

.symbo

.containerzweispaltig img {
  float: right;        /* Lässt das Bild links stehen, der Text fließt rechts vorbei */
  margin-right: 20px; /* Wichtig: Abstand zum Text nach rechts */
  margin-bottom: 10px;/* Abstand zum Text, falls dieser unter das Bild läuft */
  width: 70px;         /* Gewünschte Breite des Bildes */v
  height: auto;
}

/* Optionaler Schutz für nachfolgende Elemente */
.containerzweispaltig::after {
  content: "";
  display: table;
  clear: both;        /* Verhindert, dass nachfolgende Absätze ungewollt beeinflusst werden */
}

footer {
  /* Dein optionales Design für den Footer */
  padding: 10px;
}