/* cmsms stylesheet: reset modified: Sonntag, 14. Januar 2024 12:34:23 */
/* @docs
label: Core Remedies
version: 0.1.0-beta.2

note: |
  These remedies are recommended
  as a starter for any project.

category: file
*/


/* @docs
label: Box Sizing

note: |
  Use border-box by default, globally.

category: global
*/
*, ::before, ::after { box-sizing: border-box; }


/* @docs
label: Line Sizing

note: |
  Consistent line-spacing,
  even when inline elements have different line-heights.

links:
  - https://drafts.csswg.org/css-inline-3/#line-sizing-property

category: global
*/
html { line-sizing: normal; }


/* @docs
label: Body Margins

note: |
  Remove the tiny space around the edge of the page.

category: global
*/
body { margin: 0; }


/* @docs
label: Hidden Attribute

note: |
  Maintain `hidden` behaviour when overriding `display` values.

  category: global
*/
[hidden] { display: none; }


/* @docs
label: Heading Sizes

note: |
  Switch to rem units for headings

category: typography
*/
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.17rem; }
h4 { font-size: 1.00rem; }
h5 { font-size: 0.83rem; }
h6 { font-size: 0.67rem; }


/* @docs
label: H1 Margins

note: |
  Keep h1 margins consistent, even when nested.

category: typography
*/
h1 { margin: 0.67em 0; }


/* @docs
label: Pre Wrapping

note: |
  Overflow by default is bad...

category: typography
*/
pre { white-space: pre-wrap; }


/* @docs
label: Horizontal Rule

note: |
  1. Solid, thin horizontal rules
  2. Remove Firefox `color: gray`
  3. Remove default `1px` height, and common `overflow: hidden`

category: typography
*/
hr {
  border-style: solid;
  border-width: 1px 0 0;
  color: inherit;
  height: 0;
  overflow: visible;
}


/* @docs
label: Responsive Embeds

note: |
  1. Block display is usually what we want
  2. The `vertical-align` removes strange space-below in case authors overwrite the display value
  3. Responsive by default
  4. Audio without `[controls]` remains hidden by default

category: embedded elements
*/
img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
  max-width: 100%;
}
audio:not([controls]) { display:none; }


/* @docs
label: Responsive Images

note: |
  These new elements display inline by default,
  but that's not the expected behavior for either one.
  This can interfere with proper layout and aspect-ratio handling.

  1. Remove the unnecessary wrapping `picture`, while maintaining contents
  2. Source elements have nothing to display, so we hide them entirely

category: embedded elements
*/
picture { display: contents; }
source { display: none; }


/* @docs
label: Aspect Ratios

note: |
  Maintain intrinsic aspect ratios when `max-width` is applied.
  `iframe`, `embed`, and `object` are also embedded,
  but have no intrinsic ratio,
  so their `height` needs to be set explicitly.

category: embedded elements
*/
img, svg, video, canvas {
  height: auto;
}


/* @docs
label: Audio Width

note: |
  There is no good reason elements default to 300px,
  and audio files are unlikely to come with a width attribute.

category: embedded elements
*/
audio { width: 100%; }

/* @docs
label: Image Borders

note: |
  Remove the border on images inside links in IE 10 and earlier.

category: legacy browsers
*/
img { border-style: none; }


/* @docs
label: SVG Overflow

note: |
  Hide the overflow in IE 10 and earlier.

category: legacy browsers
*/
svg { overflow: hidden; }


/* @docs
label: HTML5 Elements

note: |
  Default block display on HTML5 elements.
  For oldIE to apply this styling one needs to add some JS as well (i.e. `document.createElement("main")`)

links:
  - https://www.sitepoint.com/html5-older-browsers-and-the-shiv/

category: legacy browsers
*/
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}


/* @docs
label: Checkbox & Radio Inputs

note: |
  1. Add the correct box sizing in IE 10
  2. Remove the padding in IE 10

category: legacy browsers
*/
[type='checkbox'],
[type='radio'] {
  box-sizing: border-box;
  padding: 0;
}
/* cmsms stylesheet: fonts modified: Samstag, 27. Januar 2024 17:08:56 */
@font-face {
    font-family : "Prompt-Regular";
    src         : url("/uploads/font/Prompt-Regular.woff2") format("woff2"),
    url("/uploads/font/Prompt-Regular.ttf") format("truetype");
}

