/* ---------------------------------------------------------------------------
 * advisoryboard.css - die Gestaltung der Seite /advisoryboard/.
 *
 * Alles, was auf dieser Seite UNTER dem Seitenrahmen liegt - der Kopfbereich
 * mit Hintergrundbild, Titel und Unterzeile, und darunter das Kartenraster -
 * steht hier. Der Seitenrahmen selbst (Kopfzeile, Menue, Fuss) kommt aus der
 * Programmseite und bringt seine eigenen 34 Stilquellen mit; sie werden hier
 * NICHT angefasst.
 *
 * JEDE ZAHL IN DIESER DATEI IST GEMESSEN, nicht geschaetzt. Gemessen wurde am
 * 27.10.2026 im Browser (Chromium, deviceScaleFactor 1) an der Vorlage
 * https://airtec.aero/advisory-board/ bei 1440, 768 und 390 Punkten
 * Fensterbreite, als "computed style" jedes Bausteins. Wo eine Zahl aus einer
 * Stilquelle der Vorlage stammt, steht die Quelle im Kommentar dabei.
 *
 * WARUM EIGENE KLASSENNAMEN ("ab-") UND NICHT DIE DER VORLAGE. Die Vorlage ist
 * das WordPress-Baustein "elementskit-team"; ihre Gestaltung verteilt sich auf
 * team.css (26 KB), common.css (158 KB), die seiteneigene post-697.css
 * (182 KB) und die Haus-Datei so-css-astra.css. Diese vier mitzuschleppen
 * hiesse, vier fremde Bestaende zu pflegen, von denen drei Regeln fuer ein
 * Dutzend anderer Bausteine enthalten. Mit eigenen Klassennamen steht jede
 * Zahl genau einmal und an einer Stelle - und der Nachweis
 * infra/advisoryboard-nachweis.js haelt Eigenschaft fuer Eigenschaft dagegen,
 * dass dabei dasselbe herauskommt.
 *
 * WAS DAS THEMA MITGESTALTET, WIRD HIER ZURUECKGENOMMEN. Astra und ElementsKit
 * gestalten jedes h2, jedes p, jede Liste und jeden Verweis der Seite mit
 * (etwa "h2{font-size:2.13333rem;margin-bottom:20px}" aus main.min.css).
 * Jeder Selektor hier traegt deshalb mindestens zwei Klassen und ist damit
 * staerker als die Element-Selektoren des Themas.
 * ------------------------------------------------------------------------- */

/* ===========================================================================
 * 0. ZWEI SCHRIFTEN, DIE DIE VORLAGE BENUTZT - UND WARUM SIE HIER EIGENE
 *    NAMEN TRAGEN
 *
 * Beide Namen sind ABSICHTLICH andere als auf airtec.aero. Eine @font-face-
 * Regel gilt fuer die ganze Seite; wuerde hier "Mem" oder "Font Awesome"
 * stehen, aenderte sich auch, womit Kopfzeile, Menue und Fuss gesetzt werden -
 * und die kommen aus /schedule2026/ und sollen Zeichen fuer Zeichen so
 * bleiben wie auf den drei Schwesterseiten. Mit eigenen Namen wirkt die
 * Schrift NUR dort, wo sie unten ausdruecklich aufgerufen wird.
 * ======================================================================== */

/* "AB Open Sans" ist die Schrift, die die Vorlage im Kopfbereich benutzt.
 * Sie heisst dort "Mem" - ein Name, der aus dem Dateinamen von Google Fonts
 * entstanden ist ("memvYaGs126Mi..."); dahinter steckt Open Sans in der
 * normalen Staerke. Die Datei hier ist dieselbe wie auf airtec.aero,
 * Pruefsumme 9edf9221...
 *
 * WARUM SIE NOETIG IST: der Rahmen aus /schedule2026/ bringt selbst eine
 * Schrift namens "Mem" mit - aber die halbfette Fassung
 * (open-sans-600.woff2). Der Titel wird mit Staerke 800 gesetzt; mit der
 * halbfetten Fassung nimmt der Browser diese und setzt breiter, mit der
 * normalen nimmt er sie und macht selbst fett. Am 27.10.2026 gemessen:
 * "Advisory Board" ist mit der halbfetten Fassung 345,14 Punkte breit, mit
 * der normalen 335,78 - und 335,78 ist der Wert der Vorlage. */
