/*
ABSCHNITTE im CSS
=================

* Fonts (Einbindung eigener Fonts; Definition der Symbole)
* Normalisierung (Allgemein/Formulare)
* Schriftformatierung (inkl. Icons) ALLER Bereiche (Schriftart, -groesse, -dekoration, -gewicht und -farbe, Ausrichtung, line-height, letter-spacing, etc.; KEINE Abstände) und Hintergrundfarben
* Seitengerüst (also auch Header) und Allgemeines
* Hauptnavigation
  - Allgemeines
  - a (außer Schriftformatierung)
  - Zwischenüberschrift
  - Navigation 1. Ebene
  - Navigation 2. Ebene
  - Navigation 3. Ebene
  - Navigation Sprachen (1. Ebene)
* Inhalts- UND Infobereich allgemein (individ. Format. für die einz. Bereiche weiter unten festlegen)
  - Allgemeines
  - a (außer Schriftformatierung)
  - Listen allgemein
  - Unordered Lists
  - Ordered Lists
  - Icons für Links im Text
  - Icons für Linklisten
* Inhaltsbereich
  - h1-h6, hX.marker, h2.aktuell, h3.aktuell
  - p
  - Tabellen
  - Fotos/Bilder im Fließtext
  - Anreißer
  - Zitate
  - Galerie
  - Integrierte Formulare nach alter Syntax (vor FormHandler)
  - CSS FÜR FORMULARE (alleinstehende und integrierte)
    Ehemalige form.css, ergänzt um Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) und CSS für alte, integrierte Formulare.
  - Footer
* Infobereich ("rechte Spalte")
  - allgemein
  - h3, h4
  - p
  - Linklisten
  - Social Icons
  - Bilder URLs
  - Formular-Style Info-Spalte (inkl. Buttons)
* CSS für projektübergreifende jQuery-Plugins
*/



footer #switch /* Bis Funktionalität geklärt, wird zugehöriges CSS an dieser Stelle platziert */
{
  display:  none;
}





/* FONTS (Einbindung eigener Fonts; Definition der Symbole) */


  @font-face
  {
    font-family:"Vesta W01";
    src:
      url("fonts/a934b0ab-5019-494b-98c1-d5cc33085264.eot?#iefix") format("eot"),
      url("fonts/c4e2044a-4fbb-4c7d-9ebd-a8331fe5fdd5.woff") format("woff"),
      url("fonts/8f0b3adc-dbd6-4de3-b210-841621ac200d.ttf") format("truetype"),
      url("fonts/8b450b7e-1eac-4317-a502-98b2f8acbe9d.svg#8b450b7e-1eac-4317-a502-98b2f8acbe9d") format("svg");
  }

  @font-face
  {
    font-family:"Vesta W01 Bold";
    src:
      url("fonts/fe3361e4-a878-4c2d-8af2-5f664cfa9067.eot?#iefix") format("eot"),
      url("fonts/6f116aee-67b9-435c-a410-3d2638c9c3fe.woff") format("woff"),
      url("fonts/eb74234d-6b86-4781-afc7-18359b2a5610.ttf") format("truetype"),
      url("fonts/13772e9f-bbe4-447a-b258-64792eb1eaa5.svg#13772e9f-bbe4-447a-b258-64792eb1eaa5") format("svg");
  }

  @font-face
  {
    font-family:"Vesta W01 Italic";
    src:
      url("fonts/9b3ec614-2d33-4e72-b668-1a1a9c38e61b.eot?#iefix") format("eot"),
      url("fonts/9b12a826-76ed-4d7f-9025-ea24d14ee1b8.woff") format("woff"),
      url("fonts/5b5214d8-d2a1-4c03-b311-f11a911eef6c.ttf") format("truetype"),
      url("fonts/6241d959-f3b5-4296-b0b9-5b77c2a173a9.svg#6241d959-f3b5-4296-b0b9-5b77c2a173a9") format("svg");
  }

  @font-face
  {
    font-family:"Vesta W01 Bold Italic";
    src:
      url("fonts/99763a74-f9b1-4f1a-9021-57313c527a78.eot?#iefix") format("eot"),
      url("fonts/ec4cab45-4c5e-40ce-b48c-aef049d9ed9f.woff") format("woff"),
      url("fonts/0672a01c-76a8-4324-a196-b25ad5f8c7b1.ttf") format("truetype"),
      url("fonts/0d9284be-a3d5-4b94-b1e4-ec33bc2f6cc3.svg#0d9284be-a3d5-4b94-b1e4-ec33bc2f6cc3") format("svg");
  }


  @font-face
  {
    font-family:"Vesta W02";
    src:
      url("fonts/9c89d09f-e3f3-4ba7-8406-aad836192274.eot?#iefix") format("eot"),
      url("fonts/6e89cb82-c467-4da0-a6e0-cef2d7a73e1f.woff") format("woff"),
      url("fonts/c0dc9e57-dd47-4381-a42a-238c767e8b54.ttf") format("truetype"),
      url("fonts/90695e89-68e4-4f04-9db8-cc54ea0acffa.svg#90695e89-68e4-4f04-9db8-cc54ea0acffa") format("svg");
  }

  @font-face
  {
    font-family:"Vesta W02 Bold";
    src:
      url("fonts/98722129-0f69-470a-9c7d-73e12b761322.eot?#iefix") format("eot"),
      url("fonts/115c5090-4b63-4e8b-8822-87442708adfc.woff") format("woff"),
      url("fonts/1f87d321-22f7-44a7-8a08-10d03d2bf6c6.ttf") format("truetype"),
      url("fonts/d619e55a-f84e-40a0-b607-01c6b8c59c07.svg#d619e55a-f84e-40a0-b607-01c6b8c59c07") format("svg");
  }

  @font-face
  {
    font-family:"Vesta W02 Italic";
    src:
      url("fonts/0c01fbcf-36ed-4bb3-a4e7-cacf883555e0.eot?#iefix") format("eot"),
      url("fonts/a6cb7f0a-984f-4335-8027-fab868ab8a11.woff") format("woff"),
      url("fonts/7f320751-2be0-4f39-aff3-a49bf485807e.ttf") format("truetype"),
      url("fonts/2ff9a56a-f3b5-496e-ba1b-c00e8854b626.svg#2ff9a56a-f3b5-496e-ba1b-c00e8854b626") format("svg");
  }

  @font-face
  {
    font-family:"Vesta W02 Bold Italic";
    src:
      url("fonts/a9389ffc-9c24-4339-91d0-6c2b75898315.eot?#iefix") format("eot"),
      url("fonts/caa210d9-1ca3-45fd-8a1e-9678a05efce2.woff") format("woff"),
      url("fonts/1bc42cec-60d5-4eff-99aa-b1298876d17a.ttf") format("truetype"),
      url("fonts/645527cf-ac19-458f-af57-b0c696f29f28.svg#645527cf-ac19-458f-af57-b0c696f29f28") format("svg");
  }


  /* Icon-Schriftsatz */
  @font-face
  {
    font-family:  'ms-icons';
    src:
      url('fonts/ms-icons.eot?1fc958'); /* für IE9 Kompatibilität */
    src:
      url('fonts/ms-icons.eot?1fc958#iefix') format('embedded-opentype'),
      url('fonts/ms-icons.ttf?1fc958') format('truetype'),
      url('fonts/ms-icons.woff?1fc958') format('woff'),
      url('fonts/ms-icons.svg?1fc958#ms-icons') format('svg');
  }


  /* Rolli-Schriftsatz */
  @font-face
  {
    font-family:  'Metro-Pict-MS';
    src:
      url('fonts/Metro-Pict-MS.eot?81056m');
    src:
      url('fonts/Metro-Pict-MS.eot?81056m#iefix') format('embedded-opentype'),
      url('fonts/Metro-Pict-MS.ttf?81056m') format('truetype'),
      url('fonts/Metro-Pict-MS.woff?81056m') format('woff'),
      url('fonts/Metro-Pict-MS.svg?81056m#Metro-Pict-MS') format('svg');
  }


  /* Icondefinitionen */
  main ul li::before,  /* Standard-Punkt bei Listen (wie bei .punkt::before) */
  aside ul li::before  /* WICHTIG: NICHT in <nav> oder <header> um Nebeneffekte zu vermeiden */
  {
    content: "\e91c";
  }
  main .intern::before,
  aside .intern::before
  {
    content: "\e914";
  }
  main .extern::before,
  aside .extern::before
  {
    content: "\e915";
  }
  main .pdf::before,
  aside .pdf::before
  {
    content: "\e91e";
  }
  main .mail::before,
  aside .mail::before
  {
    content: "\e91f";
  }
  main .sprung::before,
  aside .sprung::before
  {
    content: "\e911";
  }
  main .punkt::before,
  aside .punkt::before
  {
    content: "\e91c";
  }
  main .punkt2::before,
  aside .punkt2::before
  {
    content: "\e90b";
  }
  main .back::before,
  aside .back::before
  {
    content: "\e913";
  }

  main .rss::before,
  aside .rss::before
  {
    content: "\e920";
  }

  main .top::before,
  aside .top::before,
  main a.pagetotop_link::before,
  aside a.pagetotop_link::before,
  main p.csc-linkToTop a::before, /* Workaround (Altlast aufgrund der alten HTML-Struktur innerer Elemente) für u.a. Presseamt */
  aside p.csc-linkToTop a::before /* Workaround (Altlast aufgrund der alten HTML-Struktur innerer Elemente) für u.a. Presseamt */
  {
    content: "\e912";
  }
  main .dekobild /* > p:after*/ .enlarge:before,
  aside .dekobild /* > p:after*/ .enlarge:before
  {
    content: "\e91d";
  }
  main p.back::before,    /* Wichtiger Workaround (Altlast aufgrund der alten HTML-Struktur innerer Elemente), damit Icon nicht doppelt eingefügt wird. */
  aside p.back::before    /* Wichtiger Workaround (Altlast aufgrund der alten HTML-Struktur innerer Elemente), damit Icon nicht doppelt eingefügt wird. */
  {
    content:  '';
  }
  main .anmelden::before,
  aside .anmelden::before
  {
    content:  "\e917";
  }
  main .settings::before,
  aside .settings::before
  {
    content:  "\e919";
  }

  main .uniE900::before,
  aside .uniE900::before
  {
    content: "\e900";
  }
  main .uniE901::before,
  aside .uniE901::before
  {
    content: "\e901";
  }
  main .uniE902::before,
  aside .uniE902::before
  {
    content: "\e902";
  }
  main .uniE903::before,
  aside .uniE903::before
  {
    content: "\e903";
  }
  main .uniE904::before,
  aside .uniE904::before
  {
    content: "\e904";
  }
  main .uniE905::before,
  aside .uniE905::before
  {
    content: "\e905";
  }
  main .uniE906::before,
  aside .uniE906::before
  {
    content: "\e906";
  }
  main .uniE907::before,
  aside .uniE907::before
  {
    content: "\e907";
  }
  main .uniE908::before,
  aside .uniE908::before
  {
    content: "\e908";
  }
  main .uniE909::before,
  aside .uniE909::before
  {
    content: "\e909";
  }
  main .uniE90A::before,
  aside .uniE90A::before
  {
    content: "\e90a";
  }
  main .uniE90B::before,
  aside .uniE90B::before
  {
    content: "\e90b";
  }
  main .uniE90C::before,
  aside .uniE90C::before
  {
    content: "\e90c";
  }
  main .uniE90D::before,
  aside .uniE90D::before
  {
    content: "\e90d";
  }
  main .uniE90E::before,
  aside .uniE90E::before
  {
    content: "\e90e";
  }
  main .uniE90F::before,
  aside .uniE90F::before
  {
    content: "\e90f";
  }
  main .uniE910::before,
  aside .uniE910::before
  {
    content: "\e910";
  }
  main .uniE911::before,
  aside .uniE911::before
  {
    content: "\e911";
  }
  main .uniE912::before,
  aside .uniE912::before
  {
    content: "\e912";
  }
  main .uniE913::before,
  aside .uniE913::before
  {
    content: "\e913";
  }
  main .uniE914::before,
  aside .uniE914::before
  {
    content: "\e914";
  }
  main .uniE915::before,
  aside .uniE915::before
  {
    content: "\e915";
  }
  main .uniE916::before,
  aside .uniE916::before
  {
    content: "\e916";
  }
  main .uniE917::before,
  aside .uniE917::before
  {
    content: "\e917";
  }
  main .uniE918::before,
  aside .uniE918::before
  {
    content: "\e918";
  }
  main .uniE919::before,
  aside .uniE919::before
  {
    content: "\e919";
  }
  main .uniE91A::before,
  aside .uniE91A::before
  {
    content: "\e91a";
  }
  main .uniE91B::before,
  aside .uniE91B::before
  {
    content: "\e91b";
  }
  main .uniE91C::before,
  aside .uniE91C::before
  {
    content: "\e91c";
  }
  main .uniE91D::before,
  aside .uniE91D::before
  {
    content: "\e91d";
  }
  main .uniE91E::before,
  aside .uniE91E::before
  {
    content: "\e91e";
  }
  main .uniE91F::before,
  aside .uniE91F::before
  {
    content: "\e91f";
  }
  main .uniE920::before,
  aside .uniE920::before
  {
    content: "\e920";
  }
  main .uniE921::before,
  aside .uniE921::before
  {
    content: "\e921";
  }

  /* Rolli-Icondefinitionen (Metro Pict) */
  .gebaerden::before
  {
    content: "\e900";
  }
  .haltestelle::before
  {
    content: "\e902";
  }
  .hoeren_tech::before
  {
    content: "\e903";
  }
  .info_easy_1::before
  {
    content: "\e904";
  }
  .info_sehen::before
  {
    content: "\e905";
  }
  .rolli_::before
  {
    content: "\e906";
  }
  .rolli_fem::before
  {
    content: "\e907";
  }
  .rolli_h::before
  {
    content: "\e908";
  }
  .rolli_hilfe::before
  {
    content: "\e909";
  }
  .rolli_lift_::before
  {
    content: "\e90a";
  }
  .rolli_lift::before
  {
    content: "\e90b";
  }
  .rolli_p::before
  {
    content: "\e90c";
  }
  .rolli_wc_::before
  {
    content: "\e90d";
  }
  .rolli_wc_key_::before
  {
    content: "\e90e";
  }
  .rolli_wc_key::before
  {
    content: "\e90f";
  }
  .rolli_wc::before
  {
    content: "\e910";
  }
  .rolli::before
  {
    content: "\e911";
  }
  .bahn::before
  {
    content: "\e912";
  }
  .signalampel::before
  {
    content: "\e913";
  }
  .wickeln::before
  {
    content: "\e914";
  }


/* ENDE FONTS (Einbindung eigener Fonts; Definition der Symbole) */