@font-face {
    font-family : "Prompt-Light";
    src         : url("/uploads/font/Prompt-Light.woff2") format("woff2"),
    url("/uploads/font/Prompt-Light.ttf") format("truetype");
}
/* cmsms stylesheet: default modified: Donnerstag, 22. Februar 2024 12:00:19 */
/*
Größenrelationen zu einander

normaler Text 25pt -- 1
Überschrift 49pt -- 1.96
Navigation 17pt -- 0.68
Trennlinie 3pt -- 0.12
*/

/* @link https://utopia.fyi/type/calculator?c=360,16,1.2,1920,33,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
    --col-main         : hsl(39, 33%, 51%);
    --col-bg           : hsl(0, 0%, 100%);
    --col-font         : hsl(0, 0%, 0%);
    --col-nav-default  : hsl(0, 0%, 0%);
    --col-nav-active   : hsl(38, 62%, 69%);
    --col-nav-hover    : hsl(38, 36%, 37%);
    --col-attention    : hsl(0, 100%, 33%);

    --ff-regular       : "Prompt-Regular", system-ui, sans-serif;
    --ff-light         : "Prompt-Light", system-ui, sans-serif;

    --chars-per-line   : 80ch;
    --p-line-height    : 1.2;
    --h1-line-height   : 1.15;

    --step--2          : clamp(0.6944rem, 0.6516rem + 0.1903vi, 0.88rem);
    --step--1          : clamp(0.8333rem, 0.7718rem + 0.2735vi, 1.1rem);
    --step-0           : clamp(1rem, 0.9135rem + 0.3846vi, 1.375rem);
    --step-1           : clamp(1.2rem, 1.0803rem + 0.5321vi, 1.7188rem);
    --step-2           : clamp(1.44rem, 1.2765rem + 0.7266vi, 2.1484rem);
    --step-3           : clamp(1.728rem, 1.507rem + 0.9821vi, 2.6855rem);
    --step-4           : clamp(2.0736rem, 1.7774rem + 1.3162vi, 3.3569rem);
    --step-5           : clamp(2.4883rem, 2.0942rem + 1.7516vi, 4.1962rem);

    --fs-default       : var(--step-0);
    --fs-title         : var(--step-4);
    --fs-subtitle      : var(--step-3);
    --fs-nav           : var(--step--1);
    --fs-tile          : var(--step--1);

    --fw-default       : 400;
    --fw-title         : 400;

    --hr-height        : clamp(1px, 0.538px + 0.128vi, 3px);
    --hr-width         : 110px;

    --padding          : calc(var(--fs-default) * 2);

    --tile-width       : 310px;

    --grid-gap         : 0;
    --nav-gap          : calc(var(--fs-default) * 1.5);

    --transition-speed : .25s;
}

body {
    background-color    : var(--col-bg);
    color               : var(--col-font);
    font-family         : var(--ff-light);
    font-size           : var(--fs-default);
    hanging-punctuation : first last;
}

/* =====================*/
/* LAYOUT Deklarationen */
/* =====================*/
nav {
    position         : sticky;
    top              : 0;
    z-index          : 999;
    background-color : #fff;
    /*box-shadow       : 0 1px 10px #000;*/
}

.grid {
    display : grid;
}

.main-layout {
    grid-template-columns : minmax(2rem, 1fr) minmax(300px, var(--chars-per-line)) minmax(2rem, 1fr);
}

.nav-layout {
    grid-column : 2 / span 1;
}

.header-layout {
    grid-column : 1 / -1;
    grid-row    : 1 / span 1;
}

.logo {
    grid-column : 2 / span 1;
    grid-row    : 1 / span 1;
    z-index     : 2;
}

.hero {
    width       : 100%;
    grid-column : 1 / -1;
}

.content-layout {
    grid-column : 2 / span 1;
}

/* =====================*/
/* Navigation           */
/* =====================*/

