/* ============================================================
   base4IT — Gestaltung „hell und freundlich“ (seit 24.10.2026)
   ============================================================
   Anlass: erstes Feedback von Kunden — die Seite wirke altbacken, zu viele
   schwarze Umrandungen, altmodische Schrift, langweilig. Erst als Muster auf
   der Startseite, am selben Tag nach Freigabe auf alle Seiten und das Portal
   übertragen. Diese Datei legt sich über basis.css und portal.css (geladen
   als letzte, partials/kopf.php); die dortigen Kommentare zu harten Rändern
   und grünen Flächen beschreiben den Stand davor.

   Die Grundzüge:
   - Schrift Inter, auf dem eigenen Server (assets/fonts, Lizenz OFL-1.1),
     Überschriften 700 statt 800.
   - Keine schwarzen Rahmen mehr: feine helle Linien, weiche Schatten,
     runde Ecken; Knöpfe als Pillen.
   - Das Neongrün als Akzent (Knöpfe, Häkchen, Marken), nicht als Fläche.
     Der Kopf steht auf einem hellen Verlauf, der Abschluss auf Dunkelgrün.
   - Im Kopf rechts ein Produktbild (vorerst eine Skizze).
   Alle Farben wie in basis.css als Variablen, je in drei Blöcken: hell,
   dunkel nach Systemeinstellung, dunkel nach ausdrücklicher Wahl.
   ============================================================ */