/* NORMALISIERUNG */


  html
  {
    margin:            0;
    padding:          0;
    font-size:          10px;  /* bereitet die Nutzung der Einheit rem vor */
    font-family:        sans-serif;
    -ms-text-size-adjust:    100%;  /* zur Umgehung Schriftgrößenbug */
    -webkit-text-size-adjust:  100%;  /* zur Umgehung Schriftgrößenbug */
  }

  body *
  {
    outline:  0 none black;  /* width, style, color */
  }

  header, nav, main, aside, footer, figure, figcaption,
  section, article,
  details, summary, hgroup
  {
    display:  block;
  }

  body, div, header, nav, main, aside, footer, figure, figcaption,
  section, article,
  p, pre, blockquote, hr,
  form, fieldset, legend, input, /* Das ist bzgl. der Formulare noch zu testen */
  h1, h2, h3, h4, h5, h6,
  ul, ol, li,
  dl, dt, dd,
  th, td
  {
    margin:    0;
    padding:  0;
  }

  /* für IE<10 */
  audio, canvas, progress, video
  {
    display:    inline-block;
    vertical-align:  baseline;
  }

  ol, ul
  {
    list-style: none;
  }

  h1, h2, h3, h4, h5, h6
  {
    font-size:    2rem;
    font-weight:  normal;
  }

  address, caption, cite, code, dfn, em, strong, th, var
  {
    font-style:    normal;
    font-weight:  normal;
  }

  table
  {
    border-collapse:  collapse;
    border-spacing:    0;
  }

  fieldset, img /* Das ist bzgl. der Formulare noch zu testen */
  {
    border:      0;
    vertical-align:  bottom;
  }

  caption, th
  {
    text-align: left;
  }

  /* verhindert die Beeinflussung der line-height durch sub-/sup-Elemente in allen Browsern */
  sub, sup
  {
    font-size:    75%;
    line-height:  0;
    position:    relative;
    vertical-align:  baseline;
  }
  sub
  {
    bottom:      -0.25em;
  }
  sup
  {
    top:      -0.5em;
  }

  /* Korrigiert Anzeige in iOS 4-7 */
  audio:not([controls])
  {
    display:  none;
    height:    0;
  }

  /* Korrigiert overflow im IE. */
  svg:not(:root)
  {
    overflow:  hidden;
  }

  q:before, q:after
  {
    content:  '';
  }

  a:active,
  a:hover
  {
    outline:  0;
  }

  /*  1. Für korrektes Box-Sizing im Firefox
    2. Show the overflow in IE and Edge
  */
  hr
  {
    box-sizing:  content-box;  /* 1 */
    height:    0;        /* 1 */
    overflow:  visible;    /* 2 */
  }


/* ENDE NORMALISIERUNG */





/* NORMALISIERUNG von FORMULAREN */


  /* font ist so standardmäßig so groß wie umgebender Container */
  button,
  input,
  select,
  textarea
  {
    font:  inherit;
  }

  /*  1. Show the overflow in Edge.
    2. Show the overflow in IE, Edge and Firefox
  */
  button,
  input,  /* 1 */
  select  /* 2 */
  {
    overflow:  visible;
  }

  /*  Margin vereinheitlichen für Safari
    1. ...für Safari und Firefox
  */
  button,
  input,
  select,
  textarea  /* 1 */
  {
    margin:  0;
  }

  /*  Hebt die Vererbung von text-transform in IE, Edge und Firefox auf.
    1. dieser Punkt ist ausschließlich für Firefox
  */
  button,
  select  /* 1 */
  {
    text-transform: none;
  }

  /* Cursor in allen Browsern vereinheitlichen */
  button,
  [type="button"],
  [type="reset"],
  [type="submit"]
  {
    cursor:  pointer;
  }

  /* Verwendung des Default-Cursors bei deaktivierten Elementen */
  [disabled]
  {
    cursor:  default;
  }

  /*  1. Verhindert einen WebKit bug der durch (2) verursacht wird (dieser zerstört die nativen <audio> und <video> Kontrollelemente in Android 4.
    2. Correct the inability to style clickable types in iOS.
  */
  button,
  html [type="button"],      /* 1 */
  [type="reset"],
  [type="submit"]
  {
    -webkit-appearance:  button;  /* 2 */
  }

  /* border und padding vereinheitlichen (für Firefox) */
  button::-moz-focus-inner,
  input::-moz-focus-inner
  {
    border:    0;
    padding:  0;
  }

  /* Wiederherstellen der focus-Styles, die durch eine vorherige Regel entfernt wurden. */
  button:-moz-focusring,
  input:-moz-focusring
  {
    outline:  1px dotted ButtonText;
  }

  /* border, margin und padding in allen Browsern vereinheitlichen */
  fieldset
  {
    border:  1px solid #c0c0c0;
    margin:  0;
    padding:0;
  }

  /*  1. Korrektur text-wrapping in IE und Edge.
    2. Korrektur color-Vererbung durch fieldset-Elemente im IE.
    3. Padding entfernen um browserübergreifend Uneiheitlichkeiten mit fieldset-Elementen zu beseitigen
  */
  legend
  {
    box-sizing:  border-box;  /* 1 */
    color:    inherit;  /* 2 */
    display:  table;    /* 1 */
    max-width:  100%;    /* 1 */
    padding:  0;      /* 3 */
    white-space:normal;    /* 1 */
  }

  /* Vertikale Scrollbar im IE entfenen. */
  textarea
  {
    overflow: auto;
  }

  /* Box-Sizing vereinheitlichen
    1. ...für IE 10 und kleiner
    2. padding für IE 10 und kleiner entfernen
   */
  [type="checkbox"],
  [type="radio"]
  {
    box-sizing:  border-box;  /* 1 */
    padding:  0;      /* 2 */
  }

  /* Korrigiert das Aussehen der increment- und decrement-Buttons in Chrome. */
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button
  {
    height: auto;
  }

  /* Korrigiert das Aussehen von Such-Inputs in Chrome und Safari */
  [type="search"]
  {
    -webkit-appearance: textfield;
  }

  /* Vereinheitlicht das Aussehen (entfernt padding und innere cancel-Buttons in Chrome und Safari unter OS X) */
  [type="search"]::-webkit-search-cancel-button,
  [type="search"]::-webkit-search-decoration
  {
    -webkit-appearance: none;
  }


/* ENDE NORMALISIERUNG von FORMULAREN */