nav ul {
    display         : flex;
    flex-direction  : row;
    gap             : 5px var(--nav-gap);
    justify-content : flex-end;
    flex-wrap       : wrap;
    font-size       : var(--fs-nav);
    list-style      : none;
}

nav a {
    text-decoration     : none;
    text-transform      : uppercase;
    color               : var(--col-nav-default);
    transition-property : color;
    transition-duration : 250ms;
}

nav a:is(:hover, :focus) {
    color : var(--col-nav-hover);
}

nav .currentpage {
    color : var(--col-nav-active);
}

/* =====================*/

p {
    text-align  : left;
    hyphens     : none;
    /*-ms-hyphens     : auto;*/
    /*-moz-hyphens    : auto;*/
    /*-webkit-hyphens : auto;*/
    line-height : var(--p-line-height);
}


h1 {
    text-align     : center;
    font-family    : var(--ff-regular);
    font-size      : var(--fs-title);
    font-weight    : var(--fw-title);
    text-transform : uppercase;
    line-height    : var(--h1-line-height);
}

h2 {
    text-align     : center;
    font-family    : var(--ff);
    font-size      : var(--fs-subtitle);
    text-transform : uppercase;
}

a[href^="mailto:"] {
    text-decoration     : none;
    color               : var(--col-main);
    transition-property : color;
    transition-duration : 250ms;
}

a[href^="mailto:"]:is(:hover, :focus) {
    color : var(--col-nav-hover);
}

hr {
    width  : var(--hr-width);
    border : var(--hr-height) solid var(--col-main);
}

.logo-img {
    width  : clamp(100px, 15vw, 300px);
    height : auto;
}

header img {
    width  : 100%;
    height : auto;
}

/* ===================================================*/

.tiles {
    grid-template-columns : repeat(auto-fit, minmax(var(--tile-width), 1fr));
    gap                   : var(--grid-gap);
    margin-bottom         : 2rem;
}

@media screen and (max-width : 993px) {
    :not(#portfolio, #partner).tiles {
        grid-template-rows : 1fr 1fr 1fr;
        grid-auto-flow : column;
    }
}

@media screen and (max-width : 683px) {
    :not(#portfolio, #partner).tiles {
        grid-auto-flow : unset;
    }
}

.tile {
    aspect-ratio     : 1 / 1;
    background-color : var(--col-main);
    place-content    : center;
    position         : relative;
}

.tile-text {
    padding  : var(--padding);
    color    : #fff;
    overflow : hidden;
}

.tile-text h1 {
    font-size  : calc(var(--fs-tile) * 1.8);
    margin-top : 0;
}

.tile-text p {
    font-family   : var(--ff-light);
    font-size     : var(--fs-tile);
    text-align    : center;
    hyphens       : none;
    margin-bottom : 0;
}

.tile-text hr {
    border-color : #fff;
}

:is(#portfolio, #partner) .tile-img {
    z-index    : 1;
    position   : relative;
    object-fit : cover;
    transition : all var(--transition-speed) ease-in-out;
}

:is(#portfolio, #partner) .tile-img img {
    transition : all var(--transition-speed) ease-in-out;
}

:is(#portfolio, #partner) .tile-img:is(:hover, :focus, :active) img {
    filter : brightness(40%);
}

:is(#portfolio, #partner) .tile-img::after {
    content     : attr(data-text);
    display     : block;
    position    : absolute;
    top         : 50%;
    left        : 50%;
    transform   : translate(-50%, -50%) scale(0);
    z-index     : 2;
    color       : #fff;
    width       : var(--tile-width);
    height      : auto;
    text-align  : center;
    white-space : pre-wrap;
    transition  : all var(--transition-speed) ease-in-out;
}

:is(#portfolio, #partner) .tile-img:is(:hover, :focus, :active)::after {
    transform : translate(-50%, -50%) scale(1);
}

#partner.tiles {
    grid-template-columns : repeat(auto-fill, minmax(var(--tile-width), 1fr));
    /*gap : 1rem;*/
}

#partner .tile {
    background-color : unset;
}

/*#partner .tile-img img {*/
/*border : 1px solid #666;*/
/*}*/