:root {
  --colour-white: #fafafa;
  --colour-black: #222222;
  --colour-black-translucent: rgba(34, 34,34, 0.25);
  --colour-eu-blue: #003399;
  --colour-eu-yellow: #ffcc00;
  --colour-eu-text-background: var(--colour-eu-blue);
  --colour-brand-primary: var(--colour-black);
  --colour-brand-secondary: var(--colour-white);
  --colour-background: var(--colour-brand-secondary);
  --colour-content: var(--colour-brand-primary);
  --colour-links: var(--colour-eu-blue);
  --colour-links-hover: var(--colour-brand-primary);
  --colour-links-active: var(--colour-brand-primary);
  --link-underline-offset: calc(var(--base-spacing-unit) / 4);
  --links-outline-active: red;
  --links-outline-colour: red;
  --links-outline-focus: 2px dotted
    var(--links-outline-colour, var(--colour-eu-yellow));
  --links-outline-active: 2px dotted
    var(--links-outline-colour, var(--colour-eu-yellow));
  --colour-selection: var(--colour-brand-secondary);
  --colour-selection-background: var(--colour-eu-blue);
  --base-spacing-unit: 1rem;
  --base-font-size: calc(var(--base-spacing-unit) * 1.2);
  --base-line-height-prominent: 1.1;
  --base-line-height-normal: 1.6;
  --base-font-family: Helvetica, "Helvetica Neue", sans-serif;
  --accordion-toggler-font-size: var(--base-font-size);
  --accordion-bottom-border: 1px dotted var(--colour-brand-primary);
  --base-fade: 0.5s ease-in-out;
  --eu-stars-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 144 144' height='144' viewBox='0 0 144 144' width='144' fill='%23ffcc00' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m66.45 18.51 5.98-4.36 5.99 4.36-2.28-7.06 6.08-4.37h-7.49l-2.3-7.14-2.29 7.15-7.49-.01 6.08 4.37z'/%3E%3Cpath d='m35.48 26.83 5.99-4.36 5.98 4.36-2.28-7.06 6.08-4.37h-7.5l-2.29-7.15-2.29 7.16-7.49-.01 6.07 4.37z'/%3E%3Cpath d='m12.82 49.55 5.99-4.37 5.98 4.37-2.28-7.07 6.08-4.36h-7.49l-2.29-7.16-2.3 7.16h-7.49l6.08 4.36z'/%3E%3Cpath d='m4.51 80.48 5.98-4.37 5.98 4.37-2.27-7.07 6.07-4.36h-7.48l-2.3-7.16-2.29 7.17-7.49-.01 6.08 4.36z'/%3E%3Cpath d='m21.1 100.07-2.29-7.16-2.3 7.17-7.49-.01 6.08 4.37-2.28 7.06 5.99-4.38 5.98 4.38-2.28-7.06 6.08-4.37z'/%3E%3Cpath d='m43.8 122.77-2.29-7.15-2.29 7.16-7.49-.01 6.07 4.37-2.27 7.06 5.98-4.37 5.98 4.37-2.27-7.06 6.07-4.37z'/%3E%3Cpath d='m74.73 131-2.29-7.16-2.29 7.17-7.49-.01 6.07 4.37-2.27 7.06 5.98-4.37 5.98 4.37-2.27-7.06 6.07-4.37z'/%3E%3Cpath d='m97.39 134.2 5.98-4.37 5.99 4.37-2.28-7.06 6.07-4.37h-7.49l-2.29-7.15-2.29 7.16-7.49-.01 6.07 4.37z'/%3E%3Cpath d='m120.09 111.5 5.99-4.38 5.98 4.38-2.28-7.06 6.08-4.37h-7.49l-2.29-7.16-2.3 7.17-7.49-.01 6.08 4.37z'/%3E%3Cpath d='m132 68.97-7.49-.01 6.08 4.37-2.27 7.06 5.97-4.38 5.99 4.38-2.28-7.06 6.08-4.37h-7.49l-2.3-7.16z'/%3E%3Cpath d='m120.09 49.45 5.99-4.37 5.98 4.37-2.28-7.06 6.08-4.36h-7.49l-2.29-7.16-2.3 7.17-7.49-.01 6.08 4.36z'/%3E%3Cpath d='m97.47 26.84 6-4.37 5.97 4.37-2.27-7.06 6.08-4.38h-7.5l-2.29-7.14-2.29 7.16-7.49-.02 6.07 4.38z'/%3E%3C/svg%3E");
  --image-overlay: transparent;
}