/* SCHRIFTFORMATIERUNG (inkl. Icons) ALLER BEREICHE (Schriftart, -groesse, -dekoration, -gewicht und -farbe, Ausrichtung, line-height, letter-spacing, etc.; KEINE Abstände) und HINTERGRUNDFARBEN */


  /* Reihenfolge für Pseudo-Klassen beachten :link :visited :hover :focus :active */

  body
  {
    font-family:    "Vesta W01", Verdana, Geneva, Arial, Helvetica, sans-serif;
    color:        #444;
    background-color:  #dfdfdf;
  }

  h1, h2, h3, h4, h5, h6
  {
    font-weight:  normal;
    font-style:    normal;
    font-family:  "Vesta W01 Bold", Verdana, Geneva, Arial, Helvetica, sans-serif;
  }

  b, strong,
  b strong,
  strong b
  {
    font-weight:  normal;
    font-style:    normal;
    font-family:  "Vesta W01 Bold", Verdana, Geneva, Arial, Helvetica, sans-serif;
  }

  i, em,
  i em,
  em i
  {
    font-weight:  normal;
    font-style:    normal;
    font-family:  "Vesta W01 Italic", Verdana, Geneva, Arial, Helvetica, sans-serif;
  }

  b i,
  i b,
  b em,
  em b,
  strong i,
  i strong,
  strong em,
  em strong
  {
    font-weight:  normal;
    font-style:    normal;
    font-family:  "Vesta W01 Bold Italic", Verdana, Geneva, Arial, Helvetica, sans-serif;
  }

  p,
  li,
  main div,  /* betrifft auch die Überschriften im VK */
  aside div
  {
    -webkit-hyphens:  auto;
    -moz-hyphens:    auto;
    -ms-hyphens:    auto;
    hyphens:      auto;
  }

  a
  {
    color:        #333333;        /* Farbe der Links - wird im Navigationsbereich überschrieben. */
    text-decoration:  underline;
  }

  a.mail,    /* unterbindet, dass E-Mail Adressen ge- */
  li.mail a  /* trennt werden */
  {
    -webkit-hyphens:  none;
    -moz-hyphens:    none;
    -ms-hyphens:    none;
    hyphens:      none;
  }

  #brot a /* Breadcrumbs */
  {
    font-size:      1em;  /* Fallback, wenn rem nicht unterstützt wird. */
    font-size:      1.2rem;
    line-height:    1.4;
  }

  #brot a::before
  {
    color:        #005b79;
    font-family:    "ms-icons",sans-serif !important;
    font-style:      normal;
    font-variant:    normal;
    font-weight:    normal;
    text-decoration:  none;
    text-transform:    none;
    vertical-align:    baseline;
    /* Better Font Rendering */
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing:grayscale;
    speak:      none;
  }

  /* Icons für Links IM TEXT (KEINE Linklisten) */
  a.intern::before,
  a.extern::before,
  a.pdf::before,
  a.mail::before,
  a.top::before,
  p.csc-linkToTop a::before,
  a.pagetotop_link::before, /* Workaround (Altlast aufgrund der alten HTML-Struktur innerer Elemente) für u.a. Presseamt */
  a.back::before,
  .dekobild .enlarge::before    /* Für Bilder im Text mit Bildunterschrift, geändert am 3.2. E.E. */
  {
    font-family:  'ms-icons', sans-serif !important;
    font-size:    1em;
    font-weight:  normal;
    font-style:    normal;
    font-variant:  normal;
    text-decoration:none;
    text-transform: none;
    color:      #005b79;
    vertical-align:  baseline;
    /* Better Font Rendering */
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing:grayscale;
    /*line-height: 0.9em;*/
  }

  /* Icons für Listen/Linklisten */
  ul li::before,
  ul li.intern::before,
  ul li.extern::before,
  ul li.pdf::before,
  ul li.punkt::before,
  ul li.mail::before,
  ul li.sprung::before
  {
    font-family:  'ms-icons', sans-serif !important;
    font-size:    1em;
    font-weight:  normal;
    font-style:    normal;
    font-variant:  normal;
    text-decoration:none;
    text-transform:  none;
    color:      #005b79;
    vertical-align:  top;
    /* Better Font Rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /*line-height: 0.9em;*/
  }

  /* Rolli-Icons */
  .rolli-picto i
  {
    font-family: 'Metro-Pict-MS', sans-serif !important;
    font-size:    2em;
    font-weight:  normal;
    font-style:    normal;
    font-variant:  normal;
    text-decoration:none;
    text-transform:  none;
    color: #005b79;
    /* Better Font Rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }


  #seiten-wrapper
  {
    background-color:  #ffffff;
  }

  .menu-trigger
  {
    /* background:    #aab315 url("images/stadtlogo-muenster.png") no-repeat scroll right top / contain ; */
    color:      #fff;
  }

  header .amt
  {
    background-color:  #ffffff;
  }

  header .amtsbezeichnung
  {
    font-family:"Vesta W01", Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size:  1.8rem;
    line-height:1;
    color:    #005b79;
  }

  header .muenster-de
  {
    font-size:      4rem;
    font-weight:    bold;
  }

  header .muenster-de a
  {
    text-decoration:  none;
    color:        #005b79;
  }

  header .header-overlay  /* transparenter Hintergrund für Overlay-Logo */
  {
    background:      rgba(255, 255, 255, 0.7);
  }

  .streifen  /* Trennstreifen zwischen Kopf und Inhalt */
  {
    background-color:  #005b79;
  }

  #navi-spalte  /* Hintergrundfarbe Navi-Spalte */
  {
    background-color:  #e1e1e1;
    background-image:  none;
    background-position:top left;
    background-repeat:  repeat;
  }

  #inhalts-spalte  /* Hintergrundfarbe Inhalts-Spalte */
  {
    background-color:  #ffffff;
    background-image:  none;
    background-position:top left;
    background-repeat:  repeat;
  }

  #info-spalte  /* Hintergrundfarbe Info-Spalte */
  {
    background-color:  #e1e1e1;
    background-image:  none;
    background-position:top left;
    background-repeat:  repeat;
  }

  /* Navigation allgemein */

  #navi-spalte nav
  {
    line-height:1.4;
  }

  #navi-spalte nav a
  {
    text-decoration:  none;
    background-image:  none;
  }

  /* Navigation 1. Ebene */

  #navi-spalte nav li
  {
    font-family:    "Vesta W01 Bold", Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size:      1.45rem;  /*entspricht der Schriftgroeße der Zwischenueberschrift */
    background-color:  #005b79;
  }

  #navi-spalte nav li a
  {
    color:    #ffffff;
  }

  #navi-spalte nav a.aktiv,
  #navi-spalte nav li a:hover,
  #navi-spalte nav li a:focus,
  #navi-spalte nav li a:active
  {
    background-color:  #aab315;
  }

  /* Navigation 2. Ebene */

  #navi-spalte nav li ul li
  {
    font-family:"Vesta W01", Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size:  1.35rem;
    background-color:  #eeefd0;
  }

  #navi-spalte nav li ul li a
  {
    color:    #444;
  }

  #navi-spalte nav li ul a.aktiv,
  #navi-spalte nav li ul li a:hover,
  #navi-spalte nav li ul li a:focus,
  #navi-spalte nav li ul li a:active
  {
    background-color:  #dde0a2;
  }

  /* Navigation 3. Ebene */

  #navi-spalte nav li ul li ul li
  {
    font-size:  1.3rem;    /* Muss so sein, da em immer in Relation zur Schriftgroeße des Elternelements zu sehen ist. */
    background-color:  #f9f9ee;
  }

  #navi-spalte nav li ul li ul li a
  {
    color:    #444;
  }

  #navi-spalte nav li ul li ul a.aktiv,
  #navi-spalte nav li ul li ul li a:hover,
  #navi-spalte nav li ul li ul li a:focus,
  #navi-spalte nav li ul li ul li a:active
  {
    color:        #000;
    background-color:  #f9f9ee;
  }

  /* Für das Aussehen des Pömpels. Achtung: Werden Größe oder vertical-align geändert, muss auch die Positionierung angepasst werden! */
  #navi-spalte nav li ul li ul a.aktiv::before,
  #navi-spalte nav li ul li ul li a:hover::before,
  #navi-spalte nav li ul li ul li a:focus::before,
  #navi-spalte nav li ul li ul li a:active::before
  {
    font-family:  "ms-icons", Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size:    0.6em;
    vertical-align:  0.1em;
    color:      #aab315;
  }

  /* Zwischenueberschrift */

  #navi-spalte nav h2
  {
    font-size:    1.45rem;  /* Entspricht der Schriftgroeße der 1. Navigationsebene */
    font-variant:  small-caps;
    font-weight:  normal;    /* Wichtig! */
    color:      #444;
  }

  /* Navigation Sprachen 1. Ebene */

  #navi-spalte nav.sprachennavigation ul li
  {
    background-color:  #E3E8CE;
  }

  #navi-spalte nav.sprachennavigation ul li a
  {
    color:        #005b79;
    background-repeat:  no-repeat;
    background-position:190px;      /* Bestimmt Position der Flaggen */
  }

  #navi-spalte nav.sprachennavigation ul li a.aktiv,
  #navi-spalte nav.sprachennavigation ul li a:hover,
  #navi-spalte nav.sprachennavigation ul li a:focus,
  #navi-spalte nav.sprachennavigation ul li a:active
  {
    color:        #005b79;
    background-color:  #C6CD72;
  }

  #navi-spalte nav.sprachennavigation ul li.de a
  {
    background-image: url(images/flags/de.gif);
  }
  #navi-spalte nav.sprachennavigation ul li.en a
  {
    background-image: url(images/flags/gb.gif);
  }
  #navi-spalte nav.sprachennavigation ul li.fr a
  {
    background-image: url(images/flags/fr.gif);
  }
  #navi-spalte nav.sprachennavigation ul li.tr a
  {
    background-image: url(images/flags/tr.gif);
  }
  #navi-spalte nav.sprachennavigation ul li.es a
  {
    background-image: url(images/flags/es.gif);
  }
  #navi-spalte nav.sprachennavigation ul li.ru a
  {
    background-image: url(images/flags/ru.gif);
    font-size: 14px;
  }
  #navi-spalte nav.sprachennavigation ul li.pl a
  {
    background-image: url(images/flags/pl.gif);
  }
  #navi-spalte nav.sprachennavigation ul li.gr a
  {
    background-image: url(images/flags/gr.gif);
  }
  #navi-spalte nav.sprachennavigation ul li.nl a
  {
    background-image: url(images/flags/nl.gif);
  }
  #navi-spalte nav.sprachennavigation ul li.ja a
  {
    background-image: url(images/flags/jp.gif);
  }
  #navi-spalte nav.sprachennavigation ul li.it a
  {
    background-image: url(images/flags/it.gif);
  }
  #navi-spalte nav.sprachennavigation ul li.ua a
  {
    background-image: url(images/flags/ua.gif);
  }


  main a:hover,
  main a:focus,
  main a:active,
  aside a:hover, /* Hovern auch in der rechten Spalte */
  aside a:focus,
  aside a:active
  {
    background-color: #e5e5e5;
  }


  main .rsbtn a:hover,  /* Für korrekte Darstellung */
  main .rsbtn a:focus,  /* der Bedienelemente       */
  main .rsbtn a:active  /* des ReadSpeaker-Players  */
  {
    background-color: transparent!important;
  }


  main
  {
    font-family:"Vesta W01", Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size:  1.4rem;
    line-height:1.4;
    color:    #444;
  }

  main h1,
  main h2,
  main h3,
  main h4
  {
    color:        #005b79;
    -webkit-hyphens:  none;
    -moz-hyphens:    none;
    -ms-hyphens:    none;
    hyphens:      none;
  }

  main h1
  {
    font-size:  20px;
    font-size:  2rem;
  }

  main h2
  {
    font-size:  18px;
    font-size:  1.8rem;
  }

  main h2.aktuell
  {
    background-color:  #e1e1e1;  /* entspricht Hintergrundfarbe der Navigation */
  }

  main h2.marker,
  main h3.marker,
  main h4.marker
  {
    background-color:  #e1e1e1;  /* entspricht Hintergrundfarbe der Navigation */
  }

  main h3
  {
    font-size:  16px;
    font-size:  1.6rem;
  }

  main h4
  {
    font-size:  14px;
    font-size:  1.4rem;
  }

  main .zitat h3
  {
    color:    #00639d;
  }


  /* Ergänzungen E.E. zu Anreißer-Überschriften */
  main .anreisser h2,
  main .anreisser h3
  {
    font-size:    16px;
    font-size:    1.6rem;
  }

  main th /* Spaltenueberschriften von Tabellen im Inhaltsbereich */
  {
    font-family:    "Vesta W01 Bold", Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size:      1em;
    color:        #333333;
    background-color:  #d9d9d9;
  }

  main th.zwischentitel
  {
    font-size:      0.8em;
    color:        #333333;
    background-color:  #E9E9E9;
    text-align:      left;
  }

  main th,
  main td
  {
    vertical-align:    top;
    text-align:      left;
    background-color:  #eeeeee;
  }

  main th.center,
  main td.center,
  main th.text-center,
  main td.text-center
  {
    text-align:  center;
  }

  main th.right,
  main td.right,
  main th.align-right,
  main td.align-right,
  main th.text-right,
  main td.text-right
  {
    text-align:  right;
  }

  main .dekobild /* Workaround aufgrund alter HTML-Struktur der inneren Elemente. Im Dummy: .bild */
  {
    background-color:  #f0f0f0;
  }

  main .dekobild > p  /* Workaround aufgrund alter HTML-Struktur der inneren Elemente. Im Dummy: .bild figcaption */
  {
    font-size: 0.85em;
  }

  main figcaption
  {
    font-size:  0.85em;
  }

  /* Zitate */
  main .zitat
  {
    background-color:  #ebebeb;
  }

  /* ABC-Listen (inkl. Navigation) */
  main #abc
  {
    text-align:  center;  /* zentriert die Liste, wenn diese ein inline-block Element ist */
  }

  main #abc ul li
  {
    background-color:  #005b79;/*#005673*/
  }

  main #abc ul li a
  {
    color:    #fff;
  }

  main #abc ul li a.aktiv,
  main #abc ul li a:hover,
  main #abc ul li a:focus,
  main #abc ul li a:active
  {
    background-color:  #AAB315;
  }
 main p.csc-linkToTop  {
    text-align:    right;
  }

  main footer
  {
    font-size:    12px;
    font-size:    1.2rem;
  }

  main footer .footerlink_seitenanfang
  {
    text-align:    right;
  }

  main footer .footerlinks
  {
    text-align:    center;
  }

  /* CSS für SCHRIFTFORMATIERUNG Formulare (alleinstehende und integrierte) */
  /* Ehemalige form.css, ergänzt um Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) und CSS für alte, integrierte Formulare. */
  main form
  {
    background-color:  #e5e5e5;  /* Muss der Farbe der checkbox-/radiobutton-Umrandung entsprechen. */
  }

  main form legend  /* Beschriftung Formularabschnitt (z.B. Kontaktdaten) */
  {
    font-family:  "Vesta W01 Bold", Verdana, Geneva, Arial, Helvetica, sans-serif;
  }

  main form li,
  main form label
  {
    line-height:  1.3 !important;  /* !important muss seltsamerweise sein, weil in basis.css und error.css was überschrieben wird. */
  }

  main form .type-text,  /* input-Zeile (inkl. Label) */
  main form .type-select,  /* selectbox-Zeile (inkl. Label) */
  main form .type-check,  /* checkbox-Zeile (inkl. Label) */
  main form .type-radio,  /* radiobutton-Zeile (inkl. Label) */
  main .tx-cq-image-gallery form .field-container /* Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) */
  {
    font-size:    inherit;/*13px;*/
  }

  main form .checkbox-group,  /* Bereich einer checkbox-Gruppe (inkl. Label) */
  main form .radio-group    /* Bereich einer radiobutton-Gruppe (inkl. Label) */
  {
    font-size:    inherit;/*13px;*/
  }

  main form .type-text input:focus,      /* Hierdurch wird das aktive Eingabeelement hervorgehoben */
  main form .type-text textarea:focus,
  main form .type-check textarea:focus,
  main form .type-select select:focus,
  main form .formular-element input:focus,  /* input-Eingabefeld alter, integrierter Formulare (vor Form-Handler) */
  main form .formular-element textarea:focus,  /* textarea-Eingabefeld alter, integrierter Formulare (vor Form-Handler) */
  main form .formular-element select:focus,  /* selectbox-Auswahlfeld alter, integrierter Formulare (vor Form-Handler) */
  main .tx-cq-image-gallery form input:focus  /* Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) */
  {
    background-color:  #fff8d1;
  }

  main form .error  /* Bitte, nicht eigegebene Daten in Pflichtfelder einzugeben. */
  {
    font-family:  "Vesta W01 Bold", Verdana, Geneva, Arial, Helvetica, sans-serif;
  }


  /* Buttons (auch im Bestätigungs-Schritt) */

  main form .submit-buttons .type-button input,      /* Buttons */
  main .last-step .buttons .type-button input,      /* Buttons in last-step */
  main form .buttons input,                /* Button alter, integrierter Formulare (vor Form-Handler) */
  main .tx-cq-image-gallery form .submit-buttons button  /* Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) */
  {
    /* ab hier speziell für Buttons alter, integrierter Formulare (vor Form-Handler) */
    font-family:"Vesta W01 Bold", Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight:normal; /* Wichtig, überschreibt Wert aus myStyles.css der Presseamt-Galerie-Extension */
    font-size:  16px;
    font-size:  1.6rem;
  }

  main form .submit-buttons .type-button .submit,  /* Submit-/Abschicken-Button */
  main .last-step .buttons .type-button .print,  /* Print-Button in last-step */
  main form .buttons input.submit,        /* Submit-Button alter, integrierter Formulare (vor Form-Handler) */
  main .tx-cq-image-gallery form .submit-buttons .submit-button /* Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) */
  {
    background-color:  #005B79;      /* wichtig bei last-step */
    color:        #ffffff;      /* wichtig bei last-step */
  }

  main form .submit-buttons .type-button .reset,  /* Reset-/Löschen-Button */
  main form .buttons input.reset,          /* Reset-Button alter, integrierter Formulare (vor Form-Handler) */
  main .tx-cq-image-gallery form .submit-buttons .reset-button /* Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) */
  {
    color:        #323232;
    background-color:  #ffffff;
  }
  /* ENDE Buttons (auch im Bestätigungs-Schritt) */


  /* Überprüfung der Daten (Step 2) */
  main .preview-step form .col1,  /* 1. Spalte (links) */
  main .preview-step form .col2  /* 2. Spalte (rechts) */
  {
    font-size:    13px;
    line-height:  1.3;
  }

  main .preview-step form .col1  /* 1. Spalte (links) */
  {
    font-family:  "Vesta W01 Bold", Verdana, Geneva, Arial, Helvetica, sans-serif;
  }
  /* ENDE Überprüfung der Daten (Step 2) */


  /* Bestätigungsseite für die Formularübermittlung (last-step) */
  /* Für Button-Formatierung siehe entsprechenden Bereich (Buttons) oben */
  main .last-step .col1,  /* 1. Spalte (links) */
  main .last-step .col2  /* 2. Spalte (rechts) */
  {
    font-size:    13px;
    line-height:  1.3;
  }

  main .last-step .col1
  {
    font-family:  "Vesta W01 Bold", Verdana, Geneva, Arial, Helvetica, sans-serif;
  }

  main .last-step .groupheadline
  {
    font-family:  "Vesta W01 Bold", Verdana, Geneva, Arial, Helvetica, sans-serif;
  }
  /* ENDE Bestätigungsseite für die Formularübermittlung (last-step) */

  /* ENDE CSS für SCHRIFTFORMATIERUNG Formulare (alleinstehende und integrierte) */


  aside
  {
    font-size:    12px;
    font-size:    1.2rem;
    line-height:  1.3; /* VERSUCH ; vorher: 1.4 */
  }

  aside h1,
  aside h2,
  aside h3,
  aside h4
  {
    -webkit-hyphens:  none;
    -moz-hyphens:    none;
    -ms-hyphens:    none;
    hyphens:      none;
  }

  aside h3
  {
    font-size:      13px;
    font-size:      1.3rem;
    color:        #ffffff;/*#005b79*/
    background-color:  #005b79;/*#1e9ee8*/
  }

  aside h4
  {
    font-size:      13px;
    font-size:      1.3rem;
  }

  aside > div > div  /* Kasten-Element */
  {
    background-color:  #fff;  /* Hintergrundfarbe */
  }

  /*aside .infobox,
  aside .kasten,  /* EE */
  /*aside .linklist /* EE */
  /*{
    background-color:  #ffffff;
  }*/

  /* Formular-Style Info-Spalte (inkl. Buttons) */

  aside form li,
  aside form label
  {
    line-height:  1.3 !important;
  }

  aside form input,
  aside form select,
  aside form textarea
  {
    background-color:  #fff;
  }

  aside form input:focus,
  aside form select:focus,
  aside form textarea:focus
  {
    background-color:  #fff8d1;
    border:        1px solid #005b79;
  }

  aside form .buttons    /* Button-Bereich */
  {
    text-align:  right;
  }

  aside form .buttons input
  {
    font-family:"Vesta W01 Bold", Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size:  12px;
    font-size:  1.2rem;
  }

  aside form .buttons input.submit
  {
    color:        #ffffff;
    background-color:  #005B79;
  }

  aside form .buttons input.reset
  {
    color:        #323232;
  }


  /* bxSlider (ausschließlich Schriftformatierung) */
  header .bx-wrapper
  {
    background:  transparent;
  }

  header .bx-wrapper .bx-caption
  {
    text-align:  right;
  }

  header .bx-wrapper .bx-caption span
  {
    font-family:  inherit;
    font-size:    1em;
    letter-spacing:  0.05em;
  }

  header .bx-wrapper .bx-controls .bx-controls-auto
  {
    text-align:  left;
  }
  /* ENDE bxSlider (ausschließlich Schriftformatierung) */

  /* Magnifique-Box (ausschließlich Schriftformatierung) */
    /*
    Die Zusätze sind wichtig, damit die Lightbox schön aussieht.
    Der Code muss auch im alten basis.css eingefügt werden, da
    die Box nicht nur bei Projekten im neuen CD eingesetzt wird,
    sondern bei allen.
    */
  .mfp-with-zoom
  {
    opacity:  1.0;
    background:  rgba(0,0,0,0.6);
  }

  .mfp-content .mfp-close
  {
    background-color:  #e0e0e0;
  }

  .mfp-content figure
  {
    background-color:  #e0e0e0;
  }

  .mfp-content figure figcaption .mfp-bottom-bar
  {
    background-color:  #e0e0e0;
  }

  .mfp-content figure figcaption .mfp-bottom-bar .mfp-title
  {
    font-size:    1.3em;
    font-family:  "Vesta W01 Bold", Verdana, Geneva, Arial, Helvetica, sans-serif;
    line-height:  1.4;
  }

  .mfp-content figure figcaption .mfp-bottom-bar .mfp-counter
  {
    font-size:    12px;
    font-size:    1.2rem;    /* em sorgt bei unterschiedlichen Projekten für unterschiedliche Größen */
    text-align:    center;
  }
  /* ENDE Magnifique-Box (ausschließlich Schriftformatierung) */


/* ENDE SCHRIFTFORMATIERUNG (inkl. Icons) ALLER BEREICHE (Schriftart, -groesse, -dekoration, -gewicht und -farbe, Ausrichtung, line-height, letter-spacing, etc.; KEINE Abstände) und HINTERGRUNDFARBEN */