@font-face {
  font-family: "AB Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("open-sans-400.woff2") format("woff2");
}

/* "AB Font Awesome" ist die Symbolschrift, mit der die Vorlage ihre
 * Kartentexte setzt. Das klingt sinnlos und ist es auch: in der
 * Elementor-Einstellung von airtec.aero steht als Textschrift
 * "Font Awesome" - offensichtlich versehentlich. Die Schrift traegt von allen
 * gewoehnlichen Zeichen GENAU EINES, das Leerzeichen (nachgezaehlt: 704
 * Zeichen, davon ein einziges unter 127), und zwar 0,2500 Geviert breit;
 * Helvetica setzt es 0,2778 breit. Alle Buchstaben kommen auf beiden Seiten
 * aus Helvetica.
 *
 * FOLGE OHNE DIESE ZEILEN: jedes Leerzeichen waere hier 0,39 Punkte breiter
 * als in der Vorlage (bei 14 Punkten Schriftgroesse). Das ist fuer sich
 * unsichtbar, verschiebt aber den Umbruch, wenn eine Zeile knapp an ihrer
 * Grenze steht - am 27.10.2026 bei Dr. Franziska Zeitler gemessen: in der
 * Vorlage endet die erste Zeile mit "Neue" (224,55 von 225 Punkten), hier
 * rutschte "Neue" in die zweite Zeile.
 *
 * DIE DATEI LIEGT NICHT ZWEIMAL DA: verwiesen wird auf die Fassung, die der
 * Rahmen ohnehin mitbringt (/schedule2026/assets/, 77.160 Bytes, Pruefsumme
 * 2adefcbc... - Byte fuer Byte die Datei, die auch airtec.aero ausliefert). */
@font-face {
  font-family: "AB Font Awesome";
  font-style: normal;
  font-weight: 400;
  src: url("/schedule2026/assets/fontawesome-webfont.woff2") format("woff2");
}

/* ===========================================================================
 * 1. DER KOPFBEREICH
 *
 * In der Vorlage ist das der Abschnitt 4eb1dead: ein Hintergrundbild, darueber
 * eine halbdurchsichtige dunkle Scheibe, darauf mittig Titel und Unterzeile.
 * Auf der Programm- und der Sprecherseite traegt derselbe Abschnitt nur ein
 * blaues Band von 74 Punkten Hoehe - deshalb wird er hier nicht aus dem
 * Rahmen uebernommen, sondern neu gebaut.
 * ======================================================================== */

/* Das Bild liegt auf DIESEM Server (konferenz/advisoryboard/kopfbild.jpg,
   1920 x 1080, unveraendert von airtec.aero uebernommen). Der Auftrag vom
   27.10.2026 verlangt das ausdruecklich: "keine Bildverweise auf airtec.aero".
   Die Adresse ist relativ - die Datei liegt neben dieser Stilquelle. */