@media (prefers-color-scheme: dark) {
  :root {
    --colour-brand-primary: var(--colour-white);
    --colour-brand-secondary: var(--colour-black);
    --colour-eu-yellow: #e6bd19; /* 80% saturation of official yellow */
    --colour-eu-text-background: var(--colour-white);
    --colour-links: var(--colour-eu-yellow);
    --colour-selection-background: var(--colour-eu-yellow);
    --links-outline-active: yellow;
    --links-outline-colour: yellow;
    --links-outline-focus: 2px dotted
      var(--links-outline-colour, var(--colour-eu-yellow));
    --links-outline-active: 2px dotted
      var(--links-outline-colour, var(--colour-eu-yellow));
    --eu-stars-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 144 144' height='144' viewBox='0 0 144 144' width='144' fill='%23e6bd19' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m66.45 18.51 5.98-4.36 5.99 4.36-2.28-7.06 6.08-4.37h-7.49l-2.3-7.14-2.29 7.15-7.49-.01 6.08 4.37z'/%3E%3Cpath d='m35.48 26.83 5.99-4.36 5.98 4.36-2.28-7.06 6.08-4.37h-7.5l-2.29-7.15-2.29 7.16-7.49-.01 6.07 4.37z'/%3E%3Cpath d='m12.82 49.55 5.99-4.37 5.98 4.37-2.28-7.07 6.08-4.36h-7.49l-2.29-7.16-2.3 7.16h-7.49l6.08 4.36z'/%3E%3Cpath d='m4.51 80.48 5.98-4.37 5.98 4.37-2.27-7.07 6.07-4.36h-7.48l-2.3-7.16-2.29 7.17-7.49-.01 6.08 4.36z'/%3E%3Cpath d='m21.1 100.07-2.29-7.16-2.3 7.17-7.49-.01 6.08 4.37-2.28 7.06 5.99-4.38 5.98 4.38-2.28-7.06 6.08-4.37z'/%3E%3Cpath d='m43.8 122.77-2.29-7.15-2.29 7.16-7.49-.01 6.07 4.37-2.27 7.06 5.98-4.37 5.98 4.37-2.27-7.06 6.07-4.37z'/%3E%3Cpath d='m74.73 131-2.29-7.16-2.29 7.17-7.49-.01 6.07 4.37-2.27 7.06 5.98-4.37 5.98 4.37-2.27-7.06 6.07-4.37z'/%3E%3Cpath d='m97.39 134.2 5.98-4.37 5.99 4.37-2.28-7.06 6.07-4.37h-7.49l-2.29-7.15-2.29 7.16-7.49-.01 6.07 4.37z'/%3E%3Cpath d='m120.09 111.5 5.99-4.38 5.98 4.38-2.28-7.06 6.08-4.37h-7.49l-2.29-7.16-2.3 7.17-7.49-.01 6.08 4.37z'/%3E%3Cpath d='m132 68.97-7.49-.01 6.08 4.37-2.27 7.06 5.97-4.38 5.99 4.38-2.28-7.06 6.08-4.37h-7.49l-2.3-7.16z'/%3E%3Cpath d='m120.09 49.45 5.99-4.37 5.98 4.37-2.28-7.06 6.08-4.36h-7.49l-2.29-7.16-2.3 7.17-7.49-.01 6.08 4.36z'/%3E%3Cpath d='m97.47 26.84 6-4.37 5.97 4.37-2.27-7.06 6.08-4.38h-7.5l-2.29-7.14-2.29 7.16-7.49-.02 6.07 4.38z'/%3E%3C/svg%3E");
    --image-overlay: var(--colour-black-translucent);
  }
}


/* Flat CSS – no nesting – to support older Safari etc */

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

::selection {
	background: var(--colour-selection-background);
	color: var(--colour-selection);
}
    
body {
  background: var(--colour-background);
  color: var(--colour-content);
  font-family: var(--base-font-family);
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0 auto;
  }

.inside {
  padding: 0;
  max-width: calc(var(--base-spacing-unit) * 88); /* 1584px */
  margin: 0 auto;
}  

[id=main] {
  min-height: 5em;
  flex: 1;
}

/* Default styles for supplementary content and legal pages etc */
.main-text,
blockquote,
cite,
p,
ul,
ol
{
  font-weight: 400;
  font-size: var(--base-font-size);
  line-height: 1.5;
  line-height: var(--base-line-height-normal);
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: break-word;
  orphans: 3;
  widows: 3;
}

h2, h3,
article {
  margin-top: calc(var(--base-spacing-unit) * 5)
}

address {
    font-style: normal;
}