/* SEITENGERÜST (also auch Header) und ALLGEMEINES */



  html
  {
    display:  block!important;  /* Workaround für den 1-Seiten-Print Bug von Firefox (html ist sonst flexbox) */
  }

  .u /* "rausgeschobenes" Element - in der Regel für Infos zur Barrierefreiheit */
  {
    position:  absolute;
    width:    1px;
    top:    -9999px;
    left:    -9999px;
  }

  hr
  {
    /* display:  none;  none darf nicht gesetzt werden, sonst verschwindet der clearing-Effekt */
    visibility:  hidden;
    width:    50%;
  }

  .invisible
  {
    display:none;
  }

  .clear
  {
    clear:    both;
    height:    0;
    overflow:  hidden;
    visibility:  hidden;
  }

  .flexbox
  {
    display:        -ms-flexbox;
    display:        -webkit-flex;
    display:        flex;    /* Macht diesen Container zum Flex-Container - direkte Kinder werden zu Flex-Items */
    -ms-flex-direction:    row;
    -webkit-flex-direction:  row;
    flex-direction:      row;    /* Hauptachse an der sich die Flex-Items (direkte Kind-Elemente) anordnen (hier: Reihe, also horizontal) */
    -ms-flex-pack:      start;
    -webkit-justify-content:flex-start;
    justify-content:    flex-start;  /* Lage der Flex-Items (direkte Kind-Elemente) entlang der Hauptachse (hier: horizontal): am Anfang */
    -ms-flex-align:      center;
    -webkit-align-items:  center;
    align-items:      center;    /* Lage der Flex-Items (direkte Kind-Elemente) entlang der Cross-Achse (hier: vertikal): zentriert */
    -ms-flex-wrap:      nowrap;
    -webkit-flex-wrap:    nowrap;
    flex-wrap:        nowrap;    /* Umbruch der Items entlang der Hauptachse (wenn zu wenig Platz): kein Umbruch */
  }


  /* Rolli-Icons */
  .rolli-picto
  {
    clear:          left;    /* es ist absichtlich nicht both, sonst ist die Darstellung z.B. bei MM nicht schön */
    display:        -ms-flexbox;
    display:        -webkit-flex;
    display:        flex;    /* Macht diesen Container zum Flex-Container - direkte Kinder werden zu Flex-Items */
    -ms-flex-direction:    row;
    -webkit-flex-direction:  row;
    flex-direction:      row;    /* Hauptachse an der sich die Flex-Items (direkte Kind-Elemente) anordnen (hier: Reihe, also horizontal) */
    -ms-flex-pack:      start;
    -webkit-justify-content:flex-start;
    justify-content:    flex-start;  /* Lage der Flex-Items (direkte Kind-Elemente) entlang der Hauptachse (hier: horizontal): am Anfang */
    -ms-flex-align:      start;
    -webkit-align-items:  flex-start;
    align-items:      flex-start;    /* Lage der Flex-Items (direkte Kind-Elemente) entlang der Cross-Achse (hier: vertikal): am Anfang */
    -ms-flex-wrap:      nowrap;
    -webkit-flex-wrap:    nowrap;
    flex-wrap:        nowrap;    /* Umbruch der Items entlang der Hauptachse (wenn zu wenig Platz): kein Umbruch */
    padding:        4px 0 0 0;
  }

  .rolli-picto i /* Rolli-Icons im Text */
  {
    speak:  none;
  }

  .rolli-picto .rolli-text
  {
    margin-left:  0.3em;
    margin-top:    0.4em;
  }

  /*.rolli-picto p   kann gelöscht werden wenn citeq JS-Code für leere <p>s entfernt
  {
    margin:    2px 0 0 16px;
    padding:  0 0 0 20px!important;
  }*/

  #brot a /* Breadcrumbs */
  {
    margin-right:    0.9em;
    margin-top:      0.7em;
  }

  #brot a::before
  {
    content:    "\e914";
    display:    inline-block;
    margin-right:  0.2em;
  }

  #sprungmarke      /* Wird erst bei kleineren Screen-Größen responsive eingeblendet. */
  {            /* (aus NTW-CSS) */
    display:  none;
  }

  #seiten-wrapper
  {
    /*max-width:      960px;  /* Standardbreite (L) */
    /*width:        960px;  /* Standardbreite (L) */
    /* Die Standardbreite wird aufgelöst, der Inhalt breitet sich nun flexibel aus. */
    max-width:      1220px;
    width:        94%;
    margin-left:    auto;
    margin-right:    auto;
    margin-bottom:    3em;
    padding:      1.2em 1em 1em 1em;  /*12px 10px 10px 10px; padding-top entspricht gegenläufigem margin bei #seiten-wrapper */
    -moz-box-shadow:  1em 0.2em 1em #999, -1em 0.2em 1em #999;  /* 10px 2px 10px #999, -10px 2px 10px #999; */
    -webkit-box-shadow:  1em 0.2em 1em #999, -1em 0.2em 1em #999;  /* 10px 2px 10px #999, -10px 2px 10px #999; */
    box-shadow:      1em 0.2em 1em #999, -1em 0.2em 1em #999;  /* 10px 2px 10px #999, -10px 2px 10px #999; */
  }

  .visib-hidden
  {
    visibility:  hidden;
  }

  .menu-trigger
  {
    display:    none;
    font-size:    18px;
    height:      47px;
    position:    relative;
    width:      100%;
  }

  .menu-trigger::before
  {
    content:    "";
    height:      5px;
    left:      5px;
    position:    absolute;
    top:      10px;
    width:      40px;
  }

  .menu-trigger img
  {
    padding-left:  4px;
    padding-top:  4px;
  }

  header
  {
    width:        100%;
    height:        275px;
    overflow: hidden;
    /* ab hier nur, wenn kein bxSlider eingebaut */
    /*background-image:  url(images/header_jib04.jpg); /* Basishöhe: 215px Basisbreite: 1180px bzw. #seiten-wrapper width -20px  */
    /*background-repeat:  no-repeat;
    background-position:0 60px;  /* Abgestimmt auf die Höhen der Kopfelemente - ändern sich diese, muss auch dieser Wert angepasst werden */
  }

  header .amt
  {
    float:        left;
    width:        315px;
    height:        86px;  /* Wenn diese Höhe angepasst wird, muss auch die Höhe des Overlays angepasst werden. */
    padding-left:    0.5em;  /*5px;*/
    /* ab hier zusätzlich wenn bxSlider eingebaut */
    position:      relative;  /* notwendig, damit der Container über dem Slider liegen kann */
    top:        0;
    z-index:      100;    /* notwendig, damit der Container über dem Slider liegen kann */
  }
  header .amtsbezeichnung
  {
    display:      block;
    float:        left;
    clear:        both;
    /*width:        295px;*/
    width:        100%;
    padding-top:    15px;
  }

  header .m-symbol
  {
    margin-left:    0.5em;  /*5px;*/
  }
  header .m-symbol img
  {
    width:  136px;
    height:  auto;
  }

  header .logos.flexbox  /* individuelle flexbox-Eigenschaften festlegen */
  {
    -ms-flex-align:      end;
    -webkit-align-items:  flex-end;
    align-items:      flex-end;    /* Lage der Flex-Items (direkte Kind-Elemente) entlang der Kross-Achse (hier: vertikal): am Ende */
    -ms-flex-pack:      justify;
    -webkit-justify-content:space-between;
    justify-content:    space-between;  /* Lage der Flex-Items (direkte Kind-Elemente) entlang der Hauptachse (hier: horizontal): gleich verteilt, ohne äußeren Rand */
  }

  header .muenster-de
  {
    margin-left:    -0.05em;  /* Wichtig! Sorgt dafür, dass muenster.de und die "Klinke" auf gleicher Weite sind (em stellt responsive Verhalten sicher). */
    margin-bottom:    -0.22em;  /* Wichtig! Sorgt dafür, dass muenster.de und Stadt-MS auf gleicher Höhe sind (em stellt responsive Verhalten sicher). */
  }

  header .muenster-de img
  {
    height:        auto;
    width:        215px;
  }

  header .stadt-ms
  {
    width:        215px;
    z-index:      1;
  }
  header .stadt-ms a
  {
    display:      inline-block;
  }
  header .stadt-ms img
  {
    height:        auto;
    width:        100%;  /* passt sich an das umliegende div an (welches standardmäßig 215px breit ist) */
  }

  header .header-overlay  /* transparenter Hintergrund für Overlay-Logo */
  {
    clear:        both;
    height:        189px;  /* Entspricht Höhe des Headerbildes UNTER der Stufe. Muss angepasst werden, wenn .amt die Höhe ändert. */
    width:        220px;  /* entspricht Breite der Navigation */
    /*display:      flex; /* erweiterte Version; siehe Flexible Boxes */
    /*align-items:    stretch; /* erweiterte Version; siehe Flexible Boxes */
    /* ab hier zusätzlich wenn bxSlider eingebaut */
    position:      absolute;
    top:        98px;
    z-index:      52;
  }
  header .header-overlay-logo  /* der div für das Logo selber */
  {
    width:        100%;  /* nimmt somit die volle Breite des Eltern-(overlay-)Containers ein */
    height:        100%;  /* nimmt somit die volle Höhe des Eltern-(overlay-)Containers ein */
    /*flex-grow:      1;  /* erweiterte Version (ohne width/height 100%); siehe Flexible Boxes */
  }
  header .header-overlay-logo.flexbox  /* individuelle flexbox-Eigenschaften festlegen */
  {
    -ms-flex-align:      center;
    -webkit-align-items:  center;
    align-items:      center;  /* Lage der Flex-Items (direkte Kind-Elemente) entlang der Kross-Achse (hier: vertikal): zentriert */
    -ms-flex-pack:      center;
    -webkit-justify-content:center;
    justify-content:    center;  /* Lage der Flex-Items (direkte Kind-Elemente) entlang der Hauptachse (hier: horizontal): zentriert */
  }

  header .content-header
  {
    clear:  both;
  }


  .streifen  /* Trennstreifen zwischen Kopf und Inhalt */
  {
    height:        1em;
    margin:        0.1em 0 0.1em 0;
  }


  #hauptteil
  {
    clear:          both;  /* Wichtig! */
  }

  #hauptteil.flexbox  /* individuelle flexbox-Eigenschaften festlegen */
  {
    -ms-flex-align:      stretch;
    -webkit-align-items:  stretch;
    align-items:      stretch;    /* Lage der Flex-Items (direkte Kind-Elemente) entlang der Kross-Achse (hier: vertikal): zentriert */
  }

  #navi-inhalt-wrapper-spalte.flexbox  /* individuelle flexbox-Eigenschaften festlegen */
  {
    -ms-flex-align:      stretch;
    -webkit-align-items:  stretch;
    align-items:      stretch;    /* Lage der Flex-Items (direkte Kind-Elemente) entlang der Kross-Achse (hier: vertikal): zentriert */
    flex-grow:        1;
  }

  #navi-spalte
  {
    min-height:      100px;
  }

  #inhalts-spalte
  {
    flex-grow:      1;
    min-height:      100px;
  }

  #info-spalte
  {
    min-height:      100px;
  }

  #navi-spalte nav
  {
    width:        220px;  /* Hier wird die Breite der Navi-Spalte festgelegt (das erste Nicht-Flex-Item Kind). */
  }                /* Die Breite direkt im Spalten-Container (einem Flex-Item) vorzunehmen, funktioniert nicht. */

  #inhalts-spalte main
  {
    padding:      0 0.7em 0.7em 0.7em;  /*0 10px 10px 10px;*/
  }

  #info-spalte aside
  {
    width:        195px;  /* 215px - 2*10px padding pro Seite */
                  /* Hier wird die Breite der Info-Spalte festgelegt (das erste Nicht-Flex-Item Kind). */
                  /* Die Breite direkt im Spalten-Container (einem Flex-Item) vorzunehmen, funktioniert nicht. */
    padding:      0.6em 0.8em 0.8em 0.8em;  /*8px 10px 10px 10px;*/

  }


/* ENDE SEITENGERÜST (also auch Header) und ALLGEMEINES */





/* HAUPTNAVIGATION */


  /* Allgemeines */

  .mobile-menu-trigger  /* Mobiles Menu standardmäßig ausblenden. Wird erst bei kleineren */
  {            /* Screen-Größen responsive eingeblendet (aus NTW-CSS). */
    display:  none;  /*!important*/
    z-index:  999999;  /*!important*/
  }

  #navi-spalte nav a
  {
    display:      block;    /* Wichtig! Nur so dehnt sich das inline Element a auf den max. zur Verfuegung stehenden Platz aus. */
  }

  /* Zwischenueberschrift */

  #navi-spalte nav h2
  {
    padding:    1em 0.2em 0.3em 0.8em;  /* 15px 3px 5px 10px */
  }

  /* Navigation 1. Ebene */

  #navi-spalte nav li
  {
    border-bottom:    0.1em #ffffff solid;
  }

  /*
  Wichtiger Workaround für IE 10/11!
  IE 10/11 können bei border nicht mit der Einheit em umgehen, ohne dass das Layout kaputt geht.
  Folgender Media-Query ist IE-spezifisch, daher wird innenliegendes CSS nur im IE angewendet.
  */
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #navi-spalte nav li
    {
      border-bottom:    1px #ffffff solid;
    }
  }

  #navi-spalte nav li a
  {
    padding:      0.3em 0.2em 0.3em 0.7em;  /* analog zur Sprachnavigation; 4px 3px 4px 10px; */
  }

  /* Navigation 2. Ebene */

  #navi-spalte nav li ul li a
  {
    padding:      0.3em 0.2em 0.3em 1.2em;/* 4px 3px 4px 17px; */
  }

  /* Navigation 3. Ebene */

  #navi-spalte nav li ul li ul li a
  {
    padding:      0.3em 0.2em 0.3em 2.2em;  /* 4px 3px 4px 30px; */
  }

  /* Für die Positionierung des Pömpels. Achtung: Werden Werte geändert, muss auch die Schriftgröße angepasst werden! */
  #navi-spalte nav li ul li ul a.aktiv::before,
  #navi-spalte nav li ul li ul li a:hover::before,
  #navi-spalte nav li ul li ul li a:focus::before,
  #navi-spalte nav li ul li ul li a:active::before
  {
    content:     "\e91c";
    margin-left:  -1.4em;
    margin-right:  0.4em;
  }

  /* Navigation Sprachen 1.Ebene */

  #navi-spalte nav.sprachennavigation ul
  {
    margin-top:    2em;          /* 20px */
    border-top:    0.1em solid #ffffff;  /* 1px */
    border-bottom:  0.1em solid #ffffff;  /* 1px */
  }


/* ENDE HAUPTNAVIGATION */