@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Das leuchtende Markengrün für Knöpfe und Akzente, in beiden Schemata gleich.
     basis.css färbt --flut im Dunkelmodus dunkel (für grüne Flächen) — Knöpfe
     mit dunkler Schrift wären darauf unlesbar. */
  --signal:#6BD425;
  --schrift:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --grund:#F7FAF4;
  --karte:#FFFFFF;
  --linie:#E3EBDC;
  --linie-stark:#CFDBC6;
  --akzent-grund:#E9F7DE;      /* zarte Grüntönung: Marken, Symbole */
  --akzent-text:#2A5C14;       /* Grün als Schriftfarbe (7,4:1) */
  --kopf-verlauf:linear-gradient(135deg,#E9F7DE 0%,#F7FBF2 45%,#FFFFFF 100%);
  --abschluss-verlauf:linear-gradient(135deg,#123012 0%,#1E4A12 55%,#2A5C14 100%);
  --auf-abschluss:#F2FBEA;
  --schatten-1:0 1px 2px rgb(13 20 16 / .05),0 4px 14px rgb(13 20 16 / .05);
  --schatten-2:0 2px 4px rgb(13 20 16 / .06),0 16px 36px rgb(13 20 16 / .10);
  --schatten-knopf:0 6px 18px rgb(79 168 26 / .35);
  --rund:18px;
  --rund-gross:28px;
  --haken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23E9F7DE'/%3E%3Cpath d='M5.8 10.4l2.8 2.8 5.6-6.2' fill='none' stroke='%232A5C14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --grund:#0D1410;
    --karte:#151F18;
    --auf-karte:#E9F7DE;
    --linie:#24322A;
    --linie-stark:#33453A;
    --akzent-grund:#1C3A14;
    --akzent-text:#9BE36A;
    --kopf-verlauf:linear-gradient(135deg,#17331A 0%,#111C14 55%,#0D1410 100%);
    --abschluss-verlauf:linear-gradient(135deg,#1E4A12 0%,#2A5C14 100%);
    --schatten-1:0 1px 2px rgb(0 0 0 / .4),0 4px 14px rgb(0 0 0 / .25);
    --schatten-2:0 2px 4px rgb(0 0 0 / .45),0 16px 36px rgb(0 0 0 / .4);
    --haken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%231C3A14'/%3E%3Cpath d='M5.8 10.4l2.8 2.8 5.6-6.2' fill='none' stroke='%239BE36A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"]{
  --grund:#0D1410;
  --karte:#151F18;
  --auf-karte:#E9F7DE;
  --linie:#24322A;
  --linie-stark:#33453A;
  --akzent-grund:#1C3A14;
  --akzent-text:#9BE36A;
  --kopf-verlauf:linear-gradient(135deg,#17331A 0%,#111C14 55%,#0D1410 100%);
  --abschluss-verlauf:linear-gradient(135deg,#1E4A12 0%,#2A5C14 100%);
  --schatten-1:0 1px 2px rgb(0 0 0 / .4),0 4px 14px rgb(0 0 0 / .25);
  --schatten-2:0 2px 4px rgb(0 0 0 / .45),0 16px 36px rgb(0 0 0 / .4);
  --haken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%231C3A14'/%3E%3Cpath d='M5.8 10.4l2.8 2.8 5.6-6.2' fill='none' stroke='%239BE36A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Schrift ---------- */
body{font-feature-settings:"cv11","ss03";letter-spacing:-.005em;}
h1,h2,h3{letter-spacing:-.025em;}

/* ---------- Kopfzeile ---------- */
.hauptnavi{font-size:1rem;font-weight:600;gap:30px;}
.hauptnavi a{border-bottom-width:2px;}
.hauptnavi a:hover,.hauptnavi a.hier{color:var(--akzent-text);border-bottom-color:var(--signal);}
.kopf-telefon,.kopf-login,.schemaknopf,.burger{
  border:1px solid var(--linie-stark) !important;border-radius:12px;
  background:var(--karte);transition:background .15s ease,border-color .15s ease;
}
.kopf-telefon:hover,.kopf-login:hover,.schemaknopf:hover,.burger:hover{
  background:var(--akzent-grund);color:var(--akzent-text);border-color:var(--signal) !important;
}

/* ---------- Kopfbereich (alle Seiten) ----------
   Statt der grünen Fläche ein heller Verlauf mit runden Ecken; der
   Abschluss (.abschlussband, gleiche Grundklasse) steht weiter unten auf
   Dunkelgrün. */
.seitenkopf{
  background:var(--kopf-verlauf);color:var(--tinte);
  border-radius:var(--rund-gross);
  border:1px solid var(--linie);
  padding:44px 48px 48px;
  position:relative;overflow:hidden;
}
.seitenkopf > .huelle{position:relative;}
.startkopf{padding:64px 56px 68px;}
/* Dezenter Lichtkreis rechts oben — Tiefe ohne Bild. */
.seitenkopf::before{
  content:"";position:absolute;right:-120px;top:-160px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgb(107 212 37 / .22) 0%,rgb(107 212 37 / 0) 70%);
  pointer-events:none;
}
.startkopf-raster{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:28px;align-items:center;
  position:relative;
}
.seitenkopf .augenbraue{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:700;letter-spacing:.08em;
  color:var(--akzent-text);background:var(--akzent-grund);
  padding:7px 14px;border-radius:999px;margin-bottom:22px;
}
.seitenkopf .augenbraue::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--signal);
}
.startkopf h1{
  font-weight:750;font-size:clamp(2.1rem,3.7vw,2.85rem);line-height:1.08;letter-spacing:-.04em;
  max-width:none;text-wrap:balance;margin-bottom:22px;
}
.startkopf .vorspann{font-size:1.1rem;}
.seitenkopf .vorspann{font-weight:400;line-height:1.65;color:var(--tinte-leise);}
.seitenkopf h1{font-weight:750;letter-spacing:-.035em;line-height:1.15;}
.seitenkopf .zurueck{color:var(--akzent-text);border-bottom:none;}
.seitenkopf .zurueck:hover{text-decoration:underline;}
.startkopf-bild img{display:block;width:118%;max-width:none;height:auto;margin-right:-18%;}

/* ---------- Knöpfe ---------- */
.knopf,
.seitenkopf .knopf.ruf-auf,
.seitenkopf .knopf.anfrage-knopf,
.auswahl-leiste .knopf.anfrage-knopf{
  background:var(--signal);color:#0D1410;
  border:none;border-radius:999px;
  font-weight:700;padding:15px 30px;
  box-shadow:var(--schatten-knopf);text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.knopf:hover,
.seitenkopf .knopf.ruf-auf:hover,
.seitenkopf .knopf.anfrage-knopf:hover{
  transform:translateY(-2px);box-shadow:0 10px 26px rgb(79 168 26 / .45);background:#78DE33;
}
.seitenkopf .knopf.ruf-auf{margin-top:28px;}

/* ---------- Vertrauensleiste ---------- */
.vertrauensleiste ul{justify-content:center;gap:12px 14px;padding-block:26px 6px;font-weight:500;}
.vertrauensleiste li{
  background:var(--karte);border:1px solid var(--linie);border-radius:999px;
  padding:8px 16px 8px 12px;box-shadow:var(--schatten-1);color:var(--tinte-leise);
}
.vertrauensleiste svg{color:var(--akzent-text);}

/* ---------- Abschnitte ---------- */
.block{padding:calc(var(--luft) * 1.5) 0;}
.blocktitel,.blocktitel-start{
  font-size:.8rem;font-weight:700;letter-spacing:.12em;color:var(--akzent-text);margin-bottom:14px;
}
.block > .huelle > .vorspann{font-size:1.3rem;font-weight:600;line-height:1.5;letter-spacing:-.015em;color:var(--tinte);}

/* ---------- Zielgruppen ---------- */
.tueren{gap:18px;margin-top:36px;}
.tuer{
  border:1px solid var(--linie);border-radius:var(--rund);
  box-shadow:var(--schatten-1);padding:24px 24px 20px;gap:8px;min-height:150px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
a.tuer:hover{transform:translateY(-4px);box-shadow:var(--schatten-2);border-color:var(--signal);}
.tuer-name{font-weight:700;font-size:1.15rem;}
.tuer-text{font-size:.9rem;color:var(--tinte-leise);}
.tuer-mehr{color:var(--akzent-text);font-weight:600;font-size:.88rem;}
.tuer-mehr span{display:inline-block;transition:transform .2s ease;}
a.tuer:hover .tuer-mehr span{transform:translateX(4px);}
.leise .tuer{background:transparent;box-shadow:none;border-style:dashed;}

/* ---------- Die drei Säulen ---------- */
.saeulen{gap:20px;margin-top:36px;}
.saeulen .kernmodul{
  background:var(--karte);color:var(--auf-karte);
  border:1px solid var(--linie);border-top:4px solid var(--signal);
  border-radius:var(--rund);box-shadow:var(--schatten-1);padding:28px 26px;
}
.saeulen .modul-text{color:var(--tinte-leise);}
.modul-nr{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:var(--akzent-grund);color:var(--akzent-text);
  font-size:.85rem;font-weight:700;letter-spacing:0;margin-bottom:16px;
}
.modul-name{font-weight:700;font-size:1.25rem;}
.modul-schlagworte{gap:10px;border-top:1px solid var(--linie);padding-top:18px;margin-top:auto;}
.saeulen .modul-schlagworte li,
.modul-schlagworte li{
  background:var(--haken) no-repeat left .1em / 18px 18px;
  color:var(--tinte);border:none;padding:0 0 0 28px;
  font-size:.9rem;font-weight:500;line-height:1.45;
}
.mit-sprechblase[data-sprechblase]{text-decoration:underline dotted var(--linie-stark);text-underline-offset:4px;}
.mit-sprechblase::after{
  border:1px solid var(--linie);border-radius:12px;box-shadow:var(--schatten-2);
  background:var(--karte);color:var(--tinte);
}
.mit-sprechblase::before{border-top-color:var(--karte);margin-bottom:-1px;}

/* Der Säulen-Abschnitt als weißes Band über die volle Breite: Die Seite
   gliedert sich durch den Wechsel der Flächen statt durch Rahmen. */
#loesung{background:var(--karte);border-block:1px solid var(--linie);}
#loesung .kernmodul{background:var(--grund);box-shadow:none;}

/* ---------- Vertrauen und Sicherheit ---------- */
.sicherheit{gap:20px;}
.sicherheit li{
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--rund);
  box-shadow:var(--schatten-1);padding:24px;gap:8px;
}
.sicherheit svg{
  width:46px;height:46px;padding:10px;border-radius:14px;
  background:var(--akzent-grund);color:var(--akzent-text);margin-bottom:8px;
}
.sicherheit strong{font-weight:700;font-size:1.05rem;}
.sicherheit span{font-size:.9rem;}

.belegfeld{
  border:1px solid var(--linie);border-radius:var(--rund-gross);box-shadow:var(--schatten-2);
  padding:84px 44px 32px;max-width:none;position:relative;margin-top:40px;
}
/* Anführungszeichen als Grafik oben links, über dem Zitat statt darin. */
.belegfeld::before{
  content:"";position:absolute;left:44px;top:36px;width:42px;height:32px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 32'%3E%3Cpath fill='%236BD425' d='M0 32V19C0 8.6 5.4 2.2 16.2 0l1.8 4.6C12.2 6.3 9.4 9.6 9.2 14.6H17V32H0zm24 0V19C24 8.6 29.4 2.2 40.2 0L42 4.6c-5.8 1.7-8.6 5-8.8 10H41V32H24z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.beleg{max-width:62ch;}
.beleg blockquote p{font-weight:500;font-size:1.35rem;line-height:1.5;}
.beleg figcaption strong{font-weight:700;}
.belegreihe{border-top:1px solid var(--linie);}
.beleglogos{font-weight:600;color:var(--tinte-leise);}
.beleglink{color:var(--akzent-text);border-bottom:none;text-decoration:underline;text-underline-offset:4px;}

/* ---------- Abschluss ---------- */
.abschlussband{
  background:var(--abschluss-verlauf);color:var(--auf-abschluss);
  border-radius:var(--rund-gross);padding:64px 56px;text-align:center;
  position:relative;overflow:hidden;margin-bottom:40px;
}
.abschlussband::before{
  content:"";position:absolute;left:50%;top:-220px;width:640px;height:440px;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgb(107 212 37 / .28) 0%,rgb(107 212 37 / 0) 70%);
  pointer-events:none;
}
.abschlussband > .huelle{position:relative;display:flex;flex-direction:column;align-items:center;}
.abschlussband h2{font-weight:700;max-width:22ch;margin-inline:auto;}
.abschlussband .vorspann{margin-inline:auto;color:rgb(242 251 234 / .85);}
.abschlussband .augenbraue{color:var(--signal);background:rgb(107 212 37 / .14);}
.abschlussband .knopf.ruf-auf{align-self:center;}
.abschlussband .mikrotext a{border-bottom:none;text-decoration:underline;text-underline-offset:3px;}

/* ---------- Rückruf-Fenster ---------- */
.rueckruffenster{border:none;border-radius:var(--rund-gross);box-shadow:var(--schatten-2);padding:32px;}
.rueckruffenster::backdrop{background:rgb(13 20 16 / .45);backdrop-filter:blur(3px);}
.rueckruf h2{font-weight:700;border-bottom:1px solid var(--linie);}
.rueckruf input,.rueckruf textarea{
  border:1px solid var(--linie-stark);border-radius:12px;background:var(--grund);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.rueckruf input:focus,.rueckruf textarea:focus{
  outline:none;border-color:var(--signal);box-shadow:0 0 0 4px rgb(107 212 37 / .25);background:var(--karte);
}

/* ---------- Fußband ---------- */
.fussband{border-top:1px solid var(--linie);}

/* ============================================================
   Unterseiten und Portal (seit 24.10.2026)
   ============================================================ */

.sprunglink{border:none;border-radius:12px;box-shadow:var(--schatten-2);}

/* ---------- Karten: hell, feine Linie, runde Ecken, weicher Schatten ---------- */
.nutzen li,.pakete li,.fall,.werte li,.team li,.stelle,.danke,.weiterweg,.webinar,
.kernmodul,.portal-karte,.version,.dokumente-bereich,.versionen-filter,.zustimmung{
  border:1px solid var(--linie);border-radius:var(--rund);box-shadow:var(--schatten-1);
}
.kernmodule .kernmodul{transition:transform .2s ease,box-shadow .2s ease;}
.nutzen strong,.paket-name,.fall-org,.werte strong,.team h3,.stelle h3,
.danke h1,.weiterweg h2,.modul-name,.hosting h2,.kontakt-info h2{font-weight:700;}
.nutzen li{padding:22px 24px;}

/* Kleine Module-Kästchen der Zielgruppenseiten: Liste mit Häkchen statt Rahmen. */
.module{gap:10px 22px;}
.module li{
  background:var(--haken) no-repeat left center / 18px 18px;border:none;padding:4px 0 4px 28px;
  font-weight:500;color:var(--tinte);
}

/* Hervorgehobenes Paket: weiß mit grünem Rahmen statt grüner Fläche. */
.pakete li.hervor{
  background:var(--karte);color:var(--auf-karte);
  border:2px solid var(--signal);box-shadow:var(--schatten-2);
}
.pakete li.hervor .paket-leistung{color:var(--tinte-leise);}

/* Kundenlogos: ruhige Kacheln. */
.logowand li{border:1px solid var(--linie);border-radius:14px;box-shadow:none;background:var(--karte);}
.chip{border:1px solid var(--linie-stark);border-radius:999px;font-weight:600;transition:background .15s ease;}
.chip:hover{background:var(--akzent-grund);}
.chip[aria-pressed="true"]{background:var(--signal);color:#0D1410;border-color:var(--signal);}

/* Über uns: Team, Hosting. */
.team-foto{box-shadow:0 0 0 4px var(--akzent-grund);}
.hosting{
  background:var(--akzent-grund);color:var(--tinte);
  border:1px solid var(--linie);border-radius:var(--rund);box-shadow:none;
}
.hosting .augenbraue{color:var(--akzent-text);}
.hosting-marke{border:none;border-radius:14px;background:var(--signal);color:#0D1410;font-weight:700;}
.marken span{border:1px solid var(--linie-stark);border-radius:999px;}

/* Kontaktseite: Infoblock dunkelgrün wie der Abschluss. */
.kontaktflaeche{border:1px solid var(--linie);border-radius:var(--rund-gross);overflow:hidden;box-shadow:var(--schatten-2);}
.kontakt-info{background:var(--abschluss-verlauf);color:var(--auf-abschluss);}
.kontakt-info .augenbraue{color:var(--signal);}
.schritte .nr{border:none;border-radius:50%;background:var(--signal);color:#0D1410;}
.kontakt-formular{background:var(--karte);}

/* Hinweise auf Grün (Landingpages u. a.): zarte Grüntönung. */
.hinweiskasten{
  background:var(--akzent-grund);color:var(--tinte);
  border:1px solid var(--linie);border-left:4px solid var(--signal);border-radius:14px;
}
.danke .haken{border:none;border-radius:50%;box-shadow:var(--schatten-knopf);background:var(--signal);color:#0D1410;}

/* Rechtstexte: Sprungmarken mit feiner Linie. */
.sprungmarken{border-left:2px solid var(--linie-stark);}

/* Zweiter Knopf (schlicht): Pille mit feiner Linie. */
.knopf-schlicht{
  border:1px solid var(--linie-stark);border-radius:999px;color:var(--tinte);
  background:var(--karte);font-weight:600;transition:background .15s ease,border-color .15s ease;
}
.knopf-schlicht:hover{background:var(--akzent-grund);color:var(--akzent-text);border-color:var(--signal);}

/* ---------- Formulare ---------- */
.anfrage input,.anfrage textarea,.anfrage select,
.versionen-filter input,.versionen-filter select,.dokumente-suche input{
  border:1px solid var(--linie-stark);border-radius:12px;background:var(--grund);color:var(--tinte);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.anfrage input:focus-visible,.anfrage textarea:focus-visible,.anfrage select:focus-visible,
.versionen-filter input:focus,.versionen-filter select:focus,.dokumente-suche input:focus{
  outline:none;border-color:var(--signal);box-shadow:0 0 0 4px rgb(107 212 37 / .25);background:var(--karte);
}
.anfrage .hochladen{border:1px dashed var(--linie-stark);border-radius:12px;}
.formularfehler{border:1px solid var(--fehler);border-left:5px solid var(--fehler);border-radius:12px;}
.formularhinweis{border:1px solid var(--linie);border-left:5px solid var(--signal);border-radius:12px;}
.anfrage .wahl{border:1px solid var(--linie);border-radius:12px;}

/* Module auswählen (Softwaremodule-Seite) und die schwebende Leiste. */
.modul-tag span{border:1px solid var(--linie-stark);border-radius:999px;font-weight:600;}
.modul-tag input:checked + span{background:var(--signal);color:#0D1410;border-color:var(--signal);}
.modul-auswahl-liste li{border:none;border-radius:999px;background:var(--akzent-grund);color:var(--akzent-text);}
.auswahl-leiste{
  background:var(--karte);color:var(--tinte);
  border-top:1px solid var(--linie);box-shadow:0 -8px 24px rgb(13 20 16 / .08);
}

/* ---------- Kundenportal ---------- */
.portal-leiste{
  background:var(--kopf-verlauf);color:var(--tinte);
  border:1px solid var(--linie);border-radius:var(--rund);
}
.portal-geraete li{border-left-color:var(--signal);}
.eintrag-art{border:1px solid var(--linie-stark);border-radius:999px;padding:2px 9px;}
.eintrag-art.art-feature{background:var(--akzent-grund);color:var(--akzent-text);border-color:transparent;}
.version-inhalt{border-top:1px solid var(--linie);}
.dokumente-reiter{gap:8px;margin-bottom:12px;}
.dokumente-reiter a{border:1px solid var(--linie);border-radius:999px;font-weight:600;background:var(--karte);}
.dokumente-reiter a[aria-current="page"]{background:var(--signal);color:#0D1410;border-color:var(--signal);}

/* ---------- Schmale Schirme ---------- */
@media (max-width:900px){
  .startkopf{padding:40px 26px 44px;border-radius:22px;}
  .startkopf-raster{grid-template-columns:1fr;gap:30px;}
  .startkopf h1{max-width:none;}
  .startkopf-bild img{width:100%;margin-right:0;}
  .startkopf .augenbraue{font-size:.68rem;letter-spacing:.05em;padding:6px 12px;}
  .startkopf h1{font-size:2rem;}
  .abschlussband{padding:44px 24px;border-radius:22px;}
  .belegfeld{padding:34px 24px 26px;}
  .belegfeld::before{left:20px;}
}

/* Wer in seinem System „Bewegung reduzieren“ eingestellt hat, bekommt keine
   Verschiebungen beim Überfahren. */
@media (prefers-reduced-motion: reduce){
  .knopf,.seitenkopf .knopf.ruf-auf,.tuer,.tuer-mehr span{transition:none;}
  .knopf:hover,.seitenkopf .knopf.ruf-auf:hover,a.tuer:hover,a.tuer:hover .tuer-mehr span{transform:none;}
}
