/* Site-specific additions layered on top of the Webflow export.
   Loaded after octolearn.webflow.css so these rules win.
   Keep this file small - the Webflow CSS itself is not hand-edited. */

/* ---------------------------------------------------------------------------
   Footer logo

   octolearn.webflow.css declares .div-block-5 three times at base level, and
   the last one wins with display:none - so the footer logo was invisible on
   every screen below 1920px, leaving an empty first column in the footer. The
   class only wraps the footer logo now that the dead donation block is gone,
   so scoping the override to the footer container is enough to bring it back
   without resurrecting anything else.
--------------------------------------------------------------------------- */
.footer-flex-container .div-block-5 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

/* ---------------------------------------------------------------------------
   Developer-documentation cards (octolearn-api.html)

   Two Webflow defaults get in the way here:
     - .text-block-10 sets color:#f2f2f2, meant for dark sections. On a light
       section that is invisible, so .darkgrey is applied in the markup.
     - .apischritt children are plain block boxes, so cards whose text wraps to
       a different number of lines push their buttons to different heights.
       Making the card a flex column and giving the button margin-top:auto
       pins every button to the bottom, so they line up across the row.
--------------------------------------------------------------------------- */
.docintro {
  max-width: 780px;
  margin: 0 auto 40px;
  text-align: center;
}

.apischritt.doccard {
  /* .apischritt is flex:1 (basis 0), which should give three equal columns.
     But flex items default to min-width:auto, so they cannot shrink below
     their min-content width - and the long German button labels ("Zur
     Entwicklerdokumentation") push that past a third of the row, leaving the
     columns unequal. min-width:0 lets them shrink and wrap instead. */
  min-width: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

/* .text-block-10 carries align-self:center, which in a flex column would
   shrink the box to its content width and break the centred wrapping. */
.apischritt.doccard .text-block-10 {
  -webkit-align-self: stretch;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  text-align: center;
  margin-bottom: 24px;
}

.apischritt.doccard .button {
  margin-top: auto;   /* pins every button to the bottom, so they line up */
  margin-bottom: 0;
  width: 100%;
  max-width: 300px;
  /* the labels are long single words; let them break rather than overflow.
     The markup also carries a soft hyphen (­) at the German compound
     boundary so "Entwicklerdokumentation" breaks as "Entwickler-dokumentation"
     rather than at an arbitrary character. */
  overflow-wrap: break-word;
  word-wrap: break-word;
  /* One label fits on a single line while the others wrap to two. Without a
     shared min-height the buttons would be different heights in the same row. */
  min-height: 68px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
}