/* INHALTS- und INFOBEREICH allgemein (individ. Format. für die einz. Bereiche weiter unten festlegen) */


  /* Allgemeines */

  a.pagetotop_link
  {
    float: right;
  }

  main .linklist a,
  aside .linklist a
  {
     display:  inline;
  }


  main > div,
  aside > div
  {
    overflow:  hidden;  /* Wichtig! Sorgt dafür, dass div-Container ihren Inhalt umschließen. */
  }

  /* Listen allgemein */

  main ul,
  main ol,
  aside ul,
  aside ol
  {
    margin-top:    0.2em;
    margin-right:  0;
    margin-bottom:  0.4em;
  }

  main li,
  aside li
  {
    padding:  0 0.5em 0.2em 0;
  }

  /* Unordered Lists */

  main ul,
  aside ul
  {
    margin-left:  0.6em;  /* Abgestimmt mit dem Abstand bei der ol */
  }

  main ul li
  {
    margin-left:  1.3em;  /* Listenpunkt nach rechts -> Zeile mit Icon (::before) muss schriftgrößenabhängig negativen margin-left bekommen */
    text-indent: 3px;
  }

  aside ul li
  {
    margin-left:  1.3em;  /* Listenpunkt nach rechts -> Zeile mit Icon (::before) muss schriftgrößenabhängig negativen margin-left bekommen */
  }

  /* Ordered Lists */

  main ol,
  aside ol
  {
    margin-left:  2.0em;  /* Abgestimmt mit dem Abstand bei der ul */
  }

  main ol li,
  aside ol li
  {
    list-style-type:  decimal;
  }

  main ol.alpha li,
  aside ol.alpha li
  {
    list-style-type:  lower-alpha;
  }
  main ol.alpha ul li,
  aside ol.alpha ul li
  {
    list-style-type: none;
  }

  /* Icons für Links IM TEXT (KEINE Linklisten) */

  a.intern::before,
  a.extern::before,
  a.pdf::before,
  a.mail::before,
  a.top::before,
  p.csc-linkToTop a::before, /* Workaround (Altlast aufgrund der alten HTML-Struktur innerer Elemente) für u.a. Presseamt */
  a.pagetotop_link::before,
  a.back::before,
  .dekobild .enlarge::before    /* Für Bilder im Text mit Bildunterschrift, geändert am 3.2. E.E. */
  {
    display:    inline-block;  /* Nur so wirkt für das Icon text-decoration: none; */
    margin-right:  0.3em;/*0.2em*/
    speak:      none;
  }

  /* Icons für (Link)listen */
  ul li::before,
  ul li.intern::before,
  ul li.extern::before,
  ul li.pdf::before,
  ul li.punkt::before,
  ul li.mail::before,
  ul li.sprung::before
  /* MG .dekobild > p:after*/
  {
    speak:      none;
  }

  main ul li::before,
  main ul li.intern::before,
  main ul li.extern::before,
  main ul li.pdf::before,
  main ul li.punkt::before,
  main ul li.mail::before,
  main ul li.sprung::before
  /* MG .dekobild > p:after*/
  {
    margin-left:  -1.45em;  /* Zeile mit Icon nach links (der genaue Wert hängt von der Schriftgröße ab) -> Listenpunkt li muss etwas nach rechts */
    margin-right:  0.2em;
  }

  aside ul li::before,
  aside ul li.intern::before,
  aside ul li.extern::before,
  aside ul li.pdf::before,
  aside ul li.punkt::before,
  aside ul li.mail::before,
  aside ul li.sprung::before
  /* MG .dekobild > p:after*/
  {
    margin-left:  -1.3em;  /* Zeile mit Icon nach links (der genaue Wert hängt von der Schriftgröße ab) -> Listenpunkt li muss etwas nach rechts */
    margin-right:  0.1em;
  }

  /* ul li::before entfernt, dafür oben von 0.1 auf 0.2em erhöht
  {      /* E.E. */
  /*  margin-right:  0.3em;
  }*/

  /* ReadSpeaker Button */
  main #readspeaker_button1 .rsbtn_text
  {
    height:  20px;  /* muss gesetzt werden, damit dass Symbol sichtbar ist, wenn der Button-Text ausgeblendet ist */
  }

  main #readspeaker_button1 .rsbtn_text span
  {
    display:  none;  /* blendet Button-Text aus */
  }

/* ENDE INHALTS- und INFOBEREICH allgemein (individ. Format. für die einz. Bereiche weiter unten festlegen) */





/* INHALTSBEREICH */


  main h1
  {
    clear:      both;
    margin-top:    0.6em;  /*12px;*/
    margin-bottom:  0.5em;  /*10px;*/
  }

  main h2
  {
    margin-top:    0.4em;  /*6px;*/
    margin-bottom:  0.3em;  /*10px;*/
  }

  main h2.aktuell
  {
    margin-top:      0.7em;  /*12px;*/
    margin-bottom:    0.3em;  /*10px;*/
    padding:      0.1em 0.3em 0.15em 0.3em;  /*1px 5px 2px 5px;*/
  }

  main h2.marker,
  main h3.marker,
  main h4.marker
  {
    padding:  0.05em 0.2em;
  }

  main h3
  {
    margin-top:    0.4em;  /*6px;    /* muss unter "main .anreisser .anreisser-foto" als margin-top eingetragen werden */
    margin-bottom:  0.2em;  /*6px;*/
  }

  main h4
  {
    margin-top:    0.3em;  /*4px;*/
    margin-bottom:  0.1em;  /*2px;*/
  }

  main p
  {
    padding-top:  0.2em;
    padding-bottom:  0.2em;
  }


  /* ReadSpeaker-Button */
  main .rsbtn
  {
    float:    right;
    min-width:  20px;
    min-height:  26px;
    height:    32px;
    margin:    0.2em 0 0;
  }

  main .rsbtn + * /* betrifft alle direkten Folgeelemente des ReadSpeaker-Buttons */
  {
    clear:    both;
    margin:    0.1em 0 0 0;
  }


  /* Tabellen */
  main figure.table
  {
    overflow:  auto;  /* Wenn Inhaltsbereich zu klein -> Scrollbalken für Tabelle */
  }

  main figure.table table
  {
    margin-top:    0.7em;  /* 10px; */
    margin-bottom:  0.6em;  /* 8px; */
  }

  main figure.table table + figcaption
  {
    margin:      0 0.25em 1.6em 0.25em;  /*0 3px 20px 3px;*/
  }

  main th,
  main td
  {
    padding:      0.25em 0.6em 0.25em 0.6em;  /*4px 14px 4px 8px;*/
    border:        0.1em solid silver;  /* 1px */
  }


  /* Fotos/Bilder im Fließtext*/
  main .dekobild /* Workaround aufgrund alter HTML-Struktur der inneren Elemente. Im Dummy: .bild */
  {
    width:        200px;
    float:        right;
    margin-top:      0.4em;
    margin-left:    1em;  /*15px;*/
    margin-bottom:    0.4em;  /*5px;*/
    border:        0.1em solid #cccccc;
  }

  main .dekobild img /* Workaround aufgrund alter HTML-Struktur der inneren Elemente. Im Dummy: .bild figure img */
  {
    width:  200px;
    height: auto;
  }

  main .dekobild > p  /* Workaround aufgrund alter HTML-Struktur der inneren Elemente. Im Dummy: .bild figcaption */
  {
    padding:  0.2em;
    white-space: pre-line;
  }
  /* Galerie-Links unter .dekobild  ergänzt am 3.2., E.E. - muss noch einsortiert und ggf. mit "main", "aside", etc. versehen werden */
  .gallery_img
  {
    position: absolute;
    top: -3000em;
    left: -3000em;
  }

  /* Anreißer-Elemente im Inhaltsbereich */
  main .anreisser
  {
    clear:      both;
    overflow:    hidden;    /* Wichtig, um innenliegenden float-Container "einzufangen" */
    margin-top:    0.3em;    /*3px;*/
    margin-bottom:  1.1em;    /*15px;*/
  }

  /* Ergänzungen E.E. zu Anreißer-Überschriften */
  main .anreisser h2,
  main .anreisser h3
  {
    margin-bottom:   0.2em;
  }

  main .anreisser .anreisser-foto
  {
    float:      right;
    margin-top:    0.4em;  /*6px;    /* entspricht margin-top von "main h3" */
    margin-left:  1em;  /*10px;*/
    margin-bottom:  0.4em;  /*5px;*/
    width:      200px;
    height:      auto;
  }

  main .anreisser .dekobild
  {
    margin-top:      0.6em;  /* aufgrund des margins von h2 */
  }


  /* Zitate */
  main .zitat
  {
    margin-top:      4px;
    margin-bottom:    10px;
    padding:      6px;
    border:        1px solid #cccccc;
    border-radius:    3px;
    overflow:      hidden; /* Wichtig, damit dieser aeußere Container bei kurzem Text auch das Foto komplett umgibt. */
  }

  main .zitat h3
  {
    margin-bottom:    2px;
  }


  /* ABC-Listen (inkl. Navigation) */
  main #abc ul
  {
    display:  inline-block;  /* muss inline-block sein, damit sie durch text-align in #abc zentriert werden kann */
    margin:    1em 0 1em 0;
  }

  main #abc ul li
  {
    display:    inline-block;
    margin:      0;
    border-right:  1px solid #fff;
    padding:    0;
    float:      left;
  }

  main #abc ul li::before
  {
    content:  none;
  }

  main #abc ul li a
  {
    padding:  5px;
  }


  /* Videos einbinden */
.frame-type-textmedia .ce-textpic.ce-center.ce-above .ce-gallery .ce-outer{
    width: 100%;
}

.frame-type-textmedia .ce-textpic.ce-center.ce-above .ce-gallery .ce-outer .ce-inner{
    width: 100%;
}

.frame-type-textmedia .ce-textpic.ce-center.ce-above .ce-gallery .ce-outer .ce-inner .ce-column{
    width: 100%;
}

.frame-type-textmedia .ce-textpic.ce-center.ce-above .ce-gallery .ce-outer .ce-inner .ce-column .video{
    width: 100%;
}

.frame-type-textmedia .ce-textpic.ce-center.ce-above .ce-gallery .ce-outer .ce-inner .ce-column .video .video-embed{
    position: relative;
    padding-bottom: 56.25%; /* ratio 16x9 */
    width: 100%;
    height: auto;
    overflow: hidden;
}

.frame-type-textmedia .ce-textpic.ce-center.ce-above .ce-gallery .ce-outer .ce-inner .ce-column .video .video-embed iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.frame-type-image > .ce-image, .ce-center, .ce-above > .ce-gallery > .ce-outer {
    position: initial;
    float: none;
    right: 0;
}

.frame-type-image > .ce-image, .ce-center, .ce-above > .ce-gallery > .ce-outer > .ce-inner {
    position: initial;
    float: none;
    right: 0;
}

.frame-type-image > .ce-image, .ce-center, .ce-above > .ce-gallery > .ce-outer > .ce-inner > .ce-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.frame-type-image > .ce-image, .ce-center, .ce-above > .ce-gallery > .ce-outer > .ce-inner > .ce-row > .ce-column {
    display: flex;
    justify-content: space-between;
    margin-right: 0;

}

.ce-inner > .ce-row > .ce-column > .image {
    margin-left: 21px;
    margin-right: 21px;
    margin-bottom: 1em;
    border: 1px solid #898888;
    padding: 0.3em;
    border-radius: 3px;
    background-color: white;
}