/* Continuous flow of filled text */
.prominent-text-flow {
  background: var(--colour-eu-text-background) var(--eu-stars-image) no-repeat center center / contain;
   /* Can't use background shorthand for the below, as it clips the text off to the image size */
  background-repeat: no-repeat;
  background-attachment: fixed; /* See further down for workaround for FF */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.prominent-text-flow h1,
.prominent-text-flow h2,
.prominent-text-flow h3,
.prominent-text-flow .main-text,
.prominent-text-flow blockquote,
.prominent-text-flow cite,
.prominent-text-flow p {
  font-weight: 800;
  font-size: 2rem; /* Fallback if clamp etc not supported */
  font-size: clamp(100%, 2rem + 4vw, 80px);
  line-height: var(--base-line-height-prominent);
  margin: 0; /* Ensures no space before/after blockquote, cite and other stuff when inline */
}

.prominent-text-flow h1,
.prominent-text-flow h2,
.prominent-text-flow h3,
.prominent-text-flow blockquote,
.prominent-text-flow cite,
.prominent-text-flow p {
  display: inline;
}

.prominent-text-flow cite {
  font-style: normal;
  font-weight: 400;
}

.prominent-text-flow h1 {
  text-transform: uppercase;
}

.prominent-text-flow h1:after {
  content: ' ';
}
   


/* Make filled text with background: fixed work in Forefox */
@-moz-document url-prefix() {
  .prominent-text-flow {
    background-attachment: scroll;
  }
}

/* Accordion */
.accordion details {
  border-bottom: var(--accordion-bottom-border);
}

.accordion summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--base-spacing-unit) calc(var(--base-spacing-unit) /2) var(--base-spacing-unit) 0;
  font-weight: 600;
  font-size: var(--accordion-toggler-font-size);
  color: var(--colour-links);
  cursor: pointer;
}

.accordion summary:hover {
  color: var(--colour-links-hover);
}

    
.accordion summary::after {
  content: '';
  border: solid var(--colour-links);
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 4px;
  margin-left: var(--base-spacing-unit);
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.accordion summary:hover::after {
  border: solid var(--colour-links-hover);
  border-width: 0 3px 3px 0;
}

.accordion details[open] > summary::after {
  transform: rotate(-135deg);
  transition: transform 0.3s ease;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.img-full-width {
  width: 100%;
  height: auto;
}

/* Overlays for dark mode */
picture {
  position: relative;
  display: block;
  /* The two lines below help in edge cases with round pictures and overlays in dark mode */
  border-radius: inherit;
  overflow: hidden;
}

  @media (prefers-color-scheme: dark) {
    picture::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--image-overlay);
    pointer-events: none;
    transition: background 0.3s ease;
    border-radius: inherit; /* Handy if I've used border-radius */
  }
}

.normal-text-area,
footer {
  margin: 0 auto;
  padding: var(--base-spacing-unit);
}

.normal-text-area {
  @media screen and (min-width: 800px) {
    max-width: calc(var(--base-spacing-unit) * 62.5); /* 1000px */
  }
}

.normal-text-area .text-columns {
  @media screen and (min-width: 800px) {
    column-gap: calc(var(--base-spacing-unit) * 4);
    column-count: 3;
    column-fill: balance;
    margin-top: calc(var(--base-spacing-unit) * 2);
  }
}

.normal-text-area .text-columns p:first-child {
  @media screen and (min-width: 800px) {
    margin: 0; /* ensures correct vertical alignment */
  }
}


.social-share__list {
  display: flex;
  gap: calc(var(--base-spacing-unit) / 2);
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
} 

.social-share__list img, /* physical images from Dateien,*/
.social-share__list .social-share-icon {
  color: var(--icon-social-shares);
  width: calc(var(--base-spacing-unit) * 2);
}

.social-share__list img:hover, 
.social-share__list .social-share-icon:hover {
  color: var(--icon-social-shares-hover);
  transition: var(--base-fade);
}

.social-share__list img:active, 
.social-share__list .social-share-icon:active {
  color: var(--icon-social-shares-active);
  transition: var(--base-fade);
}


/* Links */

a:focus-visible,
[tabindex='0']:focus-visible,
summary:focus-visible {
  outline: var(--links-outline-focus);
}

  
[tabindex='0']:active {
  outline: var(--links-outline-active);
}

a {
  color: var(--colour-links);
  text-decoration: none;
  text-underline-offset: var(--link-underline-offset);
  display: inline-block;
  }

a:link {
  color: var(--colour-links);
  text-decoration: none;
} 

a:hover {
  color: var(--colour-links-hover);
  text-decoration: none;
  transition: var(--base-fade);
}

a:active {
  color: var(--colour-links-active);
  text-decoration: underline;
  transition: var(--base-fade);
}


/* Footer area with links to legal pages */

[id=footer] {
  width: 100vw;
}

[id=footer] .inside {

  @media screen and (min-width: 600px) {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}

[id=footer] .inside .contact {

  @media screen and (min-width: 600px) {
    margin-right: auto;
  }
}

.invisible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* Lrgal page nav in footer */

.nav--horizontal ul {
  list-style-type: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-size: calc(var(--base-font-size) / 1.3);
  gap: var(--base-spacing-unit);

  @media screen and (min-width: 600px) {
    flex-direction: row;
  }
}

.nav--horizontal ul.active {
  font-weight: 600;
}

.nav--horizontal a {
  text-decoration: none;
}

.nav--horizontal a:active {
  text-decoration: underline;
}