.ab-kopf {
  position: relative;
  background-image: url("kopfbild.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Die dunkle Scheibe. In der Vorlage ist sie ein eigenes DIV
   (.elementor-background-overlay) mit der Grundfarbe des Themas
   (--e-global-color-primary = #091228) bei halber Deckung; gemessen
   "rgb(9, 18, 40)" und "0.5". Hier ist sie ein Pseudo-Element: ein leeres DIV
   waere ein Baustein im Quelltext, der nichts bedeutet. */
.ab-kopf::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #091228;
  opacity: .5;
}

/* Die Spur: so breit wie die Elementor-Spur des Themas (1140), mittig, und so
   hoch wie der Kopfbereich der Vorlage. "align-items:center" stellt den Text
   senkrecht in die Mitte - in der Vorlage tut das die Klasse
   "elementor-section-items-middle". Gemessen bei 1440: Abschnitt 48 bis 598,
   Textblock 272 bis 374, beide Mitten auf 323.
   "position:relative" hebt die Spur ueber die dunkle Scheibe. */
.ab-kopf-spur {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 1140px;
  min-height: 550px;
  margin: 0 auto;
}

/* Die 20 Punkte sind die beiden Innenabstaende, die Elementor in der Vorlage
   zwischen Spur und Text stellt (die aeussere Spalte und die innere je 10).
   Gemessen bei 1440: Spur 150 bis 1290, Text 170 bis 1270. */
.ab-kopf-inhalt {
  width: 100%;
  padding: 0 20px;
}

/* Titel und Unterzeile. Zur Schrift siehe Abschnitt 0 ganz oben.

   DIE 20 PUNKTE ABSTAND stehen an der HUELLE des Titels und nicht am Titel
   selbst - genau wie in der Vorlage, wo sie Elementors Grundabstand zwischen
   zwei Bausteinen sind (--widgets-spacing am .elementor-widget). Der Titel
   selbst traegt dort "margin:0", und das soll er hier auch: sonst meldet der
   Nachweis einen Unterschied, der zwar nichts bewirkt, aber jeden spaeteren
   Vergleich verrauscht. Gemessen 20,00 bei allen drei Breiten. */
.ab-kopf .ab-titel-huelle { margin-bottom: 20px; }

.ab-kopf .ab-titel,
.ab-kopf .ab-unterzeile {
  margin: 0;
  padding: 0;
  font-family: "AB Open Sans", Sans-serif;
  color: #FFFFFF;
  text-align: center;
  text-transform: uppercase;
}

.ab-kopf .ab-titel {
  font-size: 40px;
  font-weight: 800;
  line-height: 52px;
}

.ab-kopf .ab-unterzeile {
  font-size: 21px;
  font-weight: 400;
  line-height: 30px;
}

/* DIE ZWEI SCHMALEREN SPANNEN. Alle sechs Zahlen sind an der Vorlage
   gemessen; die Grenzen 1024 und 767 sind die von Elementor und stehen so in
   post-697.css.

     bis 1024   Abschnitt 460 hoch, 20 Punkte Luft an den Seiten,
                Titel 34 Punkte bei 1,4-facher Zeilenhoehe (= 47,60).
     bis 767    Abschnitt 400 hoch mit 40 Punkten Luft OBEN (zusammen 440),
                seitlich nichts, Titel 24 Punkte bei 1,5-facher Zeilenhoehe
                (= 36,00).

   DAS HINTERGRUNDBILD RUECKT BIS 767 PUNKTEN UM 251 NACH LINKS. Das steht so
   in der Vorlage ("background-position:-251px 0px") und holt auf dem schmalen
   Bildschirm den Teil des Bildes nach vorn, auf dem etwas zu sehen ist. Die
   Zahl ist uebernommen, nicht nachgerechnet. */
@media (max-width: 1024px) {
  .ab-kopf { padding: 0 20px; }
  .ab-kopf-spur { min-height: 460px; }
  .ab-kopf .ab-titel { font-size: 34px; line-height: 1.4em; }
}

@media (max-width: 767px) {
  .ab-kopf { padding: 40px 0 0 0; background-position: -251px 0px; }
  .ab-kopf-spur { min-height: 400px; }
  .ab-kopf .ab-titel { font-size: 24px; line-height: 1.5em; }
}

/* ===========================================================================
 * 2. DAS KARTENRASTER
 *
 * In der Vorlage ist das der Abschnitt 1971a6ba. Er enthaelt SIEBEN innere
 * Abschnitte mit je vier Spalten - das ist kein Zierrat, sondern bestimmt die
 * senkrechten Abstaende: innerhalb eines solchen Viererblocks stehen
 * umgebrochene Zeilen 20 Punkte auseinander, zwischen zwei Bloecken sind es
 * 60. Deshalb baut karten.php die Karten ebenfalls in Viererbloecken
 * (".ab-zeile") und nicht in einem durchgehenden Raster.
 * ======================================================================== */

/* Aussenmasse des Rasters. Gemessen: "50px 0px 100px" ueber 1024 Punkten,
   "60px 20px" darunter (post-697.css, Regel fuer 1971a6ba und ihre
   Medienregel @max-width:1024px). */
.ab-raster {
  padding: 50px 0 100px 0;
}

/* Ein Viererblock. Die 1260 sind die Breite, die die Vorlage ihren inneren
   Abschnitten ausdruecklich gibt (post-697.css:
   ".elementor-element-5266981b > .elementor-container{max-width:1260px}") -
   nicht die 1140 der uebrigen Seite. Die 40 Punkte unten sind der
   Innenabstand derselben Abschnitte.
   Gemessen bei 1440: Block 90 bis 1350 (= 1260 mittig), erste Karte bei 100. */
.ab-zeile {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 0 40px 0;
}

/* Die Spalte. Die 10 Punkte ringsum sind Elementors Spalten-Innenabstand
   (.elementor-element-populated). Sie sind der Grund, warum zwei Karten
   waagerecht 20 Punkte auseinanderstehen und zwei umgebrochene Zeilen
   senkrecht ebenfalls 20.
   "min-width:0" ist noetig, weil ein Rasterfeld sonst nicht schmaler wird als
   sein laengstes unumbrechbares Wort - bei 390 Punkten waere das sichtbar. */
.ab-spalte {
  padding: 10px;
  min-width: 0;
}

/* Der Umbruch. Die beiden Grenzen sind die von Elementor und stehen in der
   Vorlage so da: post-697.css gibt den Spalten unter
   "@media(max-width:1024px) and (min-width:768px)" die Breite 50 %, und
   unterhalb von 768 Punkten macht Elementors Grundgestaltung 100 % daraus.
   Gemessen: 4 Karten je Zeile bei 1440 (je 295 breit), 2 bei 768 (je 344),
   1 bei 390 (330). */
@media (max-width: 1024px) {
  .ab-raster { padding: 60px 20px; }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .ab-zeile { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .ab-zeile { grid-template-columns: 1fr; }
}

/* ===========================================================================
 * 3. DIE KARTE
 * ======================================================================== */

/* Gemessen: weiss, Schatten "0 28px 40px 0 rgba(0,0,0,.1)" (team.css,
   .profile-card), unten 35 Punkte Polster (post-697.css), nichts ragt heraus,
   Text mittig.
   "position:relative" und "z-index:1" oeffnen den Stapel, in dem die gruene
   Scheibe (::before) HINTER dem Inhalt, aber VOR dem weissen Grund liegt -
   genau wie in der Vorlage.
   Die Karte waechst mit ihrem Inhalt und wird NICHT auf die Hoehe der
   hoechsten Karte der Zeile gezogen; in der Vorlage ist das genauso
   (gemessen bei 1440: Spalte 674,58 hoch, die zweite Karte darin 578,75). */
.ab-karte {
  position: relative;
  z-index: 1;
  display: block;
  /* 1,65 ist die Zeilenhoehe, die die Website dem Text des Koerpers gibt
     ("--ast-body-line-height: 1.65em" in Astras eingebettetem Stil). Der
     Rahmen dieser Seite ist der Stand vom 11.10.2026 und setzt dort 1,6;
     airtec.aero setzt heute 1,65. Die Zeilenhoehe entscheidet, wie viel Luft
     unter dem Foto steht (es ist ein inline-block und sitzt auf der
     Schriftlinie) und wie hoch der Fuss mit dem runden Knopf wird - ohne
     diese Zeile ist jede Karte 3,75 Punkte niedriger als in der Vorlage
     (gemessen am 27.10.2026). Als "em" und nicht als Zahl: so vererbt sich
     eine LAENGE, und jedes Kind bekommt dieselbe - genau wie in der Vorlage,
     wo der Wert am <body> entsteht. Bei 1024 Punkten und darunter setzt die
     Website 13,68 statt 15 Punkte Schrift; 1,65 em ergibt dann von selbst die
     22,572 Punkte der Vorlage. */
  line-height: 1.65em;
  padding: 0 0 35px 0;
  background-color: #FFFFFF;
  box-shadow: 0 28px 40px 0 rgba(0, 0, 0, .1);
  overflow: hidden;
  text-align: center;
  transition: all .4s ease;
}

/* Die gruene Scheibe beim Ueberfahren. Die Farbe ist die Akzentfarbe des
   Themas (--e-global-color-accent = #48D36E; post-5.css), und post-697.css
   gibt sie dem ::before jeder Karte. */
.ab-karte::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: #48D36E;
  opacity: 0;
  transition: all .4s ease;
}

/* Der schmale Streifen am unteren Rand (team.css, .square-v6 .profile-card
   ::after): 5 Punkte hoch, blau, normalerweise blass, beim Ueberfahren voll. */
.ab-karte::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  background-color: #2965f1;
  opacity: .2;
  transition: all .4s ease;
}

.ab-karte:hover::before,
.ab-karte:hover::after { opacity: 1; }

/* Der Schatten bleibt beim Ueberfahren derselbe - team.css nimmt den
   groesseren Schatten von .profile-card:hover fuer square-v6 ausdruecklich
   wieder zurueck. Die Zeile steht hier, WEIL sie etwas zuruecknimmt: ohne sie
   wuerde nichts passieren, aber der naechste Leser muesste raten, ob der
   gleichbleibende Schatten Absicht ist. */
.ab-karte:hover { box-shadow: 0 28px 40px 0 rgba(0, 0, 0, .1); }

/* ---------------------------------------------------------------- Das Foto */

/* "inline-block" ist kein Geschmack, sondern eine Messung: in der Vorlage ist
   .profile-header ein inline-block, und darunter bleibt die Unterlaenge der
   Zeile stehen, in der es sitzt - 6,75 Punkte bei 1440. Mit "block" waere
   jede Karte um diese 6,75 Punkte niedriger als die der Vorlage.
   Breite 100 %, Hoehe von selbst: das Bild behaelt sein Seitenverhaeltnis.
   Gemessen: 34 der 35 Bilder sind quadratisch (295 x 295 bei 1440), das 35.
   (Andre Baeten, 1024 x 1013) wird 295 x 291,83. */
.ab-karte .ab-bild {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.ab-karte .ab-bild img {
  width: 100%;
  height: auto;
  object-fit: cover;
  vertical-align: middle;
  /* "0%" und nicht "0": die Vorlage schreibt "0% 0% 0% 0%" (post-697.css).
     Zu sehen ist kein Unterschied - aber der Nachweis vergleicht die
     berechneten Werte, und ein Unterschied ohne Wirkung verrauscht ihn. */
  border-radius: 0%;
  transition: all .4s ease;
}

/* ---------------------------------------------------------------- Der Text */

/* 35 Punkte ringsum (post-697.css, .profile-body). */
.ab-karte .ab-text { padding: 35px; }

/* Der Name, gruen. Die Farbe steht in der Haus-Datei so-css-astra.css der
   Website ("#3BAD5A"), die Schriftgroesse in post-697.css.
   Zur Schrift "AB Font Awesome" siehe Abschnitt 0 ganz oben: sie traegt von
   allen gewoehnlichen Zeichen nur das Leerzeichen, alle Buchstaben kommen
   aus der Grundschrift ohne Serifen. Genau so setzt die Vorlage. */
.ab-karte .ab-name {
  margin: 0;
  padding: 0;
  font-family: "AB Font Awesome", Sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  color: #3BAD5A;
  text-align: center;
  transition: all .4s ease;
}

/* Die Position. "min-height:51px" steht in so-css-astra.css und ist der
   Grund, warum eine einzeilige Position trotzdem 51 Punkte hoch ist - ohne
   diese Zahl waeren die Karten einer Zeile verschieden hoch.
   Schriftgroesse, Gewicht und Farbe ebenfalls von dort. */
.ab-karte .ab-position {
  margin: 0 0 10px 0;
  padding: 0;
  min-height: 51px;
  font-family: "AB Font Awesome", Sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 26px;
  color: #444444;
  text-align: center;
  transition: all .4s ease;
}

/* Die Organisation. "min-height:52px" wieder aus so-css-astra.css;
   Schriftgroesse 16 und Gewicht 400 aus post-697.css, das die Haus-Datei an
   dieser Stelle ueberstimmt (fuenf Klassen gegen vier). Farbe #413838 aus
   post-697.css. */
.ab-karte .ab-organisation {
  margin: 0;
  padding: 0;
  min-height: 52px;
  font-family: "AB Font Awesome", Sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: #413838;
  text-align: center;
  transition: all .4s ease;
}

/* Beim Ueberfahren wird die Karte gruen, und alle drei Zeilen werden weiss
   (team.css fuer Name und Position, post-697.css fuer Position und
   Organisation). */
.ab-karte:hover .ab-name,
.ab-karte:hover .ab-position,
.ab-karte:hover .ab-organisation { color: #FFFFFF; }

/* --------------------------------------------------------------- Der Knopf */

/* Die Liste. Sie traegt in der Vorlage genau einen Eintrag; die Form mit
   Liste und Eintrag bleibt, weil mehr als ein Verweis je Mitglied moeglich
   sein soll, ohne dass dafuer etwas umgebaut werden muss. */
.ab-karte .ab-fuss { }

.ab-karte .ab-knopfliste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ab-karte .ab-knopfliste > li { display: inline-block; }
.ab-karte .ab-knopfliste > li:not(:last-child) { margin-right: 10px; }

/* Der runde Knopf: 30 x 30, weiss, grauer Rundschatten, Symbol in Grau
   (team.css fuer Form und Masse, post-697.css fuer die Farben).
   Beim Ueberfahren wird das Symbol LinkedIn-blau - auch bei einem Verweis auf
   eine Website; die Vorlage macht da keinen Unterschied (an allen 35 Karten
   nachgesehen: dieselbe Regel, dieselbe Farbe). */
.ab-karte .ab-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #FFFFFF;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);
  color: #656565;
  font-size: 12px;
  line-height: 32px;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
}

.ab-karte .ab-knopf:hover,
.ab-karte .ab-knopf:focus { color: #0077b5; background-color: #FFFFFF; }

/* Das Symbol. In der Vorlage ist es ein Zeichen der Symbolschrift
   "elementskit" bei 12 Punkten Schriftgroesse; hier ist es dasselbe Zeichen
   als Umriss, unmittelbar in der Seite (siehe karten.php).
   WARUM NICHT DIE SCHRIFT: sie waere eine Datei von 464 KB fuer zwei Zeichen,
   und unter /schedule2026/fonts/ - wohin die mitgebrachte ekiticons.css
   zeigt - liegt sie auf diesem Server gar nicht.
   DIE 12 x 12 SIND GERECHNET UND GEMESSEN: die Schrift hat 1024 Einheiten je
   Geviert, Ober- und Unterlaenge 960 und -64, zusammen also genau ein
   Geviert; bei 12 Punkten Schriftgroesse ist das Geviert 12 Punkte hoch und
   steht in der Vorlage mittig im 30er Kreis (waagerecht 9 bis 21, senkrecht
   ebenso). Genau dort steht hier das Bild. */
.ab-karte .ab-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  overflow: hidden;
}

.ab-karte .ab-symbol svg {
  display: block;
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* Das Durchrollen beim Ueberfahren - dieselbe Bewegung wie in der Vorlage
   (common.css, @keyframes iconTranslateY): das Zeichen faellt nach unten aus
   dem Ausschnitt und kommt von oben wieder herein. */
@keyframes ab-symbol-rollen {
  49%  { transform: translateY(100%); }
  50%  { transform: translateY(-100%); opacity: 0; }
  51%  { opacity: 1; }
  100% { transform: translateY(0); }
}

.ab-karte .ab-knopf:hover .ab-symbol svg {
  animation: ab-symbol-rollen .4s forwards;
}