main .embed-container
  {
    position:    relative;
    padding-bottom:  56.25%; /* ratio 16x9 */
    width:      100%;
    height:      0;
    height:      auto;
    overflow:    hidden;
  }

  main .embed-container iframe
  {
    position:  absolute;
    top:    0;
    left:    0;
    width:    100%;
    height:    100%;
  }

  /* ratio 4x3 */
  main .embed-container.ratio4x3
  {
    padding-bottom:  75%;
  }
  /* ENDE Videos einbinden */


  /* Galerie (nicht die Download-Galerie in 13_medien, also Presseamt) */
  main .galerie_rahmen
  {
    display:        -ms-flexbox;
    display:        -webkit-flex;
    display:        flex;    /* Macht diesen Container zum Flex-Container - direkte Kinder werden zu Flex-Items */
    -ms-flex-direction:    row;
    -webkit-flex-direction:  row;
    flex-direction:      row;    /* Hauptachse an der sich die Flex-Items (direkte Kind-Elemente) anordnen (hier: Reihe, also horizontal) */
    -ms-flex-pack:      start;
    -webkit-justify-content:flex-start;
    justify-content:    flex-start;  /* Lage der Flex-Items (direkte Kind-Elemente) entlang der Hauptachse (hier: horizontal): am Anfang */
    -ms-flex-align:      center;
    -webkit-align-items:  center;
    align-items:      center;    /* Lage der Flex-Items (direkte Kind-Elemente) entlang der Cross-Achse (hier: vertikal): zentriert */
    -ms-flex-wrap:      wrap;
    -webkit-flex-wrap:    wrap;
    flex-wrap:        wrap;    /* Umbruch der Items entlang der Hauptachse (wenn zu wenig Platz): Umbruch */
  }

  main .galerie_rahmen .galerie
  {
    margin-left:    21px;
    margin-right:    21px;
    margin-bottom:    1em;
    border:        1px solid #898888;
    padding:      0.3em;
    border-radius:    3px;
    background-color:  white;
  }

  main .galerie_rahmen .galerie p
  {
    max-width:  200px;
    margin:  0;
    padding:0;
    /*height:  0; ALT, früher gebraucht, um leere <p>s auszublenden; stört bei Bildern mit Unterschrift*/
  }


  /* Integrierte Formulare nach alter Syntax (vor FormHandler) */
  main form .text /* Sinnhaftigkeit in Zusammenhang mit "main form p" muss hinterfragt werden */
  {
    clear:      both;
    margin-bottom:  0.4em;
  }

  main form .formular-element
  {
    margin-bottom:  0.4em;
  }
  /* ENDE Integrierte Formulare nach alter Syntax (vor FormHandler) */



  /* CSS FÜR FORMULARE (alleinstehende und integrierte) */
  /* Ehemalige form.css, ergänzt um Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) und CSS für alte, integrierte Formulare. */

    main form
    {
      margin:        0 0 2em 0;
      padding:      1em;
      border:        1px solid #bbbbbb;
      border-radius:    5px;
      overflow:      hidden;  /* Damit innere, floatende div-container (bzw. */
                    /* Elemente) eingefangen werden. */
    }

    main form .col1
    {
      width:  135px;  /* entspricht der width eines Text-Labels (main form .type-text label) */
    }

    main form fieldset  /* Formularabschnitt (z.B. Kontaktdaten) */
    {
      margin-bottom:  0.4em;
      border:      none;
    }

    main form legend  /* Beschriftung Formularabschnitt (z.B. Kontaktdaten) */
    {
      margin-top:    0.4em;
      margin-bottom:  0;
      padding:    0.4em 0.25em 0.4em 0.25em;
    }

    main form fieldset > div      /* div-Container (1. Kind-Ebene) innerhalb von Formularen */
    {
      margin-bottom:  5px;
      padding-left:  3px;
    }

    main form .type-text,  /* input-Zeile (inkl. Label) */
    main form .type-select,  /* selectbox-Zeile (inkl. Label) */
    main form .type-check,  /* checkbox-Zeile (inkl. Label) */
    main form .type-radio,  /* radiobutton-Zeile (inkl. Label) */
    main .tx-cq-image-gallery form .field-container /* Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) */
    {
      clear:      both;
    }

    main form .type-text,  /* input-Zeile (inkl. Label) */
    main form .type-select,  /* selectbox-Zeile (inkl. Label) */
    main .tx-cq-image-gallery form .field-container /* Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) */
    {
      margin-top:    8px;
      margin-bottom:  8px;
      padding-left:  0;    /* Wichtig! Muss 0 sein. */
    }

    main form .type-check,  /* checkbox-Zeile (inkl. Label) */
    main form .type-radio  /* radiobutton-Zeile (inkl. Label) */
    {
      margin:  3px 0 3px 5px;
    }

    main form .checkbox-group-label + .type-check,  /* erste checkbox-Zeile */
    main form .radio-group-label + .type-radio,    /* erste radiobutton-Zeile */
    main form .formular-element.check.first,    /* erste checkbox alter, integrierter Formulare (vor Form-Handler) */
    main form .formular-element.radio.first      /* erster radiobutton alter, integrierter Formulare (vor Form-Handler) */
    {
      margin-top:    0.1em;
    }

    main form .type-text label,  /* input-Label */
    main .tx-cq-image-gallery form .field-container label /* Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) */
    {
      display:    inline-block;
      width:      130px;  /* entspricht der width in "form .col1" -5px */
      padding-left:  3px;
    }

    main form .type-text input,      /* input-Eingabefeld */
    main .tx-cq-image-gallery form input/* Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) */
    {
      /**width:      374px;*/
    }

    main form .formular-element input  /* input-Eingabefeld alter, integrierter Formulare (vor Form-Handler); bei Änderungen: max-width bei select anpassen */
    {
      /**width:      300px;*/
    }

    main form .type-text textarea,    /* textarea-Eingabefeld */
    main form .type-check textarea,    /* textarea-Eingabefeld innerhalb einer checkbox-Zeile */
    main form .formular-element textarea/* textarea-Eingabefeld alter, integrierter Formulare (vor Form-Handler) */
    {
      height:      200px;
      width:      512px;
      margin-top:    3px;    /* gleicher Wert wie bei "form .type-text.subject input" */
      resize:      vertical;
    }

    main form .type-text input,        /* input-Eingabefeld */
    main form .formular-element input,    /* input-Eingabefeld alter, integrierter Formulare (vor Form-Handler) */
    main form .type-text textarea,      /* textarea-Eingabefeld */
    main form .type-check textarea,      /* textarea-Eingabefeld innerhalb einer checkbox-Zeile */
    main form .formular-element textarea,  /* textarea-Eingabefeld alter, integrierter Formulare (vor Form-Handler) */
    main .tx-cq-image-gallery form input  /* Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) */
    {
      padding:    0 3px 0 3px;
      width:      90%;
      border:      1px solid #cccccc;
      border-radius:  3px;
    }

    main form .type-select label  /* selectbox-Label */
    {
      display:  inline-block;
      width:    130px;
      margin-left:3px;
    }

    main form .type-select select,    /* selectbox-Auswahlfeld */
    main form .formular-element select  /* selectbox-Auswahlfeld alter, integrierter Formulare (vor Form-Handler) */
    {
      max-width:    382px;
      margin-top:    1px;
      padding:    0 5px 0 3px;
      border:      1px solid #cccccc;
      border-radius:  3px;
    }

    main form .formular-element select  /* selectbox-Auswahlfeld alter, integrierter Formulare (vor Form-Handler) */
    {
      max-width:  303px;  /* 3px mehr als width eines input Elements */
    }

    /* Wird nur bei wenigen, speziellen Formularen benötigt und wurde daher ins spezielle CSS ausgelagert */
    /*form .type-text.subject,/* Betreff-/Thema-Bereich (inkl. Label) */
    /*form .type-text.topic  /* Betreff-/Thema-Bereich (inkl. Label) */
    /*{
      margin-top:    20px;
    }
    */

    main form .type-text.subject input,      /* Betreff-/Thema-Eingabefeld */
    main form .type-text.topic input,      /* Betreff-/Thema-Eingabefeld */
    main form .formular-element input.subject  /* Betreff-/Thema-Eingabefeld alter, integrierter Formulare (vor Form-Handler) */
    {
      width:      512px;
      padding:    0 3px 0 3px;
      margin-top:    3px;  /* gleicher Wert wie bei "form .type-text textarea" */
    }

    main form .type-text.textarea  /* Anliegen-Text-Bereich (inkl. Label) */
    {
      margin-top:    5px;
    }

    main form .checkbox-group,  /* Bereich einer checkbox-Gruppe (inkl. Label) */
    main form .radio-group    /* Bereich einer radiobutton-Gruppe (inkl. Label) */
    {
      clear:      both;
      overflow:    hidden;  /* Damit innere, floatende div-container (bzw. */
                  /* Elemente) eingefangen werden. */
      margin-top:    3px;
      margin-bottom:  3px;
      padding-left:  2px;  /* Wichtig für den Error-Border */
      padding-right:  2px;  /* Wichtig für den Error-Border */
      border:      1px solid #e5e5e5;  /* Wichtig für den Error-Border; muss an dieser Stelle */
                        /* der Farbe des Formularhintergrundes entsprechen. */
    }

    main form .radio-group .checkbox-group,    /* Bereich einer checkbox-Gruppe (inkl. Label) auf Ebene 2 */
    main form .checkbox-group .radio-group,    /* Bereich einer radiobutton-Gruppe (inkl. Label) auf Ebene 2 */
    main form .checkbox-group .checkbox-group,  /* Bereich einer checkbox-Gruppe (inkl. Label) auf Ebene 2 */
    main form .radio-group .radio-group      /* Bereich einer radiobutton-Gruppe (inkl. Label) auf Ebene 2 */
    {
      margin-top:    0;    /* Überschreibt den Wert von Ebene 1 */
      padding-left:  15px;  /* Wichtig für den Error-Border; überschreibt den Wert von Ebene 1 */
    }

    main form .type-check input,      /* checkbox */
    main form .type-radio input,      /* radiobutton */
    main form .formular-element.check input,/* checkbox alter, integrierter Formulare (vor Form-Handler) */
    main form .formular-element.radio input  /* radiobutton alter, integrierter Formulare (vor Form-Handler) */
    {
      display:  block;
      float:    left;
      margin-top:  1px;
    }

    main form .checkbox-group-label,  /* checkbox-Gruppen Label */
    main form .radio-group-label    /* radiobutton-Gruppen Label */
    {
      margin-top:    3px;
      margin-bottom:  2px;
    }

    main form .type-check label,  /* checkbox-Label */
    main form .type-radio label  /* radiobutton-Label */
    {
      display:  inline-block;
      /**width:    490px;*/
      margin-left:5px;
      /**margin-top:  -2px;*/
    }

    main form .type-radio .type-check label,  /* checkbox-Label auf Ebene 2 */
    main form .type-check .type-radio label  /* radiobutton-Label auf Ebene 2 */
    {
      /**width:    460px;        /* Überschreibt den Wert von Ebene 1 */
    }

    main form .type-text input:focus,      /* Hierdurch wird das aktive Eingabeelement hervorgehoben */
    main form .type-text textarea:focus,
    main form .type-check textarea:focus,
    main form .type-select select:focus,
    main form .formular-element input:focus,  /* input-Eingabefeld alter, integrierter Formulare (vor Form-Handler) */
    main form .formular-element textarea:focus,  /* textarea-Eingabefeld alter, integrierter Formulare (vor Form-Handler) */
    main form .formular-element select:focus,  /* selectbox-Auswahlfeld alter, integrierter Formulare (vor Form-Handler) */
    main .tx-cq-image-gallery form input:focus  /* Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) */
    {
      border:        1px solid #005B79;
    }


    /* BEGINN Formatierungen für nicht ausgefüllte Pflichtfelder */
    main form .error  /* Bitte, nicht eigegebene Daten in Pflichtfelder einzugeben. */
    {
      font-family:  "Vesta W01 Bold", Verdana, Geneva, Arial, Helvetica, sans-serif;
    }

    main form .error + div
    {
      margin-top:    0;
    }

    main form .error + div > input,    /* Pflicht-input-Felder in die keine Daten eigegeben wurden. */
    main form .error + div > textarea,  /* Pflicht-textarea-Felder in die keine Daten eigegeben wurden. */
    main form .error + div > select    /* Pflicht-selectbox-Felder bei der keine Auswahl getroffen wurde. */
    {
      border-color:  red;
    }

    main form .error + div.checkbox-group,  /* Pflicht-checkboxen in die keine Daten eigegeben wurden. */
    main form .error + div.radio-group    /* Pflicht-radiobuttons in die keine Daten eigegeben wurden. */
    {
      border:      1px solid red;
      border-radius:  3px;
    }
    /* ENDE Formatierungen für nicht ausgefüllte Pflichtfelder */


    /* Buttons (auch im Bestätigungs-Schritt) */

    main form .submit-buttons,  /* Buttons-Bereich */
    main .last-step .buttons,  /* Buttons in last-step */
    main form .buttons,      /* Button-Bereich alter, integrierter Formulare (vor Form-Handler) */
    main .tx-cq-image-gallery form .submit-buttons /* Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) */
    {
      clear:      both;
      float:      right;
      margin-top:    25px;
      margin-bottom:  25px;
    }

    main form .submit-buttons .type-button input,      /* Buttons */
    main .last-step .buttons .type-button input,      /* Buttons in last-step */
    main form .buttons input,                /* Button alter, integrierter Formulare (vor Form-Handler) */
    main .tx-cq-image-gallery form .submit-buttons button  /* Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) */
    {
      float:      right;
      height:      30px;
      padding:    0 5px 0 5px;
      border:      1px solid #cccccc;
      border-radius:  3px;
    }

    main form .submit-buttons .type-button .submit,  /* Submit-/Abschicken-Button */
    main .last-step .buttons .type-button .print,  /* Print-Button in last-step */
    main form .buttons input.submit,        /* Submit-Button alter, integrierter Formulare (vor Form-Handler) */
    main .tx-cq-image-gallery form .submit-buttons .submit-button /* Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) */
    {
      width:        auto;
    }

    main form .submit-buttons .type-button .reset,  /* Reset-/Löschen-Button */
    main form .buttons input.reset,          /* Reset-Button alter, integrierter Formulare (vor Form-Handler) */
    main .tx-cq-image-gallery form .submit-buttons .reset-button /* Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) */
    {
      width:        auto;
      margin-right:    10px;
    }

    main .tx-cq-image-gallery form .submit-buttons .reset-button /* Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) */
    {
      float:    left;
    }
    /* ENDE Buttons (auch im Bestätigungs-Schritt) */


    /* Überprüfung der Daten (Step 2) */
    main .preview-step form > div  /* divs auf der 1. Kind-Ebene */
    {
      overflow:  hidden;  /* Damit innere, floatende div-container (bzw. */
                /* Elemente) eingefangen werden. */
    }

    main .preview-step form > div > div  /* divs auf der 2. Kind-Ebene */
    {
      overflow:  hidden;  /* Damit innere, floatende div-container (bzw. */
                /* Elemente) eingefangen werden. */
    }

    main .preview-step .validation_message,  /* "Sind diese Angaben korrekt?"-Meldung oben in.preview-step */
    main .preview-step .validation-message
    {
      margin-bottom:  10px;
    }

    main .preview-step form .col1,  /* 1. Spalte (links) */
    main .preview-step form .col2  /* 2. Spalte (rechts) */
    {
      float:      left;
      margin-top:    3px;
      margin-bottom:  3px;
    }

    main .preview-step form .col1  /* 1. Spalte (links) */
    {
      clear:      both;
      width:      135px;  /* entspricht der width in "main form .type-text label" +5px */
      padding-right:  5px;  /* damit col1 und col2 nicht direkt aneinanderliegen */
    }

    main .preview-step form .multiple-values .col1,    /* Überschriften der checkbox-Einträge */
    main .preview-step form .single-values .col1    /* Überschriften der radiobutton-Einträge */
    {
      width:  100%;
      margin-top:  5px;
    }

    main .preview-step form .col2 ul,      /* Aufzählungs-Listen in Spalte 2 */
    main .preview-step form .col2 ol      /* Nummerierungs-Listen in Spalte 2 */
    {
      padding-left:  15px!important;  /* entfernt die Einrückung für die checkbox-Auswahllisten */
      margin-bottom:  0!important;  /* entfernt zu großen Abstand unter einer ul (über-
                         schreibt main ul aus basis.css/error.css) */
    }

    main .preview-step form .groupheadline
    {
      display:  none;    /* Blendet Groupheadlines global aus. */
      margin-top:  20px;
    }

    main .preview-step form .preview_subject,
    main .preview-step form .confirmation-msg,    /* u.a. meerwiese */
    main .preview-step form .preview_topic,      /* u.a. 01_anregung */
    main .preview-step form .confirm-send
    {
      margin-top:  25px;
    }

    /* Abstände von Textarea-Blöcken OBEN */
    main .preview-step form .preview_message .col1,          /* u.a. 01_anregung, 51_jib-umwelt, 51_jib-kursbuchung, 17_publikationen, vth_publikationen */
    main .preview-step form .preview_suggestion.suggestion .col1,  /* u.a. 42_digiauskunft, 61_anregungen */
    main .preview-step form .preview_reason.reason .col1,      /* u.a. 42_digiauskunft */
    main .preview-step form .preview_remark .col1,          /* u.a. 67_klime_flyer, 42_medienreservierung, 42_medienwunsch */
    main .preview-step form .preview_notices .col1,          /* u.a. 67_hochzeitswald, 44_kursanmeldung */
    main .preview-step form .preview_notice .col1,          /* u.a. 44_aufnahmeantrag, 50_umzug  */
    main .preview-step form .preview_annot01 .col1,          /* u.a. vth_publikationen */
    main .preview-step form .preview_remarks .col1          /* u.a. 45_fuehrungen */
    {
      margin-top:    10px;
    }

    /* Abstände von Textarea-Blöcken UNTEN */
    main .preview-step form .preview_message .col2,          /* u.a. 01_anregung, 51_jib-umwelt, 51_jib-kursbuchung, 17_publikationen, vth_publikationen */
    main .preview-step form .preview_suggestion.suggestion .col2,  /* u.a. 42_digiauskunft, 61_anregungen */
    main .preview-step form .preview_reason.reason .col2,      /* u.a. 42_digiauskunft */
    main .preview-step form .preview_remark .col2,          /* u.a. 67_klime_flyer, 42_medienreservierung 42_medienwunsch */
    main .preview-step form .preview_notices .col2,          /* u.a. 67_hochzeitswald, 44_kursanmeldung */
    main .preview-step form .preview_notice .col2,          /* u.a. 44_aufnahmeantrag */
    main .preview-step form .preview_annot01 .col2,          /* u.a. vth_publikationen */
    main .preview-step form .preview_remarks .col2          /* u.a. 45_fuehrungen */
    {
      margin-bottom:    10px;
    }

    /* Überschriften über die volle Breite - analog werden die Breiten auch bei last-step gesetzt */
    main .preview-step form .preview_subject .col1,
    main .preview-step form .preview_message .col1,    /* u.a. 01_anregung, 51_jib-umwelt, 51_jib-kursbuchung, 17_publikationen, 51_jib_kursanmeldung, wuddi_flohmarkt */
    main .preview-step form .preview_remark .col1,    /* u.a. 67_klima_flyer, 42_medienreservierung */
    main .preview-step form .preview_remarks .col1,    /* u.a. 45_fuehrungen */
    main .preview-step form .preview_notice .col1,    /* u.a. 50_umzug */
    main .preview-step form .preview_notices .col1,    /* u.a. 44_kursanmeldung */
    main .preview-step form .preview_suggestion .col1,  /* u.a. 61_anregungen */
    main .preview-step form .preview_requirements07 .col1,  /* mm_kongressplan (Weitere Programmpunkte) */
    main .preview-step form .preview_extras .col1    /* mm_kongressplan (Sonstiges) */
    {
      width:      100%;
    }
    /* ENDE Überprüfung der Daten (Step 2) */


    /* Bestätigungsseite für die Formularübermittlung (last-step) */
    /* Für Button-Formatierung siehe entsprechenden Bereich (Buttons) oben */
    main .last-step > div  /* divs auf der 1. Kind-Ebene */
    {
      overflow:  hidden;  /* Damit innere, floatende div-container (bzw. */
                /* Elemente) eingefangen werden. */
    }

    main .last-step > div > div  /* divs auf der 2. Kind-Ebene */
    {
      overflow:  hidden;  /* Damit innere, floatende div-container (bzw. */
                /* Elemente) eingefangen werden. */
    }

    main .last-step ul    /* Aufzählungs-Listen */
    {
      margin-bottom:  0;  /* überschreibt Wert aus basis.css und error.css */
      padding-left:  15px !important;
    }

    main .last-step .last-step-introduction  /* Einleitungstext */
    {
      margin-bottom:  10px;
    }

    main .last-step .col1,  /* 1. Spalte (links) */
    main .last-step .col2  /* 2. Spalte (rechts) */
    {
      float:      left;
      margin-top:    2px;
      margin-bottom:  3px;
    }

    main .last-step .col1
    {
      clear:      both;
      width:      150px;  /* entspricht der width in "main form .type-text label" +20px */
      padding-right:  3px;
    }

    main .last-step .multiple-values .col1  /* Überschriften der checkbox-Einträge auf volle Breite */
    {
      width:    100%;
      margin-top:  5px;
    }

    main .last-step .groupheadline
    {
      margin-top:    10px;
      margin-bottom:  3px;
    }

    /* Ausblendung einzelner Überschriften in Formularen */
    main .last-step .groupheadline.preview-etc,      /* u.a. 01_neuanregung */
    main .last-step .groupheadline.preview-registration,  /* u.a. awm_sauberes_muenster */
    main .last-step .groupheadline.preview-booklets    /* u.a. 67_klima_flyer */
    {
      display:  none;
    }

    /* Betreffzeilen und Textareas */
    main .last-step .preview-message,
    main .last-step .preview_message,    /* u.a. vth_publikationen */
    main .last-step .text-validate,
    main .last-step .preview_remark,      /* u.a. 67_klima_flyer */
    main .last-step .preview_remarks,    /* u.a. 45_fuehrungen */
    main .last-step .preview_notices      /* u.a. 67_hochzeitswald */
    {
      margin:      12px 0 10px 0;
    }

    /* Überschriften über die volle Breite - analog werden die Breiten auch bei.preview-step gesetzt */
    main .last-step .preview-message .col1,
    main .last-step .preview_message .col1,  /* u.a. vth_publikationen */
    main .last-step .text-validate .col1,
    main .last-step .preview_remark .col1,  /* u.a. 67_klima_flyer */
    main .last-step .preview_remarks .col1,  /* u.a. 45_fuehrungen */
    main .last-step .preview_subject .col1,  /* u.a. 42_digiauskunft */
    main .last-step .preview_notice .col1,  /* u.a. 50_umzug */
    main .last-step .preview_notices .col1  /* u.a. 67_hochzeitswald */
    {
      width:      100%;
    }

    main .last-step .preview_subject,
    main .last-step .preview_topic,
    main .last-step .preview-complimentary-close-block
    {
      margin-top:  25px;
    }

    /* Schlusstext */
    main .last-step .text.last-step-closing  /* u.a. vth_publikationen, 67_klima_flyer, 45_fuehrungen */
    {
      margin-top:  25px;
    }
    /* ENDE Bestätigungsseite für die Formularübermittlung (last-step) */

  /* ENDE ehemalige form.css, ergänzt um Work-Around für Presseamt Galerie-Extension (die Formularstruktur in dieser Extension ist veraltet) und CSS für alte, integrierte Formulare. */
  /* ENDE CSS FÜR FORMULARE (alleinstehende und integrierte) */

    /* BEGINN Accordion */
  .accordion {
    margin-bottom: 20px;
  }

  .accordion .invisible{
    display: none;
  }

  #inhalts-spalte .accordion  h2.accord-closed , #inhalts-spalte .accordion  h3.accord-closed{
    background-color: #f0f0f0;
    color: #005b79;
    padding: 3px 5px 3px 5px;
    font-size: 1.5rem;
    line-height: 20px;
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
margin-top: 2px;
  }
  #inhalts-spalte .accordion   h2.accord-opened , #inhalts-spalte .accordion  h3.accord-opened{
    background-color: #005b79;
    color: #ffffff;
    padding: 3px 5px 3px 5px;
    font-size: 1.5rem;
    line-height: 20px;
    border-bottom: 1px solid #005b79;
    cursor: pointer;
  }

  .accord-closed::before {
    font-family: 'ms-icons', sans-serif !important;
    font-size: 1em;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    text-decoration: none;
    text-transform: none;
    color: #005b79;
    vertical-align: baseline;
    float: right;
    -webkit-font-smoothing: antialiased;
    content: "\e917";
  }

  .accord-opened::before {
    font-family: 'ms-icons', sans-serif !important;
    font-size: 1em;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    text-decoration: none;
    text-transform: none;
    color: #fff;
    vertical-align: baseline;
    float: right;
    -webkit-font-smoothing: antialiased;
    content: "\e918";
  }

  /* END Accordion */

  /* Footer */
  main footer
  {
    clear:      both;
    margin-top:    15px;
    margin-bottom:  10px;
  }

  main footer .footerlinks
  {
    clear:      both;
    margin-top:    2rem;/*20px;*/
    padding-top:  1.5rem;/*15px;*/
    border-top:    0.1rem solid #cccccc;/*1px solid #cccccc;*/
  }

  .footerlinks ul
  {
    height:20px;
    text-align:center;
  }

  .footerlinks ul li
  {
    display:inline-block;
    position:relative;
    padding: 0 7px;
    margin: 0;
  }

  .footerlinks ul li::before
  {
    content: none;
  }

/* ENDE INHALTSBEREICH */





/* INFOBEREICH ("rechte Spalte") */


  #info-spalte aside > div > div
  {
    margin-top:      0;
    margin-bottom:    1.5em;      /* Abstand zwischen Kästen */
  }

  /* VERSUCH */
  aside > div > div h3 + *    /* Abstand nach einer Kastenüberschrift zum ersten Inhaltselement */
  {
    margin-top:    0.5em;
    padding-top:  0;
  }

  /* VERSUCH */
  aside > div > div > *:last-child  /* alle letzten Kasten-Inhaltselemente sollen den gleichen Abstand nach unten haben */
  {
     margin-bottom:  0.5em;

  }

  /* VERSUCH */
  aside > div > div > .kasten > *,
  /* aside > div > div > .linklist > *,   auskommentiert 26.4. */
  aside .linkliste,  /* neu 26.4. ?alternativ ggf. fest für 3. Ebene setzen? */
  aside > div > div > .infobox > *,
  aside > div > div > form,
  aside > div > div > p,
  aside > div > div > div > p,
  aside > div > div > div > div > p,
  aside h3,
  aside h4
  {
  padding-left:  0.6em;  /*  Abstand Kasteninhalt zum Seitenrand 26.4.2017 */
  padding-right:  0.4em; /*  Abstand Kasteninhalt zum Seitenrand */
  }

  aside h3
  {
    /* VERSUCH padding:      0.25em 0.2em 0.25em 0.45em;*/
    margin:        0;  /*0 0 10px 0; margin-bottom durch margin-top bei Folge-<div> */
    padding-top:    0.25em;
    padding-bottom:    0.25em;
  }

  aside h4
  {
    margin:        0;
    padding-top:    0.15em;
    padding-bottom:    0.15em;
  }

  aside p
  {
    /* VERSUCH margin:      0.3em 0 0.3em 0;*/
    margin-top:    0.3em;
    margin-bottom:  0.3em;
  }

  /* E.E. 26.4.2017 - "normale" Links im TEXT (nicht in (Link-)listen) */
  aside a
  {
    display: inline;
  }
  /* ENDE E.E. 26.4.2017 */

  /* Einrückung für E-Mail URLs im TEXT (in <p>s, nicht in (Link-)Listen), damit bei langen URLs ein Umbruch analog zu Linklisten erfolgt. */
  aside p a.mail
  {
    margin-left:  1.2em;
    display:    inline-block; /* E.E. 26.4.2017 */
  }

  aside p a.mail::before
  {
    margin-left:  -1.2em;
    margin-right:  0.2em;
  }

  /* Linklisten */

  aside .linkliste  /* Überschreibt den allgemeinen Wert für Linklisten: die Einrückung in der Info-Spalte soll 0 sein. */
  {
    margin-left:  0;
  }

  aside li.mail a
  {
    display:  inline;
  }

  /* Bilder */

  /* Sorgt (zusammen mit #info-spalte aside figure img) bei Bildern dafür, dass kein Abstand nach unten entsteht (Bsp.: 51_fachwerk). */
  #info-spalte aside figure
  {
    display:    block;
    margin-bottom:  0;
  }

  /* Sorgt (zusammen mit #info-spalte aside figure) bei Bildern dafür, dass kein Abstand nach unten entsteht. (Bsp.: 51_fachwerk) */
  #info-spalte aside figure img
  {
    display:  inline-block;
  }

  /* Bilder sollen unten keinen (weißen) Rand haben, daher wird der margin auf 0 gesetzt. */
  #info-spalte aside .ce-textpic
  {
    margin-bottom:  0;
  }

  aside .infobox,
  aside .kasten,  /* EE */
  aside .linklist /* EE */
  {
    /* VERSUCH margin-top:    0.4em;
    margin-bottom:  0.2em;
    padding-bottom:  0.4em;*/
  }

  /* Bei den ersten Elementen dieser Art wird der Abstand oben entfernt, sonst gäbe es über den Kästen einen ungewollten Abstand. */
  /* Der Abstand zwischen den Kästen wird unter aside > div > div festgelegt. */
  #info-spalte aside > div > div .kasten:first-child,
  #info-spalte aside > div > div .linklist:first-child,
  #info-spalte aside > div > div .infobox:first-child
  {
    /* VERSUCH margin-top:    0;*/
  }

  /* Bei den letzten Elementen dieser Art wird der Abstand unten entfernt, sonst gäbe es unter den Kästen einen ungewollten Abstand. */
  /* Der Abstand zwischen den Kästen wird unter aside > div > div festgelegt. */
  #info-spalte aside > div > div .kasten:last-child,
  #info-spalte aside > div > div .linklist:last-child,
  #info-spalte aside > div > div .infobox:last-child
  {
    /* VERSUCH margin-bottom:  0;*/
  }

  aside .infobox-inhalt,    /* Hier wird der Innenabstand zum Inhalt festgelgt, */
  aside .kasten-inhalt,    /* NICHT jedoch der Abstand der Überschriften (hierzu siehe "aside h3"). */
  aside .linklist .linkliste,
  aside .kasten .linkliste  /* kommt bei MM vor (u.a. bei dem Menüpunkt Infomaterial) */
  {
    /* VERSUCH padding:  0.4em 0.4em 0.4em 0.5em;/*0.4em 0.6em 0.4em 0.7em;*/
  }

  aside .linklist:first-child .linkliste
  {
    /* VERSUCH padding-top:  0; /* Padding-top der 1. Linkliste in einem Kasten soll 0 sein. */
  }

  /* Social Icons */
  /* Veraltet - es gibt keine Klasse .social-icons - wird individuell formatiert - kann ab Herbst 2017 gelöscht werden
  aside .social-icons
  {
    margin-bottom:    0.8em;
  }

  aside .social-icons a
  {
    margin-left:    0.5em;
    margin-right:    0.5em;
  }*/

  /* Bilder-URLs */
  /* Veraltet - es gibt keine Klasse .bilder-urls - wird individuell formatiert - kann ab Herbst 2017 gelöscht werden
  aside .bilder-urls img
  {
    width:        194px;
    height:        auto;
    margin-bottom:    0.3em;
  }*/

  /* Formular-Style Info-Spalte (inkl. Buttons) */

  aside form
  {
    overflow:    hidden;
    margin:      0 0 0 0;
  }

  aside form > div
  {
    clear:    both;
    margin:    0.2em 0 0.2em 0;
  }

  aside form label
  {
    display:  inline-block;
  }

  aside form input,
  aside form select,
  aside form textarea
  {
    padding:      0.2em 0.3em 0.2em 0.3em;
    border:        1px solid #cccccc;
    border-radius:    3px;
    max-width:      98%;  /* muss gesetzt werden, damit langer Inhalt nicht über die Spalte hinaus ragt */
  }

  aside form input:focus,
  aside form select:focus,
  aside form textarea:focus
  {
    border:        1px solid #005B795;
  }

  aside form .type-text input
  {
  }

  aside form .buttons    /* Button-Bereich */
  {
    width:    100%;  /* wichtig, damit Inhalt nach rechts rutschen kann */
    margin-top:  0.6em;
  }

  aside form .buttons input
  {
    padding:      0.2rem 0.4rem;/*3px 5px 3px 5px;*/
    border:        1px solid #cccccc;
    border-radius:    3px;
  }

  aside form .buttons input.submit
  {
    margin-right:    0.5em;
  }

  aside form .buttons input.reset
  {
    margin-right:  0.5em;
  }
/* Suche - e.e. 18.12.2019 ---------------------------------------------------------------------------------------- */
  aside #c23142 form {
  padding-left: 0.6em;
  padding-right: 0.4em;
  }
/* ENDE Suche - e.e. 18.12.2019 ----------------------------------------------------------------------------------- */
  /* CSS für die gecurlten XML-Daten von dasWetter.com */
    aside #wetter-wrapper
    {
      min-height:    201px;
    }

    aside #wetter .temp .max
    {
      color:    #c90000;
    }

    aside #wetter .temp .min
    {
      color:    #009BD3;/*#00768D;*/
    }

    aside #wetter .heute
    {
      display:        -ms-flexbox;
      display:        -webkit-flex;
      display:        flex;      /* Macht diesen Container zum Flex-Container - direkte Kinder werden zu Flex-Items */
      -ms-flex-direction:    row;
      -webkit-flex-direction:  row;
      flex-direction:      row;      /* Hauptachse an der sich die Flex-Items (direkte Kind-Elemente) anordnen (hier: Reihe, also horizontal) */
      -ms-flex-pack:      start;
      -webkit-justify-content:space-around;
      justify-content:    space-around;  /* Lage der Flex-Items (direkte Kind-Elemente) entlang der Hauptachse (hier: horizontal): Abstand drumherum */
      -ms-flex-align:      center;
      -webkit-align-items:  center;
      align-items:      center;      /* Lage der Flex-Items (direkte Kind-Elemente) entlang der Cross-Achse (hier: vertikal): zentriert */
      -ms-flex-wrap:      nowrap;
      -webkit-flex-wrap:    nowrap;
      flex-wrap:        nowrap;      /* Umbruch der Items entlang der Hauptachse (wenn zu wenig Platz): kein Umbruch */
    }

    aside #wetter .heute .temp
    {
      margin-right:  -2em;  /* schiebt Temperatur und Wettersymbol näher zusammen */
      font-size:    2em;
    }

    aside #wetter .morgen,
    aside #wetter .uebermorgen
    {
      display:        -ms-flexbox;
      display:        -webkit-flex;
      display:        flex;      /* Macht diesen Container zum Flex-Container - direkte Kinder werden zu Flex-Items */
      -ms-flex-direction:    row;
      -webkit-flex-direction:  row;
      flex-direction:      row;      /* Hauptachse an der sich die Flex-Items (direkte Kind-Elemente) anordnen (hier: Reihe, also horizontal) */
      -ms-flex-pack:      start;
      -webkit-justify-content:flex-start;
      justify-content:    flex-start;  /* Lage der Flex-Items (direkte Kind-Elemente) entlang der Hauptachse (hier: horizontal): am Anfang */
      -ms-flex-align:      center;
      -webkit-align-items:  center;
      align-items:      center;      /* Lage der Flex-Items (direkte Kind-Elemente) entlang der Cross-Achse (hier: vertikal): zentriert */
      -ms-flex-wrap:      nowrap;
      -webkit-flex-wrap:    nowrap;
      flex-wrap:        nowrap;      /* Umbruch der Items entlang der Hauptachse (wenn zu wenig Platz): kein Umbruch */
      padding-left:      1em;
      padding-right:      1em;
    }

    aside #wetter .morgen .tag,
    aside #wetter .uebermorgen .tag
    {
      width:      75px;
      text-transform:  uppercase;
      font-size:    0.95em;
    }

    aside #wetter .morgen .temp,
    aside #wetter .uebermorgen .temp
    {
      width:      55px;
      font-size:    0.95em;
    }

    aside #wetter .morgen .temp .max,
    aside #wetter .uebermorgen .temp .max
    {
      float:  left;
    }

    aside #wetter .morgen .temp .min,
    aside #wetter .uebermorgen .temp .min
    {
      float:  right;
    }

    aside #wetter .morgen .symbol,
    aside #wetter .uebermorgen .symbol
    {
      width:      35px;
      padding-left:  0.5em;
    }

    aside #wetter .morgen .symbol img,
    aside #wetter .uebermorgen .symbol img
    {
      width:      100%;
    }

    aside #wetter .morgen
    {
      margin-top:    1em;
    }

    aside #wetter .daswetter a:hover,
    aside #wetter .daswetter a:focus,
    aside #wetter .daswetter a:active
    {
      background-color:  transparent;
    }

    aside #wetter .daswetter .wetterdetails
    {
      display:    block;
      margin-top:    0.3em;
      padding-right:  1em;
      text-align:    right;
    }

    aside #wetter .daswetter .url
    {
      display:    block;
      text-align:    center;
    }

    aside #wetter .daswetter .url img
    {
      width:    100px;
    }
  /* ENDE CSS für die gecurlten XML-Daten von dasWetter.com */

/* ENDE INFOBEREICH ("rechte Spalte") */






/* CSS für PROJEKTÜBERGREIFENDE jQuery-PLUGINS */


  /* bxSlider (für die Schrift siehe Abschnitt "Schriftformatierung") */
    header .bx-wrapper
    {
      position:  relative;
      top:    -26px;
      margin:    0;
      border:    none;
      padding:  0;
      box-shadow:  none;
    }

    header .bx-wrapper .bx-viewport
    {
      /*height:  215px!important;*/
    }

    header .bx-wrapper .bx-viewport .srcsetImages
    {
      height:  215px;
    }

    header .bx-wrapper .bx-caption
    {
      width:    77%;
      left:    auto;
      right:    0;
    }

    header .bx-wrapper .bx-caption span
    {
      display:    inline-block;
      margin:      0 0 0.5em 0;
      padding:    3px 5px 3px 3px;
    }

    header .bx-wrapper ul.bxslider li
    {
      overflow:  hidden;  /* Wichtig, sonst ragt das Einzel-Headerbild bei Verkleinerung aus dem Rahmen */
    }


     .bx-controls
     {/* -moz-box-shadow:0 0 5px #ccc;
     -webkit-box-shadow:0 0 5px #ccc; (E.E.: wofür brauchen wir den Schatten? damit dotzt das Menü aus dem header. */
     background: rgba(255, 255, 255, 0.7);
     width: 215px;
     height: 22px;
     position: absolute;
     right:0 !important;
     bottom:0 !important;
     z-index: 999;} /* E.E.: war auf 9999 - aber dann legt sich das Menü über ein großes PopUp-Bild */


    header .bx-wrapper .bx-controls .bx-controls-auto
    {
      left:    75px;
      bottom:    auto;
      margin-top:  -19px;
      width:    auto;  /* wichtig, damit Element nicht über die Seitenbreite hinaus ragt */
         position: relative;
         width: 30px;
         z-index: 999999;
    }



    header .bx-wrapper .bx-controls .bx-controls-direction .bx-next {
      left: 0;
      top: 2px;
    }
    header .bx-wrapper .bx-controls .bx-controls-direction .bx-prev {
      left: 0;
      top: 2px;
    }
    header .bx-wrapper .bx-controls .bx-controls-direction a {
      margin-top: -30px;
      top: auto;
    }


    .bx-wrapper .bx-loading{min-height:50px;background:url(images/bx_loader.gif) center center no-repeat #fff;height:100%;width:100%;position:absolute;top:0;left:0;z-index:2000}

    .bx-wrapper .bx-prev{left:0;background:url(images/bx_back-off.png) no-repeat 0 0}
    .bx-wrapper .bx-prev:focus,
    .bx-wrapper .bx-prev:hover{background:url(images/bx_back-on.png) no-repeat 0 0}
    .bx-wrapper .bx-next{right:-30px;background:url(images/bx_next-off.png) no-repeat 0 0}
    .bx-wrapper .bx-next:focus,
    .bx-wrapper .bx-next:hover{background:url(images/bx_next-on.png) no-repeat 0 0}
    .bx-wrapper .bx-controls-direction a{outline:0;width:20px;height:20px;text-indent:-9999px;z-index:9999;margin-left: 10px; position:relative !important;}
    .bx-wrapper .bx-controls-direction a.disabled{display:none}
    .bx-wrapper .bx-controls-auto{text-align:center; width:20px;height:20px;}

    .bx-wrapper .bx-controls-auto .bx-controls-auto-item .bx-start{
    left: -10px;background:url(images/bx_start-off.png); width:20px;height:20px;margin-top: -28px;position:relative !important;}
    .bx-wrapper .bx-controls-auto .bx-start.active,
    .bx-wrapper .bx-controls-auto .bx-start:focus,
    .bx-wrapper .bx-controls-auto .bx-start:hover{background:url(images/bx_start-on.png) no-repeat}
    .bx-wrapper .bx-controls-auto .bx-controls-auto-item .bx-stop{
    left: -10px;background:url(images/bx_stop-off.png); width:20px;height:20px;margin-top: -28px;position:relative !important;}
    .bx-wrapper .bx-controls-auto .bx-stop.active,
    .bx-wrapper .bx-controls-auto .bx-stop:focus,
    .bx-wrapper .bx-controls-auto .bx-stop:hover{background:url(images/bx_stop-on.png) no-repeat}

    .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager{text-align:left;width:80%}
    .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto{right:0;width:35px}
    .bx-wrapper .bx-caption{position:absolute;bottom:0;left:0;background:#666;background:rgba(80,80,80,.75);width:100%}
    .bx-wrapper .bx-caption span{color:#fff;font-family:Arial;display:block;font-size:.85em;padding:10px}

  /* ENDE bxSlider */


  /* Magnifique-Box (für die Schrift siehe Abschnitt "Schriftformatierung")
    Die Zusätze sind wichtig, damit die Lightbox schön aussieht.
    Der Code muss auch im alten basis.css eingefügt werden, da
    die Box nicht nur bei Projekten im neuen CD eingesetzt wird,
    sondern bei allen */
    .mfp-content .mfp-close
    {
      padding-right:    0.4em;
      border-radius:    5px;
      width:        auto;
      height:        40px;
      line-height:    40px;
    }

    .mfp-content figure
    {
      padding:      0 1.5em;
      border-radius:    5px;
      cursor:        auto;
    }

    .mfp-content figure figcaption .mfp-bottom-bar
    {
      padding:      0;
      width:        100%;
      border-radius:    5px;
    }

    .mfp-content figure figcaption .mfp-bottom-bar .mfp-title
    {
      white-space: pre-line;
      display:    inline-block;
      padding:    0.5em 1.2em 0 1.2em;
    }

    .mfp-content figure figcaption .mfp-bottom-bar .mfp-counter
    {
      padding-bottom:  1em;
    }
  /* ENDE Magnifique-Box */


/* ENDE CSS für PROJEKTÜBERGREIFENDE jQuery-PLUGINS */





/* Test */
  div.slider-config div.bx-wrapper div.bx-viewport ul.bxslider li
  {
    width: 960px;
    height:215px;
  }

  header .bx-wrapper .bx-viewport .srcsetImages
  {
    max-width:  1220px!important;
    max-height: 215px!important;
  }
/* ENDE Test */






/* Hilfs-/Debug-Code */

.unsichtbar
{
  display:  none;
}


/* FSC MIGRATION */
.ce-center .ce-outer {
    overflow: visible;
}

.contenttable {
    width: 100%;
    max-width: 100%;
}

.ce-above .ce-gallery {
    margin-bottom: 0px;
}

.ce-image:last-child {
    margin-bottom: 0em;
}


/* Alphaindex */
.frame-type-menu_section .alphaindex ul li:before {
    content: none;
}

.frame-type-menu_section .alphaindex ul,
.frame-type-menu_section .alphaindex ul li ul {
    list-style: none;
    display: inline;
}

.frame-type-menu_section .alphaindex ul li,
.frame-type-menu_section .alphaindex ul li ul li {
    text-indent: 0;
    margin: 0;
    display:inline;
    padding: 0 6px 0 0;
}
/* Alphaindex END */

/* Sprachen Anfang*/
.lang-rtl{
    text-align:right;
    direction: rtl;
    font-size: 1.6rem;
}
.lang-rtl li {
    margin-right:  1.3em;
    text-indent: 3px;
}
.lang-rtl li::before,
.lang-rtl li.intern::before,
.lang-rtl li.extern::before,
.lang-rtl li.pdf::before,
.lang-rtl li.punkt::before,
.lang-rtl li.mail::before,
.lang-rtl li.sprung::before {
    margin-right:  -1.45em;
    margin-left:  0.2em;
 }
.right{
     text-align: right;
}
/* arabisch Anfang */
#arabic_label_description{
    margin-right: 5px;
}
.ar{
    text-align:right;
}

/* arabisch Ende */

/* farsi Anfang*/
#farsi_label_description{
    margin-right: 5px;
}

.fa{
    text-align:right;
}
/* farsi Ende

/* dari Anfang*/
#dari_label_description{
    margin-right: 5px;
}

.prs{
    text-align:right;
}
/* dari Ende */

:lang(uk) > strong , :lang(uk) > b , :lang(uk) >  h1 , :lang(uk) >  h2 ,  :lang(uk) > h3 , :lang(uk) >  h4 {
    font-family:  Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: 600;
}
#navi-spalte nav.sprachennavigation ul li.ua a
{
    font-size: 14px;
}

:lang(ru) > strong , :lang(ru) > b , :lang(ru) >  h1 , :lang(ru) >  h2 ,  :lang(ru) > h3 , :lang(ru) >  h4 {
    font-family:  Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: 600;
}

:lang(jp) > strong , :lang(jp) > b , :lang(jp) >  h1 , :lang(jp) >  h2 ,  :lang(jp) > h3 , :lang(jp) >  h4 {
    font-family:  Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: 600;
}

:lang(gr) > strong , :lang(gr) > b , :lang(gr) >  h1 , :lang(gr) >  h2 ,  :lang(gr) > h3 , :lang(gr) >  h4 {
    font-family:  Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: 600;
}
#navi-spalte nav.sprachennavigation ul li.gr a
{
    font-size: 14px;
}

:lang(bg) > strong , :lang(bg) > b , :lang(bg) >  h1 , :lang(bg) >  h2 ,  :lang(bg) > h3 , :lang(bg) >  h4 {
    font-family:  Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: 600;
}
#navi-spalte nav.sprachennavigation ul li.bg a
{
    font-size: 14px;
}

:lang(ro) > strong , :lang(ro) > b , :lang(ro) >  h1 , :lang(ro) >  h2 ,  :lang(ro) > h3 , :lang(ro) >  h4 {
    font-family:  Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: 600;
}
#navi-spalte nav.sprachennavigation ul li.ro a
{
    font-size: 14px;
}

/* :lang(sr) > strong , :lang(sr) > b , :lang(sr) >  h1 , :lang(sr) >  h2 ,  :lang(sr) > h3 , :lang(sr) >  h4 {
    font-family:  Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: 600;
} */

:lang(ar) > strong , :lang(ar) > b , :lang(ar) >  h1 , :lang(ar) >  h2 ,  :lang(ar) > h3 , :lang(ar) >  h4 {
    font-family:  Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: 600;
}

:lang(prs) > strong , :lang(prs) > b , :lang(prs) >  h1 , :lang(prs) >  h2 ,  :lang(prs) > h3 , :lang(prs) >  h4 {
    font-family:  Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: 600;
}

:lang(ku) > strong , :lang(ku) > b , :lang(ku) >  h1 , :lang(ku) >  h2 ,  :lang(ku) > h3 , :lang(ku) >  h4 {
    font-family:  Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: 600;
}
#navi-spalte nav.sprachennavigation ul li.ku a
{
    font-size: 14px;
}

:lang(da) > strong , :lang(da) > b , :lang(da) >  h1 , :lang(da) >  h2 ,  :lang(da) > h3 , :lang(da) >  h4 {
    font-family:  Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: 600;
}

/* :lang(az) > strong , :lang(az) > b , :lang(az) >  h1 , :lang(az) >  h2 ,  :lang(az) > h3 , :lang(az) >  h4 {
    font-family:  Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: 600;
} */


/* Sprachen Ende */